@cloudbase/weda-ui 2.0.11 → 2.0.12

package/src/web/components/chart/common/useChart.tsx

@@ -1,14 +1,28 @@
-import { useAsync, useDeepCompareEffect, useEventListener, useIsMounted, useMountEffect } from "@react-hookz/web";
-import { MutableRefObject, RefObject, useCallback, useEffect, useMemo, useRef } from "react";
-import { IEchartModalBase } from "./core/eChartBase";
-import { echarts } from "./echarts";
+import {
+  useAsync,
+  useDeepCompareEffect,
+  useEventListener,
+  useIsMounted,
+  useMountEffect,
+} from '@react-hookz/web';
+import {
+  MutableRefObject,
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import { IEchartModalBase } from './core/eChartBase';
+import { echarts } from './echarts';
 
-export function useChart(ref: RefObject<HTMLElement> | MutableRefObject<HTMLElement>) {
+export function useChart(
+  ref: RefObject<HTMLElement> | MutableRefObject<HTMLElement>
+) {
   const chartRef = useRef<echarts.ECharts>();
   const isMounted = useIsMounted();
   useMountEffect(() => {
-
-    if(!ref.current || !isMounted) {
+    if (!ref.current || !isMounted) {
       return;
     }
 
@@ -28,16 +42,19 @@ export function useChart(ref: RefObject<HTMLElement> | MutableRefObject<HTMLElem
   return chartRef.current;
 }
 
-
 /**
  * @deprecated The method should not be used
  */
-export function useWedaChart(domRef, ModalClass: IEchartModalBase, options: echarts.EChartsCoreOption) {
+export function useWedaChart(
+  domRef,
+  ModalClass: IEchartModalBase,
+  options: echarts.EChartsCoreOption
+) {
   const chart = useChart(domRef);
-  const getOptions = async() => {
+  const getOptions = async () => {
     const chartModal = new ModalClass();
     let finalOptions: any = await chartModal.setOptions(options);
-    if(!finalOptions) {
+    if (!finalOptions) {
       finalOptions = chartModal.getOptions() as any;
     }
     return finalOptions;
@@ -50,18 +67,19 @@ export function useWedaChart(domRef, ModalClass: IEchartModalBase, options: echa
   useDeepCompareEffect(() => {
     actions.execute();
   }, [
-  // options 变化，包含所有配置项，包括纯前端的配置项变化都会触发setOptions里发请求，但改不动了
-  options,
-  actions]);
+    // options 变化，包含所有配置项，包括纯前端的配置项变化都会触发setOptions里发请求，但改不动了
+    options,
+    actions,
+  ]);
   useEffect(() => {
-    if(state.status === 'success' && chart) {
+    if (state.status === 'success' && chart) {
       console.log(ModalClass.name, options, state.result, window.location.href);
       chart.setOption(
         state.result,
         true // noMerge 全刷
       );
     } else {
-      if(state.status === 'error') {
+      if (state.status === 'error') {
         console.error(state.error);
       }
     }

package/src/web/components/container/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';
 
 export default function Container({
@@ -8,7 +8,7 @@ export default function Container({
   events = {},
   className,
   style,
-  id
+  id,
 }: PropsType) {
   return (
     <div
@@ -31,5 +31,4 @@ export default function Container({
 
 export interface PropsType extends CommonPropsType {
   title?: string;
-
-}
+}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ConfigProvider, Drawer, DrawerProps } from 'tea-component';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 
 const TeaDrawer = ({
   size,
@@ -38,19 +38,30 @@ const TeaDrawer = ({
         disableCloseIcon={disableCloseIcon}
         outerClickClosable={outerClickClosable}
         {...eventsList}
-        >
+      >
         {childrenSlot}
       </Drawer>
     </ConfigProvider>
   );
 };
 
-export interface PropsType extends CommonPropsType, Pick<DrawerProps, 'size'|'title'|'showMask'|'placement'|'disableCloseIcon'|'outerClickClosable'|'subtitle'> {
+export interface PropsType
+  extends CommonPropsType,
+    Pick<
+      DrawerProps,
+      | 'size'
+      | 'title'
+      | 'showMask'
+      | 'placement'
+      | 'disableCloseIcon'
+      | 'outerClickClosable'
+      | 'subtitle'
+    > {
   visible: boolean;
   title?: string;
   extraSlot?: React.ReactNode;
   footerSlot?: React.ReactNode;
-  childrenSlot?: React.ReactNode;  
+  childrenSlot?: React.ReactNode;
 }
 
 export default TeaDrawer;

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

@@ -7,7 +7,7 @@ import isObjectEqual from '../../../utils/isObjectEqual';
 import fromEntries from 'object.fromentries';
 import { usePlatform } from '../../../utils/platform';
 import { renderDecorator } from '../renderDecorator';
-import { CommonFormPropsType } from '../types';
+import type { CommonFormPropsType } from '../types';
 import { callWedaApi } from '../../../utils/tcb';
 import destr from 'destr';
 
@@ -27,7 +27,7 @@ export default function Checkbox({
   layout = 'horizontal',
   disabled = false,
   requiredFlag = false,
-  decorator
+  decorator,
 }: PropsType) {
   const cls = classNames({
     'weda-ui': true,
@@ -46,7 +46,8 @@ export default function Checkbox({
 
   const [option, setOption] = useState(range);
   const [checkedItems, setCheckedItems] = React.useState(
-    platform === 'h5' ? fromEntries(option.map(({ value, checked }) => [value, !!checked]))
+    platform === 'h5'
+      ? fromEntries(option.map(({ value, checked }) => [value, !!checked]))
       : option.filter(({ checked }) => checked).map(({ value }) => value)
   );
   // 两次range不同时, 需要刷新checkedItems
@@ -69,23 +70,25 @@ export default function Checkbox({
 
   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);
@@ -153,9 +156,8 @@ export default function Checkbox({
           disabled={disabled}
           value={Object.entries(checkedItems)
             .filter(([, checked]) => checked)
-            .map(([value]) => value)
-          }
-          onChange={value => {
+            .map(([value]) => value)}
+          onChange={(value) => {
             const newMap = option
               .map((opt) => opt.value)
               .reduce((acc, cur) => {
@@ -168,13 +170,11 @@ export default function Checkbox({
                 return acc;
               }, {});
             setCheckedItems(newMap);
-            events.change(
-              {
-                value: Object.entries(newMap)
-                  .filter(([, checked]) => checked)
-                  .map(([value]) => value),
-              },
-            );
+            events.change({
+              value: Object.entries(newMap)
+                .filter(([, checked]) => checked)
+                .map(([value]) => value),
+            });
           }}
         >
           {option.map(({ value, label }, index) => {
@@ -189,21 +189,22 @@ export default function Checkbox({
       </ConfigProvider>
     );
   }
-  return renderDecorator(checkboxElement, decorator)(
-    {
-      id,
-      className: cls,
-      style,
-      label: labelVisible ? label : null,
-      layout,
-      multiCell: true,
-      requiredFlag,
-    }
-  );
+  return renderDecorator(
+    checkboxElement,
+    decorator
+  )({
+    id,
+    className: cls,
+    style,
+    label: labelVisible ? label : null,
+    layout,
+    multiCell: true,
+    requiredFlag,
+  });
 }
 
 export interface PropsType extends CommonFormPropsType {
-  range?: { label: string, value: any;[key: string]: any }[];
+  range?: { label: string; value: any; [key: string]: any }[];
   format?: string;
   enumName?: string;
 }

package/src/web/components/form/enumSelect/NormalSelect.tsx

@@ -9,8 +9,6 @@ import { useSyncValue } from '../../../utils/useSyncValue';
 
 const { useState, useEffect } = React;
 
-
-
 const NormalSelect = ({
   // 系统属性
   id,

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

@@ -2,11 +2,8 @@
   color: inherit;
 }
 
-.wedatea2td-form > .gsd-h5-react-formitem,
-.wedatea2td-form > div > .gsd-h5-react-formitem {
-  padding-left: 32px;
-}
-
-.weda-ui.weda-form-pc, .weda-ui.gsd-h5-react-form-pc {
+.weda-ui.weda-form-pc,
+.weda-ui.gsd-h5-react-form-pc {
   padding-left: 24px;
+  padding-right: 24px;
 }

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

@@ -16,6 +16,7 @@ export default function Form({
   // buttonSlot,
   style,
   id,
+  layout,
 }) {
   const platform = usePlatform();
   const cls = classNames({
@@ -30,7 +31,7 @@ export default function Form({
     return (
       <ConfigProvider classPrefix="wedatea2td">
         {/** @ts-expect-error tea form id */}
-        <TeaForm className={cls} style={style} id={id}>
+        <TeaForm layout={layout} className={cls} style={style} id={id}>
           {contentSlot}
         </TeaForm>
       </ConfigProvider>

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

@@ -16,11 +16,16 @@
 }
 .weda-formcells.weui-flex .weda-formcells__label {
   width: 130px;
+  padding-bottom: 16px;
 }
 .weui-cells__group_form .weui-cell {
   padding: 16px 16px;
 }
 
+.weda-formcells .weda-formcells__label {
+  padding-bottom: 8px;
+}
+
 .weda-formcells__content.weui-flex__item .weui-cell_form {
   padding: 0;
 }
@@ -29,7 +34,6 @@
   padding-right: 16px;
 }
 
-
 /* formcell 在 form container 外部兼容 and 独立 layout 适配 */
 
 .weda-formcells__pc.vertical .wedatea2td-form__controls,
@@ -74,7 +78,6 @@
 .weda-formcells__pc .wedatea2td-form__label label,
 .weda-formcells__pc .wedatea2td-form__label legend {
   display: inline-block;
-  white-space: nowrap;
   font-size: 1rem;
   transform: translateZ(0);
 }
@@ -92,5 +95,4 @@
 }
 /*formcell end*/
 
-
 /* formcell 在 form container 外部兼容 */

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

@@ -33,12 +33,8 @@ export default function FormCell({
             [layout]: layout,
             [className]: [className],
           })}
-          label={
-            <>
-              {label}
-              {requiredFlag && <span className="weda-formcells__flag">*</span>}
-            </>
-          }
+          label={label}
+          required={requiredFlag}
         >
           {children}
         </TeaForm.Item>

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

@@ -8,12 +8,12 @@
 把weui-cell 的padding还回到input
 */
 .weda-ui input.weui-input {
-    padding: 28px 0;
+  padding: 28px 0;
 }
 
 .weda-ui.weda-input .weui-flex__item .weui-cell_form {
-    padding: 0;
-    padding-right: 16px;
+  padding: 0;
+  padding-right: 16px;
 }
 
 .weda-ui.weda-input .weui-cell_form {
@@ -29,7 +29,7 @@
     START
 */
 .weda-ui .wedatea2td-input {
-    background: inherit;
+  background: inherit;
 }
 /**
  * END

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/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;