@pnkx-lib/ui 1.9.11 → 1.9.14
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/style.css +1 -1
- package/es/chunks/{CategoryStatus-CKERJGNO.js → CategoryStatus-D8gu9DFK.js} +4551 -68
- package/es/chunks/{Checkbox-CJ_M7IzZ.js → Radio-DA0U4ozV.js} +3 -52
- package/es/chunks/{Switch-eMq9KkOy.js → Switch-DQm0didM.js} +81 -46
- package/es/fields/index.js +2 -2
- package/es/index.js +3 -3
- package/es/ui/index.js +2 -2
- package/package.json +1 -1
@@ -1,5 +1,5 @@
|
|
1
|
-
import { g as get, j as jsxRuntimeExports, L as Label, E as ErrorMessage, T as Typography } from './Switch-
|
2
|
-
import { Select as Select$1, Radio
|
1
|
+
import { g as get, j as jsxRuntimeExports, L as Label, E as ErrorMessage, T as Typography } from './Switch-DQm0didM.js';
|
2
|
+
import { Select as Select$1, Radio } from 'antd';
|
3
3
|
|
4
4
|
const Select = (props) => {
|
5
5
|
//! State
|
@@ -100,53 +100,4 @@ const RadioGroup = (props) => {
|
|
100
100
|
] });
|
101
101
|
};
|
102
102
|
|
103
|
-
|
104
|
-
//! State
|
105
|
-
const {
|
106
|
-
field,
|
107
|
-
formState,
|
108
|
-
label,
|
109
|
-
afterOnChange,
|
110
|
-
customStyleContainer,
|
111
|
-
customStyleCheckbox,
|
112
|
-
...restProps
|
113
|
-
} = props;
|
114
|
-
const { name, value, onChange, onBlur } = field || {};
|
115
|
-
const { touchedFields, errors, isSubmitted } = formState || {};
|
116
|
-
const isTouched = get(touchedFields, name);
|
117
|
-
const errorMessage = get(errors, name)?.message;
|
118
|
-
//! Function
|
119
|
-
const handleChange = (e) => {
|
120
|
-
const checked = e.target.checked;
|
121
|
-
onChange?.(checked);
|
122
|
-
afterOnChange?.(checked);
|
123
|
-
};
|
124
|
-
const renderErrorMessage = () => {
|
125
|
-
if (!errorMessage) return null;
|
126
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
127
|
-
ErrorMessage,
|
128
|
-
{
|
129
|
-
errorMessage,
|
130
|
-
isTouched,
|
131
|
-
isSubmitted
|
132
|
-
}
|
133
|
-
);
|
134
|
-
};
|
135
|
-
//! Render
|
136
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: customStyleContainer, children: [
|
137
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
138
|
-
Checkbox,
|
139
|
-
{
|
140
|
-
onBlur,
|
141
|
-
checked: !!value,
|
142
|
-
onChange: handleChange,
|
143
|
-
className: customStyleCheckbox,
|
144
|
-
...restProps,
|
145
|
-
children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography.Text, { children: label })
|
146
|
-
}
|
147
|
-
),
|
148
|
-
renderErrorMessage()
|
149
|
-
] });
|
150
|
-
};
|
151
|
-
|
152
|
-
export { CheckboxField as C, RadioGroup as R, Select as S };
|
103
|
+
export { RadioGroup as R, Select as S };
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import React__default, { useRef, useState, useEffect, useLayoutEffect, useMemo, forwardRef, useCallback, createElement, Component, createRef, createContext, useContext } from 'react';
|
3
|
-
import { Typography as Typography$1, Input as Input$1, DatePicker, Upload, Image, Switch } from 'antd';
|
3
|
+
import { Typography as Typography$1, Input as Input$1, Checkbox, DatePicker, Upload, Image, Switch } from 'antd';
|
4
4
|
import { g as require_baseGetTag, h as requireIsObjectLike, k as requireIsArray, d as require_MapCache, o as require_Symbol, p as getDefaultExportFromCjs, q as commonjsGlobal, T as TINY_API } from './common-b3FKGF0Y.js';
|
5
5
|
import * as ReactDOM from 'react-dom';
|
6
6
|
import ReactDOM__default, { findDOMNode } from 'react-dom';
|
@@ -3495,8 +3495,6 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
|
|
3495
3495
|
return result;
|
3496
3496
|
};
|
3497
3497
|
|
3498
|
-
const useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
3499
|
-
|
3500
3498
|
/**
|
3501
3499
|
* This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
|
3502
3500
|
*
|
@@ -3541,8 +3539,10 @@ function useFormState(props) {
|
|
3541
3539
|
isValid: false,
|
3542
3540
|
errors: false,
|
3543
3541
|
});
|
3544
|
-
|
3545
|
-
|
3542
|
+
const _name = React__default.useRef(name);
|
3543
|
+
_name.current = name;
|
3544
|
+
React__default.useEffect(() => control._subscribe({
|
3545
|
+
name: _name.current,
|
3546
3546
|
formState: _localProxyFormState.current,
|
3547
3547
|
exact,
|
3548
3548
|
callback: (formState) => {
|
@@ -3552,7 +3552,7 @@ function useFormState(props) {
|
|
3552
3552
|
...formState,
|
3553
3553
|
});
|
3554
3554
|
},
|
3555
|
-
}), [
|
3555
|
+
}), [control, disabled, exact]);
|
3556
3556
|
React__default.useEffect(() => {
|
3557
3557
|
_localProxyFormState.current.isValid && control._setValid(true);
|
3558
3558
|
}, [control]);
|
@@ -3592,17 +3592,19 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
|
|
3592
3592
|
function useWatch(props) {
|
3593
3593
|
const methods = useFormContext();
|
3594
3594
|
const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
|
3595
|
+
const _name = React__default.useRef(name);
|
3595
3596
|
const _defaultValue = React__default.useRef(defaultValue);
|
3596
|
-
|
3597
|
-
|
3598
|
-
name:
|
3597
|
+
_name.current = name;
|
3598
|
+
React__default.useEffect(() => control._subscribe({
|
3599
|
+
name: _name.current,
|
3599
3600
|
formState: {
|
3600
3601
|
values: true,
|
3601
3602
|
},
|
3602
3603
|
exact,
|
3603
3604
|
callback: (formState) => !disabled &&
|
3604
|
-
updateValue(generateWatchOutput(
|
3605
|
-
}), [
|
3605
|
+
updateValue(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, _defaultValue.current)),
|
3606
|
+
}), [control, disabled, exact]);
|
3607
|
+
const [value, updateValue] = React__default.useState(control._getWatch(name, defaultValue));
|
3606
3608
|
React__default.useEffect(() => control._removeUnmounted());
|
3607
3609
|
return value;
|
3608
3610
|
}
|
@@ -4418,7 +4420,6 @@ function createFormControl(props = {}) {
|
|
4418
4420
|
let _formState = {
|
4419
4421
|
submitCount: 0,
|
4420
4422
|
isDirty: false,
|
4421
|
-
isReady: false,
|
4422
4423
|
isLoading: isFunction$1(_options.defaultValues),
|
4423
4424
|
isValidating: false,
|
4424
4425
|
isSubmitted: false,
|
@@ -4433,7 +4434,7 @@ function createFormControl(props = {}) {
|
|
4433
4434
|
};
|
4434
4435
|
const _fields = {};
|
4435
4436
|
let _defaultValues = isObject(_options.defaultValues) || isObject(_options.values)
|
4436
|
-
? cloneObject(_options.
|
4437
|
+
? cloneObject(_options.values || _options.defaultValues) || {}
|
4437
4438
|
: {};
|
4438
4439
|
let _formValues = _options.shouldUnregister
|
4439
4440
|
? {}
|
@@ -5484,7 +5485,6 @@ function useForm(props = {}) {
|
|
5484
5485
|
validatingFields: {},
|
5485
5486
|
errors: props.errors || {},
|
5486
5487
|
disabled: props.disabled || false,
|
5487
|
-
isReady: false,
|
5488
5488
|
defaultValues: isFunction$1(props.defaultValues)
|
5489
5489
|
? undefined
|
5490
5490
|
: props.defaultValues,
|
@@ -5502,37 +5502,12 @@ function useForm(props = {}) {
|
|
5502
5502
|
}
|
5503
5503
|
const control = _formControl.current.control;
|
5504
5504
|
control._options = props;
|
5505
|
-
|
5506
|
-
|
5507
|
-
|
5508
|
-
|
5509
|
-
|
5510
|
-
});
|
5511
|
-
updateFormState((data) => ({
|
5512
|
-
...data,
|
5513
|
-
isReady: true,
|
5514
|
-
}));
|
5515
|
-
control._formState.isReady = true;
|
5516
|
-
return sub;
|
5517
|
-
}, [control]);
|
5505
|
+
React__default.useLayoutEffect(() => control._subscribe({
|
5506
|
+
formState: control._proxyFormState,
|
5507
|
+
callback: () => updateFormState({ ...control._formState }),
|
5508
|
+
reRenderRoot: true,
|
5509
|
+
}), [control]);
|
5518
5510
|
React__default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
|
5519
|
-
React__default.useEffect(() => {
|
5520
|
-
if (props.mode) {
|
5521
|
-
control._options.mode = props.mode;
|
5522
|
-
}
|
5523
|
-
if (props.reValidateMode) {
|
5524
|
-
control._options.reValidateMode = props.reValidateMode;
|
5525
|
-
}
|
5526
|
-
if (props.errors && !isEmptyObject(props.errors)) {
|
5527
|
-
control._setErrors(props.errors);
|
5528
|
-
}
|
5529
|
-
}, [control, props.errors, props.mode, props.reValidateMode]);
|
5530
|
-
React__default.useEffect(() => {
|
5531
|
-
props.shouldUnregister &&
|
5532
|
-
control._subjects.state.next({
|
5533
|
-
values: control._getWatch(),
|
5534
|
-
});
|
5535
|
-
}, [control, props.shouldUnregister]);
|
5536
5511
|
React__default.useEffect(() => {
|
5537
5512
|
if (control._proxyFormState.isDirty) {
|
5538
5513
|
const isDirty = control._getDirty();
|
@@ -5552,7 +5527,12 @@ function useForm(props = {}) {
|
|
5552
5527
|
else {
|
5553
5528
|
control._resetDefaultValues();
|
5554
5529
|
}
|
5555
|
-
}, [
|
5530
|
+
}, [props.values, control]);
|
5531
|
+
React__default.useEffect(() => {
|
5532
|
+
if (props.errors && !isEmptyObject(props.errors)) {
|
5533
|
+
control._setErrors(props.errors);
|
5534
|
+
}
|
5535
|
+
}, [props.errors, control]);
|
5556
5536
|
React__default.useEffect(() => {
|
5557
5537
|
if (!control._state.mount) {
|
5558
5538
|
control._setValid();
|
@@ -5564,6 +5544,12 @@ function useForm(props = {}) {
|
|
5564
5544
|
}
|
5565
5545
|
control._removeUnmounted();
|
5566
5546
|
});
|
5547
|
+
React__default.useEffect(() => {
|
5548
|
+
props.shouldUnregister &&
|
5549
|
+
control._subjects.state.next({
|
5550
|
+
values: control._getWatch(),
|
5551
|
+
});
|
5552
|
+
}, [props.shouldUnregister, control]);
|
5567
5553
|
_formControl.current.formState = getProxyFormState(formState, control);
|
5568
5554
|
return _formControl.current;
|
5569
5555
|
}
|
@@ -24793,6 +24779,55 @@ const Textarea = forwardRef(
|
|
24793
24779
|
);
|
24794
24780
|
React__default.memo(Textarea);
|
24795
24781
|
|
24782
|
+
const CheckboxField = (props) => {
|
24783
|
+
//! State
|
24784
|
+
const {
|
24785
|
+
field,
|
24786
|
+
formState,
|
24787
|
+
label,
|
24788
|
+
afterOnChange,
|
24789
|
+
customStyleContainer,
|
24790
|
+
customStyleCheckbox,
|
24791
|
+
...restProps
|
24792
|
+
} = props;
|
24793
|
+
const { name, value, onChange, onBlur } = field || {};
|
24794
|
+
const { touchedFields, errors, isSubmitted } = formState || {};
|
24795
|
+
const isTouched = get$1(touchedFields, name);
|
24796
|
+
const errorMessage = get$1(errors, name)?.message;
|
24797
|
+
//! Function
|
24798
|
+
const handleChange = (e) => {
|
24799
|
+
const checked = e.target.checked;
|
24800
|
+
onChange?.(checked);
|
24801
|
+
afterOnChange?.(checked);
|
24802
|
+
};
|
24803
|
+
const renderErrorMessage = () => {
|
24804
|
+
if (!errorMessage) return null;
|
24805
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
24806
|
+
ErrorMessage,
|
24807
|
+
{
|
24808
|
+
errorMessage,
|
24809
|
+
isTouched,
|
24810
|
+
isSubmitted
|
24811
|
+
}
|
24812
|
+
);
|
24813
|
+
};
|
24814
|
+
//! Render
|
24815
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: customStyleContainer, children: [
|
24816
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
24817
|
+
Checkbox,
|
24818
|
+
{
|
24819
|
+
onBlur,
|
24820
|
+
checked: !!value,
|
24821
|
+
onChange: handleChange,
|
24822
|
+
className: customStyleCheckbox,
|
24823
|
+
...restProps,
|
24824
|
+
children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography.Text, { children: label })
|
24825
|
+
}
|
24826
|
+
),
|
24827
|
+
renderErrorMessage()
|
24828
|
+
] });
|
24829
|
+
};
|
24830
|
+
|
24796
24831
|
function _typeof(o) {
|
24797
24832
|
"@babel/helpers - typeof";
|
24798
24833
|
|
@@ -39335,4 +39370,4 @@ const SwitchField = (props) => {
|
|
39335
39370
|
};
|
39336
39371
|
React__default.memo(SwitchField);
|
39337
39372
|
|
39338
|
-
export { _createSuper as A, _assertThisInitialized$1 as B,
|
39373
|
+
export { _createSuper as A, _assertThisInitialized$1 as B, CheckboxField as C, DatePickerField as D, ErrorMessage as E, FastColor as F, _objectWithoutProperties as G, IconContext as H, Input as I, Label as L, PnkxField as P, RangePickerField as R, Typography as T, _extends as _, TinyMCE as a, Icon as b, _typeof as c, classNames as d, _arrayLikeToArray as e, _unsupportedIterableToArray as f, get$1 as g, _createClass as h, _classCallCheck as i, jsxRuntimeExports as j, _defineProperty as k, _slicedToArray as l, warning$1 as m, canUseDom as n, _objectSpread2 as o, updateCSS as p, _arrayWithHoles as q, removeCSS as r, _nonIterableRest as s, resetWarned as t, useForm as u, generate$1 as v, warningOnce as w, presetPrimaryColors as x, presetPalettes as y, _inherits as z };
|
package/es/fields/index.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
export { D as DatePickerField, I as Input, P as PnkxField, R as RangePickerField, a as TinyMCE } from '../chunks/Switch-
|
2
|
-
export {
|
1
|
+
export { C as CheckboxField, D as DatePickerField, I as Input, P as PnkxField, R as RangePickerField, a as TinyMCE } from '../chunks/Switch-DQm0didM.js';
|
2
|
+
export { R as RadioGroup, S as Select } from '../chunks/Radio-DA0U4ozV.js';
|
package/es/index.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
|
-
export { A as Alert, E as Anchor, G as Appfix, I as AutoComplete, e as Badge, g as Breadcrumb, U as BulkAction, B as Button, C as CascaderField, f as Col, V as ConfirmModal, d as Container, o as Divider, q as Drawer, D as Dropdown, N as Empty, X as ErrorBoundary, F as Flex, H as Heading, O as Image, L as Layout, j as Menu, M as Modal, k as Pagination, J as PnkxCollapse, K as PnkxColorPicker, r as Popconfirm, P as Popover, Q as QRCode, u as Rate, s as Result, R as Row, c as SearchFiltersForm, v as Segmented, m as Sidebar, S as Skeleton, h as Space, p as Spin, i as Splitter, w as Statistic, l as Steps, T as Table, b as Tabs, n as Tag, x as Timeline, a as Tooltip, y as Tour, z as Tree, W as Watermark, t as typeColorMap } from './chunks/CategoryStatus-
|
2
|
-
export { D as DatePickerField, E as ErrorMessage, I as Input, L as Label, P as PnkxField, R as RangePickerField, a as TinyMCE, T as Typography } from './chunks/Switch-
|
1
|
+
export { A as Alert, E as Anchor, G as Appfix, I as AutoComplete, e as Badge, g as Breadcrumb, U as BulkAction, B as Button, C as CascaderField, f as Col, V as ConfirmModal, d as Container, o as Divider, q as Drawer, D as Dropdown, N as Empty, X as ErrorBoundary, F as Flex, H as Heading, O as Image, L as Layout, j as Menu, M as Modal, k as Pagination, J as PnkxCollapse, K as PnkxColorPicker, r as Popconfirm, P as Popover, Q as QRCode, u as Rate, s as Result, R as Row, c as SearchFiltersForm, v as Segmented, m as Sidebar, S as Skeleton, h as Space, p as Spin, i as Splitter, w as Statistic, l as Steps, T as Table, b as Tabs, n as Tag, x as Timeline, a as Tooltip, y as Tour, z as Tree, W as Watermark, t as typeColorMap } from './chunks/CategoryStatus-D8gu9DFK.js';
|
2
|
+
export { C as CheckboxField, D as DatePickerField, E as ErrorMessage, I as Input, L as Label, P as PnkxField, R as RangePickerField, a as TinyMCE, T as Typography } from './chunks/Switch-DQm0didM.js';
|
3
3
|
import 'react-router';
|
4
|
-
export {
|
4
|
+
export { R as RadioGroup, S as Select } from './chunks/Radio-DA0U4ozV.js';
|
5
5
|
export { u as useToast } from './chunks/cloneDeep-BLYi2V0G.js';
|
6
6
|
export { u as useFiltersHandler, a as useMessage } from './chunks/useMessage-D_-VT5B4.js';
|
package/es/ui/index.js
CHANGED
@@ -1,3 +1,3 @@
|
|
1
|
-
export { A as Alert, E as Anchor, G as Appfix, I as AutoComplete, e as Badge, g as Breadcrumb, U as BulkAction, B as Button, C as CascaderField, f as Col, V as ConfirmModal, d as Container, o as Divider, q as Drawer, D as Dropdown, N as Empty, X as ErrorBoundary, F as Flex, H as Heading, O as Image, L as Layout, j as Menu, M as Modal, k as Pagination, J as PnkxCollapse, K as PnkxColorPicker, r as Popconfirm, P as Popover, Q as QRCode, u as Rate, s as Result, R as Row, c as SearchFiltersForm, v as Segmented, m as Sidebar, S as Skeleton, h as Space, p as Spin, i as Splitter, w as Statistic, l as Steps, T as Table, b as Tabs, n as Tag, x as Timeline, a as Tooltip, y as Tour, z as Tree, W as Watermark, t as typeColorMap } from '../chunks/CategoryStatus-
|
2
|
-
export { E as ErrorMessage, L as Label, T as Typography } from '../chunks/Switch-
|
1
|
+
export { A as Alert, E as Anchor, G as Appfix, I as AutoComplete, e as Badge, g as Breadcrumb, U as BulkAction, B as Button, C as CascaderField, f as Col, V as ConfirmModal, d as Container, o as Divider, q as Drawer, D as Dropdown, N as Empty, X as ErrorBoundary, F as Flex, H as Heading, O as Image, L as Layout, j as Menu, M as Modal, k as Pagination, J as PnkxCollapse, K as PnkxColorPicker, r as Popconfirm, P as Popover, Q as QRCode, u as Rate, s as Result, R as Row, c as SearchFiltersForm, v as Segmented, m as Sidebar, S as Skeleton, h as Space, p as Spin, i as Splitter, w as Statistic, l as Steps, T as Table, b as Tabs, n as Tag, x as Timeline, a as Tooltip, y as Tour, z as Tree, W as Watermark, t as typeColorMap } from '../chunks/CategoryStatus-D8gu9DFK.js';
|
2
|
+
export { E as ErrorMessage, L as Label, T as Typography } from '../chunks/Switch-DQm0didM.js';
|
3
3
|
import 'react-router';
|