listpage-next 0.0.1

package/dist/components/FilterGroup/components/FilterForm/index.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement, ReactNode } from 'react';
+import { FormItemProps } from 'antd';
+import { ComponentType } from '../../typings';
+export interface FilterFormOption {
+    name: string;
+    label?: ReactNode;
+    component?: ComponentType | ReactElement;
+    colSpan?: number;
+    formItemProps?: Omit<FormItemProps, 'children'>;
+}
+export interface FilterFormProps<FormValue = any> {
+    options: FilterFormOption[];
+    initialValues?: FormValue;
+    onSubmit?: (values?: FormValue) => void;
+    onReset?: () => void;
+}
+export declare const FilterForm: <T = any>({ options, initialValues, onSubmit, onReset, }: FilterFormProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FilterGroup/components/FilterForm/index.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef } from "react";
+import { Button, Form, Space } from "antd";
+import { FilterGridLayout } from "../FilterGridLayout/index.js";
+import { getComponent } from "../../utils/getComponent.js";
+import { FilterItem } from "../FilterItem/index.js";
+const FilterForm = ({ options, initialValues, onSubmit, onReset })=>{
+    const formRef = useRef(null);
+    const items = useMemo(()=>(options ?? []).map(({ colSpan, component, label, ...props })=>{
+            const renderComponent = getComponent(component);
+            return {
+                key: props.name,
+                node: /*#__PURE__*/ jsx(FilterItem, {
+                    label: label,
+                    formItemProps: props,
+                    children: renderComponent
+                }),
+                colSpan: colSpan || 2
+            };
+        }), [
+        options
+    ]);
+    const handleSubmit = ()=>{
+        const values = formRef.current?.getFieldsValue();
+        onSubmit?.(values);
+    };
+    const handleReset = ()=>{
+        formRef.current?.resetFields();
+        onReset?.();
+    };
+    return /*#__PURE__*/ jsxs(Form, {
+        ref: formRef,
+        initialValues: initialValues ?? {},
+        children: [
+            /*#__PURE__*/ jsx(FilterGridLayout, {
+                items: items
+            }),
+            /*#__PURE__*/ jsxs(Space, {
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        onClick: handleSubmit,
+                        type: "primary",
+                        htmlType: "submit",
+                        children: "提交"
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        onClick: handleReset,
+                        htmlType: "reset",
+                        children: "重置"
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { FilterForm };

package/dist/components/FilterGroup/components/FilterGridLayout/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface FilterGridLayoutProps {
+    items: {
+        node: React.ReactNode;
+        key: string;
+        colSpan?: number;
+    }[];
+}
+export declare const FilterGridLayout: (props: FilterGridLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FilterGroup/components/FilterGridLayout/index.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import styled_components from "styled-components";
+const GridContainer = styled_components.div`
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 1rem;
+`;
+const GridItem = styled_components.div`
+  grid-column: span ${(props)=>props.$colSpan};
+`;
+const FilterGridLayout = (props)=>{
+    const { items } = props;
+    return /*#__PURE__*/ jsx(GridContainer, {
+        children: items.map((item, i)=>/*#__PURE__*/ jsx(GridItem, {
+                $colSpan: item.colSpan || 12,
+                children: item.node
+            }, item.key))
+    });
+};
+export { FilterGridLayout };

package/dist/components/FilterGroup/components/FilterItem/index.d.ts

@@ -0,0 +1,8 @@
+import { FormItemProps } from 'antd';
+import { ReactElement, ReactNode } from 'react';
+export interface FilterItemProps {
+    label?: ReactNode;
+    children: ReactElement;
+    formItemProps: FormItemProps;
+}
+export declare const FilterItem: (props: FilterItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FilterGroup/components/FilterItem/index.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { Form } from "antd";
+import { LabelWrapper } from "../LabelWrapper/index.js";
+import { cloneElement, useState } from "react";
+import { omit } from "lodash";
+const FilterItem = (props)=>{
+    const { label, children, formItemProps } = props;
+    const [focus, setFocus] = useState(false);
+    return /*#__PURE__*/ jsx(Form.Item, {
+        ...omit(formItemProps, [
+            'name'
+        ]),
+        shouldUpdate: true,
+        noStyle: true,
+        children: (form)=>{
+            const errors = form.getFieldError(formItemProps.name);
+            const value = form.getFieldValue(formItemProps.name);
+            const valuePropName = formItemProps.valuePropName || 'value';
+            const triggerPropsName = formItemProps.trigger || 'onChange';
+            const onChange = (v)=>{
+                form.setFieldValue(formItemProps.name, v);
+            };
+            const onFocus = ()=>{
+                setFocus(true);
+            };
+            const onBlur = ()=>{
+                setFocus(false);
+            };
+            const realChildren = /*#__PURE__*/ cloneElement(children, {
+                [valuePropName]: value,
+                [triggerPropsName]: onChange,
+                onFocus,
+                onBlur
+            });
+            const disabled = children.props.disabled;
+            const status = disabled ? 'disabled' : focus ? 'focused' : errors?.length ? 'error' : void 0;
+            return /*#__PURE__*/ jsx(LabelWrapper, {
+                status: status,
+                errors: errors,
+                label: label,
+                children: realChildren
+            });
+        }
+    });
+};
+export { FilterItem };

package/dist/components/FilterGroup/components/LabelWrapper/index.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement, ReactNode } from 'react';
+export interface LabelWrapperProps<V = any> {
+    label?: ReactNode;
+    status?: 'disabled' | 'error' | 'focused';
+    children: ReactElement;
+    errors?: string[];
+}
+export declare const LabelWrapper: <T = any>({ label, status, children, errors, }: LabelWrapperProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FilterGroup/components/LabelWrapper/index.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled_components from "styled-components";
+const WrapperContainer = styled_components.div`
+  position: relative;
+  margin-bottom: 1.5rem;
+`;
+const ChildrenContainer = styled_components.div`
+  & > div {
+    width: 100%;
+  }
+`;
+const Label = styled_components.label`
+  position: absolute;
+  left: 1rem;
+  top: -10px;
+  background: transparent;
+  padding: 0 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 400;
+  z-index: 10;
+  transition: all 0.2s ease-in-out;
+
+  /* 使用 text-shadow 为文字添加白色背景效果 */
+  text-shadow:
+    -3px -3px 0 white,
+    2px -2px 0 white,
+    -2px 2px 0 white,
+    2px 2px 0 white,
+    0 -3px 2px white,
+    0 3px 2px white,
+    -3px 0 2px white,
+    3px 0 2px white,
+    -1px -1px 1px white,
+    1px -1px 1px white,
+    -1px 1px 1px white,
+    1px 1px 1px white;
+
+  color: ${(props)=>{
+    if ('disabled' === props.$status) return '#9ca3af';
+    if ('error' === props.$status) return '#ef4444';
+    if ('focused' === props.$status) return '#3b82f6';
+    return '#374151';
+}};
+`;
+const ErrorMessage = styled_components.div`
+  color: #ef4444;
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+`;
+const LabelWrapper = ({ label, status, children, errors = [] })=>/*#__PURE__*/ jsxs(WrapperContainer, {
+        children: [
+            /*#__PURE__*/ jsx(Label, {
+                htmlFor: "label",
+                $status: status,
+                children: label
+            }),
+            /*#__PURE__*/ jsx(ChildrenContainer, {
+                children: children
+            }),
+            errors?.length > 0 && /*#__PURE__*/ jsx(ErrorMessage, {
+                children: errors.join(', ')
+            })
+        ]
+    });
+export { LabelWrapper };

package/dist/components/FilterGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { FilterForm } from './components/FilterForm';
+export type { FilterFormOption } from './components/FilterForm';

package/dist/components/FilterGroup/index.js

@@ -0,0 +1,2 @@
+import { FilterForm } from "./components/FilterForm/index.js";
+export { FilterForm };

package/dist/components/FilterGroup/typings/component.d.ts

@@ -0,0 +1 @@
+export type ComponentType = 'input' | 'select';

package/dist/components/FilterGroup/typings/index.d.ts

@@ -0,0 +1 @@
+export * from './component';

package/dist/components/FilterGroup/typings/index.js

@@ -0,0 +1 @@
+export * from "./component.js";

package/dist/components/FilterGroup/utils/getComponent.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { ComponentType } from '../typings/component';
+export declare const getComponent: (component?: ReactElement | ComponentType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FilterGroup/utils/getComponent.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { Input, Select } from "antd";
+const EnhancedInput = (props)=>/*#__PURE__*/ jsx(Input, {
+        ...props,
+        onChange: (e)=>props.onChange?.(e.target.value)
+    });
+const getComponent = (component)=>{
+    if ('string' == typeof component) {
+        const type = component;
+        if ('input' === type) return /*#__PURE__*/ jsx(EnhancedInput, {});
+        if ('select' === type) return /*#__PURE__*/ jsx(Select, {});
+    }
+    if (component) return component;
+    return /*#__PURE__*/ jsx(EnhancedInput, {});
+};
+export { getComponent };

package/dist/demos/demo1.d.ts

@@ -0,0 +1 @@
+export declare const Demo1: () => import("react/jsx-runtime").JSX.Element;

package/dist/demos/demo1.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { DatePicker, Select } from "antd";
+import { FilterForm } from "../index.js";
+const Demo1 = ()=>{
+    const options = [
+        {
+            name: 'title',
+            label: '标题',
+            component: 'input'
+        },
+        {
+            name: 'type',
+            label: '类型',
+            component: /*#__PURE__*/ jsx(Select, {})
+        },
+        {
+            name: 'region',
+            label: '区域',
+            component: /*#__PURE__*/ jsx(Select, {})
+        },
+        {
+            name: 'dateRange',
+            label: '发布日期',
+            component: /*#__PURE__*/ jsx(DatePicker.RangePicker, {}),
+            colSpan: 4
+        }
+    ];
+    const onSubmit = (values)=>{
+        console.log(values);
+    };
+    return /*#__PURE__*/ jsx(FilterForm, {
+        options: options,
+        onSubmit: onSubmit
+    });
+};
+export { Demo1 };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import '@ant-design/v5-patch-for-react-19';
+export { FilterForm } from './components/FilterGroup';

package/dist/index.js

@@ -0,0 +1,3 @@
+import "@ant-design/v5-patch-for-react-19";
+import { FilterForm } from "./components/FilterGroup/index.js";
+export { FilterForm };

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "listpage-next",
+  "version": "0.0.1",
+  "description": "A React component library for creating filter forms with Ant Design",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "react",
+    "antd",
+    "filter",
+    "form",
+    "component",
+    "typescript"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "rslib build",
+    "dev": "npx storybook dev",
+    "format": "prettier --write .",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^1.5.7",
+    "@rsbuild/plugin-react": "^1.4.0",
+    "@rslib/core": "^0.13.3",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@types/lodash": "^4.17.20",
+    "@types/react": "^19.1.13",
+    "@types/styled-components": "^5.1.34",
+    "prettier": "^3.6.2",
+    "react": "^19.1.1",
+    "storybook": "^8.6.14",
+    "storybook-addon-rslib": "^1.0.3",
+    "storybook-react-rsbuild": "^1.0.3",
+    "@storybook/test": "^8.6.14",
+    "@ant-design/v5-patch-for-react-19": "^1.0.3",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "dependencies": {
+    "ahooks": "^3.9.5",
+    "antd": "^5.27.3",
+    "dayjs": "^1.11.18",
+    "lodash": "^4.17.21",
+    "styled-components": "^6.1.19"
+  }
+}