@cloudbase/weda-ui 0.2.7 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/weda-ui",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "main": "./src/index.js",
   "module": "./src/index",
   "miniprogram": "mpdist",
@@ -45,8 +45,6 @@
     "object.fromentries": "^2.0.4",
     "prop-types": "^15.7.2",
     "react-easy-swipe": "^0.0.21",
-    "react-markdown": "^5.0.3",
-    "react-syntax-highlighter": "^15.4.3",
     "react-use": "^15.3.4",
     "tea-component": "^2.6.22",
     "uuid": "8.3.2",

package/src/configs/components/container.json

@@ -41,6 +41,7 @@
     "title": "普通容器",
     "category": "布局容器",
     "description": "通用块状容器",
-    "componentOrder": 1000
+    "componentOrder": 1000,
+    "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/Container.svg"
   }
 }

package/src/configs/components/form/richText.json

@@ -113,7 +113,8 @@
   "meta": {
       "title": "富文本",
       "description": "富文本编辑器",
-      "category": "表单"
+      "category": "表单",
+      "icon": "//main.qcloudimg.com/raw/adc8cd1b6eb93c0f890ca2322e509a6b/RichText.svg"
   },
   "events": [
     {

package/src/configs/components/form/uploader.json

@@ -8,7 +8,7 @@
         "default": ["image/*"],
         "x-category": "基础属性",
         "x-index": 6,
-        "x-platforms": ["PCWEB"],
+        "x-platforms": ["WEB"],
         "items": {
           "type": "string",
           "enum": [
@@ -66,8 +66,7 @@
         "default": 10,
         "title": "单张大小(M)",
         "x-category": "基础属性",
-        "x-index": 5,
-        "x-platforms": ["PCWEB"]
+        "x-index": 5
       },
       "maxUploadCount": {
         "type": "number",
@@ -136,6 +135,7 @@
   "meta": {
     "title": "上传图片",
     "description": "上传图片组件",
-    "category": "表单"
+    "category": "表单",
+    "icon": "//main.qcloudimg.com/raw/f781e6bc48efa1cf926fc768fceeab5e/Uploader.svg"
   }
 }

package/src/configs/components/image.json

@@ -145,6 +145,7 @@
   "meta": {
     "title": "图片",
     "description": "图片组件",
-    "category": "多媒体"
+    "category": "多媒体",
+    "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/Image.svg"
   }
 }

package/src/configs/components/link.json

@@ -53,7 +53,8 @@
     "title": "链接",
     "description": "",
     "category": "文本",
-    "componentOrder": 10
+    "componentOrder": 10,
+    "icon": "//main.qcloudimg.com/raw/eb8a45dc259eb4925d89ac88be1ecdd9/Link.svg"
   },
   "events": [
     {

package/src/configs/components/richtextview.json

@@ -16,6 +16,7 @@
     "title": "富文本展示",
     "description": "富文本展示",
     "category": "文本",
-    "componentOrder": 0
+    "componentOrder": 0,
+    "icon": "//main.qcloudimg.com/raw/9c42d779f51105715a032d139344c508/RichTextView.svg"
   }
 }

package/src/configs/components/scrollVeiw.json

@@ -209,7 +209,8 @@
     "title": "滚动容器",
     "description": "滚动容器",
     "category": "布局容器",
-    "componentOrder": 80
+    "componentOrder": 80,
+    "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/ScrollView.svg"
   },
   "isContainer": true,
   "mpOrigin": "scroll-view"

package/src/configs/components/swiper.json

@@ -70,7 +70,8 @@
     "title": "轮播",
     "description": "轮播图组件",
     "category": "展示",
-    "componentOrder": 80
+    "componentOrder": 80,
+    "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/Swiper.svg"
   },
   "isContainer": true,
   "mpOrigin": "swiper"

package/src/configs/components/tabs.json

@@ -70,6 +70,7 @@
     "name": "Tabs",
     "title": "选项卡",
     "description": "选项卡组件",
-    "category": "展示"
+    "category": "展示",
+    "icon": "//qbase.cdn-go.cn/lcap/lcap-resource-cdngo/-/release/_files/static/comp/icons/Tabs.svg"
   }
 }

package/src/configs/components/text.json

@@ -41,6 +41,7 @@
     "title": "文本",
     "description": "文本内容",
     "category": "文本",
-    "componentOrder": 100
+    "componentOrder": 100,
+    "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/Text.svg"
   }
 }

package/src/configs/index.js

@@ -1,7 +1,6 @@
-import Button from './components/button';
-import Markdown from './components/markdown';
-import Text from './components/text';
-import Container from './components/container';
+import Button from './components/button.json';
+import Text from './components/text.json';
+import Container from './components/container.json';
 import Image from './components/image.json';
 import Link from './components/link.json';
 // import Picker from './components/picker/picker.json';
@@ -32,7 +31,6 @@ import showModal from './actions/showModal';
 
 export const components = {
   Button,
-  Markdown,
   Text,
   Container,
   Image,

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

@@ -37,6 +37,10 @@ Component({
     single: {
       type: Boolean,
       value: false
+    },
+    maxSize: {
+      type: Number,
+      value: 10
     }
   },
   data: {
@@ -93,14 +97,17 @@ Component({
     }
   },
   observers: {
-    'defaultValue': function(value) {
-      if(!deepEqual(value, this.data.urls)) {
-        this.setData({
-          files: value.map(f => ({url: f})),
-          urls: value
-        });
-      }
-    },
+    // 'defaultValue': function(value) {
+    //   if(!deepEqual(value, this.data.urls)) {
+    //     if(!Array.isArray(value)) {
+    //       value = [value].filter(v => v.length > 0);
+    //     }
+    //     this.setData({
+    //       files: value.map(f => ({url: f})),
+    //       urls: value
+    //     });
+    //   }
+    // },
     'maxUploadCount, single': function(maxUploadCount, single) {
       const maxCount = single ? 1 : maxUploadCount;
       this.setData({

package/src/mp/components/form/uploader/index.wxml

@@ -1,6 +1,6 @@
 <mp-cells>
     <mp-cell>
-        <mp-uploader files="{{files}}" showDelete="{{true}}" ext-class="{{layout}}" bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uploadFile}}" maxCount="{{maxUploadCount}}" title="{{title}}" tips="{{tips}}" binddelete="onDelete"></mp-uploader>
+        <mp-uploader max-size="{{maxSize  * 1024 * 1024}}" files="{{files}}" showDelete="{{true}}" ext-class="{{layout}}" bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uploadFile}}" maxCount="{{maxCount}}" title="{{title}}" tips="{{tips}}" binddelete="onDelete"></mp-uploader>
     </mp-cell>
 </mp-cells>
 <!-- uploader delete 实际代码接受 showDelete

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

@@ -70,6 +70,7 @@ export default function Switch({
   (
     <TeaSwitch
       id={_id}
+      value={checked}
       disabled={disabled}
       onChange={onChange}
     />

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

@@ -6,6 +6,7 @@ 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';
 /**
@@ -14,6 +15,8 @@ const uploadPath = 'weda-uploader';
 export function ImageUploaderH5({
   title,
   maxUploadCount,
+  maxSize = 10,
+  acceptTypes,
   className,
   id,
   events,
@@ -34,8 +37,17 @@ export function ImageUploaderH5({
   const [uploading, setUploading] = React.useState(false);
   //上传进度
   const [progress, setProgress] = React.useState(0);
-  const [fileIDList, setfileIDList] = useSyncValue(defaultValue, isObjectEqual);
-  const uploadCount = (fileIDList ?? []).length;
+  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;
@@ -43,18 +55,22 @@ export function ImageUploaderH5({
   }, [single, maxUploadCount]);
   
   const deleteFile = (url) => {
-    setfileIDList((list) => list.filter(f => f !== url));
+    if(single) {
+      setInputValue('');
+      return;
+    }
+    setInputValue((list) => list.filter(f => f !== url));
   };
   React.useEffect(() => {
     if (single) {
-      const file = fileIDList[0] || '';
+      const file = fileIdList[0] || '';
       file && onChange && onChange(file);
       events.change && events.change({ value: file });
     } else {
-      onChange && onChange(fileIDList);
-      events.change && events.change({ value: fileIDList });
+      onChange && onChange(fileIdList);
+      events.change && events.change({ value: fileIdList });
     }
-  }, [fileIDList]);
+  }, [fileIdList]);
   const onProgress = (progressEvent) => {
     let percentCompleted = 0;
     try {
@@ -77,7 +93,7 @@ export function ImageUploaderH5({
           onUploadProgress: onProgress,
           
         });
-        fileID && setfileIDList((list) => [...list, fileID]);
+        fileID && setInputValue((list) => [...list, fileID]);
         fileID && events.success && events.success({ value: fileID, file });
       } catch (err) {
         events.error && events.error(err);
@@ -87,6 +103,13 @@ export function ImageUploaderH5({
       }
     });
   };
+
+  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">
@@ -95,13 +118,13 @@ export function ImageUploaderH5({
             <div className={classNames("weui-uploader__hd", layout)}>
               <p className="weui-uploader__title">{title}</p>
               <div className="weui-uploader__info">
-                <span id="uploadCount">{uploadCount}</span>
+                <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} />)}
+                {(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">
@@ -109,18 +132,18 @@ export function ImageUploaderH5({
                 </div>
               </li>}
               </ul>
-              {(fileIDList.length < maxUploadCount ||
-                (single && fileIDList.length < 1)) && ( // single 模式时，仅当数组为空时显示
+              {(fileIdList.length < maxUploadCount ||
+                (single && fileIdList.length < 1)) && ( // single 模式时，仅当数组为空时显示
                   <div className="weui-uploader__input-box">
                   <input
                     id="uploaderInput"
                     className="weui-uploader__input"
                     type="file"
-                    accept="image/*"
+                    accept={accepts.join(',')}
                     multiple
                     onChange={e => {
                       const files = [...e.target.files];
-                      if (files.some(f => f.size > 10 * 1024 * 1024)) {
+                      if (files.some(f => f.size > maxSize * 1024 * 1024)) {
                         weui.alert('请上传不超过10M的图片');
                         return false;
                       }
@@ -130,7 +153,7 @@ export function ImageUploaderH5({
                         weui.alert(`最多只能上传${finalMaxImgCount}张图片，请重新选择`);
                         return false;
                       }
-                      if (uploadCount + files.length > finalMaxImgCount) {
+                      if (fileIdList.length + files.length > finalMaxImgCount) {
                         weui.alert(`最多只能上传${finalMaxImgCount}张图片`);
                         return false;
                       }
@@ -195,12 +218,15 @@ function SingleImage({src, deleteBySrc}) {
   );
 }
 SingleImage.propTypes = {
-  src: PropTypes.string
+  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,

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

@@ -18,7 +18,7 @@ import * as PropTypes from 'prop-types';
 // 默认组件类前缀
 export const CLASS_PREFIX = 'weda-uploader-pc';
 // 默认图片类型
-const IMAGE_TYPES = [
+export const IMAGE_TYPES = [
   'image/jpg',
   'image/png',
   'image/tif',

package/src/web/components/image/image.jsx

@@ -3,7 +3,6 @@ import * as PropTypes from 'prop-types';
 import { ConfigProvider, ImagePreview } from 'tea-component';
 import { usePlatform } from '../../utils/platform';
 import { useGesture } from '@use-gesture/react';
-import { off } from 'react-use/lib/util';
 
 ImageInner.propTypes = {
   objectFit: PropTypes.string,

package/src/web/components/index.js

@@ -1,7 +1,6 @@
 import '../wedatheme/style-package/index.css';
 
 export { default as Button } from './button';
-export { default as Markdown } from './markdown';
 export { default as Text } from './text';
 export { default as Container } from './container';
 export { default as Image } from './image';

package/src/configs/components/markdown.json

@@ -1,17 +0,0 @@
-{
-  "$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json",
-  "data": {
-    "properties": {
-      "source": {
-        "title": "markdown 内容",
-        "type": "textarea",
-        "default": "> 这是 `markdown` 文本"
-      }
-    }
-  },
-  "meta": {
-      "title": "Markdown",
-      "description": "markdown 预览",
-      "category": "展示"
-  }
-}

package/src/mp/components/markdown/index.js

@@ -1,27 +0,0 @@
-const towxml = require('./towxml/index');
-
-Component({
-  options: {
-    virtualHost: true,
-  },
-  data: {
-    nodes: {},
-  },
-  properties: {
-    source: {
-      type: String,
-      value: '> 这是 `markdown` 文本',
-    },
-  },
-  methods: {
-    updateNodes() {
-      const nodes = towxml(this.properties.source, 'markdown', {});
-      this.setData({ nodes });
-    },
-  },
-  observers: {
-    source() {
-      this.updateNodes();
-    },
-  },
-});

package/src/mp/components/markdown/index.json

@@ -1,6 +0,0 @@
-{
-    "component": true,
-    "usingComponents": {
-        "towxml": "./towxml/towxml"
-    }
-}

package/src/mp/components/markdown/index.wxml

@@ -1 +0,0 @@
-<towxml className="weda-ui" nodes="{{nodes}}"></towxml>

package/src/mp/components/markdown/towxml/audio-player/Audio.js

@@ -1,99 +0,0 @@
-const fillIn = (val) => `${val < 10 ? '0' : ''}${val}`;
-const formatTime = (_time) => {
-  const time = Math.round(_time);
-  const second = Math.round(time % 60);
-  const minute = Math.floor((time / 60) % 60);
-  const hour = Math.floor(time / 60 / 60);
-  return `${fillIn(hour)}:${fillIn(minute)}:${fillIn(second)}`;
-};
-
-class Audio {
-  constructor(obj) {
-    const _ts = this;
-    const option = (_ts.option = obj.attr);
-
-    (_ts.loop = option.loop === 'true'), (_ts.autoplay = option.autoplay === 'true');
-    _ts.create();
-    _ts.index = 0;
-  }
-  create() {
-    const _ts = this;
-    const { option } = _ts;
-    const audio = (_ts.audio = wx.createInnerAudioContext());
-    audio.src = option.src;
-
-    // 说明可以播放了
-    audio.onCanplay(() => {
-      if (_ts.autoplay && !_ts.index) {
-        _ts.play();
-      }
-      if (!_ts.autoplay && !_ts.index) {
-        _ts.eventCanplay();
-      }
-    });
-
-    // 更新时间
-    audio.onTimeUpdate(() => {
-      // _ts.status = 'update';
-      _ts.duration = audio.duration;
-      _ts.currentTime = audio.currentTime;
-
-      // 定义播放结束
-      if (_ts.duration - _ts.currentTime < 0.5) {
-        _ts.index++;
-        if (_ts.loop) {
-          audio.stop();
-        } else {
-          _ts.stop();
-        }
-        audio.seek(0);
-      }
-      _ts.eventTimeUpdate(formatTime(_ts.duration), formatTime(_ts.currentTime));
-    });
-
-    //
-    audio.onSeeked(() => {
-      if (_ts.loop) {
-        _ts.play();
-      }
-    });
-  }
-  // 播放
-  play() {
-    const _ts = this;
-    _ts.status = 'play';
-    _ts.audio.play();
-    _ts.eventPlay();
-  }
-  // 暂停
-  pause() {
-    const _ts = this;
-    _ts.status = 'pause';
-    _ts.audio.pause();
-    _ts.eventPause();
-  }
-  // 停止
-  stop() {
-    const _ts = this;
-    _ts.status = 'stop';
-    _ts.audio.stop();
-    _ts.eventStop();
-  }
-  // 销毁
-  destroy() {
-    const _ts = this;
-    _ts.stop();
-    _ts.audio.destroy();
-  }
-  eventCanplay() {}
-  eventTimeUpdate() {}
-  eventEnded() {}
-  eventError() {}
-  eventPause() {}
-  eventPlay() {}
-  eventSeeked() {}
-  eventSeeking() {}
-  eventStop() {}
-  eventWaiting() {}
-}
-module.exports = Audio;