@cloudbase/weda-ui 0.2.11 → 0.2.12

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import { Checkbox as TeaCheckbox, ConfigProvider } from 'tea-component';
 
 import classNames from '../../../utils/classnames';
@@ -8,23 +7,24 @@ import isObjectEqual from '../../../utils/isObjectEqual';
 import fromEntries from 'object.fromentries';
 import { usePlatform } from '../../../utils/platform';
 import { renderDecorator } from '../renderDecorator';
+import { CommonFormPropsType } from '../types';
 
 export default function Checkbox({
   // 系统属性
   id,
   className,
   style,
-  events,
+  events = {},
   // 组件属性
-  name,
-  label,
+  name = 'formCheckbox',
+  label = '标题',
   labelVisible = true,
-  range,
-  layout,
-  disabled,
-  requiredFlag,
+  range = [],
+  layout = 'horizontal',
+  disabled = false,
+  requiredFlag = false,
   decorator
-}) {
+}: PropsType) {
   const cls = classNames({
     'weda-ui': true,
     'weda-checkbox': true,
@@ -45,7 +45,7 @@ export default function Checkbox({
     : range.filter(({checked}) => checked).map(({value}) => value)
   );
   // 两次range不同时, 需要刷新checkedItems
-  const prevRangeRef = React.useRef();
+  const prevRangeRef = React.useRef<object[]>();
   React.useEffect(() => {
     if (!isObjectEqual(prevRangeRef.current, range)) {
       prevRangeRef.current = range;
@@ -64,15 +64,17 @@ export default function Checkbox({
       e.stopPropagation();
       const checked = !checkedItems[value];
       const newMap = Object.assign({}, checkedItems, { [value]: checked });
-      setCheckedItems(newMap);
-      events.change(
-        {
-          value: Object.entries(newMap)
-            .filter(([, checked]) => checked)
-            .map(([value]) => value),
-        },
-        { originEvent: e }
-      );
+      if (!disabled) {
+        setCheckedItems(newMap);
+        events.change(
+          {
+            value: Object.entries(newMap)
+              .filter(([, checked]) => checked)
+              .map(([value]) => value),
+          },
+          { originEvent: e }
+        );
+      }
     };
     return onChange;
   };
@@ -164,32 +166,6 @@ export default function Checkbox({
   );
 }
 
-Checkbox.propTypes = {
-  // 系统属性
-  id: PropTypes.string,
-  className: PropTypes.string,
-  style: PropTypes.string,
-  events: PropTypes.objectOf(PropTypes.func),
-  // 组件属性
-  name: PropTypes.string,
-  label: PropTypes.string,
-  labelVisible: PropTypes.bool,
-  range: PropTypes.array,
-  layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  disabled: PropTypes.bool,
-  requiredFlag: PropTypes.bool,
-  decorator: PropTypes.oneOfType([PropTypes.array, PropTypes.node])
-};
-
-Checkbox.defaultProps = {
-  // 系统属性
-  events: {},
-  // 组件属性
-  name: 'formCheckbox',
-  label: '标题',
-  labelVisible: true,
-  range: [],
-  layout: 'horizontal',
-  disabled: false,
-  requiredFlag: false,
-};
+export interface PropsType extends CommonFormPropsType {
+  range?: {label: string, value: any; [key: string]: any}[];
+}

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

@@ -5,18 +5,11 @@ import SelectContainer from './SelectContainer';
 
 import { multipleProps } from './props/defaultProps';
 import { propTypes } from './props/propsTypes';
+import { useSyncValue } from '../../../utils/useSyncValue';
 
 const { useState, useEffect } = React;
 
-const useValue = (value) => {
-  const [selectedValue, setSelectedValue] = useState('');
 
-  useEffect(() => {
-    setSelectedValue(value);
-  }, [value]);
-
-  return [selectedValue, setSelectedValue];
-};
 
 const NormalSelect = ({
   // 系统属性
@@ -45,7 +38,7 @@ const NormalSelect = ({
   // 业务属性
   isModelApp,
 }) => {
-  const [selectedValue, setSelectedValue] = useValue(value);
+  const [selectedValue, setSelectedValue] = useSyncValue(value);
 
   const onSelectChange = (value) => {
     // @ts-ignore

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import classNames from '../../../utils/classnames';
+import './index.css';
+import {ConfigProvider, Form as TeaForm} from 'tea-component';
+import { usePlatform } from '../../../utils/platform';
+import { CommonFormPropsType } from '../types';
+
+export default function Form({
+  // 系统属性
+  className,
+  // 组件属性
+  // title,
+  // description,
+  // tips,
+  contentSlot,
+  // buttonSlot,
+  style,
+  id,
+}) {
+  const platform = usePlatform();
+  const cls = classNames({
+    'weda-ui': true,
+    'weda-form': true,
+    'weui-form': platform === 'h5',
+    [className]: className,
+  });
+  if(platform === 'pc') {
+    return (
+      <ConfigProvider classPrefix="wedatea2td">
+        {/** @ts-expect-error tea form id */}
+        <TeaForm className={cls} style={style} id={id}>
+          {contentSlot}
+      </TeaForm>
+    </ConfigProvider>
+    );
+  }
+  return (
+    <div className={cls} style={style} id={id}>
+      <div className="weui-cells__group weui-cells__group_form">
+        {contentSlot}
+      </div>
+    </div>
+  );
+}
+
+export interface PropsType extends CommonFormPropsType {
+  contentSlot?: any;
+}

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 
 import classNames from '../../../utils/classnames';
 import './index.css';
 import { usePlatform } from '../../../utils/platform';
 import { ConfigProvider, Form as TeaForm } from 'tea-component';
+import { CommonFormPropsType } from '../types';
 
 export default function FormCell({
   className,
@@ -15,7 +15,7 @@ export default function FormCell({
   multiCell,
   requiredFlag,
   size
-}) {
+}: PropsType) {
   const platform = usePlatform();
   const isFlex = layout !== 'vertical';
 
@@ -78,14 +78,7 @@ export default function FormCell({
   );
 }
 
-FormCell.propTypes = {
-  className: PropTypes.string,
-  style: PropTypes.object,
-  label: PropTypes.string,
-  labelVisible: PropTypes.bool,
-  layout: PropTypes.string,
-  children: PropTypes.any,
-  multiCell: PropTypes.bool,
-  requiredFlag: PropTypes.bool,
-  size: PropTypes.string
-};
+export interface PropsType extends CommonFormPropsType {
+  multiCell?: boolean;
+  size?: string;
+}

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

@@ -0,0 +1,4 @@
+.wedatea2td-input {
+    background-color: transparent;
+    border: none;
+}

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
@@ -105,7 +104,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 +117,7 @@ const fieldEl = platform === 'h5' ? <div className={subCls}>
   onFocus={onFocus}
   onBlur={onBlur}
   onKeyDown={onKeyDown}
-/>;
+/></ConfigProvider>;
 return renderDecorator(fieldEl, decorator)({
   id,
   className: cls,
@@ -128,53 +128,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');
   }
 }