@cloudbase/weda-ui 2.0.26 → 3.1.0

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

@@ -1,210 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Checkbox as TeaCheckbox, ConfigProvider } from 'tea-component';
-
-import classNames from '../../../utils/classnames';
-import getLocalCounter from '../../../utils/getLocalCounter';
-import isObjectEqual from '../../../utils/isObjectEqual';
-import fromEntries from 'object.fromentries';
-import { usePlatform } from '../../../utils/platform';
-import { renderDecorator } from '../renderDecorator';
-import type { CommonFormPropsType } from '../types';
-import { callWedaApi } from '../../../utils/tcb';
-import destr from 'destr';
-
-export default function Checkbox({
-  // 系统属性
-  id,
-  className,
-  style,
-  events = {},
-  // 组件属性
-  name = 'formCheckbox',
-  label = '标题',
-  labelVisible = true,
-  format = '',
-  enumName = '',
-  range = [],
-  layout = 'horizontal',
-  disabled = false,
-  requiredFlag = false,
-  decorator,
-}: PropsType) {
-  const cls = classNames({
-    'weda-ui': true,
-    'weda-checkbox': true,
-    [className]: className,
-  });
-
-  const platform = usePlatform();
-  const isH5 = platform === 'h5';
-  const subCls = classNames({
-    'weui-cell': isH5,
-    'weui-cell_active': isH5,
-    'weui-check__label': isH5,
-    'weui-cell_disabled': isH5 && disabled,
-  });
-
-  const [option, setOption] = useState(range);
-  const [checkedItems, setCheckedItems] = React.useState(
-    platform === 'h5'
-      ? fromEntries(option.map(({ value, checked }) => [value, !!checked]))
-      : option.filter(({ checked }) => checked).map(({ value }) => value)
-  );
-  // 两次range不同时, 需要刷新checkedItems
-  const prevRangeRef = React.useRef<object[]>();
-  React.useEffect(() => {
-    if (!isObjectEqual(prevRangeRef.current, option)) {
-      prevRangeRef.current = option;
-      setCheckedItems(
-        fromEntries(option.map(({ value, checked }) => [value, !!checked]))
-      );
-    }
-  });
-
-  useEffect(() => {
-    // 如果绑定字段类型为枚举，且传入自定义选项集的名称则默认使用自定义选项集的内容作为选项
-    if (format === 'x-enum' && enumName) {
-      fetchData({ OptNameList: [enumName], PageIndex: 1, PageSize: 10 });
-    }
-  }, []);
-
-  useEffect(() => {
-    if (format !== 'x-enum') {
-      setOption(range);
-    }
-  }, [range]);
-
-  const fetchData = async (param: {
-    OptNameList?: object;
-    PageIndex?: number;
-    PageSize?: number;
-  }) => {
-    let data = await callWedaApi({
-      action: 'DescribeGeneralOptionsDetailList',
-      data: param,
-    });
-    const config = destr(data?.Items?.[0]?.Config) ?? [];
-    const enumOption = config.map((item) => {
-      return {
-        label: item.value,
-        value: item.key,
-        checked: false,
-      };
-    });
-    setOption(enumOption);
-  };
-
-  /**
-   * 在ios h5端, label和input的绑定不生效
-   * 导致 onChange 事件触发有问题, 所以改为监听 onClick 事件
-   */
-  const getChangeHandler = function (value) {
-    const onChange = function (e) {
-      e.stopPropagation();
-      const checked = !checkedItems[value];
-      const newMap = Object.assign({}, checkedItems, { [value]: checked });
-      if (!disabled) {
-        setCheckedItems(newMap);
-        events.change(
-          {
-            value: Object.entries(newMap)
-              .filter(([, checked]) => checked)
-              .map(([value]) => value),
-          },
-          { originEvent: e }
-        );
-      }
-    };
-    return onChange;
-  };
-
-  // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
-  const hashcode = React.useMemo(() => getLocalCounter(), []);
-  let checkboxElement;
-  if (platform === 'h5') {
-    checkboxElement = option.map(({ label, value }, index) => {
-      const _id = `checkbox-${hashcode}-${index}`;
-      const _name = `checkbox-${hashcode}-${name}`;
-      return (
-        <div
-          key={_id}
-          onClickCapture={getChangeHandler(value)}
-          className={subCls}
-        >
-          <div className="weui-cell__hd">
-            <input
-              type="checkbox"
-              className="weui-check"
-              value={value}
-              id={_id}
-              name={_name}
-              checked={checkedItems[value]}
-              disabled={disabled}
-            />
-            <i className="weui-icon-checked"></i>
-          </div>
-          <div className="weui-cell__bd">
-            <p>{label}</p>
-          </div>
-        </div>
-      );
-    });
-  } else {
-    checkboxElement = (
-      <ConfigProvider classPrefix="wedatea2td">
-        <TeaCheckbox.Group
-          disabled={disabled}
-          value={Object.entries(checkedItems)
-            .filter(([, checked]) => checked)
-            .map(([value]) => value)}
-          onChange={(value) => {
-            const newMap = option
-              .map((opt) => opt.value)
-              .reduce((acc, cur) => {
-                const idx = value.indexOf(cur);
-                if (idx < 0) {
-                  acc[cur] = false;
-                } else {
-                  acc[cur] = true;
-                }
-                return acc;
-              }, {});
-            setCheckedItems(newMap);
-            events.change({
-              value: Object.entries(newMap)
-                .filter(([, checked]) => checked)
-                .map(([value]) => value),
-            });
-          }}
-        >
-          {option.map(({ value, label }, index) => {
-            const _id = `checkbox-${hashcode}-${index}`;
-            return (
-              <TeaCheckbox key={_id} name={value} id={_id}>
-                {label}
-              </TeaCheckbox>
-            );
-          })}
-        </TeaCheckbox.Group>
-      </ConfigProvider>
-    );
-  }
-  return renderDecorator(
-    checkboxElement,
-    decorator
-  )({
-    id,
-    className: cls,
-    style,
-    label: labelVisible ? label : null,
-    layout,
-    multiCell: true,
-    requiredFlag,
-  });
-}
-
-export interface PropsType extends CommonFormPropsType {
-  range?: { label: string; value: any; [key: string]: any }[];
-  format?: string;
-  enumName?: string;
-}

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

@@ -1,89 +0,0 @@
-import * as React from 'react';
-import { SelectMultiple } from 'tea-component';
-
-import SelectContainer from './SelectContainer';
-
-import { normalProps } from './props/defaultProps';
-import { propTypes } from './props/propsTypes';
-
-const MultipleSelect = ({
-  // 系统属性
-  id,
-  style,
-  className,
-  events,
-  // weda 组件属性
-  label,
-  labelVisible,
-  layout,
-  requiredFlag,
-  decorator,
-  // tea组件属性
-  value,
-  placeholder,
-  disabled,
-  onChange,
-  clearable,
-  appearance,
-  allOption,
-  matchButtonWidth,
-  virtual,
-  searchable,
-  size,
-  options,
-  // 业务属性
-  isModelApp,
-}) => {
-  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.tsx

@@ -1,92 +0,0 @@
-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 { useSyncValue } from '../../../utils/useSyncValue';
-
-const { useState, useEffect } = React;
-
-const NormalSelect = ({
-  // 系统属性
-  id,
-  style,
-  className,
-  events,
-  // weda 组件属性
-  label,
-  labelVisible,
-  layout,
-  requiredFlag,
-  decorator,
-  // tea组件属性
-  value,
-  placeholder,
-  disabled,
-  onChange,
-  clearable,
-  appearance,
-  matchButtonWidth,
-  virtual,
-  searchable,
-  size,
-  options,
-  // 业务属性
-  isModelApp,
-}) => {
-  const [selectedValue, setSelectedValue] = useSyncValue(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

@@ -1,43 +0,0 @@
-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/index.jsx

@@ -1,9 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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/form/index.css

@@ -1,9 +0,0 @@
-.weda-ui.weda-form .weui-cells__group_form .weui-cell:not(.weui-cell_link) {
-  color: inherit;
-}
-
-.weda-ui.weda-form-pc,
-.weda-ui.gsd-h5-react-form-pc {
-  padding-left: 24px;
-  padding-right: 24px;
-}

package/src/web/components/form/form/index.tsx

@@ -1,51 +0,0 @@
-import * as React from 'react';
-import classNames from '../../../utils/classnames';
-import './index.css';
-import { ConfigProvider, Form as TeaForm } from 'tea-component';
-import { usePlatform } from '../../../utils/platform';
-import type { CommonFormPropsType } from '../types';
-
-export default function Form({
-  // 系统属性
-  className,
-  // 组件属性
-  // title,
-  // description,
-  // tips,
-  contentSlot,
-  // buttonSlot,
-  style,
-  id,
-  layout,
-}) {
-  const platform = usePlatform();
-  const cls = classNames({
-    'weda-ui': true,
-    'weda-form': true,
-    'weui-form': platform === 'h5',
-    'weda-form-pc': platform === 'pc',
-    'gsd-h5-react-form-pc': platform === 'pc',
-    [className]: className,
-  });
-  if (platform === 'pc') {
-    return (
-      <ConfigProvider classPrefix="wedatea2td">
-        {/** @ts-expect-error tea form id */}
-        <TeaForm layout={layout} className={cls} style={style} id={id}>
-          {contentSlot}
-        </TeaForm>
-      </ConfigProvider>
-    );
-  }
-  return (
-    <div className={cls} style={style} id={id}>
-      <div className="weui-cells__group weui-cells__group_form">
-        {contentSlot}
-      </div>
-    </div>
-  );
-}
-
-export interface PropsType extends CommonFormPropsType {
-  contentSlot?: any;
-}

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

@@ -1,85 +0,0 @@
-.weda-formcells__flag {
-  display: inline-block;
-  margin-left: 4px;
-  font-family: SimSun;
-  font-size: 12px;
-  color: #f60;
-  align-self: flex-start;
-}
-
-.weda-formcells__label.weui-cell {
-  align-items: flex-start;
-}
-
-.weda-ui .weui-cells__group_form .weui-cells {
-  margin: 0;
-}
-.weda-formcells.weui-flex .weda-formcells__label {
-  width: 130px;
-  padding-bottom: 16px;
-}
-.weui-cells__group_form .weui-cell {
-  padding: 16px 16px;
-}
-
-.weda-formcells .weda-formcells__label {
-  padding-bottom: 8px;
-}
-
-.weda-formcells__content.weui-flex__item .weui-cell_form {
-  padding: 0;
-}
-
-.weda-formcells__content.weui-flex__item .weui-cell_form {
-  padding-right: 16px;
-}
-
-/* formcell 在 form container 外部兼容 and 独立 layout 适配 */
-
-.weda-formcells__pc.vertical .wedatea2td-form__controls,
-.weda-formcells__pc.vertical .wedatea2td-form__label {
-  display: block;
-}
-.weda-formcells__pc.vertical .wedatea2td-form__label {
-  padding-bottom: 0;
-  padding-top: 0;
-  width: auto;
-  margin-bottom: 10px;
-}
-
-.weda-formcells__pc.vertical .wedatea2td-form__help-text {
-  margin-top: 4px;
-}
-.weda-formcells__pc.vertical .wedatea2td-form__controls--text {
-  padding-top: 0;
-}
-
-.weda-formcells__pc .wedatea2td-form__controls {
-  display: table-cell;
-  vertical-align: top;
-  padding-bottom: 16px;
-}
-.weda-formcells__pc .wedatea2td-form__label {
-  display: table-cell; /*container 外适配*/
-  vertical-align: baseline;
-  padding-top: 7px;
-  padding-bottom: 7px;
-}
-.wedatea2td-form .wedatea2td-form__label .wedatea2td-icon {
-  vertical-align: -4px;
-}
-.weda-formcells__pc .wedatea2td-form__label label,
-.weda-formcells__pc .wedatea2td-form__label legend {
-  display: inline-block;
-  transform: translateZ(0);
-  width: 98px;
-}
-
-/*formcell*/
-
-.weda-formcells__full-width .wedatea2td-form__controls {
-  width: 100%;
-}
-/*formcell end*/
-
-/* formcell 在 form container 外部兼容 */