@cloudbase/weda-ui 2.0.27 → 3.1.1

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

@@ -1,510 +0,0 @@
-import * as React from 'react';
-import * as _moment from 'moment';
-import { usePlatform } from '../../../utils/platform';
-import SelectH5, { decodeIsoDatetime } from './h5';
-import classNames from '../../../utils/classnames';
-import {
-  Select as TeaSelect,
-  DatePicker,
-  TimePicker,
-  Cascader,
-  ConfigProvider,
-} from 'tea-component';
-import isObjectEqual from '../../../utils/isObjectEqual';
-import { getRegionTree, getAreaCode } from './region';
-import { renderDecorator } from '../renderDecorator';
-import type { CommonFormPropsType } from '../types';
-import YearPicker from './year';
-import { callDataSource, callWedaApi } from '../../../utils/tcb';
-import destr from 'destr';
-import { REL_DICT } from '../../../utils/constant';
-import { isNil } from '../../../utils/lodash';
-
-const getWhereList = (where) => {
-  let result = [];
-  Array.isArray(where) &&
-    where.forEach((item1) => {
-      if (item1?.groupLogic !== 'or' && Array.isArray(item1?.logicData)) {
-        item1?.logicData.forEach((item2) => {
-          let [rel, val] = [REL_DICT[item2?.rel], item2?.value];
-          if ('_begin_with' === rel) {
-            rel = 'regex';
-            val = `^${val}`;
-          }
-          if ('_exclude' === rel) {
-            rel = 'regex';
-            val = `^((?!${val}).)*$`;
-          }
-          if (item2?.logic !== 'or' && item2?.key && rel && !isNil(val)) {
-            result.push({ key: item2.key, rel, val });
-          }
-        });
-      }
-    });
-  return result;
-};
-// @ts-ignore TODO: fix 与plugin构建阶段效果不同
-export const moment = (
-  typeof _moment === 'function' ? _moment : _moment.default
-) as any;
-
-export default function Select(props) {
-  const {
-    id,
-    style,
-    className,
-    label = '标题',
-    labelVisible = true,
-    layout = 'horizontal',
-    requiredFlag = false,
-    size = 'l',
-    decorator,
-  } = props;
-  const platform = usePlatform();
-
-  let selectEl;
-  if (platform === 'h5') {
-    selectEl = <SelectH5 {...props} />;
-  } else {
-    selectEl = <SelectPc {...props} />;
-  }
-  const cls = classNames({
-    'weda-ui': true,
-    'weda-select': true,
-    [className]: className,
-  });
-  return renderDecorator(
-    selectEl,
-    decorator
-  )({
-    id,
-    className: cls,
-    style,
-    label: labelVisible ? label : null,
-    layout,
-    multiCell: false,
-    requiredFlag,
-    size,
-  });
-}
-export interface PropsType extends CommonFormPropsType {
-  size: 's' | 'm' | 'l' | 'full';
-  placeholder: string;
-  mode: 'selector' | 'date' | 'time' | 'region' | 'mutiRegion';
-  dateMode: 'day' | 'month' | 'year';
-  // selector mode
-  range?: any[];
-  defaultValue?: string;
-  dataSourceName?: string;
-  viewId?: string;
-  enumName?: string;
-  format?: string;
-  primaryField?: string;
-  tipBlock?: any;
-  // 数据筛选
-  where?: {
-    groupLogic?: null | 'or' | 'and';
-    logicData?: {
-      keyType?: 'field' | 'var-font';
-      key: string;
-      rel: 'eq' | 'neq' | 'lt' | 'gt' | 'gte' | 'lte' | 'in' | 'nin' | 'search';
-      value: any;
-      valueType?: 'const' | 'var-font' | 'relative-amount' | 'field';
-      expression?: string | boolean;
-      logic?: null | 'or' | 'and' | string;
-      extra?: {
-        type?: 'string' | 'number' | 'boolean' | 'object' | 'array' | string;
-        format?: string | null;
-        isExpression?: boolean;
-      };
-    }[];
-  }[];
-  // date mode
-  startDate?: string;
-  endDate?: string;
-  defaultDate?: string;
-  // time mode
-  startTime?: string;
-  endTime?: string;
-  defaultTime?: string | number;
-  // region mode
-  defaultRegion?: any[];
-  regionType?: 'levelOne' | 'levelTwo' | 'levelThree';
-  separator?: string;
-  requiredFlag?: boolean;
-  regionTree?: any[];
-  defaultMutiRegion?: string;
-  onChange?: (v: any) => void; // 配合 fomily 受控使用
-}
-
-export const defaultProps = {
-  // 系统属性
-  events: {},
-  // 组件属性
-  label: '标题',
-  size: 'l' as const,
-  labelVisible: true,
-  name: 'formSelect',
-  placeholder: '请选择',
-  layout: 'horizontal',
-  mode: 'selector',
-  disabled: false,
-  requiredFlag: false,
-  // selector mode
-  range: [
-    { name: '选项1', value: '1' },
-    { name: '选项2', value: '2' },
-  ],
-  // region mode
-  separator: ',',
-};
-
-function SelectPc({
-  where,
-  dataSourceName,
-  viewId,
-  format,
-  primaryField,
-  enumName,
-  defaultValue,
-  placeholder = '请选择',
-  mode = 'selector',
-  dateMode = 'day',
-  events = { change: null },
-  disabled = false,
-  range = defaultProps.range,
-  startDate,
-  endDate,
-  defaultDate,
-  defaultTime,
-  startTime,
-  endTime,
-  defaultRegion,
-  defaultMutiRegion,
-  regionType,
-  separator = defaultProps.separator,
-  size = defaultProps.size,
-  onChange,
-}: PropsType) {
-  // 两次默认值不同, 需要刷新
-  const prevDefaultRef = React.useRef<any>();
-  const [date, setDate] = React.useState(
-    decodeIsoDatetime(defaultDate, 'date')
-  );
-  const [time, setTime] = React.useState(
-    decodeIsoDatetime(defaultTime, 'time')
-  );
-  const [regionTree, setRegionTree] = React.useState([]);
-  const [regionData, setRegionData] = React.useState([]);
-  const [region, setRegion] = React.useState(defaultRegion || undefined);
-  const [mutiRegion, setMutiRegion] = React.useState(
-    defaultMutiRegion != null ? defaultMutiRegion.split(',') : []
-  );
-  const [selectedValue, setSelectedValue] = React.useState(defaultValue);
-
-  const [option, setOption] = React.useState([]);
-  const [records, setRecords] = React.useState([]);
-
-  React.useEffect(() => {
-    // 筛选参数
-    const whereEffected = [].concat(getWhereList(where));
-    if (
-      (format === 'father-son' || format === 'related') &&
-      dataSourceName &&
-      viewId
-    ) {
-      fetchData({
-        dataSourceName: dataSourceName,
-        viewId: viewId,
-        methodName: 'wedaGetRecords',
-        params: whereEffected,
-      });
-    }
-  }, [where]);
-
-  // 获取数据列表中主列字段，将其作为选项
-  React.useEffect(() => {
-    if (records && records.length !== 0 && primaryField) {
-      const option = records.map((item) => {
-        return {
-          label: item[primaryField] || item._id,
-          value: item._id,
-        };
-      });
-      setOption(option);
-    }
-  }, [records]);
-
-  // 获取数据源列表
-  const fetchData = async (param: {
-    dataSourceName?: string;
-    viewId?: string;
-    methodName?: string;
-    params?: any;
-  }) => {
-    let pageNo = 1;
-    let pageSize = 200;
-    let records = [];
-    let total = 99999;
-    for (let index = 0; index < Math.floor(total / pageSize) + 1; index++) {
-      let data = await callDataSource({
-        dataSourceName: param.dataSourceName,
-        viewId: param.viewId,
-        methodName: param.methodName,
-        params: {
-          pageNo: pageNo,
-          pageSize: pageSize,
-          where: param.params,
-        },
-      });
-      pageNo = pageNo + 1;
-      if (data?.records) {
-        total = data?.total || 0;
-        records = records.concat(data?.records);
-      }
-    }
-
-    if (records) {
-      setRecords(records);
-    }
-  };
-
-  React.useEffect(() => {
-    // 如果绑定字段类型为枚举，且传入自定义选项集的名称则默认使用自定义选项集的内容作为选项
-    if (format === 'x-enum' && enumName) {
-      fetchEnumData({ OptNameList: [enumName], PageIndex: 1, PageSize: 10 });
-    }
-  }, [enumName]);
-
-  // 获取自定义选项集
-  const fetchEnumData = 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,
-      };
-    });
-    setOption(enumOption);
-  };
-
-  React.useEffect(() => {
-    let hasChange = false;
-    if (prevDefaultRef.current?.defaultValue !== defaultValue) {
-      setSelectedValue(defaultValue);
-      hasChange = true;
-    }
-    if (prevDefaultRef.current?.defaultDate !== defaultDate) {
-      setDate(decodeIsoDatetime(defaultDate, 'date'));
-      hasChange = true;
-    }
-    if (prevDefaultRef.current?.defaultTime !== defaultTime) {
-      const ts = decodeIsoDatetime(defaultTime, 'time');
-      setTime(ts);
-      hasChange = true;
-    }
-    if (!isObjectEqual(prevDefaultRef.current?.defaultRegion, defaultRegion)) {
-      setRegion(defaultRegion || []); // region 有可能是空串
-      hasChange = true;
-    }
-    if (
-      !isObjectEqual(
-        prevDefaultRef.current?.defaultMutiRegion,
-        defaultMutiRegion
-      )
-    ) {
-      setMutiRegion(defaultMutiRegion ? defaultMutiRegion.split(',') : []);
-      hasChange = true;
-    }
-    if (hasChange) {
-      prevDefaultRef.current = {
-        defaultDate,
-        defaultTime,
-        defaultRegion,
-        defaultMutiRegion,
-      };
-    }
-  });
-  const regionTreeMode = React.useMemo(() => {
-    if (mode == 'region' || mode == 'mutiRegion') {
-      if (regionData.length < 1) {
-        getAreaCode().then((value) => {
-          setRegionData(value);
-          getRegionTree(value, regionType, mode).then((tree) => {
-            setRegionTree(tree);
-          });
-        });
-      } else {
-        getRegionTree(regionData, regionType, mode).then((tree) => {
-          setRegionTree(tree);
-        });
-      }
-    }
-    getRegionTree(regionData, regionType, mode).then((value) => {
-      setRegionTree(value);
-    });
-  }, [regionType, mode, regionData]);
-  const onDataChange = (value) => {
-    let finalVal;
-    if (mode === 'date') {
-      finalVal = value.valueOf();
-    } else if (mode === 'time') {
-      finalVal = (value.hour() * 60 * 60 + value.minute() * 60) * 1000;
-    } else if (mode === 'region') {
-      finalVal = value ?? [];
-      setRegion(value);
-    } else if (mode === 'mutiRegion') {
-      finalVal = value.join(',');
-      setMutiRegion(value);
-    } else {
-      finalVal = value;
-    }
-    onChange && onChange(finalVal);
-    events?.change?.({ value: finalVal });
-  };
-  const sizeClassName = classNames({
-    [`size-${size}`]: size,
-  });
-
-  const createDropdown = () => {
-    switch (mode) {
-      case 'selector':
-        return (
-          <div data-testid="form-select">
-            <TeaSelect
-              matchButtonWidth
-              size={size}
-              onChange={onDataChange}
-              disabled={disabled}
-              value={selectedValue}
-              type="simulate"
-              appearance="button"
-              placeholder={placeholder}
-              options={
-                format === 'father-son' ||
-                format === 'related' ||
-                format === 'x-enum'
-                  ? option.map((i) => ({ text: i.label, value: i.value }))
-                  : range.map((i) => ({ text: i.label, value: i.value }))
-              }
-            />
-          </div>
-        );
-      case 'date': {
-        const now = moment();
-        const start = startDate
-          ? decodeIsoDatetime(startDate, 'date')
-          : `${now.year() - 20}-01-01`;
-        const end = endDate
-          ? decodeIsoDatetime(endDate, 'date')
-          : `${now.year() + 20}-12-31`;
-        const dateProps: any = {
-          range: [moment(start), moment(end)],
-          onChange: onDataChange,
-          disabled,
-          placeholder,
-          value: date ? moment(date) : undefined,
-          'data-testid': 'form-item-select',
-          size,
-        };
-        if (dateMode === 'year') {
-          return (
-            <YearPicker
-              {...dateProps}
-              range={[
-                startDate && dateProps.range[0],
-                endDate && dateProps.range[1],
-              ]}
-            />
-          );
-        } else if (dateMode === 'month') {
-          return (
-            <DatePicker.MonthPicker className={sizeClassName} {...dateProps} />
-          );
-        } else {
-          return <DatePicker className={sizeClassName} {...dateProps} />;
-        }
-      }
-      case 'time': {
-        const start = startTime
-          ? decodeIsoDatetime(startTime, 'time')
-          : '00:00';
-        const end = endTime ? decodeIsoDatetime(endTime, 'time') : '23:59';
-        return (
-          <TimePicker
-            className={sizeClassName}
-            onChange={onDataChange}
-            disabled={disabled}
-            placeholder={placeholder}
-            value={time ? moment(time, 'HH:mm') : undefined}
-            range={[moment(start, 'HH:mm'), moment(end, 'HH:mm')]}
-            format="HH:mm"
-          />
-        );
-      }
-      case 'region':
-        return (
-          <Cascader
-            clearable
-            searchable
-            type="menu"
-            disabled={disabled}
-            data={regionTree}
-            multiple={false}
-            onChange={onDataChange}
-            className={sizeClassName}
-            valueRender={(options) =>
-              options.map(({ label, value }, index) => (
-                <React.Fragment key={`${value}-${index}`}>
-                  {index !== 0 && `${separator}`}
-                  {label || value}
-                </React.Fragment>
-              ))
-            }
-            value={region}
-          />
-        );
-      case 'mutiRegion':
-        return (
-          <Cascader
-            clearable
-            searchable
-            className={sizeClassName}
-            type="menu"
-            disabled={disabled}
-            data={regionTree}
-            multiple={false}
-            onChange={onDataChange}
-            onLoad={(regionTree, options) => {
-              return new Promise((resolve) => {
-                setTimeout(() => {
-                  resolve();
-                }, 1000);
-              });
-            }}
-            valueRender={(options) =>
-              options.map(({ label, value }, index) => (
-                <React.Fragment key={`${value}-${index}`}>
-                  {index !== 0 && ','}
-                  {label || value}
-                </React.Fragment>
-              ))
-            }
-            value={mutiRegion}
-          />
-        );
-    }
-  };
-
-  const dropdown = createDropdown();
-
-  return <ConfigProvider classPrefix="wedatea2td">{dropdown}</ConfigProvider>;
-}

package/src/web/components/form/select/region/index.ts

@@ -1,152 +0,0 @@
-import weui from '../../../../utils/weui';
-import { callWedaApi } from '../../../../utils/tcb';
-
-let tree;
-
-export async function getRegionTree(regionData, regionType, regionMode) {
-  tree = [];
-  tree = formatTreeData(regionData, regionType, regionMode);
-  return tree;
-}
-
-export function regionPicker(options, regionTree: any[]) {
-  const weRegionTree =
-    regionTree.length == 0
-      ? [
-          {
-            label: '地区数据加载中，请关闭弹窗后重试',
-            value: null,
-            children: null,
-          },
-        ]
-      : regionTree;
-  weui.picker(weRegionTree, options);
-}
-/**
- * 获取运行态地区数据
- */
-export async function getAreaCode() {
-  try {
-    const res = await callWedaApi({
-      action: 'QueryRuntimeAreaCode',
-      data: { Mask: '11100' },
-    });
-    return res?.AreaCodeList;
-  } catch (error) {
-    console.error('错误', error);
-    return {};
-  }
-}
-/**
- * 构建树形结构
- */
-function formatTreeData(arr, regionType, regionMode) {
-  let provicesData = [];
-  arr.forEach((item) => {
-    //省数据集合
-    if (item?.Type == 1 && item?.Deprecated == false) {
-      provicesData.push({
-        label: item.Value,
-        value: item.Value,
-        code: item.Code,
-        type: item.Type,
-        centralCity: item.CentralCity,
-        children:
-          regionType != 'levelOne' || regionMode == 'region'
-            ? [
-                {
-                  label: item.Value,
-                  value: item.Value,
-                  code: item.Code,
-                  type: item.Type,
-                  children:
-                    regionType != 'levelTwo' || regionMode == 'region'
-                      ? [
-                          {
-                            label: item.Value,
-                            value: item.Value,
-                            code: item.Code,
-                            type: item.Type,
-                            centralCity: item.CentralCity,
-                          },
-                        ]
-                      : null,
-                },
-              ]
-            : null,
-      });
-    }
-  });
-  if (regionType != 'levelOne' || regionMode == 'region') {
-    arr.forEach((item) => {
-      //市数据集合
-      if (item?.Type == 2 && item?.Deprecated == false) {
-        provicesData.map((provice) => {
-          if (provice.code.substr(0, 2) == item.Code.substr(0, 2)) {
-            if (provice['children'][0].type == 1) {
-              provice['children'] = [];
-            }
-            provice['children'].push({
-              label: item.Value,
-              value: item.Value,
-              code: item.Code,
-              type: item.Type,
-              centralCity: item.CentralCity,
-              children:
-                regionType != 'levelTwo' || regionMode == 'region'
-                  ? [
-                      {
-                        label: item.Value,
-                        value: item.Value,
-                        code: item.Code,
-                        type: item.Type,
-                        centralCity: item.CentralCity,
-                      },
-                    ]
-                  : null,
-            });
-          }
-        });
-      }
-    });
-    if (regionType != 'levelTwo' || regionMode == 'region') {
-      arr.forEach((item) => {
-        //区数据集合
-        if (item?.Type == 3 && item?.Deprecated == false) {
-          provicesData.map((provice) => {
-            if (provice.centralCity) {
-              provice.children.map((city) => {
-                if (city.code.substr(0, 2) == item.Code.substr(0, 2)) {
-                  if (city['children'][0].type == 1) {
-                    city['children'] = [];
-                  }
-                  city['children'].push({
-                    label: item.Value,
-                    value: item.Value,
-                    code: item.Code,
-                    //type:item.Type
-                  });
-                }
-              });
-            } else {
-              provice.children.map((city) => {
-                if (city.code.substr(0, 4) == item.Code.substr(0, 4)) {
-                  if (city['children'][0].type == 2) {
-                    city['children'] = [];
-                  }
-                  city['children'].push({
-                    label: item.Value,
-                    value: item.Value,
-                    code: item.Code,
-                    //type:item.Type
-                  });
-                }
-              });
-            }
-          });
-        }
-      });
-    }
-  }
-  return provicesData;
-}