x-ui-design 0.2.10 → 0.2.12
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/dist/esm/types/components/Button/Button.client.d.ts +1 -1
- package/dist/esm/types/components/Button/Button.d.ts +1 -1
- package/dist/esm/types/components/Checkbox/Checkbox.client.d.ts +2 -2
- package/dist/esm/types/components/Checkbox/Checkbox.d.ts +1 -1
- package/dist/esm/types/components/Empty/Empty.d.ts +1 -1
- package/dist/esm/types/components/Form/Item/Item.d.ts +1 -1
- package/dist/esm/types/hooks/useForm.d.ts +2 -2
- package/dist/esm/types/hooks/useWatch.d.ts +2 -2
- package/dist/esm/types/index.d.ts +0 -2
- package/dist/index.d.ts +84 -16
- package/dist/index.esm.js +10 -411
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +8 -411
- package/dist/index.js.map +1 -1
- package/lib/components/Button/Button.client.tsx +2 -2
- package/lib/components/Button/Button.tsx +3 -3
- package/lib/components/Checkbox/Checkbox.client.tsx +3 -3
- package/lib/components/Checkbox/Checkbox.tsx +2 -2
- package/lib/components/Empty/Empty.tsx +2 -2
- package/lib/components/Form/Item/Item.tsx +5 -5
- package/lib/hooks/useForm.ts +2 -2
- package/lib/hooks/useWatch.ts +3 -3
- package/lib/index.ts +2 -2
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactElement, ReactNode } from 'react';
|
|
2
|
-
import { ButtonProps } from '
|
|
2
|
+
import { ButtonProps } from '../../types/button';
|
|
3
3
|
import './style.css';
|
|
4
4
|
declare const Button: ({ type, variant, color, shape, size, htmlType, className, rootClassName, classNames: customClassNames, styles, prefixCls, iconPosition, disabled, ghost, danger, block, children, href, iconNode, isLoading, ...restProps }: ButtonProps & {
|
|
5
5
|
iconNode?: ReactNode;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { MouseEvent } from 'react';
|
|
2
2
|
import './style.css';
|
|
3
|
-
declare const CheckboxClient: import("react").ForwardRefExoticComponent<import("
|
|
3
|
+
declare const CheckboxClient: import("react").ForwardRefExoticComponent<import("../../types").DefaultProps & {
|
|
4
4
|
disabled?: boolean;
|
|
5
|
-
onChange?: (e: MouseEvent<HTMLInputElement> & import("
|
|
5
|
+
onChange?: (e: MouseEvent<HTMLInputElement> & import("../../types").TargetProps) => void;
|
|
6
6
|
onClick?: import("react").MouseEventHandler<HTMLElement>;
|
|
7
7
|
onMouseEnter?: import("react").MouseEventHandler<HTMLElement>;
|
|
8
8
|
onMouseLeave?: import("react").MouseEventHandler<HTMLElement>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
|
-
import { CheckboxProps } from '
|
|
2
|
+
import { CheckboxProps } from '../../types/checkbox';
|
|
3
3
|
declare const Checkbox: {
|
|
4
4
|
({ prefixCls, className, defaultChecked, checked, style, disabled, onChange, onClick, onMouseEnter, onMouseLeave, onKeyPress, onKeyDown, tabIndex, name, children, id, autoFocus, type, value, required, noStyle }: CheckboxProps): ReactElement;
|
|
5
5
|
displayName: string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { EmptyContentProps } from '
|
|
1
|
+
import { EmptyContentProps } from '../../types/empty';
|
|
2
2
|
import './style.css';
|
|
3
3
|
declare const EmptyContent: ({ icon, style, className, title, description, prefixCls }: EmptyContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export default EmptyContent;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FormItemProps } from '
|
|
1
|
+
import { FormItemProps } from '../../../types/form';
|
|
2
2
|
import './style.css';
|
|
3
3
|
declare const FormItem: {
|
|
4
4
|
({ prefixCls, name, label, rules, children, className, layout, style, valuePropName, dependencies, initialValue, feedbackIcons, ...props }: FormItemProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { RuleTypes } from '
|
|
2
|
-
import type { FieldData, FormInstance } from '
|
|
1
|
+
import { RuleTypes } from '../types';
|
|
2
|
+
import type { FieldData, FormInstance } from '../types/form';
|
|
3
3
|
declare const useForm: (initialValues?: Record<string, RuleTypes>, onFieldsChange?: (changedFields: FieldData[]) => void, onValuesChange?: (changedValues: Record<string, RuleTypes>, allValues: Record<string, RuleTypes>) => void) => FormInstance;
|
|
4
4
|
export { useForm };
|
|
@@ -2,5 +2,3 @@ import './styles/global.css';
|
|
|
2
2
|
export { default as Empty } from "./components/Empty/Empty";
|
|
3
3
|
export { default as Button } from "./components/Button/Button";
|
|
4
4
|
export { default as Checkbox } from "./components/Checkbox/Checkbox";
|
|
5
|
-
export { useForm } from './hooks/useForm';
|
|
6
|
-
export { useWatch } from './hooks/useWatch';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,30 +1,98 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
import { CSSProperties, ReactNode, ButtonHTMLAttributes, ReactElement, MouseEvent, MouseEventHandler, KeyboardEventHandler } from 'react';
|
|
3
|
+
|
|
4
|
+
type RuleType = any;
|
|
5
|
+
interface DefaultProps {
|
|
6
|
+
prefixCls?: string;
|
|
7
|
+
className?: string;
|
|
8
|
+
style?: CSSProperties;
|
|
9
|
+
noStyle?: boolean;
|
|
10
|
+
}
|
|
11
|
+
type TargetProps = {
|
|
12
|
+
target: {
|
|
13
|
+
value: RuleType;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
type EmptyContentProps = DefaultProps & {
|
|
18
|
+
title?: string;
|
|
19
|
+
description?: string;
|
|
20
|
+
icon?: ReactNode;
|
|
21
|
+
};
|
|
8
22
|
|
|
9
23
|
declare const EmptyContent: ({ icon, style, className, title, description, prefixCls }: EmptyContentProps) => react_jsx_runtime.JSX.Element;
|
|
10
24
|
|
|
25
|
+
declare const ButtonTypes: readonly ["default", "primary", "dashed", "link", "text", "ghost"];
|
|
26
|
+
declare const ButtonShapes: readonly ["default", "circle", "round"];
|
|
27
|
+
declare const ButtonVariantTypes: readonly ["outlined", "dashed", "solid", "filled", "text", "link"];
|
|
28
|
+
declare const ButtonColorTypes: readonly ["default", "primary", "danger", "blue", "purple", "cyan", "green", "magenta", "pink", "red", "orange", "yellow", "volcano", "geekblue", "lime", "gold"];
|
|
29
|
+
type ButtonType = (typeof ButtonTypes)[number];
|
|
30
|
+
type ButtonShape = (typeof ButtonShapes)[number];
|
|
31
|
+
type ButtonVariantType = (typeof ButtonVariantTypes)[number];
|
|
32
|
+
type ButtonColorType = (typeof ButtonColorTypes)[number];
|
|
33
|
+
type SizeType = 'small' | 'middle' | 'large' | undefined;
|
|
34
|
+
type ButtonHTMLType = 'button' | 'submit' | 'reset';
|
|
35
|
+
interface BaseButtonProps {
|
|
36
|
+
type?: ButtonType;
|
|
37
|
+
color?: ButtonColorType;
|
|
38
|
+
variant?: ButtonVariantType;
|
|
39
|
+
icon?: ReactNode;
|
|
40
|
+
iconPosition?: 'start' | 'end';
|
|
41
|
+
shape?: ButtonShape;
|
|
42
|
+
size?: SizeType;
|
|
43
|
+
disabled?: boolean;
|
|
44
|
+
loading?: boolean | {
|
|
45
|
+
delay?: number;
|
|
46
|
+
icon?: ReactNode;
|
|
47
|
+
};
|
|
48
|
+
prefixCls?: string;
|
|
49
|
+
className?: string;
|
|
50
|
+
rootClassName?: string;
|
|
51
|
+
ghost?: boolean;
|
|
52
|
+
danger?: boolean;
|
|
53
|
+
block?: boolean;
|
|
54
|
+
children?: ReactNode;
|
|
55
|
+
classNames?: {
|
|
56
|
+
icon?: string;
|
|
57
|
+
};
|
|
58
|
+
styles?: {
|
|
59
|
+
icon?: CSSProperties;
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
interface ButtonProps extends BaseButtonProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'type'> {
|
|
63
|
+
href?: string;
|
|
64
|
+
htmlType?: ButtonHTMLType;
|
|
65
|
+
}
|
|
66
|
+
|
|
11
67
|
declare const Button: ({ type, variant, color, shape, size, htmlType, className, rootClassName, classNames: customClassNames, styles, prefixCls, iconPosition, disabled, ghost, danger, block, children, href, iconNode, isLoading, ...restProps }: ButtonProps & {
|
|
12
68
|
iconNode?: ReactNode;
|
|
13
69
|
isLoading?: boolean;
|
|
14
70
|
}) => ReactElement;
|
|
15
71
|
|
|
72
|
+
type CheckboxProps = DefaultProps & {
|
|
73
|
+
disabled?: boolean;
|
|
74
|
+
onChange?: (e: MouseEvent<HTMLInputElement> & TargetProps) => void;
|
|
75
|
+
onClick?: MouseEventHandler<HTMLElement>;
|
|
76
|
+
onMouseEnter?: MouseEventHandler<HTMLElement>;
|
|
77
|
+
onMouseLeave?: MouseEventHandler<HTMLElement>;
|
|
78
|
+
onKeyPress?: KeyboardEventHandler<HTMLElement>;
|
|
79
|
+
onKeyDown?: KeyboardEventHandler<HTMLElement>;
|
|
80
|
+
value?: boolean;
|
|
81
|
+
tabIndex?: number;
|
|
82
|
+
name?: string;
|
|
83
|
+
children?: ReactNode;
|
|
84
|
+
id?: string;
|
|
85
|
+
autoFocus?: boolean;
|
|
86
|
+
type?: string;
|
|
87
|
+
skipGroup?: boolean;
|
|
88
|
+
required?: boolean;
|
|
89
|
+
defaultChecked?: boolean;
|
|
90
|
+
checked?: boolean;
|
|
91
|
+
};
|
|
92
|
+
|
|
16
93
|
declare const Checkbox: {
|
|
17
94
|
({ prefixCls, className, defaultChecked, checked, style, disabled, onChange, onClick, onMouseEnter, onMouseLeave, onKeyPress, onKeyDown, tabIndex, name, children, id, autoFocus, type, value, required, noStyle }: CheckboxProps): ReactElement;
|
|
18
95
|
displayName: string;
|
|
19
96
|
};
|
|
20
97
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
type UseWatchProps = {
|
|
24
|
-
name?: string;
|
|
25
|
-
defaultValue?: RuleType;
|
|
26
|
-
form?: FormInstance;
|
|
27
|
-
};
|
|
28
|
-
declare const useWatch: ({ name, defaultValue, form }: UseWatchProps) => any;
|
|
29
|
-
|
|
30
|
-
export { Button, Checkbox, EmptyContent as Empty, useForm, useWatch };
|
|
98
|
+
export { Button, Checkbox, EmptyContent as Empty };
|
package/dist/index.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef, useState, useEffect
|
|
2
|
+
import { forwardRef, useState, useEffect } from 'react';
|
|
3
3
|
|
|
4
4
|
function styleInject(css, ref) {
|
|
5
5
|
if (ref === void 0) ref = {};
|
|
@@ -26,16 +26,15 @@ function styleInject(css, ref) {
|
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
var css_248z$
|
|
30
|
-
styleInject(css_248z$
|
|
29
|
+
var css_248z$3 = ":root{--xui-color-hover:#f5f5f5;--xui-color-disabled:#e6e6e6;--xui-primary-color:#1677ff;--xui-primary-color-light:#40a9ff;--xui-text-color:rgba(0,0,0,.88);--xui-text-color-light:rgba(0,0,0,.5);--xui-error-color:#ff4d4f;--xui-error-color-light:#ff6668;--xui-success-color:#52c41a;--xui-background-color:#fff;--xui-font-size-xs:12px;--xui-font-size-sm:14px;--xui-font-size-md:14px;--xui-font-size-lg:16px;--xui-border-radius-sm:4px;--xui-border-radius-md:4px;--xui-border-radius-lg:6px;--xui-border-color:#d9d9d9;--xui-select-primary-color:var(--xui-primary-color);--xui-select-background-color:var(--xui-background-color)}html{font-family:sans-serif}.globalEllipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
|
|
30
|
+
styleInject(css_248z$3);
|
|
31
31
|
|
|
32
|
-
const prefixClsFormItem = 'xUi-form-item';
|
|
33
32
|
const prefixClsEmpty = 'xUi-empty';
|
|
34
33
|
const prefixClsCheckbox = 'xUi-checkbox';
|
|
35
34
|
const prefixClsButton = 'xUi-button';
|
|
36
35
|
|
|
37
|
-
var css_248z$
|
|
38
|
-
styleInject(css_248z$
|
|
36
|
+
var css_248z$2 = ".xUi-empty{align-items:center;display:grid;gap:4px;justify-content:center;padding:14px}.xUi-empty-description{color:var(--xui-text-color);font-size:var(--xui-font-size-md);text-align:center}";
|
|
37
|
+
styleInject(css_248z$2);
|
|
39
38
|
|
|
40
39
|
const EmptyContent = ({
|
|
41
40
|
icon,
|
|
@@ -103,8 +102,8 @@ function clsx(...args) {
|
|
|
103
102
|
}).filter(Boolean).join(' ');
|
|
104
103
|
}
|
|
105
104
|
|
|
106
|
-
var css_248z$
|
|
107
|
-
styleInject(css_248z$
|
|
105
|
+
var css_248z$1 = ".xUi-button{border:1px solid transparent;border-radius:6px;cursor:pointer;font-weight:400;line-height:1.5715;transition:all .3s ease;user-select:none;vertical-align:middle;white-space:nowrap}.xUi-button,.xUi-button-content,.xUi-button-icon{align-items:center;display:inline-flex;justify-content:center}.xUi-button-icon{line-height:0;margin-right:.5em}.xUi-button-icon:last-child{margin-left:.5em;margin-right:0}.xUi-button-spinner{animation:xUi-spin 1s linear infinite;border:1px solid transparent;border-radius:50%;border-top:1px solid var(--xui-text-color);height:1em;width:1em}@keyframes xUi-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.xUi-button-size-small{font-size:12px;height:24px;padding:4px 12px}.xUi-button-size-middle{font-size:14px;height:32px;padding:0 16px}.xUi-button-size-large{font-size:16px;height:40px;padding:8px 20px}.xUi-button-circle{border-radius:50%;justify-content:center;padding:0}.xUi-button-circle.xUi-button-size-small{height:24px;width:24px}.xUi-button-circle.xUi-button-size-large{height:40px;width:40px}.xUi-button-round{border-radius:9999px}.xUi-button-default{background-color:#fff;border-color:var(--xui-border-color);color:rgba(0,0,0,.85)}.xUi-button-default:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}.xUi-button-primary{background-color:var(--xui-primary-color);border-color:var(--xui-primary-color);color:#fff}.xUi-button-primary:hover{background-color:var(--xui-primary-color-light);border-color:var(--xui-primary-color-light);color:#fff}.xUi-button-dashed{background-color:#fff;border-color:var(--xui-border-color);border-style:dashed;color:rgba(0,0,0,.85)}.xUi-button-dashed:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}.xUi-button-text{background-color:transparent;border-color:transparent!important;color:rgba(0,0,0,.88)}.xUi-button-text:hover{background-color:rgba(0,0,0,.04);border-color:transparent;color:rgba(0,0,0,.88)}.xUi-button-link{background-color:transparent;border-color:transparent!important;color:var(--xui-primary-color)}.xUi-button-link:hover{border-color:transparent;color:var(--xui-primary-color-light)}.xUi-button-outlined{color:#fff}.xUi-button-filled,.xUi-button-outlined{background-color:transparent;border-color:var(--xui-border-color)}.xUi-button-filled{color:var(--xui-text-color)}.xUi-button-danger{background-color:transparent;border-color:var(--xui-error-color);color:var(--xui-error-color)}.xUi-button-danger:hover{border-color:var(--xui-error-color-light);color:var(--xui-error-color-light)}.xUi-button-ghost{opacity:0}.xUi-button-ghost:hover{opacity:1}.xUi-button-block{display:flex;width:100%}.xUi-button-disabled,.xUi-button-loading{background-color:var(--xui-color-disabled);border-color:var(--xui-border-color);color:var(--xui-text-color);cursor:not-allowed;opacity:.5;pointer-events:none}.xUi-button-loading{background-color:transparent}";
|
|
106
|
+
styleInject(css_248z$1);
|
|
108
107
|
|
|
109
108
|
const Button = ({
|
|
110
109
|
type = 'default',
|
|
@@ -168,8 +167,8 @@ const Button = ({
|
|
|
168
167
|
});
|
|
169
168
|
};
|
|
170
169
|
|
|
171
|
-
var css_248z
|
|
172
|
-
styleInject(css_248z
|
|
170
|
+
var css_248z = ".xUi-checkbox-wrapper{align-items:center;color:var(--xui-main-color);cursor:pointer;display:inline-flex;font-size:var(--xui-font-size-md);margin:16px 0}.xUi-checkbox{background-color:transparent;border:1px solid var(--xui-border-color);border-radius:var(--xui-border-radius-sm);display:inline-block;height:14px;position:relative;transition:all .3s;width:14px}.xUi-checkbox.xUi-checkbox-checked{background-color:#f0f5ff;border-color:var(--xui-primary-color)}.xUi-checkbox input{cursor:pointer;inset:0;opacity:0;position:absolute}.xUi-checkbox-inner{border-left:0;border-top:0;border:2px solid var(--xui-background-color);height:6px;left:50%;position:absolute;top:50%;transform:rotate(45deg) scale(0);transition:transform .2s ease-in-out;width:10px}.xUi-checkbox-check{background-color:var(--xui-primary-color);border-color:var(--xui-primary-color);display:block;height:100%;position:relative;transition:.1s ease;width:100%}.xUi-checkbox-check:after{border:solid #fff;border-width:0 2px 2px 0;content:\"\";height:8px;left:3px;position:absolute;top:1px;transform:rotate(45deg);width:5px}.xUi-checkbox-disabled,.xUi-checkbox-disabled .xUi-checkbox-check{background-color:var(--xui-color-disabled);border-color:var(--xui-border-color)!important;cursor:not-allowed;opacity:.5}.xUi-checkbox-label{font-size:14px;margin-left:8px;user-select:none}.xUi-checkbox:focus:not(.disabled),.xUi-checkbox:hover:not(.disabled){border-color:var(--xui-primary-color);cursor:pointer}.xUi-checkbox.disabled{cursor:not-allowed;opacity:.5}";
|
|
171
|
+
styleInject(css_248z);
|
|
173
172
|
|
|
174
173
|
const CheckboxClient = /*#__PURE__*/forwardRef(({
|
|
175
174
|
prefixCls,
|
|
@@ -300,405 +299,5 @@ const Checkbox = ({
|
|
|
300
299
|
};
|
|
301
300
|
Checkbox.displayName = 'Checkbox';
|
|
302
301
|
|
|
303
|
-
|
|
304
|
-
const touchedFieldsRef = useRef(new Set());
|
|
305
|
-
const rulesRef = useRef({});
|
|
306
|
-
const warningsRef = useRef({});
|
|
307
|
-
const formRef = useRef({
|
|
308
|
-
...initialValues
|
|
309
|
-
});
|
|
310
|
-
const fieldInstancesRef = useRef({});
|
|
311
|
-
const [isReseting, setIsReseting] = useState(false);
|
|
312
|
-
const [errors, setErrors] = useState({});
|
|
313
|
-
const fieldSubscribers = useRef({});
|
|
314
|
-
const formSubscribers = useRef([]);
|
|
315
|
-
function getFieldInstance(name) {
|
|
316
|
-
return fieldInstancesRef.current[name] || null;
|
|
317
|
-
}
|
|
318
|
-
function getFieldValue(name) {
|
|
319
|
-
return formRef.current[name];
|
|
320
|
-
}
|
|
321
|
-
function getFieldsValue(nameList) {
|
|
322
|
-
if (!nameList) {
|
|
323
|
-
return {
|
|
324
|
-
...formRef.current
|
|
325
|
-
};
|
|
326
|
-
}
|
|
327
|
-
return nameList.reduce((acc, key) => {
|
|
328
|
-
acc[key] = formRef.current[key];
|
|
329
|
-
return acc;
|
|
330
|
-
}, {});
|
|
331
|
-
}
|
|
332
|
-
function getFieldError(name) {
|
|
333
|
-
return errors[name] || [];
|
|
334
|
-
}
|
|
335
|
-
function getFieldWarning(name) {
|
|
336
|
-
return warningsRef.current[name] || [];
|
|
337
|
-
}
|
|
338
|
-
function getFieldsError() {
|
|
339
|
-
return Object.entries(errors).map(([name, err]) => ({
|
|
340
|
-
name,
|
|
341
|
-
errors: err
|
|
342
|
-
}));
|
|
343
|
-
}
|
|
344
|
-
function setFieldValue(name, value, errors, reset) {
|
|
345
|
-
if (!reset && ([undefined, null].includes(value) || formRef.current[name] === value)) {
|
|
346
|
-
return;
|
|
347
|
-
}
|
|
348
|
-
formRef.current[name] = value;
|
|
349
|
-
touchedFieldsRef.current.add(name);
|
|
350
|
-
if (!errors?.length) {
|
|
351
|
-
validateField(name).then(() => {
|
|
352
|
-
const allValues = getFieldsValue();
|
|
353
|
-
fieldSubscribers.current[name]?.forEach(callback => callback(value));
|
|
354
|
-
formSubscribers.current.forEach(callback => callback(allValues));
|
|
355
|
-
if (onValuesChange) {
|
|
356
|
-
onValuesChange({
|
|
357
|
-
[name]: value
|
|
358
|
-
}, allValues);
|
|
359
|
-
}
|
|
360
|
-
if (onFieldsChange) {
|
|
361
|
-
onFieldsChange([{
|
|
362
|
-
name,
|
|
363
|
-
value
|
|
364
|
-
}]);
|
|
365
|
-
}
|
|
366
|
-
});
|
|
367
|
-
} else {
|
|
368
|
-
setErrors({
|
|
369
|
-
[name]: errors
|
|
370
|
-
});
|
|
371
|
-
}
|
|
372
|
-
}
|
|
373
|
-
function setFieldsValue(values) {
|
|
374
|
-
Object.entries(values).forEach(([name, value]) => setFieldValue(name, value));
|
|
375
|
-
}
|
|
376
|
-
function setFields(fields) {
|
|
377
|
-
fields.forEach(({
|
|
378
|
-
name,
|
|
379
|
-
value,
|
|
380
|
-
errors
|
|
381
|
-
}) => setFieldValue(Array.isArray(name) ? name[0] : name, value, errors));
|
|
382
|
-
}
|
|
383
|
-
function isFieldTouched(name) {
|
|
384
|
-
return touchedFieldsRef.current.has(name);
|
|
385
|
-
}
|
|
386
|
-
function isFieldsTouched(nameList, allFieldsTouched = false) {
|
|
387
|
-
if (!nameList) {
|
|
388
|
-
return touchedFieldsRef.current.size > 0;
|
|
389
|
-
}
|
|
390
|
-
return allFieldsTouched ? nameList.every(name => touchedFieldsRef.current.has(name)) : nameList.some(name => touchedFieldsRef.current.has(name));
|
|
391
|
-
}
|
|
392
|
-
function isFieldValidating(name) {
|
|
393
|
-
return !!name;
|
|
394
|
-
}
|
|
395
|
-
function registerField(name, rules = []) {
|
|
396
|
-
if (!(name in formRef.current)) {
|
|
397
|
-
formRef.current[name] = initialValues?.[name];
|
|
398
|
-
}
|
|
399
|
-
rulesRef.current[name] = rules;
|
|
400
|
-
}
|
|
401
|
-
async function validateField(name) {
|
|
402
|
-
const value = formRef.current[name];
|
|
403
|
-
const rules = rulesRef.current[name] || [];
|
|
404
|
-
const fieldErrors = [];
|
|
405
|
-
const fieldWarnings = [];
|
|
406
|
-
await Promise.all([rules].flat(1).map(async rule => {
|
|
407
|
-
rule = typeof rule === 'function' ? rule(formInstance) : rule;
|
|
408
|
-
if (rule.required && (value === undefined || value === null || value === '' || Array.isArray(value) && !value.length)) {
|
|
409
|
-
fieldErrors.push(rule.message || 'This field is required');
|
|
410
|
-
}
|
|
411
|
-
if ((typeof value === 'string' || typeof value === 'number' || Array.isArray(value)) && rule.min !== undefined && String(value).length < rule.min) {
|
|
412
|
-
fieldErrors.push(rule.message || `Must be at least ${rule.min} characters`);
|
|
413
|
-
}
|
|
414
|
-
if ((typeof value === 'string' || typeof value === 'number' || Array.isArray(value)) && rule.max !== undefined && String(value).length > rule.max) {
|
|
415
|
-
fieldErrors.push(rule.message || `Must be at most ${rule.max} characters`);
|
|
416
|
-
}
|
|
417
|
-
if (rule.pattern && !rule.pattern.test(String(value))) {
|
|
418
|
-
fieldErrors.push(rule.message || 'Invalid format');
|
|
419
|
-
}
|
|
420
|
-
if (rule.warningPattern && !rule.warningPattern.test(String(value))) {
|
|
421
|
-
fieldWarnings.push(rule.warningMessage || 'Invalid format');
|
|
422
|
-
}
|
|
423
|
-
if (rule.validator) {
|
|
424
|
-
try {
|
|
425
|
-
await rule.validator(rule, value, error => error && fieldErrors.push(error));
|
|
426
|
-
} catch (error) {
|
|
427
|
-
fieldErrors.push(error instanceof Error ? error.message : String(error));
|
|
428
|
-
}
|
|
429
|
-
}
|
|
430
|
-
}));
|
|
431
|
-
setErrors(prev => ({
|
|
432
|
-
...prev,
|
|
433
|
-
[name]: fieldErrors
|
|
434
|
-
}));
|
|
435
|
-
warningsRef.current[name] = fieldWarnings;
|
|
436
|
-
return fieldErrors.length === 0;
|
|
437
|
-
}
|
|
438
|
-
async function validateFields(nameList) {
|
|
439
|
-
const fieldsToValidate = nameList || Object.keys(formRef.current);
|
|
440
|
-
const results = await Promise.all(fieldsToValidate.map(name => validateField(name)));
|
|
441
|
-
return results.every(valid => valid);
|
|
442
|
-
}
|
|
443
|
-
function resetFields(nameList) {
|
|
444
|
-
if (nameList?.length) {
|
|
445
|
-
nameList.forEach(name => {
|
|
446
|
-
formRef.current[name] = initialValues[name];
|
|
447
|
-
touchedFieldsRef.current.delete(name);
|
|
448
|
-
delete warningsRef.current[name];
|
|
449
|
-
setErrors(prev => ({
|
|
450
|
-
...prev,
|
|
451
|
-
[name]: []
|
|
452
|
-
}));
|
|
453
|
-
setFieldValue(name, initialValues[name], undefined, true);
|
|
454
|
-
});
|
|
455
|
-
} else {
|
|
456
|
-
touchedFieldsRef.current.clear();
|
|
457
|
-
warningsRef.current = {};
|
|
458
|
-
Object.keys(formRef.current).forEach(name => {
|
|
459
|
-
setFieldValue(name, initialValues[name], undefined, true);
|
|
460
|
-
});
|
|
461
|
-
}
|
|
462
|
-
formSubscribers.current.forEach(callback => callback(getFieldsValue()));
|
|
463
|
-
setIsReseting(prev => !prev);
|
|
464
|
-
}
|
|
465
|
-
async function submit() {
|
|
466
|
-
return (await validateFields()) ? formRef.current : undefined;
|
|
467
|
-
}
|
|
468
|
-
function subscribeToField(name, callback) {
|
|
469
|
-
if (!fieldSubscribers.current[name]) {
|
|
470
|
-
fieldSubscribers.current[name] = [];
|
|
471
|
-
}
|
|
472
|
-
fieldSubscribers.current[name].push(callback);
|
|
473
|
-
return () => {
|
|
474
|
-
fieldSubscribers.current[name] = fieldSubscribers.current[name].filter(cb => cb !== callback);
|
|
475
|
-
};
|
|
476
|
-
}
|
|
477
|
-
function subscribeToForm(callback) {
|
|
478
|
-
formSubscribers.current.push(callback);
|
|
479
|
-
return () => {
|
|
480
|
-
formSubscribers.current = formSubscribers.current.filter(cb => cb !== callback);
|
|
481
|
-
};
|
|
482
|
-
}
|
|
483
|
-
function subscribeToFields(names, callback) {
|
|
484
|
-
const fieldCallbacks = names.map(name => subscribeToField(name, () => {
|
|
485
|
-
const updatedValues = getFieldsValue(names);
|
|
486
|
-
callback(updatedValues);
|
|
487
|
-
}));
|
|
488
|
-
return () => {
|
|
489
|
-
fieldCallbacks.forEach(unsubscribe => unsubscribe());
|
|
490
|
-
};
|
|
491
|
-
}
|
|
492
|
-
const formInstance = {
|
|
493
|
-
submit,
|
|
494
|
-
setFields,
|
|
495
|
-
resetFields,
|
|
496
|
-
getFieldError,
|
|
497
|
-
registerField,
|
|
498
|
-
setFieldValue,
|
|
499
|
-
getFieldValue,
|
|
500
|
-
validateFields,
|
|
501
|
-
setFieldsValue,
|
|
502
|
-
getFieldsValue,
|
|
503
|
-
isFieldTouched,
|
|
504
|
-
getFieldsError,
|
|
505
|
-
isFieldsTouched,
|
|
506
|
-
getFieldWarning,
|
|
507
|
-
isFieldValidating,
|
|
508
|
-
subscribeToField,
|
|
509
|
-
subscribeToForm,
|
|
510
|
-
onFieldsChange,
|
|
511
|
-
onValuesChange,
|
|
512
|
-
getFieldInstance,
|
|
513
|
-
subscribeToFields,
|
|
514
|
-
isReseting
|
|
515
|
-
};
|
|
516
|
-
return formInstance;
|
|
517
|
-
};
|
|
518
|
-
|
|
519
|
-
var css_248z = ".xUi-form-item{display:flex;margin-bottom:10px;position:relative}.xUi-form-item.noStyle{display:inline-flex;margin-bottom:0}.xUi-form-item-label{align-items:center;color:var(--xui-text-color);display:flex;font-size:var(--xui-font-size-md);font-weight:500;line-height:20px;margin-bottom:4px}.xUi-form-item-error{bottom:-6px;color:var(--xui-error-color);font-size:var(--xui-font-size-xs);line-height:16px;position:absolute;right:0;user-select:none}.xUi-form-item-required{color:var(--xui-error-color);display:inline-block;font-size:var(--xui-font-size-md);line-height:1;margin-left:4px;margin-right:4px}.xUi-form-item.horizontal{align-items:center;flex-direction:row;gap:4px}.xUi-form-item.vertical{align-self:flex-start;flex-direction:column}.xUi-form-item .xUi-input-container{margin-bottom:12px!important;width:-webkit-fill-available}.xUi-form-item .xUi-datepicker-container{margin-bottom:10px}";
|
|
520
|
-
styleInject(css_248z);
|
|
521
|
-
|
|
522
|
-
const REF_CLIENT_HEIGHT = 24;
|
|
523
|
-
const FormItem = ({
|
|
524
|
-
prefixCls = prefixClsFormItem,
|
|
525
|
-
name,
|
|
526
|
-
label,
|
|
527
|
-
rules = [],
|
|
528
|
-
children,
|
|
529
|
-
className = '',
|
|
530
|
-
layout = 'vertical',
|
|
531
|
-
style = {},
|
|
532
|
-
valuePropName,
|
|
533
|
-
dependencies = [],
|
|
534
|
-
initialValue,
|
|
535
|
-
feedbackIcons,
|
|
536
|
-
...props
|
|
537
|
-
}) => {
|
|
538
|
-
const formContext = useContext(FormContext);
|
|
539
|
-
const errorRef = useRef(null);
|
|
540
|
-
if (!formContext) {
|
|
541
|
-
throw new Error('FormItem must be used within a Form');
|
|
542
|
-
}
|
|
543
|
-
const {
|
|
544
|
-
isReseting,
|
|
545
|
-
registerField,
|
|
546
|
-
getFieldError,
|
|
547
|
-
getFieldValue,
|
|
548
|
-
setFieldValue,
|
|
549
|
-
getFieldInstance,
|
|
550
|
-
subscribeToFields,
|
|
551
|
-
validateFields
|
|
552
|
-
} = formContext;
|
|
553
|
-
const childrenList = useMemo(() => (Array.isArray(children) ? children : [children]).filter(Boolean), [children]);
|
|
554
|
-
useEffect(() => {
|
|
555
|
-
if (name && !getFieldInstance(name)) {
|
|
556
|
-
registerField(name, rules);
|
|
557
|
-
}
|
|
558
|
-
}, [name, rules]);
|
|
559
|
-
useEffect(() => {
|
|
560
|
-
if (initialValue) {
|
|
561
|
-
setFieldValue(name, initialValue);
|
|
562
|
-
}
|
|
563
|
-
}, []);
|
|
564
|
-
useEffect(() => {
|
|
565
|
-
if (name && dependencies.length > 0) {
|
|
566
|
-
const unsubscribe = subscribeToFields(dependencies, () => {
|
|
567
|
-
validateFields([name]);
|
|
568
|
-
});
|
|
569
|
-
return () => {
|
|
570
|
-
unsubscribe();
|
|
571
|
-
};
|
|
572
|
-
}
|
|
573
|
-
}, [dependencies, name]);
|
|
574
|
-
useEffect(() => {
|
|
575
|
-
if (errorRef.current && errorRef.current?.clientHeight >= REF_CLIENT_HEIGHT) {
|
|
576
|
-
errorRef.current.style.position = 'relative';
|
|
577
|
-
errorRef.current.style.marginTop = '-16px';
|
|
578
|
-
}
|
|
579
|
-
}, [errorRef.current]);
|
|
580
|
-
const isRequired = useMemo(() => rules.some(rule => rule.required), [rules]);
|
|
581
|
-
const errorMessage = getFieldError(valuePropName || name)?.[0];
|
|
582
|
-
return jsxs("div", {
|
|
583
|
-
style: style,
|
|
584
|
-
className: clsx([`${prefixCls}`, {
|
|
585
|
-
[layout]: layout,
|
|
586
|
-
[className]: className,
|
|
587
|
-
noStyle: props.noStyle
|
|
588
|
-
}]),
|
|
589
|
-
children: [!props.noStyle && (label || name) && jsxs("label", {
|
|
590
|
-
className: `${prefixCls}-label`,
|
|
591
|
-
htmlFor: name,
|
|
592
|
-
children: [label || name, ":", isRequired && jsx("span", {
|
|
593
|
-
className: `${prefixCls}-required`,
|
|
594
|
-
children: "*"
|
|
595
|
-
})]
|
|
596
|
-
}), Children.map(childrenList, (child, key) => {
|
|
597
|
-
if (/*#__PURE__*/isValidElement(child) && child.type !== Fragment$1) {
|
|
598
|
-
const {
|
|
599
|
-
value,
|
|
600
|
-
...childProps
|
|
601
|
-
} = child.props;
|
|
602
|
-
const fieldValue = getFieldValue(valuePropName || name) ?? initialValue;
|
|
603
|
-
return /*#__PURE__*/createElement(FormItemChildComponent, {
|
|
604
|
-
...childProps,
|
|
605
|
-
name: name,
|
|
606
|
-
child: child,
|
|
607
|
-
value: value,
|
|
608
|
-
fieldValue: fieldValue,
|
|
609
|
-
noStyle: props.noStyle,
|
|
610
|
-
normalize: props.normalize,
|
|
611
|
-
key: `${key}_${isReseting}`,
|
|
612
|
-
error: Boolean(errorMessage),
|
|
613
|
-
setFieldValue: setFieldValue,
|
|
614
|
-
valuePropName: valuePropName,
|
|
615
|
-
feedbackIcons: feedbackIcons,
|
|
616
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
617
|
-
// @ts-expect-error
|
|
618
|
-
size: childProps.size || props.size
|
|
619
|
-
});
|
|
620
|
-
}
|
|
621
|
-
return child;
|
|
622
|
-
}), !props.noStyle && errorMessage && jsx("span", {
|
|
623
|
-
ref: errorRef,
|
|
624
|
-
className: `${prefixCls}-error`,
|
|
625
|
-
children: errorMessage
|
|
626
|
-
})]
|
|
627
|
-
});
|
|
628
|
-
};
|
|
629
|
-
const FormItemChildComponent = ({
|
|
630
|
-
child,
|
|
631
|
-
name,
|
|
632
|
-
error,
|
|
633
|
-
fieldValue,
|
|
634
|
-
setFieldValue,
|
|
635
|
-
onChange,
|
|
636
|
-
valuePropName,
|
|
637
|
-
normalize,
|
|
638
|
-
...props
|
|
639
|
-
}) => {
|
|
640
|
-
const formContext = useContext(FormContext);
|
|
641
|
-
const [wasNormalize, setWasNormalize] = useState(false);
|
|
642
|
-
const {
|
|
643
|
-
getFieldsValue
|
|
644
|
-
} = formContext || {};
|
|
645
|
-
const handleChange = (e, option) => {
|
|
646
|
-
let rawValue = e?.target ? e.target.value : e;
|
|
647
|
-
if (normalize) {
|
|
648
|
-
const prevValue = fieldValue ?? props.value;
|
|
649
|
-
const allValues = getFieldsValue?.();
|
|
650
|
-
rawValue = normalize(rawValue, prevValue, allValues);
|
|
651
|
-
if (rawValue === prevValue) {
|
|
652
|
-
e.target.value = rawValue;
|
|
653
|
-
setWasNormalize(prev => !prev);
|
|
654
|
-
const timeout = setTimeout(() => {
|
|
655
|
-
document.querySelector(`[name='${name}']`)?.focus();
|
|
656
|
-
clearTimeout(timeout);
|
|
657
|
-
}, 0);
|
|
658
|
-
return;
|
|
659
|
-
}
|
|
660
|
-
}
|
|
661
|
-
setFieldValue(valuePropName || name, rawValue);
|
|
662
|
-
onChange?.(e, option);
|
|
663
|
-
};
|
|
664
|
-
return /*#__PURE__*/createElement(child.type, {
|
|
665
|
-
...props,
|
|
666
|
-
name: name,
|
|
667
|
-
onChange: handleChange,
|
|
668
|
-
...(error ? {
|
|
669
|
-
error
|
|
670
|
-
} : {}),
|
|
671
|
-
key: `${name}_${wasNormalize}`,
|
|
672
|
-
value: fieldValue ?? props.value
|
|
673
|
-
});
|
|
674
|
-
};
|
|
675
|
-
FormItem.displayName = 'FormItem';
|
|
676
|
-
|
|
677
|
-
const FormContext = /*#__PURE__*/createContext(null);
|
|
678
|
-
|
|
679
|
-
const useWatch = ({
|
|
680
|
-
name,
|
|
681
|
-
defaultValue,
|
|
682
|
-
form
|
|
683
|
-
}) => {
|
|
684
|
-
const formContext = useContext(FormContext);
|
|
685
|
-
const formInstance = form || formContext;
|
|
686
|
-
if (!formInstance) {
|
|
687
|
-
throw new Error('useWatch must be used within a Form or with a form instance.');
|
|
688
|
-
}
|
|
689
|
-
const [value, setValue] = useState(() => {
|
|
690
|
-
return name ? formInstance.getFieldValue(name) ?? defaultValue : formInstance.getFieldsValue() ?? defaultValue;
|
|
691
|
-
});
|
|
692
|
-
useEffect(() => {
|
|
693
|
-
if (!name) {
|
|
694
|
-
const unsubscribe = formInstance.subscribeToForm(setValue);
|
|
695
|
-
return () => unsubscribe();
|
|
696
|
-
}
|
|
697
|
-
const unsubscribe = formInstance.subscribeToField(name, setValue);
|
|
698
|
-
return () => unsubscribe();
|
|
699
|
-
}, [name, formInstance]);
|
|
700
|
-
return value;
|
|
701
|
-
};
|
|
702
|
-
|
|
703
|
-
export { Button, Checkbox, EmptyContent as Empty, useForm, useWatch };
|
|
302
|
+
export { Button, Checkbox, EmptyContent as Empty };
|
|
704
303
|
//# sourceMappingURL=index.esm.js.map
|