@hw-component/form 0.0.9-beta-v19 → 0.0.9-beta-v21

package/src/components/Select/index.tsx

@@ -1,126 +0,0 @@
-import { Select } from "antd";
-import React from "react";
-import { useFilterOption, useOptionReq } from "./hooks/norHooks";
-import { useValueChange } from "./hooks/changeHooks";
-import type { HSelectProps } from "./modal";
-import { defaultModeConfig, defaultSelectConfig } from "./defaultConfig";
-import DropdownComponent from "./components/DropdownComponent";
-import AllSelect from "./components/AllSelect";
-import { useChangeOptions, useMatchConfigProps } from "../hooks";
-import HFormConnect from "../Form/HFormConnect";
-const { Option } = Select;
-
-const Index: React.FC<HSelectProps> = ({
-  style = { width: "100%" },
-  mode,
-  options,
-  modeConfig = defaultModeConfig,
-  value,
-  onChange,
-  fieldNames: propsFieldNames,
-  request,
-  manual,
-  optionLabelProp = "label",
-  filterProvider,
-  optionFilterProp = "filterLabel",
-  serviceSearch,
-  onSearch: propsOnSearch,
-  filterOption,
-  showSearch,
-  labelInValue,
-  noMatchItemRender = defaultSelectConfig.noMatchItemRender,
-  allSelect,
-  addDispatchListener,
-  addFormat,
-  dispatch,
-  ...props
-}) => {
-  const { icon, render } = modeConfig?.[mode || ""] || {};
-  const { fieldNames } = useMatchConfigProps({ fieldNames: propsFieldNames });
-  const selfFilterOption = useFilterOption({ filterOption, serviceSearch });
-  const {
-    run,
-    loading,
-    data: resultData,
-    error,
-    onSearch,
-    mathShowSearch,
-    reload,
-  } = useOptionReq({
-    options,
-    manual,
-    fieldNames,
-    request,
-    serviceSearch,
-    showSearch,
-    onSearch: propsOnSearch,
-    dispatch,
-  }); //options
-
-  const data = useChangeOptions({ options: resultData, fieldNames });
-  const { val, change } = useValueChange({
-    labelInValue,
-    onChange,
-    value,
-    options: data,
-    mode,
-    noMatchItemRender,
-    fieldNames,
-  });
-  addDispatchListener?.("reload", reload);
-  return (
-    <Select
-      style={style}
-      mode={mode}
-      loading={loading}
-      value={val}
-      onSearch={onSearch}
-      onChange={change}
-      dropdownRender={(node) => {
-        return (
-          <DropdownComponent
-            loading={loading}
-            reload={run}
-            error={error}
-            options={data}
-          >
-            <AllSelect
-              allSelect={allSelect}
-              options={data}
-              mode={mode}
-              value={val}
-              onChange={change}
-            >
-              {node}
-            </AllSelect>
-          </DropdownComponent> //全选
-        );
-      }}
-      optionLabelProp={optionLabelProp}
-      menuItemSelectedIcon={icon}
-      optionFilterProp={optionFilterProp}
-      filterOption={selfFilterOption}
-      showSearch={mathShowSearch}
-      labelInValue={true}
-      {...props}
-    >
-      {data?.map((item) => {
-        const { value: optionValue, label } = item;
-        const result = filterProvider?.(item) || label;
-        const filter = { [optionFilterProp]: result };
-        return (
-          <Option
-            value={optionValue}
-            key={optionValue}
-            label={label}
-            mode={mode}
-            {...filter}
-          >
-            {render ? render(item, val) : label}
-          </Option>
-        );
-      })}
-    </Select>
-  );
-};
-export default HFormConnect(Index);

package/src/components/Select/modal.ts

@@ -1,38 +0,0 @@
-import type { SelectProps } from "antd";
-import type React from "react";
-import type { PromiseFnResult } from "../modal";
-import type { argsFn } from "@/components/Form/modal";
-import type { addFormatItemModal } from "@/components/Form/modal";
-import type { DispatchModal } from "@/components/Form/modal";
-export type OptionType = Record<string, any>;
-export type PartialHSelectProps = Partial<HSelectProps>;
-export type RenderFn = (data: OptionType) => React.ReactNode;
-
-interface ModeConfigItem {
-  icon?: React.ReactNode | null; //自定义多选时当前选中的条目图标
-  render?: (item: OptionType, value: any[]) => React.ReactNode; //options内容
-}
-export interface ModeConfig {
-  multiple?: ModeConfigItem;
-  tags?: ModeConfigItem;
-}
-export interface HSelectProps
-  extends Omit<SelectProps, "options" | "placeholder"> {
-  style?: React.CSSProperties;
-  request?: PromiseFnResult<any, OptionType[]>;
-  manual?: boolean;
-  modeConfig?: ModeConfig;
-  filterProvider?: (item: any) => string; //筛选字段默认为label
-  serviceSearch?: boolean; //服务端搜索
-  options?: OptionType[];
-  noMatchItemRender?: RenderFn; //没有数据
-  allSelect?: boolean; //显示全选
-  addDispatchListener?: (key: string, fn: argsFn) => void;
-  addFormat?: (format: Record<string, addFormatItemModal>) => void;
-  placeholder?: string;
-  dispatch?: DispatchModal;
-}
-export interface FilterDataModal {
-  value: any;
-  index: number;
-}

package/src/components/Select/utils.ts

@@ -1,18 +0,0 @@
-export const itemOpMaker = (itemOp, fieldNames) => {
-  const { label, value: itemVal, ...oItemOp } = itemOp;
-  const { label: labelKey = "", value: valKey = "" } = fieldNames;
-  return {
-    [labelKey]: label,
-    [valKey]: itemVal,
-    ...oItemOp,
-  };
-};
-
-export const itemOpProvider = (itemOps, fieldNames) => {
-  if (Array.isArray(itemOps)) {
-    return itemOps.map((item) => {
-      return itemOpMaker(item, fieldNames);
-    });
-  }
-  return itemOpMaker(itemOps, fieldNames);
-};

package/src/components/Submit/components.tsx

@@ -1,57 +0,0 @@
-import { Button } from "antd";
-import { useFormContext } from "../Form/Context";
-import React from "react";
-import type {
-  ISubmitProps,
-  SubmitBarExtraType,
-} from "@/components/Submit/index";
-interface ControlFooterProps extends ISubmitProps {
-  action: SubmitBarExtraType;
-}
-function ResetBtn({ form, ...props }) {
-  return (
-    <Button
-      {...props}
-      onClick={() => {
-        form.resetFields();
-      }}
-    >
-      重置
-    </Button>
-  );
-}
-
-function SubBtn({
-  type = "primary",
-  form,
-  text = "提交",
-  loading,
-  ...props
-}: ISubmitProps) {
-  const { loading: formSubLoading = loading } = useFormContext();
-
-  return (
-    <Button
-      {...props}
-      type={type as any}
-      onClick={form.submit}
-      loading={formSubLoading}
-    >
-      {text}
-    </Button>
-  );
-}
-
-export const ControlFooter = ({ action, ...props }: ControlFooterProps) => {
-  const { form } = props;
-  if (action === "reset") {
-    return <ResetBtn {...props} />;
-  }
-  if (action === "submit") {
-    return <SubBtn {...props} />;
-  }
-  if (typeof action === "string") {
-    return <>{action}</>;
-  }
-  return React.cloneElement(action as any, { form });
-};

package/src/components/Submit/hooks.ts

@@ -1,31 +0,0 @@
-import type {
-  ISubmitProps,
-  SubmitBarExtraType,
-} from "@/components/Submit/index";
-import { useMemo } from "react";
-
-const getBarComKeyList = (extraList: SubmitBarExtraType[]) => {
-  return extraList.map((item, index) => {
-    return {
-      action: item,
-      key: `${index}`,
-    };
-  });
-};
-
-export const useBarSortList = (
-  props: Pick<ISubmitProps, "reset" | "extraList">
-) => {
-  const { extraList, reset = false } = props;
-  const list = useMemo(() => {
-    if (!extraList) {
-      const defaultList: SubmitBarExtraType[] = reset
-        ? ["reset", "submit"]
-        : ["submit"];
-      return getBarComKeyList(defaultList);
-    }
-    return getBarComKeyList(extraList);
-  }, [extraList, reset]);
-
-  return list;
-};

package/src/components/Submit/index.tsx

@@ -1,33 +0,0 @@
-import { Row, Space } from "antd";
-import React from "react";
-import type { ButtonProps, FormInstance } from "antd/es";
-import { useBarSortList } from "./hooks";
-import { ControlFooter } from "./components";
-
-export type SubmitBarExtraType = "submit" | "reset" | React.ReactDOM;
-
-export interface ISubmitProps extends Omit<ButtonProps, "form"> {
-  text?: string;
-  form: FormInstance;
-  reset?: boolean;
-  position?: "start" | "end";
-  extraList?: SubmitBarExtraType[];
-}
-export default ({
-  position = "start",
-  reset,
-  extraList,
-  ...props
-}: ISubmitProps) => {
-  const barList = useBarSortList({ reset, extraList });
-
-  return (
-    <Row justify={position} style={{ width: "100%" }}>
-      <Space>
-        {barList?.map(({ action, key }) => {
-          return <ControlFooter {...props} key={key} action={action} />;
-        })}
-      </Space>
-    </Row>
-  );
-};

package/src/components/Switch/index.tsx

@@ -1,77 +0,0 @@
-import type { SwitchProps } from "antd";
-import { Space, Switch } from "antd";
-import React, { useMemo } from "react";
-import { useMatchConfigProps } from "../hooks";
-import type { ValueSwitchMapModal } from "../modal";
-import type { addFormatItemModal } from "../Form/modal";
-import HFormConnect from "../Form/HFormConnect";
-
-export interface HSwitchProps extends Omit<SwitchProps, "onChange"> {
-  valueMap?: ValueSwitchMapModal;
-  value?: any;
-  onChange?: (val: any) => void;
-  beforeText?: React.ReactNode;
-  addFormat?: (format: Record<string, addFormatItemModal>) => void;
-}
-const Index: React.FC<HSwitchProps> = ({
-  value,
-  onChange,
-  valueMap: propsValueSwitchMap,
-  children,
-  unCheckedChildren = "关闭",
-  checkedChildren = "开启",
-  beforeText,
-  addFormat,
-  ...props
-}) => {
-  const { valueSwitchMap = {} } = useMatchConfigProps({
-    valueSwitchMap: propsValueSwitchMap,
-  });
-  const swChecked = useMemo(() => {
-    const { open } = valueSwitchMap;
-    return value === open;
-  }, [value]);
-  const change = (checked) => {
-    let subVal = valueSwitchMap.close;
-    if (checked) {
-      subVal = valueSwitchMap.open;
-    }
-    onChange?.(subVal);
-  };
-  addFormat?.({
-    float: {
-      inputValue: (item, initValue) => {
-        const { close } = valueSwitchMap;
-        const { name: valueName = "" } = item;
-        let val = initValue[valueName];
-        if (typeof val === "undefined" || val === null) {
-          val = close;
-        }
-        return {
-          [valueName]: val,
-        };
-      },
-      outputValue: (item, outputValue) => {
-        const { name = "" } = item;
-        return {
-          [name]: outputValue[name],
-        };
-      },
-    },
-  });
-  return (
-    <Space>
-      {beforeText}
-      <Switch
-        checked={swChecked}
-        checkedChildren={checkedChildren}
-        unCheckedChildren={unCheckedChildren}
-        onChange={change}
-        {...props}
-      />
-      <span>{children}</span>
-    </Space>
-  );
-};
-
-export default HFormConnect(Index);

package/src/components/TDPicker/RangePicker.tsx

@@ -1,109 +0,0 @@
-import { DatePicker } from "antd";
-import type { HRangePickerProps } from "./modal";
-import {
-  useGetTimeKey,
-  useRangePickerTimeVal,
-  useRangeValueProvider,
-} from "./hooks";
-import React, { useMemo } from "react";
-import type { RangePickerProps } from "antd/es/date-picker";
-import { useMatchConfigProps } from "../hooks";
-import type { HItemProps } from "../Form/modal";
-import HFormConnect from "../Form/HFormConnect";
-
-const RangePicker = DatePicker.RangePicker as any;
-
-const HRangePicker: React.FC<HRangePickerProps> = ({
-  value,
-  onChange,
-  showTime = true,
-  format = "X",
-  valueMap,
-  ranges = true,
-  name,
-  addFormat,
-  disabledDate,
-  ...props
-}) => {
-  const { valueRangePickerValueMap = {}, dateRanges } = useMatchConfigProps({
-    valueRangePickerValueMap: valueMap,
-    dateRanges: undefined,
-  });
-  const dateMapKeys = useGetTimeKey({
-    valueMap: valueRangePickerValueMap,
-    name,
-  });
-  const paramsProvider = useRangeValueProvider({ valueMap: dateMapKeys });
-  const timeVal = useRangePickerTimeVal({
-    value,
-    format,
-    valueMap: dateMapKeys,
-  });
-  const defaultRanges = useMemo(() => {
-    if (!ranges) {
-      return null;
-    }
-    if (ranges === true) {
-      return dateRanges;
-    }
-    return ranges;
-  }, [ranges]); //默认
-  addFormat?.({
-    float: {
-      inputValue: (item, initValue) => {
-        const { name: valueName = "" } = item;
-        const resultObj = {};
-        Object.values(dateMapKeys).forEach((key) => {
-          if (initValue[key]) {
-            resultObj[key] = initValue[key];
-          }
-        });
-        const hasKeys = Object.keys(resultObj).length !== 0;
-        return {
-          [valueName]: hasKeys ? resultObj : null,
-        };
-      },
-      outputValue: (item, outputValue) => {
-        const { name: valueName = "" } = item;
-        const { [valueName]: itemVal = {} } = outputValue;
-        return {
-          ...itemVal,
-        };
-      },
-    },
-  });
-
-  const change = (val) => {
-    if (!format || !val) {
-      onChange?.(val);
-      return;
-    }
-    const subVal = val.map((item) => {
-      return item?.format(format) || null;
-    });
-    onChange?.(paramsProvider(subVal));
-  };
-  return (
-    <RangePicker
-      value={timeVal}
-      onChange={change}
-      showTime={showTime}
-      onCalendarChange={change}
-      ranges={defaultRanges as RangePickerProps["ranges"]}
-      disabledDate={(currentDate) => {
-        return !!disabledDate?.(currentDate, timeVal);
-      }}
-      {...props}
-    />
-  );
-};
-const Index = HFormConnect(HRangePicker);
-export default {
-  Component: Index,
-  placeholder: ({ label }: HItemProps) => {
-    return [`请选择开始${label}`, `请选择结束${label}`];
-  },
-  requiredErrMsg: ({ label }: HItemProps) => {
-    return `请选择${label}`;
-  },
-};

package/src/components/TDPicker/TimePicker.tsx

@@ -1,29 +0,0 @@
-import { TimePicker } from "antd";
-import type { HTimePickerProps } from "./modal";
-import { useTimePickerChange, useTimePickerValue } from "./hooks";
-import HFormConnect from "../Form/HFormConnect";
-
-const Index = ({
-  value,
-  format = "X",
-  onChange,
-  addFormat,
-  disabledDate,
-  ...props
-}: HTimePickerProps) => {
-  addFormat?.({});
-  const timeVal = useTimePickerValue({ value, format });
-  const change = useTimePickerChange({ value, format, onChange });
-
-  return (
-    <TimePicker
-      value={timeVal}
-      onChange={change}
-      disabledDate={(currentDate) => {
-        return !!disabledDate?.(currentDate, timeVal);
-      }}
-      {...props}
-    />
-  );
-};
-export default HFormConnect(Index);

package/src/components/TDPicker/hooks.ts

@@ -1,150 +0,0 @@
-import { useCallback, useMemo } from "react";
-import type { Moment, DurationInputArg2 } from "moment";
-import moment from "moment";
-import type { HRangePickerProps } from "./modal";
-import type { DateRangePickerValueMapModal } from "../modal";
-
-interface UseTimeValParams {
-  value?: any | [any, any];
-  format?: string;
-  valueMap?: DateRangePickerValueMapModal;
-}
-
-interface UseTimePickerValParams {
-  value?: any;
-  format?: string | DurationInputArg2;
-}
-interface UseTimeChangeParams {
-  format?: string;
-  onChange?: (time?: Moment | string | number) => void;
-  value?: any;
-}
-export const useTimeVal = ({ value, format }: UseTimeValParams) => {
-  return useMemo(() => {
-    if (!value || !format) {
-      return value;
-    }
-    return moment(value, format);
-  }, [value, format]);
-}; //单个时间
-
-export const useGetTimeKey = ({
-  valueMap = {},
-  name = "",
-}: HRangePickerProps) => {
-  const { start, end } = valueMap;
-  if (!start || !end) {
-    return {};
-  }
-  const startKey = typeof start === "string" ? start : start(name);
-  const endKey = typeof end === "string" ? end : end(name);
-  return {
-    start: startKey,
-    end: endKey,
-  };
-}; //构建格式
-export const useTimeChange = ({ format, onChange }: UseTimeChangeParams) => {
-  return useCallback(
-    (value) => {
-      if (!format) {
-        onChange?.(value);
-        return;
-      }
-      const subVal = value?.format(format);
-      onChange?.(subVal);
-    },
-    [format, onChange]
-  );
-}; //时间
-
-const formatMap = {
-  X: "s",
-  x: "ms",
-};
-export const useTimePickerValue = ({
-  value,
-  format,
-}: UseTimePickerValParams) => {
-  return useMemo(() => {
-    if (!value || !format) {
-      return value;
-    }
-    if (formatMap[format]) {
-      const timeStr = moment()
-        .startOf("days")
-        .add(value, formatMap[format] as DurationInputArg2)
-        .format("HH:mm:ss");
-      return moment(timeStr, "HH:mm:ss");
-    }
-    return moment(value, format);
-  }, [value, format]);
-}; //区间选择
-
-export const useTimePickerChange = ({
-  value,
-  format,
-  onChange,
-}: UseTimeChangeParams) => {
-  return useCallback(
-    (val) => {
-      if (!format || !val) {
-        onChange?.(val);
-        return;
-      }
-      if (formatMap[format]) {
-        const startTime = moment().startOf("days").format(format) as any;
-        const nowTime = val.format(format);
-        onChange?.(nowTime - startTime);
-        return;
-      }
-      const subVal = val?.format(format);
-      onChange?.(subVal);
-    },
-    [format, onChange, value]
-  );
-}; //时分秒
-
-export const useRangeValueProvider = ({ valueMap = {} }: HRangePickerProps) => {
-  return (val: any[]) => {
-    const { start, end } = valueMap;
-    if (!start || !end) {
-      return val;
-    }
-    return {
-      [start as string]: val[0],
-      [end as string]: val[1],
-    };
-  };
-}; //格式转化
-
-export const useRangePickerTimeVal = ({
-  value,
-  format,
-  valueMap = {},
-}: UseTimeValParams) => {
-  return useMemo(() => {
-    if (!value || !format) {
-      return value;
-    }
-    if (!Array.isArray(value)) {
-      const { start, end } = valueMap;
-      if (!start || !end) {
-        console.error("日期value格式错误!");
-        return;
-      }
-      const { [start as string]: startTime, [end as string]: endTime } = value;
-      if (!startTime && !endTime) {
-        return [];
-      }
-      const startMoment = startTime && moment(startTime, format);
-      const endMoment = endTime && moment(endTime, format);
-      return [startMoment, endMoment];
-    }
-    return value.map((item) => {
-      if (!item) {
-        return item;
-      }
-      return moment(item, format);
-    });
-  }, [value, format, valueMap]);
-}; //初始化时间格式转化

package/src/components/TDPicker/index.tsx

@@ -1,33 +0,0 @@
-import { DatePicker } from "antd";
-import type { HDatePickerProps } from "./modal";
-import { useTimeChange, useTimeVal } from "./hooks";
-import React from "react";
-import HFormConnect from "../Form/HFormConnect";
-const Picker = DatePicker as any;
-const Index: React.FC<HDatePickerProps> = ({
-  value,
-  onChange,
-  showTime = true,
-  format = "X",
-  disabledDate,
-  addFormat,
-  style = { width: "100%" },
-  ...props
-}) => {
-  addFormat?.({});
-  const timeVal = useTimeVal({ value, format });
-  const change = useTimeChange({ format, onChange });
-  return (
-    <Picker
-      value={timeVal}
-      onChange={change}
-      showTime={showTime}
-      style={style}
-      disabledDate={(currentDate) => {
-        return !!disabledDate?.(currentDate, timeVal);
-      }}
-      {...props}
-    />
-  );
-};
-export default HFormConnect(Index);