@cloudbase/weda-ui 2.0.8 → 2.0.11

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

@@ -1,12 +1,16 @@
 .weda-formcells__flag {
   display: inline-block;
-  margin-right: 4px;
+  margin-left: 4px;
   font-family: SimSun;
   font-size: 12px;
   color: #f60;
   align-self: flex-start;
 }
 
+.weda-formcells__label.weui-cell {
+  align-items: flex-start;
+}
+
 .weda-ui .weui-cells__group_form .weui-cells {
   margin: 0;
 }

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

@@ -4,7 +4,7 @@ import classNames from '../../../utils/classnames';
 import './index.css';
 import { usePlatform } from '../../../utils/platform';
 import { ConfigProvider, Form as TeaForm } from 'tea-component';
-import { CommonFormPropsType } from '../types';
+import type { CommonFormPropsType } from '../types';
 
 export default function FormCell({
   className,

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
+          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]);
 
   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

@@ -1,5 +1,8 @@
 .weda-ui .weui-cell.weui-check__label {
   padding: 16px;
+}
+
+.weda-ui .weui-flex__item .weui-cell.weui-check__label {
   padding-left: 0;
 }
 

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

@@ -6,7 +6,7 @@ import { ConfigProvider, Input } from 'tea-component';
 import { usePlatform } from '../../../utils/platform';
 import { renderDecorator } from '../renderDecorator';
 import { useSyncValue } from '../../../utils/useSyncValue';
-import { CommonFormPropsType } from '../types';
+import type { CommonFormPropsType } from '../types';
 
 export default function Textarea({
   // 系统属性

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

@@ -6,7 +6,7 @@ import isObjectEqual from '../../../utils/isObjectEqual';
 import { useSyncValue } from '../../../utils/useSyncValue';
 import { isCloudFileID } from '../../../utils/platform';
 import { IMAGE_TYPES } from './uploader.pc';
-import { CommonFormPropsType } from '../types';
+import type { CommonFormPropsType } from '../types';
 import { v4 } from 'uuid';
 
 const uploadPath = 'weda-uploader';
@@ -122,7 +122,7 @@ export function ImageUploaderH5({
   }, [acceptTypes]);
 
   const showAdd = React.useMemo(() => {
-    if(single) {
+    if (single) {
       // single 模式时，仅当数组为空时显示
       return fileIdList.length < 1;
     }
@@ -132,7 +132,13 @@ export function ImageUploaderH5({
     <div className={cls} id={id} style={style}>
       <div className={classNames('weui-uploader', layout)}>
         <div className={classNames('weui-uploader__hd', layout)}>
-          <UploaderLabel layout={layout} title={title} currentCount={fileIdList.length} maxCount={finalMaxImgCount} requiredFlag={requiredFlag} />
+          <UploaderLabel
+            layout={layout}
+            title={title}
+            currentCount={fileIdList.length}
+            maxCount={finalMaxImgCount}
+            requiredFlag={requiredFlag}
+          />
         </div>
 
         <div className="weui-uploader__bd">
@@ -142,9 +148,7 @@ export function ImageUploaderH5({
             ))}
             {uploading && (
               <li className="weui-uploader__file weui-uploader__file_status">
-                <div className="weui-uploader__file-content">
-                  {progress}%
-                </div>
+                <div className="weui-uploader__file-content">{progress}%</div>
               </li>
             )}
           </ul>
@@ -251,11 +255,17 @@ export interface H5UploaderProps extends CommonFormPropsType {
   onChange?: (v: any) => void;
 }
 
-const UploaderLabel = ({layout, title, currentCount, maxCount, requiredFlag}) => {
-  if(layout === 'horizontal') {
+const UploaderLabel = ({
+  layout,
+  title,
+  currentCount,
+  maxCount,
+  requiredFlag,
+}) => {
+  if (layout === 'horizontal') {
     return (
       <React.Fragment>
-        <div className='weda-formcells__label weui-cell'>
+        <div className="weda-formcells__label weui-cell">
           <div>
             <p className="weui-uploader__title">{title}</p>
             <div className="weui-uploader__info">
@@ -263,25 +273,21 @@ const UploaderLabel = ({layout, title, currentCount, maxCount, requiredFlag}) =>
               {`/${maxCount}`}
             </div>
           </div>
-          {requiredFlag && (
-              <label className="weda-formcells__flag">*</label>
-          )}
+          {requiredFlag && <label className="weda-formcells__flag">*</label>}
         </div>
       </React.Fragment>
-    )
+    );
   }
   return (
-    <div className='weda-formcells__label weui-cell'>
-      <div className='weui-uploader__label'>
+    <div className="weda-formcells__label weui-cell">
+      <div className="weui-uploader__label">
         <p className="weui-uploader__title">{title}</p>
-        {requiredFlag && (
-                <label className="weda-formcells__flag">*</label>
-        )}
+        {requiredFlag && <label className="weda-formcells__flag">*</label>}
       </div>
       <div className="weui-uploader__info">
         <span id="uploadCount">{currentCount}</span>
         {`/${maxCount}`}
       </div>
     </div>
-  )
-}
+  );
+};

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

@@ -35,11 +35,11 @@
   color: white;
 }
 
-.weda-image.weda-image-error {
+.weda-image.weda-image-error,
+.weda-image:not([src]) {
   position: relative !important;
   display: inline-block !important;
 }
-
 .weda-image:not([src]):before,
 .weda-image-error::before {
     content: '';

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

@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react';
 import classNames from '../../utils/classnames';
 import './index.css';
 import { ImageInner } from './image';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 
 
 const defaultSrc = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGN4PSI0MCIgY3k9IjQwIiByPSI0MCIgZmlsbD0iI0VCRUZGNSIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0yMCA1NlYyNGg0MHYzMnoiLz48cGF0aCBmaWxsPSIjQzFDQ0REIiBkPSJNMjYgMzdoMjh2MkgyNnptMCA3aDIwdjJIMjZ6bS02LTIwaDQwdjdIMjB6Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDggNDQpIj48Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSIxMCIgY3k9IjEwIiByPSI3Ii8+PHBhdGggZD0iTTEwIDJhOCA4IDAgMSAxIDAgMTYgOCA4IDAgMCAxIDAtMTZ6bTEgMTBIOXYyaDJ2LTJ6bTAtNkg5djVoMlY2eiIgZmlsbD0iIzAwNkVGRiIvPjwvZz48L2c+PC9zdmc+';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 import classNames from '../../utils/classnames';
 import './index.css';
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 import classNames from '../../utils/classnames';
 import { Row, Col, ConfigProvider } from 'tea-component';
 import { usePlatform } from '../../utils/platform';

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

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 import classNames from '../../utils/classnames';
 import { ConfigProvider } from 'tea-component';
 import { usePlatform, isInIde } from '../../utils/platform';
 import { getAppCustomNav } from '../../utils/tcb';
-import { IMenuItem, INavigationStyle } from './type';
+import type { IMenuItem, INavigationStyle } from './type';
 import './index.css';
 import VerticalMenu from './verticalMenu';
 import HorizontalMenu from './horizontalMenu';

package/src/web/components/picker/timePicker.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import weui from '../../utils/weui';
 
 import classNames from '../../utils/classnames';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 
 export interface PropsType extends CommonPropsType {
   defaultValue?: string;