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

package/src/components/Form/modal.ts

@@ -0,0 +1,206 @@
+import type {
+  CascaderProps,
+  FormInstance,
+  FormItemProps,
+  FormProps,
+} from "antd";
+import type { HCheckboxProps } from "../CheckboxGroup/modal";
+import type React from "react";
+import type {
+  HButtonProps,
+  HInputProps,
+  HSelectInputProps,
+} from "../Input/modal";
+import type { HRadioGroupProps } from "../RadioGroup";
+import type { HSelectProps } from "../Select/modal";
+import type { ButtonProps } from "antd/es";
+import type { HSwitchProps } from "../Switch";
+import type {
+  HDatePickerProps,
+  HRangePickerProps,
+  HTimePickerProps,
+} from "../TDPicker/modal";
+import type { TextAreaProps } from "antd/es/input";
+import type { IUpLoadProps } from "../Upload/modal";
+import type { SelectProps } from "antd";
+import type { RangePickerProps } from "antd/es/date-picker";
+import type {
+  PromiseFnResult,
+  ValueCheckMapModal,
+  ValueSwitchMapModal,
+  DateRangePickerValueMapModal,
+} from "../modal";
+import type { ForwardedRef } from "react";
+import type { DataFnProvider } from "../modal";
+import type { ColProps } from "antd/lib/grid/col";
+import type { Gutter } from "antd/lib/grid/row";
+
+type RenderFun = (
+  props: HItemProps,
+  node: React.ReactNode,
+  form: FormInstance
+) => React.ReactNode;
+export type ItemPropsType =
+  | HCheckboxProps
+  | HInputProps
+  | HSelectInputProps
+  | HButtonProps
+  | HRadioGroupProps
+  | HSelectProps
+  | ButtonProps
+  | HSwitchProps
+  | HDatePickerProps
+  | HRangePickerProps
+  | HTimePickerProps
+  | TextAreaProps
+  | IUpLoadProps
+  | CascaderProps<any>;
+
+export interface HoverModal {
+  text?: string;
+  icon?: React.ReactNode;
+}
+type HelperModal = (form: HFormInstance) => React.ReactNode | string;
+
+export type HideModal = (form: HFormInstance) => boolean;
+
+export type AddDispatchListenerFn = (action: ActionModal, fn: argsFn) => void;
+export type DispatchSourceDataModal = Record<
+  string,
+  Record<string, DispatchModal>
+>;
+export interface DispatchModal<T = string | string[]> {
+  fnKey?: string;
+  dependencies?: T;
+  manual?: boolean;
+  reset?: boolean;
+}
+export type LabelAlignModal = "left" | "right" | "topLeft" | "topRight" | "top";
+
+export interface HItemProps extends Omit<FormItemProps, "name"|"labelAlign"> {
+  type?: string;
+  itemProps?: ItemPropsType;
+  render?: RenderFun;
+  helper?: HelperModal | string;
+  hover?: string | HoverModal;
+  // formItems?: HItemProps[]; 保留感觉没必要
+  labelWidth?: number;
+  hide?: boolean | HideModal;
+  placeholder?: string | string[];
+  // formatKeys?: string[];
+  name?: string;
+  dispatch?: DispatchModal;
+  itemSpan?: ColProps;
+  hideLabel?: boolean;
+  labelAlign?: LabelAlignModal;
+}
+export interface HFormProps<T = any, R = any>
+  extends Omit<FormProps, "form" | "onFinish"|"labelAlign"> {
+  configData: HItemProps[];
+  labelWidth?: number;
+  request?: (values: T, params?: any) => Promise<R>;
+  infoRequest?: PromiseFnResult;
+  valueType?: string;
+  form?: HFormInstance;
+  params?: any;
+  onFinish?: (values: T, params?: any) => void;
+  itemSpan?: ColProps;
+  hideLabel?: boolean;
+  gutter?: Gutter | [Gutter, Gutter];
+  submitLoading?: boolean;
+  labelAlign?: LabelAlignModal;
+  formItemStyle?:React.CSSProperties;
+  itemProps?:ItemPropsType
+}
+export interface HFormItemProps extends HItemProps {
+  required?: boolean;
+  value?: any;
+  onChange?: (val: any, item: any) => void;
+  itemSpan?: ColProps;
+  initValueProvider?: AddValueFormat;
+  subProvider?: AddValueFormat;
+  labelAlign?: LabelAlignModal;
+}
+export type argsFn = (...args: any[]) => void;
+export interface FormContextProps {
+  loading?: boolean;
+  form: HFormInstance;
+  valueType?: string;
+}
+interface ConfigUploadProps {
+  exFiles?: string[];
+  maxSize?: number;
+  request?: PromiseFnResult;
+}
+export type ComponentModal =
+  | React.FunctionComponent<any>
+  | React.ComponentClass<any>
+  | React.ForwardRefExoticComponent<any>;
+
+export interface ConfigComponentModal {
+  Component: ComponentModal;
+  placeholder?: DataFnProvider<HItemProps>;
+  requiredErrMsg?: DataFnProvider<HItemProps>;
+}
+export type DefaultComponentItemModal = ComponentModal | ConfigComponentModal;
+export type DefaultComponentModal = Record<string, DefaultComponentItemModal>;
+export interface IFormConfigContextProps {
+  fieldNames?: SelectProps["fieldNames"];
+  valueCheckMap?: ValueCheckMapModal;
+  valueSwitchMap?: ValueSwitchMapModal;
+  valueRangePickerValueMap?: DateRangePickerValueMapModal;
+  dateRanges?: RangePickerProps["ranges"];
+  uploadProps?: ConfigUploadProps;
+  defaultComponent?: DefaultComponentModal;
+  formItemStyle?:React.CSSProperties;
+  itemProps?:ItemPropsType
+}
+interface ActionModal {
+  key: string;
+  name?: string;
+  dispatch?: DispatchModal;
+}
+export interface HFormInstance extends FormInstance {
+  addFormat: (name: string, formats?: FormatItemModal) => void;
+  initValues: VoidFunction;
+  formatValues: (
+    values?: Record<string, any>,
+    formatKey?: string
+  ) => Record<string, any>;
+  dispatch: (action: ActionModal, ...args: any[]) => void;
+  outputValues: (values?: Record<string, any>) => Record<string, any>;
+  addDispatchListener: AddDispatchListenerFn;
+  removeDispatchListener: (action?: ActionModal, fn?: argsFn) => void;
+  reload: PromiseFnResult;
+  clear: VoidFunction;
+  resetFieldsInitValue: VoidFunction;
+}
+
+export interface ConnectConfigModal {
+  format?: Record<string, addFormatItemModal>;
+}
+
+type ValueFormat = (value: Record<string, any>) => Record<string, any>;
+
+export interface FormatItemModal {
+  inputValue?: ValueFormat;
+  outputValue?: ValueFormat;
+}
+
+type AddValueFormat = (
+  item: HFormItemProps,
+  value: Record<string, any>
+) => Record<string, any>;
+
+export interface addFormatItemModal {
+  inputValue: AddValueFormat;
+  outputValue: AddValueFormat;
+}
+
+export interface ConnectResultProps extends HFormItemProps {
+  addFormat?: (format: Record<string, addFormatItemModal>) => void;
+  addDispatchListener?: (key: string, fn: argsFn) => void;
+  ref?: ForwardedRef<any>;
+  value?: any;
+  onChange?: (value: any, item?: any) => void;
+}

package/src/components/Input/ButtonInput.tsx

@@ -0,0 +1,47 @@
+import { Input, Button } from "antd";
+import React from "react";
+import { useRequest } from "ahooks";
+import type { HButtonInputProps } from "./modal";
+
+const Index: React.FC<HButtonInputProps> = ({
+  buttonProps = {},
+  value,
+  onChange,
+  children,
+  request,
+  ...props
+}) => {
+  const { onClick, type = "primary", ...oProps } = buttonProps;
+  const { run, loading } = useRequest(
+    (val) => {
+      return request?.(val);
+    },
+    { manual: true }
+  );
+  const change = (e) => {
+    onChange?.(e.target.value);
+  };
+  const click = async () => {
+    let result = value;
+    if (request) {
+      result = await run(value);
+    }
+    onClick?.(result, onChange);
+  };
+
+  return (
+    <Input.Group compact style={{ display: "flex" }}>
+      <Input {...props} style={{ flex: 1 }} value={value} onChange={change} />
+      <Button
+        {...oProps}
+        type={type}
+        onClick={click}
+        loading={loading}
+        style={{ marginLeft: 4 }}
+      >
+        {children}
+      </Button>
+    </Input.Group>
+  );
+};
+export default Index;

package/src/components/Input/ColorInput/Picker.tsx

@@ -0,0 +1,18 @@
+import { SketchPicker } from "react-color";
+import type { HInputProps } from "@/components/Input/modal";
+import { presetColors } from "./data";
+import { useClassName } from "../../hooks";
+
+export default ({ value, onChange }: HInputProps) => {
+  const classname = useClassName("hw-color-input-picker");
+  return (
+    <SketchPicker
+      width={"250px"}
+      styles={{}}
+      presetColors={presetColors}
+      color={value}
+      onChangeComplete={onChange}
+      className={classname}
+    />
+  );
+};

package/src/components/Input/ColorInput/data.ts

@@ -0,0 +1,102 @@
+export const presetColors = [
+  "#fff1f0",
+  "#ffccc7",
+  "#ffa39e",
+  "#ff7875",
+  "#ff4d4f",
+  "#f5222d",
+  "#cf1322",
+  "#a8071a",
+  "#820014",
+  "#5c0011",
+  "#fff7e6",
+  "#ffe7ba",
+  "#ffd591",
+  "#ffc069",
+  "#ffa940",
+  "#fa8c16",
+  "#d46b08",
+  "#ad4e00",
+  "#873800",
+  "#612500",
+  "#feffe6",
+  "#ffffb8",
+  "#fffb8f",
+  "#fff566",
+  "#ffec3d",
+  "#fadb14",
+  "#d4b106",
+  "#ad8b00",
+  "#876800",
+  "#614700",
+  "#f6ffed",
+  "#d9f7be",
+  "#b7eb8f",
+  "#95de64",
+  "#73d13d",
+  "#52c41a",
+  "#389e0d",
+  "#237804",
+  "#135200",
+  "#092b00",
+  "#e6fffb",
+  "#b5f5ec",
+  "#87e8de",
+  "#5cdbd3",
+  "#36cfc9",
+  "#13c2c2",
+  "#08979c",
+  "#006d75",
+  "#00474f",
+  "#002329",
+  "#e6f7ff",
+  "#bae7ff",
+  "#91d5ff",
+  "#69c0ff",
+  "#40a9ff",
+  "#1890ff",
+  "#096dd9",
+  "#0050b3",
+  "#003a8c",
+  "#002766",
+  "#f0f5ff",
+  "#d6e4ff",
+  "#adc6ff",
+  "#85a5ff",
+  "#597ef7",
+  "#2f54eb",
+  "#1d39c4",
+  "#10239e",
+  "#061178",
+  "#030852",
+  "#f9f0ff",
+  "#efdbff",
+  "#d3adf7",
+  "#b37feb",
+  "#9254de",
+  "#722ed1",
+  "#531dab",
+  "#391085",
+  "#22075e",
+  "#120338",
+  "#fff0f6",
+  "#ffd6e7",
+  "#ffadd2",
+  "#ff85c0",
+  "#f759ab",
+  "#eb2f96",
+  "#c41d7f",
+  "#9e1068",
+  "#780650",
+  "#520339",
+  "#ffffff",
+  "#fafafa",
+  "#f5f5f5",
+  "#f0f0f0",
+  "#d9d9d9",
+  "#bfbfbf",
+  "#8c8c8c",
+  "#595959",
+  "#434343",
+  "#262626",
+];

package/src/components/Input/ColorInput/index.less

@@ -0,0 +1,10 @@
+@import "../../styles/local.less";
+.@{ant-prefix}-hw-color-box {
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.@{ant-prefix}-hw-color-input-picker {
+  box-shadow: 0 0 0 0 !important;
+}

package/src/components/Input/ColorInput/index.tsx

@@ -0,0 +1,58 @@
+import type { HInputProps } from "@/components/Input/modal";
+import { Input, Popover } from "antd";
+import Picker from "./Picker";
+import { useMemo } from "react";
+import { useClassName } from "../../hooks";
+export default ({
+  value,
+  onChange,
+  defaultColor = "rgba(0,0,0,1)",
+  ...props
+}: HInputProps) => {
+  const classname = useClassName("hw-color-box");
+  const inputVal = value?.trim();
+  const pickerValue = useMemo(() => {
+    const matchVal = inputVal || defaultColor;
+    if (typeof matchVal === "string") {
+      if (matchVal.startsWith("#")) {
+        return matchVal;
+      }
+      const rgbaRegular = /((rgba\())(?<rgba>.*?)(?=(\)))/;
+      const result = matchVal.match(rgbaRegular);
+      if (result?.groups?.rgba) {
+        const rgbas = result.groups.rgba.split(",");
+        return {
+          r: Number(rgbas[0]),
+          g: Number(rgbas[1]),
+          b: Number(rgbas[2]),
+          a: Number(rgbas[3]),
+        };
+      }
+    }
+    return "";
+  }, [inputVal]);
+  const colorChange = (val) => {
+    const { rgb } = val;
+    const text = `rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`;
+    onChange?.(text);
+  };
+  return (
+    <Input
+      {...props}
+      value={value}
+      onChange={onChange}
+      suffix={
+        <Popover
+          trigger="click"
+          content={<Picker value={pickerValue} onChange={colorChange} />}
+          placement="topLeft"
+        >
+          <div
+            style={{ backgroundColor: inputVal || defaultColor }}
+            className={classname}
+          />
+        </Popover>
+      }
+    />
+  );
+};

package/src/components/Input/InputNumber.tsx

@@ -0,0 +1,5 @@
+import type { InputNumberProps } from "antd";
+import { InputNumber } from "antd";
+export default ({ style = { width: "100%" }, ...props }: InputNumberProps) => {
+  return <InputNumber style={style} {...props} />;
+};

package/src/components/Input/SelectInput.tsx

@@ -0,0 +1,75 @@
+import { Input } from "antd";
+import type { HSelectInputProps } from "./modal";
+import HSelect from "../Select";
+import { defaultSelectStyle, defaultValueName } from "./defaultConfig";
+import HFormConnect from "../Form/HFormConnect";
+export enum SelectInputType {
+  input,
+  select,
+}
+export const Index = ({
+  selectProps = {},
+  value = {},
+  onChange,
+  valueName = defaultValueName,
+  addFormat,
+  addDispatchListener,
+  ...props
+}: HSelectInputProps) => {
+  const { input = "", select = "" } = valueName;
+  const { [input]: inputVal, [select]: selectVal } = value;
+  const {
+    style = defaultSelectStyle,
+    placeholder = "请选择",
+    ...sProps
+  } = selectProps;
+  const change = (val, key) => {
+    const newVal = { ...value };
+    newVal[key] = val;
+    const type = key === input ? SelectInputType.input : SelectInputType.select;
+    onChange?.(newVal, type);
+  };
+  addFormat?.({
+    float: {
+      inputValue: (item, initValue) => {
+        const { name = "" } = item;
+        const resultObj = {};
+        Object.values(valueName).forEach((key) => {
+          resultObj[key] = initValue[key];
+        });
+        return {
+          [name]: resultObj,
+        };
+      },
+      outputValue: (item, outputValue) => {
+        const { name = "" } = item;
+        const { [name]: itemVal = {} } = outputValue;
+        const newItemVal = { [itemVal[select]]: itemVal[input] };
+        return {
+          ...newItemVal,
+        };
+      },
+    },
+  });
+  return (
+    <Input
+      value={inputVal}
+      onChange={(e) => {
+        change(e.target.value, input);
+      }}
+      addonBefore={
+        <HSelect
+          {...sProps}
+          style={style}
+          placeholder={placeholder}
+          value={selectVal}
+          onChange={(val) => {
+            change(val, select);
+          }}
+        />
+      }
+      {...props}
+    />
+  );
+};
+export default HFormConnect(Index);

package/src/components/Input/TrimInput.tsx

@@ -0,0 +1,26 @@
+import Input from "./index";
+import type { HInputProps } from "./modal";
+import HFormConnect from "../Form/HFormConnect";
+
+const Index = ({ addFormat, ...props }: HInputProps) => {
+  addFormat?.({
+    float: {
+      inputValue: (item, initValue) => {
+        const { name: valueName = "" } = item;
+        return {
+          [valueName]: initValue[valueName],
+        };
+      },
+      outputValue: (item, outputValue) => {
+        const { name = "" } = item;
+        const { [name]: itemVal } = outputValue;
+        return {
+          [name]: itemVal?.trim(),
+        };
+      },
+    },
+  });
+  return <Input {...props} />;
+};
+
+export default HFormConnect(Index);

package/src/components/Input/VerificationCodeInput.tsx

@@ -0,0 +1,74 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import ButtonInput from "./ButtonInput";
+import { useRequest } from "ahooks";
+import type { HFormInstance } from "../Form/modal";
+import type { InputProps } from "antd";
+export interface HVerificationCodeInputProps extends Omit<InputProps, "form"> {
+  request?: (value: any) => Promise<any>;
+  form?: HFormInstance;
+}
+export default ({
+  value,
+  request,
+  form,
+  onChange,
+  ...props
+}: HVerificationCodeInputProps) => {
+  const [countdown, setCountdown] = useState<number>(0);
+  const timer = useMemo<{ time: any }>(() => {
+    return {
+      time: undefined,
+    };
+  }, []);
+  const timerControl = useCallback(() => {
+    timer.time = setInterval(() => {
+      setCountdown((oldVal = 0) => {
+        const newVal = oldVal - 1;
+        if (newVal <= 0) {
+          clearInterval(timer.time);
+        }
+        return newVal;
+      });
+    }, 1000);
+  }, []);
+  const { run, loading } = useRequest(
+    async () => {
+      if (!request) {
+        return Promise.resolve({});
+      }
+      const val = form?.getFieldsValue();
+      const result = await request?.(val);
+      if (result) {
+        setCountdown(60);
+      }
+      timerControl();
+      return result;
+    },
+    { manual: true }
+  );
+  useEffect(() => {
+    return () => {
+      clearInterval(timer.time);
+    };
+  }, []);
+  const text = () => {
+    if (!countdown) {
+      return "获取验证码";
+    }
+    let countdownStr = `${countdown}`;
+    if (countdown < 10) {
+      countdownStr = `0${countdownStr}`;
+    }
+    return `${countdownStr}秒后重新获取`;
+  };
+  return (
+    <ButtonInput
+      value={value}
+      onChange={onChange}
+      buttonProps={{ onClick: run, loading, disabled: !!countdown }}
+      {...props}
+    >
+      {text()}
+    </ButtonInput>
+  );
+};

package/src/components/Input/defaultConfig.ts

@@ -0,0 +1,8 @@
+export const defaultSelectStyle = {
+  width: 128,
+};
+
+export const defaultValueName = {
+  input: "input",
+  select: "select",
+};

package/src/components/Input/index.tsx

@@ -0,0 +1,26 @@
+import { Input, message } from "antd";
+import type { HInputProps } from "./modal";
+import { CopyOutlined } from "@ant-design/icons";
+// @ts-ignore
+import { CopyToClipboard } from "react-copy-to-clipboard";
+const CopyDom = ({ value }: HInputProps) => {
+  return (
+    <CopyToClipboard
+      text={value}
+      onCopy={() => {
+        message.success("复制成功!");
+      }}
+    >
+      <CopyOutlined />
+    </CopyToClipboard>
+  );
+};
+export default ({ copy, value, addonAfter, ...props }: HInputProps) => {
+  return (
+    <Input
+      {...props}
+      value={value}
+      addonAfter={copy ? <CopyDom value={value} /> : addonAfter}
+    />
+  );
+};

package/src/components/Input/modal.ts

@@ -0,0 +1,40 @@
+import type { ButtonProps, InputProps } from "antd";
+import type { HSelectProps } from "../Select/modal";
+import type { SelectInputType } from "./SelectInput";
+import type { PromiseFnResult } from "../modal";
+import type { addFormatItemModal } from "../Form/modal";
+import type { AddDispatchListenerFn } from "../Form/modal";
+export interface HInputProps<V = any>
+  extends Omit<InputProps, "onChange" | "value"> {
+  onChange?: (value: V) => void;
+  value?: V;
+  defaultColor?: string;
+  copy?: boolean;
+  addFormat?: (config: Record<string, addFormatItemModal>) => void;
+}
+
+interface ValueNameModal {
+  input?: string;
+  select?: string;
+}
+
+export interface HSelectInputProps
+  extends Omit<HInputProps, "value" | "onChange"> {
+  selectProps?: HSelectProps;
+  value?: Record<string, any>;
+  onChange?: (value: Record<string, any>, type: SelectInputType) => void;
+  valueName?: ValueNameModal;
+  addFormat?: (config: Record<string, addFormatItemModal>) => void;
+  addDispatchListener?: AddDispatchListenerFn;
+  subParams?: (formatValue: Record<string, any>) => any;
+}
+export interface HButtonProps extends Omit<ButtonProps, "onClick"> {
+  onClick: (
+    value: string | readonly string[] | number | undefined,
+    onChange?: (val: any) => void
+  ) => void;
+}
+export interface HButtonInputProps extends HInputProps {
+  buttonProps?: HButtonProps;
+  request?: PromiseFnResult;
+}