fix: 简化 Block 配置时的变量名

package.json

@@ -109,7 +109,7 @@
     "react-use": "^17.2.4",
     "rollup-plugin-postcss": "^4.0.0",
     "size-limit": "^5.0.1",
-    "sunmao": "^0.2.2",
+    "sunmao": "^0.2.4",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.0",

src/components/aside/ConfigurationToolbar.tsx

@@ -1,7 +1,7 @@
 import { Popover } from 'antd';
 import React, { useCallback, useRef } from 'react';
+import { ICustomizer } from 'sunmao';
 
-import { ComponentPropertyType } from 'sunmao';
 import { useDispatch, useSelector } from '../../hooks';
 import FormPanel from '../../properties/DynaActionForm';
 import { ActionType, UIActionType } from '../../reducers/actions';
@@ -47,12 +47,12 @@ function EditableZoom() {
 
 function Guides() {
   const ruler = useSelector((state) => state.features.ruler);
-  const customizer = useRef({
+  const customizer = useRef<ICustomizer>({
     fields: [
       {
         name: 'ruler',
         label: '标尺',
-        type: ComponentPropertyType.Boolean,
+        type: 'Boolean',
       },
     ],
   });

src/components/scena/viewport/ScreenViewport.tsx

@@ -1,4 +1,3 @@
-import { CheckOutlined, DownOutlined } from '@ant-design/icons';
 import { InputNumber, Popover } from 'antd';
 import classnames from 'classnames';
 import { isEqual } from 'lodash-es';
@@ -45,7 +44,7 @@ export function DeviceList(props: DeviceListProps) {
       <ul>
         {item.children.map((device: DeviceScreen) => (
           <li key={device.id} onClick={handleClick(device)}>
-            {value.id === device.id && <CheckOutlined />}
+            {value.id === device.id && 'CheckOutlined'}
             <span className="device-name">{device.name}</span>
             <span className="device-size">{device.size.join('x')}</span>
           </li>
@@ -122,9 +121,7 @@ function DeviceScreenPicker() {
               </>
             )}
           </div>
-          <span className="screen-picker-more">
-            <DownOutlined />
-          </span>
+          <span className="screen-picker-more">DownOutlined</span>
         </div>
       </Popover>
       <div className="screen-size">

src/properties/DynaActionForm.tsx

@@ -1,9 +1,9 @@
 import classnames from 'classnames';
 import isEqual from 'lodash/isEqual';
 import React, { useEffect, useState } from 'react';
-import { ComponentPropertyRendererSetting, ComponentPropertyType, IComponentProperty, IGroup, useSunmao } from 'sunmao';
+import { ComponentPropertyRendererSetting, ICustomizer, IField, IGroup, useSunmao } from 'sunmao';
 
-import { DEFAULT_GROUP_ID, ICustomizer } from '../typings';
+import { DEFAULT_GROUP_ID } from '../typings';
 import FormField from './FormField';
 import FormFieldset from './FormFieldset';
 import { useFormSelector, useFormState } from './FormStateContext';
@@ -19,7 +19,7 @@ interface DynaActionFormProps {
 
 interface FormItemWrapperProps {
   component: React.ComponentType<any>;
-  field: IComponentProperty;
+  field: IField;
   defaultValue?: any;
   size: string;
 }
@@ -57,7 +57,7 @@ export const visibleFilter = (props: any) => {
 interface PanelBodyProps {
   group: string;
   layout: 'Inline' | 'Stacked';
-  fields: IComponentProperty[];
+  fields: IField[];
   value: any;
   Form: any;
 }
@@ -70,7 +70,7 @@ const PanelBody = (props: PanelBodyProps) => {
         const { component, props = {} } = item.renderer as ComponentPropertyRendererSetting;
         const ComponentForm = component as React.ComponentType<any>;
         const lable = item.hiddenLabel ? '' : !item.multiple && item.label;
-        const valuePropName = item.type === ComponentPropertyType.Boolean ? 'checked' : undefined;
+        const valuePropName = item.type === 'Boolean' ? 'checked' : undefined;
         return (
           <Form.Item
             key={`${group}-${item.name}`}
@@ -93,7 +93,7 @@ const PanelBody = (props: PanelBodyProps) => {
   );
 };
 
-function getComponentClassName(item: IComponentProperty) {
+function getComponentClassName(item: IField) {
   if (typeof item.renderer.name === 'string') {
     return `form-component-${item.renderer.name.toLowerCase()}`;
   }

src/properties/FormField.tsx

@@ -1,9 +1,9 @@
 import classnames from 'classnames';
 import React from 'react';
-import { IComponentProperty } from 'sunmao';
+import { IField } from 'sunmao';
 
 interface FormFieldProps {
-  field: IComponentProperty;
+  field: IField;
   layout: 'Inline' | 'Stacked';
   className?: string;
   children: React.ReactElement;

src/properties/combine/MultipleWrapper.tsx

@@ -1,4 +1,3 @@
-import { PlusOutlined } from '@ant-design/icons';
 import React, { memo, useRef, useState } from 'react';
 
 // import Sortable, { ISortableItem, SortableItemContentProps } from '../../sortable';
@@ -212,11 +211,7 @@ export function MultipleWrapper<T>(props: MultipleWrapperProps) {
     <div className="multiple-wrapper">
       <div className="multiple-wrapper-header">
         <span className="title">{name || '多值配置'}</span>
-        {canAddItem && (
-          <a onClick={handleInsertRow}>
-            <PlusOutlined />
-          </a>
-        )}
+        {canAddItem && <a onClick={handleInsertRow}>PlusOutlined</a>}
       </div>
       {canSortItem ? (
         {

src/properties/combine/ObjectCombiner.tsx

@@ -1,7 +1,7 @@
 import { Form } from 'antd';
 import { isEqual } from 'lodash-es';
 import React, { useEffect } from 'react';
-import { ComponentPropertyRendererSetting, ComponentPropertyType, IComponentProperty, useSunmao } from 'sunmao';
+import { ComponentPropertyRendererSetting, useSunmao, IField } from 'sunmao';
 
 import { FormItemWrapper, visibleFilter } from '../DynaActionForm';
 import { getRenderer } from '../renderers';
@@ -10,7 +10,7 @@ interface ObjectCombinerProps {
   value?: any;
   onChange?: (value: any) => void;
   className?: string;
-  fields: IComponentProperty[];
+  fields: IField[];
 }
 
 function ObjectCombiner(props: ObjectCombinerProps) {
@@ -38,7 +38,7 @@ function ObjectCombiner(props: ObjectCombinerProps) {
         const { component, props = {} } = item.renderer as ComponentPropertyRendererSetting;
         const ComponentForm = component as React.ComponentType<any>;
         const lable = item.hiddenLabel ? '' : !item.multiple && item.label;
-        const valuePropName = item.type === ComponentPropertyType.Boolean ? 'checked' : undefined;
+        const valuePropName = item.type === 'Boolean' ? 'checked' : undefined;
         return (
           <Form.Item
             className={`object-combiner-field-${item.name}`}

src/properties/combine/WrapperComponentSelectItem.tsx

@@ -1,5 +1,4 @@
 import React, { memo, MutableRefObject } from 'react';
-import { CloseOutlined } from '@ant-design/icons';
 import { IMultipleWrapperData } from './MultipleWrapper';
 import { useReactComponent } from 'sunmao';
 import { SortableHandler } from './WrapperItem';
@@ -35,11 +34,7 @@ function WrapperItem(props: WrapperItemProps) {
           onChange({ ...data, componentId });
         }}
       /> */}
-      {canDelete && (
-        <a onClick={onDelete}>
-          <CloseOutlined />
-        </a>
-      )}
+      {canDelete && <a onClick={onDelete}>CloseOutlined</a>}
     </div>
   );
 }

src/properties/combine/WrapperItem.tsx

@@ -1,4 +1,3 @@
-import { CloseOutlined, EditOutlined } from '@ant-design/icons';
 import Icon from '@asany/icons';
 import { Checkbox, Input } from 'antd';
 import React, { memo, MutableRefObject } from 'react';
@@ -91,15 +90,13 @@ function WrapperItem(props: WrapperItemProps) {
 
         {canEdit && (
           <a ref={itemRef} onClick={handleEditClick}>
-            <EditOutlined />
+            EditOutlined
           </a>
         )}
         {canDelete && data.isPreset ? (
           <Checkbox style={{ marginLeft: '6px' }} checked={!data.isDelete} onClick={onDelete} />
         ) : (
-          <a onClick={onDelete}>
-            <CloseOutlined />
-          </a>
+          <a onClick={onDelete}>CloseOutlined</a>
         )}
       </div>
     </>

src/properties/combine/WrapperPopoverContent.tsx

@@ -1,13 +1,11 @@
 import React, { memo, useEffect, useState } from 'react';
-import { CloseOutlined } from '@ant-design/icons';
 import './style/WrapperPopoverContent.less';
-import { IComponentProperty } from 'sunmao';
+import { IField, ICustomizer } from 'sunmao';
 import DynaActionForm from '../DynaActionForm';
-import { ICustomizer } from '../../typings';
 
 export interface PopoverFields<T> {
   /** 传递 fields 或者 根据当前的 value 某些值获得 fields 的函数 */
-  fields: ((value: T) => IComponentProperty[]) | IComponentProperty[];
+  fields: ((value: T) => IField[]) | IField[];
 }
 
 export interface WrapperPopoverContentProps<T> extends PopoverFields<T> {
@@ -31,7 +29,7 @@ WrapperPopoverContent.defaultProps = {
 function WrapperPopoverContent(props: WrapperPopoverContentProps<any>) {
   const { contentRef, fields: fieldsProp, value, maxHeight, width, onClose, onChange } = props;
 
-  const [fields, setFields] = useState<IComponentProperty[]>([] as IComponentProperty[]);
+  const [fields, setFields] = useState<IField[]>([] as IField[]);
 
   const [customizer, setCustomizer] = useState<ICustomizer>({
     groups: [
@@ -45,7 +43,7 @@ function WrapperPopoverContent(props: WrapperPopoverContentProps<any>) {
   });
 
   useEffect(() => {
-    const currentFields: IComponentProperty[] = Array.isArray(fieldsProp) ? fieldsProp : fieldsProp(value);
+    const currentFields: IField[] = Array.isArray(fieldsProp) ? fieldsProp : fieldsProp(value);
     setFields(currentFields);
     setCustomizer({
       groups: [
@@ -69,9 +67,7 @@ function WrapperPopoverContent(props: WrapperPopoverContentProps<any>) {
       ref={contentRef}
     >
       <div className="popover-content__title">
-        <a onClick={onClose}>
-          <CloseOutlined />
-        </a>
+        <a onClick={onClose}>CloseOutlined</a>
       </div>
       {/* 使用 contentRef 中的组件
        有弹出层的需要配置(如 select ) 基于 弹出层基于父组件而不是 body 上

src/properties/renderers/index.tsx

@@ -2,12 +2,7 @@ import { Radio, Select } from 'antd';
 import React, { ComponentType } from 'react';
 import Sunmao from 'sunmao';
 
-import {
-  ComponentPropertyRenderer,
-  ComponentPropertyRendererSetting,
-  ComponentPropertyType,
-  IComponentProperty,
-} from 'sunmao';
+import { ComponentPropertyRenderer, ComponentPropertyRendererSetting, IField } from 'sunmao';
 import MultipleWrapper from '../combine/MultipleWrapper';
 
 const EmptyRenderer = () => <></>;
@@ -32,21 +27,16 @@ function crbc(component: ComponentType<any>, props: any = {}, name?: string) {
   return { name, component: component || EmptyRenderer, props };
 }
 
-export function getDefaultRenderer(
-  sunmao: Sunmao,
-  library: string,
-  item: IComponentProperty
-): ComponentPropertyRendererSetting {
+export function getDefaultRenderer(sunmao: Sunmao, library: string, item: IField): ComponentPropertyRendererSetting {
   switch (item.type) {
-    case ComponentPropertyType.Integer:
+    case 'Integer':
       return cr(sunmao, `${library}.InputNumber`);
-    case ComponentPropertyType.Text:
-    case ComponentPropertyType.String:
+    case 'String':
       return cr(sunmao, `${library}.Input`);
-    case ComponentPropertyType.Boolean:
+    case 'Boolean':
       const comTemp = cr(sunmao, `${library}.Checkbox`);
       return crbc(comTemp.component, { children: item.label }, comTemp.name);
-    case ComponentPropertyType.Enum:
+    case 'Enum':
       const props: any = { style: { width: '100%' } };
       if (item.enumeration) {
         props.children = item.enumeration.values.map((v: any) => (
@@ -61,13 +51,13 @@ export function getDefaultRenderer(
   }
 }
 
-function getBasisRenderer(sunmao: Sunmao, library: string, item: IComponentProperty): ComponentPropertyRenderer {
+function getBasisRenderer(sunmao: Sunmao, library: string, item: IField): ComponentPropertyRenderer {
   if (!item.renderer) {
     return getDefaultRenderer(sunmao, library, item);
   }
   if (typeof item.renderer === 'string') {
     switch (item.type) {
-      case ComponentPropertyType.Enum: // 枚举类型
+      case 'Enum': // 枚举类型
         const props: any = { style: { width: '100%' } };
         if (item.enumeration) {
           props.children = item.enumeration.values.map((v: any) => (
@@ -95,7 +85,7 @@ function getBasisRenderer(sunmao: Sunmao, library: string, item: IComponentPrope
   return crbc(item.renderer['component'] as any, item.renderer['props']);
 }
 
-export function getRenderer(sunmao: Sunmao, library: string, item: IComponentProperty): ComponentPropertyRenderer {
+export function getRenderer(sunmao: Sunmao, library: string, item: IField): ComponentPropertyRenderer {
   const render = getBasisRenderer(sunmao, library, item);
   if (item.wrappers) {
     if ((item as any).wrapperRender) {

src/typings.ts

@@ -38,40 +38,9 @@ export interface IComponent {
   props?: IComponentProperty[];
 }
 
-export interface IFieldGroup {
-  id: string;
-  name?: string;
-  visible?: boolean | VisibleFunc;
-  layout?: 'Inline' | 'Stacked';
-}
-
 export const DEFAULT_GROUP_ID = 'DEFAULT';
 export const DEFAULT_TABPANE_ID = 'DEFAULT';
 
-export interface ITabPane {
-  name: string;
-  visible?: boolean | VisibleFunc;
-  groups: string[] | IFieldGroup[];
-  customizer?: ICustomizer;
-}
-
-export interface ICustomizer {
-  /**
-   * 展示画框详情
-   */
-  frame?: boolean;
-  dynamic?: boolean;
-  tabs?: ITabPane[];
-  /**
-   * 字段分组设置
-   */
-  groups?: IFieldGroup[];
-  /**
-   * 配置字段
-   */
-  fields: IComponentProperty[];
-}
-
 /**
  * 工具位置: 头部左边, 头部右边, 左边头部, 左边底部
  */

src/utils/BlockAside.tsx

@@ -1,13 +1,10 @@
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import React, { useContext, useRef } from 'react';
+import { ICustomizer, IFieldGroup } from 'sunmao';
 
-// import DynaActionForm from '../../library-manager/DynaActionForm';
-// import { ComponentPropertyType } from '../../library-manager/typings';
-
-import FormPanel from '../properties/DynaActionForm';
-// import { useSelector } from '../hooks';
 import CurrentElementInformation from '../properties/CurrentElementInformation';
-import { AsideTabPane, ComponentPropertyType, DEFAULT_GROUP_ID, ICustomizer, IFieldGroup } from '../typings';
+import FormPanel from '../properties/DynaActionForm';
+import { AsideTabPane, DEFAULT_GROUP_ID } from '../typings';
 
 export const DynaActionFormContext = React.createContext<any>({});
 
@@ -43,7 +40,7 @@ export function buildAside(customizer: ICustomizer, namespace?: string) {
       name: 'rect',
       group: 'DEFAULT-rect',
       renderer: CurrentElementInformation,
-      type: ComponentPropertyType.JSON,
+      type: 'JSON',
     });
   }