foxit-component 0.0.1-alpha.2 → 0.0.1-alpha.21
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/es/Alert/Alert.d.ts +12 -0
- package/es/Alert/Alert.js +24 -0
- package/es/Button/Button.d.ts +2 -1
- package/es/Button/Button.js +4 -4
- package/es/Checkbox/Checkbox.d.ts +10 -2
- package/es/Checkbox/Checkbox.js +35 -5
- package/es/Empty/Empty.js +0 -1
- package/es/Form/Form.js +0 -1
- package/es/Form/FormItem.js +1 -2
- package/es/Form/FormProvider.js +101 -109
- package/es/Input/Input.d.ts +1 -0
- package/es/Input/Input.js +6 -5
- package/es/Menu/Menu.d.ts +1 -1
- package/es/Menu/Menu.js +1 -2
- package/es/Modal/Modal.d.ts +2 -0
- package/es/Modal/Modal.js +87 -16
- package/es/Modal/ModalTemp.js +4 -1
- package/es/Pagination/Pagination.d.ts +1 -0
- package/es/Pagination/Pagination.js +20 -12
- package/es/Quantity/Quantity.d.ts +10 -0
- package/es/Quantity/Quantity.js +45 -0
- package/es/Radio/Radio.js +0 -1
- package/es/Select/Select.d.ts +10 -0
- package/es/Select/Select.js +15 -10
- package/es/Spin/Spin.d.ts +10 -0
- package/es/Spin/Spin.js +11 -0
- package/es/Switch/Switch.d.ts +9 -0
- package/es/Switch/Switch.js +20 -0
- package/es/Table/Table.d.ts +3 -1
- package/es/Table/Table.js +12 -8
- package/es/Tabs/Tabs.js +0 -1
- package/es/Tag/Tag.d.ts +1 -1
- package/es/Tag/Tag.js +1 -2
- package/es/Toast/Toast.js +0 -1
- package/es/Toast/ToastContainer.js +0 -1
- package/es/Tooltip/Tooltip.js +0 -1
- package/es/constants/icons.d.ts +10 -0
- package/es/constants/icons.js +11 -1
- package/es/index.css +1 -0
- package/es/index.d.ts +6 -4
- package/es/index.js +5 -1
- package/es/node_modules/tslib/tslib.es6.js +39 -1
- package/package.json +16 -14
- package/es/Button/button.css.js +0 -6
- package/es/Checkbox/checkbox.css.js +0 -6
- package/es/Empty/empty.css.js +0 -6
- package/es/Form/form.css.js +0 -6
- package/es/Input/input.css.js +0 -6
- package/es/Menu/menu.css.js +0 -6
- package/es/Modal/modal.css.js +0 -6
- package/es/Pagination/pagination.css.js +0 -6
- package/es/Radio/radio.css.js +0 -6
- package/es/Table/table.css.js +0 -6
- package/es/Tabs/tabs.css.js +0 -6
- package/es/Tag/tag.css.js +0 -6
- package/es/Toast/toast.css.js +0 -6
- package/es/Tooltip/tooltip.css.js +0 -6
- package/es/node_modules/style-inject/dist/style-inject.es.js +0 -28
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @name Alert
|
|
3
|
+
*/
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import './alert.css';
|
|
6
|
+
interface AlertProps {
|
|
7
|
+
message: string | React.ReactNode;
|
|
8
|
+
showIcon?: boolean;
|
|
9
|
+
type?: 'success' | 'warning' | 'error' | 'gradient';
|
|
10
|
+
}
|
|
11
|
+
declare const Alert: React.FC<AlertProps>;
|
|
12
|
+
export { Alert };
|
|
@@ -0,0 +1,24 @@
|
|
|
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 Alert = function (_a) {
|
|
6
|
+
var message = _a.message, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b, _c = _a.type, type = _c === void 0 ? 'success' : _c;
|
|
7
|
+
var getIconName = function (type) {
|
|
8
|
+
switch (type) {
|
|
9
|
+
case 'success':
|
|
10
|
+
return 'SuccessColoursOutlined';
|
|
11
|
+
case 'error':
|
|
12
|
+
return 'ErrorColoursOutlined';
|
|
13
|
+
case 'warning':
|
|
14
|
+
return 'WarningColoursOutlined';
|
|
15
|
+
case 'loading':
|
|
16
|
+
return 'LoadingOutlined';
|
|
17
|
+
default:
|
|
18
|
+
return 'WarningColoursOutlined';
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
return (jsxs("div", __assign({ className: "foxit-alert foxit-alert-".concat(type) }, { children: [showIcon && (jsx("div", __assign({ className: "foxit-alert-icon-container" }, { children: jsx(Icon, { name: getIconName(type), className: "foxit-alert-icon" }) }))), jsx("div", __assign({ className: "foxit-alert-message" }, { children: message }))] })));
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
export { Alert };
|
package/es/Button/Button.d.ts
CHANGED
|
@@ -8,5 +8,6 @@ export interface ButtonProps {
|
|
|
8
8
|
className?: string;
|
|
9
9
|
style?: React.CSSProperties;
|
|
10
10
|
[key: string]: unknown;
|
|
11
|
+
loading?: boolean;
|
|
11
12
|
}
|
|
12
|
-
export declare const Button: ({ primary, size, children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare const Button: ({ primary, size, children, className, style, loading, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
package/es/Button/Button.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { __rest, __assign } from '../node_modules/tslib/tslib.es6.js';
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
|
-
import '
|
|
4
|
+
import { Icon } from '../Icon/index.js';
|
|
5
5
|
|
|
6
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, props = __rest(_a, ["primary", "size", "children"]);
|
|
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
8
|
var mode = primary ? 'foxit-button-primary' : 'foxit-button-secondary';
|
|
9
|
-
return (
|
|
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
10
|
};
|
|
11
11
|
|
|
12
12
|
export { Button };
|
|
@@ -1,10 +1,18 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { FC } from 'react';
|
|
2
2
|
import './checkbox.css';
|
|
3
3
|
interface CheckboxProps {
|
|
4
4
|
onChange?: (checked: boolean) => void;
|
|
5
5
|
checked?: boolean;
|
|
6
6
|
disabled?: boolean;
|
|
7
|
+
value?: string;
|
|
7
8
|
children: React.ReactNode;
|
|
8
9
|
}
|
|
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
|
+
};
|
|
10
18
|
export default Checkbox;
|
package/es/Checkbox/Checkbox.js
CHANGED
|
@@ -1,19 +1,49 @@
|
|
|
1
|
-
import { __assign } from '../node_modules/tslib/tslib.es6.js';
|
|
1
|
+
import { __assign, __spreadArray } from '../node_modules/tslib/tslib.es6.js';
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { useState } from 'react';
|
|
4
|
-
import './checkbox.css.js';
|
|
3
|
+
import { createContext, useContext, useState, useEffect } from 'react';
|
|
5
4
|
|
|
5
|
+
var CheckboxGroupContext = createContext(null);
|
|
6
6
|
var Checkbox = function (_a) {
|
|
7
|
-
var onChange = _a.onChange, checked = _a.checked, _b = _a.disabled, disabled = _b === void 0 ? false : _b, children = _a.children;
|
|
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);
|
|
8
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]);
|
|
9
15
|
var handleChange = function (e) {
|
|
10
16
|
var newChecked = e.target.checked;
|
|
11
17
|
setInternalChecked(newChecked);
|
|
12
18
|
if (onChange) {
|
|
13
19
|
onChange(newChecked);
|
|
14
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
|
+
}
|
|
15
43
|
};
|
|
16
|
-
|
|
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 })) })));
|
|
17
46
|
};
|
|
47
|
+
Checkbox.Group = CheckboxGroup;
|
|
18
48
|
|
|
19
49
|
export { Checkbox as default };
|
package/es/Empty/Empty.js
CHANGED
package/es/Form/Form.js
CHANGED
|
@@ -3,7 +3,6 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { forwardRef, useRef, useCallback, useImperativeHandle } from 'react';
|
|
4
4
|
import FormProvider from './FormProvider.js';
|
|
5
5
|
import './FormContext.js';
|
|
6
|
-
import './form.css.js';
|
|
7
6
|
|
|
8
7
|
var Form = function (_a, ref) {
|
|
9
8
|
var children = _a.children, onFinish = _a.onFinish, initialValues = _a.initialValues;
|
package/es/Form/FormItem.js
CHANGED
|
@@ -2,7 +2,6 @@ import { __assign } from '../node_modules/tslib/tslib.es6.js';
|
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import React, { useContext, useEffect, useCallback } from 'react';
|
|
4
4
|
import { FormContext } from './FormContext.js';
|
|
5
|
-
import './form.css.js';
|
|
6
5
|
|
|
7
6
|
var FormItem = function (_a) {
|
|
8
7
|
var _b, _c, _d;
|
|
@@ -24,7 +23,7 @@ var FormItem = function (_a) {
|
|
|
24
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;
|
|
25
24
|
form.setFieldsValue((_a = {}, _a[name] = newValue, _a));
|
|
26
25
|
}, [form, name]);
|
|
27
|
-
return (jsxs("div", __assign({ className: "foxit-form-item" }, { children: [label &&
|
|
26
|
+
return (jsxs("div", __assign({ className: "foxit-form-item" }, { children: [label && (jsxs("label", { children: [label, rules.some(function (rule) { return rule.required; }) && jsx("span", __assign({ className: "foxit-form-required" }, { children: "*" }))] })), jsx("span", __assign({ className: "".concat(error ? 'foxit-form-error-component' : warning ? 'foxit-form-warning-component' : '') }, { children: React.Children.map(children, function (child) {
|
|
28
27
|
return React.cloneElement(child, {
|
|
29
28
|
value: value,
|
|
30
29
|
onChange: handleChange
|
package/es/Form/FormProvider.js
CHANGED
|
@@ -1,43 +1,39 @@
|
|
|
1
1
|
import { __assign } from '../node_modules/tslib/tslib.es6.js';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { forwardRef,
|
|
3
|
+
import { forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
|
|
4
4
|
import { FormContext } from './FormContext.js';
|
|
5
5
|
|
|
6
6
|
var FormProvider = function (_a, ref) {
|
|
7
7
|
var children = _a.children, _b = _a.initialValues, initialValues = _b === void 0 ? {} : _b;
|
|
8
|
-
var
|
|
8
|
+
var formFieldsRef = useRef({});
|
|
9
|
+
var _c = useState({}), forceUpdate = _c[1]; // Used to force re-render when ref changes
|
|
9
10
|
var formInstanceRef = useRef({});
|
|
10
11
|
// 初始值的设置
|
|
11
12
|
useEffect(function () {
|
|
12
13
|
if (Object.keys(initialValues).length > 0) {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
newFields[key] = { value: initialValues[key], rules: [] };
|
|
18
|
-
}
|
|
19
|
-
else {
|
|
20
|
-
newFields[key] = __assign(__assign({}, newFields[key]), { value: initialValues[key] });
|
|
21
|
-
}
|
|
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: [] };
|
|
22
18
|
}
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
else {
|
|
20
|
+
formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { value: initialValues[key] });
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
forceUpdate({}); // Trigger re-render
|
|
25
24
|
}
|
|
26
25
|
}, [initialValues]);
|
|
27
26
|
// 注册字段
|
|
28
27
|
var registerField = useCallback(function (name, rules) {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
});
|
|
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
|
|
33
31
|
}, []);
|
|
34
32
|
// 销毁字段
|
|
35
33
|
var unregisterField = useCallback(function (name) {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
return newFields;
|
|
40
|
-
});
|
|
34
|
+
formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
|
|
35
|
+
delete formFieldsRef.current[name];
|
|
36
|
+
forceUpdate({}); // Trigger re-render
|
|
41
37
|
}, []);
|
|
42
38
|
// 验证字段
|
|
43
39
|
var validateField = useCallback(function (name, value, rules) {
|
|
@@ -60,13 +56,17 @@ var FormProvider = function (_a, ref) {
|
|
|
60
56
|
if (rule.type === 'string' && typeof value !== 'string') {
|
|
61
57
|
return { type: 'error', message: rule.message || 'The input is not a string' };
|
|
62
58
|
}
|
|
63
|
-
if (rule.min !== undefined &&
|
|
59
|
+
if (rule.min !== undefined &&
|
|
60
|
+
typeof value === 'string' &&
|
|
61
|
+
new Blob([value]).size < rule.min) {
|
|
64
62
|
return {
|
|
65
63
|
type: 'error',
|
|
66
64
|
message: rule.message || "The input is less than ".concat(rule.min, " characters")
|
|
67
65
|
};
|
|
68
66
|
}
|
|
69
|
-
if (rule.max !== undefined &&
|
|
67
|
+
if (rule.max !== undefined &&
|
|
68
|
+
typeof value === 'string' &&
|
|
69
|
+
new Blob([value]).size > rule.max) {
|
|
70
70
|
return {
|
|
71
71
|
type: 'error',
|
|
72
72
|
message: rule.message || "The input is more than ".concat(rule.max, " characters")
|
|
@@ -77,78 +77,74 @@ var FormProvider = function (_a, ref) {
|
|
|
77
77
|
}, []);
|
|
78
78
|
// 设置字段值
|
|
79
79
|
var setFieldsValue = useCallback(function (values) {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
if (validation) {
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
});
|
|
93
|
-
}
|
|
94
|
-
else if (validation.type === 'warning') {
|
|
95
|
-
newFields[key] = __assign(__assign({}, newFields[key]), { warning: validation.message, error: undefined // Clear any previous errors
|
|
96
|
-
});
|
|
97
|
-
}
|
|
80
|
+
var _a;
|
|
81
|
+
formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
|
|
82
|
+
for (var key in values) {
|
|
83
|
+
if (Object.prototype.hasOwnProperty.call(values, key)) {
|
|
84
|
+
var newValue = values[key];
|
|
85
|
+
formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { value: newValue });
|
|
86
|
+
// 验证字段
|
|
87
|
+
var validation = validateField(key, newValue, ((_a = formFieldsRef.current[key]) === null || _a === void 0 ? void 0 : _a.rules) || []);
|
|
88
|
+
if (validation) {
|
|
89
|
+
if (validation.type === 'error') {
|
|
90
|
+
formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { error: validation.message, warning: undefined // Clear any previous warnings
|
|
91
|
+
});
|
|
98
92
|
}
|
|
99
|
-
else {
|
|
100
|
-
|
|
93
|
+
else if (validation.type === 'warning') {
|
|
94
|
+
formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { warning: validation.message, error: undefined // Clear any previous errors
|
|
95
|
+
});
|
|
101
96
|
}
|
|
102
97
|
}
|
|
98
|
+
else {
|
|
99
|
+
formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { error: undefined, warning: undefined });
|
|
100
|
+
}
|
|
103
101
|
}
|
|
104
|
-
|
|
105
|
-
});
|
|
106
|
-
}, [
|
|
102
|
+
}
|
|
103
|
+
forceUpdate({}); // Trigger re-render
|
|
104
|
+
}, [validateField]);
|
|
107
105
|
// 获取字段值
|
|
108
106
|
var getFieldsValue = useCallback(function (names) {
|
|
109
107
|
if (!names) {
|
|
110
|
-
return Object.keys(
|
|
111
|
-
acc[key] =
|
|
108
|
+
return Object.keys(formFieldsRef.current).reduce(function (acc, key) {
|
|
109
|
+
acc[key] = formFieldsRef.current[key].value;
|
|
112
110
|
return acc;
|
|
113
111
|
}, {});
|
|
114
112
|
}
|
|
115
113
|
return names.reduce(function (acc, key) {
|
|
116
114
|
var _a;
|
|
117
|
-
acc[key] = (_a =
|
|
115
|
+
acc[key] = (_a = formFieldsRef.current[key]) === null || _a === void 0 ? void 0 : _a.value;
|
|
118
116
|
return acc;
|
|
119
117
|
}, {});
|
|
120
|
-
}, [
|
|
118
|
+
}, []);
|
|
121
119
|
// 重置字段
|
|
122
120
|
var resetFields = useCallback(function (names) {
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
});
|
|
143
|
-
}, [formFields, initialValues]);
|
|
121
|
+
formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
|
|
122
|
+
if (names) {
|
|
123
|
+
names.forEach(function (name) {
|
|
124
|
+
if (formFieldsRef.current[name]) {
|
|
125
|
+
formFieldsRef.current[name].value = initialValues[name] || '';
|
|
126
|
+
formFieldsRef.current[name].error = undefined;
|
|
127
|
+
formFieldsRef.current[name].warning = undefined;
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
else {
|
|
132
|
+
Object.keys(formFieldsRef.current).forEach(function (key) {
|
|
133
|
+
formFieldsRef.current[key].value = initialValues[key] || '';
|
|
134
|
+
formFieldsRef.current[key].error = undefined;
|
|
135
|
+
formFieldsRef.current[key].warning = undefined;
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
forceUpdate({}); // Trigger re-render
|
|
139
|
+
}, [initialValues]);
|
|
144
140
|
var validateFields = useCallback(function (names) {
|
|
145
141
|
return new Promise(function (resolve, reject) {
|
|
146
|
-
var fieldsToValidate = names || Object.keys(
|
|
142
|
+
var fieldsToValidate = names || Object.keys(formFieldsRef.current);
|
|
147
143
|
var values = getFieldsValue(fieldsToValidate);
|
|
148
144
|
var errors = {};
|
|
149
145
|
for (var _i = 0, fieldsToValidate_1 = fieldsToValidate; _i < fieldsToValidate_1.length; _i++) {
|
|
150
146
|
var key = fieldsToValidate_1[_i];
|
|
151
|
-
var field =
|
|
147
|
+
var field = formFieldsRef.current[key];
|
|
152
148
|
if (!field)
|
|
153
149
|
continue; // Skip if field is not registered
|
|
154
150
|
var validation = validateField(key, values[key], field.rules || []);
|
|
@@ -162,55 +158,49 @@ var FormProvider = function (_a, ref) {
|
|
|
162
158
|
}
|
|
163
159
|
}
|
|
164
160
|
if (Object.keys(errors).length > 0) {
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
return newFields;
|
|
171
|
-
});
|
|
161
|
+
formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
|
|
162
|
+
for (var key in errors) {
|
|
163
|
+
formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { error: errors[key] });
|
|
164
|
+
}
|
|
165
|
+
forceUpdate({}); // Trigger re-render
|
|
172
166
|
reject(errors);
|
|
173
167
|
}
|
|
174
168
|
else {
|
|
175
169
|
resolve(values);
|
|
176
170
|
}
|
|
177
171
|
});
|
|
178
|
-
}, [
|
|
172
|
+
}, [getFieldsValue, validateField]);
|
|
179
173
|
var setFieldsStatus = useCallback(function (status) {
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
if (newFields[n]) {
|
|
187
|
-
// Only update if field exists
|
|
188
|
-
if (type === 'error') {
|
|
189
|
-
newFields[n] = __assign(__assign({}, newFields[n]), { error: message });
|
|
190
|
-
}
|
|
191
|
-
else if (type === 'warning') {
|
|
192
|
-
newFields[n] = __assign(__assign({}, newFields[n]), { warning: message });
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
});
|
|
196
|
-
}
|
|
197
|
-
else {
|
|
198
|
-
if (newFields[name]) {
|
|
174
|
+
formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
|
|
175
|
+
status.forEach(function (_a) {
|
|
176
|
+
var type = _a.type, name = _a.name, message = _a.message;
|
|
177
|
+
if (Array.isArray(name)) {
|
|
178
|
+
name.forEach(function (n) {
|
|
179
|
+
if (formFieldsRef.current[n]) {
|
|
199
180
|
// Only update if field exists
|
|
200
181
|
if (type === 'error') {
|
|
201
|
-
|
|
182
|
+
formFieldsRef.current[n] = __assign(__assign({}, formFieldsRef.current[n]), { error: message });
|
|
202
183
|
}
|
|
203
184
|
else if (type === 'warning') {
|
|
204
|
-
|
|
185
|
+
formFieldsRef.current[n] = __assign(__assign({}, formFieldsRef.current[n]), { warning: message });
|
|
205
186
|
}
|
|
206
187
|
}
|
|
188
|
+
});
|
|
189
|
+
}
|
|
190
|
+
else {
|
|
191
|
+
if (formFieldsRef.current[name]) {
|
|
192
|
+
// Only update if field exists
|
|
193
|
+
if (type === 'error') {
|
|
194
|
+
formFieldsRef.current[name] = __assign(__assign({}, formFieldsRef.current[name]), { error: message });
|
|
195
|
+
}
|
|
196
|
+
else if (type === 'warning') {
|
|
197
|
+
formFieldsRef.current[name] = __assign(__assign({}, formFieldsRef.current[name]), { warning: message });
|
|
198
|
+
}
|
|
207
199
|
}
|
|
208
|
-
}
|
|
209
|
-
return newFields;
|
|
200
|
+
}
|
|
210
201
|
});
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
useImperativeHandle(ref, function () { return (__assign({}, formInstanceRef.current)); });
|
|
202
|
+
forceUpdate({}); // Trigger re-render
|
|
203
|
+
}, []);
|
|
214
204
|
formInstanceRef.current = {
|
|
215
205
|
setFieldsValue: setFieldsValue,
|
|
216
206
|
getFieldsValue: getFieldsValue,
|
|
@@ -220,7 +210,9 @@ var FormProvider = function (_a, ref) {
|
|
|
220
210
|
registerField: registerField,
|
|
221
211
|
unregisterField: unregisterField
|
|
222
212
|
};
|
|
223
|
-
|
|
213
|
+
// 暴露给外部的方法
|
|
214
|
+
useImperativeHandle(ref, function () { return (__assign({}, formInstanceRef.current)); });
|
|
215
|
+
return (jsx(FormContext.Provider, __assign({ value: { form: formInstanceRef.current, formFields: formFieldsRef.current } }, { children: children })));
|
|
224
216
|
};
|
|
225
217
|
var FormProvider$1 = forwardRef(FormProvider);
|
|
226
218
|
|
package/es/Input/Input.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import './input.css';
|
|
3
3
|
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
4
4
|
addonAfter?: React.ReactNode;
|
|
5
|
+
className?: string;
|
|
5
6
|
}
|
|
6
7
|
declare const Input: React.FC<InputProps>;
|
|
7
8
|
interface SearchInputProps extends InputProps {
|
package/es/Input/Input.js
CHANGED
|
@@ -1,21 +1,22 @@
|
|
|
1
1
|
import { __rest, __assign } from '../node_modules/tslib/tslib.es6.js';
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { useState } from 'react';
|
|
4
|
-
import '
|
|
4
|
+
import classNames from 'classnames';
|
|
5
5
|
import { Icon } from '../Icon/index.js';
|
|
6
6
|
|
|
7
7
|
var Input = function (_a) {
|
|
8
|
-
var addonAfter = _a.addonAfter, rest = __rest(_a, ["addonAfter"]);
|
|
9
|
-
return (jsxs("div", __assign({ className:
|
|
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
10
|
};
|
|
11
11
|
var SearchInput = function (_a) {
|
|
12
12
|
var onSearch = _a.onSearch, rest = __rest(_a, ["onSearch"]);
|
|
13
|
+
var _b = useState(rest.value || ''), value = _b[0], setValue = _b[1];
|
|
13
14
|
var handleSearch = function () {
|
|
14
15
|
if (onSearch) {
|
|
15
|
-
onSearch(
|
|
16
|
+
onSearch(value);
|
|
16
17
|
}
|
|
17
18
|
};
|
|
18
|
-
return (jsx(Input, __assign({}, rest, { addonAfter: jsx("div", __assign({ style: { display: 'flex' }, onClick: handleSearch }, { children: jsx(Icon, { name: "SearchOutlined" }) })) })));
|
|
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" }) })) })));
|
|
19
20
|
};
|
|
20
21
|
var PasswordInput = function (props) {
|
|
21
22
|
var _a = useState(false), visible = _a[0], setVisible = _a[1];
|
package/es/Menu/Menu.d.ts
CHANGED
package/es/Menu/Menu.js
CHANGED
|
@@ -2,7 +2,6 @@ import { __assign, __spreadArray } from '../node_modules/tslib/tslib.es6.js';
|
|
|
2
2
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
3
|
import { useState } from 'react';
|
|
4
4
|
import { Icon } from '../Icon/index.js';
|
|
5
|
-
import './menu.css.js';
|
|
6
5
|
|
|
7
6
|
var getItem = function (label, key, icon, children, type) {
|
|
8
7
|
return {
|
|
@@ -47,4 +46,4 @@ var Menu = function (_a) {
|
|
|
47
46
|
return (jsx("div", __assign({ className: "foxit-menu", style: __assign({}, style) }, { children: items.map(function (item) { return (item.children ? renderSubMenu(item) : renderMenuItem(item)); }) })));
|
|
48
47
|
};
|
|
49
48
|
|
|
50
|
-
export { Menu
|
|
49
|
+
export { Menu, getItem };
|
package/es/Modal/Modal.d.ts
CHANGED