@cloudbase/weda-ui 0.2.11 → 0.2.15

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

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

@@ -1,4 +1,3 @@
-import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import weui from '../../../utils/weui';
 import classNames from '../../../utils/classnames';
@@ -7,6 +6,7 @@ import isObjectEqual from '../../../utils/isObjectEqual';
 import { useSyncValue } from '../../../utils/useSyncValue';
 import { isCloudFileID } from '../../../utils/platform';
 import { IMAGE_TYPES } from './uploader.pc';
+import { CommonFormPropsType } from '../types';
 
 const uploadPath = 'weda-uploader';
 /**
@@ -23,9 +23,10 @@ export function ImageUploaderH5({
   layout,
   defaultValue,
   single = false,
+  requiredFlag = false,
   onChange,
   style,
-}) {
+}: H5UploaderProps) {
   const cls = classNames({
     'weda-ui': true,
     'weui-cells': true,
@@ -39,27 +40,28 @@ export function ImageUploaderH5({
   const [progress, setProgress] = React.useState(0);
   const [inputValue, setInputValue] = useSyncValue(defaultValue, isObjectEqual);
   const fileIdList = React.useMemo(() => {
-    if( typeof inputValue  === 'string') {
+    if (typeof inputValue === 'string') {
       // single = true 传入的是字符串
-      return [inputValue].filter(i => i.length > 0); // 排除空串
+      return [inputValue].filter((i) => i.length > 0); // 排除空串
     }
-    if(Array.isArray(inputValue)) {
+    if (Array.isArray(inputValue)) {
       return inputValue;
     }
     return [];
   }, [inputValue]);
 
   const finalMaxImgCount = React.useMemo(() => {
-    if(single) return 1;
+    if (single) return 1;
     return maxUploadCount;
   }, [single, maxUploadCount]);
-  
+
   const deleteFile = (url) => {
-    if(single) {
+    if (single) {
       setInputValue('');
       return;
     }
-    setInputValue((list) => list.filter(f => f !== url));
+    // @ts-expect-error list should be array in not single mode
+    setInputValue((list: string[]) => list.filter((f) => f !== url));
   };
   React.useEffect(() => {
     if (single) {
@@ -91,8 +93,8 @@ export function ImageUploaderH5({
           cloudPath,
           filePath: file,
           onUploadProgress: onProgress,
-          
         });
+        // @ts-expect-error TODO
         fileID && setInputValue((list) => [...list, fileID]);
         fileID && events.success && events.success({ value: fileID, file });
       } catch (err) {
@@ -114,8 +116,11 @@ export function ImageUploaderH5({
     <div className={cls} id={id} style={style}>
       <div className="weui-cell">
         <div className="weui-cell__bd">
-          <div className={classNames("weui-uploader", layout)}>
-            <div className={classNames("weui-uploader__hd", layout)}>
+          <div className={classNames('weui-uploader', layout)}>
+            <div className={classNames('weui-uploader__hd', layout)}>
+              {requiredFlag && (
+                <label className="weda-formcells__flag">*</label>
+              )}
               <p className="weui-uploader__title">{title}</p>
               <div className="weui-uploader__info">
                 <span id="uploadCount">{fileIdList.length}</span>
@@ -124,40 +129,45 @@ export function ImageUploaderH5({
             </div>
             <div className="weui-uploader__bd">
               <ul className="weui-uploader__files" id="uploaderFiles">
-                {(fileIdList ?? []).map(f => <SingleImage  key={f} src={f} deleteBySrc={deleteFile} />)}
-                {uploading && 
-                <li className="weui-uploader__file weui-uploader__file_status" >
-                <div className="weui-uploader__file-content">
-                  {progress}%
-                </div>
-              </li>}
+                {(fileIdList ?? []).map((f) => (
+                  <SingleImage key={f} src={f} deleteBySrc={deleteFile} />
+                ))}
+                {uploading && (
+                  <li className="weui-uploader__file weui-uploader__file_status">
+                    <div className="weui-uploader__file-content">
+                      {progress}%
+                    </div>
+                  </li>
+                )}
               </ul>
               {(fileIdList.length < maxUploadCount ||
                 (single && fileIdList.length < 1)) && ( // single 模式时，仅当数组为空时显示
-                  <div className="weui-uploader__input-box">
+                <div className="weui-uploader__input-box">
                   <input
                     id="uploaderInput"
                     className="weui-uploader__input"
                     type="file"
                     accept={accepts.join(',')}
                     multiple
-                    onChange={e => {
+                    onChange={(e) => {
                       const files = [...e.target.files];
-                      if (files.some(f => f.size > maxSize * 1024 * 1024)) {
+                      if (files.some((f) => f.size > maxSize * 1024 * 1024)) {
                         weui.alert('请上传不超过10M的图片');
                         return false;
                       }
-              
+
                       if (files.length > finalMaxImgCount) {
                         // 防止一下子选择过多文件
-                        weui.alert(`最多只能上传${finalMaxImgCount}张图片，请重新选择`);
+                        weui.alert(
+                          `最多只能上传${finalMaxImgCount}张图片，请重新选择`
+                        );
                         return false;
                       }
                       if (fileIdList.length + files.length > finalMaxImgCount) {
                         weui.alert(`最多只能上传${finalMaxImgCount}张图片`);
                         return false;
                       }
-                      files.forEach(f => uploadToTcb(f));
+                      files.forEach((f) => uploadToTcb(f));
                     }}
                   />
                 </div>
@@ -170,7 +180,12 @@ export function ImageUploaderH5({
   );
 }
 
-function SingleImage({src, deleteBySrc}) {
+export interface SingleImageProps {
+  src: string;
+  deleteBySrc: (url: string) => void;
+}
+
+function SingleImage({ src, deleteBySrc }: SingleImageProps) {
   const [error, setError] = React.useState(false);
   const cls = classNames({
     'weui-uploader__file': true,
@@ -187,51 +202,46 @@ function SingleImage({src, deleteBySrc}) {
         console.error('图片加载失败');
       }
     };
-    if(isCloudFileID(src)) {
+    if (isCloudFileID(src)) {
       getSrc();
     } else {
       setRealSrc(src);
     }
   }, [src]);
   const imgStyle = {
-    backgroundImage: `url(${realSrc})`
-};
+    backgroundImage: `url(${realSrc})`,
+  };
   const showGallery = () => {
     const gallery = weui.gallery(realSrc, {
-      onDelete: function() {
+      onDelete: function () {
         deleteBySrc(src);
         gallery.hide();
-      }
+      },
     });
   };
-  
+
   return (
     <li className={cls} style={imgStyle} onClick={showGallery}>
-        {
-            error || status ?
-            <div className="weui-uploader__file-content">
-                { error ? <i role="img" aria-label="错误" className="weui-icon-warn"></i> : <i className="weui-loading" style={{width: 30, height: 30}}></i> }
-            </div>
-            : false
-        }
+      {error || status ? (
+        <div className="weui-uploader__file-content">
+          {error ? (
+            <i role="img" aria-label="错误" className="weui-icon-warn"></i>
+          ) : (
+            <i className="weui-loading" style={{ width: 30, height: 30 }}></i>
+          )}
+        </div>
+      ) : (
+        false
+      )}
     </li>
   );
 }
-SingleImage.propTypes = {
-  src: PropTypes.string,
-  deleteBySrc: PropTypes.func
-};
-ImageUploaderH5.propTypes = {
-  id: PropTypes.string,
-  title: PropTypes.string,
-  className: PropTypes.string, // 传入类
-  maxSize: PropTypes.number,
-  acceptTypes: PropTypes.array,
-  maxUploadCount: PropTypes.number, // 【上传图片最大数量】
-  events: PropTypes.objectOf(PropTypes.func), // 事件
-  style: PropTypes.object,
-  layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  defaultValue: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), // 初始值，该参数需配合 formily 使用
-  single: PropTypes.bool, // 单张上传还是多张上传，对应 onChange 参数为字符串还是字符串数组，value 在处理过程统一转为字符串数组
-  onChange: PropTypes.objectOf(PropTypes.func), // 值变化，该参数需配合 formily 使用
-};
+export interface H5UploaderProps extends CommonFormPropsType {
+  title?: string;
+  maxSize?: number;
+  acceptTypes?: unknown[];
+  maxUploadCount?: number;
+  defaultValue?: string[] | string; // 初始值，该参数需配合 formily 使用;
+  single?: boolean; // 单张上传还是多张上传，对应 onChange 参数为字符串还是字符串数组，value 在处理过程统一转为字符串数组;
+  onChange?: (v: any) => void;
+}

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

@@ -13,7 +13,7 @@ import classNames from '../../../utils/classnames';
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import { isCloudFileID } from '../../../utils/platform';
 import isObjectEqual from '../../../utils/isObjectEqual';
-import * as PropTypes from 'prop-types';
+import { H5UploaderProps } from './uploader.h5';
 
 // 默认组件类前缀
 export const CLASS_PREFIX = 'weda-uploader-pc';
@@ -80,30 +80,28 @@ export function UploaderPCInner(props) {
   const [progress, setProgress] = React.useState(0);
   // 文件列表
   const [fileIDList, setfileIDList] = React.useState([]);
-  const prevValueRef = React.useRef();
+  const fileRef = React.useRef(fileIDList);
+
   React.useEffect(() => {
-    if (prevValueRef.current !== defaultValue) {
-      let initialValue = []
-        .concat(defaultValue)
-        .filter((d) => typeof d === 'string' && d !== '');
-      if (single) {
-        initialValue = initialValue[0] ? [initialValue[0]] : [];
-      }
-      setfileIDList(initialValue);
-      prevValueRef.current = defaultValue;
+    let initialValue = []
+      .concat(defaultValue)
+      .filter((d) => typeof d === 'string' && d !== '');
+    if (single) {
+      initialValue = initialValue[0] ? [initialValue[0]] : [];
     }
-  }, [defaultValue, maxUploadCount, single]);
-  const fileRef = React.useRef(fileIDList);
+    setfileIDList(initialValue);
+  }, []);
 
   // 值变化事件
   React.useEffect(() => {
     if (!isObjectEqual(fileRef.current, fileIDList)) {
-      events.change && events.change({ value: fileIDList });
       if (single) {
         const file = fileIDList[0] || '';
         file && onChange && onChange(file);
+        events.change && events.change({ value: file });
       } else {
         onChange && onChange(fileIDList);
+        events.change && events.change({ value: fileIDList });
       }
       fileRef.current = fileIDList;
     }
@@ -229,10 +227,12 @@ export function UploaderPCInner(props) {
   );
 }
 
-/**
- * 单张图片回显组件
- */
-export const TcbImage = (props) => {
+export interface TcbImageProps {
+  fileID?: string; // 云存储id
+  isZoom?: boolean; // 是否点击放大
+  onError?: (e: any) => void; // 图片显示错误事件
+}
+export const TcbImage = (props: TcbImageProps) => {
   const { fileID, isZoom, ...rest } = props;
   const [src, setSrc] = React.useState('');
   const [isError, setIsError] = React.useState(false);
@@ -258,6 +258,7 @@ export const TcbImage = (props) => {
         {...rest}
         src={src}
         previewSrc={src}
+        /** @ts-expect-error tea imagepreview onError */
         onError={(e) => {
           setIsError(true);
           props?.onError && props.onError(e);
@@ -279,28 +280,10 @@ export const TcbImage = (props) => {
   ) : null;
 };
 
-UploaderPCInner.propTypes = {
-  className: PropTypes.string, // 传入类
-  title: PropTypes.string, // 官方属性：标题
-  tips: PropTypes.string, // 官方属性：提示
-  btnTitle: PropTypes.string, // 官方属性：上传按钮标题
-  maxUploadCount: PropTypes.number, // 官方属性：上传图片最大数量
-  maxSize: PropTypes.number, // 官方属性：单个图片大小限制，单位是M
-  acceptTypes: PropTypes.array, // 官方属性：图片类型，TIF | BMP | JPEG | TIFF | PNG
-  uploadPath: PropTypes.string, // 上传路径
-  uploadFileName: PropTypes.string, // 上传文件名称
-  single: PropTypes.bool, // 单张上传还是多张上传，对应 onChange 参数为字符串还是字符串数组，value 在处理过程统一转为字符串数组
-  events: PropTypes.objectOf(PropTypes.func), // 事件
-  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), // 初始值，该参数需配合 formily 使用
-  onChange: PropTypes.objectOf(PropTypes.func), // 值变化，该参数需配合 formily 使用
-  style: PropTypes.object,
-  id: PropTypes.string,
-  layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  disabled: PropTypes.bool,
-};
-
-TcbImage.propTypes = {
-  fileID: PropTypes.string, // 云存储id
-  isZoom: PropTypes.bool, // 是否点击放大
-  onError: PropTypes.func, // 图片显示错误事件
-};
+export interface PropsType extends H5UploaderProps {
+  tips?: string;
+  value: string | string[];
+  btnTitle?: string;
+  uploadPath?: string;
+  uploadFileName?: string;
+}