@cloudbase/weda-ui 2.0.10 → 2.0.26

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

@@ -2,8 +2,8 @@ import * as React from 'react';
 import weui from '../../../utils/weui';
 import classNames from '../../../utils/classnames';
 import isObjectEqual from '../../../utils/isObjectEqual';
-import { regionPicker,getRegionTree,getAreaCode } from './region/index';
-import { PropsType , defaultProps , moment } from './index';
+import { regionPicker, getRegionTree, getAreaCode } from './region/index';
+import { PropsType, defaultProps, moment } from './index';
 import { timePicker, yearPicker, monthPicker } from './time';
 import { callDataSource, callWedaApi } from '../../../utils/tcb';
 import destr from 'destr';
@@ -12,7 +12,7 @@ import { isNil } from '../../../utils/lodash';
 
 export default function Select({
   // 系统属性
-  events = {change: null },
+  events = { change: null },
   // 组件属性
   name,
   placeholder,
@@ -43,20 +43,20 @@ export default function Select({
   defaultMutiRegion,
   regionType,
   separator,
-  onChange
-  //regionTree,
-}: PropsType) {
+  onChange,
+}: //regionTree,
+PropsType) {
   const [date, setDate] = React.useState(
     decodeIsoDatetime(defaultDate, 'date', dateMode)
   );
   const [time, setTime] = React.useState(
     decodeIsoDatetime(defaultTime, 'time')
   );
-  const [regioDepth,setRegionDepth] = React.useState(3);
-  const [regionData,setRegionData] = React.useState([]);
-  const [regionTree,setRegionTree] = React.useState([]);
+  const [regioDepth, setRegionDepth] = React.useState(3);
+  const [regionData, setRegionData] = React.useState([]);
+  const [regionTree, setRegionTree] = React.useState([]);
   const [region, setRegion] = React.useState(defaultRegion);
-  const [mutiRegion,setMutiRegion]=React.useState([]);
+  const [mutiRegion, setMutiRegion] = React.useState([]);
   const [typeRegion, setTypeRegion] = React.useState(regionType);
   const [selectedValue, setSelectedValue] = React.useState(defaultValue);
   const [option, setOption] = React.useState([{ label: '', value: '' }]);
@@ -64,7 +64,7 @@ export default function Select({
 
   // 两次默认值不同, 需要刷新
   const prevDefaultRef = React.useRef<any>({});
-  React.useEffect( () => {
+  React.useEffect(() => {
     let hasChange = false;
     if (prevDefaultRef.current?.defaultValue !== defaultValue) {
       setSelectedValue(defaultValue);
@@ -82,10 +82,14 @@ export default function Select({
       setRegion(defaultRegion);
       hasChange = true;
     }
-    if (!isObjectEqual(prevDefaultRef.current?.defaultMutiRegion, defaultMutiRegion)) {
-
+    if (
+      !isObjectEqual(
+        prevDefaultRef.current?.defaultMutiRegion,
+        defaultMutiRegion
+      )
+    ) {
       //setMutiRegion((defaultMutiRegion || ".").split(','));
-      setMutiRegion(defaultMutiRegion?defaultMutiRegion.split(','):[]);
+      setMutiRegion(defaultMutiRegion ? defaultMutiRegion.split(',') : []);
       hasChange = true;
     }
     if (prevDefaultRef.current?.regionType !== regionType) {
@@ -98,57 +102,57 @@ export default function Select({
         defaultDate,
         defaultTime,
         defaultRegion,
-        defaultMutiRegion
+        defaultMutiRegion,
       };
     }
-
   });
   //实现初始值触发change事件
-  const defaultMutiRegionChange = function(treeValue,defaultMutiRegion){
-    const defaultValue =defaultMutiRegion?defaultMutiRegion.split(','):null;
-    const changeValue=[];
-    if(Array.isArray(defaultValue)&&defaultValue.length>0){
-      defaultValue.forEach(element => {
-        treeValue.map((item)=>{
-          if(item?.Value == element){
+  const defaultMutiRegionChange = function (treeValue, defaultMutiRegion) {
+    const defaultValue = defaultMutiRegion
+      ? defaultMutiRegion.split(',')
+      : null;
+    const changeValue = [];
+    if (Array.isArray(defaultValue) && defaultValue.length > 0) {
+      defaultValue.forEach((element) => {
+        treeValue.map((item) => {
+          if (item?.Value == element) {
             changeValue.push({
-              value:item?.Value,
-              code:item?.Code
-            }
-            );
+              value: item?.Value,
+              code: item?.Code,
+            });
           }
-         });
+        });
       });
 
-      events?.change?.({ value:defaultMutiRegion,result:changeValue });
+      events?.change?.({ value: defaultMutiRegion, result: changeValue });
     }
   };
-  const regionTreeMode = React.useMemo(()=>{
-    if((mode=='region'|| mode=='mutiRegion')){
-      if(regionData.length<1){
-        getAreaCode().then((value)=>{
-          defaultMutiRegionChange(value,defaultMutiRegion);
+  const regionTreeMode = React.useMemo(() => {
+    if (mode == 'region' || mode == 'mutiRegion') {
+      if (regionData.length < 1) {
+        getAreaCode().then((value) => {
+          defaultMutiRegionChange(value, defaultMutiRegion);
           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);
         });
       }
     }
-    switch(regionType){
-      case 'levelOne':{
+    switch (regionType) {
+      case 'levelOne': {
         setRegionDepth(1);
         break;
       }
-      case 'levelTwo':{
+      case 'levelTwo': {
         setRegionDepth(2);
         break;
       }
-      case 'levelThree':{
+      case 'levelThree': {
         setRegionDepth(3);
         break;
       }
@@ -156,18 +160,21 @@ export default function Select({
         break;
       }
     }
-
-  },[regionType,mode,regionData]);
+  }, [regionType, mode, regionData]);
 
   React.useEffect(() => {
     // tcb过滤参数
     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]);
@@ -175,10 +182,10 @@ export default function Select({
   // 获取数据列表中主列字段，将其作为选项
   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
+          label: item[primaryField] || item._id,
+          value: item._id,
         };
       });
       setOption(option);
@@ -187,10 +194,10 @@ export default function Select({
 
   // 获取数据列表
   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;
@@ -204,7 +211,7 @@ export default function Select({
         params: {
           where: param.params,
           pageNo: pageNo,
-          pageSize: pageSize
+          pageSize: pageSize,
         },
       });
       pageNo = pageNo + 1;
@@ -212,7 +219,6 @@ export default function Select({
         total = data?.total || 0;
         records = records.concat(data?.records);
       }
-
     }
 
     if (records) {
@@ -228,15 +234,17 @@ export default function Select({
   }, [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,
@@ -265,10 +273,14 @@ export default function Select({
       !!startDate && (options.startDate = startDate);
       !!endDate && (options.endDate = endDate);
     }
+
     options.onConfirm = (result) => {
       const value = formatDateModeValue(result, dateMode);
+      const formatNewDateValue = getFormatNewDateParams(dateMode, value) as [];
       setDate(value);
-      events.change({ value: new Date(value).getTime() });
+      events.change({
+        value: new Date(...formatNewDateValue).getTime(),
+      });
     };
 
     if (dateMode === 'year') {
@@ -329,7 +341,11 @@ export default function Select({
   };
 
   const onSelect = function () {
-    if (format === 'father-son' || format === 'related' || format === 'x-enum') {
+    if (
+      format === 'father-son' ||
+      format === 'related' ||
+      format === 'x-enum'
+    ) {
       weui.picker(option, {
         id: String(Date.now()),
         defaultValue: [selectedValue || option[0].value],
@@ -354,55 +370,59 @@ export default function Select({
     }
   };
   let regionTimer;
-  const momentClick =async () => {
-    regionTimer = setInterval(() => {
-      setTimeout(()=>{
-        if(regionTree.length!=0){
-        onRegionClick();
-        }
-      }, 0);
-  }, regionTree.length==0?500:0);
+  const momentClick = async () => {
+    regionTimer = setInterval(
+      () => {
+        setTimeout(() => {
+          if (regionTree.length != 0) {
+            onRegionClick();
+          }
+        }, 0);
+      },
+      regionTree.length == 0 ? 500 : 0
+    );
   };
   const onRegionClick = function () {
     clearInterval(regionTimer);
-    let defaultValue=[];
-    if(mode=='region'){
-     defaultRegion && defaultRegion.length <= 0
-      ? defaultValue=['北京市', '北京市', '东城区']
-      : defaultValue= defaultRegion;
-    }else{
+    let defaultValue = [];
+    if (mode == 'region') {
+      defaultRegion && defaultRegion.length <= 0
+        ? (defaultValue = ['北京市', '北京市', '东城区'])
+        : (defaultValue = defaultRegion);
+    } else {
       mutiRegion && mutiRegion.length <= 0
-      ? defaultValue=['北京市', '北京市', '东城区']
-      : defaultValue= mutiRegion;
+        ? (defaultValue = ['北京市', '北京市', '东城区'])
+        : (defaultValue = mutiRegion);
     }
-      regionPicker(
-        {
-          defaultValue:defaultValue,
-          depth:regioDepth,
-          onConfirm(result) {
-            const value = result.map((item) => item.value);
-            //const value=regionValueSplit(typeRegion,defaultvalue);
-            mode=='region'?setRegion(value):setMutiRegion(value);
-            const changeValue =  mode=='region'?value:value.join(',');
-            onChange && onChange(changeValue);
-            events?.change?.({ value:changeValue,result:result.map((item)=>{
+    regionPicker(
+      {
+        defaultValue: defaultValue,
+        depth: regioDepth,
+        onConfirm(result) {
+          const value = result.map((item) => item.value);
+          //const value=regionValueSplit(typeRegion,defaultvalue);
+          mode == 'region' ? setRegion(value) : setMutiRegion(value);
+          const changeValue = mode == 'region' ? value : value.join(',');
+          onChange && onChange(changeValue);
+          events?.change?.({
+            value: changeValue,
+            result: result.map((item) => {
               return {
-                value:item?.value,
-                code:item?.code
+                value: item?.value,
+                code: item?.code,
               };
-            }) });
-
-          },
-          onChange(result) {
-          },
-          className: 'weda-ui weda-picker',
-          id: new Date().valueOf(),
+            }),
+          });
         },
-        regionTree
-      );
+        onChange(result) {},
+        className: 'weda-ui weda-picker',
+        id: new Date().valueOf(),
+      },
+      regionTree
+    );
   };
 
-  const onClick =async function () {
+  const onClick = async function () {
     if (disabled) {
       return;
     }
@@ -436,19 +456,27 @@ export default function Select({
 
   const result = React.useMemo(() => {
     let selectLabel = '';
-    if (format === 'father-son' || format === 'related' || format === 'x-enum') {
-      selectLabel = (option ?? []).find((item) => item.value === selectedValue)?.label;
+    if (
+      format === 'father-son' ||
+      format === 'related' ||
+      format === 'x-enum'
+    ) {
+      selectLabel = (option ?? []).find(
+        (item) => item.value === selectedValue
+      )?.label;
     } else {
-      selectLabel = (range ?? []).find((item) => item.value === selectedValue)?.label;
+      selectLabel = (range ?? []).find(
+        (item) => item.value === selectedValue
+      )?.label;
     }
     return {
       selector: selectLabel,
       date: date,
       time: time,
       region: (region || []).join(separator), // region 有可能是空串
-      mutiRegion:mutiRegion
+      mutiRegion: mutiRegion,
     };
-  }, [range, selectedValue, date, time, region, separator,mutiRegion]);
+  }, [range, selectedValue, date, time, region, separator, mutiRegion, option]);
 
   return (
     <div className={subCls}>
@@ -510,6 +538,29 @@ export function decodeIsoDatetime(isoStringOrTimesnap, type, dateMode = 'day') {
   }
 }
 
+/**
+ * 根据时间模式，构造 new Date()的传参格式单个日期和时间组件值
+ */
+export const getFormatNewDateParams = (
+  type: string,
+  timeStr: string
+): any[] => {
+  let value = [];
+  let time = timeStr.split('-');
+  switch (type) {
+    case 'year':
+      value = [time[0], 0, [1]];
+      break;
+    case 'month':
+      value = [time[0], Number(time[1]) - 1, [1]];
+      break;
+    case 'day':
+      value = [time[0], Number(time[1]) - 1, [time[2]]];
+      break;
+  }
+  return value;
+};
+
 /**
  * 根据时间模式，将 picker 返回的值转成对应的 年-月-日
  */

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

@@ -6,9 +6,6 @@
   padding-left: 0;
 }
 
-
-
-
 .year-picker__overlay {
   width: 300px;
 }
@@ -19,3 +16,12 @@
   align-items: center;
   font-weight: 700;
 }
+
+.weda-ui.weda-select .weui-cell_form {
+  padding: 0 16px;
+}
+
+.weda-ui.weda-select .weui-flex__item .weui-cell_form {
+  padding: 0;
+  padding-right: 16px;
+}