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

package/src/web/components/tabs/{tabsPc.js → tabs.pc.jsx}

@@ -2,73 +2,38 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { Tabs as TeaTabs, TabPanel, ConfigProvider } from 'tea-component';
 import classNames from '../../utils/classnames';
+import { useSyncValue } from '../../utils/useSyncValue';
 
 
 export default function TabsPc({
   tabs,
+  selectedIndex,
   events,
   className,
-  panel1,
-  panel2,
-  panel3,
-  panel4,
-  panel5,
-  panel6,
-  panel7,
-  panel8,
-  panel9,
-  panel10,
-  panel11,
-  panel12,
-  panel13,
-  panel14,
-  panel15,
-  panel16,
-  panel17,
-  panel18,
-  panel19,
-  panel20,
-  style
+  style,
+  ...restProps
 }) {
 
-  const cachePanel = {
-    panel1,
-    panel2,
-    panel3,
-    panel4,
-    panel5,
-    panel6,
-    panel7,
-    panel8,
-    panel9,
-    panel10,
-    panel11,
-    panel12,
-    panel13,
-    panel14,
-    panel15,
-    panel16,
-    panel17,
-    panel18,
-    panel19,
-    panel20
-  };
-
+  const [activeIndex, setActiveIndex] = useSyncValue(selectedIndex);
   const _tabs = Array.isArray(tabs) && tabs.length && tabs.map((item, index) => {
     return {
-      id: item.name ?? index,
+      id: index,
       label: item.title
     };
   });
 
 
 
+  // React.useEffect(() => {
+  //   console.log('render');
+  // });
   const onActive = (e) => {
+    setActiveIndex(e.id);
     events && events.change(e);
   };
   return (
     <ConfigProvider classPrefix="wedatea2td">
-    <TeaTabs style={style} tabs={_tabs} onActive={onActive} className={classNames(
+    <TeaTabs  style={style} tabs={_tabs} activeId={activeIndex} onActive={onActive} className={classNames(
       "weda-tabs_pc",
       {
         [className]: className
@@ -81,7 +46,7 @@ export default function TabsPc({
           id={item.id}
           label={item.label}
           >
-            {cachePanel[`panel${index + 1}`]}
+            {restProps[`panel${index + 1}`]}
           </TabPanel>
         )
         )}
@@ -93,6 +58,7 @@ export default function TabsPc({
 TabsPc.propTypes = {
   tabs: PropTypes.array,
   className: PropTypes.string,
+  selectedIndex: PropTypes.number,
   style: PropTypes.object,
   events: PropTypes.objectOf(PropTypes.func),
   panel1: PropTypes.node,

package/src/web/components/uploaderView/index.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { TcbImage } from '../form/uploader/uploaderPc';
+import { TcbImage } from '../form/uploader/uploader.pc';
 import classNames from '../../utils/classnames';
 import './index.css';
 

package/src/web/index.js

@@ -1,5 +1,4 @@
-import components from './components';
-
-import actions from './actions';
+import * as components from './components';
+import * as actions from './actions';
 
 export default { components, actions };

package/src/web/utils/isObjectEqual.js

@@ -1,5 +1,14 @@
 import isEqual from 'lodash.isequal';
 
-export default function (a, b) {
+export function serde(a) {
+  return JSON.parse(JSON.stringify(a));
+}
+
+const isObj = (a) => typeof a === 'object' && a !== null;
+
+export default function (a, b, shouldSerde = false) {
+  if(shouldSerde && isObj(a) && isObj(b)) { // for Proxy created by mbox
+    return isEqual(serde(a), serde(b));
+  }
   return isEqual(a, b);
 }

package/src/web/utils/useSyncValue.js

@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+import { usePrevious } from "react-use";
+
+export function useSyncValue(defaultValue, comparotor = Object.is) {
+    const [stateValue, setStateValue] = useState(defaultValue);
+    const prevValue = usePrevious(defaultValue);
+    useEffect(() => {
+      if (!comparotor(prevValue, defaultValue)) {
+        setStateValue(defaultValue);
+      }
+    }, [defaultValue]);
+    return [stateValue, setStateValue];
+  }
+  

package/src/web/weda-ui.css

@@ -55,3 +55,11 @@ body .weda-ui {
     background-color: unset !important;
   }
 }
+
+.weda-ui.weda-radio .weui-check,
+.weda-ui.weda-checkbox .weui-check {
+  position: absolute;
+  left: -9999px;
+  width: 0;
+  height: 0;
+}

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

@@ -1,127 +0,0 @@
-{
-  "$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json",
-  "data": {
-    "properties": {
-      "label": {
-        "type": "string",
-        "default": "标题",
-        "title": "标题"
-      },
-      "labelVisible": {
-        "type": "boolean",
-        "default": true,
-        "title": "显示标题"
-      },
-      "requiredFlag": {
-        "type": "boolean",
-        "default": false,
-        "title": "是否显示必填标记"
-      },
-      "layout": {
-        "title": "布局方式",
-        "type": "string",
-        "default": "horizontal",
-        "enum": [
-          {
-            "label": "水平",
-            "value": "horizontal"
-          },
-          {
-            "label": "垂直",
-            "value": "vertical"
-          }
-        ]
-      },
-
-      "defaultValue": {
-        "type": "string",
-        "default": "",
-        "title": "默认值"
-      },
-      "name": {
-        "type": "string",
-        "default": "",
-        "title": "默认值"
-      },
-      "placeholder": {
-        "type": "string",
-        "default": "请选择",
-        "title": "占位符"
-      },
-      "disabled": {
-        "type": "boolean",
-        "default": false,
-        "title": "是否禁用"
-      },
-      "options": {
-        "type": "array",
-        "default": [{ "value": "123", "text": "eqwe" }],
-        "title": "选项列表"
-      },
-      "clearable": {
-        "type": "boolean",
-        "default": false,
-        "title": "是否支持清空"
-      },
-      "appearance": {
-        "type": "array",
-        "default": "button",
-        "enum": [
-          {
-            "label": "无边框，适用于页面标题和表格内",
-            "value": "default"
-          },
-          {
-            "label": "为按钮风格，有边框，多用于操作栏中",
-            "value": "button"
-          }
-        ]
-      },
-      "isMultipleEnum": {
-        "type": "boolean",
-        "default": false,
-        "title": "是否为多选"
-      },
-      "allOption": {
-        "type": "boolean",
-        "default": false,
-        "title": "表示全选的选项"
-      },
-      "boxSizeSync": {
-        "type": "boolean",
-        "default": true,
-        "title": "弹出区域尺寸（宽度）是否同步按钮尺寸"
-      },
-      "type": {
-        "type": "array",
-        "default": "button",
-        "enum": [
-          {
-            "label": "模拟下拉框",
-            "value": "simulate"
-          }
-        ]
-      },
-      "searchable": {
-        "type": "boolean",
-        "default": true,
-        "title": "支持搜索"
-      }
-    }
-  },
-  "meta": {
-    "title": "模型选择框",
-    "description": "模型选择框",
-    "category": "表单"
-  },
-  "events": [
-    {
-      "name": "change",
-      "title": "值改变"
-    },
-    {
-      "name": "cancel",
-      "title": "取消"
-    }
-  ]
-}

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

@@ -1,33 +0,0 @@
-{
-  "$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json",
-  "data": {
-    "properties": {
-      "defaultValue": {
-        "type": "string",
-        "default": "",
-        "title": "默认值"
-      },
-      "label": {
-        "type": "string",
-        "default": "标题",
-        "title": "标题"
-      },
-      "labelVisible": {
-        "type": "boolean",
-        "default": true,
-        "title": "显示标题"
-      }
-    }
-  },
-  "meta": {
-    "title": "地理位置",
-    "description": "地理位置",
-    "category": "表单"
-  },
-  "events": [
-    {
-      "name": "change",
-      "title": "值改变"
-    }
-  ]
-}

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;

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

@@ -1,102 +0,0 @@
-const Audio = require('./Audio');
-Component({
-  options: {
-    styleIsolation: 'shared',
-  },
-  properties: {
-    data: {
-      type: Object,
-      value: {},
-    },
-  },
-  lifetimes: {
-    // 页面生命周期
-    attached() {
-      const _ts = this;
-      const audio = (_ts.audio = new Audio(this.data.data));
-
-      audio.eventPlay = function () {
-        _ts.setData({ tips: { state: 'h2w__audio--play', text: 'Playing' } });
-      };
-      audio.eventCanplay = function () {
-        _ts.setData({ tips: { state: 'h2w__audio--readyed', text: 'Readyed' } });
-      };
-      audio.eventTimeUpdate = function (duration, currentTime) {
-        _ts.setData({
-          time: {
-            currentTime,
-            duration,
-            schedule: `${(Math.round(_ts.audio.currentTime) / Math.round(_ts.audio.duration)) * 100}%`,
-          },
-        });
-      };
-      audio.eventPause = function () {
-        _ts.setData({ tips: { state: 'h2w__audio--pause', text: 'Pause' } });
-      };
-      audio.eventStop = function () {
-        _ts.setData({ tips: { state: 'h2w__audio--end', text: 'End' } });
-      };
-
-      // // 更新播放状态
-      // _ts.audio.onTimeUpdate = function(duration,currentTime){
-      // 	_ts.setData({
-      // 		playerData:{
-      // 			state:'h2w__audio--play',
-      // 			tips:'Playing',
-      // 			currentTime:currentTime,
-      // 			duration:duration,
-      // 			schedule:_ts.audio.currentTime / _ts.audio.duration * 100 + '%'
-      // 		}
-      // 	});
-      // };
-
-      // _ts.audio.onPause = function(){
-      // 	_ts.setData({playerData:{state:'h2w__audio--pause',tips:'Pause'}});
-      // };
-
-      // _ts.audio.onCanplay = function(){
-      // 	_ts.setData({playerData:{state:'h2w__audio--readyed',tips:'Readyed'}});
-      // };
-
-      // _ts.audio.onError = function(){
-      // 	_ts.setData({playerData:{state:'h2w__audio--error',tips:'Error'}});
-      // };
-
-      // _ts.audio.onEnded = ()=>{
-      // 	_ts.setData({playerData:{state:'h2w__audio--end',tips:'End'}});
-      // };
-    },
-    moved() {
-      _ts.audio.destroy();
-    },
-    detached: () => {},
-  },
-  data: {
-    tips: {
-      state: '',
-      text: '--',
-    },
-    time: {
-      currentTime: '00:00:00',
-      duration: '00:00:00',
-      schedule: '0%',
-    },
-  },
-  methods: {
-    playAndPause() {
-      const _ts = this;
-      const { audio } = _ts;
-
-      // console.log(audio);
-
-      audio.isTouch = true;
-      if (audio.status === 'update' || audio.status === 'play') {
-        // console.log('pause');
-        audio.pause();
-      } else {
-        // console.log('play');
-        audio.play();
-      }
-    },
-  },
-});

package/src/mp/components/markdown/towxml/audio-player/audio-player.json

@@ -1,5 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {
-  }
-}

package/src/mp/components/markdown/towxml/audio-player/audio-player.wxml

@@ -1,14 +0,0 @@
-<view class="h2w__audio {{tips.state || 'h2w__audio--loading'}}" bind:tap="playAndPause">
-    <view class="h2w__audioIcon"></view>
-    <view class="h2w__audioCover">
-        <image class="h2w__audioLoading" src="loading.svg"></image>
-        <image class="h2w__audioCoverImg" src="{{data.attr.poster}}"></image>
-    </view>
-    <view class="h2w__audioInfo">
-        <view class="h2w__audioTips">{{tips.text || 'Error'}}</view>
-        <view class="h2w__audioSchedule" style="width:{{time.schedule}};"></view>
-        <view class="h2w__audioTitle">{{data.attr.name}}</view>
-        <view class="h2w__audioAuthor">{{data.attr.author}}</view>
-        <view class="h2w__audioTime">{{time.currentTime || '00:00:00'}} / {{time.duration || '00:00:00'}}</view>
-    </view>
-</view>