@cloudbase/weda-ui 0.2.17 → 2.0.8

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Checkbox as TeaCheckbox, ConfigProvider } from 'tea-component';
 
 import classNames from '../../../utils/classnames';
@@ -8,6 +8,8 @@ import fromEntries from 'object.fromentries';
 import { usePlatform } from '../../../utils/platform';
 import { renderDecorator } from '../renderDecorator';
 import { CommonFormPropsType } from '../types';
+import { callWedaApi } from '../../../utils/tcb';
+import destr from 'destr';
 
 export default function Checkbox({
   // 系统属性
@@ -19,6 +21,8 @@ export default function Checkbox({
   name = 'formCheckbox',
   label = '标题',
   labelVisible = true,
+  format = '',
+  enumName = '',
   range = [],
   layout = 'horizontal',
   disabled = false,
@@ -40,21 +44,53 @@ export default function Checkbox({
     'weui-cell_disabled': isH5 && disabled,
   });
 
+  const [option, setOption] = useState(range);
   const [checkedItems, setCheckedItems] = React.useState(
-    platform === 'h5' ? fromEntries(range.map(({ value, checked }) => [value, !!checked]))
-    : range.filter(({checked}) => checked).map(({value}) => value)
+    platform === 'h5' ? fromEntries(option.map(({ value, checked }) => [value, !!checked]))
+      : option.filter(({ checked }) => checked).map(({ value }) => value)
   );
   // 两次range不同时, 需要刷新checkedItems
   const prevRangeRef = React.useRef<object[]>();
   React.useEffect(() => {
-    if (!isObjectEqual(prevRangeRef.current, range)) {
-      prevRangeRef.current = range;
+    if (!isObjectEqual(prevRangeRef.current, option)) {
+      prevRangeRef.current = option;
       setCheckedItems(
-        fromEntries(range.map(({ value, checked }) => [value, !!checked]))
+        fromEntries(option.map(({ value, checked }) => [value, !!checked]))
       );
     }
   });
 
+  useEffect(() => {
+    // 如果绑定字段类型为枚举，且传入自定义选项集的名称则默认使用自定义选项集的内容作为选项
+    if (format === 'x-enum' && enumName) {
+      fetchData({ OptNameList: [enumName], PageIndex: 1, PageSize: 10 });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (format !== 'x-enum') {
+      setOption(range)
+    }
+  }, [range]);
+
+  const fetchData = async (param:
+    { OptNameList?: object, PageIndex?: number, PageSize?: number }
+  ) => {
+    let data = await callWedaApi({
+      action: 'DescribeGeneralOptionsDetailList',
+      data: param,
+    });
+    const config = destr(data?.Items?.[0]?.Config) ?? [];
+    const enumOption = config.map(item => {
+      return {
+        label: item.value,
+        value: item.key,
+        checked: false
+      };
+    });
+    setOption(enumOption);
+  };
+
   /**
    * 在ios h5端, label和input的绑定不生效
    * 导致 onChange 事件触发有问题, 所以改为监听 onClick 事件
@@ -82,8 +118,8 @@ export default function Checkbox({
   // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
   const hashcode = React.useMemo(() => getLocalCounter(), []);
   let checkboxElement;
-  if(platform === 'h5') {
-    checkboxElement = range.map(({ label, value }, index) => {
+  if (platform === 'h5') {
+    checkboxElement = option.map(({ label, value }, index) => {
       const _id = `checkbox-${hashcode}-${index}`;
       const _name = `checkbox-${hashcode}-${name}`;
       return (
@@ -120,17 +156,17 @@ export default function Checkbox({
             .map(([value]) => value)
           }
           onChange={value => {
-            const newMap = range
-            .map((opt) => opt.value)
-            .reduce((acc, cur) => {
-              const idx = value.indexOf(cur);
-              if(idx < 0) {
-                acc[cur] = false;
-              } else {
-                acc[cur] = true;
-              }
-              return acc;
-            }, {});
+            const newMap = option
+              .map((opt) => opt.value)
+              .reduce((acc, cur) => {
+                const idx = value.indexOf(cur);
+                if (idx < 0) {
+                  acc[cur] = false;
+                } else {
+                  acc[cur] = true;
+                }
+                return acc;
+              }, {});
             setCheckedItems(newMap);
             events.change(
               {
@@ -141,7 +177,7 @@ export default function Checkbox({
             );
           }}
         >
-          {range.map(({value, label}, index) => {
+          {option.map(({ value, label }, index) => {
             const _id = `checkbox-${hashcode}-${index}`;
             return (
               <TeaCheckbox key={_id} name={value} id={_id}>
@@ -149,7 +185,7 @@ export default function Checkbox({
               </TeaCheckbox>
             );
           })}
-    </TeaCheckbox.Group>
+        </TeaCheckbox.Group>
       </ConfigProvider>
     );
   }
@@ -167,5 +203,7 @@ export default function Checkbox({
 }
 
 export interface PropsType extends CommonFormPropsType {
-  range?: {label: string, value: any; [key: string]: any}[];
-}
+  range?: { label: string, value: any;[key: string]: any }[];
+  format?: string;
+  enumName?: string;
+}

package/src/web/components/form/form/index.css

@@ -5,4 +5,8 @@
 .wedatea2td-form > .gsd-h5-react-formitem,
 .wedatea2td-form > div > .gsd-h5-react-formitem {
   padding-left: 32px;
-}
+}
+
+.weda-ui.weda-form-pc, .weda-ui.gsd-h5-react-form-pc {
+  padding-left: 24px;
+}

package/src/web/components/form/form/index.tsx

@@ -22,6 +22,8 @@ export default function Form({
     'weda-ui': true,
     'weda-form': true,
     'weui-form': platform === 'h5',
+    'weda-form-pc': platform === 'pc',
+    'gsd-h5-react-form-pc': platform === 'pc',
     [className]: className,
   });
   if(platform === 'pc') {
@@ -45,4 +47,4 @@ export default function Form({
 
 export interface PropsType extends CommonFormPropsType {
   contentSlot?: any;
-}
+}

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

@@ -4,7 +4,28 @@
   font-family: SimSun;
   font-size: 12px;
   color: #f60;
+  align-self: flex-start;
 }
+
+.weda-ui .weui-cells__group_form .weui-cells {
+  margin: 0;
+}
+.weda-formcells.weui-flex .weda-formcells__label {
+  width: 130px;
+}
+.weui-cells__group_form .weui-cell {
+  padding: 16px 16px;
+}
+
+.weda-formcells__content.weui-flex__item .weui-cell_form {
+  padding: 0;
+}
+
+.weda-formcells__content.weui-flex__item .weui-cell_form {
+  padding-right: 16px;
+}
+
+
 /* formcell 在 form container 外部兼容 and 独立 layout 适配 */
 
 .weda-formcells__pc.vertical .wedatea2td-form__controls,
@@ -68,4 +89,4 @@
 /*formcell end*/
 
 
-/* formcell 在 form container 外部兼容 */
+/* formcell 在 form container 外部兼容 */

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

@@ -14,13 +14,13 @@ export default function FormCell({
   children,
   multiCell,
   requiredFlag,
-  size
+  size,
 }: PropsType) {
   const platform = usePlatform();
   const isFlex = layout !== 'vertical';
 
-  if(platform === 'pc') {
-    return (  
+  if (platform === 'pc') {
+    return (
       <ConfigProvider classPrefix="wedatea2td">
         <TeaForm.Item
           style={style}
@@ -31,9 +31,14 @@ export default function FormCell({
             'weda-formcells__pc': !!label,
             'weda-formcells__full-width': size === 'full',
             [layout]: layout,
-            [className]: [className]
+            [className]: [className],
           })}
-          label={label}
+          label={
+            <>
+              {label}
+              {requiredFlag && <span className="weda-formcells__flag">*</span>}
+            </>
+          }
         >
           {children}
         </TeaForm.Item>
@@ -59,10 +64,10 @@ export default function FormCell({
               'weui-cell': true,
             })}
           >
+            <label>{label}</label>
             {requiredFlag ? (
               <label className="weda-formcells__flag">*</label>
             ) : null}
-            <label>{label}</label>
           </div>
         ) : null}
         <div

package/src/web/components/form/input/index.css

@@ -7,22 +7,17 @@
 /*
 把weui-cell 的padding还回到input
 */
-.weda-ui.weda-input input.weui-input {
-    padding: 28px 16px;
+.weda-ui input.weui-input {
+    padding: 28px 0;
 }
 
-.weda-ui.weda-input .weui-cell.weda-formcells__label {
-    padding: 16px;
-}
-.weda-ui.weda-input .weda-formcells__label.weui-cell label {
-    padding: 0;
-}
-.weda-ui.weda-input .weui-cell {
+.weda-ui.weda-input .weui-flex__item .weui-cell_form {
     padding: 0;
+    padding-right: 16px;
 }
 
-.weda-ui.weda-input .weui-btn_input-clear {
-    padding-right: 16px;
+.weda-ui.weda-input .weui-cell_form {
+  padding: 0 16px;
 }
 
 /**
@@ -38,4 +33,4 @@
 }
 /**
  * END
- */
+ */

package/src/web/components/form/location/components/LocationH5/index.css

@@ -1,7 +1,3 @@
-.weda-ui_form-location {
-  padding: 1.14286rem 0;
-}
-
 .form-location-warp {
   display: flex;
   white-space: nowrap;
@@ -10,7 +6,9 @@
 .form-location-label {
   display: flex;
   align-items: center;
-  padding: 0 1.14286rem;
+  padding: 16px;
+  width: 130px;
+
 }
 .form-location-label > span {
   margin-right: 0.28571rem;
@@ -19,8 +17,7 @@
   color: #f60;
 }
 
-.form-location-con {
-  padding-left: 1.14286rem;
+.weda-ui .form-location-con {
   display: flex;
   align-items: center;
 }

package/src/web/components/form/location/components/LocationH5/location.h5.jsx

@@ -329,8 +329,8 @@ export default function LocationH5(props) {
       <div className="form-location-warp">
         {labelVisible && (
           <div className="form-location-label">
-            {requiredFlag && <span>*</span>}
             {label}
+            {requiredFlag && <span>*</span>}
           </div>
         )}
         <div className="form-location-con">

package/src/web/components/form/radio/index.tsx

@@ -1,14 +1,16 @@
-import * as React from 'react';
-import {ConfigProvider, Radio as TeaRadio} from 'tea-component';
+import React, { useEffect, useState } from 'react';
+import { ConfigProvider, Radio as TeaRadio } from 'tea-component';
 
-import {usePlatform} from '../../../utils/platform';
+import { usePlatform } from '../../../utils/platform';
 import classNames from '../../../utils/classnames';
 import getLocalCounter from '../../../utils/getLocalCounter';
 import isObjectEqual from '../../../utils/isObjectEqual';
+import { callWedaApi } from '../../../utils/tcb';
 
 import './index.css';
 import { renderDecorator } from '../renderDecorator';
 import { CommonFormPropsType } from '../types';
+import destr from 'destr';
 
 export default function Radio({
   // 系统属性
@@ -19,6 +21,8 @@ export default function Radio({
   // 组件属性
   label = '标题',
   labelVisible = true,
+  format = '',
+  enumName = '',
   name = 'formRadio',
   range = [],
   layout = 'horizontal',
@@ -39,19 +43,50 @@ export default function Radio({
     'weui-check__label': isH5,
     'weui-cell_disabled': isH5 && disabled,
   });
-
+  const [option, setOption] = useState(range);
   const [checkedItemValue, setCheckedItemValue] = React.useState(
-    range.find((item) => item.checked)?.value
+    option.find((item) => item.checked)?.value
   );
   // 两次range不同时, 需要刷新checkedItemValue
   const prevRangeRef = React.useRef<PropsType['range']>();
   React.useEffect(() => {
-    if (!isObjectEqual(prevRangeRef.current, range)) {
-      prevRangeRef.current = range;
-      setCheckedItemValue(range.find((item) => item.checked)?.value);
+    if (!isObjectEqual(prevRangeRef.current, option)) {
+      prevRangeRef.current = option;
+      setCheckedItemValue(option.find((item) => item.checked)?.value);
     }
   });
 
+  useEffect(() => {
+    // 如果绑定字段类型为枚举，且传入自定义选项集的名称则默认使用自定义选项集的内容作为选项
+    if (format === 'x-enum' && enumName) {
+      fetchData({ OptNameList: [enumName], PageIndex: 1, PageSize: 10 });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (format !== 'x-enum') {
+      setOption(range)
+    }
+  }, [range]);
+
+  const fetchData = async (param:
+    { OptNameList?: object, PageIndex?: number, PageSize?: number }
+  ) => {
+    let data = await callWedaApi({
+      action: 'DescribeGeneralOptionsDetailList',
+      data: param,
+    });
+    const config = destr(data?.Items?.[0]?.Config) ?? [];
+    const enumOption = config.map(item => {
+      return {
+        label: item.value,
+        value: item.key,
+        checked: false
+      };
+    });
+    setOption(enumOption);
+  };
+
   /**
    * 在ios h5端, label和input的绑定不生效
    * 导致 onChange 事件触发有问题, 所以改为监听 onClick 事件
@@ -70,55 +105,55 @@ export default function Radio({
   // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
   const hashcode = React.useMemo(() => getLocalCounter(), []);
   let radioElement;
-  if(isH5) {
+  if (isH5) {
 
-    radioElement = range.map(({ label, value }, index) => {
+    radioElement = option.map(({ label, value }, index) => {
       const _id = `radio-${hashcode}-${index}`;
       const _name = `radio-${hashcode}-${name}`;
       return (
-      <div
-        className={subCls}
-        key={_id}
-        onClickCapture={getChangeHandler(value)}
-      >
-        <div className="weui-cell__hd">
-          <input
-            type="radio"
-            className="weui-check"
-            value={value}
-            name={_name}
-            id={_id}
-            checked={checkedItemValue === value}
-            disabled={disabled}
-            onClick={(e) => e.stopPropagation()}
+        <div
+          className={subCls}
+          key={_id}
+          onClickCapture={getChangeHandler(value)}
+        >
+          <div className="weui-cell__hd">
+            <input
+              type="radio"
+              className="weui-check"
+              value={value}
+              name={_name}
+              id={_id}
+              checked={checkedItemValue === value}
+              disabled={disabled}
+              onClick={(e) => e.stopPropagation()}
             />
-          <i className="weui-icon-checked"></i>
-        </div>
-        <div className="weui-cell__bd">
-          <p>{label}</p>
+            <i className="weui-icon-checked"></i>
+          </div>
+          <div className="weui-cell__bd">
+            <p>{label}</p>
+          </div>
         </div>
-      </div>
-    );
-  });
-} else {
-  // pc
-  radioElement = (<ConfigProvider classPrefix="wedatea2td">
-    <TeaRadio.Group 
-      disabled={disabled}
-      value={checkedItemValue}
-      onChange={(value, {event}) => getChangeHandler(value)(event)}
-    >
-      {range.map(({value, label}, index) => {
-        const _id = `radio-${hashcode}-${index}`;
-        return (
-          <TeaRadio key={_id} name={value} id={_id}>
-            {label}
-          </TeaRadio>
-        );
-      })}
-    </TeaRadio.Group>
-  </ConfigProvider>);
-}
+      );
+    });
+  } else {
+    // pc
+    radioElement = (<ConfigProvider classPrefix="wedatea2td">
+      <TeaRadio.Group
+        disabled={disabled}
+        value={checkedItemValue}
+        onChange={(value, { event }) => getChangeHandler(value)(event)}
+      >
+        {option.map(({ value, label }, index) => {
+          const _id = `radio-${hashcode}-${index}`;
+          return (
+            <TeaRadio key={_id} name={value} id={_id}>
+              {label}
+            </TeaRadio>
+          );
+        })}
+      </TeaRadio.Group>
+    </ConfigProvider>);
+  }
   return renderDecorator(radioElement, decorator)({
     id,
     className: cls,
@@ -132,5 +167,7 @@ export default function Radio({
 
 export interface PropsType extends CommonFormPropsType {
   // 组件属性
-  range?: ({label: string} & Record<string, any>)[];
-}
+  range?: ({ label: string } & Record<string, any>)[];
+  format?: string;
+  enumName?: string;
+}