@hw-component/form 0.0.3-beta-v4 → 0.0.3-beta-v6

package/src/components/Form/hooks/useInitConfigData.tsx

@@ -1,18 +1,24 @@
 import React, { useMemo } from "react";
 import type {
-  FormItemWithRender,
   HFormItemProps,
   HFormProps,
   HItemProps,
-} from "@/components/Form/modal";
-import FormConfig, { placeholderConfig } from "../config";
+  DefaultComponentModal,
+} from "../modal";
+import { placeholderConfig } from "../config";
 import type { Rule } from "rc-field-form/lib/interface";
 import type { FormInstance } from "antd";
+import { useDefaultComponents } from "../hooks";
+import type { ConfigComponentModal } from "../modal";
 
-const mathRequired = (configItem: HFormItemProps, form: FormInstance) => {
+const mathRequired = (
+  configItem: HFormItemProps,
+  form: FormInstance,
+  defaultComponents: DefaultComponentModal
+) => {
   const { required, placeholder, rules, type = "input" } = configItem;
   let resultRequired = false;
-  const dom = FormConfig[type];
+  const dom = defaultComponents[type];
   const resultRules = rules?.map((item) => {
     let eachItem = item;
     if (typeof item === "function") {
@@ -24,12 +30,15 @@ const mathRequired = (configItem: HFormItemProps, form: FormInstance) => {
       resultRequired = itemRequired;
     }
     if (itemRequired && !message) {
+      let msg = placeholder;
+      const itemDom = dom as ConfigComponentModal;
+      if (itemDom?.requiredErrMsg) {
+        msg = itemDom.requiredErrMsg(configItem);
+      }
       return {
         ...eachItem,
         required: itemRequired,
-        message: !!dom?.requiredErrMsg
-          ? dom.requiredErrMsg(configItem)
-          : placeholder,
+        message: msg,
       };
     }
     return eachItem;
@@ -39,50 +48,49 @@ const mathRequired = (configItem: HFormItemProps, form: FormInstance) => {
     rules: resultRules as Rule[],
   };
 }; //是否必填
-const matchDefaultPlaceholder = (props: HFormItemProps) => {
+const matchDefaultPlaceholder = (
+  props: HFormItemProps,
+  defaultComponents: DefaultComponentModal
+) => {
   const { label, placeholder, type = "input" } = props;
-  const dom = FormConfig[type];
+  const dom = defaultComponents[type];
   if (placeholder) {
     return placeholder;
   }
-  if (dom?.placeholder) {
-    return dom.placeholder(props);
+  const itemDom = dom as ConfigComponentModal;
+  if (itemDom?.placeholder) {
+    return itemDom.placeholder(props);
   }
   if (placeholderConfig.inputType.indexOf(type) !== -1) {
     return `请输入${label}`;
   }
   return `请选择${label}`;
 }; //自动构建
-const defaultRenderMaker = (props: HFormItemProps) => {
-  const { render, type = "input", itemProps = {}, ...componentProps } = props;
-  const dom = FormConfig[type];
-  return (form: FormInstance) => {
-    const Component = !!dom?.Component ? dom.Component : dom;
-    const node = Component && (
-      <Component {...componentProps} {...itemProps} form={form} />
-    );
-    if (render) {
-      const resultNode=render(props, node, form);
-      return React.cloneElement<any>((resultNode as any),{...componentProps,...itemProps,form})
-    }
-    return node;
-  };
-};
 
-const defaultPlaceholderPropsMaker = (props: HFormItemProps) => {
-  const placeholder = matchDefaultPlaceholder(props);
+const defaultPlaceholderPropsMaker = (
+  props: HFormItemProps,
+  defaultComponents: DefaultComponentModal
+) => {
+  const placeholder = matchDefaultPlaceholder(props, defaultComponents);
   return {
     ...props,
     placeholder,
-    render: defaultRenderMaker({ ...props, placeholder }),
   };
 }; //组装参数
 const itemControl = (
   item: HItemProps,
-  form: FormInstance
-): FormItemWithRender => {
-  const { render, ...defaultProps } = defaultPlaceholderPropsMaker(item);
-  const { rules, required } = mathRequired(defaultProps, form);
+  form: FormInstance,
+  defaultComponents: DefaultComponentModal
+): HFormItemProps => {
+  const { render, ...defaultProps } = defaultPlaceholderPropsMaker(
+    item,
+    defaultComponents
+  );
+  const { rules, required } = mathRequired(
+    defaultProps,
+    form,
+    defaultComponents
+  );
   return {
     ...defaultProps,
     required,
@@ -93,9 +101,10 @@ const itemControl = (
 type InitConfigModal = Required<Pick<HFormProps, "configData" | "form">>;
 
 export default ({ configData, form }: InitConfigModal) => {
+  const defaultComponents = useDefaultComponents();
   return useMemo(() => {
     return configData.map((item) => {
-      return itemControl(item, form);
+      return itemControl(item, form, defaultComponents);
     });
   }, [configData]);
 };

package/src/components/Form/modal.ts

@@ -1,22 +1,22 @@
 import type { FormInstance, FormItemProps, FormProps } from "antd";
-import type { HCheckboxProps } from "@/components/CheckboxGroup/modal";
+import type { HCheckboxProps } from "../CheckboxGroup/modal";
 import type React from "react";
 import type {
   HButtonProps,
   HInputProps,
   HSelectInputProps,
-} from "@/components/Input/modal";
-import type { HRadioGroupProps } from "@/components/RadioGroup";
-import type { HSelectProps } from "@/components/Select/modal";
+} from "../Input/modal";
+import type { HRadioGroupProps } from "../RadioGroup";
+import type { HSelectProps } from "../Select/modal";
 import type { ButtonProps } from "antd/es";
-import type { HSwitchProps } from "@/components/Switch";
+import type { HSwitchProps } from "../Switch";
 import type {
   HDatePickerProps,
   HRangePickerProps,
   HTimePickerProps,
-} from "@/components/TDPicker/modal";
+} from "../TDPicker/modal";
 import type { TextAreaProps } from "antd/es/input";
-import type { IUpLoadProps } from "@/components/Upload/modal";
+import type { IUpLoadProps } from "../Upload/modal";
 import type { SelectProps } from "antd";
 import type { RangePickerProps } from "antd/es/date-picker";
 import type {
@@ -26,6 +26,7 @@ import type {
   DateRangePickerValueMapModal,
 } from "../modal";
 import type { ForwardedRef } from "react";
+import type { DataFnProvider } from "../modal";
 type RenderFun = (
   props: HItemProps,
   node: React.ReactNode,
@@ -70,15 +71,16 @@ export interface HItemProps extends Omit<FormItemProps, "name"> {
   name?: string;
 }
 
-export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form"|"onFinish"> {
+export interface HFormProps<T = any, R = any>
+  extends Omit<FormProps, "form" | "onFinish"> {
   configData: HItemProps[];
   labelWidth?: number;
-  request?: (values:T,params?:any)=>Promise<R>;
+  request?: (values: T, params?: any) => Promise<R>;
   infoRequest?: PromiseFnResult;
   valueType?: string;
   form?: HFormInstance;
   params?: any;
-  onFinish?:(values:T,params?:any)=>void;
+  onFinish?: (values: T, params?: any) => void;
 }
 
 export interface HFormItemProps extends HItemProps {
@@ -86,9 +88,6 @@ export interface HFormItemProps extends HItemProps {
   value?: any;
   onChange?: (val: any, item: any) => void;
 }
-export interface FormItemWithRender extends Omit<HFormItemProps, "render"> {
-  render: (form: HFormInstance) => React.ReactNode;
-}
 export type argsFn = (...args: any[]) => void;
 export interface FormContextProps {
   loading?: boolean;
@@ -100,7 +99,18 @@ interface ConfigUploadProps {
   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;
@@ -108,6 +118,7 @@ export interface IFormConfigContextProps {
   valueRangePickerValueMap?: DateRangePickerValueMapModal;
   dateRanges?: RangePickerProps["ranges"];
   uploadProps?: ConfigUploadProps;
+  defaultComponent?: DefaultComponentModal;
 }
 interface ActionModal {
   key: string;
@@ -124,7 +135,7 @@ export interface HFormInstance extends FormInstance {
   outputValues: (values?: Record<string, any>) => Record<string, any>;
   addDispatchListener: AddDispatchListenerFn;
   removeDispatchListener: (action?: ActionModal, fn?: argsFn) => void;
-  reload:PromiseFnResult;
+  reload: PromiseFnResult;
 }
 
 export interface ConnectConfigModal {
@@ -138,14 +149,14 @@ export interface FormatItemModal {
   outputValue: ValueFormat;
 }
 
-type addValueFormat = (
+type AddValueFormat = (
   item: HFormItemProps,
   value: Record<string, any>
 ) => Record<string, any>;
 
 export interface addFormatItemModal {
-  inputValue: addValueFormat;
-  outputValue: addValueFormat;
+  inputValue: AddValueFormat;
+  outputValue: AddValueFormat;
 }
 
 export interface ConnectResultProps extends HFormItemProps {

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,48 @@
+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, ...props }: HInputProps) => {
+  const classname = useClassName("hw-color-box");
+  const pickerValue = useMemo(() => {
+    if (typeof value === "string") {
+      if (value.startsWith("#")) {
+        return value;
+      }
+      const rgbaRegular = /(?<=(rgba\())(?<rgba>.*?)(?=(\)))/;
+      const result = value.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 "";
+  }, [value]);
+  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: value }} className={classname} />
+        </Popover>
+      }
+    />
+  );
+};

package/src/components/Input/modal.ts

@@ -4,8 +4,11 @@ import type { SelectInputType } from "./SelectInput";
 import type { PromiseFnResult } from "../modal";
 import type { addFormatItemModal } from "../Form/modal";
 import type { AddDispatchListenerFn } from "../Form/modal";
-
-export type HInputProps = InputProps;
+export interface HInputProps<V = any>
+  extends Omit<InputProps, "onChange" | "value"> {
+  onChange?: (value: V) => void;
+  value?: V;
+}
 
 interface ValueNameModal {
   input?: string;

package/src/components/Select/hooks/changeHooks.tsx

@@ -138,6 +138,10 @@ export const useValueChange = (params: PartialHSelectProps) => {
     onChange(newChangeVal, subItemOps);
   };
   useEffect(() => {
+    if (mode === "tags") {
+      setVal(value);
+      return;
+    }
     if (options && value) {
       setVal((oldVale) => {
         return matchNotFind(params, oldVale);

package/src/components/TDPicker/RangePicker.tsx

@@ -11,7 +11,7 @@ import { useMatchConfigProps } from "../hooks";
 import type { HItemProps } from "../Form/modal";
 import HFormConnect from "../Form/HFormConnect";
 
-const { RangePicker } = DatePicker;
+const RangePicker = DatePicker.RangePicker as any;
 
 const HRangePicker: React.FC<HRangePickerProps> = ({
   value,

package/src/components/TDPicker/index.tsx

@@ -1,22 +1,19 @@
 import { DatePicker } from "antd";
 import type { HDatePickerProps } from "./modal";
 import { useTimeChange, useTimeVal } from "./hooks";
-
-export default ({
+import React from "react";
+const Picker = DatePicker as any;
+const Index: React.FC<HDatePickerProps> = ({
   value,
   onChange,
   showTime = true,
   format = "X",
   ...props
-}: HDatePickerProps) => {
+}) => {
   const timeVal = useTimeVal({ value, format });
   const change = useTimeChange({ format, onChange });
   return (
-    <DatePicker
-      value={timeVal}
-      onChange={change}
-      showTime={showTime}
-      {...props}
-    />
+    <Picker value={timeVal} onChange={change} showTime={showTime} {...props} />
   );
 };
+export default Index;

package/src/components/config.ts

@@ -37,4 +37,5 @@ export const baseConfig: IFormConfigContextProps = {
     },
     maxSize: 1024 * 1024 * 1.8,
   },
+  defaultComponent: {},
 };

package/src/components/index.tsx

@@ -5,6 +5,7 @@ export { default as HForm } from "./Form";
 export { default as useHForm } from "./Form/hooks/useHForm";
 export { useHDialogForm } from "./DialogForm/hooks";
 export { default as HFormConnect } from "./Form/HFormConnect";
+export { default as HFormConfigProvider } from "./Form/Context/FormConfigProvider";
 
 import ModalForm from "./DialogForm/ModalForm";
 import DrawerForm from "./DialogForm/DrawerForm";
@@ -23,7 +24,7 @@ export const HRadioGroup = FormConfig.radioGroup;
 export const HTimePicker = FormConfig.timePicker;
 export const HInputNumber = FormConfig.inputNumber;
 export const HPageHandler = PageHandler;
-export const HFormConfigProvider = FormConfig.formConfigProvider;
 export const HTextArea = FormConfig.textArea;
+export const HColorInput = FormConfig.colorInput;
 export const HModalForm = ModalForm;
 export const HDrawerForm = DrawerForm;

package/src/components/modal.ts

@@ -7,9 +7,11 @@ export interface ValueSwitchMapModal {
   open?: any;
   close?: any;
 }
-type NameProvider = (name: string) => string;
+export interface DataFnProvider<P = any, R = any> {
+  (name: P): R;
+}
 
 export interface DateRangePickerValueMapModal {
-  start?: string | NameProvider;
-  end?: string | NameProvider;
+  start?: string | DataFnProvider<string, string>;
+  end?: string | DataFnProvider<string, string>;
 }

package/src/components/styles/index.less

@@ -1,2 +1,3 @@
 @import "../Select/index.less";
 @import "../Form/index.less";
+@import "../Input/ColorInput/index.less";

package/src/pages/Form/index.tsx

@@ -96,11 +96,22 @@ const data = [
     type: "urlUpload",
     rules: [{ required: true }],
   },
+  {
+    label: "颜色",
+    name: "colorInput",
+    type: "colorInput",
+  },
+  {
+    label: "测试",
+    type: "test",
+  },
   {
     type: "submit",
   },
 ];
-
+const Test = (props) => {
+  return <div>ffff</div>;
+};
 export default () => {
   const form = useHForm();
   return (
@@ -108,6 +119,9 @@ export default () => {
       <HFormConfigProvider
         valueSwitchMap={{ open: 1, close: 2 }}
         valueCheckMap={{ noChecked: 0, checked: 1 }}
+        defaultComponent={{
+          test: Test,
+        }}
       >
         <HForm
           configData={data}
@@ -128,6 +142,7 @@ export default () => {
                   testEnd: "1693538359",
                   op: 1,
                   opInput: "12121",
+                  colorInput: "rgba(24, 144, 255,1)",
                   upload:
                     "https://img2.baidu.com/it/u=2048195462,703560066&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333",
                 });

package/src/pages/Input/index.tsx

@@ -3,6 +3,7 @@ import {
   HSelectInput,
   HButtonInput,
   HInputNumber,
+  HColorInput,
 } from "../../components";
 import { Space } from "antd";
 export default () => {
@@ -17,6 +18,7 @@ export default () => {
       />
       <HButtonInput>点我</HButtonInput>
       <HInputNumber />
+      <HColorInput />
     </Space>
   );
 };

package/src/pages/ModalForm/index.tsx

@@ -97,18 +97,18 @@ const data = [
     rules: [{ required: true }],
   },
 ];
-let num=0;
+let num = 0;
 export default () => {
   const modalForm = useHDialogForm();
   return (
     <>
       <Button
         onClick={() => {
-          num++
+          num++;
           modalForm.show({
-            params:{
-              name:num
-            }
+            params: {
+              name: num,
+            },
           });
         }}
       >
@@ -117,18 +117,18 @@ export default () => {
       <HModalForm
         configData={data}
         labelWidth={88}
-        request={(val,params)=>{
-           console.log(val,params);
+        request={(val, params) => {
+          console.log(val, params);
         }}
         infoRequest={(ppp) => {
-          console.log(ppp)
+          console.log(ppp);
           return Promise.resolve({
             check1: 1,
             testStart: "1694747960",
             testEnd: "1693538359",
             op: 1,
             opInput: "12121",
-            name:ppp.name
+            name: ppp.name,
           });
         }}
         dialogForm={modalForm}