@cloudbase/weda-ui 2.0.28 → 3.1.0

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

@@ -1,602 +0,0 @@
-import * as React from 'react';
-import weui from '../../../utils/weui';
-import classNames from '../../../utils/classnames';
-import isObjectEqual from '../../../utils/isObjectEqual';
-import { regionPicker, getRegionTree, getAreaCode } from './region/index';
-import { PropsType, defaultProps, moment } from './index';
-import { timePicker, yearPicker, monthPicker } from './time';
-import { callDataSource, callWedaApi } from '../../../utils/tcb';
-import destr from 'destr';
-import { REL_DICT } from '../../../utils/constant';
-import { isNil } from '../../../utils/lodash';
-
-export default function Select({
-  // 系统属性
-  events = { change: null },
-  // 组件属性
-  name,
-  placeholder,
-  layout,
-  mode,
-  dateMode = 'day',
-  disabled = false,
-  // selector mode
-  range = defaultProps.range,
-  where,
-  primaryField,
-  tipBlock,
-  enumName,
-  dataSourceName,
-  viewId,
-  format,
-  defaultValue,
-  // date mode
-  startDate,
-  endDate,
-  defaultDate,
-  // time mode
-  startTime,
-  endTime,
-  defaultTime,
-  // region mode
-  defaultRegion,
-  defaultMutiRegion,
-  regionType,
-  separator,
-  onChange,
-}: //regionTree,
-PropsType) {
-  const [date, setDate] = React.useState(
-    decodeIsoDatetime(defaultDate, 'date', dateMode)
-  );
-  const [time, setTime] = React.useState(
-    decodeIsoDatetime(defaultTime, 'time')
-  );
-  const [regioDepth, setRegionDepth] = React.useState(3);
-  const [regionData, setRegionData] = React.useState([]);
-  const [regionTree, setRegionTree] = React.useState([]);
-  const [region, setRegion] = React.useState(defaultRegion);
-  const [mutiRegion, setMutiRegion] = React.useState([]);
-  const [typeRegion, setTypeRegion] = React.useState(regionType);
-  const [selectedValue, setSelectedValue] = React.useState(defaultValue);
-  const [option, setOption] = React.useState([{ label: '', value: '' }]);
-  const [records, setRecords] = React.useState([]);
-
-  // 两次默认值不同, 需要刷新
-  const prevDefaultRef = React.useRef<any>({});
-  React.useEffect(() => {
-    let hasChange = false;
-    if (prevDefaultRef.current?.defaultValue !== defaultValue) {
-      setSelectedValue(defaultValue);
-      hasChange = true;
-    }
-    if (prevDefaultRef.current?.defaultDate !== defaultDate) {
-      setDate(decodeIsoDatetime(defaultDate, 'date', dateMode));
-      hasChange = true;
-    }
-    if (prevDefaultRef.current?.defaultTime !== defaultTime) {
-      setTime(decodeIsoDatetime(defaultTime, 'time'));
-      hasChange = true;
-    }
-    if (!isObjectEqual(prevDefaultRef.current?.defaultRegion, defaultRegion)) {
-      setRegion(defaultRegion);
-      hasChange = true;
-    }
-    if (
-      !isObjectEqual(
-        prevDefaultRef.current?.defaultMutiRegion,
-        defaultMutiRegion
-      )
-    ) {
-      //setMutiRegion((defaultMutiRegion || ".").split(','));
-      setMutiRegion(defaultMutiRegion ? defaultMutiRegion.split(',') : []);
-      hasChange = true;
-    }
-    if (prevDefaultRef.current?.regionType !== regionType) {
-      setTypeRegion(regionType);
-      hasChange = true;
-    }
-    if (hasChange) {
-      prevDefaultRef.current = {
-        defaultValue,
-        defaultDate,
-        defaultTime,
-        defaultRegion,
-        defaultMutiRegion,
-      };
-    }
-  });
-  //实现初始值触发change事件
-  const defaultMutiRegionChange = function (treeValue, defaultMutiRegion) {
-    const defaultValue = defaultMutiRegion
-      ? defaultMutiRegion.split(',')
-      : null;
-    const changeValue = [];
-    if (Array.isArray(defaultValue) && defaultValue.length > 0) {
-      defaultValue.forEach((element) => {
-        treeValue.map((item) => {
-          if (item?.Value == element) {
-            changeValue.push({
-              value: item?.Value,
-              code: item?.Code,
-            });
-          }
-        });
-      });
-
-      events?.change?.({ value: defaultMutiRegion, result: changeValue });
-    }
-  };
-  const regionTreeMode = React.useMemo(() => {
-    if (mode == 'region' || mode == 'mutiRegion') {
-      if (regionData.length < 1) {
-        getAreaCode().then((value) => {
-          defaultMutiRegionChange(value, defaultMutiRegion);
-          setRegionData(value);
-          getRegionTree(value, regionType, mode).then((tree) => {
-            setRegionTree(tree);
-          });
-        });
-      } else {
-        getRegionTree(regionData, regionType, mode).then((tree) => {
-          setRegionTree(tree);
-        });
-      }
-    }
-    switch (regionType) {
-      case 'levelOne': {
-        setRegionDepth(1);
-        break;
-      }
-      case 'levelTwo': {
-        setRegionDepth(2);
-        break;
-      }
-      case 'levelThree': {
-        setRegionDepth(3);
-        break;
-      }
-      default: {
-        break;
-      }
-    }
-  }, [regionType, mode, regionData]);
-
-  React.useEffect(() => {
-    // tcb过滤参数
-    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: {
-          where: param.params,
-          pageNo: pageNo,
-          pageSize: pageSize,
-        },
-      });
-      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);
-  };
-
-  const isFlex = layout !== 'vertical';
-  const subCls = classNames({
-    'weui-cell': true,
-    'weui-cell_active': true,
-    'weui-cell_form': true,
-    'weui-flex__item': isFlex,
-    'weui-cell_disabled': disabled,
-  });
-
-  const onDateclick = function () {
-    const options: Record<string, any> = {
-      className: 'weda-ui weda-picker',
-    };
-    !!date && (options.defaultDate = date);
-    !!startDate && (options.start = decodeIsoDatetime(startDate, 'date'));
-    !!endDate && (options.end = decodeIsoDatetime(endDate, 'date'));
-    if (['year', 'month'].includes(dateMode)) {
-      !!startDate && (options.startDate = startDate);
-      !!endDate && (options.endDate = endDate);
-    }
-
-    options.onConfirm = (result) => {
-      const value = formatDateModeValue(result, dateMode);
-      const formatNewDateValue = getFormatNewDateParams(dateMode, value) as [];
-      setDate(value);
-      events.change({
-        value: new Date(...formatNewDateValue).getTime(),
-      });
-    };
-
-    if (dateMode === 'year') {
-      // 年，1 列
-      yearPicker({ ...options });
-    } else if (dateMode === 'month') {
-      // 年月，2 列
-      monthPicker({ ...options });
-    } else {
-      // 年月日，3 列
-      weui.datePicker({ id: String(Date.now()), ...options });
-    }
-  };
-
-  const onTimeClick = function () {
-    const options: Record<string, any> = {
-      className: 'weda-ui weda-picker',
-    };
-    !!time && (options.defaultTime = time);
-    !!startTime && (options.start = decodeIsoDatetime(startTime, 'time'));
-    !!endTime && (options.end = decodeIsoDatetime(endTime, 'time'));
-
-    timePicker({
-      ...options,
-      onConfirm(result) {
-        const date = moment().hour(result[0].value).minute(result[1].value);
-        const value = date.format('HH:mm');
-        setTime(value);
-        events?.change({
-          value: (date.hour() * 60 * 60 + date.minute() * 60) * 1000,
-        });
-      },
-    });
-  };
-
-  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;
-  };
-
-  const onSelect = function () {
-    if (
-      format === 'father-son' ||
-      format === 'related' ||
-      format === 'x-enum'
-    ) {
-      weui.picker(option, {
-        id: String(Date.now()),
-        defaultValue: [selectedValue || option[0].value],
-        onConfirm(result) {
-          const item = result[0];
-          setSelectedValue(item?.value);
-          events.change({ value: item?.value });
-        },
-        className: 'weda-ui weda-picker',
-      });
-    } else {
-      weui.picker(range, {
-        id: String(Date.now()),
-        defaultValue: [selectedValue || range[0].value],
-        onConfirm(result) {
-          const item = result[0];
-          setSelectedValue(item?.value);
-          events.change({ value: item?.value });
-        },
-        className: 'weda-ui weda-picker',
-      });
-    }
-  };
-  let regionTimer;
-  const momentClick = async () => {
-    regionTimer = setInterval(
-      () => {
-        setTimeout(() => {
-          if (regionTree.length != 0) {
-            onRegionClick();
-          }
-        }, 0);
-      },
-      regionTree.length == 0 ? 500 : 0
-    );
-  };
-  const onRegionClick = function () {
-    clearInterval(regionTimer);
-    let defaultValue = [];
-    if (mode == 'region') {
-      defaultRegion && defaultRegion.length <= 0
-        ? (defaultValue = ['北京市', '北京市', '东城区'])
-        : (defaultValue = defaultRegion);
-    } else {
-      mutiRegion && mutiRegion.length <= 0
-        ? (defaultValue = ['北京市', '北京市', '东城区'])
-        : (defaultValue = mutiRegion);
-    }
-    regionPicker(
-      {
-        defaultValue: defaultValue,
-        depth: regioDepth,
-        onConfirm(result) {
-          const value = result.map((item) => item.value);
-          //const value=regionValueSplit(typeRegion,defaultvalue);
-          mode == 'region' ? setRegion(value) : setMutiRegion(value);
-          const changeValue = mode == 'region' ? value : value.join(',');
-          onChange && onChange(changeValue);
-          events?.change?.({
-            value: changeValue,
-            result: result.map((item) => {
-              return {
-                value: item?.value,
-                code: item?.code,
-              };
-            }),
-          });
-        },
-        onChange(result) {},
-        className: 'weda-ui weda-picker',
-        id: new Date().valueOf(),
-      },
-      regionTree
-    );
-  };
-
-  const onClick = async function () {
-    if (disabled) {
-      return;
-    }
-
-    switch (mode) {
-      case 'date': {
-        onDateclick();
-        break;
-      }
-      case 'time': {
-        onTimeClick();
-        break;
-      }
-      case 'selector': {
-        onSelect();
-        break;
-      }
-      case 'region': {
-        momentClick();
-        break;
-      }
-      case 'mutiRegion': {
-        momentClick();
-        break;
-      }
-      default: {
-        break;
-      }
-    }
-  };
-
-  const result = React.useMemo(() => {
-    let selectLabel = '';
-    if (
-      format === 'father-son' ||
-      format === 'related' ||
-      format === 'x-enum'
-    ) {
-      selectLabel = (option ?? []).find(
-        (item) => item.value === selectedValue
-      )?.label;
-    } else {
-      selectLabel = (range ?? []).find(
-        (item) => item.value === selectedValue
-      )?.label;
-    }
-    return {
-      selector: selectLabel,
-      date: date,
-      time: time,
-      region: (region || []).join(separator), // region 有可能是空串
-      mutiRegion: mutiRegion,
-    };
-  }, [range, selectedValue, date, time, region, separator, mutiRegion, option]);
-
-  return (
-    <div className={subCls}>
-      <div className="weui-cell__bd weui-flex">
-        <input
-          onClick={onClick}
-          className="weui-input"
-          type="select"
-          name={name}
-          placeholder={placeholder}
-          value={result[mode] ?? ''}
-          disabled={disabled}
-          autoComplete={'off'}
-          readOnly={true}
-          data-testid="form-item-select"
-        />
-      </div>
-    </div>
-  );
-}
-
-export function decodeIsoDatetime(isoStringOrTimesnap, type, dateMode = 'day') {
-  if (!isoStringOrTimesnap) {
-    return null;
-  }
-
-  if (
-    typeof isoStringOrTimesnap === 'string' &&
-    /^-?[0-9]*$/.test(isoStringOrTimesnap)
-  ) {
-    const timeSnap = Number(isoStringOrTimesnap);
-    if (!isNaN(timeSnap)) {
-      isoStringOrTimesnap = timeSnap;
-    }
-  }
-
-  if (type === 'time') {
-    const time =
-      isoStringOrTimesnap.match &&
-      isoStringOrTimesnap.match(/^(\d{2}):(\d{2})$/);
-    if (time && time[1] < 24 && time[2] < 60) {
-      return moment().hour(time[1]).minute(time[2]).format('HH:mm');
-    } else if (typeof isoStringOrTimesnap === 'number') {
-      const timeSnap = Number(isoStringOrTimesnap);
-      let day;
-      try {
-        day = moment()
-          .hour(Math.floor(timeSnap / 3600000) % 24)
-          .minute(Math.floor((timeSnap % 3600000) / 60000));
-      } catch (e) {
-        day = moment(timeSnap);
-      }
-      return day.format('HH:mm');
-    } else {
-      return moment(isoStringOrTimesnap).format('HH:mm');
-    }
-  } else {
-    return moment(isoStringOrTimesnap).format(getDateModeFormat(dateMode));
-  }
-}
-
-/**
- * 根据时间模式，构造 new Date()的传参格式单个日期和时间组件值
- */
-export const getFormatNewDateParams = (
-  type: string,
-  timeStr: string
-): any[] => {
-  let value = [];
-  let time = timeStr.split('-');
-  switch (type) {
-    case 'year':
-      value = [time[0], 0, [1]];
-      break;
-    case 'month':
-      value = [time[0], Number(time[1]) - 1, [1]];
-      break;
-    case 'day':
-      value = [time[0], Number(time[1]) - 1, [time[2]]];
-      break;
-  }
-  return value;
-};
-
-/**
- * 根据时间模式，将 picker 返回的值转成对应的 年-月-日
- */
-export const formatDateModeValue = (result = [], dateMode = 'day') => {
-  let [year, month, day] = [
-    result[0]?.value,
-    result[1]?.value || 1,
-    result[2]?.value || 1,
-  ];
-  if (dateMode === 'year') {
-    month = 1;
-    day = 1;
-  }
-  if (dateMode === 'month') {
-    day = 1;
-  }
-  const value = moment()
-    .year(year)
-    .month(month - 1)
-    .date(day)
-    .format(getDateModeFormat(dateMode));
-  return value;
-};
-
-/**
- * 不同时间模式对应的展示格式
- */
-export const getDateModeFormat = (dateMode = 'day') => {
-  switch (dateMode) {
-    case 'year':
-      return 'YYYY';
-    case 'month':
-      return 'YYYY-MM';
-    case 'day':
-      return 'YYYY-MM-DD';
-    default:
-      return 'YYYY-MM-DD';
-  }
-};

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

@@ -1,27 +0,0 @@
-.weda-ui .weui-cell.weui-check__label {
-  padding: 16px;
-}
-
-.weda-ui .weui-flex__item .weui-cell.weui-check__label {
-  padding-left: 0;
-}
-
-.year-picker__overlay {
-  width: 300px;
-}
-
-.year-picker__overlay .year-picker__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: 700;
-}
-
-.weda-ui.weda-select .weui-cell_form {
-  padding: 0 16px;
-}
-
-.weda-ui.weda-select .weui-flex__item .weui-cell_form {
-  padding: 0;
-  padding-right: 16px;
-}