@cloudbase/weda-ui 0.2.11 → 0.2.15

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

@@ -1,34 +1,34 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
-
 import classNames from '../../../utils/classnames';
 import { usePlatform } from '../../../utils/platform';
-import { Input as TeaInput } from 'tea-component';
+import { Input as TeaInput, ConfigProvider } from 'tea-component';
 import { renderDecorator } from '../renderDecorator';
 import { useSyncValue } from '../../../utils/useSyncValue';
+import './index.css';
+import { CommonFormPropsType } from '../types';
+
 export default function Input({
-  // 系统属性
   id,
   className,
   style,
-  events,
+  events = {},
   // 组件属性
-  label,
-  labelVisible,
-  name,
-  defaultValue,
-  password,
-  placeholder,
-  type,
-  maxLength,
-  disabled,
-  focus: autoFocus,
-  layout,
-  requiredFlag,
-  size,
+  label = '标题',
+  labelVisible = true,
+  name = 'formInput',
+  defaultValue = '',
+  password = false,
+  placeholder = '请输入',
+  type = 'text',
+  maxLength = 140,
+  disabled = false,
+  focus: autoFocus = false,
+  layout = 'horizontal',
+  requiredFlag = false,
+  size = 'l',
+  clearable = true,
   decorator,
-  clearable
-}) {
+}: PropsType) {
   const platform = usePlatform();
   const cls = classNames({
     'weda-ui': true,
@@ -80,7 +80,6 @@ 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
@@ -95,6 +94,7 @@ const fieldEl = platform === 'h5' ? <div className={subCls}>
         onFocus={onFocus}
         onBlur={onBlur}
         onKeyDown={onKeyDown}
+        role="input"
       />
       {clearable &&
         <button
@@ -105,7 +105,8 @@ const fieldEl = platform === 'h5' ? <div className={subCls}>
         </button>
       }
   </div>
-</div> : <TeaInput
+</div> : <ConfigProvider classPrefix="wedatea2td">
+  <TeaInput
   size={size}
   type={inputType}
   placeholder={placeholder}
@@ -117,7 +118,7 @@ const fieldEl = platform === 'h5' ? <div className={subCls}>
   onFocus={onFocus}
   onBlur={onBlur}
   onKeyDown={onKeyDown}
-/>;
+/></ConfigProvider>;
 return renderDecorator(fieldEl, decorator)({
   id,
   className: cls,
@@ -128,53 +129,19 @@ return renderDecorator(fieldEl, decorator)({
   requiredFlag,
   size
 });
-
-  
 }
 
-Input.propTypes = {
-  // 系统属性
-  id: PropTypes.string,
-  className: PropTypes.string,
-  style: PropTypes.string,
-  events: PropTypes.object,
-  // 组件属性
-  label: PropTypes.string,
-  labelVisible: PropTypes.bool,
-  name: PropTypes.string,
-  defaultValue: PropTypes.string,
-  password: PropTypes.bool,
-  placeholder: PropTypes.string,
-  type: PropTypes.oneOf(['text', 'number', 'idcard', 'digit']),
-  maxLength: PropTypes.number,
-  disabled: PropTypes.bool,
-  focus: PropTypes.bool,
-  layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  requiredFlag: PropTypes.bool,
-  size: PropTypes.oneOf(['s', 'm', 'l', 'full']),
-  decorator: PropTypes.oneOfType([PropTypes.array, PropTypes.node]),
-  clearable: PropTypes.bool
-};
+export interface PropsType extends CommonFormPropsType {
+  defaultValue?: string;
+  password?: boolean;
+  placeholder?: string;
+  type?: "text" | "number" | "idcard" | "digit";
+  maxLength?: number;
+  focus?: boolean;
+  size?: "s" | "m" | "l" | "full";
+  clearable?: boolean;
+}
 
-Input.defaultProps = {
-  // 系统属性
-  events: {},
-  // 组件属性
-  label: '标题',
-  labelVisible: true,
-  name: 'formInput',
-  defaultValue: '',
-  password: false,
-  placeholder: '请输入',
-  type: 'text',
-  maxLength: 140,
-  disabled: false,
-  focus: false,
-  layout: 'horizontal',
-  requiredFlag: false,
-  size: 'l',
-  clearable: true
-};
 
 function getInputType(type, password) {
   if (password) {

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

@@ -1,31 +1,31 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import {ConfigProvider, Radio as TeaRadio} from 'tea-component';
 
 import {usePlatform} from '../../../utils/platform';
 import classNames from '../../../utils/classnames';
 import getLocalCounter from '../../../utils/getLocalCounter';
 import isObjectEqual from '../../../utils/isObjectEqual';
-import FormCell from '../formcell';
 
 import './index.css';
 import { renderDecorator } from '../renderDecorator';
+import { CommonFormPropsType } from '../types';
+
 export default function Radio({
   // 系统属性
   id,
   className,
   style,
-  events,
+  events = {},
   // 组件属性
-  label,
-  labelVisible,
-  name,
-  range,
-  layout,
-  disabled,
-  requiredFlag,
+  label = '标题',
+  labelVisible = true,
+  name = 'formRadio',
+  range = [],
+  layout = 'horizontal',
+  disabled = false,
+  requiredFlag = false,
   decorator
-}) {
+}: PropsType) {
   const platform = usePlatform();
   const isH5 = platform === 'h5';
   const cls = classNames({
@@ -44,7 +44,7 @@ export default function Radio({
     range.find((item) => item.checked)?.value
   );
   // 两次range不同时, 需要刷新checkedItemValue
-  const prevRangeRef = React.useRef();
+  const prevRangeRef = React.useRef<PropsType['range']>();
   React.useEffect(() => {
     if (!isObjectEqual(prevRangeRef.current, range)) {
       prevRangeRef.current = range;
@@ -59,8 +59,10 @@ export default function Radio({
   const getChangeHandler = function (value) {
     const onChange = function (e) {
       e.stopPropagation();
-      setCheckedItemValue(value);
-      events.change({ value }, { originEvent: e });
+      if (!disabled) {
+        setCheckedItemValue(value);
+        events.change({ value }, { originEvent: e });
+      }
     };
     return onChange;
   };
@@ -128,32 +130,7 @@ export default function Radio({
   });
 }
 
-Radio.propTypes = {
-  // 系统属性
-  id: PropTypes.string,
-  className: PropTypes.string,
-  style: PropTypes.string,
-  events: PropTypes.objectOf(PropTypes.func),
-  // 组件属性
-  label: PropTypes.string,
-  labelVisible: PropTypes.bool,
-  name: PropTypes.string,
-  range: PropTypes.array,
-  layout: PropTypes.string,
-  disabled: PropTypes.bool,
-  requiredFlag: PropTypes.bool,
-  decorator: PropTypes.oneOfType([PropTypes.array, PropTypes.node])
-};
-
-Radio.defaultProps = {
-  // 系统属性
-  events: {},
+export interface PropsType extends CommonFormPropsType {
   // 组件属性
-  label: '标题',
-  labelVisible: true,
-  name: 'formRadio',
-  range: [],
-  layout: 'horizontal',
-  disabled: false,
-  requiredFlag: false,
-};
+  range?: ({label: string} & Record<string, any>)[];
+}

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

@@ -3,11 +3,9 @@ import FormCell from "./formcell";
 
 /**
  * 
- * @param {React.ReactNode} filedNode 
- * @param {React.FC|[React.FC, any]} DecoratorComponent 
  * @returns {(props: any) => JSX.Element}
  */
-export function renderDecorator(filedNode, DecoratorComponent = FormCell) {
+export function renderDecorator<D=any>(filedNode: React.ReactNode, DecoratorComponent: React.FC<D> = FormCell) {
     if(!DecoratorComponent) {
         return function WedaFormField() {
             return (

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++) {