foxit-component 0.0.0-alpha.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +45 -0
- package/es/Button/Button.d.ts +13 -0
- package/es/Button/Button.js +12 -0
- package/es/Checkbox/Checkbox.d.ts +18 -0
- package/es/Checkbox/Checkbox.js +49 -0
- package/es/Empty/Empty.d.ts +7 -0
- package/es/Empty/Empty.js +10 -0
- package/es/Form/Form.d.ts +14 -0
- package/es/Form/Form.js +37 -0
- package/es/Form/Form.types.d.ts +39 -0
- package/es/Form/FormContext.d.ts +3 -0
- package/es/Form/FormContext.js +5 -0
- package/es/Form/FormItem.d.ts +16 -0
- package/es/Form/FormItem.js +34 -0
- package/es/Form/FormProvider.d.ts +10 -0
- package/es/Form/FormProvider.js +215 -0
- package/es/Icon/index.d.ts +7 -0
- package/es/Icon/index.js +9 -0
- package/es/Input/Input.d.ts +14 -0
- package/es/Input/Input.js +29 -0
- package/es/Menu/Menu.d.ts +22 -0
- package/es/Menu/Menu.js +49 -0
- package/es/Modal/Modal.d.ts +20 -0
- package/es/Modal/Modal.js +123 -0
- package/es/Modal/ModalTemp.d.ts +11 -0
- package/es/Modal/ModalTemp.js +75 -0
- package/es/Pagination/Pagination.d.ts +11 -0
- package/es/Pagination/Pagination.js +90 -0
- package/es/Radio/Radio.d.ts +18 -0
- package/es/Radio/Radio.js +44 -0
- package/es/Select/Select.d.ts +26 -0
- package/es/Select/Select.js +56 -0
- package/es/Switch/Switch.d.ts +9 -0
- package/es/Switch/Switch.js +20 -0
- package/es/Table/Table.d.ts +17 -0
- package/es/Table/Table.js +19 -0
- package/es/Tabs/Tabs.d.ts +14 -0
- package/es/Tabs/Tabs.js +21 -0
- package/es/Tag/Tag.d.ts +8 -0
- package/es/Tag/Tag.js +10 -0
- package/es/Toast/Toast.d.ts +5 -0
- package/es/Toast/Toast.js +43 -0
- package/es/Toast/Toast.types.d.ts +5 -0
- package/es/Toast/ToastContainer.d.ts +3 -0
- package/es/Toast/ToastContainer.js +46 -0
- package/es/Toast/ToastManager.d.ts +8 -0
- package/es/Toast/ToastManager.js +19 -0
- package/es/Toast/index.d.ts +8 -0
- package/es/Toast/index.js +39 -0
- package/es/Tooltip/Tooltip.d.ts +8 -0
- package/es/Tooltip/Tooltip.js +30 -0
- package/es/constants/icons.d.ts +27 -0
- package/es/constants/icons.js +32 -0
- package/es/index.css +1 -0
- package/es/index.d.ts +33 -0
- package/es/index.js +18 -0
- package/es/node_modules/tslib/tslib.es6.js +94 -0
- package/package.json +99 -0
package/README.md
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
# Foxit Component
|
|
2
|
+
组件库
|
|
3
|
+
|
|
4
|
+
# 发包原则问题
|
|
5
|
+
在 npm 和软件版本管理中,版本号(Versioning)遵循 语义化版本控制(Semantic Versioning,简称 SemVer)的规则。版本号通常采用三位数的格式:MAJOR.MINOR.PATCH。
|
|
6
|
+
|
|
7
|
+
除了常见的正式版本,还有一些用于标识开发阶段的版本号标签,通常包括 alpha、beta 这些标签帮助开发者和使用者理解软件处于哪个发布阶段。
|
|
8
|
+
|
|
9
|
+
## Alpha 版本 (alpha)
|
|
10
|
+
描述:alpha 版本通常是开发中的早期版本,功能未完全实现,可能有大量的 bug 或不稳定的特性,适合开发者和早期测试者使用。
|
|
11
|
+
命名规则:通常以 MAJOR.MINOR.PATCH-alpha.N 的格式表示,其中 N 是从 1 开始的递增数字。
|
|
12
|
+
例子:
|
|
13
|
+
1.0.0-alpha.1
|
|
14
|
+
1.0.0-alpha.2
|
|
15
|
+
1.0.0-alpha.3
|
|
16
|
+
|
|
17
|
+
## Beta 版本 (beta)
|
|
18
|
+
描述:beta 版本通常是开发中的后期版本,功能已经基本完成,可能已经解决了一些 bug,但仍可能存在问题。它是给开发者、测试人员或对新功能感兴趣的用户使用的版本。
|
|
19
|
+
命名规则:MAJOR.MINOR.PATCH-beta.N,N 是递增的数字。
|
|
20
|
+
例子:
|
|
21
|
+
1.0.0-beta.1
|
|
22
|
+
1.0.0-beta.2
|
|
23
|
+
1.0.0-beta.3
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
## 正式版本 (stable, final)
|
|
27
|
+
描述:正式版本是经过充分测试,功能和 API 已经稳定,适合最终用户使用。它没有附加的标签,直接用 MAJOR.MINOR.PATCH 格式发布。
|
|
28
|
+
命名规则:MAJOR.MINOR.PATCH
|
|
29
|
+
例子:
|
|
30
|
+
1.0.0
|
|
31
|
+
2.0.0
|
|
32
|
+
1.1.0
|
|
33
|
+
|
|
34
|
+
## 发包示例
|
|
35
|
+
```jsx
|
|
36
|
+
alpha:
|
|
37
|
+
npm version 1.0.0-alpha.1
|
|
38
|
+
npm publish --tag alpha
|
|
39
|
+
beta:
|
|
40
|
+
npm version 1.0.0-beta.1
|
|
41
|
+
npm publish --tag beta
|
|
42
|
+
正式:
|
|
43
|
+
npm version 1.0.0
|
|
44
|
+
npm publish
|
|
45
|
+
```
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import './button.css';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface ButtonProps {
|
|
4
|
+
primary?: boolean;
|
|
5
|
+
size?: 'small' | 'medium' | 'large';
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
onClick?: () => void;
|
|
8
|
+
className?: string;
|
|
9
|
+
style?: React.CSSProperties;
|
|
10
|
+
[key: string]: unknown;
|
|
11
|
+
loading?: boolean;
|
|
12
|
+
}
|
|
13
|
+
export declare const Button: ({ primary, size, children, className, style, loading, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { __rest, __assign } from '../node_modules/tslib/tslib.es6.js';
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import { Icon } from '../Icon/index.js';
|
|
5
|
+
|
|
6
|
+
var Button = function (_a) {
|
|
7
|
+
var _b = _a.primary, primary = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.children, children = _d === void 0 ? '' : _d, className = _a.className, style = _a.style, loading = _a.loading, props = __rest(_a, ["primary", "size", "children", "className", "style", "loading"]);
|
|
8
|
+
var mode = primary ? 'foxit-button-primary' : 'foxit-button-secondary';
|
|
9
|
+
return (jsxs("button", __assign({ type: "button", className: classNames('foxit-button', "foxit-button-".concat(size), mode, className), style: style }, props, { children: [loading && jsx(Icon, { name: "LoadingOutlined", className: "foxit-button-loading" }), children] })));
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export { Button };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React, { FC } from 'react';
|
|
2
|
+
import './checkbox.css';
|
|
3
|
+
interface CheckboxProps {
|
|
4
|
+
onChange?: (checked: boolean) => void;
|
|
5
|
+
checked?: boolean;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
value?: string;
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
}
|
|
10
|
+
interface CheckboxGroupProps {
|
|
11
|
+
value?: string[];
|
|
12
|
+
onChange?: (checkedValues: string[]) => void;
|
|
13
|
+
children: React.ReactNode;
|
|
14
|
+
}
|
|
15
|
+
declare const Checkbox: React.FC<CheckboxProps> & {
|
|
16
|
+
Group: FC<CheckboxGroupProps>;
|
|
17
|
+
};
|
|
18
|
+
export default Checkbox;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { __assign, __spreadArray } from '../node_modules/tslib/tslib.es6.js';
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { createContext, useContext, useState, useEffect } from 'react';
|
|
4
|
+
|
|
5
|
+
var CheckboxGroupContext = createContext(null);
|
|
6
|
+
var Checkbox = function (_a) {
|
|
7
|
+
var onChange = _a.onChange, checked = _a.checked, _b = _a.disabled, disabled = _b === void 0 ? false : _b, value = _a.value, children = _a.children;
|
|
8
|
+
var groupContext = useContext(CheckboxGroupContext);
|
|
9
|
+
var _c = useState(checked || false), internalChecked = _c[0], setInternalChecked = _c[1];
|
|
10
|
+
useEffect(function () {
|
|
11
|
+
if (checked !== undefined) {
|
|
12
|
+
setInternalChecked(checked);
|
|
13
|
+
}
|
|
14
|
+
}, [checked]);
|
|
15
|
+
var handleChange = function (e) {
|
|
16
|
+
var newChecked = e.target.checked;
|
|
17
|
+
setInternalChecked(newChecked);
|
|
18
|
+
if (onChange) {
|
|
19
|
+
onChange(newChecked);
|
|
20
|
+
}
|
|
21
|
+
if (groupContext && value) {
|
|
22
|
+
groupContext.onChange(value, newChecked);
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
var isChecked = groupContext ? groupContext.value.includes(value || '') : internalChecked;
|
|
26
|
+
return (jsxs("label", __assign({ className: "foxit-checkbox-container ".concat(disabled ? 'disabled' : '') }, { children: [jsx("input", { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange }), jsx("span", { className: "foxit-checkbox-checkmark ".concat(disabled ? 'disabled' : '') }), jsx("span", __assign({ className: "foxit-checkbox-content" }, { children: children }))] })));
|
|
27
|
+
};
|
|
28
|
+
var CheckboxGroup = function (_a) {
|
|
29
|
+
var value = _a.value, onChange = _a.onChange, children = _a.children;
|
|
30
|
+
var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
|
|
31
|
+
useEffect(function () {
|
|
32
|
+
if (value !== undefined) {
|
|
33
|
+
setCheckedValues(value);
|
|
34
|
+
}
|
|
35
|
+
}, [value]);
|
|
36
|
+
var handleCheckboxChange = function (checkboxValue, checked) {
|
|
37
|
+
var newCheckedValues = checked
|
|
38
|
+
? __spreadArray(__spreadArray([], checkedValues, true), [checkboxValue], false) : checkedValues.filter(function (v) { return v !== checkboxValue; });
|
|
39
|
+
setCheckedValues(newCheckedValues);
|
|
40
|
+
if (onChange) {
|
|
41
|
+
onChange(newCheckedValues);
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
var currentValue = value !== undefined ? value : checkedValues;
|
|
45
|
+
return (jsx(CheckboxGroupContext.Provider, __assign({ value: { value: currentValue, onChange: handleCheckboxChange } }, { children: jsx("div", __assign({ className: "foxit-checkbox-group" }, { children: children })) })));
|
|
46
|
+
};
|
|
47
|
+
Checkbox.Group = CheckboxGroup;
|
|
48
|
+
|
|
49
|
+
export { Checkbox as default };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { __assign } from '../node_modules/tslib/tslib.es6.js';
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { Icon } from '../Icon/index.js';
|
|
4
|
+
|
|
5
|
+
var Empty = function (_a) {
|
|
6
|
+
var description = _a.description;
|
|
7
|
+
return (jsxs("div", __assign({ className: "foxit-empty" }, { children: [jsx("div", __assign({ className: "foxit-empty-image" }, { children: jsx(Icon, { name: "EmptyColoursOutlined" }) })), jsx("div", __assign({ className: "foxit-empty-description" }, { children: description }))] })));
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export { Empty as default };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
import { FormRefInstance } from './Form.types';
|
|
3
|
+
import FormItem from './FormItem';
|
|
4
|
+
export type { FormRefInstance } from './Form.types';
|
|
5
|
+
interface FormProps {
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
onFinish?: (values: unknown) => void;
|
|
8
|
+
initialValues?: {
|
|
9
|
+
[key: string]: unknown;
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
export { FormItem };
|
|
13
|
+
declare const _default: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<FormRefInstance>>;
|
|
14
|
+
export default _default;
|
package/es/Form/Form.js
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { __assign } from '../node_modules/tslib/tslib.es6.js';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { forwardRef, useRef, useCallback, useImperativeHandle } from 'react';
|
|
4
|
+
import FormProvider from './FormProvider.js';
|
|
5
|
+
import './FormContext.js';
|
|
6
|
+
|
|
7
|
+
var Form = function (_a, ref) {
|
|
8
|
+
var children = _a.children, onFinish = _a.onFinish, initialValues = _a.initialValues;
|
|
9
|
+
var formRef = useRef(null);
|
|
10
|
+
var handleSubmit = useCallback(function (e) {
|
|
11
|
+
var _a;
|
|
12
|
+
e.preventDefault();
|
|
13
|
+
if (onFinish) {
|
|
14
|
+
if (onFinish && formRef.current) {
|
|
15
|
+
(_a = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _a === void 0 ? void 0 : _a.validateFields().then(function (values) {
|
|
16
|
+
onFinish(values);
|
|
17
|
+
}).catch(function (errors) {
|
|
18
|
+
console.error('Validation errors:', errors);
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}, [onFinish]);
|
|
23
|
+
useImperativeHandle(ref, function () {
|
|
24
|
+
var _a, _b, _c, _d, _e;
|
|
25
|
+
return ({
|
|
26
|
+
setFieldsValue: (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.setFieldsValue,
|
|
27
|
+
getFieldsValue: (_b = formRef.current) === null || _b === void 0 ? void 0 : _b.getFieldsValue,
|
|
28
|
+
resetFields: (_c = formRef.current) === null || _c === void 0 ? void 0 : _c.resetFields,
|
|
29
|
+
validateFields: (_d = formRef.current) === null || _d === void 0 ? void 0 : _d.validateFields,
|
|
30
|
+
setFieldsStatus: (_e = formRef.current) === null || _e === void 0 ? void 0 : _e.setFieldsStatus
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
return (jsx(FormProvider, __assign({ initialValues: initialValues, ref: formRef }, { children: jsx("form", __assign({ onSubmit: handleSubmit }, { children: children })) })));
|
|
34
|
+
};
|
|
35
|
+
var Form$1 = forwardRef(Form);
|
|
36
|
+
|
|
37
|
+
export { Form$1 as default };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
export interface FormField {
|
|
2
|
+
value: unknown;
|
|
3
|
+
error?: string;
|
|
4
|
+
warning?: string;
|
|
5
|
+
rules?: ValidationRule[];
|
|
6
|
+
}
|
|
7
|
+
export interface ValidationRule {
|
|
8
|
+
required?: boolean;
|
|
9
|
+
message?: string;
|
|
10
|
+
type?: 'email' | 'number' | 'string' | 'min' | 'max';
|
|
11
|
+
min?: number;
|
|
12
|
+
max?: number;
|
|
13
|
+
}
|
|
14
|
+
export interface FormInstance {
|
|
15
|
+
setFieldsValue: (values: {
|
|
16
|
+
[key: string]: unknown;
|
|
17
|
+
}) => void;
|
|
18
|
+
getFieldsValue: (names?: string[]) => {
|
|
19
|
+
[key: string]: unknown;
|
|
20
|
+
};
|
|
21
|
+
resetFields: (names?: string[]) => void;
|
|
22
|
+
validateFields: (names?: string[]) => Promise<{
|
|
23
|
+
[key: string]: unknown;
|
|
24
|
+
}>;
|
|
25
|
+
setFieldsStatus: (status: {
|
|
26
|
+
type: 'error' | 'warning';
|
|
27
|
+
name: string | string[];
|
|
28
|
+
message: string;
|
|
29
|
+
}[]) => void;
|
|
30
|
+
registerField: (name: string, rules: ValidationRule[]) => void;
|
|
31
|
+
unregisterField: (name: string) => void;
|
|
32
|
+
}
|
|
33
|
+
export type FormRefInstance = Omit<FormInstance, 'registerField' | 'unregisterField'>;
|
|
34
|
+
export interface FormContextProps {
|
|
35
|
+
form: FormInstance;
|
|
36
|
+
formFields: {
|
|
37
|
+
[key: string]: FormField;
|
|
38
|
+
};
|
|
39
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
import './form.css';
|
|
3
|
+
interface FormItemProps {
|
|
4
|
+
name: string;
|
|
5
|
+
label?: string;
|
|
6
|
+
rules?: {
|
|
7
|
+
required?: boolean;
|
|
8
|
+
message?: string;
|
|
9
|
+
type?: 'email' | 'number' | 'string' | 'min' | 'max';
|
|
10
|
+
min?: number;
|
|
11
|
+
max?: number;
|
|
12
|
+
}[];
|
|
13
|
+
children: ReactNode;
|
|
14
|
+
}
|
|
15
|
+
declare const FormItem: React.FC<FormItemProps>;
|
|
16
|
+
export default FormItem;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { __assign } from '../node_modules/tslib/tslib.es6.js';
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import React, { useContext, useEffect, useCallback } from 'react';
|
|
4
|
+
import { FormContext } from './FormContext.js';
|
|
5
|
+
|
|
6
|
+
var FormItem = function (_a) {
|
|
7
|
+
var _b, _c, _d;
|
|
8
|
+
var name = _a.name, label = _a.label, _e = _a.rules, rules = _e === void 0 ? [] : _e, children = _a.children;
|
|
9
|
+
var _f = useContext(FormContext), form = _f.form, formFields = _f.formFields;
|
|
10
|
+
// Register field when component mounts
|
|
11
|
+
useEffect(function () {
|
|
12
|
+
form.registerField(name, rules);
|
|
13
|
+
return function () {
|
|
14
|
+
form.unregisterField(name);
|
|
15
|
+
};
|
|
16
|
+
}, []);
|
|
17
|
+
var error = (_b = formFields[name]) === null || _b === void 0 ? void 0 : _b.error;
|
|
18
|
+
var warning = (_c = formFields[name]) === null || _c === void 0 ? void 0 : _c.warning;
|
|
19
|
+
var value = (_d = formFields[name]) === null || _d === void 0 ? void 0 : _d.value;
|
|
20
|
+
var handleChange = useCallback(function (e) {
|
|
21
|
+
var _a;
|
|
22
|
+
var _b;
|
|
23
|
+
var newValue = ((_b = e === null || e === void 0 ? void 0 : e.target) === null || _b === void 0 ? void 0 : _b.value) !== undefined ? e.target.value : e;
|
|
24
|
+
form.setFieldsValue((_a = {}, _a[name] = newValue, _a));
|
|
25
|
+
}, [form, name]);
|
|
26
|
+
return (jsxs("div", __assign({ className: "foxit-form-item" }, { children: [label && jsx("label", { children: label }), jsx("span", __assign({ className: "".concat(error ? 'foxit-form-error-component' : warning ? 'foxit-form-warning-component' : '') }, { children: React.Children.map(children, function (child) {
|
|
27
|
+
return React.cloneElement(child, {
|
|
28
|
+
value: value,
|
|
29
|
+
onChange: handleChange
|
|
30
|
+
});
|
|
31
|
+
}) })), error && jsx("div", __assign({ className: "foxit-form-error-text" }, { children: error })), warning && jsx("div", __assign({ className: "foxit-form-warning-text" }, { children: warning }))] })));
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export { FormItem as default };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FormInstance } from './Form.types';
|
|
3
|
+
interface FormProviderProps {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
initialValues?: {
|
|
6
|
+
[key: string]: unknown;
|
|
7
|
+
};
|
|
8
|
+
}
|
|
9
|
+
declare const _default: React.ForwardRefExoticComponent<FormProviderProps & React.RefAttributes<FormInstance>>;
|
|
10
|
+
export default _default;
|
|
@@ -0,0 +1,215 @@
|
|
|
1
|
+
import { __assign } from '../node_modules/tslib/tslib.es6.js';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
|
|
4
|
+
import { FormContext } from './FormContext.js';
|
|
5
|
+
|
|
6
|
+
var FormProvider = function (_a, ref) {
|
|
7
|
+
var children = _a.children, _b = _a.initialValues, initialValues = _b === void 0 ? {} : _b;
|
|
8
|
+
var formFieldsRef = useRef({});
|
|
9
|
+
var _c = useState({}), forceUpdate = _c[1]; // Used to force re-render when ref changes
|
|
10
|
+
var formInstanceRef = useRef({});
|
|
11
|
+
// 初始值的设置
|
|
12
|
+
useEffect(function () {
|
|
13
|
+
if (Object.keys(initialValues).length > 0) {
|
|
14
|
+
formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
|
|
15
|
+
for (var key in initialValues) {
|
|
16
|
+
if (!formFieldsRef.current[key]) {
|
|
17
|
+
formFieldsRef.current[key] = { value: initialValues[key], rules: [] };
|
|
18
|
+
}
|
|
19
|
+
else {
|
|
20
|
+
formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { value: initialValues[key] });
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
forceUpdate({}); // Trigger re-render
|
|
24
|
+
}
|
|
25
|
+
}, [initialValues]);
|
|
26
|
+
// 注册字段
|
|
27
|
+
var registerField = useCallback(function (name, rules) {
|
|
28
|
+
formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
|
|
29
|
+
formFieldsRef.current[name] = __assign(__assign({}, formFieldsRef.current[name]), { rules: rules || [] });
|
|
30
|
+
forceUpdate({}); // Trigger re-render
|
|
31
|
+
}, []);
|
|
32
|
+
// 销毁字段
|
|
33
|
+
var unregisterField = useCallback(function (name) {
|
|
34
|
+
formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
|
|
35
|
+
delete formFieldsRef.current[name];
|
|
36
|
+
forceUpdate({}); // Trigger re-render
|
|
37
|
+
}, []);
|
|
38
|
+
// 验证字段
|
|
39
|
+
var validateField = useCallback(function (name, value, rules) {
|
|
40
|
+
for (var _i = 0, rules_1 = rules; _i < rules_1.length; _i++) {
|
|
41
|
+
var rule = rules_1[_i];
|
|
42
|
+
if (rule.required &&
|
|
43
|
+
(value === undefined ||
|
|
44
|
+
value === '' ||
|
|
45
|
+
value === null ||
|
|
46
|
+
(Array.isArray(value) && value.length === 0) ||
|
|
47
|
+
(typeof value === 'object' && Object.keys(value).length === 0))) {
|
|
48
|
+
return { type: 'error', message: rule.message || 'This field is required' };
|
|
49
|
+
}
|
|
50
|
+
if (rule.type === 'email' && value && !/\S+@\S+\.\S+/.test(value)) {
|
|
51
|
+
return { type: 'error', message: rule.message || 'The input is not valid E-mail' };
|
|
52
|
+
}
|
|
53
|
+
if (rule.type === 'number' && value && isNaN(Number(value))) {
|
|
54
|
+
return { type: 'error', message: rule.message || 'The input is not a number' };
|
|
55
|
+
}
|
|
56
|
+
if (rule.type === 'string' && typeof value !== 'string') {
|
|
57
|
+
return { type: 'error', message: rule.message || 'The input is not a string' };
|
|
58
|
+
}
|
|
59
|
+
if (rule.min !== undefined && typeof value === 'string' && value.length < rule.min) {
|
|
60
|
+
return {
|
|
61
|
+
type: 'error',
|
|
62
|
+
message: rule.message || "The input is less than ".concat(rule.min, " characters")
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
if (rule.max !== undefined && typeof value === 'string' && value.length > rule.max) {
|
|
66
|
+
return {
|
|
67
|
+
type: 'error',
|
|
68
|
+
message: rule.message || "The input is more than ".concat(rule.max, " characters")
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
return undefined;
|
|
73
|
+
}, []);
|
|
74
|
+
// 设置字段值
|
|
75
|
+
var setFieldsValue = useCallback(function (values) {
|
|
76
|
+
var _a;
|
|
77
|
+
formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
|
|
78
|
+
for (var key in values) {
|
|
79
|
+
if (Object.prototype.hasOwnProperty.call(values, key)) {
|
|
80
|
+
var newValue = values[key];
|
|
81
|
+
formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { value: newValue });
|
|
82
|
+
// 验证字段
|
|
83
|
+
var validation = validateField(key, newValue, ((_a = formFieldsRef.current[key]) === null || _a === void 0 ? void 0 : _a.rules) || []);
|
|
84
|
+
if (validation) {
|
|
85
|
+
if (validation.type === 'error') {
|
|
86
|
+
formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { error: validation.message, warning: undefined // Clear any previous warnings
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
else if (validation.type === 'warning') {
|
|
90
|
+
formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { warning: validation.message, error: undefined // Clear any previous errors
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
else {
|
|
95
|
+
formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { error: undefined, warning: undefined });
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
forceUpdate({}); // Trigger re-render
|
|
100
|
+
}, [validateField]);
|
|
101
|
+
// 获取字段值
|
|
102
|
+
var getFieldsValue = useCallback(function (names) {
|
|
103
|
+
if (!names) {
|
|
104
|
+
return Object.keys(formFieldsRef.current).reduce(function (acc, key) {
|
|
105
|
+
acc[key] = formFieldsRef.current[key].value;
|
|
106
|
+
return acc;
|
|
107
|
+
}, {});
|
|
108
|
+
}
|
|
109
|
+
return names.reduce(function (acc, key) {
|
|
110
|
+
var _a;
|
|
111
|
+
acc[key] = (_a = formFieldsRef.current[key]) === null || _a === void 0 ? void 0 : _a.value;
|
|
112
|
+
return acc;
|
|
113
|
+
}, {});
|
|
114
|
+
}, []);
|
|
115
|
+
// 重置字段
|
|
116
|
+
var resetFields = useCallback(function (names) {
|
|
117
|
+
formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
|
|
118
|
+
if (names) {
|
|
119
|
+
names.forEach(function (name) {
|
|
120
|
+
if (formFieldsRef.current[name]) {
|
|
121
|
+
formFieldsRef.current[name].value = initialValues[name] || '';
|
|
122
|
+
formFieldsRef.current[name].error = undefined;
|
|
123
|
+
formFieldsRef.current[name].warning = undefined;
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
else {
|
|
128
|
+
Object.keys(formFieldsRef.current).forEach(function (key) {
|
|
129
|
+
formFieldsRef.current[key].value = initialValues[key] || '';
|
|
130
|
+
formFieldsRef.current[key].error = undefined;
|
|
131
|
+
formFieldsRef.current[key].warning = undefined;
|
|
132
|
+
});
|
|
133
|
+
}
|
|
134
|
+
forceUpdate({}); // Trigger re-render
|
|
135
|
+
}, [initialValues]);
|
|
136
|
+
var validateFields = useCallback(function (names) {
|
|
137
|
+
return new Promise(function (resolve, reject) {
|
|
138
|
+
var fieldsToValidate = names || Object.keys(formFieldsRef.current);
|
|
139
|
+
var values = getFieldsValue(fieldsToValidate);
|
|
140
|
+
var errors = {};
|
|
141
|
+
for (var _i = 0, fieldsToValidate_1 = fieldsToValidate; _i < fieldsToValidate_1.length; _i++) {
|
|
142
|
+
var key = fieldsToValidate_1[_i];
|
|
143
|
+
var field = formFieldsRef.current[key];
|
|
144
|
+
if (!field)
|
|
145
|
+
continue; // Skip if field is not registered
|
|
146
|
+
var validation = validateField(key, values[key], field.rules || []);
|
|
147
|
+
if (validation) {
|
|
148
|
+
if (validation.type === 'error') {
|
|
149
|
+
errors[key] = validation.message;
|
|
150
|
+
}
|
|
151
|
+
else if (validation.type === 'warning') {
|
|
152
|
+
validation.message;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
if (Object.keys(errors).length > 0) {
|
|
157
|
+
formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
|
|
158
|
+
for (var key in errors) {
|
|
159
|
+
formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { error: errors[key] });
|
|
160
|
+
}
|
|
161
|
+
forceUpdate({}); // Trigger re-render
|
|
162
|
+
reject(errors);
|
|
163
|
+
}
|
|
164
|
+
else {
|
|
165
|
+
resolve(values);
|
|
166
|
+
}
|
|
167
|
+
});
|
|
168
|
+
}, [getFieldsValue, validateField]);
|
|
169
|
+
var setFieldsStatus = useCallback(function (status) {
|
|
170
|
+
formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
|
|
171
|
+
status.forEach(function (_a) {
|
|
172
|
+
var type = _a.type, name = _a.name, message = _a.message;
|
|
173
|
+
if (Array.isArray(name)) {
|
|
174
|
+
name.forEach(function (n) {
|
|
175
|
+
if (formFieldsRef.current[n]) {
|
|
176
|
+
// Only update if field exists
|
|
177
|
+
if (type === 'error') {
|
|
178
|
+
formFieldsRef.current[n] = __assign(__assign({}, formFieldsRef.current[n]), { error: message });
|
|
179
|
+
}
|
|
180
|
+
else if (type === 'warning') {
|
|
181
|
+
formFieldsRef.current[n] = __assign(__assign({}, formFieldsRef.current[n]), { warning: message });
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
});
|
|
185
|
+
}
|
|
186
|
+
else {
|
|
187
|
+
if (formFieldsRef.current[name]) {
|
|
188
|
+
// Only update if field exists
|
|
189
|
+
if (type === 'error') {
|
|
190
|
+
formFieldsRef.current[name] = __assign(__assign({}, formFieldsRef.current[name]), { error: message });
|
|
191
|
+
}
|
|
192
|
+
else if (type === 'warning') {
|
|
193
|
+
formFieldsRef.current[name] = __assign(__assign({}, formFieldsRef.current[name]), { warning: message });
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
});
|
|
198
|
+
forceUpdate({}); // Trigger re-render
|
|
199
|
+
}, []);
|
|
200
|
+
formInstanceRef.current = {
|
|
201
|
+
setFieldsValue: setFieldsValue,
|
|
202
|
+
getFieldsValue: getFieldsValue,
|
|
203
|
+
resetFields: resetFields,
|
|
204
|
+
validateFields: validateFields,
|
|
205
|
+
setFieldsStatus: setFieldsStatus,
|
|
206
|
+
registerField: registerField,
|
|
207
|
+
unregisterField: unregisterField
|
|
208
|
+
};
|
|
209
|
+
// 暴露给外部的方法
|
|
210
|
+
useImperativeHandle(ref, function () { return (__assign({}, formInstanceRef.current)); });
|
|
211
|
+
return (jsx(FormContext.Provider, __assign({ value: { form: formInstanceRef.current, formFields: formFieldsRef.current } }, { children: children })));
|
|
212
|
+
};
|
|
213
|
+
var FormProvider$1 = forwardRef(FormProvider);
|
|
214
|
+
|
|
215
|
+
export { FormProvider$1 as default };
|
package/es/Icon/index.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './input.css';
|
|
3
|
+
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
4
|
+
addonAfter?: React.ReactNode;
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
declare const Input: React.FC<InputProps>;
|
|
8
|
+
interface SearchInputProps extends InputProps {
|
|
9
|
+
onSearch?: (value: string) => void;
|
|
10
|
+
}
|
|
11
|
+
declare const SearchInput: React.FC<SearchInputProps>;
|
|
12
|
+
declare const PasswordInput: React.FC<InputProps>;
|
|
13
|
+
export default Input;
|
|
14
|
+
export { SearchInput, PasswordInput };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { __rest, __assign } from '../node_modules/tslib/tslib.es6.js';
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
import classNames from 'classnames';
|
|
5
|
+
import { Icon } from '../Icon/index.js';
|
|
6
|
+
|
|
7
|
+
var Input = function (_a) {
|
|
8
|
+
var addonAfter = _a.addonAfter, className = _a.className, rest = __rest(_a, ["addonAfter", "className"]);
|
|
9
|
+
return (jsxs("div", __assign({ className: classNames('foxit-input-wrapper', rest.disabled && 'foxit-input-wrapper-disabled', className) }, { children: [jsx("input", __assign({}, rest, { className: "foxit-input-element" })), addonAfter && jsx("div", __assign({ className: "foxit-input-addon" }, { children: addonAfter }))] })));
|
|
10
|
+
};
|
|
11
|
+
var SearchInput = function (_a) {
|
|
12
|
+
var onSearch = _a.onSearch, rest = __rest(_a, ["onSearch"]);
|
|
13
|
+
var _b = useState(rest.value || ''), value = _b[0], setValue = _b[1];
|
|
14
|
+
var handleSearch = function () {
|
|
15
|
+
if (onSearch) {
|
|
16
|
+
onSearch(value);
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
return (jsx(Input, __assign({}, rest, { onChange: function (e) { return setValue(e.target.value); }, addonAfter: jsx("div", __assign({ style: { display: 'flex' }, onClick: handleSearch }, { children: jsx(Icon, { name: "SearchOutlined" }) })) })));
|
|
20
|
+
};
|
|
21
|
+
var PasswordInput = function (props) {
|
|
22
|
+
var _a = useState(false), visible = _a[0], setVisible = _a[1];
|
|
23
|
+
var toggleVisibility = function () {
|
|
24
|
+
setVisible(!visible);
|
|
25
|
+
};
|
|
26
|
+
return (jsx(Input, __assign({}, props, { type: visible ? 'text' : 'password', addonAfter: jsx("div", __assign({ style: { display: 'flex' }, onClick: toggleVisibility }, { children: jsx(Icon, { name: visible ? 'EyeOutlined' : 'EyeInvisibleOutlined' }) })) })));
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export { PasswordInput, SearchInput, Input as default };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ReactNode, Key } from 'react';
|
|
3
|
+
import './menu.css';
|
|
4
|
+
export interface MenuItem {
|
|
5
|
+
key: Key;
|
|
6
|
+
icon?: ReactNode;
|
|
7
|
+
children?: MenuItem[];
|
|
8
|
+
label: ReactNode;
|
|
9
|
+
type?: 'group';
|
|
10
|
+
}
|
|
11
|
+
interface MenuProps {
|
|
12
|
+
items: MenuItem[];
|
|
13
|
+
onClick?: (e: {
|
|
14
|
+
key: string;
|
|
15
|
+
}) => void;
|
|
16
|
+
defaultSelectedKeys?: string[];
|
|
17
|
+
defaultOpenKeys?: string[];
|
|
18
|
+
style?: React.CSSProperties;
|
|
19
|
+
}
|
|
20
|
+
export declare const getItem: (label: ReactNode, key: Key, icon?: ReactNode, children?: MenuItem[], type?: 'group') => MenuItem;
|
|
21
|
+
declare const Menu: React.FC<MenuProps>;
|
|
22
|
+
export { Menu };
|