@cloudbase/weda-ui 0.2.13 → 0.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/weda-ui",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "main": "./src/index.js",
   "module": "./src/index",
   "miniprogram": "mpdist",

package/src/mp/components/form/uploaderFile/index.js

@@ -178,13 +178,10 @@ Component({
           this.data.files[index].status = 'fail';
         }
       });
-      const uploadFileList = await Promise.all(uploadPromise);
-      const cloudUrls = uploadFileList.map((file) => file.fileID);
       this.setData({
         files: this.data.files,
-        //urls: [...this.data.urls, ...cloudUrls],
       });
-      return { urls: files.tempFiles, cloudUrls };
+      return { urls: files.tempFiles };
     },
 
     onDelete: function (e) {
@@ -194,7 +191,7 @@ Component({
       this.setData({
         files: filelist,
         urls: this.data.urls.filter(
-          (v, index) => e.target.dataset.item?.cloudPath !== index
+          (v, index) => e.target.dataset.item?.cloudPath != v
         ),
       });
     },
@@ -225,17 +222,6 @@ Component({
         maxCount,
       });
     },
-    defaultValue: function (value) {
-      if (!deepEqual(value, this.data.urls)) {
-        if (!Array.isArray(value)) {
-          value = [value];
-        }
-        this.setData({
-          files: value.map((f) => ({ url: f })),
-          urls: value,
-        });
-      }
-    },
     urls: function (urls) {
       let value = urls;
       if (this.properties.single) {

package/src/mp/components/form/uploaderFile/index.wxss

@@ -70,6 +70,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  max-width: 200px;
 }
 .weda-uploader-files__file-status {
   margin-left: 24px;

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

@@ -1,4 +1,39 @@
-.wedatea2td-input {
-    background-color: transparent;
-    border: none;
-}
+/*  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/uploaderFile/{uploadFile.h5.jsx → uploadFile.h5.tsx}

@@ -3,6 +3,8 @@ import * as PropTypes from 'prop-types';
 import { useSyncValue } from '../../../utils/useSyncValue';
 import isObjectEqual from '../../../utils/isObjectEqual';
 import weui from '../../../utils/weui';
+import { CommonFormPropsType } from '../types';
+
 import {
   Upload,
   ConfigProvider,
@@ -67,13 +69,12 @@ export function UploadFileH5({
   deleteVisible = true,
   downloadVisible = true,
   value = [], // 需要兼容 cloud:和https: 协议，需要兼容字符串和字符串数组
-  events,
+  events = { success: null, error: null, change: null },
   defaultValue,
   uploadPath = 'weda-uploader',
   single = true,
   onChange = null,
-}) {
-  //const [inputValue, setInputValue] = useSyncValue(defaultValue, isObjectEqual);
+}: IUploadFileH5) {
   const [fileIDList, setfileIDList] = React.useState(
     filterStrList([].concat(defaultValue, value))
   ); // 上传成功文件ID列表，fileID[]
@@ -230,9 +231,6 @@ export function UploadFileH5({
                         file={item}
                         downloadVisible={downloadVisible}
                         deleteVisible={deleteVisible}
-                        uploadPath={uploadPath}
-                        events={events}
-                        onChange={handleChange}
                       />
                     }
                   </List.Item>
@@ -253,25 +251,23 @@ export function UploadFileH5({
     requiredFlag,
   });
 }
-
-UploadFileH5.propTypes = {
-  layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  className: PropTypes.string, // 传入类
-  label: PropTypes.string, // 官方属性：标题
-  tips: PropTypes.string, // 官方属性：提示
-  btnTitle: PropTypes.string, // 官方属性：上传按钮标题
-  maxUploadCount: PropTypes.number, // 官方属性：上传文件最大数量，作用于 数组，用 single 控制数组还是单个对象
-  deleteVisible: PropTypes.bool,
-  downloadVisible: PropTypes.bool,
-  disabled: PropTypes.bool,
-  defaultValue: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-  maxSize: PropTypes.number, // 官方属性：单个图片大小限制，单位是M
-  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), // 官方属性：值
-  events: PropTypes.objectOf(PropTypes.func), // 事件
-  uploadPath: PropTypes.string, // 上传路径
-  single: PropTypes.bool, // 单张上传还是多张上传，对应 onChange 参数为字符串还是字符串数组，value 在处理过程统一转为字符串数组
-  onChange: PropTypes.objectOf(PropTypes.func), // 配合 fomily 受控使用
-};
+export interface IUploadFileH5 extends CommonFormPropsType {
+  className?: string; // 传入类
+  label?: string; // 官方属性：标题
+  tips?: string; // 官方属性：提示
+  btnTitle?: string; // 官方属性：上传按钮标题
+  maxUploadCount?: number; // 官方属性：上传文件最大数量，作用于 数组，用 single 控制数组还是单个对象
+  deleteVisible?: boolean;
+  downloadVisible?: boolean;
+  acceptTypes?: any[];
+  disabled?: boolean;
+  defaultValue?: string | string[];
+  maxSize?: number; // 官方属性：单个图片大小限制，单位是M
+  value?: string | string[]; // 官方属性：值
+  uploadPath?: string; // 上传路径
+  single?: boolean; // 单张上传还是多张上传，对应 onChange 参数为字符串还是字符串数组，value 在处理过程统一转为字符串数组
+  onChange?: (v: any) => void; // 配合 fomily 受控使用
+}
 
 /**
  * 基于 FileID 文件回显组件
@@ -282,7 +278,7 @@ const TcbFileEcho = ({
   onChange,
   deleteVisible,
   downloadVisible,
-}) => {
+}: ITcbFileEcho) => {
   const [src, setSrc] = React.useState('');
   const { fileSizeObj } = React.useContext(FileContext) || {};
   const size = '--';
@@ -322,26 +318,33 @@ const TcbFileEcho = ({
           status="UPLOAD_STATUS_SUCCESS"
           fileID={fileID}
           src={src}
-          downloadVisible={downloadVisible}
-          deleteVisible={deleteVisible}
-          onChange={onChange}
         />
       </div>
     </div>
   );
 };
-
+interface ITcbFileEcho {
+  fileID?: string;
+  fileList?: any;
+  file?: any;
+  onChange?: Function;
+  deleteVisible?: boolean;
+  downloadVisible?: boolean;
+}
+interface ITcbFileUpload {
+  file?: any;
+  downloadVisible?: boolean;
+  deleteVisible?: boolean;
+}
 /**
  * 基于 File 上传文件过程组件
  */
 const TcbFileUpload = ({
   file,
-  uploadPath,
-  onChange,
   downloadVisible,
   deleteVisible,
-  events,
-}) => {
+}: ITcbFileUpload) => {
+  const { uploadPath, onChange, events } = React.useContext(FileContext) || {};
   const [percent, setPercent] = React.useState(0); // 上传进度
   const [status, setStatus] = React.useState('UPLOAD_STATUS_PENDING'); // 上传状态
   const cancleRef = React.useRef(''); // 取消的uuid
@@ -399,9 +402,6 @@ const TcbFileUpload = ({
           file={file}
           uuid={file?._uuid}
           status={status}
-          downloadVisible={downloadVisible}
-          deleteVisible={deleteVisible}
-          onChange={onChange}
           onCancel={(uuid) => {
             cancleRef.current = uuid;
             onChange?.({ type: 'delete', uuid });
@@ -413,6 +413,13 @@ const TcbFileUpload = ({
   );
 };
 
+interface IUploadFileStatus {
+  status?: string;
+  percent?: number;
+  size?: any;
+  title?: string;
+  percentSize?: number;
+}
 /**
  * 上传文件状态组件
  */
@@ -422,7 +429,7 @@ const UploadFileStatus = ({
   size,
   title = null,
   percentSize = 0,
-}) => {
+}: IUploadFileStatus) => {
   //上传中、待上传状态
   if (
     status == 'UPLOAD_STATUS_LOADING' ||
@@ -484,6 +491,16 @@ const UploadFileStatus = ({
   );
 };
 
+interface IUploadFileAction {
+  status?: string;
+  fileID?: string;
+  uuid?: string;
+  src?: string;
+  file?: any;
+  onReLoad?: any;
+  onCancel?: any;
+}
+
 /**
  * 操作列组件, onChange 从最外层 UploadFilePc 传进来
  * props: { status, fileID, uuid, src, onChange }
@@ -493,13 +510,12 @@ const UploadFileAction = ({
   fileID = '',
   uuid = '',
   src = '',
-  downloadVisible = true,
-  deleteVisible = true,
   file = null,
-  onChange = null,
   onReLoad = null,
   onCancel = null,
-}) => {
+}: IUploadFileAction) => {
+  const { onChange, downloadVisible, deleteVisible } =
+    React.useContext(FileContext) || {};
   // 操作列按钮-删除
   const renderDelete = () => (
     <Icon

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import {
   Upload,
   ConfigProvider,
@@ -16,11 +15,12 @@ import {
   isHttpFileID,
   transSize,
   downloadFile,
-  cutFileTitle
+  cutFileTitle,
 } from '../../../utils/platform';
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import classNames from '../../../utils/classnames';
 import { renderDecorator } from '../renderDecorator';
+import { CommonFormPropsType } from '../types';
 
 // 默认组件类前缀
 const CLASS_PREFIX = 'weda-upload-file-pc';
@@ -41,14 +41,15 @@ const FileContext = React.createContext(null);
  */
 export function UploadFilePc({
   // 系统属性
-  layout = {},
+  layout,
   id = '',
   style = {},
   labelVisible = true,
-  title = '上传文件',
+  label = '上传文件',
   requiredFlag = false,
   disabled = false,
   className = '',
+  events = { success: null, error: null, change: null },
   // 组件属性
   decorator,
   tips = '',
@@ -56,16 +57,15 @@ export function UploadFilePc({
   maxUploadCount = 9,
   maxSize = 1024,
   single = true,
-  defaultValue = [], // 默认值，和 value 同时存在
+  defaultValue = [], // 组件默认初始化值
+  value = [], // 用于模型组件中 formily 的值管理
   acceptTypes = [],
-  events = { success: null, error: null, change: null },
   downloadVisible = true,
   deleteVisible = true,
   uploadPath = 'weda-uploader',
-  value = [], // 需要兼容 cloud:和https: 协议，需要兼容字符串和字符串数组
   onChange = null,
   isEdit = true,
-}) {
+}: IUploaderFilePc) {
   const [fileIDList, setfileIDList] = React.useState(
     filterStrList([].concat(defaultValue, value))
   ); // 上传成功文件ID列表，fileID[]
@@ -234,40 +234,37 @@ export function UploadFilePc({
     id,
     className: cls,
     style,
-    label: labelVisible ? title : null,
+    label: labelVisible ? label : null,
     layout,
     multiCell: false,
     requiredFlag,
   });
 }
 
-UploadFilePc.propTypes = {
-  className: PropTypes.string, // 传入类
-  title: PropTypes.string, // 官方属性：标题
-  labelVisible: PropTypes.bool, // 官方属性：显示标题
-  btnTitle: PropTypes.string, // 官方属性：上传按钮标题，[web]
-  maxUploadCount: PropTypes.number, // 官方属性：上传文件最大数量，作用于 数组，用 single 控制数组还是单个对象
-  downloadVisible: PropTypes.bool, // 官方属性：显示下载按钮
-  deleteVisible: PropTypes.bool, // 官方属性：显示删除按钮
-  defaultValue: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), // 官方属性：初始值值
-  maxSize: PropTypes.number, // 官方属性：单个图片大小限制，单位是M
-  requiredFlag: PropTypes.bool, // 官方属性：是否必填
-  disabled: PropTypes.bool, // 官方属性：是否禁用
-  events: PropTypes.any, // 官方属性：上传成功/失败事件
-  single: PropTypes.bool, // 官方属性：单张上传还是多张上传，对应 onChange 参数为字符串还是字符串数组，value 在处理过程统一转为字符串数组
-  acceptTypes: PropTypes.array, // 官方属性：支持的上传类型
-  tips: PropTypes.string, // 提示
-  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), // 值
-  onChange: PropTypes.objectOf(PropTypes.func), // 配合 fomily 受控使用
-  uploadPath: PropTypes.string, // 上传路径
-  decorator: PropTypes.any,
-  isEdit: PropTypes.bool, // 是否展示上传按钮，用户详情页面展示
-};
+export interface IUploaderFilePc extends CommonFormPropsType {
+  btnTitle?: string;
+  maxUploadCount?: number;
+  downloadVisible?: boolean;
+  deleteVisible?: boolean;
+  defaultValue?: string | string[];
+  maxSize?: number;
+  single?: boolean;
+  acceptTypes?: any[];
+  tips?: string;
+  value?: string | string[];
+  uploadPath?: string;
+  isEdit?: boolean;
+  onChange?: Function;
+}
+
+interface ITcbFileEcho {
+  fileID?: string;
+}
 
 /**
  * 基于 FileID 回显文件表格行组件
  */
-const TcbFileEcho = ({ fileID }) => {
+const TcbFileEcho = ({ fileID }: ITcbFileEcho) => {
   const [src, setSrc] = React.useState('');
   const { fileSizeObj } = React.useContext(FileContext) || {};
   React.useEffect(() => {
@@ -298,7 +295,9 @@ const TcbFileEcho = ({ fileID }) => {
 
   return (
     <div className={`${CLASS_PREFIX}--item ${CLASS_PREFIX}--item-body`}>
-      <div className={`${CLASS_PREFIX}--item-title`} title={title}>{cutFileTitle(title)}</div>
+      <div className={`${CLASS_PREFIX}--item-title`} title={title}>
+        {cutFileTitle(title)}
+      </div>
       <div className={`${CLASS_PREFIX}--item-size`}>
         {fileSizeObj[fileID] || '--'}
       </div>
@@ -312,10 +311,14 @@ const TcbFileEcho = ({ fileID }) => {
   );
 };
 
+interface ITcbFileUpload {
+  file?: any;
+}
+
 /**
  * 基于 File 上传文件过程表格行组件
  */
-const TcbFileUpload = ({ file }) => {
+const TcbFileUpload = ({ file }: ITcbFileUpload) => {
   const { uploadPath, onChange, events } = React.useContext(FileContext) || {};
   const [percent, setPercent] = React.useState(0); // 上传进度
   const [status, setStatus] = React.useState('0'); // 上传状态
@@ -360,7 +363,9 @@ const TcbFileUpload = ({ file }) => {
 
   return (
     <div className={`${CLASS_PREFIX}--item ${CLASS_PREFIX}--item-body`}>
-      <div className={`${CLASS_PREFIX}--item-title`} title={title}>{cutFileTitle(title)}</div>
+      <div className={`${CLASS_PREFIX}--item-title`} title={title}>
+        {cutFileTitle(title)}
+      </div>
       <div className={`${CLASS_PREFIX}--item-size`}>{size}</div>
       <div className={`${CLASS_PREFIX}--item-status`}>
         <UploadFileStatus status={status} percent={percent} />
@@ -381,10 +386,15 @@ const TcbFileUpload = ({ file }) => {
   );
 };
 
+interface IUploadFileStatus {
+  status?: string;
+  percent?: number;
+}
+
 /**
  * 上传文件状态组件
  */
-const UploadFileStatus = ({ status = '2', percent = 0 }) => {
+const UploadFileStatus = ({ status = '2', percent = 0 }: IUploadFileStatus) => {
   if (status == '1' && percent) {
     return (
       <>
@@ -401,6 +411,16 @@ const UploadFileStatus = ({ status = '2', percent = 0 }) => {
   );
 };
 
+interface IUploadFileAction {
+  status?: string;
+  fileID?: string;
+  uuid?: string;
+  src?: string;
+  file?: any;
+  onReLoad?: any;
+  onCancel?: any;
+}
+
 /**
  * 操作列组件, onChange 从最外层 UploadFilePc 传进来
  * props: { status, fileID, uuid, src, onChange }
@@ -413,7 +433,7 @@ const UploadFileAction = ({
   file = null,
   onReLoad = null,
   onCancel = null,
-}) => {
+}: IUploadFileAction) => {
   const { onChange, downloadVisible, deleteVisible, isEdit } =
     React.useContext(FileContext) || {};
 

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import classNames from '../../utils/classnames';
 import Swipe from 'react-easy-swipe';
-import {useDebouncedCallback, useEventListener, useResizeObserver} from '@react-hookz/web'
+import {useDebouncedCallback, useEventListener, useResizeObserver} from '@react-hookz/web';
 
 import './index.css';
 import { CommonPropsType } from '../../types';
@@ -211,18 +211,20 @@ export default function Swiper({
         false
       )}
       <a
-        href="javascript:;"
+        href="#"
         className="g-swiper__turn-pre"
-        onClick={() => {
+        onClick={(ev) => {
+          ev.preventDefault();
           setIndex(currentIndex - 1);
         }}
       >
         上一页
       </a>
       <a
-        href="javascript:;"
+        href="#"
         className="g-swiper__turn-next"
-        onClick={() => {
+        onClick={(ev) => {
+          ev.preventDefault();
           setIndex(currentIndex + 1);
         }}
       >
@@ -241,15 +243,15 @@ const SwiperItem: React.FC<{
   const firstChildRef = useRef<HTMLDivElement>(null);
   const syncHeight = useDebouncedCallback((e) => {
     setHeight(e.contentRect.height);
-  }, [setHeight], 500, 2000) // 必须debounce延迟，让resize完成后再设置高度
+  }, [setHeight], 500, 2000); // 必须debounce延迟，让resize完成后再设置高度
 
   // 因为有loading 所以得用resizeobserver
   // @ts-ignore
   useResizeObserver(firstChildRef, (e) => {
     if(currentIndex === index) {
-      syncHeight(e)
+      syncHeight(e);
     }
-  })
+  });
   const wrapRef = useRef<HTMLDivElement>();
   return (
     <div
@@ -263,4 +265,4 @@ const SwiperItem: React.FC<{
       </div>
     </div>
   );
-}
+};