@cloudbase/weda-ui 0.2.11 → 0.2.12

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>;
+}

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

@@ -1,6 +1,5 @@
 /* eslint-disable react/prop-types */
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import { usePlatform } from '../../../utils/platform';
 import { ImageUploaderH5 as UploaderH5 } from './uploader.h5';
 import classNames from '../../../utils/classnames';
@@ -28,16 +27,19 @@ function UploaderPc(props) {
   const cls = classNames({
     'weda-ui': true,
     [className]: className,
-    'cloudbase_standard': true
+    cloudbase_standard: true,
   });
   return renderDecorator(
-  <UploaderPCInner 
-  {...restProps}
-  style={{
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center'
-  }} />, decorator)({
+    <UploaderPCInner
+      {...restProps}
+      style={{
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    />,
+    decorator
+  )({
     id,
     className: cls,
     style,
@@ -55,9 +57,9 @@ export default function Uploader(props) {
   if (props?.showType === 'h5') {
     return <UploaderH5 {...props} />;
   }
-  return platform === 'h5' ? <UploaderH5 {...props} /> : <UploaderPc {...props} />;
+  return platform === 'h5' ? (
+    <UploaderH5 {...props} />
+  ) : (
+    <UploaderPc {...props} />
+  );
 }
-
-Uploader.propTypes = {
-  showType: PropTypes.string, // 强制展示某个平台 pc | h5
-};