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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/form",
-  "version": "0.0.9-beta-v21",
+  "version": "0.0.9-beta-v22",
   "description": "基于antd二次开发",
   "repository": {
     "type": "git",

package/src/Layout.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from "react";
+import { Menu } from "antd";
+import "./index.less";
+import type { RouteModal } from "./routes";
+import routes from "./routes";
+import { Outlet, useNavigate, useLocation } from "react-router-dom";
+
+const menuItem = (item: RouteModal) => {
+  const { name, path, children } = item;
+  if (!path) {
+    return null;
+  }
+  if (children) {
+    return (
+      <Menu.SubMenu title={name} key={path}>
+        {children.map((childItem) => {
+          return menuItem(childItem);
+        })}
+      </Menu.SubMenu>
+    );
+  }
+  return <Menu.Item key={path}>{name}</Menu.Item>;
+};
+export default () => {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const [keys, setKeys] = useState(["/form/select"]);
+  const [openKey, setOpenKey] = useState(["/form"]);
+  useEffect(() => {
+    setKeys([pathname]);
+    const pathOpenKeys = pathname.split("/");
+    const openKeys = pathOpenKeys.map((path) => {
+      return "/" + path;
+    });
+    setOpenKey(openKeys);
+  }, [pathname]);
+  return (
+    <div className="layout">
+      <Menu
+        className="menu"
+        selectedKeys={keys}
+        openKeys={openKey}
+        onOpenChange={(openKeys) => {
+          setOpenKey(openKeys);
+        }}
+        onSelect={(e) => {
+          navigate(e.key);
+        }}
+        mode={"inline"}
+        theme="dark"
+      >
+        {routes.map((item) => {
+          return menuItem(item);
+        })}
+      </Menu>
+      <div className="body">
+        <Outlet />
+      </div>
+    </div>
+  );
+};

package/src/app.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import routes from "./routes";
+import {
+  createBrowserRouter,
+  Navigate,
+  RouterProvider,
+  useRouteError,
+} from "react-router-dom";
+import type { RouteObject } from "react-router";
+import Layout from "./Layout";
+const Error = () => {
+  const error = useRouteError();
+  if (error.status === 404) {
+    return <Navigate to="/form/select" replace />;
+  }
+  return <div>错误</div>;
+};
+const rootRoute = [
+  {
+    path: "/",
+    element: <Layout />,
+    errorElement: <Error />,
+    children: routes,
+  },
+];
+const router = () => {
+  return createBrowserRouter(rootRoute as RouteObject[]);
+};
+export default () => {
+  return (
+    <RouterProvider router={router()} fallbackElement={<p>Loading...</p>} />
+  );
+};

package/src/components/Cascader/index.tsx

@@ -0,0 +1,31 @@
+import type { CascaderProps } from "antd";
+import { Cascader } from "antd";
+import { useRequest } from "ahooks";
+import { useMatchConfigProps } from "../hooks";
+import type { PromiseFnResult } from "../modal";
+export type HCascaderProps = {
+  request?: PromiseFnResult<any>;
+} & CascaderProps<any>;
+
+export default ({
+  request,
+  options = [],
+  fieldNames: propsFieldNames,
+  ...props
+}: HCascaderProps) => {
+  const { fieldNames } = useMatchConfigProps({ fieldNames: propsFieldNames });
+  const { loading, data } = useRequest((params = {}) => {
+    if (!request) {
+      return Promise.resolve(options);
+    }
+    return request(params);
+  });
+  return (
+    <Cascader
+      {...props}
+      loading={loading}
+      options={data}
+      fieldNames={fieldNames}
+    />
+  );
+};

package/src/components/CheckboxGroup/CheckBox/index.tsx

@@ -0,0 +1,38 @@
+import { Checkbox } from "antd";
+import React, { useMemo } from "react";
+import type { CheckboxChangeEvent } from "antd/es/checkbox";
+import type { HCheckboxProps } from "@/components/CheckboxGroup/modal";
+import { useMatchConfigProps } from "../../hooks";
+
+const Index: React.FC<HCheckboxProps> = ({
+  value,
+  onChange,
+  children,
+  valueMap: propsValueCheckMap,
+}) => {
+  const { valueCheckMap = {} } = useMatchConfigProps({
+    valueCheckMap: propsValueCheckMap,
+  }); //匹配全局
+  const checkedVal = useMemo(() => {
+    const { checked } = valueCheckMap;
+    if (value === checked) {
+      return true;
+    }
+    return false;
+  }, [value]);
+  const change = (e: CheckboxChangeEvent) => {
+    const { checked, noChecked } = valueCheckMap;
+    const val = e.target.checked;
+    let subVal = checked;
+    if (!val) {
+      subVal = noChecked;
+    }
+    onChange?.(subVal);
+  };
+  return (
+    <Checkbox checked={checkedVal} onChange={change}>
+      {children}
+    </Checkbox>
+  );
+};
+export default Index;

package/src/components/CheckboxGroup/hooks.ts

@@ -0,0 +1,105 @@
+import { useEffect, useMemo, useState } from "react";
+import type { HCheckboxProps } from "@/components/CheckboxGroup/modal";
+
+const changValProvider = ({
+  value,
+  options,
+  valueMap = {},
+}: HCheckboxProps) => {
+  const newVal = { ...value };
+  const { checked, noChecked } = valueMap;
+  options?.forEach((item) => {
+    const { value: itemVal } = item;
+    if (newVal[itemVal] !== checked) {
+      newVal[itemVal] = noChecked;
+    }
+  });
+  return newVal;
+};
+
+export const useValueProvider = ({
+  value,
+  valueMap = {},
+  keyInValue = true,
+  onChange,
+  options,
+}: HCheckboxProps) => {
+  const [val, setVal] = useState<Record<any, any>>({});
+  const oldValueCheckMap = useMemo(() => {
+    return {
+      valueMap,
+    };
+  }, []); //存储老的map
+  useEffect(() => {
+    setVal((oldVal) => {
+      return changValProvider({
+        value: oldVal,
+        options,
+        valueMap: oldValueCheckMap.valueMap,
+      });
+    });
+  }, [options]); //初始化数据
+  useEffect(() => {
+    const { checked: oldChecked } = oldValueCheckMap.valueMap;
+    const { checked, noChecked } = valueMap;
+    setVal((oldVal) => {
+      const newVal = { ...oldVal };
+      const keys = Object.keys(newVal);
+      keys.forEach((key) => {
+        if (newVal[key] === oldChecked) {
+          newVal[key] = checked;
+          return;
+        }
+        newVal[key] = noChecked;
+      });
+      oldValueCheckMap.valueMap = valueMap;
+      return newVal;
+    });
+  }, [valueMap]);
+
+  useEffect(() => {
+    const { checked, noChecked } = oldValueCheckMap.valueMap;
+    if (!value) {
+      return;
+    }
+    if (!Array.isArray(value)) {
+      setVal(value);
+      return;
+    }
+    setVal((oldVal) => {
+      const newVal = { ...oldVal };
+      Object.keys(newVal).forEach((key) => {
+        newVal[key] = noChecked;
+      });
+      value.forEach((itemVal) => {
+        newVal[itemVal] = checked;
+      });
+      return newVal;
+    });
+  }, [value]);
+
+  const change = (key: any, changeVal: any) => {
+    const { checked, noChecked } = valueMap;
+    const newVal = { ...val };
+    newVal[key] = noChecked;
+    if (changeVal === checked) {
+      newVal[key] = checked;
+    }
+    if (!onChange) {
+      setVal(newVal);
+      return;
+    }
+    if (keyInValue) {
+      onChange(newVal);
+      return;
+    }
+    const subVal = Object.keys(newVal).filter((valKey) => {
+      return newVal[valKey] === checked;
+    });
+    onChange(subVal);
+  };
+  return {
+    val,
+    change,
+  };
+};

package/src/components/CheckboxGroup/index.tsx

@@ -0,0 +1,85 @@
+import { Space } from "antd";
+import type { HCheckboxProps } from "@/components/CheckboxGroup/modal";
+import { useValueProvider } from "./hooks";
+import Checkbox from "./CheckBox";
+import { useMatchConfigProps, useChangeOptions } from "../hooks";
+import HFormConnect from "../Form/HFormConnect";
+import React from "react";
+
+const Index = ({
+  options,
+  fieldNames,
+  onChange,
+  valueMap,
+  value,
+  disabled,
+  keyInValue = true,
+  addFormat,
+  direction,
+}: HCheckboxProps) => {
+  const { valueCheckMap: resultValueCheckMap, fieldNames: resultFieldNames } =
+    useMatchConfigProps({ fieldNames, valueCheckMap: valueMap }); //匹配全局
+  const checkOptions = useChangeOptions({
+    options,
+    fieldNames: resultFieldNames,
+  });
+  const { val, change } = useValueProvider({
+    options: checkOptions,
+    onChange,
+    valueMap: resultValueCheckMap,
+    keyInValue,
+    value,
+  });
+  addFormat?.({
+    float: {
+      inputValue: (item, initValue) => {
+        const { name = "" } = item;
+        const keys = checkOptions?.map((optItem) => {
+          return optItem.value;
+        });
+        const resultObj = {};
+        keys?.forEach((key) => {
+          resultObj[key] = initValue[key];
+        });
+        return {
+          [name]: resultObj,
+        };
+      },
+      outputValue: (item, outputValue) => {
+        const { name = "" } = item;
+        const { [name]: itemVal = {} } = outputValue;
+        if (Array.isArray(itemVal)) {
+          return {
+            [name]: itemVal,
+          };
+        }
+        return {
+          ...itemVal,
+        };
+      },
+    },
+  });
+  return (
+    <Space direction={direction}>
+      {checkOptions?.map((item) => {
+        const { label, value: itemVal } = item;
+        const checked = val[itemVal];
+        return (
+          <Checkbox
+            value={checked}
+            key={itemVal}
+            onChange={(changeVal) => {
+              change(itemVal, changeVal);
+            }}
+            valueMap={valueMap}
+            disabled={disabled}
+          >
+            {label}
+          </Checkbox>
+        );
+      })}
+    </Space>
+  );
+};
+
+export default HFormConnect(Index);

package/src/components/CheckboxGroup/modal.ts

@@ -0,0 +1,17 @@
+import type { CheckboxProps } from "antd/lib/checkbox/Checkbox";
+import type { SelectProps } from "antd";
+import type { addFormatItemModal } from "../Form/modal";
+import type { ValueCheckMapModal } from "../modal";
+
+export interface HCheckboxProps
+  extends Omit<CheckboxProps, "value" | "onChange"> {
+  options?: Record<string, any>[];
+  fieldNames?: SelectProps["fieldNames"];
+  valueMap?: ValueCheckMapModal;
+  keyInValue?: boolean;
+  value?: Record<string, any> | any[];
+  onChange?: (value: Record<string, any> | any[]) => void;
+  addFormat?: (config: Record<string, addFormatItemModal>) => void;
+  subParams?: (formatValue: Record<string, any>, sourceValue: any[]) => any;
+  direction?: "horizontal" | "vertical";
+}

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

@@ -0,0 +1,20 @@
+import { Row, Space, Button } from "antd";
+
+interface IProps {
+  onOk?: VoidFunction;
+  onCancel?: VoidFunction;
+  confirmLoading?: boolean;
+}
+
+export default ({ onCancel, onOk, confirmLoading }: IProps) => {
+  return (
+    <Row justify={"end"}>
+      <Space size={"middle"}>
+        <Button onClick={onCancel}>关闭</Button>
+        <Button type={"primary"} onClick={onOk} loading={confirmLoading}>
+          确定
+        </Button>
+      </Space>
+    </Row>
+  );
+};

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

@@ -0,0 +1,12 @@
+import type { ModalProps } from "antd";
+import { Row } from "antd";
+import { CloseOutlined } from "@ant-design/icons";
+
+export default ({ title, closable, onCancel }: ModalProps) => {
+  return (
+    <Row justify={"space-between"}>
+      <div>{title}</div>
+      {closable && <CloseOutlined onClick={onCancel} />}
+    </Row>
+  );
+};

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

@@ -0,0 +1,110 @@
+import { Drawer } from "antd";
+import type { DialogFormProps } from "../modal";
+import { useCurrentForm, useModifyProps, useSub } from "../hooks";
+import HForm from "../../Form";
+import Title from "./Title";
+import Footer from "./Footer";
+import FormConfigProvider, {
+  useFormConfigContext,
+} from "../../Form/Context/FormConfigProvider";
+export default ({
+  visible,
+  title,
+  onCancel,
+  configData,
+  infoRequest,
+  request,
+  afterClose,
+  dialogForm,
+  closable = true,
+  initialValues,
+  labelWidth,
+  onOk,
+  onFinish,
+  size,
+  form,
+  footer,
+  params,
+  onValuesChange,
+  autoClear = true,
+  contentRender,
+  ...props
+}: DialogFormProps) => {
+  const currentForm = useCurrentForm(dialogForm);
+  const providerConfig = useFormConfigContext();
+  const {
+    modalVisible,
+    modalFormData,
+    setModalVisible,
+    initValue,
+    onAfterClose,
+    formParams,
+    title: modalTitle,
+  } = useModifyProps({
+    configData,
+    visible,
+    initialValues,
+    dialogForm: currentForm,
+    params,
+    title,
+    onCancel,
+    autoClear,
+  });
+  const cancel = () => {
+    onAfterClose();
+    if (onCancel) {
+      return onCancel?.();
+    }
+    setModalVisible(false);
+  };
+  const { loading, run } = useSub({ request, onFinish });
+  const footerComponent = () => {
+    if (footer === null) {
+      return null;
+    }
+    return (
+      footer || (
+        <Footer
+          onCancel={cancel}
+          onOk={currentForm.submit}
+          confirmLoading={loading}
+        />
+      )
+    );
+  };
+  const node = (
+    <HForm
+      configData={modalFormData}
+      initialValues={initValue}
+      onValuesChange={onValuesChange}
+      {...props}
+      form={currentForm}
+      params={formParams}
+      onFinish={async (values, subParams) => {
+        const result = await run(values, subParams);
+        const close = onOk?.(result, subParams);
+        if (close === false) {
+          return;
+        }
+        cancel();
+      }}
+      infoRequest={infoRequest}
+      labelWidth={labelWidth}
+    />
+  );
+  return (
+    <Drawer
+      visible={modalVisible}
+      title={<Title title={modalTitle} closable={closable} onCancel={cancel} />}
+      {...props}
+      onClose={cancel}
+      closable={false}
+      destroyOnClose={true}
+      footer={footerComponent()}
+    >
+      <FormConfigProvider {...providerConfig}>
+        {contentRender ? contentRender(node, currentForm) : node}
+      </FormConfigProvider>
+    </Drawer>
+  );
+};

package/src/components/DialogForm/ModalForm.tsx

@@ -0,0 +1,91 @@
+import { Modal } from "antd";
+import type { DialogFormProps } from "./modal";
+import HForm from "../Form";
+import FormConfigProvider, {
+  useFormConfigContext,
+} from "../Form/Context/FormConfigProvider";
+import { useCurrentForm, useModifyProps, useSub } from "./hooks";
+export default ({
+  visible,
+  title,
+  onCancel,
+  configData,
+  infoRequest,
+  request,
+  afterClose,
+  dialogForm,
+  initialValues,
+  onFinish,
+  params,
+  onOk,
+  onValuesChange,
+  autoClear = true,
+  contentRender,
+  ...props
+}: DialogFormProps) => {
+  const currentForm = useCurrentForm(dialogForm);
+  const providerConfig = useFormConfigContext();
+  const {
+    modalVisible,
+    modalFormData,
+    setModalVisible,
+    initValue,
+    formParams,
+    title: modalTitle,
+  } = useModifyProps({
+    configData,
+    visible,
+    initialValues,
+    dialogForm: currentForm,
+    params,
+    title,
+    onCancel,
+  });
+  const cancel = () => {
+    if (onCancel) {
+      return onCancel?.();
+    }
+    setModalVisible(false);
+  };
+  const { loading, run } = useSub({ request, onFinish });
+  const node = (
+    <HForm
+      configData={modalFormData}
+      initialValues={initValue}
+      onValuesChange={onValuesChange}
+      onFinish={async (values, outParams) => {
+        const result = await run(values, outParams);
+        const close = onOk?.(result, outParams);
+        if (close === false) {
+          return;
+        }
+        cancel();
+      }}
+      {...props}
+      params={formParams}
+      form={currentForm}
+      infoRequest={infoRequest}
+    />
+  );
+  return (
+    <Modal
+      title={modalTitle}
+      visible={modalVisible}
+      onCancel={cancel}
+      confirmLoading={loading}
+      afterClose={() => {
+        if (autoClear) {
+          currentForm.clear();
+        }
+        afterClose?.();
+      }}
+      {...props}
+      onOk={currentForm.submit}
+      destroyOnClose={true}
+    >
+      <FormConfigProvider {...providerConfig}>
+        {contentRender ? contentRender?.(node, currentForm) : node}
+      </FormConfigProvider>
+    </Modal>
+  );
+};