@cloudbase/weda-ui 0.2.6-alhpa.0 → 0.2.9

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

@@ -2,10 +2,10 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 
 import classNames from '../../../utils/classnames';
-import FormCell from '../formcell';
 import { usePlatform } from '../../../utils/platform';
 import { Input as TeaInput } from 'tea-component';
 import { renderDecorator } from '../renderDecorator';
+import { useSyncValue } from '../../../utils/useSyncValue';
 export default function Input({
   // 系统属性
   id,
@@ -26,7 +26,8 @@ export default function Input({
   layout,
   requiredFlag,
   size,
-  decorator
+  decorator,
+  clearable
 }) {
   const platform = usePlatform();
   const cls = classNames({
@@ -42,15 +43,8 @@ export default function Input({
   });
   const inputType = getInputType(type, password);
 
-  const [value, setValue] = React.useState(defaultValue);
   // 两次默认值不同时, 需要刷新value
-  const prevDefaultValueRef = React.useRef();
-  React.useEffect(() => {
-    if (prevDefaultValueRef.current !== defaultValue) {
-      prevDefaultValueRef.current = defaultValue;
-      setValue(defaultValue);
-    }
-  });
+  const [value, setValue] = useSyncValue(defaultValue);
 
   const onChange = function (e) {
     const text = typeof e === 'string' ? e : e.target.value;
@@ -102,12 +96,14 @@ const fieldEl = platform === 'h5' ? <div className={subCls}>
         onBlur={onBlur}
         onKeyDown={onKeyDown}
       />
-      <button
-        className="weui-btn_reset weui-btn_icon weui-btn_input-clear"
-        onMouseDown={onClear}
-      >
-        <i className="weui-icon-clear"></i>
-      </button>
+      {clearable &&
+        <button
+          className="weui-btn_reset weui-btn_icon weui-btn_input-clear"
+          onMouseDown={onClear}
+        >
+          <i className="weui-icon-clear"></i>
+        </button>
+      }
   </div>
 </div> : <TeaInput
   size={size}
@@ -156,7 +152,8 @@ Input.propTypes = {
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
   requiredFlag: PropTypes.bool,
   size: PropTypes.oneOf(['s', 'm', 'l', 'full']),
-  decorator: PropTypes.oneOfType([PropTypes.array, PropTypes.node])
+  decorator: PropTypes.oneOfType([PropTypes.array, PropTypes.node]),
+  clearable: PropTypes.bool
 };
 
 Input.defaultProps = {
@@ -175,7 +172,8 @@ Input.defaultProps = {
   focus: false,
   layout: 'horizontal',
   requiredFlag: false,
-  size: 'l'
+  size: 'l',
+  clearable: true
 };
 
 function getInputType(type, password) {

package/src/web/components/form/radio/index.jsx

@@ -58,6 +58,7 @@ export default function Radio({
    */
   const getChangeHandler = function (value) {
     const onChange = function (e) {
+      e.stopPropagation();
       setCheckedItemValue(value);
       events.change({ value }, { originEvent: e });
     };
@@ -65,7 +66,7 @@ export default function Radio({
   };
 
   // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
-  const hashcode = getLocalCounter();
+  const hashcode = React.useMemo(() => getLocalCounter(), []);
   let radioElement;
   if(isH5) {
 
@@ -73,12 +74,11 @@ export default function Radio({
       const _id = `radio-${hashcode}-${index}`;
       const _name = `radio-${hashcode}-${name}`;
       return (
-        <label
+      <div
         className={subCls}
-        htmlFor={_id}
         key={_id}
-        onClick={getChangeHandler(value)}
-        >
+        onClickCapture={getChangeHandler(value)}
+      >
         <div className="weui-cell__hd">
           <input
             type="radio"
@@ -95,7 +95,7 @@ export default function Radio({
         <div className="weui-cell__bd">
           <p>{label}</p>
         </div>
-      </label>
+      </div>
     );
   });
 } else {
@@ -104,7 +104,7 @@ export default function Radio({
     <TeaRadio.Group 
       disabled={disabled}
       value={checkedItemValue}
-      onChange={value => getChangeHandler(value)()}
+      onChange={(value, {event}) => getChangeHandler(value)(event)}
     >
       {range.map(({value, label}, index) => {
         const _id = `radio-${hashcode}-${index}`;

package/src/web/components/form/select/h5.jsx

@@ -262,7 +262,7 @@ export function decodeIsoDatetime(isoStringOrTimesnap, type) {
 
   if (
     typeof isoStringOrTimesnap === 'string' &&
-    /^[0-9]*$/.test(isoStringOrTimesnap)
+    /^-?[0-9]*$/.test(isoStringOrTimesnap)
   ) {
     const timeSnap = Number(isoStringOrTimesnap);
     if (!isNaN(timeSnap)) {

package/src/web/components/form/select/region/{cities.json → cities.js}

@@ -1,4 +1,4 @@
-[
+export const cities = [
   {
     "level": 2,
     "code": "1101",
@@ -2407,4 +2407,4 @@
     "parent_code": "65",
     "en": "County-level administrative divisions directly under the Central Government"
   }
-]
+];

package/src/web/components/form/select/region/index.js

@@ -1,7 +1,7 @@
 // 暂时把地区信息打包在本地, 后续移到COS桶内
-import provinces from './provinces.json';
-import cities from './cities.json';
-import regions from './regions.json';
+import {provinces} from './provinces.js';
+import {cities} from './cities.js';
+import {regions} from './regions.js';
 import weui from '../../../../utils/weui';
 
 let tree;

package/src/web/components/form/select/region/{provinces.json → provinces.js}

@@ -1,4 +1,4 @@
-[
+export const provinces = [
   {
     "level": 1,
     "code": "11",
@@ -237,4 +237,4 @@
     "parent_code": "",
     "en": "Taiwan"
   }
-]
+];

package/src/web/components/form/select/region/{regions.json → regions.js}

@@ -1,4 +1,4 @@
-[
+export const regions = [
   {
     "level": 3,
     "code": "110101",
@@ -20642,4 +20642,4 @@
     "parent_code": "620201",
     "en": "Changcheng District"
   }
-]
+];

package/src/web/components/form/switch/index.jsx

@@ -6,6 +6,7 @@ import getLocalCounter from '../../../utils/getLocalCounter';
 import {usePlatform} from '../../../utils/platform';
 import {Switch as TeaSwitch} from 'tea-component';
 import { renderDecorator } from '../renderDecorator';
+import { useSyncValue } from '../../../utils/useSyncValue';
 export default function Switch({
   // 系统属性
   id,
@@ -36,16 +37,9 @@ export default function Switch({
   });
 
   const platform = usePlatform();
-  const [checked, setChecked] = React.useState(defaultChecked);
   // 两次默认值不同时, 需要刷新
-  const prevDefaultCheckedRef = React.useRef();
-  React.useEffect(() => {
-    if (prevDefaultCheckedRef.current !== defaultChecked) {
-      prevDefaultCheckedRef.current = defaultChecked;
-      setChecked(defaultChecked);
-    }
-  });
-
+  const [checked, setChecked] = useSyncValue(defaultChecked);
+  
   const onChange = function (e) {
     setChecked(e.target.checked);
     events.change({ value: e.target.checked }, { originEvent: e });
@@ -76,6 +70,7 @@ export default function Switch({
   (
     <TeaSwitch
       id={_id}
+      value={checked}
       disabled={disabled}
       onChange={onChange}
     />

package/src/web/components/form/textarea/index.jsx

@@ -7,6 +7,7 @@ import './index.css';
 import { ConfigProvider, Input } from 'tea-component';
 import { usePlatform } from '../../../utils/platform';
 import { renderDecorator } from '../renderDecorator';
+import { useSyncValue } from '../../../utils/useSyncValue';
 
 export default function Textarea({
   // 系统属性
@@ -42,22 +43,13 @@ export default function Textarea({
     'weui-cell_disabled': disabled,
   });
 
-  const [value, setValue] = React.useState(defaultValue);
-  const [counter, setCounter] = React.useState(defaultValue?.length || 0);
   // 两次默认值不同时, 需要刷新value
-  const prevDefaultValueRef = React.useRef();
-  React.useEffect(() => {
-    if (prevDefaultValueRef.current !== defaultValue) {
-      prevDefaultValueRef.current = defaultValue;
-      setValue(defaultValue);
-      setCounter(defaultValue?.length || 0);
-    }
-  });
-
+  const [value, setValue] = useSyncValue(defaultValue);
+  const counter = React.useMemo(() => (value?.length || 0), [value]);
+  
   const onChange = function (e) {
     const text = typeof e === 'string' ? e : e.target.value;
     setValue(text);
-    setCounter(text.length || 0);
     events.change({ value: text });
   };
 

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

@@ -67,3 +67,18 @@
   align-items: center;
   background-color: rgba(0, 0, 0, 0.6);
 }
+
+.weui-uploader.horizontal {
+  display: flex;
+}
+.weui-uploader.horizontal .weui-uploader__hd {
+  display: inline-block;
+  align-self: center;
+}
+.weda-uploader-pc.horizontal {
+  display: flex;
+  justify-content: space-between;
+}
+.weui-uploader.horizontal .weui-uploader__bd {
+  padding-left: 2.28571rem;
+}

package/src/web/components/form/uploader/index.jsx

@@ -2,9 +2,9 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { usePlatform } from '../../../utils/platform';
-import { UploaderH5 } from './uploaderH5';
+import { ImageUploaderH5 as UploaderH5 } from './uploader.h5';
 import classNames from '../../../utils/classnames';
-import { UploaderPCInner, CLASS_PREFIX } from './uploaderPc';
+import { UploaderPCInner, CLASS_PREFIX } from './uploader.pc';
 
 import './index.css';
 import { renderDecorator } from '../renderDecorator';

package/src/web/components/form/uploader/uploader.h5.jsx

@@ -0,0 +1,237 @@
+import * as PropTypes from 'prop-types';
+import * as React from 'react';
+import weui from '../../../utils/weui';
+import classNames from '../../../utils/classnames';
+import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
+import isObjectEqual from '../../../utils/isObjectEqual';
+import { useSyncValue } from '../../../utils/useSyncValue';
+import { isCloudFileID } from '../../../utils/platform';
+import { IMAGE_TYPES } from './uploader.pc';
+
+const uploadPath = 'weda-uploader';
+/**
+ * H5端
+ */
+export function ImageUploaderH5({
+  title,
+  maxUploadCount,
+  maxSize = 10,
+  acceptTypes,
+  className,
+  id,
+  events,
+  layout,
+  defaultValue,
+  single = false,
+  onChange,
+  style,
+}) {
+  const cls = classNames({
+    'weda-ui': true,
+    'weui-cells': true,
+    'weui-cells_form': true,
+    [className]: className,
+  });
+
+  // 上传中
+  const [uploading, setUploading] = React.useState(false);
+  //上传进度
+  const [progress, setProgress] = React.useState(0);
+  const [inputValue, setInputValue] = useSyncValue(defaultValue, isObjectEqual);
+  const fileIdList = React.useMemo(() => {
+    if( typeof inputValue  === 'string') {
+      // single = true 传入的是字符串
+      return [inputValue].filter(i => i.length > 0); // 排除空串
+    }
+    if(Array.isArray(inputValue)) {
+      return inputValue;
+    }
+    return [];
+  }, [inputValue]);
+
+  const finalMaxImgCount = React.useMemo(() => {
+    if(single) return 1;
+    return maxUploadCount;
+  }, [single, maxUploadCount]);
+  
+  const deleteFile = (url) => {
+    if(single) {
+      setInputValue('');
+      return;
+    }
+    setInputValue((list) => list.filter(f => f !== url));
+  };
+  React.useEffect(() => {
+    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 });
+    }
+  }, [fileIdList]);
+  const onProgress = (progressEvent) => {
+    let percentCompleted = 0;
+    try {
+      percentCompleted = Math.round(
+        (progressEvent.loaded * 100) / progressEvent.total
+      );
+      percentCompleted < 100 ? percentCompleted : 100;
+    } catch (e) {}
+    setProgress(percentCompleted);
+  };
+  const uploadToTcb = (file) => {
+    setUploading(true);
+    getCloudInstance().then(async (tcb) => {
+      try {
+        const fileType = file.type.split('/')?.[1];
+        const cloudPath = `${uploadPath}/uploader-${Date.now()}.${fileType}`;
+        const { fileID } = await tcb.uploadFile({
+          cloudPath,
+          filePath: file,
+          onUploadProgress: onProgress,
+          
+        });
+        fileID && setInputValue((list) => [...list, fileID]);
+        fileID && events.success && events.success({ value: fileID, file });
+      } catch (err) {
+        events.error && events.error(err);
+      } finally {
+        setUploading(false);
+        setProgress(0);
+      }
+    });
+  };
+
+  const accepts = React.useMemo(() => {
+    return acceptTypes.includes('image/*') || acceptTypes.length === 0
+      ? IMAGE_TYPES
+      : Array.from(new Set(acceptTypes));
+  }, [acceptTypes]);
+
+  return (
+    <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)}>
+              <p className="weui-uploader__title">{title}</p>
+              <div className="weui-uploader__info">
+                <span id="uploadCount">{fileIdList.length}</span>
+                {`/${finalMaxImgCount}`}
+              </div>
+            </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>}
+              </ul>
+              {(fileIdList.length < maxUploadCount ||
+                (single && fileIdList.length < 1)) && ( // single 模式时，仅当数组为空时显示
+                  <div className="weui-uploader__input-box">
+                  <input
+                    id="uploaderInput"
+                    className="weui-uploader__input"
+                    type="file"
+                    accept={accepts.join(',')}
+                    multiple
+                    onChange={e => {
+                      const files = [...e.target.files];
+                      if (files.some(f => f.size > maxSize * 1024 * 1024)) {
+                        weui.alert('请上传不超过10M的图片');
+                        return false;
+                      }
+              
+                      if (files.length > finalMaxImgCount) {
+                        // 防止一下子选择过多文件
+                        weui.alert(`最多只能上传${finalMaxImgCount}张图片，请重新选择`);
+                        return false;
+                      }
+                      if (fileIdList.length + files.length > finalMaxImgCount) {
+                        weui.alert(`最多只能上传${finalMaxImgCount}张图片`);
+                        return false;
+                      }
+                      files.forEach(f => uploadToTcb(f));
+                    }}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SingleImage({src, deleteBySrc}) {
+  const [error, setError] = React.useState(false);
+  const cls = classNames({
+    'weui-uploader__file': true,
+  });
+  const [realSrc, setRealSrc] = React.useState('');
+  React.useEffect(() => {
+    const getSrc = async () => {
+      try {
+        const _src = await getTempFileURL(src);
+        setRealSrc(_src);
+        return _src;
+      } catch (e) {
+        setError(true);
+        console.error('图片加载失败');
+      }
+    };
+    if(isCloudFileID(src)) {
+      getSrc();
+    } else {
+      setRealSrc(src);
+    }
+  }, [src]);
+  const imgStyle = {
+    backgroundImage: `url(${realSrc})`
+};
+  const showGallery = () => {
+    const gallery = weui.gallery(realSrc, {
+      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
+        }
+    </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 使用
+};