@cloudbase/weda-ui 0.2.6-alhpa.0 → 0.2.9

package/src/mp/components/form/uploader/index.js

@@ -1,4 +1,5 @@
 import { getCloudInstance } from '../../../utils/tcb';
+import deepEqual from '../../../utils/deepEqual';
 
 Component({
   options: {
@@ -7,7 +8,8 @@ Component({
   lifetimes: {
     attached() {
       this.setData({
-        urls: this.properties.defaultValue
+        urls: this.properties.defaultValue,
+        files: this.properties.defaultValue.map(url => ({url}))
       });
     }
   },
@@ -31,12 +33,21 @@ Component({
     defaultValue: {
       type: Array,
       value: []
+    },
+    single: {
+      type: Boolean,
+      value: false
+    },
+    maxSize: {
+      type: Number,
+      value: 10
     }
   },
   data: {
+    maxCount: 0,
     files: [],
     urls: [],
-    uploadFile: async (files) => {
+    uploadFile: async function (files) {
       // 文件上传的函数，返回一个promise
       const uploadPath = 'weda-uploader';
 
@@ -51,8 +62,11 @@ Component({
         return { fileID: uploadRes.fileID };
       });
       const uploadFileList = await Promise.all(uploadPromise);
-      const urls = uploadFileList.map((file) => file.fileID);
-      return { urls, tempUrls: files.tempFilePaths };
+      const cloudUrls = uploadFileList.map((file) => file.fileID);
+      // 这里返回的东西会在uploadSuccess回调函数中获取到
+      // https://github.com/wechat-miniprogram/weui-miniprogram/blob/a3630575910302e3b94e69fcef266d2b509de650/src/components/uploader/uploader.ts#L149
+      // 写死的从返回值的 .urls 获取展示用的url来用。一定要将tempFilePaths透传下去，否则会重新加载然后出现闪白
+      return { urls: files.tempFilePaths, cloudUrls };
     }
   },
   methods: {
@@ -61,7 +75,7 @@ Component({
       this.triggerEvent('error', e.detail);
     },
     uploadSuccess: async function (e) {
-      const urls = e.detail.urls; // uploadFile 获取返回值
+      const urls = e.detail.cloudUrls; // uploadFile 获取返回值
       // 小程序自带tempURL 不需要调用 tcb.getTempFileURL 获取
       this.triggerEvent(
         'success',
@@ -70,22 +84,42 @@ Component({
         }
       );
       this.setData({
-        files: this.data.files.concat(e.detail.tempUrls.map(url => ({url}))),
+        files: this.data.files.concat(e.detail.urls.map(url => ({url}))),
         urls: [...this.data.urls, ...urls]
       });
       
     },
+    onDelete: function(e) {
+      this.setData({
+        files: this.data.files.filter((v, index) => e.detail.index !== index),
+        urls: this.data.urls.filter((v, index) => e.detail.index !== index)
+      });
+    }
   },
   observers: {
-    'defaultValue': function(value) {
-      // change value
-      if(!value || value.length === 0) {
-        this.setData({files: []});
-        this.setData({urls: []});
-      }
+    // 'defaultValue': function(value) {
+    //   if(!deepEqual(value, this.data.urls)) {
+    //     if(!Array.isArray(value)) {
+    //       value = [value].filter(v => v.length > 0);
+    //     }
+    //     this.setData({
+    //       files: value.map(f => ({url: f})),
+    //       urls: value
+    //     });
+    //   }
+    // },
+    'maxUploadCount, single': function(maxUploadCount, single) {
+      const maxCount = single ? 1 : maxUploadCount;
+      this.setData({
+        maxCount
+      });
     },
     'urls': function (urls) {
-      this.triggerEvent('change', {value: urls});
+      let value = urls;
+      if(this.properties.single) {
+        value = urls[0] ?? '';
+      }
+      this.triggerEvent('change', {value});
     }
   }
-});
+});

package/src/mp/components/form/uploader/index.wxml

@@ -1,8 +1,15 @@
 <mp-cells>
     <mp-cell>
-        <mp-uploader files="{{files}}" showDelete="{{false}}" ext-class="{{layout}}" bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uploadFile}}" maxCount="{{maxUploadCount}}" title="{{title}}" tips="{{tips}}"></mp-uploader>
+        <mp-uploader max-size="{{maxSize  * 1024 * 1024}}" files="{{files}}" showDelete="{{true}}" ext-class="{{layout}}" bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uploadFile}}" maxCount="{{maxCount}}" title="{{title}}" tips="{{tips}}" binddelete="onDelete"></mp-uploader>
     </mp-cell>
 </mp-cells>
 <!-- uploader delete 实际代码接受 showDelete
     https://developers.weixin.qq.com/community/develop/doc/000a4e7b9cc158c110aa3961056400
- -->
+ -->
+
+ <!-- bind开头的是事件handler，wxml模版中不能带 `{{}}`
+```
+<mp-uploader files="{{files}}" showDelete="{{true}}" ext-class="{{layout}}" bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uploadFile}}" maxCount="{{maxUploadCount}}" title="{{title}}" tips="{{tips}}" binddelete="onDelete"></mp-uploader>
+```
+upload 是函数带{{}}， bindtelete直接传函数名字符串 
+-->

package/src/mp/components/image/index.js

@@ -1,5 +1,3 @@
-import handleEvents from '../../utils/handleEvents';
-
 Component({
   options: {
     virtualHost: true,
@@ -48,17 +46,55 @@ Component({
     }
   },
   methods: {
-    ...handleEvents([
-      { name: 'load', title: '加载成功' },
-      { name: 'error', title: '加载失败' },
-    ]),
+    load: function(e) {
+      this.triggerEvent('error', e.detail);
+      this.setData({
+        realHeight: e.detail.height,
+        realWidth: e.detail.width
+      });
+    },
+    error: function(e) {
+      this.setData({
+        isError: true,
+        clsx: this.properties.className + 'weda-image-error'
+      });
+      this.triggerEvent('error', e.detail);
+    },
     onImgTap: function() {
-        if(this.properties.imgPreview) {
+        if(this.properties.imgPreview && !this.data.isError) {
+          // 计算图片预览展示高度
+          const {windowWidth, windowHeight} = wx.getSystemInfoSync();
+          const showHeight = windowWidth / (this.data.realWidth / this.data.realHeight);
+          const offsetHeight = windowHeight / 2 - (showHeight / 2);
             this.setData({
-                showImg: true
+              showImg: true,
+              zoom: 1,
+              previewTranslateY: 0,
+              previewTranslateX: 0,
+              showHeight,
+              offsetHeight
             });
         }
     },
+    onPinch: function(ev) {
+      let zoom = ev.detail.zoom;
+      // zoom = this.data.zoom * zoom;
+      if(zoom > 5) {
+        zoom = 5;
+      }
+      if(zoom < 0.6) {
+        zoom = 0.6;
+      }
+      this.setData({
+        zoom
+      });
+    },
+    onPressMove: function(ev) {
+      this.setData({
+        previewTranslateX: this.data.previewTranslateX + ev.detail.deltaX,
+        previewTranslateY: this.data.previewTranslateY + ev.detail.deltaY
+      });
+    },
     onMaskClick: function() {
         if(this.properties.maskClosable) {
             this.setData({
@@ -76,8 +112,21 @@ Component({
     showImg: false,
     realSrc: '',
     imgMode: 'scaleToFill',
+    clsx: '',
+    isError: false,
+    zoom: 1,
+    previewTranslateX: 0,
+    previewTranslateY: 0,
+    realHeight: 0,
+    realWidth: 0
   },
   observers: {
+    className: function() {
+      const className = this.properties.className;
+      this.setData({
+        clsx: className
+      });
+    },
     src: function () {
       const { src = '' } = this.properties;
       let { app } = getApp();

package/src/mp/components/image/index.json

@@ -1,4 +1,7 @@
 {
   "component": true,
-  "styleIsolation": "shared"
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "gesture": "miniprogram-gesture/gesture"
+  }
 }

package/src/mp/components/image/index.wxml

@@ -1,6 +1,6 @@
 <image
  style="{{style}}"
- class="weda-ui weda-image {{className}}"
+ class="weda-ui weda-image {{clsx}}"
  src="{{realSrc}}"
  alt="{{alt}}"
  mode="{{imgMode}}"
@@ -14,5 +14,7 @@
         <view bindtap="onCloseClick" class="weda-img-modal-close-btn">
           <icon type="clear" size="23" color="white"></icon>
         </view>
-    <view class="weda-img-preview" style="background-image: url('{{realSrc}}');"></view>
+        <gesture bindpinch="onPinch" catchtap="onTapImgPreview" bindpressMove="onPressMove">
+          <view class="weda-img-preview" style="margin-top:{{offsetHeight}}px;width: 100%;height:{{showHeight}}px;background-image: url('{{realSrc}}');transform: scale({{zoom}}) translateX({{previewTranslateX}}px) translateY({{previewTranslateY}}px);"></view>
+        </gesture>
 </view>

package/src/mp/components/image/index.wxss

@@ -30,3 +30,17 @@
   display: inline-block;
   z-index: 99;
 }
+
+.weda-image-error {
+  position: relative;
+}
+
+.weda-image-error::before {
+  content: '';
+  background: #f5f5f5 url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjUuMzIgMTYuMzU5N0MyNi4wNzY0IDE2LjM1OTcgMjYuODI1NCAxNi41MDg3IDI3LjUyNDMgMTYuNzk4MUMyOC4yMjMxIDE3LjA4NzYgMjguODU4MSAxNy41MTE5IDI5LjM5MjkgMTguMDQ2OEMyOS45Mjc4IDE4LjU4MTYgMzAuMzUyMSAxOS4yMTY2IDMwLjY0MTYgMTkuOTE1NEMzMC45MzEgMjAuNjE0MyAzMS4wOCAyMS4zNjMzIDMxLjA4IDIyLjExOTdDMzEuMDggMjIuODc2MSAzMC45MzEgMjMuNjI1MSAzMC42NDE2IDI0LjMyMzlDMzAuMzUyMSAyNS4wMjI4IDI5LjkyNzggMjUuNjU3OCAyOS4zOTI5IDI2LjE5MjZDMjguODU4MSAyNi43Mjc1IDI4LjIyMzEgMjcuMTUxOCAyNy41MjQzIDI3LjQ0MTJDMjYuODI1NCAyNy43MzA3IDI2LjA3NjQgMjcuODc5NyAyNS4zMiAyNy44Nzk3QzIzLjc5MjQgMjcuODc5NyAyMi4zMjczIDI3LjI3MjggMjEuMjQ3MSAyNi4xOTI2QzIwLjE2NjkgMjUuMTEyNCAxOS41NiAyMy42NDczIDE5LjU2IDIyLjExOTdDMTkuNTYgMjAuNTkyIDIwLjE2NjkgMTkuMTI3IDIxLjI0NzEgMTguMDQ2OEMyMi4zMjczIDE2Ljk2NjUgMjMuNzkyNCAxNi4zNTk3IDI1LjMyIDE2LjM1OTdaTTI4IDMuNTU5NjlWMTQuODc2OEMyNy4xNzc3IDE0LjU4NjYgMjYuMTkyIDE0LjQzODggMjUuMzIgMTQuNDM5N0MyNC4wMzEgMTQuNDM5NyAyMi44MTU3IDE0Ljc1NzEgMjEuNzQ4OCAxNS4zMTg0TDIwLjc5NTIgMTMuMTU5N0wxNi4wMjU5IDIwLjAyNzVMOC40NDU3NiAxNi40NDFMMy41NiAyMy4zOTk3SDE3Ljc0NjJDMTcuOTg2NyAyNC44MjkgMTguNjI4MiAyNi4xNjA2IDE5LjU5NTggMjcuMjM5N0gxVjMuNTU5NjlIMjhaTTI1Ljk2IDI0LjAzOTdIMjQuNjhWMjUuMzE5N0gyNS45NlYyNC4wMzk3Wk0yNS45NiAxOC45MTk3SDI0LjY4VjIzLjM5OTdIMjUuOTZWMTguOTE5N1pNNi4xMiAxMC41OTk3QzYuMTIgMTEuOTk4MSA3LjE5OTA0IDEzLjEwODUgOC42MDc2OCAxMy4xNTg0QzEwLjAyMDggMTMuMjA3NyAxMS4yNCAxMi4wNDggMTEuMjQgMTAuNTk5N0MxMS4yNCA5LjI0NjA5IDEwLjA2NDMgOC4wODU3NyA4Ljc1MjMyIDguMDQwOTdDNy4yOTU2OCA3Ljk5MTY5IDYuMTIgOS4xNTEzNyA2LjEyIDEwLjU5OTdaIiBmaWxsPSIjQkNDNEQwIj48L3BhdGg+Cjwvc3ZnPgo=') no-repeat center / 50% 50%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}

package/src/mp/components/richText/index.wxml

@@ -1 +1,3 @@
-<rich-text className="{{className}}" style="{{style}}" nodes="{{__html}}"></rich-text>
+<view class="weda-ui {{className}}" style="{{style}}">
+  <rich-text nodes="{{__html}}"></rich-text>
+</view>

package/src/mp/components/tabs/index.js

@@ -7,13 +7,20 @@ Component({
   },
 
   properties: {
-    tabs: Array,
-    scrollCellId: ''
+    tabs: { type: Array, value: [] },
+    scrollCellId: {
+      type: String,
+      value: '',
+    },
+    selectedIndex: {
+      type: Number,
+      value: 0
+    }
   },
 
   data: {
     currentIndex: 0,
-    stickyStyle: null
+    stickyStyle: null,
   },
 
   methods: {
@@ -21,14 +28,23 @@ Component({
       const { tabs } = this.data;
       const { index } = e.target.dataset;
       this.setData({
-        currentIndex: index
+        currentIndex: index,
       });
-
+      this.triggerEvent('change', {id: index, label: tabs[index].title});
       if (tabs.length > 5) {
         this.setData({
-          scrollCellId: `cell-${ Math.max(index - 2, 0) }`
+          scrollCellId: `cell-${Math.max(index - 2, 0)}`,
         });
       }
     },
+  },
+  observers: {
+    'selectedIndex': function(selectedIndex) {
+      if(selectedIndex !== this.data.currentIndex) {
+        this.setData({
+          currentIndex: selectedIndex
+        });
+      }
+    }
   }
 });

package/src/mp/utils/deepEqual.js

@@ -0,0 +1,42 @@
+function equal(a, b) {
+    if (a === b) return true;
+  
+    if (a && b && typeof a == 'object' && typeof b == 'object') {
+      if (a.constructor !== b.constructor) return false;
+  
+      var length, i, keys;
+      if (Array.isArray(a)) {
+        length = a.length;
+        if (length != b.length) return false;
+        for (i = length; i-- !== 0;)
+          if (!equal(a[i], b[i])) return false;
+        return true;
+      }
+  
+  
+  
+      if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
+      if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
+      if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+  
+      keys = Object.keys(a);
+      length = keys.length;
+      if (length !== Object.keys(b).length) return false;
+  
+      for (i = length; i-- !== 0;)
+        if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+  
+      for (i = length; i-- !== 0;) {
+        var key = keys[i];
+  
+        if (!equal(a[key], b[key])) return false;
+      }
+  
+      return true;
+    }
+  
+    // true if both NaN, false otherwise
+    return a!==a && b!==b;
+  }
+
+  export default equal;

package/src/web/actions/index.js

@@ -1,4 +1,2 @@
-import showToast from './showToast';
-import showModal from './showModal';
-
-export default { showToast, showModal };
+export { default as showToast } from './showToast';
+export { default as showModal } from './showModal';

package/src/web/components/form/checkbox/index.jsx

@@ -5,7 +5,6 @@ import { Checkbox as TeaCheckbox, ConfigProvider } from 'tea-component';
 import classNames from '../../../utils/classnames';
 import getLocalCounter from '../../../utils/getLocalCounter';
 import isObjectEqual from '../../../utils/isObjectEqual';
-import FormCell from '../formcell';
 import fromEntries from 'object.fromentries';
 import { usePlatform } from '../../../utils/platform';
 import { renderDecorator } from '../renderDecorator';
@@ -62,6 +61,7 @@ export default function Checkbox({
    */
   const getChangeHandler = function (value) {
     const onChange = function (e) {
+      e.stopPropagation();
       const checked = !checkedItems[value];
       const newMap = Object.assign({}, checkedItems, { [value]: checked });
       setCheckedItems(newMap);
@@ -78,36 +78,34 @@ export default function Checkbox({
   };
 
   // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
-  const hashcode = getLocalCounter();
+  const hashcode = React.useMemo(() => getLocalCounter(), []);
   let checkboxElement;
   if(platform === 'h5') {
     checkboxElement = range.map(({ label, value }, index) => {
       const _id = `checkbox-${hashcode}-${index}`;
       const _name = `checkbox-${hashcode}-${name}`;
       return (
-        <label
-          className={subCls}
-          htmlFor={_id}
+        <div
           key={_id}
-          onClick={getChangeHandler(value)}
+          onClickCapture={getChangeHandler(value)}
+          className={subCls}
         >
           <div className="weui-cell__hd">
             <input
               type="checkbox"
               className="weui-check"
               value={value}
-              name={_name}
               id={_id}
-              defaultChecked={checkedItems[value]}
+              name={_name}
+              checked={checkedItems[value]}
               disabled={disabled}
-              onClick={(e) => e.stopPropagation()}
             />
             <i className="weui-icon-checked"></i>
           </div>
           <div className="weui-cell__bd">
             <p>{label}</p>
           </div>
-        </label>
+        </div>
       );
     });
   } else {

package/src/web/components/form/enumSelect/MultipleSelect.jsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
 import { SelectMultiple } from 'tea-component';
 
-import FormContainer from './FormContainer';
+import SelectContainer from './SelectContainer';
 
 import { normalProps } from './props/defaultProps';
 import { propTypes } from './props/propsTypes';
 import useOptions from './hooks';
 
-const { useRef } = React;
-
 const MultipleSelect = ({
   // 系统属性
   id,
@@ -20,6 +18,7 @@ const MultipleSelect = ({
   labelVisible,
   layout,
   requiredFlag,
+  decorator,
   // tea组件属性
   value,
   placeholder,
@@ -38,26 +37,13 @@ const MultipleSelect = ({
   optionId,
   isModelApp,
 }) => {
-  const defaultValue = Array.isArray(value) ? value.map((i) => i?.key) : [];
   const options = useOptions({ enumType, optionId, customEnum });
-  const selectValueRef = useRef(value);
 
-  const onSelectChange = (_values, context) => {
-    const currentSelectValue = selectValueRef.current?.concat();
-    const { name, title, value } = context?.check || {};
-    if (value) {
-      currentSelectValue.push({ key: name, name: title });
-    } else {
-      const index = currentSelectValue?.findIndex(
-        (i) => i?.key?.toString() === name
-      );
-      currentSelectValue.splice(index, 1);
-    }
-    selectValueRef.current = currentSelectValue;
+  const onSelectChange = (values) => {
     // @ts-ignore
-    events.change && events.change({ value: currentSelectValue });
+    events.change && events.change({ value: values });
     if (onChange) {
-      onChange(currentSelectValue);
+      onChange(values);
     }
   };
 
@@ -72,7 +58,7 @@ const MultipleSelect = ({
     matchButtonWidth,
     searchable,
     size,
-    defaultValue,
+    defaultValue: value || [],
     allOption,
     staging: false,
     virtual,
@@ -82,17 +68,20 @@ const MultipleSelect = ({
     return <SelectMultiple {...multipleSelectProps} />;
   }
   return (
-    <FormContainer
+    <SelectContainer
       style={style}
       className={className}
-      label={labelVisible ? label : null}
+      label={label}
+      labelVisible={labelVisible}
       layout={layout}
       // @ts-ignore
       multiCell={false}
       requiredFlag={requiredFlag}
+      decorator={decorator}
+      id={id}
     >
       <SelectMultiple {...multipleSelectProps} />
-    </FormContainer>
+    </SelectContainer>
   );
 };
 MultipleSelect.propTypes = {

package/src/web/components/form/enumSelect/NormalSelect.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Select } from 'tea-component';
 
-import FormContainer from './FormContainer';
+import SelectContainer from './SelectContainer';
 
 import { multipleProps } from './props/defaultProps';
 import { propTypes } from './props/propsTypes';
@@ -30,6 +30,7 @@ const NormalSelect = ({
   labelVisible,
   layout,
   requiredFlag,
+  decorator,
   // tea组件属性
   value,
   placeholder,
@@ -48,18 +49,14 @@ const NormalSelect = ({
   isModelApp,
 }) => {
   const options = useOptions({ enumType, optionId, customEnum });
-  const [selectedValue, setSelectedValue] = useValue(value?.key);
+  const [selectedValue, setSelectedValue] = useValue(value);
 
-  const onSelectChange = (value, context) => {
-    const realValue = {
-      key: value,
-      name: context?.option?.text,
-    };
+  const onSelectChange = (value) => {
     // @ts-ignore
     setSelectedValue(value);
-    events.change && events.change({ value: realValue });
+    events.change && events.change({ value });
     if (onChange) {
-      onChange(realValue);
+      onChange(value || '');
     }
   };
 
@@ -82,17 +79,20 @@ const NormalSelect = ({
     return <Select {...singleSelectProps} />;
   }
   return (
-    <FormContainer
+    <SelectContainer
       style={style}
       className={className}
-      label={labelVisible ? label : null}
+      label={label}
+      labelVisible={labelVisible}
       layout={layout}
       // @ts-ignore
       multiCell={false}
       requiredFlag={requiredFlag}
+      decorator={decorator}
+      id={id}
     >
       <Select {...singleSelectProps} />
-    </FormContainer>
+    </SelectContainer>
   );
 };
 NormalSelect.propTypes = {

package/src/web/components/form/enumSelect/SelectContainer.jsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import classNames from '../../../utils/classnames';
+import { selectContainerPropsTypes } from './props/propsTypes';
+import { renderDecorator } from '../renderDecorator';
+
+const SelectContainer = ({
+  style,
+  className,
+  // weda 组件属性
+  id,
+  label,
+  labelVisible,
+  layout,
+  requiredFlag,
+  decorator,
+  children,
+}) => {
+  const cls = classNames({
+    'weda-ui': true,
+    [className]: className,
+  });
+  const subCls = classNames({
+    'weui-cell': true,
+    'weui-cell_active': true,
+    'weui-cell_form': true,
+    'weui-cell_disabled': true,
+  });
+  const SelectComponent = <div className={subCls}>{children}</div>;
+  return renderDecorator(
+    SelectComponent,
+    decorator
+  )({
+    id,
+    className: cls,
+    style,
+    label: labelVisible ? label : null,
+    layout,
+    multiCell: false,
+    requiredFlag,
+  });
+};
+SelectContainer.propTypes = selectContainerPropsTypes;
+export default SelectContainer;

package/src/web/components/form/enumSelect/hooks/index.js

@@ -5,7 +5,7 @@ const GENERAL_OPTION = 'general-option';
 const CUSTOM = 'custom';
 
 const handleOptionsDetailList = (response) => {
-  const config = response?.Config ?? '[]';
+  const config = response?.Data?.Config ?? '[]';
   return JSON.parse(config)?.map((item) => ({
     value: item?.key,
     text: item?.value,
@@ -20,9 +20,12 @@ export default function useOptions({ enumType, optionId, customEnum }) {
   const getOptionsDetailList = async (optionId) => {
     try {
       const response = await getDescribeGeneralOptionsDetailList({
-        action: 'DescribeGeneralOptionsDetail',
-        data: {
-          OptId: optionId,
+        methodName: 'callDesignApi',
+        params: {
+          action: 'DescribeGeneralOptionsDetail',
+          data: {
+            Id: optionId,
+          },
         },
       });
       const options = handleOptionsDetailList(response);

package/src/web/components/form/enumSelect/props/propsTypes.js

@@ -40,4 +40,11 @@ export const propTypes = {
 export const formContainerPropsTypes = {
   ...commonPropsTypes,
   children: PropTypes.element,
+  decorator: PropTypes.element,
+};
+
+export const selectContainerPropsTypes = {
+  ...commonPropsTypes,
+  children: PropTypes.element,
+  decorator: PropTypes.element,
 };

package/src/web/components/form/formcell/index.jsx

@@ -80,7 +80,7 @@ export default function FormCell({
 
 FormCell.propTypes = {
   className: PropTypes.string,
-  style: PropTypes.string,
+  style: PropTypes.object,
   label: PropTypes.string,
   labelVisible: PropTypes.bool,
   layout: PropTypes.string,