@cwncollab-org/mui-component-kit 0.6.0 → 0.7.0
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 +143 -13
- package/dist/form/DatePicker.d.ts +1 -0
- package/dist/form/DatePicker.d.ts.map +1 -1
- package/dist/form/DatePicker.js +45 -21
- package/dist/form/DatePicker.js.map +1 -1
- package/dist/form/TextField.d.ts.map +1 -1
- package/dist/form/TextField.js +26 -2
- package/dist/form/TextField.js.map +1 -1
- package/dist/form/TimePicker.d.ts +1 -0
- package/dist/form/TimePicker.d.ts.map +1 -1
- package/dist/form/TimePicker.js +45 -21
- package/dist/form/TimePicker.js.map +1 -1
- package/package.json +6 -10
package/README.md
CHANGED
|
@@ -264,8 +264,12 @@ export default function ExampleDialog2({
|
|
|
264
264
|
|
|
265
265
|
### Form Example with Zod Validation
|
|
266
266
|
|
|
267
|
+
**Important**: When using DatePicker or TimePicker components, you must wrap your application (or the specific form) with `LocalizationProvider` from `@mui/x-date-pickers`.
|
|
268
|
+
|
|
267
269
|
```tsx
|
|
268
270
|
import { Box, Button, Paper, Stack, Typography, Radio, FormControlLabel } from '@mui/material'
|
|
271
|
+
import { LocalizationProvider } from '@mui/x-date-pickers'
|
|
272
|
+
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
|
|
269
273
|
import { useAppForm } from '@cwncollab-org/component-kit'
|
|
270
274
|
import { useState } from 'react'
|
|
271
275
|
import { z } from 'zod'
|
|
@@ -325,19 +329,20 @@ export function FormExample() {
|
|
|
325
329
|
})
|
|
326
330
|
|
|
327
331
|
return (
|
|
328
|
-
<
|
|
329
|
-
<
|
|
330
|
-
<
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
e
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
332
|
+
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
|
333
|
+
<Paper sx={{ p: 2 }}>
|
|
334
|
+
<Box>
|
|
335
|
+
<Typography>Form Example with Zod Validation</Typography>
|
|
336
|
+
</Box>
|
|
337
|
+
<Box
|
|
338
|
+
component='form'
|
|
339
|
+
sx={{ py: 2 }}
|
|
340
|
+
onSubmit={e => {
|
|
341
|
+
e.preventDefault()
|
|
342
|
+
e.stopPropagation()
|
|
343
|
+
form.handleSubmit()
|
|
344
|
+
}}
|
|
345
|
+
>
|
|
341
346
|
<Stack spacing={2}>
|
|
342
347
|
<form.AppField
|
|
343
348
|
name='username'
|
|
@@ -436,6 +441,7 @@ export function FormExample() {
|
|
|
436
441
|
</Stack>
|
|
437
442
|
</Box>
|
|
438
443
|
</Paper>
|
|
444
|
+
</LocalizationProvider>
|
|
439
445
|
)
|
|
440
446
|
}
|
|
441
447
|
```
|
|
@@ -715,6 +721,130 @@ function MyForm() {
|
|
|
715
721
|
The RadioGroup component also accepts all standard MUI RadioGroup props except `name`, `value`, and `defaultValue` which are managed by the form field.
|
|
716
722
|
|
|
717
723
|
|
|
724
|
+
### DatePicker and TimePicker Components
|
|
725
|
+
|
|
726
|
+
The DatePicker and TimePicker components provide date and time selection functionality, built on top of MUI's DatePicker and TimePicker components from `@mui/x-date-pickers`, integrated with TanStack Form.
|
|
727
|
+
|
|
728
|
+
**Important Requirements:**
|
|
729
|
+
- **LocalizationProvider**: You must wrap your application (or form) with `LocalizationProvider` from `@mui/x-date-pickers`
|
|
730
|
+
- **Date Adapter**: You need to install and configure a date adapter (e.g., `@mui/x-date-pickers/AdapterDayjs`)
|
|
731
|
+
|
|
732
|
+
**Value Format Support:**
|
|
733
|
+
Both DatePicker and TimePicker support two value formats through the `valueFormat` prop:
|
|
734
|
+
- `'adapter'` (default): Uses the date adapter's native format (e.g., Dayjs objects)
|
|
735
|
+
- `'Date'`: Converts to/from native JavaScript Date objects
|
|
736
|
+
|
|
737
|
+
```tsx
|
|
738
|
+
import { useAppForm } from '@cwncollab-org/component-kit'
|
|
739
|
+
import { LocalizationProvider } from '@mui/x-date-pickers'
|
|
740
|
+
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
|
|
741
|
+
import { z } from 'zod'
|
|
742
|
+
import dayjs, { Dayjs } from 'dayjs'
|
|
743
|
+
|
|
744
|
+
// Define your form schema
|
|
745
|
+
const formSchema = z.object({
|
|
746
|
+
// For native Date objects
|
|
747
|
+
nativeDate: z.date(),
|
|
748
|
+
nativeTime: z.date(),
|
|
749
|
+
// For Dayjs objects (using adapter format)
|
|
750
|
+
dayjsDate: z.custom<Dayjs>(),
|
|
751
|
+
})
|
|
752
|
+
|
|
753
|
+
function MyForm() {
|
|
754
|
+
const form = useAppForm({
|
|
755
|
+
defaultValues: {
|
|
756
|
+
nativeDate: new Date(),
|
|
757
|
+
nativeTime: new Date(),
|
|
758
|
+
dayjsDate: dayjs(),
|
|
759
|
+
},
|
|
760
|
+
validators: {
|
|
761
|
+
onSubmit: formSchema,
|
|
762
|
+
},
|
|
763
|
+
onSubmit: ({ value }) => {
|
|
764
|
+
console.log('Form values:', value)
|
|
765
|
+
},
|
|
766
|
+
})
|
|
767
|
+
|
|
768
|
+
return (
|
|
769
|
+
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
|
770
|
+
<form.AppField
|
|
771
|
+
name='nativeDate'
|
|
772
|
+
children={field => (
|
|
773
|
+
<field.SubscribeDatePicker
|
|
774
|
+
label='Date (Native Date format)'
|
|
775
|
+
valueFormat='Date'
|
|
776
|
+
labelBehavior='shrink'
|
|
777
|
+
fullWidth
|
|
778
|
+
size='small'
|
|
779
|
+
/>
|
|
780
|
+
)}
|
|
781
|
+
/>
|
|
782
|
+
|
|
783
|
+
<form.AppField
|
|
784
|
+
name='nativeTime'
|
|
785
|
+
children={field => (
|
|
786
|
+
<field.SubscribeTimePicker
|
|
787
|
+
label='Time (Native Date format)'
|
|
788
|
+
valueFormat='Date'
|
|
789
|
+
labelBehavior='shrink'
|
|
790
|
+
fullWidth
|
|
791
|
+
size='small'
|
|
792
|
+
/>
|
|
793
|
+
)}
|
|
794
|
+
/>
|
|
795
|
+
|
|
796
|
+
<form.AppField
|
|
797
|
+
name='dayjsDate'
|
|
798
|
+
children={field => (
|
|
799
|
+
<field.SubscribeDatePicker
|
|
800
|
+
label='Date (Adapter format - Dayjs)'
|
|
801
|
+
valueFormat='adapter'
|
|
802
|
+
labelBehavior='shrink'
|
|
803
|
+
fullWidth
|
|
804
|
+
size='small'
|
|
805
|
+
/>
|
|
806
|
+
)}
|
|
807
|
+
/>
|
|
808
|
+
</LocalizationProvider>
|
|
809
|
+
)
|
|
810
|
+
}
|
|
811
|
+
```
|
|
812
|
+
|
|
813
|
+
#### DatePicker Props
|
|
814
|
+
|
|
815
|
+
| Prop | Type | Default | Description |
|
|
816
|
+
|------|------|---------|-------------|
|
|
817
|
+
| `valueFormat` | `'adapter' \| 'Date'` | `'adapter'` | Value format - adapter's native format or JavaScript Date |
|
|
818
|
+
| `labelBehavior` | `'auto' \| 'shrink' \| 'static'` | `'auto'` | How the label should behave |
|
|
819
|
+
| `size` | `'small' \| 'medium'` | `'medium'` | The size of the date picker field |
|
|
820
|
+
| `fullWidth` | `boolean` | `false` | Whether the date picker should take full width |
|
|
821
|
+
| `required` | `boolean` | `false` | Whether the date picker is required |
|
|
822
|
+
| `disabled` | `boolean` | `false` | Whether the date picker is disabled |
|
|
823
|
+
| `slotProps` | `object` | - | Props for underlying MUI components |
|
|
824
|
+
|
|
825
|
+
#### TimePicker Props
|
|
826
|
+
|
|
827
|
+
| Prop | Type | Default | Description |
|
|
828
|
+
|------|------|---------|-------------|
|
|
829
|
+
| `valueFormat` | `'adapter' \| 'Date'` | `'adapter'` | Value format - adapter's native format or JavaScript Date |
|
|
830
|
+
| `labelBehavior` | `'auto' \| 'shrink' \| 'static'` | `'auto'` | How the label should behave |
|
|
831
|
+
| `size` | `'small' \| 'medium'` | `'medium'` | The size of the time picker field |
|
|
832
|
+
| `fullWidth` | `boolean` | `false` | Whether the time picker should take full width |
|
|
833
|
+
| `required` | `boolean` | `false` | Whether the time picker is required |
|
|
834
|
+
| `disabled` | `boolean` | `false` | Whether the time picker is disabled |
|
|
835
|
+
| `slotProps` | `object` | - | Props for underlying MUI components |
|
|
836
|
+
|
|
837
|
+
Both DatePicker and TimePicker accept all standard MUI DatePicker/TimePicker props except `name`, `value`, and `defaultValue` which are managed by the form field.
|
|
838
|
+
|
|
839
|
+
**Label Behaviors:**
|
|
840
|
+
- `'auto'`: Default MUI behavior - label floats when focused or has value
|
|
841
|
+
- `'shrink'`: Label is always in the shrunk (floating) position
|
|
842
|
+
- `'static'`: Label appears as a static label above the input
|
|
843
|
+
|
|
844
|
+
**Subscribe Components:**
|
|
845
|
+
The `SubscribeDatePicker` and `SubscribeTimePicker` components have the same props but automatically disable the field when the form is submitting, providing better UX during form submission.
|
|
846
|
+
|
|
847
|
+
|
|
718
848
|
### MaskedTextField Component
|
|
719
849
|
|
|
720
850
|
The MaskedTextField component provides input masking functionality, built on top of MUI's TextField component and `react-imask` library, integrated with TanStack Form. This component is useful for formatting user input such as phone numbers, credit card numbers, social security numbers, and other structured data.
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { DatePickerProps as MuiDatePickerProps } from '@mui/x-date-pickers/DatePicker';
|
|
2
2
|
export type DatePickerProps = Omit<MuiDatePickerProps, 'name' | 'value' | 'defaultValue'> & {
|
|
3
|
+
valueFormat?: 'adapter' | 'Date';
|
|
3
4
|
required?: boolean;
|
|
4
5
|
labelBehavior?: 'auto' | 'shrink' | 'static';
|
|
5
6
|
size?: 'small' | 'medium';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/lib/form/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,eAAe,IAAI,kBAAkB,EACtC,MAAM,gCAAgC,CAAA;AAWvC,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,kBAAkB,EAClB,MAAM,GAAG,OAAO,GAAG,cAAc,CAClC,GAAG;IACF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAA;IAC5C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/lib/form/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,eAAe,IAAI,kBAAkB,EACtC,MAAM,gCAAgC,CAAA;AAWvC,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,kBAAkB,EAClB,MAAM,GAAG,OAAO,GAAG,cAAc,CAClC,GAAG;IACF,WAAW,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAA;IAC5C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAyGhD"}
|
package/dist/form/DatePicker.js
CHANGED
|
@@ -1,18 +1,47 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { DatePicker as MuiDatePicker, } from '@mui/x-date-pickers/DatePicker';
|
|
3
3
|
import { useFieldContext } from './formContext';
|
|
4
|
-
import
|
|
5
|
-
import { LocalizationProvider, } from '@mui/x-date-pickers';
|
|
6
|
-
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
|
4
|
+
import { usePickerAdapter, } from '@mui/x-date-pickers';
|
|
7
5
|
import { useMemo } from 'react';
|
|
8
6
|
export function DatePicker(props) {
|
|
9
7
|
const field = useFieldContext();
|
|
8
|
+
const adapter = usePickerAdapter();
|
|
10
9
|
const errorText = useMemo(() => {
|
|
11
10
|
if (field.state.meta.errors.length === 0)
|
|
12
11
|
return null;
|
|
13
12
|
return field.state.meta.errors.map(error => error.message).join(', ');
|
|
14
13
|
}, [field.state.meta.errors]);
|
|
15
|
-
const { required, labelBehavior = 'auto', size, fullWidth, onChange, slotProps, ...rest } = props;
|
|
14
|
+
const { valueFormat = 'adapter', required, labelBehavior = 'auto', size, fullWidth, onChange, slotProps, ...rest } = props;
|
|
15
|
+
// Convert field value to adapter format for MUI component
|
|
16
|
+
const adapterValue = useMemo(() => {
|
|
17
|
+
if (!field.state.value) {
|
|
18
|
+
return null;
|
|
19
|
+
}
|
|
20
|
+
if (field.state.value instanceof Date) {
|
|
21
|
+
// Convert native Date to adapter format
|
|
22
|
+
return adapter.date(field.state.value.toISOString());
|
|
23
|
+
}
|
|
24
|
+
// Already in adapter format
|
|
25
|
+
return field.state.value;
|
|
26
|
+
}, [field.state.value, adapter]);
|
|
27
|
+
const handleDateChange = (value, context) => {
|
|
28
|
+
if (!value) {
|
|
29
|
+
field.handleChange(null);
|
|
30
|
+
onChange?.(value, context);
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
if (valueFormat === 'Date') {
|
|
34
|
+
// Convert adapter value to native Date
|
|
35
|
+
const nativeDate = adapter.toJsDate(value);
|
|
36
|
+
field.handleChange(nativeDate);
|
|
37
|
+
onChange?.(value, context);
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
// Keep adapter format
|
|
41
|
+
field.handleChange(value);
|
|
42
|
+
onChange?.(value, context);
|
|
43
|
+
}
|
|
44
|
+
};
|
|
16
45
|
const labelShrink = labelBehavior === 'shrink' ? true : undefined;
|
|
17
46
|
let inputLabelProps = {
|
|
18
47
|
shrink: labelShrink,
|
|
@@ -40,22 +69,17 @@ export function DatePicker(props) {
|
|
|
40
69
|
},
|
|
41
70
|
};
|
|
42
71
|
}
|
|
43
|
-
return (_jsx(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
InputLabelProps: inputLabelProps,
|
|
56
|
-
InputProps: inputProps,
|
|
57
|
-
...slotProps?.textField,
|
|
58
|
-
},
|
|
59
|
-
} }) }));
|
|
72
|
+
return (_jsx(MuiDatePicker, { ...rest, name: field.name, value: adapterValue, onChange: handleDateChange, slotProps: {
|
|
73
|
+
textField: {
|
|
74
|
+
required: required,
|
|
75
|
+
error: Boolean(errorText),
|
|
76
|
+
helperText: errorText,
|
|
77
|
+
size: size,
|
|
78
|
+
fullWidth: fullWidth,
|
|
79
|
+
InputLabelProps: inputLabelProps,
|
|
80
|
+
InputProps: inputProps,
|
|
81
|
+
...slotProps?.textField,
|
|
82
|
+
},
|
|
83
|
+
} }));
|
|
60
84
|
}
|
|
61
85
|
//# sourceMappingURL=DatePicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../src/lib/form/DatePicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,IAAI,aAAa,GAE5B,MAAM,gCAAgC,CAAA;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../src/lib/form/DatePicker.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../src/lib/form/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,cAAc,IAAI,iBAAiB,EACpC,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAE,mBAAmB,EAAW,MAAM,OAAO,CAAA;AAEpD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACvE,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAA;IAC5C,GAAG,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,KAAK,CAAC,CAAA;IAClD,GAAG,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,KAAK,CAAC,CAAA;IAClD,SAAS,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC,CAAA;IAC9D,OAAO,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,SAAS,CAAC,CAAA;CAC3D,CAAA;
|
|
1
|
+
{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../src/lib/form/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,cAAc,IAAI,iBAAiB,EACpC,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAE,mBAAmB,EAAW,MAAM,OAAO,CAAA;AAEpD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACvE,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAA;IAC5C,GAAG,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,KAAK,CAAC,CAAA;IAClD,GAAG,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,KAAK,CAAC,CAAA;IAClD,SAAS,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC,CAAA;IAC9D,OAAO,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,SAAS,CAAC,CAAA;CAC3D,CAAA;AAeD,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAkG9C"}
|
package/dist/form/TextField.js
CHANGED
|
@@ -2,6 +2,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { TextField as MuiTextField, } from '@mui/material';
|
|
3
3
|
import { useFieldContext } from './formContext';
|
|
4
4
|
import { useMemo } from 'react';
|
|
5
|
+
const converters = {
|
|
6
|
+
number: {
|
|
7
|
+
fromString: (value) => {
|
|
8
|
+
const parsed = parseFloat(value);
|
|
9
|
+
return isNaN(parsed) ? null : parsed;
|
|
10
|
+
},
|
|
11
|
+
toString: (value) => (value == null ? '' : String(value)),
|
|
12
|
+
},
|
|
13
|
+
};
|
|
5
14
|
export function TextField(props) {
|
|
6
15
|
const { labelBehavior = 'auto', min, max, maxLength, pattern, label, slotProps, onChange, helperText = '', ...rest } = props;
|
|
7
16
|
const field = useFieldContext();
|
|
@@ -52,10 +61,13 @@ export function TextField(props) {
|
|
|
52
61
|
},
|
|
53
62
|
};
|
|
54
63
|
}
|
|
55
|
-
|
|
64
|
+
const type = props.type;
|
|
65
|
+
return (_jsx(MuiTextField, { name: field.name, label: label, value: convertToString(type, field.state.value) ?? '', onBlur: field.handleBlur, onChange: ev => {
|
|
56
66
|
onChange?.(ev);
|
|
57
67
|
if (!ev.defaultPrevented) {
|
|
58
|
-
field.handleChange(ev.target.value === ''
|
|
68
|
+
field.handleChange(ev.target.value === ''
|
|
69
|
+
? null
|
|
70
|
+
: convertFromString(type, ev.target.value));
|
|
59
71
|
}
|
|
60
72
|
}, slotProps: {
|
|
61
73
|
...slotProps,
|
|
@@ -63,4 +75,16 @@ export function TextField(props) {
|
|
|
63
75
|
input: inputProps,
|
|
64
76
|
}, error: error, helperText: error ? errorText : helperText, "data-isdirty": field.state.meta.isDirty || undefined, "data-ispristine": field.state.meta.isPristine || undefined, "data-istouched": field.state.meta.isTouched || undefined, "data-isdefaultvalue": field.state.meta.isDefaultValue || undefined, "data-isvalid": field.state.meta.isValid || undefined, ...rest }));
|
|
65
77
|
}
|
|
78
|
+
function convertToString(type, value) {
|
|
79
|
+
if (type && converters[type]) {
|
|
80
|
+
return converters[type].toString(value);
|
|
81
|
+
}
|
|
82
|
+
return value == null ? '' : String(value);
|
|
83
|
+
}
|
|
84
|
+
function convertFromString(type, value) {
|
|
85
|
+
if (type && converters[type]) {
|
|
86
|
+
return converters[type].fromString(value);
|
|
87
|
+
}
|
|
88
|
+
return value;
|
|
89
|
+
}
|
|
66
90
|
//# sourceMappingURL=TextField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/lib/form/TextField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,SAAS,IAAI,YAAY,GAE1B,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAuB,OAAO,EAAE,MAAM,OAAO,CAAA;AAUpD,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EACJ,aAAa,GAAG,MAAM,EACtB,GAAG,EACH,GAAG,EACH,SAAS,EACT,OAAO,EACP,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAU,GAAG,EAAE,EACf,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IACT,MAAM,KAAK,GAAG,eAAe,
|
|
1
|
+
{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/lib/form/TextField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { TimePickerProps as MuiTimePickerProps } from '@mui/x-date-pickers/TimePicker';
|
|
2
2
|
export type TimePickerProps = Omit<MuiTimePickerProps, 'name' | 'value' | 'defaultValue'> & {
|
|
3
|
+
valueFormat?: 'adapter' | 'Date';
|
|
3
4
|
required?: boolean;
|
|
4
5
|
labelBehavior?: 'auto' | 'shrink' | 'static';
|
|
5
6
|
size?: 'small' | 'medium';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../src/lib/form/TimePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;
|
|
1
|
+
{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../src/lib/form/TimePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAYtF,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,kBAAkB,EAClB,MAAM,GAAG,OAAO,GAAG,cAAc,CAClC,GAAG;IACF,WAAW,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAA;IAC5C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAyGhD"}
|
package/dist/form/TimePicker.js
CHANGED
|
@@ -1,18 +1,47 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { TimePicker as MuiTimePicker } from '@mui/x-date-pickers/TimePicker';
|
|
3
3
|
import { useFieldContext } from './formContext';
|
|
4
|
-
import dayjs from 'dayjs';
|
|
5
4
|
import { useMemo } from 'react';
|
|
6
|
-
import {
|
|
7
|
-
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
|
5
|
+
import { usePickerAdapter, } from '@mui/x-date-pickers';
|
|
8
6
|
export function TimePicker(props) {
|
|
9
7
|
const field = useFieldContext();
|
|
8
|
+
const adapter = usePickerAdapter();
|
|
10
9
|
const errorText = useMemo(() => {
|
|
11
10
|
if (field.state.meta.errors.length === 0)
|
|
12
11
|
return null;
|
|
13
12
|
return field.state.meta.errors.map(error => error.message).join(', ');
|
|
14
13
|
}, [field.state.meta.errors]);
|
|
15
|
-
const { required, labelBehavior = 'auto', size, fullWidth, onChange, slotProps, ...rest } = props;
|
|
14
|
+
const { valueFormat = 'adapter', required, labelBehavior = 'auto', size, fullWidth, onChange, slotProps, ...rest } = props;
|
|
15
|
+
// Convert field value to adapter format for MUI component
|
|
16
|
+
const adapterValue = useMemo(() => {
|
|
17
|
+
if (!field.state.value) {
|
|
18
|
+
return null;
|
|
19
|
+
}
|
|
20
|
+
if (field.state.value instanceof Date) {
|
|
21
|
+
// Convert native Date to adapter format
|
|
22
|
+
return adapter.date(field.state.value.toISOString());
|
|
23
|
+
}
|
|
24
|
+
// Already in adapter format
|
|
25
|
+
return field.state.value;
|
|
26
|
+
}, [field.state.value, adapter]);
|
|
27
|
+
const handleDateChange = (value, context) => {
|
|
28
|
+
if (!value) {
|
|
29
|
+
field.handleChange(null);
|
|
30
|
+
onChange?.(value, context);
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
if (valueFormat === 'Date') {
|
|
34
|
+
// Convert adapter value to native Date
|
|
35
|
+
const nativeDate = adapter.toJsDate(value);
|
|
36
|
+
field.handleChange(nativeDate);
|
|
37
|
+
onChange?.(value, context);
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
// Keep adapter format
|
|
41
|
+
field.handleChange(value);
|
|
42
|
+
onChange?.(value, context);
|
|
43
|
+
}
|
|
44
|
+
};
|
|
16
45
|
const labelShrink = labelBehavior === 'shrink' ? true : undefined;
|
|
17
46
|
let inputLabelProps = {
|
|
18
47
|
shrink: labelShrink,
|
|
@@ -40,22 +69,17 @@ export function TimePicker(props) {
|
|
|
40
69
|
},
|
|
41
70
|
};
|
|
42
71
|
}
|
|
43
|
-
return (_jsx(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
InputLabelProps: inputLabelProps,
|
|
56
|
-
InputProps: inputProps,
|
|
57
|
-
...slotProps?.textField,
|
|
58
|
-
},
|
|
59
|
-
} }) }));
|
|
72
|
+
return (_jsx(MuiTimePicker, { ...rest, name: field.name, value: adapterValue, onChange: handleDateChange, slotProps: {
|
|
73
|
+
textField: {
|
|
74
|
+
required: required,
|
|
75
|
+
error: Boolean(errorText),
|
|
76
|
+
helperText: errorText,
|
|
77
|
+
size: size,
|
|
78
|
+
fullWidth: fullWidth,
|
|
79
|
+
InputLabelProps: inputLabelProps,
|
|
80
|
+
InputProps: inputProps,
|
|
81
|
+
...slotProps?.textField,
|
|
82
|
+
},
|
|
83
|
+
} }));
|
|
60
84
|
}
|
|
61
85
|
//# sourceMappingURL=TimePicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../src/lib/form/TimePicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../src/lib/form/TimePicker.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cwncollab-org/mui-component-kit",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.7.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"module": "./dist/index.js",
|
|
@@ -29,22 +29,17 @@
|
|
|
29
29
|
"@emotion/styled": "^11.14.0",
|
|
30
30
|
"@mui/icons-material": "^7.0.2",
|
|
31
31
|
"@mui/material": "^7.0.2",
|
|
32
|
+
"@mui/x-date-pickers": "^8.0.0",
|
|
33
|
+
"dayjs": "^1.11.18",
|
|
32
34
|
"react": "^19.0.0",
|
|
33
35
|
"react-dom": "^19.0.0"
|
|
34
36
|
},
|
|
35
37
|
"dependencies": {
|
|
36
|
-
"@emotion/react": "^11.14.0",
|
|
37
|
-
"@emotion/styled": "^11.14.0",
|
|
38
|
-
"@mui/icons-material": "^7.0.2",
|
|
39
|
-
"@mui/material": "^7.0.2",
|
|
40
|
-
"@mui/x-date-pickers": "^8.0.0",
|
|
41
38
|
"@tanstack/react-form": "^1.19.2",
|
|
42
39
|
"@tanstack/react-router": "^1.116.0",
|
|
43
40
|
"@tanstack/react-table": "^8.21.3",
|
|
44
|
-
"dayjs": "^1.11.13",
|
|
45
41
|
"material-react-table": "^3.2.1",
|
|
46
|
-
"react-imask": "^7.6.1"
|
|
47
|
-
"zod": "^4.1.5"
|
|
42
|
+
"react-imask": "^7.6.1"
|
|
48
43
|
},
|
|
49
44
|
"devDependencies": {
|
|
50
45
|
"@eslint/js": "^9.22.0",
|
|
@@ -66,6 +61,7 @@
|
|
|
66
61
|
"ts-jest": "^29.3.2",
|
|
67
62
|
"typescript": "~5.7.2",
|
|
68
63
|
"typescript-eslint": "^8.26.1",
|
|
69
|
-
"vite": "^6.3.1"
|
|
64
|
+
"vite": "^6.3.1",
|
|
65
|
+
"zod": "^4.1.9"
|
|
70
66
|
}
|
|
71
67
|
}
|