@cloudbase/weda-ui 0.2.5 → 0.2.8

package/src/web/components/index.js

@@ -1,67 +1,35 @@
 import '../wedatheme/style-package/index.css';
 
-import Button from './button';
-import Markdown from './markdown';
-import Text from './text';
-import Container from './container';
-import Image from './image';
-import Slot from './slot';
-import ScrollView from './scrollView';
-import Swiper from './swiper';
-import Modal from './modal';
-import RichText from './richText';
-import RichTextView from './richTextView';
-import Link from './link';
-import Drawer from './drawer';
-import UploaderView from './uploaderView';
+export { default as Button } from './button';
+export { default as Text } from './text';
+export { default as Container } from './container';
+export { default as Image } from './image';
+export { default as Slot } from './slot';
+export { default as ScrollView } from './scrollView';
+export { default as Swiper } from './swiper';
+export { default as Modal } from './modal';
+export { default as RichText } from './richText';
+export { default as RichTextView } from './richTextView';
+export { default as Link } from './link';
+export { default as Drawer } from './drawer';
+export { default as UploaderView } from './uploaderView';
 // picker
-import Picker from './picker/picker';
-import DatePicker from './picker/datePicker';
-import TimePicker from './picker/timePicker';
+export { default as Picker } from './picker/picker';
+export { default as DatePicker } from './picker/datePicker';
+export { default as TimePicker } from './picker/timePicker';
 // form
-import Form from './form/form';
-import Input from './form/input';
-import Textarea from './form/textarea';
-import Checkbox from './form/checkbox';
-import Radio from './form/radio';
-import Switch from './form/switch';
-import Select from './form/select';
-import Uploader from './form/uploader';
-import Tips from './form/tips';
-import Tabs from './tabs';
+export { default as Form } from './form/form';
+export { default as Input } from './form/input';
+export { default as Textarea } from './form/textarea';
+export { default as Checkbox } from './form/checkbox';
+export { default as Radio } from './form/radio';
+export { default as Switch } from './form/switch';
+export { default as Select } from './form/select';
+export { default as Uploader } from './form/uploader';
+export { default as Tips } from './form/tips';
+export { default as Tabs } from './tabs';
 // open
 // import Auth from './auth';
 
 import 'weui/dist/style/weui.css';
 import '../weda-ui.css';
-
-export default {
-  Button,
-  Markdown,
-  Text,
-  Container,
-  Image,
-  Picker,
-  DatePicker,
-  TimePicker,
-  Input,
-  Textarea,
-  Radio,
-  Checkbox,
-  Switch,
-  Form,
-  Select,
-  // Auth,
-  Slot,
-  Uploader,
-  ScrollView,
-  Swiper,
-  Tips,
-  Modal,
-  RichText,
-  RichTextView,
-  UploaderView,
-  Link,
-  Drawer,
-  Tabs,
-};

package/src/web/components/richTextView/index.css

@@ -1,13 +1,3 @@
-.weda-RichTextView {
-  width: 100%;
-}
-
-@media (min-width: 1024px) {
-  .weda-RichTextView {
-    height: 100px;
-  }
-}
-
 .weda-RichTextView blockquote {
   margin: 0 0 10px;
   padding: 15px 20px;

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

@@ -86,15 +86,4 @@ RichTextView.propTypes = {
    */
   style: PropTypes.object,
   id: PropTypes.string
-};
-
-/**
- * 默认属性
- */
-RichTextView.defaultProps = {
-  value: '',
-  style: {
-    width: '100%',
-    height: '100%',
-  },
-};
+};

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { usePlatform } from '../../utils/platform';
-import TabsH5 from './tabsH5';
-import TabsPc from './tabsPc';
+import TabsH5 from './tabs.h5';
+import TabsPc from './tabs.pc';
 
 export default function Tabs(props) {
   const platform = usePlatform();
 
   return platform === 'h5' ? <TabsH5 {...props} /> : <TabsPc {...props} />;
-}
+}

package/src/web/components/tabs/{tabsH5.js → tabs.h5.jsx}

@@ -1,58 +1,19 @@
-import React, { useState, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import * as PropTypes from 'prop-types';
 
 import './index.css';
 import classNames from '../../utils/classnames';
+import { useSyncValue } from '../../utils/useSyncValue';
 
 export default function TabsH5({
   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 [currentIndex, setCurrentIndex] = useState(0);
+  const [currentIndex, setCurrentIndex] = useSyncValue(selectedIndex);
   const stickyStyle = useMemo(() => {
     const length = tabs.length;
     return {
@@ -81,7 +42,7 @@ export default function TabsH5({
               key={name || index}
               onClick={(event) => {
                 setCurrentIndex(index);
-                events && events.change(tabs[index], { event });
+                events && events.change({id: index, label: title}, { event });
               }}
             >
             {title}
@@ -98,7 +59,7 @@ export default function TabsH5({
       <div className={classNames({
         'weda-tabs__panel': true,
       })}>
-        {cachePanel[`panel${currentIndex + 1}`]}
+        {restProps[`panel${currentIndex + 1}`]}
       </div>
     </div>
   );
@@ -109,6 +70,7 @@ TabsH5.propTypes = {
   tabs: PropTypes.array,
   className: PropTypes.string,
   style: PropTypes.object,
+  selectedIndex: PropTypes.number,
   events: PropTypes.objectOf(PropTypes.func),
   panel1: PropTypes.node,
   panel2: PropTypes.node,

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/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>