@cloudbase/weda-ui 2.0.11 → 2.0.12

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

@@ -53,6 +53,7 @@ export default function LocationH5(props) {
     message: '地图定位中',
   });
   const [location, setLocation] = useState({
+    detailedAddress: '',
     poiname: '',
     latlng: { lat: 39.98410411, lng: 116.307503 },
   });
@@ -63,10 +64,12 @@ export default function LocationH5(props) {
     // 重置表单时
     const {
       poiname,
+      detailedAddress,
       latlng: { lat, lng },
     } = currentLocations.current;
     let location = {
       poiname,
+      detailedAddress,
       latlng: { lat, lng },
     };
     if (locationType === 1) {
@@ -76,6 +79,7 @@ export default function LocationH5(props) {
       let res = {
         value: {
           address: poiname,
+          detailedAddress,
           geopoint: {
             coordinates: [lng, lat],
             type: 'Point',
@@ -94,6 +98,7 @@ export default function LocationH5(props) {
         lng: 116.307503,
       },
       poiname: '',
+      detailedAddress: '',
       locationType,
     };
     switch (locationType) {
@@ -133,6 +138,7 @@ export default function LocationH5(props) {
         lng: longitude,
       },
       poiname: poiname,
+      detailedAddress: '',
     };
     setLocation(loc);
   }, [customLocation, locationType]);
@@ -161,6 +167,7 @@ export default function LocationH5(props) {
             const { city, lat, lng, addr } = ipLocation;
             let loc = {
               poiname: city + addr,
+              detailedAddress: city + addr,
               latlng: { lat, lng },
             };
             if (locationType === 1) {
@@ -175,6 +182,7 @@ export default function LocationH5(props) {
                 events.change({
                   value: {
                     address: city + addr,
+                    detailedAddress: city + addr,
                     geopoint: {
                       coordinates: [lng, lat],
                       type: 'Point',
@@ -210,6 +218,7 @@ export default function LocationH5(props) {
         });
         setLocation({
           poiname: '',
+          detailedAddress: '',
           latlng: { lat: 39.98410411, lng: 116.307503 },
         });
         weui.alert('定位失败');
@@ -278,10 +287,11 @@ export default function LocationH5(props) {
   };
 
   const onChangeLocation = (value) => {
-    const { poiname, latlng } = value;
+    const { poiname, latlng, detailedAddress } = value;
     let res = {
       value: {
         address: poiname,
+        detailedAddress,
         geopoint: {
           coordinates: [latlng.lng, latlng.lat],
           type: 'Point',

package/src/web/components/form/location/components/LocationPC/Header.jsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Button } from 'tea-component';
-import * as PropTypes from 'prop-types';
 import classNames from '../../../../../utils/classnames';
 
 const Header = ({
@@ -94,16 +93,4 @@ const Header = ({
   );
 };
 
-Header.propTypes = {
-  onClick: PropTypes.func,
-  isEdit: PropTypes.bool,
-  info: PropTypes.object,
-  disabled: PropTypes.bool,
-  showLngLat: PropTypes.bool,
-  currentLocStatus: PropTypes.bool,
-  dataSourceStatus: PropTypes.bool,
-  locationType: PropTypes.number,
-  apiKeyStatus: PropTypes.object,
-};
-
 export default Header;

package/src/web/components/form/location/components/LocationPC/location.PC.jsx

@@ -54,9 +54,10 @@ export default function LocationPC(props) {
   const [APIKEY, setAPIKEY] = useState('');
 
   const eventsChange = (value, noaddr) => {
-    const { poiname, latitude, longitude } = value;
+    const { poiname, detailedAddress, latitude, longitude } = value;
     let res = {
       address: poiname,
+      detailedAddress,
       geopoint: {
         coordinates: [longitude, latitude],
         type: 'Point',
@@ -90,10 +91,12 @@ export default function LocationPC(props) {
     // 重置表单时
     const {
       poiname,
+      detailedAddress,
       latlng: { lat, lng },
     } = currentLocations.current;
     let location = {
       poiname,
+      detailedAddress,
       latlng: { lat, lng },
     };
     if (locationType === 1) {
@@ -103,7 +106,8 @@ export default function LocationPC(props) {
       eventsChange({
         latitude: lat,
         longitude: lng,
-        poiname: poiname,
+        poiname,
+        detailedAddress,
       });
     }
     setLocation(location);
@@ -118,11 +122,12 @@ export default function LocationPC(props) {
     setIsSelectMapVisible(true);
   };
   const onChangeLocation = (value) => {
-    const { poiname, latlng } = value;
+    const { poiname, latlng, detailedAddress } = value;
     events.change &&
       events.change({
         value: {
           address: poiname,
+          detailedAddress,
           geopoint: {
             coordinates: [latlng.lng, latlng.lat],
             type: 'Point',
@@ -172,6 +177,7 @@ export default function LocationPC(props) {
         lng: 116.307503,
       },
       poiname: '',
+      detailedAddress: '',
       locationType,
     };
     switch (locationType) {
@@ -183,6 +189,7 @@ export default function LocationPC(props) {
             lng: location.latlng.lng,
           },
           poiname: location.poiname,
+          detailedAddress: location.detailedAddress,
         };
         break;
       case 3:
@@ -207,6 +214,7 @@ export default function LocationPC(props) {
         latitude: loc.latlng.lat,
         longitude: loc.latlng.lng,
         poiname: loc.poiname,
+        detailedAddress: loc.detailedAddress,
       },
       true
     );
@@ -220,13 +228,14 @@ export default function LocationPC(props) {
       weui.alert('位置输入格式错误 请检查');
       return;
     }
-    let { latitude, longitude, poiname } = customLocation;
+    let { latitude, longitude, poiname, detailedAddress } = customLocation;
     let loc = {
       latlng: {
         lat: latitude,
         lng: longitude,
       },
-      poiname: poiname,
+      poiname,
+      detailedAddress,
     };
     setLocation(loc);
   }, [customLocation, locationType]);

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

@@ -9,7 +9,7 @@ import { callWedaApi } from '../../../utils/tcb';
 
 import './index.css';
 import { renderDecorator } from '../renderDecorator';
-import { CommonFormPropsType } from '../types';
+import type { CommonFormPropsType } from '../types';
 import destr from 'destr';
 
 export default function Radio({
@@ -28,7 +28,7 @@ export default function Radio({
   layout = 'horizontal',
   disabled = false,
   requiredFlag = false,
-  decorator
+  decorator,
 }: PropsType) {
   const platform = usePlatform();
   const isH5 = platform === 'h5';
@@ -65,23 +65,25 @@ export default function Radio({
 
   useEffect(() => {
     if (format !== 'x-enum') {
-      setOption(range)
+      setOption(range);
     }
   }, [range]);
 
-  const fetchData = async (param:
-    { OptNameList?: object, PageIndex?: number, PageSize?: number }
-  ) => {
+  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 => {
+    const enumOption = config.map((item) => {
       return {
         label: item.value,
         value: item.key,
-        checked: false
+        checked: false,
       };
     });
     setOption(enumOption);
@@ -106,7 +108,6 @@ export default function Radio({
   const hashcode = React.useMemo(() => getLocalCounter(), []);
   let radioElement;
   if (isH5) {
-
     radioElement = option.map(({ label, value }, index) => {
       const _id = `radio-${hashcode}-${index}`;
       const _name = `radio-${hashcode}-${name}`;
@@ -137,24 +138,29 @@ export default function Radio({
     });
   } 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>);
+    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)({
+  return renderDecorator(
+    radioElement,
+    decorator
+  )({
     id,
     className: cls,
     style,

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

@@ -1,31 +1,28 @@
-import * as React from "react";
-import FormCell from "./formcell";
+import * as React from 'react';
+import FormCell from './formcell';
 
 /**
- * 
+ *
  * @returns {(props: any) => JSX.Element}
  */
-export function renderDecorator<D=any>(filedNode: React.ReactNode, DecoratorComponent: React.FC<D> = FormCell) {
-    if(!DecoratorComponent) {
-        return function WedaFormField() {
-            return (
-                <React.Fragment>
-                    {filedNode}
-                </React.Fragment>
-            );
-        };
-    }
-    
-    return function WedaFormFiled(decoratorProps) {
-        if(Array.isArray(DecoratorComponent) && DecoratorComponent.length === 2) {
-            decoratorProps = DecoratorComponent[1];
-            DecoratorComponent = DecoratorComponent[0];
-        }
-    
-        return (
-            <DecoratorComponent {...decoratorProps} >
-                {filedNode}
-            </DecoratorComponent>
-        );
+export function renderDecorator<D = any>(
+  filedNode: React.ReactNode,
+  DecoratorComponent: React.FC<D> = FormCell
+) {
+  if (!DecoratorComponent) {
+    return function WedaFormField() {
+      return <React.Fragment>{filedNode}</React.Fragment>;
     };
-}
+  }
+
+  return function WedaFormFiled(decoratorProps) {
+    if (Array.isArray(DecoratorComponent) && DecoratorComponent.length === 2) {
+      decoratorProps = DecoratorComponent[1];
+      DecoratorComponent = DecoratorComponent[0];
+    }
+
+    return (
+      <DecoratorComponent {...decoratorProps}>{filedNode}</DecoratorComponent>
+    );
+  };
+}

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

@@ -476,7 +476,7 @@ PropsType) {
       region: (region || []).join(separator), // region 有可能是空串
       mutiRegion: mutiRegion,
     };
-  }, [range, selectedValue, date, time, region, separator, mutiRegion]);
+  }, [range, selectedValue, date, time, region, separator, mutiRegion, option]);
 
   return (
     <div className={subCls}>

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

@@ -16,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;
+}

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) => (