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

package/src/components/Form/modal.ts

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

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

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

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

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

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

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

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

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

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

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

package/src/components/Input/index.tsx

@@ -1,26 +0,0 @@
-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}
-    />
-  );
-};