@cloudbase/weda-ui 0.2.6 → 0.2.10

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

@@ -1,3 +1,3 @@
-<view class="weda-ui {{className}}" style="{{style ? style : 'width:100%; height:100%'}}">
+<view class="weda-ui {{className}}" style="{{style}}">
   <rich-text nodes="{{__html}}"></rich-text>
 </view>

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

@@ -12,6 +12,10 @@ Component({
       type: String,
       value: '',
     },
+    selectedIndex: {
+      type: Number,
+      value: 0
+    }
   },
 
   data: {
@@ -26,7 +30,7 @@ Component({
       this.setData({
         currentIndex: index,
       });
-
+      this.triggerEvent('change', {id: index, label: tabs[index].title});
       if (tabs.length > 5) {
         this.setData({
           scrollCellId: `cell-${Math.max(index - 2, 0)}`,
@@ -34,4 +38,13 @@ Component({
       }
     },
   },
+  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/components/form/enumSelect/MultipleSelect.jsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { SelectMultiple } from 'tea-component';
+
+import SelectContainer from './SelectContainer';
+
+import { normalProps } from './props/defaultProps';
+import { propTypes } from './props/propsTypes';
+import useOptions from './hooks';
+
+const MultipleSelect = ({
+  // 系统属性
+  id,
+  style,
+  className,
+  events,
+  // weda 组件属性
+  label,
+  labelVisible,
+  layout,
+  requiredFlag,
+  decorator,
+  // tea组件属性
+  value,
+  placeholder,
+  disabled,
+  onChange,
+  clearable,
+  appearance,
+  allOption,
+  matchButtonWidth,
+  virtual,
+  searchable,
+  size,
+  // 业务属性
+  enumType,
+  customEnum,
+  optionId,
+  isModelApp,
+}) => {
+  const options = useOptions({ enumType, optionId, customEnum });
+
+  const onSelectChange = (values) => {
+    // @ts-ignore
+    events.change && events.change({ value: values });
+    if (onChange) {
+      onChange(values);
+    }
+  };
+
+  const multipleSelectProps = {
+    placeholder,
+    disabled,
+    clearable,
+    appearance,
+    key: id,
+    options,
+    onChange: onSelectChange,
+    matchButtonWidth,
+    searchable,
+    size,
+    defaultValue: value || [],
+    allOption,
+    staging: false,
+    virtual,
+  };
+
+  if (isModelApp) {
+    return <SelectMultiple {...multipleSelectProps} />;
+  }
+  return (
+    <SelectContainer
+      style={style}
+      className={className}
+      label={label}
+      labelVisible={labelVisible}
+      layout={layout}
+      // @ts-ignore
+      multiCell={false}
+      requiredFlag={requiredFlag}
+      decorator={decorator}
+      id={id}
+    >
+      <SelectMultiple {...multipleSelectProps} />
+    </SelectContainer>
+  );
+};
+MultipleSelect.propTypes = {
+  ...propTypes,
+};
+MultipleSelect.defaultProps = {
+  ...normalProps,
+};
+
+export default MultipleSelect;

package/src/web/components/form/enumSelect/NormalSelect.jsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { Select } from 'tea-component';
+
+import SelectContainer from './SelectContainer';
+
+import { multipleProps } from './props/defaultProps';
+import { propTypes } from './props/propsTypes';
+import useOptions from './hooks';
+
+const { useState, useEffect } = React;
+
+const useValue = (value) => {
+  const [selectedValue, setSelectedValue] = useState('');
+
+  useEffect(() => {
+    setSelectedValue(value);
+  }, [value]);
+
+  return [selectedValue, setSelectedValue];
+};
+
+const NormalSelect = ({
+  // 系统属性
+  id,
+  style,
+  className,
+  events,
+  // weda 组件属性
+  label,
+  labelVisible,
+  layout,
+  requiredFlag,
+  decorator,
+  // tea组件属性
+  value,
+  placeholder,
+  disabled,
+  onChange,
+  clearable,
+  appearance,
+  matchButtonWidth,
+  virtual,
+  searchable,
+  size,
+  // 业务属性
+  enumType,
+  customEnum,
+  optionId,
+  isModelApp,
+}) => {
+  const options = useOptions({ enumType, optionId, customEnum });
+  const [selectedValue, setSelectedValue] = useValue(value);
+
+  const onSelectChange = (value) => {
+    // @ts-ignore
+    setSelectedValue(value);
+    events.change && events.change({ value });
+    if (onChange) {
+      onChange(value || '');
+    }
+  };
+
+  const singleSelectProps = {
+    placeholder,
+    disabled,
+    clearable,
+    appearance,
+    key: id,
+    options,
+    onChange: onSelectChange,
+    value: selectedValue,
+    matchButtonWidth,
+    virtual,
+    searchable,
+    size,
+  };
+
+  if (isModelApp) {
+    return <Select {...singleSelectProps} />;
+  }
+  return (
+    <SelectContainer
+      style={style}
+      className={className}
+      label={label}
+      labelVisible={labelVisible}
+      layout={layout}
+      // @ts-ignore
+      multiCell={false}
+      requiredFlag={requiredFlag}
+      decorator={decorator}
+      id={id}
+    >
+      <Select {...singleSelectProps} />
+    </SelectContainer>
+  );
+};
+NormalSelect.propTypes = {
+  ...propTypes,
+};
+NormalSelect.defaultProps = {
+  ...multipleProps,
+};
+
+export default NormalSelect;

package/src/web/components/form/enumSelect/SelectContainer.jsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import classNames from '../../../utils/classnames';
+import { selectContainerPropsTypes } from './props/propsTypes';
+import { renderDecorator } from '../renderDecorator';
+
+const SelectContainer = ({
+  style,
+  className,
+  // weda 组件属性
+  id,
+  label,
+  labelVisible,
+  layout,
+  requiredFlag,
+  decorator,
+  children,
+}) => {
+  const cls = classNames({
+    'weda-ui': true,
+    [className]: className,
+  });
+  const subCls = classNames({
+    'weui-cell': true,
+    'weui-cell_active': true,
+    'weui-cell_form': true,
+    'weui-cell_disabled': true,
+  });
+  const SelectComponent = <div className={subCls}>{children}</div>;
+  return renderDecorator(
+    SelectComponent,
+    decorator
+  )({
+    id,
+    className: cls,
+    style,
+    label: labelVisible ? label : null,
+    layout,
+    multiCell: false,
+    requiredFlag,
+  });
+};
+SelectContainer.propTypes = selectContainerPropsTypes;
+export default SelectContainer;

package/src/web/components/form/enumSelect/hooks/index.js

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import { getDescribeGeneralOptionsDetailList } from '../../../../utils/tcb';
+
+const GENERAL_OPTION = 'general-option';
+const CUSTOM = 'custom';
+
+const handleOptionsDetailList = (response) => {
+  const config = response?.Data?.Config ?? '[]';
+  return JSON.parse(config)?.map((item) => ({
+    value: item?.key,
+    text: item?.value,
+  }));
+};
+
+export default function useOptions({ enumType, optionId, customEnum }) {
+  const [options, setOptions] = useState([]);
+  const isCustom = enumType === CUSTOM;
+  const isGeneralOption = enumType === GENERAL_OPTION;
+
+  const getOptionsDetailList = async (optionId) => {
+    try {
+      const response = await getDescribeGeneralOptionsDetailList({
+        methodName: 'callDesignApi',
+        params: {
+          action: 'DescribeGeneralOptionsDetail',
+          data: {
+            Id: optionId,
+          },
+        },
+      });
+      const options = handleOptionsDetailList(response);
+      setOptions(options);
+    } catch (error) {
+      setOptions([]);
+    }
+  };
+
+  useEffect(() => {
+    if (optionId && isGeneralOption) {
+      getOptionsDetailList(optionId);
+    }
+  }, [optionId, isGeneralOption]);
+
+  useEffect(() => {
+    setOptions(customEnum);
+  }, [isCustom]);
+
+  return options;
+}

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

@@ -0,0 +1,9 @@
+import MultipleSelect from './MultipleSelect';
+import NormalSelect from './NormalSelect';
+
+const EnumSelect = NormalSelect;
+
+// @ts-ignore
+EnumSelect.MultipleSelect = MultipleSelect;
+
+export default EnumSelect;

package/src/web/components/form/enumSelect/props/defaultProps.js

@@ -0,0 +1,39 @@
+const commonProps = {
+  // 系统属性
+  events: {},
+  // weda 组件属性
+  label: '标题',
+  labelVisible: true,
+  layout: 'horizontal',
+  requiredFlag: false,
+  // tea组件属性
+  name: 'enumSelect',
+  placeholder: '请选择',
+  disabled: false,
+  onChange: () => {},
+  options: [],
+  clearable: true,
+  appearance: 'button',
+  matchButtonWidth: true,
+  virtual: true,
+  searchable: true,
+  size: 'm',
+  // 业务属性
+  enumType: '',
+  customEnum: [],
+  optionId: null,
+  isModelApp: false,
+};
+export const normalProps = {
+  ...commonProps,
+  value: '',
+};
+export const multipleProps = {
+  ...commonProps,
+  value: [],
+  allOption: {
+    value: 'all',
+    text: '全选',
+    tooltip: '全选',
+  },
+};

package/src/web/components/form/enumSelect/props/propsTypes.js

@@ -0,0 +1,50 @@
+import * as PropTypes from 'prop-types';
+
+const commonPropsTypes = {
+  // 系统属性
+  id: PropTypes.string,
+  style: PropTypes.string,
+  className: PropTypes.string,
+  // weda 组件属性
+  label: PropTypes.string,
+  labelVisible: PropTypes.bool,
+  layout: PropTypes.string,
+  requiredFlag: PropTypes.bool,
+};
+export const propTypes = {
+  ...commonPropsTypes,
+  // 系统属性
+  events: PropTypes.object,
+  // tea组件属性
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  name: PropTypes.string,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  options: PropTypes.array,
+  clearable: PropTypes.bool,
+  appearance: PropTypes.string,
+  allOption: PropTypes.object,
+  matchButtonWidth: PropTypes.bool,
+  virtual: PropTypes.bool,
+  searchable: PropTypes.bool,
+  size: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  // 业务属性
+  enumType: PropTypes.string,
+  customEnum: PropTypes.array,
+  optionId: PropTypes.string,
+  isModelApp: PropTypes.bool,
+};
+
+export const formContainerPropsTypes = {
+  ...commonPropsTypes,
+  children: PropTypes.element,
+  decorator: PropTypes.element,
+};
+
+export const selectContainerPropsTypes = {
+  ...commonPropsTypes,
+  children: PropTypes.element,
+  decorator: PropTypes.element,
+};

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

@@ -2,7 +2,6 @@ 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';
@@ -27,7 +26,8 @@ export default function Input({
   layout,
   requiredFlag,
   size,
-  decorator
+  decorator,
+  clearable
 }) {
   const platform = usePlatform();
   const cls = classNames({
@@ -96,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}
@@ -150,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 = {
@@ -169,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

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

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

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