@hw-component/form 0.0.1 → 0.0.3

package/src/components/Switch/index.tsx

@@ -0,0 +1,47 @@
+import type { SwitchProps } from "antd";
+import { Space, Switch } from "antd";
+import React, { useMemo } from "react";
+import { baseConfig } from "../config";
+interface IProps extends Omit<SwitchProps, "onChange"> {
+  valueCheckMap?: ValueCheckMapModal;
+  value?: any;
+  onChange?: (val: any) => void;
+  beforeText?: React.ReactNode;
+}
+const Index: React.FC<IProps> = ({
+  value,
+  onChange,
+  valueCheckMap = baseConfig.defaultValueSwitchMap,
+  children,
+  unCheckedChildren = "关闭",
+  checkedChildren = "开启",
+  beforeText,
+  ...props
+}) => {
+  const swChecked = useMemo(() => {
+    const { checked } = valueCheckMap;
+    return value === checked;
+  }, [value]);
+  const change = (checked) => {
+    let subVal = valueCheckMap?.noChecked;
+    if (checked) {
+      subVal = valueCheckMap?.checked;
+    }
+    onChange?.(subVal);
+  };
+  return (
+    <Space>
+      {beforeText}
+      <Switch
+        checked={swChecked}
+        checkedChildren={checkedChildren}
+        unCheckedChildren={unCheckedChildren}
+        onChange={change}
+        {...props}
+      />
+      <span>{children}</span>
+    </Space>
+  );
+};
+
+export default Index;

package/src/components/TimePicker/index.tsx

@@ -0,0 +1 @@
+export default () => {};

package/src/components/config.less

@@ -0,0 +1 @@
+@hw-prefix: hw;

package/src/components/config.ts

@@ -0,0 +1,15 @@
+export const baseConfig = {
+  defaultFieldNames: {
+    label: "label",
+    value: "value",
+  },
+  defaultValueCheckMap: {
+    checked: true,
+    noChecked: false,
+  },
+  defaultValueSwitchMap: {
+    checked: true,
+    noChecked: false,
+  },
+  prefixCls:"hw"
+};

package/src/components/hooks/useChangeOptions.ts

@@ -0,0 +1,22 @@
+import { useMemo } from "react";
+import type { SelectProps } from "antd";
+import { baseConfig } from "../config";
+
+interface UseChangeOptionsParams {
+  options?: Record<string, any>[];
+  fieldNames?: SelectProps["fieldNames"];
+}
+export const useChangeOptions = ({
+  options,
+  fieldNames = baseConfig.defaultFieldNames,
+}: UseChangeOptionsParams) => {
+  return useMemo(() => {
+    return options?.map((item) => {
+      const { label = "", value = "" } = fieldNames;
+      return {
+        label: item[label],
+        value: item[value],
+      };
+    });
+  }, [options]);
+};

package/src/components/hooks/useClassName.ts

@@ -0,0 +1,8 @@
+import {useMemo} from "react";
+import {baseConfig} from "@/components/config";
+
+export const useClassName=(className:string)=>{
+    return useMemo(()=>{
+          return `${baseConfig.prefixCls}-${className}`
+    },[className])
+}

package/src/components/index.tsx

@@ -1 +1,12 @@
-export {default as HSelect} from './Select'
+export { default as HSelect } from "./Select";
+export { default as HInput } from "./Input";
+export { default as HInputNumber } from "./Input/InputNumber";
+export { default as HSelectInput } from "./Input/SelectInput";
+export { default as HButtonInput } from "./Input/ButtonInput";
+export { default as HCheckboxGroup } from "./CheckboxGroup";
+export { default as HCheckBox } from "./CheckboxGroup/CheckBox";
+export { default as HRadioGroup } from "./RadioGroup";
+export { default as HSwitch } from "./Switch";
+export { default as HDatePicker } from "./DatePicker";
+export { default as HRangePicker } from "./DatePicker/RangePicker";
+

package/src/components/typings.d.ts

@@ -9,3 +9,8 @@ declare module "*.jpeg";
 declare module "*.gif";
 declare module "*.bmp";
 declare module "*.tiff";
+type PromiseFnResult<T = any, R = any> = (params: T) => Promise<R>;
+interface ValueCheckMapModal {
+  checked?: any;
+  noChecked?: any;
+}

package/src/pages/Checkbox/index.tsx

@@ -0,0 +1,16 @@
+import { Space } from "antd";
+import { HCheckboxGroup } from "../../components";
+export default () => {
+  return (
+    <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
+      <HCheckboxGroup
+        options={[{ label: "测试", value: "uu" }]}
+        value={{ uu: 0 }}
+        onChange={(value) => {
+          console.log(value);
+        }}
+        valueCheckMap={{ checked: 1, noChecked: 0 }}
+      />
+    </Space>
+  );
+};

package/src/pages/DatePicker/index.tsx

@@ -0,0 +1,15 @@
+import { Space } from "antd";
+import { HDatePicker ,HRangePicker} from "../../components";
+export default () => {
+  return (
+    <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
+      <HDatePicker
+        value={1691487319}
+        onChange={(val) => {
+          console.log(val);
+        }}
+      />
+      <HRangePicker/>
+    </Space>
+  );
+};

package/src/pages/Input/index.tsx

@@ -0,0 +1,22 @@
+import {
+  HInput,
+  HSelectInput,
+  HButtonInput,
+  HInputNumber,
+} from "../../components";
+import { Space } from "antd";
+export default () => {
+  return (
+    <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
+      <HInput placeholder="基础输入框" />
+      <HSelectInput
+        placeholder="基础输入框"
+        selectProps={{
+          options: [{ label: "1", value: 1 }],
+        }}
+      />
+      <HButtonInput>点我</HButtonInput>
+      <HInputNumber />
+    </Space>
+  );
+};

package/src/pages/Radio/index.tsx

@@ -0,0 +1,18 @@
+import { Space } from "antd";
+import { HRadioGroup } from "../../components";
+export default () => {
+  return (
+    <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
+      <HRadioGroup
+        options={[
+          { label: "测试2", value: "2" },
+          { label: "测试1", value: "1" },
+        ]}
+        value={"1"}
+        onChange={(value) => {
+          console.log(value);
+        }}
+      />
+    </Space>
+  );
+};

package/src/pages/Select/index.tsx

@@ -1,6 +1,5 @@
 import { HSelect } from "../../components";
-import { Space, Card } from "antd";
-import { useState } from "react";
+import { Space } from "antd";
 export default () => {
   return (
     <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>

package/src/pages/Switch/index.tsx

@@ -0,0 +1,18 @@
+import { Space } from "antd";
+import { HSwitch } from "../../components";
+export default () => {
+  return (
+    <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
+      <HSwitch
+        value={1}
+        beforeText="开关"
+        valueCheckMap={{ checked: 1, noChecked: 0 }}
+        onChange={(val) => {
+          console.log(val);
+        }}
+      >
+        打开
+      </HSwitch>
+    </Space>
+  );
+};

package/src/routes.tsx

@@ -1,6 +1,12 @@
 import React from "react";
 import { Navigate } from "react-router-dom";
 import Select from "./pages/Select";
+import Input from "./pages/Input";
+import CheckBox from "./pages/Checkbox";
+import Radio from "./pages/Radio";
+import Switch from "./pages/Switch";
+import DatePicker from "./pages/DatePicker";
+
 export interface RouteModal {
   path?: string;
   name?: string;
@@ -13,22 +19,37 @@ export interface RouteModal {
 const routes: RouteModal[] = [
   {
     index: true,
-    element: <Navigate to="/form/select" replace={true} />,
+    element: <Navigate to="/select" replace={true} />,
+  },
+  {
+    path: "/select",
+    name: "下拉框",
+    element: <Select />,
+  },
+  {
+    path: "/input",
+    name: "输入框",
+    element: <Input />,
+  },
+  {
+    path: "/checkbox",
+    name: "多选",
+    element: <CheckBox />,
+  },
+  {
+    path: "/radio",
+    name: "单选",
+    element: <Radio />,
   },
   {
-    path: "/form",
-    name: "表单",
-    children: [
-      {
-        path: "/form/select",
-        name: "下拉框",
-        element: <Select />,
-      },
-    ],
+    path: "/switch",
+    name: "开关",
+    element: <Switch />,
   },
   {
-    path: "/table",
-    name: "列表",
+    path: "/datePicker",
+    name: "时间",
+    element: <DatePicker />,
   },
 ];
 

package/es/Select/index.less.js

@@ -1,5 +0,0 @@
-// welcome to ww-building-blocks-tmp
-var styles = undefined;
-
-export { styles as default };
-// powered by ww

package/lib/Select/index.less.js

@@ -1,8 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styles = undefined;
-
-exports.default = styles;
-// powered by h