@dartcom/ui-kit 3.3.0 → 3.3.1
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/cjs/components/form/form.js +15 -14
- package/dist/cjs/components/form/form.js.map +1 -1
- package/dist/cjs/node_modules/react-hook-form/dist/index.esm.js +35 -0
- package/dist/cjs/node_modules/react-hook-form/dist/index.esm.js.map +1 -1
- package/dist/esm/components/form/form.js +1 -1
- package/dist/esm/components/form/form.js.map +1 -1
- package/dist/esm/node_modules/react-hook-form/dist/index.esm.js +1 -1
- package/dist/esm/node_modules/react-hook-form/dist/index.esm.js.map +1 -1
- package/dist/esm/types/components/form/form.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var index_esm = require('../../node_modules/react-hook-form/dist/index.esm.js');
|
|
6
7
|
var Box = require('../../node_modules/@mui/material/esm/Box/Box.js');
|
|
7
8
|
|
|
8
9
|
/**
|
|
@@ -18,20 +19,20 @@ var Box = require('../../node_modules/@mui/material/esm/Box/Box.js');
|
|
|
18
19
|
*/
|
|
19
20
|
function CustomForm({ form, sx = {}, fields, buttons, observers, onSubmit, }) {
|
|
20
21
|
const { handleSubmit } = form;
|
|
21
|
-
return (jsxRuntime.jsxs(Box.default, { component: "form", sx: {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
22
|
+
return (jsxRuntime.jsx(index_esm.FormProvider, { ...form, children: jsxRuntime.jsxs(Box.default, { component: "form", sx: {
|
|
23
|
+
display: 'grid',
|
|
24
|
+
gap: '15px',
|
|
25
|
+
...sx,
|
|
26
|
+
}, onSubmit: handleSubmit(onSubmit), children: [jsxRuntime.jsx(Box.default, { sx: {
|
|
27
|
+
display: 'grid',
|
|
28
|
+
gap: '15px',
|
|
29
|
+
...fields.sx,
|
|
30
|
+
}, children: fields.content }), buttons?.content ? (jsxRuntime.jsx(Box.default, { sx: {
|
|
31
|
+
display: 'flex',
|
|
32
|
+
alignItems: 'center',
|
|
33
|
+
gap: '15px',
|
|
34
|
+
...buttons.sx,
|
|
35
|
+
}, children: buttons.content })) : null, observers?.content] }) }));
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
exports.default = CustomForm;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form.js","sources":["../../../../src/components/form/form.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { Box, SxProps } from '@mui/material';\r\nimport {
|
|
1
|
+
{"version":3,"file":"form.js","sources":["../../../../src/components/form/form.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { Box, SxProps } from '@mui/material';\r\nimport {\r\n FieldValues,\r\n FormProvider,\r\n SubmitHandler,\r\n UseFormReturn,\r\n} from 'react-hook-form';\r\n\r\ninterface CustomFormProp<T extends FieldValues> {\r\n form: UseFormReturn<T>;\r\n\r\n onSubmit: SubmitHandler<T>;\r\n\r\n sx?: SxProps;\r\n\r\n fields: {\r\n content: React.ReactNode;\r\n sx?: SxProps;\r\n };\r\n\r\n buttons?: {\r\n content?: React.ReactNode;\r\n sx?: SxProps;\r\n };\r\n\r\n observers?: {\r\n content?: React.ReactNode;\r\n };\r\n}\r\n\r\n/**\r\n * Используем этот компонент как основную обертку для формы\r\n * Все поля должны хранится при инициализации формы и быть доступны через контекст формы\r\n * @template T - Интрефейс данных формы.\r\n * @param {React.ReactNode} children - Все компоненты, которым нужен контекст фор.\r\n * @param {UseFormReturn<T>} form - Форма useForm, которая содержит все поля.\r\n * @param {SxProps} [sx={}] - Опциональные стили самой формы.\r\n * @param {SubmitHandler<T>} onSubmit - Функция обработки отправки формы.\r\n *\r\n * @returns {JSX.Element} The rendered form component with form context.\r\n */\r\nfunction CustomForm<T extends FieldValues>({\r\n form,\r\n sx = {},\r\n fields,\r\n buttons,\r\n observers,\r\n onSubmit,\r\n}: CustomFormProp<T>) {\r\n const { handleSubmit } = form;\r\n\r\n return (\r\n <FormProvider {...form}>\r\n <Box\r\n component=\"form\"\r\n sx={{\r\n display: 'grid',\r\n\r\n gap: '15px',\r\n\r\n ...sx,\r\n }}\r\n onSubmit={handleSubmit(onSubmit)}>\r\n <Box\r\n sx={{\r\n display: 'grid',\r\n\r\n gap: '15px',\r\n\r\n ...fields.sx,\r\n }}>\r\n {fields.content}\r\n </Box>\r\n\r\n {buttons?.content ? (\r\n <Box\r\n sx={{\r\n display: 'flex',\r\n\r\n alignItems: 'center',\r\n\r\n gap: '15px',\r\n\r\n ...buttons.sx,\r\n }}>\r\n {buttons.content}\r\n </Box>\r\n ) : null}\r\n {observers?.content}\r\n </Box>\r\n </FormProvider>\r\n );\r\n}\r\n\r\nexport default CustomForm;\r\n"],"names":["_jsx","FormProvider","_jsxs","Box"],"mappings":";;;;;;;;AA+BA;;;;;;;;;;AAUG;AACH,SAAS,UAAU,CAAwB,EACzC,IAAI,EACJ,EAAE,GAAG,EAAE,EACP,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,GACU,EAAA;AAClB,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI;AAE7B,IAAA,QACEA,cAAA,CAACC,sBAAY,EAAA,EAAA,GAAK,IAAI,EAAA,QAAA,EACpBC,eAAA,CAACC,WAAG,EAAA,EACF,SAAS,EAAC,MAAM,EAChB,EAAE,EAAE;AACF,gBAAA,OAAO,EAAE,MAAM;AAEf,gBAAA,GAAG,EAAE,MAAM;AAEX,gBAAA,GAAG,EAAE;aACN,EACD,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,EAAA,QAAA,EAAA,CAChCH,cAAA,CAACG,WAAG,EAAA,EACF,EAAE,EAAE;AACF,wBAAA,OAAO,EAAE,MAAM;AAEf,wBAAA,GAAG,EAAE,MAAM;wBAEX,GAAG,MAAM,CAAC,EAAE;AACb,qBAAA,EAAA,QAAA,EACA,MAAM,CAAC,OAAO,EAAA,CACX,EAEL,OAAO,EAAE,OAAO,IACfH,cAAA,CAACG,WAAG,EAAA,EACF,EAAE,EAAE;AACF,wBAAA,OAAO,EAAE,MAAM;AAEf,wBAAA,UAAU,EAAE,QAAQ;AAEpB,wBAAA,GAAG,EAAE,MAAM;wBAEX,GAAG,OAAO,CAAC,EAAE;AACd,qBAAA,EAAA,QAAA,EACA,OAAO,CAAC,OAAO,EAAA,CACZ,IACJ,IAAI,EACP,SAAS,EAAE,OAAO,CAAA,EAAA,CACf,EAAA,CACO;AAEnB;;;;"}
|
|
@@ -148,6 +148,40 @@ HookFormContext.displayName = 'HookFormContext';
|
|
|
148
148
|
* ```
|
|
149
149
|
*/
|
|
150
150
|
const useFormContext = () => React.useContext(HookFormContext);
|
|
151
|
+
/**
|
|
152
|
+
* A provider component that propagates the `useForm` methods to all children components via [React Context](https://reactjs.org/docs/context.html) API. To be used with {@link useFormContext}.
|
|
153
|
+
*
|
|
154
|
+
* @remarks
|
|
155
|
+
* [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
|
|
156
|
+
*
|
|
157
|
+
* @param props - all useForm methods
|
|
158
|
+
*
|
|
159
|
+
* @example
|
|
160
|
+
* ```tsx
|
|
161
|
+
* function App() {
|
|
162
|
+
* const methods = useForm();
|
|
163
|
+
* const onSubmit = data => console.log(data);
|
|
164
|
+
*
|
|
165
|
+
* return (
|
|
166
|
+
* <FormProvider {...methods} >
|
|
167
|
+
* <form onSubmit={methods.handleSubmit(onSubmit)}>
|
|
168
|
+
* <NestedInput />
|
|
169
|
+
* <input type="submit" />
|
|
170
|
+
* </form>
|
|
171
|
+
* </FormProvider>
|
|
172
|
+
* );
|
|
173
|
+
* }
|
|
174
|
+
*
|
|
175
|
+
* function NestedInput() {
|
|
176
|
+
* const { register } = useFormContext(); // retrieve all hook methods
|
|
177
|
+
* return <input {...register("test")} />;
|
|
178
|
+
* }
|
|
179
|
+
* ```
|
|
180
|
+
*/
|
|
181
|
+
const FormProvider = (props) => {
|
|
182
|
+
const { children, ...data } = props;
|
|
183
|
+
return (React.createElement(HookFormContext.Provider, { value: data }, children));
|
|
184
|
+
};
|
|
151
185
|
|
|
152
186
|
var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
|
|
153
187
|
const result = {
|
|
@@ -532,6 +566,7 @@ function useController(props) {
|
|
|
532
566
|
const Controller = (props) => props.render(useController(props));
|
|
533
567
|
|
|
534
568
|
exports.Controller = Controller;
|
|
569
|
+
exports.FormProvider = FormProvider;
|
|
535
570
|
exports.get = get;
|
|
536
571
|
exports.set = set;
|
|
537
572
|
exports.useController = useController;
|