@cloudbase/weda-ui 0.2.10 → 0.2.14

package/src/web/components/form/select/{h5.jsx → h5.tsx}

@@ -1,13 +1,16 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import dayjs from 'dayjs';
+import * as _moment from 'moment';
 
 import weui from '../../../utils/weui';
 import classNames from '../../../utils/classnames';
 import isObjectEqual from '../../../utils/isObjectEqual';
 import { timePicker } from './time';
 import { regionPicker } from './region';
+import {PropsType} from './index';
+import { defaultProps } from './index';
 
+// @ts-expect-error TODO: fix 与plugin构建阶段效果不同
+const moment = (typeof _moment === 'function' ? _moment : _moment.default) as _moment.moment;
 export default function Select({
   // 系统属性
   events,
@@ -18,7 +21,7 @@ export default function Select({
   mode,
   disabled = false,
   // selector mode
-  range,
+  range = defaultProps.range,
   defaultValue,
   // date mode
   startDate,
@@ -31,7 +34,7 @@ export default function Select({
   // region mode
   defaultRegion,
   separator,
-}) {
+}: PropsType) {
   const [date, setDate] = React.useState(
     decodeIsoDatetime(defaultDate, 'date')
   );
@@ -44,7 +47,7 @@ export default function Select({
   const [selectedValue, setSelectedValue] = React.useState(defaultValue);
 
   // 两次默认值不同, 需要刷新
-  const prevDefaultRef = React.useRef({});
+  const prevDefaultRef = React.useRef<any>({});
   React.useEffect(() => {
     let hasChange = false;
     if (prevDefaultRef.current?.defaultValue !== defaultValue) {
@@ -82,7 +85,7 @@ export default function Select({
   });
 
   const onDateclick = function () {
-    const options = {
+    const options: Record<string, any> = {
       className: 'weda-ui weda-picker',
     };
     !!date && (options.defaultDate = date);
@@ -92,7 +95,7 @@ export default function Select({
     weui.datePicker({
       ...options,
       onConfirm(result) {
-        const value = dayjs()
+        const value = moment()
           .year(result[0].value)
           .month(result[1].value - 1)
           .date(result[2].value)
@@ -104,7 +107,7 @@ export default function Select({
   };
 
   const onTimeClick = function () {
-    const options = {
+    const options: Record<string, any> = {
       className: 'weda-ui weda-picker',
     };
     !!time && (options.defaultTime = time);
@@ -114,7 +117,7 @@ export default function Select({
     timePicker({
       ...options,
       onConfirm(result) {
-        const date = dayjs().hour(result[0].value).minute(result[1].value);
+        const date = moment().hour(result[0].value).minute(result[1].value);
         const value = date.format('HH:mm');
         setTime(value);
         events.change({
@@ -181,7 +184,7 @@ export default function Select({
 
   const result = React.useMemo(() => {
     return {
-      selector: range.find((item) => item.value === selectedValue)?.label,
+      selector: (range ?? []).find((item) => item.value === selectedValue)?.label,
       date: date,
       time: time,
       region: (region || []).join(separator), // region 有可能是空串
@@ -207,53 +210,6 @@ export default function Select({
   );
 }
 
-Select.propTypes = {
-  // 系统属性
-  className: PropTypes.string,
-  style: PropTypes.string,
-  events: PropTypes.objectOf(PropTypes.func),
-  // 组件属性
-  name: PropTypes.string,
-  placeholder: PropTypes.string,
-  layout: PropTypes.string,
-  mode: PropTypes.string,
-  disabled: PropTypes.bool,
-  // selector mode
-  range: PropTypes.array,
-  defaultValue: PropTypes.string,
-  // date mode
-  startDate: PropTypes.string,
-  endDate: PropTypes.string,
-  defaultDate: PropTypes.string,
-  // time mode
-  startTime: PropTypes.string,
-  endTime: PropTypes.string,
-  defaultTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  // region mode
-  defaultRegion: PropTypes.array,
-  separator: PropTypes.string,
-};
-
-Select.defaultProps = {
-  // 系统属性
-  events: {},
-  // 组件属性
-  label: '标题',
-  labelVisible: true,
-  name: 'formSelect',
-  placeholder: '请选择',
-  layout: 'horizontal',
-  mode: 'selector',
-  disabled: false,
-  requiredFlag: false,
-  // selector mode
-  range: [
-    { name: '选项一', value: 'first' },
-    { name: '选项二', value: 'second' },
-  ],
-  // region mode
-  separator: ',',
-};
 
 export function decodeIsoDatetime(isoStringOrTimesnap, type) {
   if (!isoStringOrTimesnap) {
@@ -275,22 +231,22 @@ export function decodeIsoDatetime(isoStringOrTimesnap, type) {
       isoStringOrTimesnap.match &&
       isoStringOrTimesnap.match(/^(\d{2}):(\d{2})$/);
     if (time && time[1] < 24 && time[2] < 60) {
-      return dayjs().hour(time[1]).minute(time[2]).format('HH:mm');
+      return moment().hour(time[1]).minute(time[2]).format('HH:mm');
     } else if (typeof isoStringOrTimesnap === 'number') {
       const timeSnap = Number(isoStringOrTimesnap);
       let day;
       try {
-        day = dayjs()
+        day = moment()
           .hour(Math.floor(timeSnap / 3600000) % 24)
           .minute(Math.floor((timeSnap % 3600000) / 60000));
       } catch (e) {
-        day = dayjs(timeSnap);
+        day = moment(timeSnap);
       }
       return day.format('HH:mm');
     } else {
-      return dayjs(isoStringOrTimesnap).format('HH:mm');
+      return moment(isoStringOrTimesnap).format('HH:mm');
     }
   } else {                                                
-    return dayjs(isoStringOrTimesnap).format('YYYY-MM-DD');
+    return moment(isoStringOrTimesnap).format('YYYY-MM-DD');
   }
 }

package/src/web/components/form/select/{index.jsx → index.tsx}

@@ -1,24 +1,26 @@
-import React from 'react';
+import * as React from 'react';
+import * as _moment from 'moment';
 import { usePlatform } from '../../../utils/platform';
 import SelectH5, { decodeIsoDatetime } from './h5';
 import classNames from '../../../utils/classnames';
-import * as PropTypes from 'prop-types';
 import {Select as TeaSelect, DatePicker, TimePicker, Cascader, ConfigProvider} from 'tea-component';
-import moment from 'moment';
 import isObjectEqual from '../../../utils/isObjectEqual';
 import { getRegionTree } from './region';
 import { renderDecorator } from '../renderDecorator';
+import { CommonFormPropsType } from '../types';
 
+// @ts-expect-error TODO: fix 与plugin构建阶段效果不同
+const moment = (typeof _moment === 'function' ? _moment : _moment.default) as _moment.moment;
 export default function Select(props) {
     const {
       id,
       style,
       className,
-      label,
-      labelVisible,
-      layout,
-      requiredFlag,
-      size,
+      label = '标题',
+      labelVisible = true,
+      layout = 'horizontal',
+      requiredFlag = false,
+      size = 'l',
       decorator
     } = props;
     const platform = usePlatform();
@@ -47,101 +49,56 @@ export default function Select(props) {
       }
     );
 }
-
-SelectPc.propTypes = {
-  // 系统属性
-  className: PropTypes.string,
-  events: PropTypes.objectOf(PropTypes.func),
-  // 组件属性
-  label: PropTypes.string,
-  labelVisible: PropTypes.bool,
-  name: PropTypes.string,
-  placeholder: PropTypes.string,
-  layout: PropTypes.string,
-  mode: PropTypes.string,
-  disabled: PropTypes.bool,
+export interface PropsType extends CommonFormPropsType {
+  size: 's' | 'm' | 'l' | 'full';
+  placeholder: string;
+  mode: 'selector' | 'date' | 'time' | 'region';
   // selector mode
-  range: PropTypes.array,
-  defaultValue: PropTypes.string,
+  range?: any[];
+  defaultValue?: string;
   // date mode
-  startDate: PropTypes.string,
-  endDate: PropTypes.string,
-  defaultDate: PropTypes.string,
+  startDate?: string;
+  endDate?: string;
+  defaultDate?: string;
   // time mode
-  startTime: PropTypes.string,
-  endTime: PropTypes.string,
-  defaultTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  startTime?: string;
+  endTime?: string;
+  defaultTime?: string | number;
   // region mode
-  defaultRegion: PropTypes.array,
-  separator: PropTypes.string,
-  size: PropTypes.oneOf(['s', 'm', 'l', 'full'])
-};
-
+  defaultRegion?: any[];
+  separator?: string;
+  requiredFlag?: boolean;
+}  
 
-Select.propTypes = {
+export const defaultProps = {
   // 系统属性
-  id: PropTypes.string,
-  className: PropTypes.string,
-  style: PropTypes.string,
-  size: PropTypes.oneOf(['s', 'm', 'l', 'full']),
-  events: PropTypes.objectOf(PropTypes.func),
+  events: {},
   // 组件属性
-  label: PropTypes.string,
-  labelVisible: PropTypes.bool,
-  name: PropTypes.string,
-  placeholder: PropTypes.string,
-  layout: PropTypes.string,
-  mode: PropTypes.string,
-  disabled: PropTypes.bool,
-  decorator: PropTypes.oneOfType([PropTypes.array, PropTypes.node]),
+  label: '标题',
+  size: 'l' as const,
+  labelVisible: true,
+  name: 'formSelect',
+  placeholder: '请选择',
+  layout: 'horizontal',
+  mode: 'selector',
+  disabled: false,
+  requiredFlag: false,
   // selector mode
-  range: PropTypes.array,
-  defaultValue: PropTypes.string,
-  // date mode
-  startDate: PropTypes.string,
-  endDate: PropTypes.string,
-  defaultDate: PropTypes.string,
-  // time mode
-  startTime: PropTypes.string,
-  endTime: PropTypes.string,
-  defaultTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  range: [
+    { name: '选项一', value: 'first' },
+    { name: '选项二', value: 'second' },
+  ],
   // region mode
-  defaultRegion: PropTypes.array,
-  separator: PropTypes.string,
-  requiredFlag: PropTypes.bool,
+  separator: ',',
 };
 
-
-Select.defaultProps = {
-    // 系统属性
-    events: {},
-    // 组件属性
-    label: '标题',
-    size: 'l',
-    labelVisible: true,
-    name: 'formSelect',
-    placeholder: '请选择',
-    layout: 'horizontal',
-    mode: 'selector',
-    disabled: false,
-    requiredFlag: false,
-    // selector mode
-    range: [
-      { name: '选项一', value: 'first' },
-      { name: '选项二', value: 'second' },
-    ],
-    // region mode
-    separator: ',',
-  };
-  
-
 function SelectPc({
     defaultValue,
-    placeholder,
-    mode,
-    events,
-    disabled,
-    range,
+    placeholder = '请选择',
+    mode = 'selector',
+    events = {},
+    disabled = false,
+    range = defaultProps.range,
     startDate,
     endDate,
     defaultDate,
@@ -149,12 +106,12 @@ function SelectPc({
     startTime,
     endTime,
     defaultRegion,
-    separator,
-    size
-}) {
+    separator = defaultProps.separator,
+    size = defaultProps.size,
+}: PropsType) {
     
     // 两次默认值不同, 需要刷新
-  const prevDefaultRef = React.useRef();
+  const prevDefaultRef = React.useRef<any>();
   const [date, setDate] = React.useState(
     decodeIsoDatetime(defaultDate, 'date')
   );

package/src/web/components/form/select/region/{cities.js → cities.ts}

@@ -2407,4 +2407,4 @@ export const cities = [
     "parent_code": "65",
     "en": "County-level administrative divisions directly under the Central Government"
   }
-];
+] as const;

package/src/web/components/form/select/region/{index.js → index.ts}

@@ -1,7 +1,7 @@
 // 暂时把地区信息打包在本地, 后续移到COS桶内
-import {provinces} from './provinces.js';
-import {cities} from './cities.js';
-import {regions} from './regions.js';
+import {provinces} from './provinces';
+import {cities} from './cities';
+import {regions} from './regions';
 import weui from '../../../../utils/weui';
 
 let tree;

package/src/web/components/form/select/region/{provinces.js → provinces.ts}

@@ -237,4 +237,4 @@ export const provinces = [
     "parent_code": "",
     "en": "Taiwan"
   }
-];
+] as const;

package/src/web/components/form/select/region/{regions.js → regions.ts}

@@ -20642,4 +20642,4 @@ export const regions = [
     "parent_code": "620201",
     "en": "Changcheng District"
   }
-];
+] as const;

package/src/web/components/form/select/time.jsx

@@ -18,8 +18,8 @@ export function timePicker(options) {
   ).split(':');
   const initTime = parseInt(initHour) * 60 + parseInt(initMin);
   const fixInitTime = Math.max(startTime, Math.min(endTime, initTime));
-  const fixInitHour = parseInt(fixInitTime / 60);
-  const fixInitMin = parseInt(fixInitTime % 60);
+  const fixInitHour = Math.floor(fixInitTime / 60);
+  const fixInitMin = Math.floor(fixInitTime % 60);
 
   const hours = [];
   for (let hour = 0; hour < 24; hour++) {

package/src/web/components/form/switch/{index.jsx → index.tsx}

@@ -1,27 +1,28 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 
 import classNames from '../../../utils/classnames';
 import getLocalCounter from '../../../utils/getLocalCounter';
 import {usePlatform} from '../../../utils/platform';
-import {Switch as TeaSwitch} from 'tea-component';
+import {ConfigProvider, Switch as TeaSwitch} from 'tea-component';
 import { renderDecorator } from '../renderDecorator';
 import { useSyncValue } from '../../../utils/useSyncValue';
+import { CommonFormPropsType } from '../types';
+
 export default function Switch({
   // 系统属性
   id,
   className,
   style,
-  events,
+  events = {},
   // 组件属性
-  label,
-  labelVisible,
+  label = '标题',
+  labelVisible = true,
   checked: defaultChecked,
-  layout,
-  disabled,
-  requiredFlag,
+  layout = 'horizontal',
+  disabled = false,
+  requiredFlag = false,
   decorator
-}) {
+}: PropsType) {
   const isFlex = layout !== 'vertical';
   const cls = classNames({
     'weda-ui': true,
@@ -40,10 +41,6 @@ export default function Switch({
   // 两次默认值不同时, 需要刷新
   const [checked, setChecked] = useSyncValue(defaultChecked);
   
-  const onChange = function (e) {
-    setChecked(e.target.checked);
-    events.change({ value: e.target.checked }, { originEvent: e });
-  };
 
   // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
   const hashcode = getLocalCounter();
@@ -60,7 +57,11 @@ export default function Switch({
           type="checkbox"
           checked={checked}
           disabled={disabled}
-          onChange={onChange}
+          onChange={(ev) => {
+            const value = ev.target.checked;
+            setChecked(value);
+            events.change({ value }, {orgianalEvent: ev});
+          }}
         />
         <div className="weui-switch-cp__box"></div>
       </label>
@@ -68,12 +69,18 @@ export default function Switch({
   </div>
   ) : 
   (
-    <TeaSwitch
-      id={_id}
-      value={checked}
-      disabled={disabled}
-      onChange={onChange}
-    />
+    <ConfigProvider classPrefix="wedatea2td">
+      <TeaSwitch
+        id={_id}
+        value={checked}
+        disabled={disabled}
+        onChange={(value, context) => {
+          const originEvent = context.event;
+          setChecked(value);
+          events.change({ value }, {originEvent});
+        }}
+      />
+    </ConfigProvider>
   );
   
   return renderDecorator(switchElement, decorator)({
@@ -88,30 +95,6 @@ export default function Switch({
   });
 }
 
-Switch.propTypes = {
-  // 系统属性
-  id: PropTypes.string,
-  className: PropTypes.string,
-  style: PropTypes.string,
-  events: PropTypes.objectOf(PropTypes.func),
-  // 组件属性
-  label: PropTypes.string,
-  labelVisible: PropTypes.bool,
-  disabled: PropTypes.bool,
-  checked: PropTypes.bool,
-  layout: PropTypes.string,
-  requiredFlag: PropTypes.bool,
-  decorator: PropTypes.oneOfType([PropTypes.array, PropTypes.node])
-};
-
-Switch.defaultProps = {
-  // 系统属性
-  events: {},
-  // 组件属性
-  label: '标题',
-  labelVisible: true,
-  disabled: false,
-  checked: false,
-  layout: PropTypes.string,
-  requiredFlag: false,
-};
+export interface PropsType extends CommonFormPropsType {
+  checked?: boolean;
+}

package/src/web/components/form/textarea/{index.jsx → index.tsx}

@@ -1,34 +1,33 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 
 import classNames from '../../../utils/classnames';
-import FormCell from '../formcell';
 import './index.css';
 import { ConfigProvider, Input } from 'tea-component';
 import { usePlatform } from '../../../utils/platform';
 import { renderDecorator } from '../renderDecorator';
 import { useSyncValue } from '../../../utils/useSyncValue';
+import { CommonFormPropsType } from '../types';
 
 export default function Textarea({
   // 系统属性
   id,
   className,
   style,
-  events,
+  events = {},
   // 组件属性
-  label,
-  labelVisible,
-  defaultValue,
-  placeholder,
-  maxLength,
-  disabled,
-  focus: autoFocus,
-  layout,
-  requiredFlag,
-  counterVisible,
-  size,
+  label = '标题',
+  labelVisible = true,
+  defaultValue = '',
+  placeholder = '请输入',
+  maxLength = 140,
+  disabled = false,
+  focus: autoFocus = false,
+  layout = 'horizontal',
+  requiredFlag = false,
+  counterVisible = true,
+  size = 'l',
   decorator
-}) {
+}: PropsType) {
   const platform = usePlatform();
 
   const cls = classNames({
@@ -105,43 +104,11 @@ export default function Textarea({
     }
   );
 }
-
-Textarea.propTypes = {
-  // 系统属性
-  id: PropTypes.string,
-  style: PropTypes.string,
-  className: PropTypes.string,
-  events: PropTypes.object,
-  // 组件属性
-  label: PropTypes.string,
-  labelVisible: PropTypes.bool,
-  name: PropTypes.string,
-  defaultValue: PropTypes.string,
-  placeholder: PropTypes.string,
-  maxLength: PropTypes.number,
-  disabled: PropTypes.bool,
-  focus: PropTypes.bool,
-  layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  requiredFlag: PropTypes.bool,
-  counterVisible: PropTypes.bool,
-  size: PropTypes.oneOf(['s', 'm', 'l', 'full']),
-  decorator: PropTypes.oneOfType([PropTypes.array, PropTypes.node])
-};
-
-Textarea.defaultProps = {
-  // 系统属性
-  events: {},
-  // 组件属性
-  label: '标题',
-  labelVisible: true,
-  nane: 'formTextarea',
-  defaultValue: '',
-  placeholder: '请输入',
-  maxLength: 140,
-  disabled: false,
-  focus: false,
-  layout: 'horizontal',
-  requiredFlag: false,
-  counterVisible: true,
-  size: 'l'
-};
+export interface PropsType extends CommonFormPropsType {
+  defaultValue?: string;
+  placeholder?: string;
+  maxLength?: number;
+  focus?: boolean;
+  counterVisible?: boolean;
+  size?: 's' | 'm' | 'l' | 'full';
+}

package/src/web/components/form/tips/{index.jsx → index.tsx}

@@ -1,17 +1,17 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 
 import classNames from '../../../utils/classnames';
+import { CommonPropsType } from '../../../types';
 
 export default function Tips({
   // 系统属性
   className,
   // 组件属性
-  tips,
-  type,
+  tips = '表单提示',
+  type = 'normal',
   id,
   style
-}) {
+}: PropsType) {
   const cls = classNames({
     'weda-ui': true,
     'weda-tips': true,
@@ -27,21 +27,7 @@ export default function Tips({
   );
 }
 
-Tips.propTypes = {
-  // 系统属性
-  id: PropTypes.string,
-  className: PropTypes.string,
-  events: PropTypes.objectOf(PropTypes.func),
-  // 组件属性
-  tips: PropTypes.string,
-  type: PropTypes.oneOf(['normal', 'warn']),
-  style: PropTypes.object
-};
-
-Tips.defaultProps = {
-  // 系统属性
-  events: {},
-  // 组件属性
-  tips: '表单提示',
-  type: 'normal',
-};
+export interface PropsType extends CommonPropsType {
+  tips?: string;
+  type?: 'warn' | 'normal';
+}

package/src/web/components/form/types.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { CommonPropsType } from "../../types";
+
+export interface CommonFormPropsType extends CommonPropsType {
+    name?: string;
+    label?: string;
+    labelVisible?: boolean;
+    layout?: "horizontal" | "vertical";
+    disabled?: boolean;
+    requiredFlag?: boolean;
+    decorator?: React.FC<any>;
+}