@cloudbase/weda-ui 2.0.9 → 2.0.12

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

@@ -11,7 +11,7 @@ import {
   ConfigProvider,
 } from 'tea-component';
 import isObjectEqual from '../../../utils/isObjectEqual';
-import { getRegionTree,getAreaCode } from './region';
+import { getRegionTree, getAreaCode } from './region';
 import { renderDecorator } from '../renderDecorator';
 import type { CommonFormPropsType } from '../types';
 import YearPicker from './year';
@@ -90,7 +90,7 @@ export default function Select(props) {
 export interface PropsType extends CommonFormPropsType {
   size: 's' | 'm' | 'l' | 'full';
   placeholder: string;
-  mode: 'selector' | 'date' | 'time' | 'region'| 'mutiRegion';
+  mode: 'selector' | 'date' | 'time' | 'region' | 'mutiRegion';
   dateMode: 'day' | 'month' | 'year';
   // selector mode
   range?: any[];
@@ -132,8 +132,8 @@ export interface PropsType extends CommonFormPropsType {
   regionType?: 'levelOne' | 'levelTwo' | 'levelThree';
   separator?: string;
   requiredFlag?: boolean;
-  regionTree?:any[],
-  defaultMutiRegion?:string;
+  regionTree?: any[];
+  defaultMutiRegion?: string;
   onChange?: (v: any) => void; // 配合 fomily 受控使用
 }
 
@@ -170,7 +170,7 @@ function SelectPc({
   placeholder = '请选择',
   mode = 'selector',
   dateMode = 'day',
-  events = {change: null },
+  events = { change: null },
   disabled = false,
   range = defaultProps.range,
   startDate,
@@ -184,7 +184,7 @@ function SelectPc({
   regionType,
   separator = defaultProps.separator,
   size = defaultProps.size,
-  onChange
+  onChange,
 }: PropsType) {
   // 两次默认值不同, 需要刷新
   const prevDefaultRef = React.useRef<any>();
@@ -194,10 +194,12 @@ function SelectPc({
   const [time, setTime] = React.useState(
     decodeIsoDatetime(defaultTime, 'time')
   );
-  const [regionTree,setRegionTree] = React.useState([]);
-  const [regionData,setRegionData] = React.useState([]);
+  const [regionTree, setRegionTree] = React.useState([]);
+  const [regionData, setRegionData] = React.useState([]);
   const [region, setRegion] = React.useState(defaultRegion || undefined);
-  const [mutiRegion, setMutiRegion] = React.useState(defaultMutiRegion!=null?defaultMutiRegion.split(','):[]);
+  const [mutiRegion, setMutiRegion] = React.useState(
+    defaultMutiRegion != null ? defaultMutiRegion.split(',') : []
+  );
   const [selectedValue, setSelectedValue] = React.useState(defaultValue);
 
   const [option, setOption] = React.useState([]);
@@ -206,12 +208,16 @@ function SelectPc({
   React.useEffect(() => {
     // 筛选参数
     const whereEffected = [].concat(getWhereList(where));
-    if ((format === 'father-son' || format === 'related') && dataSourceName && viewId) {
+    if (
+      (format === 'father-son' || format === 'related') &&
+      dataSourceName &&
+      viewId
+    ) {
       fetchData({
         dataSourceName: dataSourceName,
         viewId: viewId,
         methodName: 'wedaGetRecords',
-        params: whereEffected
+        params: whereEffected,
       });
     }
   }, [where]);
@@ -219,10 +225,10 @@ function SelectPc({
   // 获取数据列表中主列字段，将其作为选项
   React.useEffect(() => {
     if (records && records.length !== 0 && primaryField) {
-      const option = records.map(item => {
+      const option = records.map((item) => {
         return {
           label: item[primaryField],
-          value: item._id
+          value: item._id,
         };
       });
       setOption(option);
@@ -231,10 +237,10 @@ function SelectPc({
 
   // 获取数据源列表
   const fetchData = async (param: {
-    dataSourceName?: string,
-    viewId?: string,
-    methodName?: string,
-    params?: any,
+    dataSourceName?: string;
+    viewId?: string;
+    methodName?: string;
+    params?: any;
   }) => {
     let pageNo = 1;
     let pageSize = 200;
@@ -256,7 +262,6 @@ function SelectPc({
         total = data?.total || 0;
         records = records.concat(data?.records);
       }
-
     }
 
     if (records) {
@@ -272,15 +277,17 @@ function SelectPc({
   }, [enumName]);
 
   // 获取自定义选项集
-  const fetchEnumData = async (param:
-    { OptNameList?: object, PageIndex?: number, PageSize?: number }
-  ) => {
+  const fetchEnumData = 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 => {
+    const enumOption = config.map((item) => {
       return {
         label: item.value,
         value: item.key,
@@ -308,8 +315,13 @@ function SelectPc({
       setRegion(defaultRegion || []); // region 有可能是空串
       hasChange = true;
     }
-    if (!isObjectEqual(prevDefaultRef.current?.defaultMutiRegion, defaultMutiRegion)) {
-      setMutiRegion(defaultMutiRegion?defaultMutiRegion.split(','):[]);
+    if (
+      !isObjectEqual(
+        prevDefaultRef.current?.defaultMutiRegion,
+        defaultMutiRegion
+      )
+    ) {
+      setMutiRegion(defaultMutiRegion ? defaultMutiRegion.split(',') : []);
       hasChange = true;
     }
     if (hasChange) {
@@ -317,29 +329,29 @@ function SelectPc({
         defaultDate,
         defaultTime,
         defaultRegion,
-        defaultMutiRegion
+        defaultMutiRegion,
       };
     }
   });
-  const regionTreeMode = React.useMemo(()=>{
-    if(mode=='region'||mode=='mutiRegion'){
-      if(regionData.length<1){
-        getAreaCode().then((value)=>{
+  const regionTreeMode = React.useMemo(() => {
+    if (mode == 'region' || mode == 'mutiRegion') {
+      if (regionData.length < 1) {
+        getAreaCode().then((value) => {
           setRegionData(value);
-          getRegionTree(value,regionType,mode).then(tree=>{
+          getRegionTree(value, regionType, mode).then((tree) => {
             setRegionTree(tree);
           });
         });
-      }else{
-        getRegionTree(regionData,regionType,mode).then(tree=>{
+      } else {
+        getRegionTree(regionData, regionType, mode).then((tree) => {
           setRegionTree(tree);
         });
       }
-   }
-   getRegionTree(regionData,regionType,mode).then(value=>{
-     setRegionTree(value);
-   });
-  },[regionType,mode,regionData]);
+    }
+    getRegionTree(regionData, regionType, mode).then((value) => {
+      setRegionTree(value);
+    });
+  }, [regionType, mode, regionData]);
   const onDataChange = (value) => {
     let finalVal;
     if (mode === 'date') {
@@ -352,17 +364,21 @@ function SelectPc({
     } else if (mode === 'mutiRegion') {
       finalVal = value.join(',');
       setMutiRegion(value);
-    }  else {
+    } else {
       finalVal = value;
     }
     onChange && onChange(finalVal);
     events?.change?.({ value: finalVal });
   };
+  const sizeClassName = classNames({
+    [`size-${size}`]: size,
+  });
+
   const createDropdown = () => {
     switch (mode) {
       case 'selector':
         return (
-          <div data-testid="form-select" >
+          <div data-testid="form-select">
             <TeaSelect
               matchButtonWidth
               size={size}
@@ -372,8 +388,15 @@ function SelectPc({
               type="simulate"
               appearance="button"
               placeholder={placeholder}
-              options={(format === 'father-son' || format === 'related' || format === 'x-enum') ? option.map(i => ({ text: i.label, value: i.value })) : range.map(i => ({ text: i.label, value: i.value }))}
-            /></div>
+              options={
+                format === 'father-son' ||
+                format === 'related' ||
+                format === 'x-enum'
+                  ? option.map((i) => ({ text: i.label, value: i.value }))
+                  : range.map((i) => ({ text: i.label, value: i.value }))
+              }
+            />
+          </div>
         );
       case 'date': {
         const now = moment();
@@ -390,6 +413,7 @@ function SelectPc({
           placeholder,
           value: date ? moment(date) : undefined,
           'data-testid': 'form-item-select',
+          size,
         };
         if (dateMode === 'year') {
           return (
@@ -402,9 +426,11 @@ function SelectPc({
             />
           );
         } else if (dateMode === 'month') {
-          return <DatePicker.MonthPicker {...dateProps} />;
+          return (
+            <DatePicker.MonthPicker className={sizeClassName} {...dateProps} />
+          );
         } else {
-          return <DatePicker {...dateProps} />;
+          return <DatePicker className={sizeClassName} {...dateProps} />;
         }
       }
       case 'time': {
@@ -414,6 +440,7 @@ function SelectPc({
         const end = endTime ? decodeIsoDatetime(endTime, 'time') : '23:59';
         return (
           <TimePicker
+            className={sizeClassName}
             onChange={onDataChange}
             disabled={disabled}
             placeholder={placeholder}
@@ -433,6 +460,7 @@ function SelectPc({
             data={regionTree}
             multiple={false}
             onChange={onDataChange}
+            className={sizeClassName}
             valueRender={(options) =>
               options.map(({ label, value }, index) => (
                 <React.Fragment key={`${value}-${index}`}>
@@ -444,24 +472,23 @@ function SelectPc({
             value={region}
           />
         );
-        case 'mutiRegion':
+      case 'mutiRegion':
         return (
           <Cascader
             clearable
             searchable
+            className={sizeClassName}
             type="menu"
             disabled={disabled}
             data={regionTree}
             multiple={false}
             onChange={onDataChange}
-            onLoad={(regionTree, options)=>{
+            onLoad={(regionTree, options) => {
               return new Promise((resolve) => {
                 setTimeout(() => {
                   resolve();
-
-                },1000);
+                }, 1000);
               });
-
             }}
             valueRender={(options) =>
               options.map(({ label, value }, index) => (

package/src/web/components/form/select/region/index.ts

@@ -3,24 +3,33 @@ import { callWedaApi } from '../../../../utils/tcb';
 
 let tree;
 
-export async function getRegionTree(regionData,regionType,regionMode) {
+export async function getRegionTree(regionData, regionType, regionMode) {
   tree = [];
-  tree = formatTreeData(regionData,regionType,regionMode);
+  tree = formatTreeData(regionData, regionType, regionMode);
   return tree;
 }
 
-export  function regionPicker(options,regionTree:any[]) {
-  const weRegionTree =regionTree.length==0?[{label:'地区数据加载中，请关闭弹窗后重试',value:null,children:null}]:regionTree;
+export function regionPicker(options, regionTree: any[]) {
+  const weRegionTree =
+    regionTree.length == 0
+      ? [
+          {
+            label: '地区数据加载中，请关闭弹窗后重试',
+            value: null,
+            children: null,
+          },
+        ]
+      : regionTree;
   weui.picker(weRegionTree, options);
 }
 /**
  * 获取运行态地区数据
  */
- export async function getAreaCode() {
+export async function getAreaCode() {
   try {
     const res = await callWedaApi({
       action: 'QueryRuntimeAreaCode',
-      data: {Mask: "11100"},
+      data: { Mask: '11100' },
     });
     return res?.AreaCodeList;
   } catch (error) {
@@ -31,101 +40,113 @@ export  function regionPicker(options,regionTree:any[]) {
 /**
  * 构建树形结构
  */
- function formatTreeData(arr,regionType,regionMode) {
+function formatTreeData(arr, regionType, regionMode) {
   let provicesData = [];
-    arr.forEach(item=>{
+  arr.forEach((item) => {
     //省数据集合
-    if(item?.Type==1&&item?.Deprecated==false){
+    if (item?.Type == 1 && item?.Deprecated == false) {
       provicesData.push({
         label: item.Value,
         value: item.Value,
-        code:item.Code,
-        type:item.Type,
-        centralCity:item.CentralCity,
-        children: regionType!= 'levelOne'||regionMode=='region'?[{
-          label: item.Value,
-          value: item.Value,
-          code:item.Code,
-          type:item.Type,
-          children: regionType!= 'levelTwo'||regionMode=='region'?[{
-            label: item.Value,
-            value: item.Value,
-            code:item.Code,
-            type:item.Type,
-            centralCity:item.CentralCity,
-          }]:null
-        }]:null
+        code: item.Code,
+        type: item.Type,
+        centralCity: item.CentralCity,
+        children:
+          regionType != 'levelOne' || regionMode == 'region'
+            ? [
+                {
+                  label: item.Value,
+                  value: item.Value,
+                  code: item.Code,
+                  type: item.Type,
+                  children:
+                    regionType != 'levelTwo' || regionMode == 'region'
+                      ? [
+                          {
+                            label: item.Value,
+                            value: item.Value,
+                            code: item.Code,
+                            type: item.Type,
+                            centralCity: item.CentralCity,
+                          },
+                        ]
+                      : null,
+                },
+              ]
+            : null,
       });
     }
   });
-  if(regionType!= 'levelOne'||regionMode=='region'){
-    arr.forEach(item=>{
+  if (regionType != 'levelOne' || regionMode == 'region') {
+    arr.forEach((item) => {
       //市数据集合
-      if(item?.Type==2&&item?.Deprecated==false){
-        provicesData.map(provice=>{
-          if(provice.code.substr(0, 2) == item.Code.substr(0,2)){
-            if(provice['children'][0].type==1){
-              provice['children']=[];
+      if (item?.Type == 2 && item?.Deprecated == false) {
+        provicesData.map((provice) => {
+          if (provice.code.substr(0, 2) == item.Code.substr(0, 2)) {
+            if (provice['children'][0].type == 1) {
+              provice['children'] = [];
             }
-              provice['children'].push({
-                label: item.Value,
-                value: item.Value,
-                code:item.Code,
-                type:item.Type,
-                centralCity:item.CentralCity,
-                children: regionType!= 'levelTwo'||regionMode=='region'?[{
-                  label: item.Value,
-                  value: item.Value,
-                  code:item.Code,
-                  type:item.Type,
-                  centralCity:item.CentralCity,
-                }]:null
-              });
-
-      }
+            provice['children'].push({
+              label: item.Value,
+              value: item.Value,
+              code: item.Code,
+              type: item.Type,
+              centralCity: item.CentralCity,
+              children:
+                regionType != 'levelTwo' || regionMode == 'region'
+                  ? [
+                      {
+                        label: item.Value,
+                        value: item.Value,
+                        code: item.Code,
+                        type: item.Type,
+                        centralCity: item.CentralCity,
+                      },
+                    ]
+                  : null,
+            });
+          }
         });
       }
     });
-    if(regionType != 'levelTwo'||regionMode=='region'){
-      arr.forEach(item=>{
+    if (regionType != 'levelTwo' || regionMode == 'region') {
+      arr.forEach((item) => {
         //区数据集合
-        if(item?.Type==3&&item?.Deprecated==false){
-          provicesData.map(provice=>{
-            if(provice.centralCity){
-              provice.children.map(city=>{
-                if(city.code.substr(0, 2) == item.Code.substr(0,2)){
-                  if(city['children'][0].type==1){
-                    city['children']=[];
+        if (item?.Type == 3 && item?.Deprecated == false) {
+          provicesData.map((provice) => {
+            if (provice.centralCity) {
+              provice.children.map((city) => {
+                if (city.code.substr(0, 2) == item.Code.substr(0, 2)) {
+                  if (city['children'][0].type == 1) {
+                    city['children'] = [];
                   }
-                    city['children'].push({
-                      label: item.Value,
-                      value: item.Value,
-                      code:item.Code,
-                      //type:item.Type
-                    });
-
-              }});
-            }else{
-              provice.children.map(city=>{
-                if(city.code.substr(0, 4) == item.Code.substr(0,4)){
-                  if(city['children'][0].type==2){
-                    city['children']=[];
+                  city['children'].push({
+                    label: item.Value,
+                    value: item.Value,
+                    code: item.Code,
+                    //type:item.Type
+                  });
+                }
+              });
+            } else {
+              provice.children.map((city) => {
+                if (city.code.substr(0, 4) == item.Code.substr(0, 4)) {
+                  if (city['children'][0].type == 2) {
+                    city['children'] = [];
                   }
-                    city['children'].push({
-                      label: item.Value,
-                      value: item.Value,
-                      code:item.Code,
-                      //type:item.Type
-                    });
-
-              }});
+                  city['children'].push({
+                    label: item.Value,
+                    value: item.Value,
+                    code: item.Code,
+                    //type:item.Type
+                  });
+                }
+              });
             }
-
           });
         }
       });
     }
-
   }
   return provicesData;
 }

package/src/web/components/form/select/year.tsx

@@ -23,6 +23,7 @@ export default function YearPicker(props) {
     onChange,
     className,
     placeholder,
+    size,
     ...rest
   } = props;
   const { classPrefix } = useConfig();
@@ -135,6 +136,7 @@ export default function YearPicker(props) {
         >
           <div className={classNames(`${classPrefix}-datepicker__input`)}>
             <Input
+              size={size}
               ref={inputRef}
               disabled={disabled}
               placeholder={placeholder}

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

@@ -2,11 +2,11 @@ import * as React from 'react';
 
 import classNames from '../../../utils/classnames';
 import getLocalCounter from '../../../utils/getLocalCounter';
-import {usePlatform} from '../../../utils/platform';
-import {ConfigProvider, Switch as TeaSwitch} from 'tea-component';
+import { usePlatform } from '../../../utils/platform';
+import { ConfigProvider, Switch as TeaSwitch } from 'tea-component';
 import { renderDecorator } from '../renderDecorator';
 import { useSyncValue } from '../../../utils/useSyncValue';
-import { CommonFormPropsType } from '../types';
+import type { CommonFormPropsType } from '../types';
 
 export default function Switch({
   // 系统属性
@@ -21,7 +21,7 @@ export default function Switch({
   layout = 'horizontal',
   disabled = false,
   requiredFlag = false,
-  decorator
+  decorator,
 }: PropsType) {
   const isFlex = layout !== 'vertical';
   const cls = classNames({
@@ -40,51 +40,51 @@ export default function Switch({
   const platform = usePlatform();
   // 两次默认值不同时, 需要刷新
   const [checked, setChecked] = useSyncValue(defaultChecked);
-  
 
   // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
   const hashcode = getLocalCounter();
   const _id = `switch-${hashcode}`;
-  const switchElement = platform === 'h5' ? 
-  (
-  <div className={subCls}>
-    {isFlex ? <div className="weui-cell__bd"></div> : null}
-    <div className={isFlex ? 'weui-cell__ft' : 'weui-cell__bd'}>
-      <label htmlFor={_id} key={_id} className="weui-switch-cp">
-        <input
+  const switchElement =
+    platform === 'h5' ? (
+      <div className={subCls}>
+        {isFlex ? <div className="weui-cell__bd"></div> : null}
+        <div className={isFlex ? 'weui-cell__ft' : 'weui-cell__bd'}>
+          <label htmlFor={_id} key={_id} className="weui-switch-cp">
+            <input
+              id={_id}
+              className="weui-switch-cp__input"
+              type="checkbox"
+              checked={checked}
+              disabled={disabled}
+              onChange={(ev) => {
+                const value = ev.target.checked;
+                setChecked(value);
+                events.change({ value }, { orgianalEvent: ev });
+              }}
+            />
+            <div className="weui-switch-cp__box"></div>
+          </label>
+        </div>
+      </div>
+    ) : (
+      <ConfigProvider classPrefix="wedatea2td">
+        <TeaSwitch
           id={_id}
-          className="weui-switch-cp__input"
-          type="checkbox"
-          checked={checked}
+          value={checked}
           disabled={disabled}
-          onChange={(ev) => {
-            const value = ev.target.checked;
+          onChange={(value, context) => {
+            const originEvent = context.event;
             setChecked(value);
-            events.change({ value }, {orgianalEvent: ev});
+            events.change({ value }, { originEvent });
           }}
         />
-        <div className="weui-switch-cp__box"></div>
-      </label>
-    </div>
-  </div>
-  ) : 
-  (
-    <ConfigProvider classPrefix="wedatea2td">
-      <TeaSwitch
-        id={_id}
-        value={checked}
-        disabled={disabled}
-        onChange={(value, context) => {
-          const originEvent = context.event;
-          setChecked(value);
-          events.change({ value }, {originEvent});
-        }}
-      />
-    </ConfigProvider>
-  );
-  
-  return renderDecorator(switchElement, decorator)({
+      </ConfigProvider>
+    );
 
+  return renderDecorator(
+    switchElement,
+    decorator
+  )({
     id,
     className: cls,
     style,
@@ -97,4 +97,4 @@ export default function Switch({
 
 export interface PropsType extends CommonFormPropsType {
   checked?: boolean;
-}
+}

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

@@ -5,3 +5,7 @@
 .weda-ui .weda-textarea .weui-cell_form {
   padding: 16px;
 }
+
+.weda-ui .weda-textarea .weui-flex__item .weui-cell_form {
+  padding-left: 0;
+}