@hw-component/form 0.0.3-beta-v5 → 0.0.3-beta-v7

package/lib/Submit/index.js

@@ -8,7 +8,7 @@ var antd = require('antd');
 var React = require('react');
 var index = require('../Form/Context/index.js');
 
-var _excluded = ["text", "type", "form", "loading"];
+var _excluded = ["text", "type", "form", "loading", "position", "reset"];
 var HSubmit = (function (_ref) {
   var _ref$text = _ref.text,
     text = _ref$text === void 0 ? "提交" : _ref$text,
@@ -16,15 +16,27 @@ var HSubmit = (function (_ref) {
     type = _ref$type === void 0 ? "primary" : _ref$type,
     form = _ref.form,
     loading = _ref.loading,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? "start" : _ref$position,
+    reset = _ref.reset,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useFormContext = index.useFormContext(),
     _useFormContext$loadi = _useFormContext.loading,
     formSubLoading = _useFormContext$loadi === void 0 ? loading : _useFormContext$loadi;
-  return /*#__PURE__*/React.createElement(antd.Button, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(antd.Row, {
+    justify: position,
+    style: {
+      width: "100%"
+    }
+  }, reset && /*#__PURE__*/React.createElement(antd.Button, _extends({}, props, {
+    onClick: function onClick() {
+      form.resetFields();
+    }
+  }), "\u91CD\u5236"), /*#__PURE__*/React.createElement(antd.Button, _extends({}, props, {
     type: type,
     onClick: form.submit,
     loading: formSubLoading
-  }), text);
+  }), text));
 });
 
 exports.default = HSubmit;

package/lib/TDPicker/TimePicker.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { HTimePickerProps } from "./modal";
 declare const _default: ({ value, format, onChange, ...props }: HTimePickerProps) => JSX.Element;
 export default _default;

package/lib/TDPicker/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
 import type { HDatePickerProps } from "./modal";
-declare const _default: ({ value, onChange, showTime, format, ...props }: HDatePickerProps) => JSX.Element;
-export default _default;
+import React from "react";
+declare const Index: React.FC<HDatePickerProps>;
+export default Index;

package/lib/TDPicker/index.js

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
 var _extends = require('@babel/runtime-corejs3/helpers/extends');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var antd = require('antd');
 var hooks = require('./hooks.js');
+var React = require('react');
 
 var _excluded = ["value", "onChange", "showTime", "format"];
-var HDatePicker = (function (_ref) {
+var Picker = antd.DatePicker;
+var Index = function Index(_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
     _ref$showTime = _ref.showTime,
@@ -25,12 +26,12 @@ var HDatePicker = (function (_ref) {
     format: format,
     onChange: onChange
   });
-  return /*#__PURE__*/React.createElement(antd.DatePicker, _extends({
+  return /*#__PURE__*/React.createElement(Picker, _extends({
     value: timeVal,
     onChange: change,
     showTime: showTime
   }, props));
-});
+};
 
-exports.default = HDatePicker;
+exports.default = Index;
 // powered by h

package/lib/TextArea/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { TextAreaProps } from "antd/es/input";
 declare const _default: ({ autoSize, ...props }: TextAreaProps) => JSX.Element;
 export default _default;

package/lib/Upload/Btn.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IUpLoadProps } from "./modal";
 declare const _default: ({ value, maxCount, listType }: IUpLoadProps) => JSX.Element;
 export default _default;

package/lib/Upload/MediaTypeEle/TypeEle.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MediaTypeEnum } from "../enums";
 interface TypeEleProps {
     mediaType?: MediaTypeEnum;

package/lib/Upload/MediaTypeEle/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IMediaTypeEleProps } from "../modal";
 declare const _default: ({ file, onReady, onError }: IMediaTypeEleProps) => JSX.Element | null;
 export default _default;

package/lib/Upload/Preview/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ModalProps } from "antd";
 import type { IMediaTypeEleProps } from "../modal";
 export type IPreviewProps = IMediaTypeEleProps & ModalProps;

package/lib/Upload/UrlUpload/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IUrlUploadProps } from "../modal";
 declare const Index: ({ placeholder, value, onChange, mediaType, ...props }: IUrlUploadProps) => JSX.Element;
 export default Index;

package/lib/config.js

@@ -58,7 +58,8 @@ var baseConfig = {
       return request;
     }(),
     maxSize: 1024 * 1024 * 1.8
-  }
+  },
+  defaultComponent: {}
 };
 
 exports.baseConfig = baseConfig;

package/lib/index.css

@@ -33,3 +33,12 @@
           align-items: center;
   min-height: 32px;
 }
+.ant-hw-color-box {
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.ant-hw-color-input-picker {
+  box-shadow: 0 0 0 0 !important;
+}

package/lib/index.d.ts

@@ -4,8 +4,9 @@ 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";
 export declare const HSelect: ({ style, mode, options, modeConfig, value, onChange, fieldNames: propsFieldNames, request, manual, optionLabelProp, filterProvider, optionFilterProp, serviceSearch, onSearch: propsOnSearch, filterOption, showSearch, labelInValue, noMatchItemRender, allSelect, ...props }: import("./Select/modal").HSelectProps) => JSX.Element;
-export declare const HInput: ({ ...props }: import("antd").InputProps) => JSX.Element;
+export declare const HInput: ({ ...props }: import("./Input/modal").HInputProps<any>) => JSX.Element;
 export declare const HSelectInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HUpload: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HUrlUpload: ({ placeholder, value, onChange, mediaType, ...props }: import("./Upload/modal").IUrlUploadProps) => JSX.Element;
@@ -19,7 +20,7 @@ export declare const HRadioGroup: ({ value, options, onChange, fieldNames: props
 export declare const HTimePicker: ({ value, format, onChange, ...props }: import("./TDPicker/modal").HTimePickerProps) => JSX.Element;
 export declare const HInputNumber: ({ style, ...props }: import("antd").InputNumberProps<string | number>) => JSX.Element;
 export declare const HPageHandler: import("react").FC<import("./PageHandler/modal").IHPageHandler<any>>;
-export declare const HFormConfigProvider: import("react").FC<import("./Form/modal").IFormConfigContextProps>;
 export declare const HTextArea: ({ autoSize, ...props }: import("antd/es/input").TextAreaProps) => JSX.Element;
+export declare const HColorInput: ({ value, onChange, ...props }: import("./Input/modal").HInputProps<any>) => JSX.Element;
 export declare const HModalForm: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, initialValues, onFinish, params, onOk, ...props }: import("./DialogForm/modal").DialogFormProps<any, any>) => JSX.Element;
 export declare const HDrawerForm: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, closable, initialValues, labelWidth, onOk, onFinish, size, form, footer, params, ...props }: import("./DialogForm/modal").DialogFormProps<any, any>) => JSX.Element;

package/lib/index.js

@@ -6,6 +6,7 @@ var index = require('./Form/index.js');
 var useHForm = require('./Form/hooks/useHForm.js');
 var hooks = require('./DialogForm/hooks.js');
 var HFormConnect = require('./Form/HFormConnect.js');
+var FormConfigProvider = require('./Form/Context/FormConfigProvider.js');
 var ModalForm = require('./DialogForm/ModalForm.js');
 var index$2 = require('./DialogForm/DrawerForm/index.js');
 
@@ -24,8 +25,8 @@ var HRadioGroup = config.default.radioGroup;
 var HTimePicker = config.default.timePicker;
 var HInputNumber = config.default.inputNumber;
 var HPageHandler = index$1.default;
-var HFormConfigProvider = config.default.formConfigProvider;
 var HTextArea = config.default.textArea;
+var HColorInput = config.default.colorInput;
 var HModalForm = ModalForm.default;
 var HDrawerForm = index$2.default;
 
@@ -33,12 +34,13 @@ exports.HForm = index.default;
 exports.useHForm = useHForm.default;
 exports.useHDialogForm = hooks.useHDialogForm;
 exports.HFormConnect = HFormConnect.default;
+exports.HFormConfigProvider = FormConfigProvider.default;
 exports.HButtonInput = HButtonInput;
 exports.HCheckBox = HCheckBox;
 exports.HCheckboxGroup = HCheckboxGroup;
+exports.HColorInput = HColorInput;
 exports.HDatePicker = HDatePicker;
 exports.HDrawerForm = HDrawerForm;
-exports.HFormConfigProvider = HFormConfigProvider;
 exports.HInput = HInput;
 exports.HInputNumber = HInputNumber;
 exports.HModalForm = HModalForm;

package/lib/modal.d.ts

@@ -7,9 +7,10 @@ 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>;
 }
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/form",
-  "version": "0.0.3-beta-v5",
+  "version": "0.0.3-beta-v7",
   "description": "基于antd二次开发",
   "repository": {
     "type": "git",
@@ -28,10 +28,12 @@
   },
   "dependencies": {
     "@ant-design/icons": "4.6.2",
+    "@types/react-color": "^3.0.9",
     "ahooks": "2.10.9",
     "antd": "4.20.7",
-    "react": "16.14.0",
+    "react": "17.0.0",
     "react-dom": "17.0.2",
+    "react-color": "^2.19.3",
     "react-router-dom": "^6.11.2"
   },
   "devDependencies": {
@@ -46,7 +48,7 @@
     "@rollup/plugin-inject": "^5.0.3",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-url": "^8.0.1",
-    "@types/react": "17.0.14",
+    "@types/react": "17.0.17",
     "@types/react-dom": "17.0.9",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@umijs/fabric": "^2.14.1",

package/src/components/DialogForm/DrawerForm/Footer.tsx

@@ -1,16 +1,12 @@
 import { Row, Space, Button } from "antd";
 
-interface IProps{
-  onOk?:VoidFunction;
-  onCancel?:VoidFunction;
-  confirmLoading?:boolean;
+interface IProps {
+  onOk?: VoidFunction;
+  onCancel?: VoidFunction;
+  confirmLoading?: boolean;
 }
 
-export default ({
-  onCancel,
-  onOk,
-  confirmLoading,
-}: IProps) => {
+export default ({ onCancel, onOk, confirmLoading }: IProps) => {
   return (
     <Row justify={"end"}>
       <Space size={"middle"}>

package/src/components/DialogForm/DrawerForm/index.tsx

@@ -31,13 +31,13 @@ export default ({
     setModalVisible,
     initValue,
     onAfterClose,
-    formParams
+    formParams,
   } = useModifyProps({
     configData,
     visible,
     initialValues,
     dialogForm: currentForm,
-    params
+    params,
   });
   const cancel = () => {
     onAfterClose();
@@ -77,9 +77,9 @@ export default ({
         {...props}
         form={currentForm}
         params={formParams}
-        onFinish={async (values,subParams) => {
-          const result = await run(values,subParams);
-          const close = onOk?.(result,subParams);
+        onFinish={async (values, subParams) => {
+          const result = await run(values, subParams);
+          const close = onOk?.(result, subParams);
           if (close === false) {
             return;
           }

package/src/components/DialogForm/ModalForm.tsx

@@ -18,14 +18,19 @@ export default ({
   ...props
 }: DialogFormProps) => {
   const currentForm = useCurrentForm(dialogForm);
-  const { modalVisible, modalFormData, setModalVisible, initValue ,formParams} =
-    useModifyProps({
-      configData,
-      visible,
-      initialValues,
-      dialogForm: currentForm,
-      params
-    });
+  const {
+    modalVisible,
+    modalFormData,
+    setModalVisible,
+    initValue,
+    formParams,
+  } = useModifyProps({
+    configData,
+    visible,
+    initialValues,
+    dialogForm: currentForm,
+    params,
+  });
   const cancel = () => {
     if (onCancel) {
       return onCancel?.();
@@ -50,9 +55,9 @@ export default ({
       <HForm
         configData={modalFormData}
         initialValues={initValue}
-        onFinish={async (values,params) => {
-          const result = await run(values,params);
-          const close = onOk?.(result,params);
+        onFinish={async (values, outParams) => {
+          const result = await run(values, outParams);
+          const close = onOk?.(result, outParams);
           if (close === false) {
             return;
           }

package/src/components/DialogForm/hooks.ts

@@ -13,12 +13,12 @@ export const useModifyProps = ({
   initialValues,
   dialogForm,
   afterClose,
-  params
+  params,
 }: ModifyPropsModal) => {
   const [modalVisible, setModalVisible] = useState(visible);
   const [modalFormData, setModalFormData] = useState(configData);
   const [initValue, setInitValue] = useState(initialValues);
-  const [formParams,setFormParams]=useState(params);
+  const [formParams, setFormParams] = useState(params);
   const onAfterClose = () => {
     setTimeout(() => {
       dialogForm.resetFields();
@@ -33,22 +33,22 @@ export const useModifyProps = ({
   useEffect(() => {
     setModalFormData(configData);
   }, [configData]);
-  useEffect(()=>{
-     setFormParams(params)
-  },[params])
+  useEffect(() => {
+    setFormParams(params);
+  }, [params]);
 
   useEffect(() => {
     dialogForm.show = (showParams = {}) => {
       const {
         configData: changeConfigData,
         initialValues: changeInitialValues,
-        params
+        params: changeParams,
       } = showParams;
       if (!!changeConfigData) {
         setModalFormData(changeConfigData);
       }
-      if (!!params){
-        setFormParams(params);
+      if (!!changeParams) {
+        setFormParams(changeParams);
       }
       setInitValue(changeInitialValues);
       setModalVisible(true);
@@ -66,7 +66,7 @@ export const useModifyProps = ({
     initValue,
     setInitValue,
     onAfterClose,
-    formParams
+    formParams,
   };
 };
 export const useHDialogForm = () => {
@@ -87,12 +87,12 @@ export const useCurrentForm = (hDialogForm?: HDialogFormInstance) => {
 
 export const useSub = ({ request, onFinish }: Partial<DialogFormProps>) => {
   return useRequest(
-    async (values,params) => {
+    async (values, params) => {
       if (onFinish) {
-        return onFinish(values,params);
+        return onFinish(values, params);
       }
       if (request) {
-        return request(values,params);
+        return request(values, params);
       }
     },
     { manual: true }

package/src/components/DialogForm/modal.ts

@@ -27,8 +27,8 @@ export interface HDialogFormInstance<P = any, T = any> extends HFormInstance {
 export interface DialogFormProps<P = any, T = any>
   extends Omit<RootProps, "onFinish" | "onCancel" | "onOk" | "infoRequest"> {
   dialogForm?: HDialogFormInstance;
-  onFinish?:(values:T,params:P)=>Promise<any>;
+  onFinish?: (values: T, params: P) => Promise<any>;
   onCancel?: VoidFunction;
-  onOk?: (data: T,params:P) => boolean | undefined;
+  onOk?: (data: T, params: P) => boolean | undefined;
   infoRequest?: (params: P) => Promise<T>;
 }

package/src/components/Form/FormItem/BasicItem.tsx

@@ -5,7 +5,10 @@ import Helper from "./Helper";
 import { useClassName } from "../../hooks";
 import { useHide } from "./hooks";
 import { useFormContext } from "../Context";
-import type { FormItemWithRender, HItemProps } from "../modal";
+import type { HItemProps } from "../modal";
+import { useDefaultRender } from "../hooks/useDefaultRender";
+import type { HFormItemProps } from "../modal";
+import { useDefaultComponents } from "../hooks";
 
 interface ContentProps extends Omit<HItemProps, "name"> {
   value?: any;
@@ -28,20 +31,23 @@ const Content: React.FC<ContentProps> = ({
   );
 };
 
-const Index: React.FC<FormItemWithRender> = ({
-  hover,
-  labelWidth,
-  required,
-  colon = true,
-  label,
-  itemProps,
-  children,
-  helper,
-  hide,
-  render,
-  ...props
-}) => {
+const Index: React.FC<HFormItemProps> = (props) => {
+  const {
+    hover,
+    labelWidth,
+    required,
+    colon = true,
+    label,
+    itemProps,
+    children,
+    helper,
+    hide,
+    render,
+    ...oProps
+  } = props;
   const { form } = useFormContext();
+  const defaultComponent = useDefaultComponents();
+  const defaultRender = useDefaultRender(props, defaultComponent);
   const hideItem = useHide({ hide, form });
   if (hideItem) {
     return null;
@@ -58,11 +64,11 @@ const Index: React.FC<FormItemWithRender> = ({
           {label}
         </Label>
       }
-      {...props}
+      {...oProps}
       colon={false}
       required={false}
     >
-      <Content helper={helper}>{render(form)}</Content>
+      <Content helper={helper}>{defaultRender(form)}</Content>
     </Form.Item>
   );
 };

package/src/components/Form/FormItem/RegularFormItem.tsx

@@ -1,7 +1,7 @@
 import BasicItem from "./BasicItem";
-import type { FormItemWithRender } from "../modal";
+import type { HItemProps } from "../modal";
 
-export default (props: FormItemWithRender) => {
+export default (props: HItemProps) => {
   const { type, colon } = props;
   return <BasicItem {...props} colon={type === "submit" ? false : colon} />;
 };

package/src/components/Form/FormItem/UpFormItem.tsx

@@ -1,14 +1,14 @@
 import { Form } from "antd";
-import type { FormItemWithRender } from "../modal";
 import BasicItem from "./BasicItem";
 import { useShouldUpdate } from "./hooks";
+import type { HFormItemProps } from "../modal";
 const { Item } = Form;
 export default ({
   shouldUpdate,
   dependencies,
   hide,
   ...props
-}: FormItemWithRender) => {
+}: HFormItemProps) => {
   const resultShouldUpdate = useShouldUpdate({ shouldUpdate, hide });
   return (
     <Item shouldUpdate={resultShouldUpdate} dependencies={dependencies} noStyle>

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

@@ -1,17 +1,13 @@
 import UpFormItem from "./UpFormItem";
 import RegularFormItem from "./RegularFormItem";
 import { useMemo } from "react";
-import type {
-  FormItemWithRender,
-  HFormInstance,
-} from "@/components/Form/modal";
-import type { HItemProps } from "@/components/Form/modal";
+import type { HFormInstance, HItemProps } from "../modal";
 
 export const useFormItemDomControl = ({
   shouldUpdate,
   hide,
   dependencies,
-}: FormItemWithRender) => {
+}: HItemProps) => {
   return useMemo(() => {
     if (shouldUpdate || typeof hide === "function" || dependencies) {
       return UpFormItem;

package/src/components/Form/FormItem/index.tsx

@@ -1,8 +1,8 @@
 import { useFormItemDomControl } from "./hooks";
 import React from "react";
-import type { FormItemWithRender } from "../modal";
+import type { HItemProps } from "../modal";
 
-export default (props: FormItemWithRender) => {
+export default (props: HItemProps) => {
   const Component = useFormItemDomControl(props);
   return <Component {...props} />;
 };

package/src/components/Form/config.ts

@@ -13,14 +13,14 @@ import HTimePicker from "../TDPicker/TimePicker";
 import HUpload from "../Upload";
 import HUrlUpload from "../Upload/UrlUpload";
 import HSubmit from "../Submit";
-import FormConfigProvider from "../Form/Context/FormConfigProvider";
 import TextArea from "../TextArea";
+import ColorInput from "../Input/ColorInput";
+
 export const placeholderConfig = {
   inputType: ["input", "inputNumber", "selectInput", "buttonInput"],
-  selectType: ["select", "datePicker", "timePicker"],
+  selectType: ["select", "datePicker", "timePicker", "colorInput"],
 };
-
-export default {
+const componentConfig = {
   select: HSelect,
   inputNumber: HInputNumber,
   selectInput: HSelectInput,
@@ -36,6 +36,8 @@ export default {
   upload: HUpload,
   urlUpload: HUrlUpload,
   submit: HSubmit,
-  formConfigProvider: FormConfigProvider,
   textArea: TextArea,
+  colorInput: ColorInput,
 };
+
+export default componentConfig;

package/src/components/Form/hooks/index.ts

@@ -1,7 +1,9 @@
 import { useRequest } from "ahooks";
 import type { HFormProps, HFormInstance } from "../modal";
 import useHForm from "./useHForm";
-import {useEffect, useMemo} from "react";
+import { useEffect, useMemo } from "react";
+import FormConfig from "../config";
+import { useFormConfigContext } from "../Context/FormConfigProvider";
 export const useCurrentForm = (form?: HFormInstance) => {
   const selfForm = useHForm();
   return form || selfForm;
@@ -27,9 +29,9 @@ export const useInfoReq = ({
     async (value) => {
       const subVal = form?.outputValues(value);
       if (request) {
-        await request(subVal,reqData.params);
+        await request(subVal, reqData.params);
       }
-      onFinish?.(subVal,reqData.params);
+      onFinish?.(subVal, reqData.params);
     },
     { manual: true }
   );
@@ -45,17 +47,22 @@ export const useInfoReq = ({
     form?.setFieldsValue(setValue);
     return setValue || {};
   });
-  const {run,mutate}=infoControl;
-  useEffect(()=>{
-    if (form){
-      form.reload=(params)=>{
+  const { run, mutate } = infoControl;
+  useEffect(() => {
+    if (form) {
+      form.reload = (reloadParams) => {
         mutate(undefined);
-        return run(params);
+        return run(reloadParams);
       };
     }
-  },[]);
+  }, []);
   return {
     subControl,
     infoControl,
   };
 };
+
+export const useDefaultComponents = () => {
+  const defaultComponent = useFormConfigContext("defaultComponent");
+  return { ...FormConfig, ...defaultComponent };
+};