@cloudbase/weda-ui 0.2.10 → 0.2.14

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/MultipleSelect.jsx

@@ -5,7 +5,6 @@ import SelectContainer from './SelectContainer';
 
 import { normalProps } from './props/defaultProps';
 import { propTypes } from './props/propsTypes';
-import useOptions from './hooks';
 
 const MultipleSelect = ({
   // 系统属性
@@ -31,14 +30,10 @@ const MultipleSelect = ({
   virtual,
   searchable,
   size,
+  options,
   // 业务属性
-  enumType,
-  customEnum,
-  optionId,
   isModelApp,
 }) => {
-  const options = useOptions({ enumType, optionId, customEnum });
-
   const onSelectChange = (values) => {
     // @ts-ignore
     events.change && events.change({ value: values });

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

@@ -5,19 +5,11 @@ import SelectContainer from './SelectContainer';
 
 import { multipleProps } from './props/defaultProps';
 import { propTypes } from './props/propsTypes';
-import useOptions from './hooks';
+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 = ({
   // 系统属性
@@ -42,14 +34,11 @@ const NormalSelect = ({
   virtual,
   searchable,
   size,
+  options,
   // 业务属性
-  enumType,
-  customEnum,
-  optionId,
   isModelApp,
 }) => {
-  const options = useOptions({ enumType, optionId, customEnum });
-  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,39 @@
+/*  ios safari 特别是小屏幕 iphone SE 之流
+    weui自带cell的padding会把input压倒很小，
+    容易点不到，需要特殊处理
+    START
+ */
+
+/*
+把weui-cell 的padding还回到input
+*/
+.weda-ui.weda-input input.weui-input {
+    padding: 28px 16px;
+}
+
+.weda-ui.weda-input .weui-cell > label {
+    padding: 16px;
+}
+
+.weda-ui.weda-input .weui-cell {
+    padding: 0;
+}
+
+.weda-ui.weda-input .weui-btn_input-clear {
+    padding-right: 16px;
+}
+
+/**
+ * END
+ */
+
+/*
+    背景颜色设置问题
+    START
+*/
+.weda-ui .wedatea2td-input {
+    background: inherit;
+}
+/**
+ * END
+ */

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 (