@cloudbase/weda-ui 0.2.5 → 0.2.8

package/src/mp/components/image/index.wxss

@@ -9,6 +9,7 @@
   left: 0;
   right: 0;
   background-color: black;
+  z-index: 99;
 }
 
 .weda-img-preview {
@@ -29,3 +30,17 @@
   display: inline-block;
   z-index: 99;
 }
+
+.weda-image-error {
+  position: relative;
+}
+
+.weda-image-error::before {
+  content: '';
+  background: #f5f5f5 url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjUuMzIgMTYuMzU5N0MyNi4wNzY0IDE2LjM1OTcgMjYuODI1NCAxNi41MDg3IDI3LjUyNDMgMTYuNzk4MUMyOC4yMjMxIDE3LjA4NzYgMjguODU4MSAxNy41MTE5IDI5LjM5MjkgMTguMDQ2OEMyOS45Mjc4IDE4LjU4MTYgMzAuMzUyMSAxOS4yMTY2IDMwLjY0MTYgMTkuOTE1NEMzMC45MzEgMjAuNjE0MyAzMS4wOCAyMS4zNjMzIDMxLjA4IDIyLjExOTdDMzEuMDggMjIuODc2MSAzMC45MzEgMjMuNjI1MSAzMC42NDE2IDI0LjMyMzlDMzAuMzUyMSAyNS4wMjI4IDI5LjkyNzggMjUuNjU3OCAyOS4zOTI5IDI2LjE5MjZDMjguODU4MSAyNi43Mjc1IDI4LjIyMzEgMjcuMTUxOCAyNy41MjQzIDI3LjQ0MTJDMjYuODI1NCAyNy43MzA3IDI2LjA3NjQgMjcuODc5NyAyNS4zMiAyNy44Nzk3QzIzLjc5MjQgMjcuODc5NyAyMi4zMjczIDI3LjI3MjggMjEuMjQ3MSAyNi4xOTI2QzIwLjE2NjkgMjUuMTEyNCAxOS41NiAyMy42NDczIDE5LjU2IDIyLjExOTdDMTkuNTYgMjAuNTkyIDIwLjE2NjkgMTkuMTI3IDIxLjI0NzEgMTguMDQ2OEMyMi4zMjczIDE2Ljk2NjUgMjMuNzkyNCAxNi4zNTk3IDI1LjMyIDE2LjM1OTdaTTI4IDMuNTU5NjlWMTQuODc2OEMyNy4xNzc3IDE0LjU4NjYgMjYuMTkyIDE0LjQzODggMjUuMzIgMTQuNDM5N0MyNC4wMzEgMTQuNDM5NyAyMi44MTU3IDE0Ljc1NzEgMjEuNzQ4OCAxNS4zMTg0TDIwLjc5NTIgMTMuMTU5N0wxNi4wMjU5IDIwLjAyNzVMOC40NDU3NiAxNi40NDFMMy41NiAyMy4zOTk3SDE3Ljc0NjJDMTcuOTg2NyAyNC44MjkgMTguNjI4MiAyNi4xNjA2IDE5LjU5NTggMjcuMjM5N0gxVjMuNTU5NjlIMjhaTTI1Ljk2IDI0LjAzOTdIMjQuNjhWMjUuMzE5N0gyNS45NlYyNC4wMzk3Wk0yNS45NiAxOC45MTk3SDI0LjY4VjIzLjM5OTdIMjUuOTZWMTguOTE5N1pNNi4xMiAxMC41OTk3QzYuMTIgMTEuOTk4MSA3LjE5OTA0IDEzLjEwODUgOC42MDc2OCAxMy4xNTg0QzEwLjAyMDggMTMuMjA3NyAxMS4yNCAxMi4wNDggMTEuMjQgMTAuNTk5N0MxMS4yNCA5LjI0NjA5IDEwLjA2NDMgOC4wODU3NyA4Ljc1MjMyIDguMDQwOTdDNy4yOTU2OCA3Ljk5MTY5IDYuMTIgOS4xNTEzNyA2LjEyIDEwLjU5OTdaIiBmaWxsPSIjQkNDNEQwIj48L3BhdGg+Cjwvc3ZnPgo=') no-repeat center / 50% 50%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}

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

@@ -1 +1,3 @@
-<rich-text className="{{className}}" style="{{style}}" nodes="{{__html}}"></rich-text>
+<view class="weda-ui {{className}}" style="{{style}}">
+  <rich-text nodes="{{__html}}"></rich-text>
+</view>

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

@@ -7,13 +7,20 @@ Component({
   },
 
   properties: {
-    tabs: Array,
-    scrollCellId: ''
+    tabs: { type: Array, value: [] },
+    scrollCellId: {
+      type: String,
+      value: '',
+    },
+    selectedIndex: {
+      type: Number,
+      value: 0
+    }
   },
 
   data: {
     currentIndex: 0,
-    stickyStyle: null
+    stickyStyle: null,
   },
 
   methods: {
@@ -21,14 +28,23 @@ Component({
       const { tabs } = this.data;
       const { index } = e.target.dataset;
       this.setData({
-        currentIndex: index
+        currentIndex: index,
       });
-
+      this.triggerEvent('change', {id: index, label: tabs[index].title});
       if (tabs.length > 5) {
         this.setData({
-          scrollCellId: `cell-${ Math.max(index - 2, 0) }`
+          scrollCellId: `cell-${Math.max(index - 2, 0)}`,
         });
       }
     },
+  },
+  observers: {
+    'selectedIndex': function(selectedIndex) {
+      if(selectedIndex !== this.data.currentIndex) {
+        this.setData({
+          currentIndex: selectedIndex
+        });
+      }
+    }
   }
 });

package/src/mp/utils/deepEqual.js

@@ -0,0 +1,42 @@
+function equal(a, b) {
+    if (a === b) return true;
+  
+    if (a && b && typeof a == 'object' && typeof b == 'object') {
+      if (a.constructor !== b.constructor) return false;
+  
+      var length, i, keys;
+      if (Array.isArray(a)) {
+        length = a.length;
+        if (length != b.length) return false;
+        for (i = length; i-- !== 0;)
+          if (!equal(a[i], b[i])) return false;
+        return true;
+      }
+  
+  
+  
+      if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
+      if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
+      if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+  
+      keys = Object.keys(a);
+      length = keys.length;
+      if (length !== Object.keys(b).length) return false;
+  
+      for (i = length; i-- !== 0;)
+        if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+  
+      for (i = length; i-- !== 0;) {
+        var key = keys[i];
+  
+        if (!equal(a[key], b[key])) return false;
+      }
+  
+      return true;
+    }
+  
+    // true if both NaN, false otherwise
+    return a!==a && b!==b;
+  }
+
+  export default equal;

package/src/web/actions/index.js

@@ -1,4 +1,2 @@
-import showToast from './showToast';
-import showModal from './showModal';
-
-export default { showToast, showModal };
+export { default as showToast } from './showToast';
+export { default as showModal } from './showModal';

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

@@ -5,7 +5,6 @@ import { Checkbox as TeaCheckbox, ConfigProvider } from 'tea-component';
 import classNames from '../../../utils/classnames';
 import getLocalCounter from '../../../utils/getLocalCounter';
 import isObjectEqual from '../../../utils/isObjectEqual';
-import FormCell from '../formcell';
 import fromEntries from 'object.fromentries';
 import { usePlatform } from '../../../utils/platform';
 import { renderDecorator } from '../renderDecorator';
@@ -62,6 +61,7 @@ export default function Checkbox({
    */
   const getChangeHandler = function (value) {
     const onChange = function (e) {
+      e.stopPropagation();
       const checked = !checkedItems[value];
       const newMap = Object.assign({}, checkedItems, { [value]: checked });
       setCheckedItems(newMap);
@@ -78,36 +78,34 @@ export default function Checkbox({
   };
 
   // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
-  const hashcode = getLocalCounter();
+  const hashcode = React.useMemo(() => getLocalCounter(), []);
   let checkboxElement;
   if(platform === 'h5') {
     checkboxElement = range.map(({ label, value }, index) => {
       const _id = `checkbox-${hashcode}-${index}`;
       const _name = `checkbox-${hashcode}-${name}`;
       return (
-        <label
-          className={subCls}
-          htmlFor={_id}
+        <div
           key={_id}
-          onClick={getChangeHandler(value)}
+          onClickCapture={getChangeHandler(value)}
+          className={subCls}
         >
           <div className="weui-cell__hd">
             <input
               type="checkbox"
               className="weui-check"
               value={value}
-              name={_name}
               id={_id}
-              defaultChecked={checkedItems[value]}
+              name={_name}
+              checked={checkedItems[value]}
               disabled={disabled}
-              onClick={(e) => e.stopPropagation()}
             />
             <i className="weui-icon-checked"></i>
           </div>
           <div className="weui-cell__bd">
             <p>{label}</p>
           </div>
-        </label>
+        </div>
       );
     });
   } else {

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

@@ -80,7 +80,7 @@ export default function FormCell({
 
 FormCell.propTypes = {
   className: PropTypes.string,
-  style: PropTypes.string,
+  style: PropTypes.object,
   label: PropTypes.string,
   labelVisible: PropTypes.bool,
   layout: PropTypes.string,

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';