@hw-component/form 0.0.1

package/src/components/Select/components/CheckBoxOption.tsx

@@ -0,0 +1,14 @@
+import { Space, Checkbox } from "antd";
+import React from "react";
+interface ICheckBoxOptionProps {
+  label?: React.ReactNode;
+  checked: boolean;
+}
+export default ({ label, checked }: ICheckBoxOptionProps) => {
+  return (
+    <Space>
+      <Checkbox checked={checked} />
+      {label}
+    </Space>
+  );
+};

package/src/components/Select/components/DropdownComponent.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Spin, Row, Space, Typography } from "antd";
+import NotFoundContent from "./NotFoundContent";
+interface IProps {
+  loading?: boolean;
+  options?: any[];
+  error?: Error;
+  reload: VoidFunction;
+}
+const { Text } = Typography;
+const Index: React.FC<IProps> = ({
+  loading,
+  error,
+  options = [],
+  reload,
+  children,
+}) => {
+  const len = options?.length;
+  if (loading && len === 0) {
+    return (
+      <Row style={{ height: 125 }} justify="center" align={"middle"}>
+        <Space direction={"vertical"} align={"center"}>
+          <Spin />
+          <Text type={"secondary"}>拼命加载中...</Text>
+        </Space>
+      </Row>
+    );
+  }
+  if (error && len === 0) {
+    return <NotFoundContent error={error} reload={reload} />;
+  }
+  return <>{children}</>;
+};
+
+export default Index;

package/src/components/Select/components/NoFindItem.tsx

@@ -0,0 +1,7 @@
+import { Typography } from "antd";
+interface IProps {
+  label: string;
+}
+export default ({ label }: IProps) => {
+  return <Typography.Text type="danger">{label}</Typography.Text>;
+};

package/src/components/Select/components/NotFoundContent.tsx

@@ -0,0 +1,25 @@
+import { Empty, Row, Space, Typography, Button } from "antd";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
+const { Text } = Typography;
+interface IProps {
+  error?: Error;
+  reload: VoidFunction;
+}
+export default ({ error, reload }: IProps) => {
+  if (error) {
+    return (
+      <Row justify={"center"} align={"middle"} style={{ height: 125 }}>
+        <Space align={"center"} direction={"vertical"}>
+          <Text type={"danger"}>
+            <ExclamationCircleOutlined style={{ fontSize: 24 }} />
+          </Text>
+          <Text type={"danger"}>{error.message}</Text>
+          <Button type="primary" size={"small"} onClick={reload}>
+            重新加载
+          </Button>
+        </Space>
+      </Row>
+    );
+  }
+  return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+};

package/src/components/Select/defaultConfig.tsx

@@ -0,0 +1,28 @@
+import CheckBoxOption from "./components/CheckBoxOption";
+import NoFindItem from "./components/NoFindItem";
+import type { HSelectProps } from "@/components/Select/modal";
+
+export const defaultModeConfig: HSelectProps["modeConfig"] = {
+  multiple: {
+    icon: null,
+    render: (item, value) => {
+      const checkVal = value?.map((itemVal) => {
+        return itemVal.value;
+      });
+      const newVal = checkVal || [];
+      const checked = newVal.indexOf(item.value) !== -1;
+      return <CheckBoxOption label={item.label} checked={checked} />;
+    },
+  },
+};
+
+export const defaultFieldNames: HSelectProps["fieldNames"] = {
+  label: "label",
+  value: "value",
+};
+
+export const defaultSelectConfig = {
+  noMatchItemRender: () => {
+    return <NoFindItem label={"选项被删除，请重新选择"} />;
+  },
+};

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

@@ -0,0 +1,141 @@
+import type {
+  OptionType,
+  PartialHSelectProps,
+} from "@/components/Select/modal";
+import { useEffect, useState } from "react";
+import type { FilterDataModal } from "@/components/Select/modal";
+
+const single = ({ options, value, noMatchItemRender }: PartialHSelectProps) => {
+  const newOptions = options || [];
+  const index = newOptions.findIndex((item) => {
+    return item.value === value;
+  });
+  if (index !== -1) {
+    const { label } = newOptions[index];
+    return {
+      value,
+      label,
+    };
+  }
+  return {
+    value,
+    label: noMatchItemRender?.({ value }) || value,
+  };
+}; //单选模式
+const findNewValInOldVal = (val, oldVal?: any[]) => {
+  if (!oldVal) {
+    return -1;
+  }
+  return oldVal.findIndex((item) => {
+    return item.value === val;
+  });
+}; //查询新增的 value
+const sourceDataProvider = (
+  { options, value }: PartialHSelectProps,
+  oldVal?: any[]
+) => {
+  const oldData: FilterDataModal[] = [];
+  const newData: FilterDataModal[] = [];
+  value.forEach((item, i) => {
+    const index = findNewValInOldVal(item, oldVal);
+    if (index === -1) {
+      newData.push({
+        value: item,
+        index: i,
+      });
+      return;
+    }
+    const newVal = oldVal?.[index];
+    oldData.push({
+      ...newVal,
+      index: i,
+    });
+  });
+  return {
+    oldData,
+    newData,
+  };
+}; //创建新旧数据
+const resultProvider = (
+  newData: FilterDataModal[],
+  oldData: FilterDataModal[],
+  value: any[]
+) => {
+  const newResult = new Array(value.length);
+  oldData.forEach((item) => {
+    const { index, ...val } = item;
+    newResult[index] = {
+      ...val,
+    };
+  });
+  newData.forEach((item) => {
+    const { index, ...val } = item;
+    newResult[index] = {
+      ...val,
+    };
+  });
+  return newResult;
+};
+const multiple = (
+  { options, value, noMatchItemRender }: PartialHSelectProps,
+  oldVal?: any[]
+) => {
+  const { newData, oldData } = sourceDataProvider({ options, value }, oldVal);
+  const newMatchVal = newData.map((item) => {
+    const { value: itemVal, index } = item;
+    const newItem = single({ options, value: itemVal, noMatchItemRender });
+    return {
+      ...newItem,
+      index,
+    };
+  });
+  return resultProvider(newMatchVal, oldData, value);
+}; //多选
+const tag = ({ options, value }: PartialHSelectProps, oldVal?: any[]) => {
+  const { newData, oldData } = sourceDataProvider({ options, value }, oldVal);
+  return resultProvider(newData, oldData, value);
+}; //tags模式
+const matchNotFind = (
+  { options, value, mode, noMatchItemRender }: PartialHSelectProps,
+  oldVale?: OptionType[]
+) => {
+  if (!mode) {
+    return single({ options, value, noMatchItemRender });
+  }
+  if (mode === "multiple") {
+    return multiple({ options, value, noMatchItemRender }, oldVale);
+  }
+  return tag({ options, value }, oldVale);
+}; //不匹配
+export const useValueChange = (params: PartialHSelectProps) => {
+  const { labelInValue, onChange, value, options, mode, noMatchItemRender } =
+    params;
+  const [val, setVal] = useState<any>();
+  const change = (changeVal) => {
+    if (!onChange) {
+      setVal(changeVal);
+      return;
+    }
+    let newChangeVal = changeVal.value;
+    if (labelInValue) {
+      newChangeVal = changeVal;
+    }
+    if (Array.isArray(changeVal)) {
+      newChangeVal = changeVal.map((item) => {
+        return item.value;
+      });
+    }
+    onChange(newChangeVal);
+  };
+  useEffect(() => {
+    if (options && value) {
+      setVal((oldVale) => {
+        return matchNotFind(params, oldVale);
+      });
+    }
+  }, [value, options, mode, noMatchItemRender]);
+  return {
+    val,
+    change,
+  };
+};

package/src/components/Select/hooks/norHooks.ts

@@ -0,0 +1,74 @@
+import { useState } from "react";
+import type {
+  HSelectProps,
+  OptionType,
+  PartialHSelectProps,
+} from "@/components/Select/modal";
+import { useRequest } from "ahooks";
+
+const resultProvider = (
+  data?: any[],
+  fieldNames?: HSelectProps["fieldNames"]
+) => {
+  return data?.map((item) => {
+    const { label = "label", value = "value" } = fieldNames || {};
+    return {
+      label: item[label],
+      value: item[value],
+    };
+  });
+};
+export const useOptionReq = ({
+  manual,
+  fieldNames,
+  request,
+  options,
+  serviceSearch,
+}: PartialHSelectProps) => {
+  const [data, setData] = useState<OptionType[] | undefined>();
+  const { run, loading, error } = useRequest(
+    async (params = {}, type = "init") => {
+      if (type === "init") {
+        setData(undefined);
+      }
+      if (request) {
+        const result = await request(params);
+        return resultProvider(result, fieldNames);
+      }
+      const resultOpt = resultProvider(options, fieldNames);
+      return Promise.resolve(resultOpt);
+    },
+    {
+      manual,
+      debounceInterval: 300,
+      onSuccess: (resultData) => {
+        setData(resultData);
+      },
+    }
+  );
+  const onSearch = (inputValue: string) => {
+    if (!serviceSearch) {
+      return;
+    }
+    run({ inputValue });
+  };
+  return {
+    run,
+    loading,
+    error,
+    data,
+    onSearch,
+  };
+};
+
+export const useFilterOption = ({
+  filterOption,
+  serviceSearch,
+}: PartialHSelectProps) => {
+  if (serviceSearch) {
+    return () => {
+      return true;
+    };
+  }
+  return filterOption;
+};

package/src/components/Select/index.less

@@ -0,0 +1,5 @@
+.option {
+  &:hover {
+    background-color: #f5f5f5;
+  }
+}

package/src/components/Select/index.tsx

@@ -0,0 +1,108 @@
+import { Select } from "antd";
+import React from "react";
+import { useFilterOption, useOptionReq } from "./hooks/norHooks";
+import { useValueChange } from "./hooks/changeHooks";
+import type { HSelectProps } from "./modal";
+import {
+  defaultFieldNames,
+  defaultModeConfig,
+  defaultSelectConfig,
+} from "./defaultConfig";
+import DropdownComponent from "./components/DropdownComponent";
+import AllSelect from "./components/AllSelect";
+import { FieldNames } from "rc-select/lib/Select";
+const { Option } = Select;
+
+export default ({
+  style = { width: "100%" },
+  mode,
+  options,
+  modeConfig = defaultModeConfig,
+  value,
+  onChange,
+  fieldNames = defaultFieldNames,
+  request,
+  manual,
+  optionLabelProp = "label",
+  filterProvider,
+  optionFilterProp = "filterlabel",
+  serviceSearch,
+  onSearch: propsOnSearch,
+  filterOption,
+  showSearch,
+  labelInValue,
+  noMatchItemRender = defaultSelectConfig.noMatchItemRender,
+  allSelect,
+  ...props
+}: HSelectProps) => {
+  const { icon, render } = modeConfig?.[mode || ""] || {};
+  const selfFilterOption = useFilterOption({ filterOption, serviceSearch });
+  const { run, loading, data, error, onSearch } = useOptionReq({
+    options,
+    manual,
+    fieldNames,
+    request,
+    serviceSearch,
+  });
+  const { val, change } = useValueChange({
+    labelInValue,
+    onChange,
+    value,
+    options: data,
+    mode,
+    noMatchItemRender,
+  });
+  return (
+    <Select
+      style={style}
+      mode={mode}
+      loading={loading}
+      value={val}
+      onSearch={propsOnSearch || onSearch}
+      onChange={change}
+      dropdownRender={(node) => {
+        return (
+          <DropdownComponent
+            loading={loading}
+            reload={run}
+            error={error}
+            options={data}
+          >
+            <AllSelect
+              allSelect={allSelect}
+              options={data}
+              mode={mode}
+              value={val}
+              onChange={change}
+            />
+            {node}
+          </DropdownComponent>
+        );
+      }}
+      optionLabelProp={optionLabelProp}
+      menuItemSelectedIcon={icon}
+      optionFilterProp={optionFilterProp}
+      filterOption={selfFilterOption}
+      showSearch={showSearch}
+      labelInValue={true}
+      {...props}
+    >
+      {data?.map((item) => {
+        const { value: optionValue, label } = item;
+        const result = filterProvider?.(item) || label;
+        const filer = { [optionFilterProp]: result };
+        return (
+          <Option
+            value={optionValue}
+            key={optionValue}
+            label={label}
+            mode={mode}
+            {...filer}
+          >
+            {render ? render(item, val) : label}
+          </Option>
+        );
+      })}
+    </Select>
+  );
+};

package/src/components/Select/modal.ts

@@ -0,0 +1,30 @@
+import type { SelectProps } from "antd";
+import type React from "react";
+
+export type OptionType = Record<string, any>;
+export type PartialHSelectProps = Partial<HSelectProps>;
+export type RenderFn = (data: OptionType) => React.ReactNode;
+interface ModeConfigItem {
+  icon?: React.ReactNode | null;
+  render?: (item: OptionType, value: any[]) => React.ReactNode;
+}
+export interface ModeConfig {
+  multiple?: ModeConfigItem;
+  tags?: ModeConfigItem;
+}
+export interface HSelectProps extends Omit<SelectProps, "options"> {
+  style?: React.CSSProperties;
+  request?: (params: any) => Promise<OptionType[]>;
+  manual?: boolean;
+  modeConfig?: ModeConfig;
+  onChange?: (val: any) => void;
+  filterProvider?: (item: any) => string;
+  serviceSearch?: boolean;
+  options?: OptionType[];
+  noMatchItemRender?: RenderFn;
+  allSelect?: boolean;
+}
+export interface FilterDataModal {
+  value: any;
+  index: number;
+}

package/src/components/index.tsx

@@ -0,0 +1 @@
+export {default as HSelect} from './Select'

package/src/components/typings.d.ts

@@ -0,0 +1,11 @@
+declare module "*.css";
+declare module "*.less";
+declare module "*.scss";
+declare module "*.sass";
+declare module "*.svg";
+declare module "*.png";
+declare module "*.jpg";
+declare module "*.jpeg";
+declare module "*.gif";
+declare module "*.bmp";
+declare module "*.tiff";

package/src/index.less

@@ -0,0 +1,20 @@
+.layout {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+}
+.menu {
+  width: 256px !important;
+  height: 100vh;
+}
+
+.body {
+  width: calc(100vw - 256px);
+  height: 100vh;
+  padding: 16px;
+  overflow: hidden;
+  background-color: #fff;
+}

package/src/index.tsx

@@ -0,0 +1,12 @@
+import { render } from "react-dom";
+import App from "./app";
+import React from "react";
+import "antd/dist/antd.css";
+import zhCN from "antd/es/locale/zh_CN";
+import { ConfigProvider } from "antd";
+render(
+  <ConfigProvider locale={zhCN}>
+    <App />
+  </ConfigProvider>,
+  document.getElementById("root")
+);

package/src/pages/Select/index.tsx

@@ -0,0 +1,54 @@
+import { HSelect } from "../../components";
+import { Space, Card } from "antd";
+import { useState } from "react";
+export default () => {
+  return (
+    <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
+      <HSelect
+        options={[{ label: "测试", value: 1 }]}
+        value={100}
+        placeholder="基础"
+      />
+      <HSelect
+        fieldNames={{ label: "name", value: "value" }}
+        options={[
+          { name: "测试1", value: 10 },
+          { name: "测试2", value: 20 },
+        ]}
+        placeholder="多选"
+        mode={"multiple"}
+        allSelect={true}
+      />
+      <HSelect
+        mode={"tags"}
+        placeholder="tags模式"
+        showSearch={true}
+        options={[
+          { label: "测试1", value: 10 },
+          { label: "测试2", value: 20 },
+        ]}
+      />
+      <HSelect
+        serviceSearch={true}
+        request={(params) => {
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              resolve([
+                {
+                  label: `我是搜索文案${params.inputValue}`,
+                  value: new Date().valueOf(),
+                },
+                {
+                  label: `我是搜索文案${params.inputValue}`,
+                  value: new Date().valueOf() + 1,
+                },
+              ]);
+            }, 2000);
+          });
+        }}
+        placeholder="远程搜索"
+        mode={"multiple"}
+      />
+    </Space>
+  );
+};

package/src/routes.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Navigate } from "react-router-dom";
+import Select from "./pages/Select";
+export interface RouteModal {
+  path?: string;
+  name?: string;
+  children?: RouteModal[];
+  element?: JSX.Element;
+  index?: boolean;
+  errorElement?: JSX.Element;
+}
+
+const routes: RouteModal[] = [
+  {
+    index: true,
+    element: <Navigate to="/form/select" replace={true} />,
+  },
+  {
+    path: "/form",
+    name: "表单",
+    children: [
+      {
+        path: "/form/select",
+        name: "下拉框",
+        element: <Select />,
+      },
+    ],
+  },
+  {
+    path: "/table",
+    name: "列表",
+  },
+];
+
+export default routes;

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "allowUnreachableCode": true,
+    "allowUnusedLabels": false,
+    "alwaysStrict": false,
+    "baseUrl": ".",
+    "experimentalDecorators": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "module": "ESNext",
+    "noImplicitAny": false,
+    "removeComments": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "Node",
+    "strict": true,
+    "types": ["node"],
+    "target": "ESNext",
+    "outDir": "./build",
+    "declaration": true,
+    "allowJs": true,
+    "lib": ["es5", "es2015", "es2016", "es2017", "es2018", "dom"],
+    "typeRoots": ["./node_modules/@types/", "./src/typings.d.ts"],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "**/*.spec.ts", "**/*.css", "**/*.less"]
+}