form-input-fields 1.0.4 → 1.0.6
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 +563 -1
- package/dist/controls/FormDateField/FormDateField.d.ts.map +1 -1
- package/dist/controls/FormDateTextField/FormDateTextField.d.ts +45 -0
- package/dist/controls/FormDateTextField/FormDateTextField.d.ts.map +1 -0
- package/dist/controls/FormDateTextField/date.d.ts +13 -0
- package/dist/controls/FormDateTextField/date.d.ts.map +1 -0
- package/dist/controls/FormDropDownField/FormDropDownField.d.ts +56 -0
- package/dist/controls/FormDropDownField/FormDropDownField.d.ts.map +1 -0
- package/dist/controls/FormDropDownField/styles.d.ts +2 -0
- package/dist/controls/FormDropDownField/styles.d.ts.map +1 -0
- package/dist/controls/FormMaskField/FormMaskField.d.ts.map +1 -1
- package/dist/controls/FormTextField/FormTextField.d.ts +10 -0
- package/dist/controls/FormTextField/FormTextField.d.ts.map +1 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.es.js +7204 -7379
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +88 -120
- package/dist/index.js.map +1 -1
- package/dist/test/FormCheckboxField.spec.d.ts +1 -0
- package/dist/test/FormCheckboxField.spec.d.ts.map +1 -0
- package/dist/test/FormDateTextField.spec.d.ts +2 -0
- package/dist/test/FormDateTextField.spec.d.ts.map +1 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -2,10 +2,125 @@
|
|
|
2
2
|
|
|
3
3
|
A collection of Material-UI form field components with Formik integration.
|
|
4
4
|
|
|
5
|
-
More
|
|
5
|
+
More control in the progress of development.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
### Prerequisites
|
|
10
|
+
|
|
11
|
+
Before installing the form-fields package, make sure you have the following peer dependencies installed in your project:
|
|
12
|
+
|
|
13
|
+
- React 16.8.0 or later
|
|
14
|
+
- React DOM 16.8.0 or later
|
|
15
|
+
- Material-UI (MUI) 5.0.0 or later
|
|
16
|
+
- Formik 2.0.0 or later
|
|
17
|
+
- @mui/x-date-pickers 6.0.0 or later
|
|
18
|
+
- dayjs 1.11.0 or later
|
|
19
|
+
|
|
20
|
+
### Using npm
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install form-fields @mui/material @emotion/react @emotion/styled formik @mui/x-date-pickers dayjs
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### Using yarn
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
yarn add @your-org/form-fields @mui/material @emotion/react @emotion/styled formik @mui/x-date-pickers dayjs
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Using pnpm
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
pnpm add form-input-fields @mui/material @emotion/react @emotion/styled formik @mui/x-date-pickers dayjs
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Peer Dependencies
|
|
39
|
+
|
|
40
|
+
Make sure your project includes these peer dependencies:
|
|
41
|
+
|
|
42
|
+
```json
|
|
43
|
+
{
|
|
44
|
+
"devDependencies": {
|
|
45
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
46
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
47
|
+
"@mui/material": "^5.0.0",
|
|
48
|
+
"@emotion/react": "^11.0.0",
|
|
49
|
+
"@emotion/styled": "^11.0.0",
|
|
50
|
+
"formik": "^2.0.0",
|
|
51
|
+
"@mui/x-date-pickers": "^6.0.0",
|
|
52
|
+
"dayjs": "^1.11.0"
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### TypeScript
|
|
58
|
+
|
|
59
|
+
This package includes TypeScript type definitions. No additional type packages are needed.
|
|
60
|
+
|
|
61
|
+
### Browser Support
|
|
62
|
+
|
|
63
|
+
The form fields support all modern browsers including:
|
|
64
|
+
- Chrome (latest 2 versions)
|
|
65
|
+
- Firefox (latest 2 versions)
|
|
66
|
+
- Safari (latest 2 versions)
|
|
67
|
+
- Edge (latest 2 versions)
|
|
68
|
+
|
|
69
|
+
For Internet Explorer 11 support, you'll need to include polyfills. See [Browser Support](#browser-support) for more details.
|
|
70
|
+
|
|
71
|
+
### Next Steps
|
|
72
|
+
|
|
73
|
+
After installation, you can import and use the components in your application:
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
import { FormTextField, FormDateField, FormMaskField } from 'form-input-fields';
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Troubleshooting
|
|
80
|
+
|
|
81
|
+
If you encounter any issues during installation, try the following:
|
|
82
|
+
|
|
83
|
+
1. Clear your package manager's cache:
|
|
84
|
+
```bash
|
|
85
|
+
npm cache clean --force
|
|
86
|
+
# or
|
|
87
|
+
yarn cache clean
|
|
88
|
+
# or
|
|
89
|
+
pnpm store prune
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
2. Delete `node_modules` and `package-lock.json` (or `yarn.lock`/`pnpm-lock.yaml`)
|
|
93
|
+
|
|
94
|
+
3. Reinstall dependencies:
|
|
95
|
+
```bash
|
|
96
|
+
npm install
|
|
97
|
+
# or
|
|
98
|
+
yarn install
|
|
99
|
+
# or
|
|
100
|
+
pnpm install
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
If you're still experiencing issues, please reach me at vladimir.vorobiev@gmail.com with details about your environment and the error message you're seeing.
|
|
104
|
+
|
|
6
105
|
|
|
7
106
|
## Table of Contents
|
|
8
107
|
|
|
108
|
+
- [FormTextField](#formtextfield)
|
|
109
|
+
- [Features](#features)
|
|
110
|
+
- [Basic Usage](#basic-usage)
|
|
111
|
+
- [Props](#props)
|
|
112
|
+
- [Examples](#examples)
|
|
113
|
+
- [Basic Text Input](#basic-text-input)
|
|
114
|
+
- [Text Field with Formik](#text-field-with-formik)
|
|
115
|
+
- [Custom Validation](#custom-validation)
|
|
116
|
+
- [FormDropDownField](#formdropdownfield)
|
|
117
|
+
- [Features](#features-4)
|
|
118
|
+
- [Basic Usage](#basic-usage-4)
|
|
119
|
+
- [Props](#props-4)
|
|
120
|
+
- [Examples](#examples-4)
|
|
121
|
+
- [Basic Dropdown](#basic-dropdown)
|
|
122
|
+
- [Dropdown with Default Selection](#dropdown-with-default-selection)
|
|
123
|
+
- [Required Dropdown with Validation](#required-dropdown-with-validation)
|
|
9
124
|
- [FormDateField](#formdatefield)
|
|
10
125
|
- [Features](#features)
|
|
11
126
|
- [Available Date Formats](#available-date-formats)
|
|
@@ -41,6 +156,260 @@ More controls are coming soon.
|
|
|
41
156
|
- [Basic Checkbox](#basic-checkbox)
|
|
42
157
|
- [Checkbox with Formik](#checkbox-with-formik)
|
|
43
158
|
- [Custom Styled Checkbox](#custom-styled-checkbox)
|
|
159
|
+
- [FormDateTextField](#formdatetextfield)
|
|
160
|
+
- [Features](#features-3)
|
|
161
|
+
- [Available Date Formats](#available-date-formats-1)
|
|
162
|
+
- [Basic Usage](#basic-usage-3)
|
|
163
|
+
- [Props](#props-3)
|
|
164
|
+
- [Examples](#examples-3)
|
|
165
|
+
- [Basic Date Text Input](#basic-date-text-input)
|
|
166
|
+
- [Date Text Field with Formik](#date-text-field-with-formik)
|
|
167
|
+
- [Custom Date Format](#custom-date-format)
|
|
168
|
+
|
|
169
|
+
---
|
|
170
|
+
|
|
171
|
+
## FormTextField
|
|
172
|
+
|
|
173
|
+
A versatile text input field component that integrates Material-UI's TextField with Formik form handling.
|
|
174
|
+
|
|
175
|
+
### Features
|
|
176
|
+
|
|
177
|
+
- **Seamless Formik Integration**: Automatically handles form state, validation, and error messages
|
|
178
|
+
- **Material-UI Styling**: Consistent look and feel with Material Design
|
|
179
|
+
- **TypeScript Support**: Fully typed component with proper type definitions
|
|
180
|
+
- **Flexible Props**: Supports all standard TextField props from Material-UI
|
|
181
|
+
- **Error Handling**: Built-in error state management with Formik
|
|
182
|
+
- **Responsive Design**: Works well across different screen sizes
|
|
183
|
+
|
|
184
|
+
### Basic Usage
|
|
185
|
+
|
|
186
|
+
```tsx
|
|
187
|
+
import { Formik, Field } from 'formik';
|
|
188
|
+
import { FormTextField } from 'form-fields';
|
|
189
|
+
|
|
190
|
+
<Formik
|
|
191
|
+
initialValues={{ username: '' }}
|
|
192
|
+
onSubmit={(values) => console.log(values)}
|
|
193
|
+
>
|
|
194
|
+
<Field
|
|
195
|
+
component={FormTextField}
|
|
196
|
+
name="username"
|
|
197
|
+
label="Username"
|
|
198
|
+
placeholder="Enter your username"
|
|
199
|
+
/>
|
|
200
|
+
</Formik>
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
### Props
|
|
204
|
+
|
|
205
|
+
The FormTextField component accepts all props from `FormTextFieldProps`, `FieldProps` (Formik), and Material-UI's `TextFieldProps`.
|
|
206
|
+
|
|
207
|
+
#### FormTextFieldProps Interface
|
|
208
|
+
|
|
209
|
+
| Prop | Type | Default | Description |
|
|
210
|
+
|------------|------------|---------|-----------------------------------------------|
|
|
211
|
+
| `onChange` | `function` | - | Custom change handler that overrides Formik's |
|
|
212
|
+
| `onBlur` | `function` | - | Custom blur handler that overrides Formik's |
|
|
213
|
+
|
|
214
|
+
#### Common Props (from FieldProps & TextFieldProps)
|
|
215
|
+
|
|
216
|
+
| Prop | Type | Required | Description |
|
|
217
|
+
|--------------|------------------|----------|-----------------------------------------------|
|
|
218
|
+
| `name` | `string` | Yes | Field name in Formik values |
|
|
219
|
+
| `label` | `string` | No | Field label |
|
|
220
|
+
| `helperText` | `string` | No | Custom helper text |
|
|
221
|
+
| `error` | `boolean` | No | Error state (auto-managed by Formik) |
|
|
222
|
+
| `disabled` | `boolean` | No | Disabled state |
|
|
223
|
+
| `required` | `boolean` | No | Required field indicator |
|
|
224
|
+
| `type` | `string` | 'text' | Input type (text, email, password, etc.) |
|
|
225
|
+
| Other | `TextFieldProps` | No | All Material-UI TextField props are supported |
|
|
226
|
+
|
|
227
|
+
### Examples
|
|
228
|
+
|
|
229
|
+
#### Basic Text Input
|
|
230
|
+
|
|
231
|
+
```tsx
|
|
232
|
+
<Field
|
|
233
|
+
component={FormTextField}
|
|
234
|
+
name="username"
|
|
235
|
+
label="Username"
|
|
236
|
+
placeholder="Enter your username"
|
|
237
|
+
fullWidth
|
|
238
|
+
margin="normal"
|
|
239
|
+
/>
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
#### Text Field with Formik
|
|
243
|
+
|
|
244
|
+
```tsx
|
|
245
|
+
<Formik
|
|
246
|
+
initialValues={{ email: '' }}
|
|
247
|
+
validate={values => {
|
|
248
|
+
const errors = {};
|
|
249
|
+
if (!values.email) {
|
|
250
|
+
errors.email = 'Required';
|
|
251
|
+
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
|
|
252
|
+
errors.email = 'Invalid email address';
|
|
253
|
+
}
|
|
254
|
+
return errors;
|
|
255
|
+
}}
|
|
256
|
+
onSubmit={(values) => console.log(values)}
|
|
257
|
+
>
|
|
258
|
+
{({ errors, touched }) => (
|
|
259
|
+
<Field
|
|
260
|
+
component={FormTextField}
|
|
261
|
+
name="email"
|
|
262
|
+
label="Email"
|
|
263
|
+
type="email"
|
|
264
|
+
error={touched.email && Boolean(errors.email)}
|
|
265
|
+
helperText={touched.email && errors.email}
|
|
266
|
+
required
|
|
267
|
+
/>
|
|
268
|
+
)}
|
|
269
|
+
</Formik>
|
|
270
|
+
```
|
|
271
|
+
|
|
272
|
+
#### Custom Validation
|
|
273
|
+
|
|
274
|
+
```tsx
|
|
275
|
+
<Field
|
|
276
|
+
component={FormTextField}
|
|
277
|
+
name="password"
|
|
278
|
+
label="Password"
|
|
279
|
+
type="password"
|
|
280
|
+
inputProps={{
|
|
281
|
+
minLength: 8,
|
|
282
|
+
pattern: "(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
|
|
283
|
+
}}
|
|
284
|
+
helperText="Must contain at least 8 characters, including uppercase, lowercase, and numbers"
|
|
285
|
+
required
|
|
286
|
+
/>
|
|
287
|
+
```
|
|
288
|
+
|
|
289
|
+
---
|
|
290
|
+
|
|
291
|
+
## FormDropDownField
|
|
292
|
+
|
|
293
|
+
A customizable dropdown/select component that integrates Material-UI's Select with Formik form handling.
|
|
294
|
+
|
|
295
|
+
### Features
|
|
296
|
+
|
|
297
|
+
- **Seamless Formik Integration**: Automatically handles form state, validation, and error messages
|
|
298
|
+
- **Material-UI Styling**: Consistent look and feel with Material Design
|
|
299
|
+
- **TypeScript Support**: Fully typed component with proper type definitions
|
|
300
|
+
- **Flexible Data Binding**: Works with array of objects with `id` and `description` properties
|
|
301
|
+
- **Optional Default Selection**: Add a default "Select" option with customizable text
|
|
302
|
+
- **Form Validation**: Built-in error state management with Formik
|
|
303
|
+
- **Responsive Design**: Works well across different screen sizes
|
|
304
|
+
|
|
305
|
+
### Basic Usage
|
|
306
|
+
|
|
307
|
+
```tsx
|
|
308
|
+
import { Formik, Field } from 'formik';
|
|
309
|
+
import { FormDropDownField } from 'form-input-fields';
|
|
310
|
+
|
|
311
|
+
const items = [
|
|
312
|
+
{ id: '1', description: 'Option 1' },
|
|
313
|
+
{ id: '2', description: 'Option 2' },
|
|
314
|
+
{ id: '3', description: 'Option 3' },
|
|
315
|
+
];
|
|
316
|
+
|
|
317
|
+
<Formik
|
|
318
|
+
initialValues={{ category: '' }}
|
|
319
|
+
onSubmit={(values) => console.log(values)}
|
|
320
|
+
>
|
|
321
|
+
<Field
|
|
322
|
+
component={FormDropDownField}
|
|
323
|
+
name="category"
|
|
324
|
+
label="Category"
|
|
325
|
+
items={items}
|
|
326
|
+
addInputSelect={true}
|
|
327
|
+
/>
|
|
328
|
+
</Formik>
|
|
329
|
+
```
|
|
330
|
+
|
|
331
|
+
### Props
|
|
332
|
+
|
|
333
|
+
The FormDropDownField component accepts all props from `FormDropDownFieldProps`, `FieldProps` (Formik), and Material-UI's `TextFieldProps` (with some exceptions).
|
|
334
|
+
|
|
335
|
+
#### FormDropDownFieldProps Interface
|
|
336
|
+
|
|
337
|
+
| Prop | Type | Default | Description |
|
|
338
|
+
|------|------|---------|-------------|
|
|
339
|
+
| `items` | `Array<{ id: string | number; description: string }>` | `[]` | Array of items to display in the dropdown |
|
|
340
|
+
| `addInputSelect` | `boolean` | `false` | Whether to show a default "Select" option as the first item |
|
|
341
|
+
| `selectText` | `string` | `'Select'` | Text to display for the default "Select" option |
|
|
342
|
+
| `required` | `boolean` | `false` | Whether the field is required |
|
|
343
|
+
| `disabled` | `boolean` | `false` | Whether the field is disabled |
|
|
344
|
+
| `className` | `string` | - | Custom class name for the root element |
|
|
345
|
+
| `helperText` | `string` | - | Helper text to display below the field |
|
|
346
|
+
| `error` | `boolean` | - | Error state of the field (overrides Formik error state) |
|
|
347
|
+
| `onChange` | `(value: any) => void` | - | Custom change handler |
|
|
348
|
+
| `onBlur` | `(event: React.FocusEvent<HTMLInputElement>) => void` | - | Custom blur handler |
|
|
349
|
+
|
|
350
|
+
### Examples
|
|
351
|
+
|
|
352
|
+
#### Basic Dropdown
|
|
353
|
+
|
|
354
|
+
```tsx
|
|
355
|
+
const items = [
|
|
356
|
+
{ id: 'us', description: 'United States' },
|
|
357
|
+
{ id: 'ca', description: 'Canada' },
|
|
358
|
+
{ id: 'uk', description: 'United Kingdom' },
|
|
359
|
+
];
|
|
360
|
+
|
|
361
|
+
<Field
|
|
362
|
+
component={FormDropDownField}
|
|
363
|
+
name="country"
|
|
364
|
+
label="Country"
|
|
365
|
+
items={items}
|
|
366
|
+
fullWidth
|
|
367
|
+
/>
|
|
368
|
+
```
|
|
369
|
+
|
|
370
|
+
#### Dropdown with Default Selection
|
|
371
|
+
|
|
372
|
+
```tsx
|
|
373
|
+
<Field
|
|
374
|
+
component={FormDropDownField}
|
|
375
|
+
name="category"
|
|
376
|
+
label="Category"
|
|
377
|
+
items={categories}
|
|
378
|
+
addInputSelect={true}
|
|
379
|
+
selectText="Select a category"
|
|
380
|
+
helperText="Please select a category from the list"
|
|
381
|
+
/>
|
|
382
|
+
```
|
|
383
|
+
|
|
384
|
+
#### Required Dropdown with Validation
|
|
385
|
+
|
|
386
|
+
```tsx
|
|
387
|
+
<Formik
|
|
388
|
+
initialValues={{ department: '' }}
|
|
389
|
+
validationSchema={Yup.object({
|
|
390
|
+
department: Yup.string().required('Department is required'),
|
|
391
|
+
})}
|
|
392
|
+
onSubmit={(values) => console.log(values)}
|
|
393
|
+
>
|
|
394
|
+
{({ errors, touched }) => (
|
|
395
|
+
<Form>
|
|
396
|
+
<Field
|
|
397
|
+
component={FormDropDownField}
|
|
398
|
+
name="department"
|
|
399
|
+
label="Department"
|
|
400
|
+
items={departments}
|
|
401
|
+
addInputSelect={true}
|
|
402
|
+
required
|
|
403
|
+
error={touched.department && Boolean(errors.department)}
|
|
404
|
+
helperText={touched.department && errors.department}
|
|
405
|
+
/>
|
|
406
|
+
<Button type="submit" variant="contained" color="primary">
|
|
407
|
+
Submit
|
|
408
|
+
</Button>
|
|
409
|
+
</Form>
|
|
410
|
+
)}
|
|
411
|
+
</Formik>
|
|
412
|
+
```
|
|
44
413
|
|
|
45
414
|
---
|
|
46
415
|
|
|
@@ -440,6 +809,199 @@ function CustomCheckbox() {
|
|
|
440
809
|
}
|
|
441
810
|
```
|
|
442
811
|
|
|
812
|
+
## FormDateTextField
|
|
813
|
+
|
|
814
|
+
A versatile date input field component that provides a text-based date picker with Formik integration and Material-UI styling.
|
|
815
|
+
|
|
816
|
+
### Features
|
|
817
|
+
|
|
818
|
+
- **Formik Integration**: Seamlessly works with Formik for form state management
|
|
819
|
+
- **Material-UI Styling**: Consistent look and feel with Material Design
|
|
820
|
+
- **Flexible Date Formatting**: Supports custom date formats using day.js
|
|
821
|
+
- **TypeScript Support**: Fully typed component with proper type definitions
|
|
822
|
+
- **Responsive Design**: Works well across different screen sizes
|
|
823
|
+
- **Accessibility**: Built with accessibility in mind
|
|
824
|
+
|
|
825
|
+
### Available Date Formats
|
|
826
|
+
|
|
827
|
+
The component uses predefined date format constants from `date.ts`:
|
|
828
|
+
|
|
829
|
+
#### FORM_DATE_FORMAT
|
|
830
|
+
|
|
831
|
+
```typescript
|
|
832
|
+
export const FORM_DATE_FORMAT = {
|
|
833
|
+
short: "YYYY-MM-DD",
|
|
834
|
+
long: "MM/DD/YYYY hh:mm A",
|
|
835
|
+
custom: "DD MMMM YYYY hh:mm A"
|
|
836
|
+
};
|
|
837
|
+
```
|
|
838
|
+
|
|
839
|
+
#### DATE_PICKER_DATE_FORMAT
|
|
840
|
+
|
|
841
|
+
```typescript
|
|
842
|
+
export const DATE_PICKER_DATE_FORMAT = {
|
|
843
|
+
short: "DD/MM/YYYY"
|
|
844
|
+
};
|
|
845
|
+
```
|
|
846
|
+
|
|
847
|
+
#### DATE_PICKER_MONTH_YEAR_FORMAT
|
|
848
|
+
|
|
849
|
+
```typescript
|
|
850
|
+
export const DATE_PICKER_MONTH_YEAR_FORMAT = {
|
|
851
|
+
short: "MM/YYYY",
|
|
852
|
+
long: "MMMM YYYY"
|
|
853
|
+
};
|
|
854
|
+
```
|
|
855
|
+
|
|
856
|
+
### Basic Usage
|
|
857
|
+
|
|
858
|
+
```tsx
|
|
859
|
+
import { Formik, Field } from 'formik';
|
|
860
|
+
import { FormDateTextField } from 'form-fields';
|
|
861
|
+
|
|
862
|
+
<Formik
|
|
863
|
+
initialValues={{ eventDate: '' }}
|
|
864
|
+
onSubmit={(values) => console.log(values)}
|
|
865
|
+
>
|
|
866
|
+
<Field
|
|
867
|
+
component={FormDateTextField}
|
|
868
|
+
name="eventDate"
|
|
869
|
+
label="Event Date"
|
|
870
|
+
format="MM/DD/YYYY"
|
|
871
|
+
/>
|
|
872
|
+
</Formik>
|
|
873
|
+
```
|
|
874
|
+
|
|
875
|
+
### Props
|
|
876
|
+
|
|
877
|
+
The FormDateTextField component accepts all props from `FormDateTextFieldProps`, `FieldProps` (Formik), and Material-UI's `TextFieldProps` (with some exclusions).
|
|
878
|
+
|
|
879
|
+
#### FormDateTextFieldProps Interface
|
|
880
|
+
|
|
881
|
+
| Prop | Type | Default | Description |
|
|
882
|
+
|------|------|---------|-------------|
|
|
883
|
+
| `format` | `string` | `FORM_DATE_FORMAT.long` | Date format string using day.js tokens |
|
|
884
|
+
| `required` | `boolean` | `false` | Whether the field is required |
|
|
885
|
+
| `disabled` | `boolean` | `false` | Whether the field is disabled |
|
|
886
|
+
| `className` | `string` | - | Custom class name for the root element |
|
|
887
|
+
| `helperText` | `string` | - | Helper text to display below the field |
|
|
888
|
+
| `error` | `boolean` | - | Error state of the field |
|
|
889
|
+
| `onChange` | `(value: Dayjs \| null) => void` | - | Custom change handler |
|
|
890
|
+
| `onBlur` | `(event: React.FocusEvent<HTMLInputElement>) => void` | - | Custom blur handler |
|
|
891
|
+
|
|
892
|
+
#### Common Props (from FieldProps & TextFieldProps)
|
|
893
|
+
|
|
894
|
+
| Prop | Type | Required | Description |
|
|
895
|
+
|------|------|----------|-------------|
|
|
896
|
+
| `name` | `string` | Yes | Field name in Formik values |
|
|
897
|
+
| `label` | `string` | No | Label for the input field |
|
|
898
|
+
| `placeholder` | `string` | No | Placeholder text |
|
|
899
|
+
| `fullWidth` | `boolean` | No | If true, the input will take up the full width of its container |
|
|
900
|
+
| `margin` | `'none' \| 'dense' \| 'normal'` | No | If 'dense' or 'normal', will adjust vertical spacing |
|
|
901
|
+
| `size` | `'small' \| 'medium'` | No | The size of the text field |
|
|
902
|
+
|
|
903
|
+
### Examples
|
|
904
|
+
|
|
905
|
+
#### Basic Date Text Input
|
|
906
|
+
|
|
907
|
+
```tsx
|
|
908
|
+
<FormDateTextField
|
|
909
|
+
name="birthDate"
|
|
910
|
+
label="Birth Date"
|
|
911
|
+
format="YYYY-MM-DD"
|
|
912
|
+
helperText="Enter your date of birth"
|
|
913
|
+
required
|
|
914
|
+
/>
|
|
915
|
+
```
|
|
916
|
+
|
|
917
|
+
#### Date Text Field with Formik
|
|
918
|
+
|
|
919
|
+
```tsx
|
|
920
|
+
import { Formik, Form, Field } from 'formik';
|
|
921
|
+
import { FormDateTextField, FormTextField } from 'form-fields';
|
|
922
|
+
import { Button } from '@mui/material';
|
|
923
|
+
|
|
924
|
+
const EventForm = () => (
|
|
925
|
+
<Formik
|
|
926
|
+
initialValues={{
|
|
927
|
+
eventName: '',
|
|
928
|
+
eventDate: '',
|
|
929
|
+
}}
|
|
930
|
+
onSubmit={(values) => {
|
|
931
|
+
console.log('Form submitted:', values);
|
|
932
|
+
}}
|
|
933
|
+
>
|
|
934
|
+
{({ isSubmitting }) => (
|
|
935
|
+
<Form>
|
|
936
|
+
<Field
|
|
937
|
+
name="eventName"
|
|
938
|
+
label="Event Name"
|
|
939
|
+
component={FormTextField}
|
|
940
|
+
fullWidth
|
|
941
|
+
margin="normal"
|
|
942
|
+
/>
|
|
943
|
+
|
|
944
|
+
<Field
|
|
945
|
+
component={FormDateTextField}
|
|
946
|
+
name="eventDate"
|
|
947
|
+
label="Event Date"
|
|
948
|
+
format="MM/DD/YYYY"
|
|
949
|
+
required
|
|
950
|
+
helperText="Select the event date"
|
|
951
|
+
margin="normal"
|
|
952
|
+
/>
|
|
953
|
+
|
|
954
|
+
<Button
|
|
955
|
+
type="submit"
|
|
956
|
+
variant="contained"
|
|
957
|
+
color="primary"
|
|
958
|
+
disabled={isSubmitting}
|
|
959
|
+
>
|
|
960
|
+
Submit
|
|
961
|
+
</Button>
|
|
962
|
+
</Form>
|
|
963
|
+
)}
|
|
964
|
+
</Formik>
|
|
965
|
+
);
|
|
966
|
+
```
|
|
967
|
+
|
|
968
|
+
#### Custom Date Format
|
|
969
|
+
|
|
970
|
+
```tsx
|
|
971
|
+
<FormDateTextField
|
|
972
|
+
name="appointmentTime"
|
|
973
|
+
label="Appointment Time"
|
|
974
|
+
format="dddd, MMMM D, YYYY h:mm A"
|
|
975
|
+
helperText="Example: Monday, January 1, 2023 2:30 PM"
|
|
976
|
+
required
|
|
977
|
+
/>
|
|
978
|
+
```
|
|
979
|
+
|
|
980
|
+
#### Disabled State
|
|
981
|
+
|
|
982
|
+
```tsx
|
|
983
|
+
<FormDateTextField
|
|
984
|
+
name="purchaseDate"
|
|
985
|
+
label="Purchase Date"
|
|
986
|
+
value="2023-05-15"
|
|
987
|
+
disabled
|
|
988
|
+
helperText="This field cannot be modified"
|
|
989
|
+
/>
|
|
990
|
+
```
|
|
991
|
+
|
|
992
|
+
#### With Error State
|
|
993
|
+
|
|
994
|
+
```tsx
|
|
995
|
+
<FormDateTextField
|
|
996
|
+
name="expiryDate"
|
|
997
|
+
label="Expiry Date"
|
|
998
|
+
error={!!errors.expiryDate && touched.expiryDate}
|
|
999
|
+
helperText={touched.expiryDate && errors.expiryDate}
|
|
1000
|
+
format="MM/DD/YYYY"
|
|
1001
|
+
required
|
|
1002
|
+
/>
|
|
1003
|
+
```
|
|
1004
|
+
|
|
443
1005
|
## FormMaskField
|
|
444
1006
|
|
|
445
1007
|
A flexible form field component with advanced text masking capabilities.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormDateField.d.ts","sourceRoot":"","sources":["../../../src/controls/FormDateField/FormDateField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,cAAc,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAC3C,OAAc,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAMrC,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAEhB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAEhB,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,2BAA2B;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,sCAAsC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,GAAG,IAAI,EACnB,OAAO,EAAE;QACP,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;QAC/B,cAAc,EAAE,MAAM,CAAC;KACxB,KACE,IAAI,CAAC;IAEV,2DAA2D;IAC3D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,MAAM,2BAA2B,GAAG,UAAU,
|
|
1
|
+
{"version":3,"file":"FormDateField.d.ts","sourceRoot":"","sources":["../../../src/controls/FormDateField/FormDateField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,cAAc,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAC3C,OAAc,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAMrC,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAEhB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAEhB,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,2BAA2B;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,sCAAsC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,GAAG,IAAI,EACnB,OAAO,EAAE;QACP,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;QAC/B,cAAc,EAAE,MAAM,CAAC;KACxB,KACE,IAAI,CAAC;IAEV,2DAA2D;IAC3D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,MAAM,2BAA2B,GAAG,UAAU,GAAG,cAAc,GAAG,kBAAkB,CAAC;AAE3F,eAAO,MAAM,aAAa,GAAI,OAAO,2BAA2B,4CAsG/D,CAAC"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { TextFieldProps } from '@mui/material';
|
|
2
|
+
import { FieldProps } from 'formik';
|
|
3
|
+
import { Dayjs } from 'dayjs';
|
|
4
|
+
export interface FormDateTextFieldProps {
|
|
5
|
+
/**
|
|
6
|
+
* Date format string for display
|
|
7
|
+
* Uses dayjs format tokens (e.g., 'YYYY-MM-DD', 'DD/MM/YYYY')
|
|
8
|
+
* Default: FORM_DATE_FORMAT.long
|
|
9
|
+
*/
|
|
10
|
+
format?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Whether the field is required
|
|
13
|
+
* @default false
|
|
14
|
+
*/
|
|
15
|
+
required?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Whether the field is disabled
|
|
18
|
+
* @default false
|
|
19
|
+
*/
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Custom class name for the root element
|
|
23
|
+
*/
|
|
24
|
+
className?: string;
|
|
25
|
+
/**
|
|
26
|
+
* Helper text to display below the field
|
|
27
|
+
*/
|
|
28
|
+
helperText?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Error state of the field
|
|
31
|
+
*/
|
|
32
|
+
error?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Custom onChange handler
|
|
35
|
+
*/
|
|
36
|
+
onChange?: (value: Dayjs | null) => void;
|
|
37
|
+
/**
|
|
38
|
+
* Custom onBlur handler
|
|
39
|
+
*/
|
|
40
|
+
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
41
|
+
}
|
|
42
|
+
type FormDateTextFieldComponentProps = FormDateTextFieldProps & FieldProps & Omit<TextFieldProps, 'value' | 'onChange' | 'onBlur' | 'name' | 'defaultValue' | 'onError' | 'onFocus' | 'InputProps' | 'slots' | 'slotProps'>;
|
|
43
|
+
export declare const FormDateTextField: ({ field, form, format, disabled, required, className, helperText, error, onChange, onBlur, ...props }: FormDateTextFieldComponentProps) => import("react/jsx-runtime").JSX.Element;
|
|
44
|
+
export {};
|
|
45
|
+
//# sourceMappingURL=FormDateTextField.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormDateTextField.d.ts","sourceRoot":"","sources":["../../../src/controls/FormDateTextField/FormDateTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,cAAc,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAC3C,OAAc,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAMrC,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC9D;AAED,KAAK,+BAA+B,GAAG,sBAAsB,GAC3D,UAAU,GACV,IAAI,CACF,cAAc,EACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,MAAM,GACN,cAAc,GACd,SAAS,GACT,SAAS,GACT,YAAY,GACZ,OAAO,GACP,WAAW,CACd,CAAC;AAEJ,eAAO,MAAM,iBAAiB,GAAI,uGAY/B,+BAA+B,4CA0CjC,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export declare const DATE_PICKER_DATE_FORMAT: {
|
|
2
|
+
short: string;
|
|
3
|
+
};
|
|
4
|
+
export declare const FORM_DATE_FORMAT: {
|
|
5
|
+
short: string;
|
|
6
|
+
long: string;
|
|
7
|
+
custom: string;
|
|
8
|
+
};
|
|
9
|
+
export declare const DATE_PICKER_MONTH_YEAR_FORMAT: {
|
|
10
|
+
short: string;
|
|
11
|
+
long: string;
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=date.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../../src/controls/FormDateTextField/date.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB;;CAEjC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAC;AAEF,eAAO,MAAM,6BAA6B;;;CAGzC,CAAC"}
|