@cloudbase/weda-ui 2.0.11 → 2.0.27

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

@@ -5,7 +5,7 @@ import { Input as TeaInput, ConfigProvider } from 'tea-component';
 import { renderDecorator } from '../renderDecorator';
 import { useSyncValue } from '../../../utils/useSyncValue';
 import './index.css';
-import { CommonFormPropsType } from '../types';
+import type { CommonFormPropsType } from '../types';
 
 export default function Input({
   id,
@@ -80,69 +80,77 @@ export default function Input({
   const onBlur = function (e) {
     events.blur({ value: e.target.value }, { originEvent: e });
   };
-const fieldEl = platform === 'h5' ? <div className={subCls}>
-  <div className="weui-cell__bd weui-flex">
-    <input
-        className="weui-input"
-        type={inputType}
-        placeholder={placeholder}
-        value={value}
-        disabled={disabled}
-        name={name}
-        autoFocus={autoFocus}
-        onChange={onChange}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onKeyDown={onKeyDown}
-        role="input"
-      />
-      {clearable &&
-        <button
-          className="weui-btn_reset weui-btn_icon weui-btn_input-clear"
-          onMouseDown={onClear}
-        >
-          <i className="weui-icon-clear"></i>
-        </button>
-      }
-  </div>
-</div> : <ConfigProvider classPrefix="wedatea2td">
-  <TeaInput
-  size={size}
-  type={inputType}
-  placeholder={placeholder}
-  value={value}
-  disabled={disabled}
-  name={name}
-  autoFocus={autoFocus}
-  onChange={onChange}
-  onFocus={onFocus}
-  onBlur={onBlur}
-  onKeyDown={onKeyDown}
-/></ConfigProvider>;
-return renderDecorator(fieldEl, decorator)({
-  id,
-  className: cls,
-  style,
-  label: labelVisible ? label : null,
-  layout,
-  multiCell: false,
-  requiredFlag,
-  size
-});
+  const fieldEl =
+    platform === 'h5' ? (
+      <div className={subCls}>
+        <div className="weui-cell__bd weui-flex">
+          <input
+            className="weui-input"
+            type={inputType}
+            placeholder={placeholder}
+            value={value}
+            disabled={disabled}
+            name={name}
+            autoFocus={autoFocus}
+            onChange={onChange}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onKeyDown={onKeyDown}
+            role="input"
+          />
+          {clearable && (
+            <button
+              className="weui-btn_reset weui-btn_icon weui-btn_input-clear"
+              onMouseDown={onClear}
+            >
+              <i className="weui-icon-clear"></i>
+            </button>
+          )}
+        </div>
+      </div>
+    ) : (
+      <ConfigProvider classPrefix="wedatea2td">
+        <TeaInput
+          size={size}
+          type={inputType}
+          placeholder={placeholder}
+          value={value}
+          disabled={disabled}
+          name={name}
+          autoFocus={autoFocus}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onKeyDown={onKeyDown}
+        />
+      </ConfigProvider>
+    );
+  return renderDecorator(
+    fieldEl,
+    decorator
+  )({
+    id,
+    className: cls,
+    style,
+    label: labelVisible ? label : null,
+    layout,
+    multiCell: false,
+    requiredFlag,
+    size,
+  });
 }
 
 export interface PropsType extends CommonFormPropsType {
   defaultValue?: string;
   password?: boolean;
   placeholder?: string;
-  type?: "text" | "number" | "idcard" | "digit";
+  type?: 'text' | 'number' | 'idcard' | 'digit';
   maxLength?: number;
   focus?: boolean;
-  size?: "s" | "m" | "l" | "full";
+  size?: 's' | 'm' | 'l' | 'full';
   clearable?: boolean;
 }
 
-
 function getInputType(type, password) {
   if (password) {
     return 'password';

package/src/web/components/form/location/common/mapChoose.css

@@ -1,4 +1,6 @@
 /* mapChoose组件 */
+
+/* em = 16px */
 .weda-ui_map-choose {
   width: 100%;
   height: 100%;
@@ -35,8 +37,8 @@
   padding-left: 10px;
   padding-right: 10px;
   color: #b4b4b4;
-  font-size: 15px;
-  line-height: 31px;
+  font-size: 1em;
+  line-height: 2em;
   border-radius: 5px;
   overflow: hidden;
   white-space: nowrap;
@@ -57,9 +59,9 @@
   right: 0;
   width: 55px;
   height: 46px;
-  line-height: 46px;
+  line-height: 2.875em;
   text-align: center;
-  font-size: 16px;
+  font-size: 1em;
   color: #0079ff;
   background-color: #fff;
   cursor: pointer;
@@ -76,8 +78,8 @@
   padding-top: 6px;
   padding-bottom: 6px;
   border: 0;
-  font-size: 14px;
-  line-height: 18px;
+  font-size: 0.875em;
+  line-height: 1.125em;
   background: 0 0;
   position: relative;
   z-index: 1;
@@ -143,11 +145,11 @@
 }
 .map-choose-warp_sugges_choosed span {
   position: absolute;
-  right: 20px;
+  right: 1.25em;
   top: 50%;
   transform: translate(0, -50%);
-  width: 16px;
-  height: 16px;
+  width: 1em;
+  height: 1em;
   display: block !important;
   background-image: url('https://qcloudimg.tencent-cloud.cn/raw/354c15c0cb845120ac3e9c474e6737b3.png');
   background-size: 100% 100%;
@@ -162,8 +164,8 @@
 }
 .map-choose-warp_sugges_title,
 .map-choose-explore_title {
-  font-size: 14px;
-  line-height: 27px;
+  font-size: 0.875em;
+  line-height: 1.6875em;
   color: #333;
   font-weight: 400;
   display: block;

package/src/web/components/form/location/common/selectModal.jsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Modal, Button } from 'tea-component';
-import * as PropTypes from 'prop-types';
 import { usePlatform } from '../../../../utils/platform';
 import classNames from '../../../../utils/classnames';
 import MapChoose from './mapChoose';
@@ -32,9 +31,10 @@ export default function SelectModal({
   };
 
   const getPosition = (value) => {
-    const { title, location } = value;
+    const { title, location, address } = value;
     let loc = {
       poiname: title,
+      detailedAddress: address,
       latlng: { lat: location.lat, lng: location.lng },
     };
     positionRef.current = loc;
@@ -71,12 +71,3 @@ export default function SelectModal({
     </Modal>
   );
 }
-
-SelectModal.propTypes = {
-  location: PropTypes.object,
-  isSelectMapVisible: PropTypes.bool,
-  APIKEY: PropTypes.string,
-  setLocation: PropTypes.func,
-  setIsSelectMapVisible: PropTypes.func,
-  chooseLocation: PropTypes.func,
-};

package/src/web/components/form/location/common/useLocationInfo.js

@@ -9,6 +9,7 @@ export default function useLocationInfo({
 }) {
   const [location, setLocation] = useState({
     poiname: '',
+    detailedAddress: '',
     latlng: { lat: 39.98410411, lng: 116.307503 },
   });
   const [apiKeyStatus, setApiKeyStatus] = useState({
@@ -40,6 +41,7 @@ export default function useLocationInfo({
           ({ city, lat, lng, addr }) => {
             let locations = {
               poiname: city + addr,
+              detailedAddress: city + addr,
               latlng: { lat, lng },
               locationType,
             };
@@ -48,6 +50,7 @@ export default function useLocationInfo({
               eventsChange(
                 {
                   poiname: city + addr,
+                  detailedAddress: city + addr,
                   latitude: lat,
                   longitude: lng,
                 },
@@ -80,6 +83,7 @@ export default function useLocationInfo({
         });
         setLocation({
           poiname: '',
+          detailedAddress: '',
           latlng: { lat: 39.98410411, lng: 116.307503 },
           // @ts-ignore
           locationType,

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

@@ -8,7 +8,6 @@
   align-items: center;
   padding: 16px;
   width: 130px;
-
 }
 .form-location-label > span {
   margin-right: 0.28571rem;
@@ -44,17 +43,17 @@
 }
 
 .form-location-addr-title {
-  font-size: 16px;
+  font-size: 1em;
 }
 .form-location-addr-lat {
-  font-size: 12px;
+  font-size: 0.75em;
   color: rgba(0, 0, 0, 0.4);
-  line-height: 20px;
+  line-height: 1.25em;
 }
 
 .form-location-addr > img {
-  width: 19px;
-  height: 19px;
+  width: 1.25em;
+  height: 1.25em;
 }
 .form-location-addr > div {
   margin-left: 12px;
@@ -116,8 +115,8 @@
   padding-left: 10px;
   padding-right: 10px;
   color: #b4b4b4;
-  font-size: 15px;
-  line-height: 31px;
+  font-size: 1em;
+  line-height: 2.21428em;
   border-radius: 5px;
   overflow: hidden;
   white-space: nowrap;
@@ -136,19 +135,19 @@
   position: absolute;
   top: 0;
   right: 0;
-  width: 55px;
-  height: 46px;
-  line-height: 46px;
+  width: 3.4375em;
+  height: 2.875em;
+  line-height: 2.875em;
   text-align: center;
-  font-size: 16px;
+  font-size: 1em;
   color: #0079ff;
   background-color: #fff;
   cursor: pointer;
   display: none;
 }
 .map-choose-header_search img {
-  width: 16px;
-  height: 16px;
+  width: 1em;
+  height: 1em;
   margin-right: 4px;
 }
 .map-choose-header_search input {
@@ -157,8 +156,8 @@
   padding-top: 6px;
   padding-bottom: 6px;
   border: 0;
-  font-size: 14px;
-  line-height: 18px;
+  font-size: 0.875em;
+  line-height: 1.125em;
   background: 0 0;
   position: relative;
   z-index: 1;
@@ -216,8 +215,8 @@
   right: 20px;
   top: 50%;
   transform: translate(0, -50%);
-  width: 16px;
-  height: 16px;
+  width: 1em;
+  height: 1em;
   display: block !important;
   background-image: url('https://qcloudimg.tencent-cloud.cn/raw/354c15c0cb845120ac3e9c474e6737b3.png');
   background-size: 100% 100%;
@@ -232,8 +231,8 @@
 }
 .map-choose-warp_sugges_title,
 .map-choose-explore_title {
-  font-size: 14px;
-  line-height: 27px;
+  font-size: 0.875em;
+  line-height: 1.6875em;
   color: #333;
   font-weight: 400;
   display: block;

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,