@utilitywarehouse/hearth-react-native 0.16.1 → 0.16.2
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/.turbo/turbo-build.log +1 -1
- package/.turbo/turbo-lint.log +11 -11
- package/CHANGELOG.md +24 -0
- package/build/components/DateInput/DateInput.d.ts +1 -1
- package/build/components/DateInput/DateInput.js +2 -3
- package/build/components/DateInput/DateInput.props.d.ts +22 -1
- package/build/components/DateInput/DateInputSegment.d.ts +2 -16
- package/build/components/DateInput/DateInputSegment.js +3 -6
- package/package.json +2 -2
- package/src/components/DateInput/DateInput.docs.mdx +47 -29
- package/src/components/DateInput/DateInput.props.ts +32 -1
- package/src/components/DateInput/DateInput.stories.tsx +10 -0
- package/src/components/DateInput/DateInput.tsx +12 -1
- package/src/components/DateInput/DateInputSegment.tsx +8 -23
package/.turbo/turbo-build.log
CHANGED
package/.turbo/turbo-lint.log
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @utilitywarehouse/hearth-react-native@0.16.
|
|
2
|
+
> @utilitywarehouse/hearth-react-native@0.16.2 lint /home/runner/work/hearth/hearth/packages/react-native
|
|
3
3
|
> TIMING=1 eslint .
|
|
4
4
|
|
|
5
5
|
|
|
@@ -57,13 +57,13 @@
|
|
|
57
57
|
|
|
58
58
|
Rule | Time (ms) | Relative
|
|
59
59
|
:-----------------------------------------|----------:|--------:
|
|
60
|
-
@typescript-eslint/no-unused-vars |
|
|
61
|
-
react-hooks/
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
no-
|
|
65
|
-
|
|
66
|
-
@typescript-eslint/
|
|
67
|
-
no-misleading-character-class |
|
|
68
|
-
|
|
69
|
-
|
|
60
|
+
@typescript-eslint/no-unused-vars | 1369.850 | 61.9%
|
|
61
|
+
react-hooks/rules-of-hooks | 90.157 | 4.1%
|
|
62
|
+
react-hooks/exhaustive-deps | 78.401 | 3.5%
|
|
63
|
+
no-global-assign | 65.908 | 3.0%
|
|
64
|
+
no-loss-of-precision | 42.121 | 1.9%
|
|
65
|
+
no-unexpected-multiline | 40.780 | 1.8%
|
|
66
|
+
@typescript-eslint/ban-ts-comment | 35.389 | 1.6%
|
|
67
|
+
no-misleading-character-class | 33.623 | 1.5%
|
|
68
|
+
@typescript-eslint/triple-slash-reference | 22.898 | 1.0%
|
|
69
|
+
prefer-const | 21.548 | 1.0%
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
1
1
|
# @utilitywarehouse/hearth-react-native
|
|
2
2
|
|
|
3
|
+
## 0.16.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#837](https://github.com/utilitywarehouse/hearth/pull/837) [`126657c`](https://github.com/utilitywarehouse/hearth/commit/126657cd96008625f9573ed5cc1588709c00f7da) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Add style customisation props to `DateInput` component
|
|
8
|
+
|
|
9
|
+
The `DateInput` component now supports three new style props for customising the appearance of date segments: `inputContainerStyle`, `inputStyle`, and `inputLabelStyle`. This allows for greater flexibility when integrating DateInput into different layouts.
|
|
10
|
+
|
|
11
|
+
**Components affected**:
|
|
12
|
+
- `DateInput`
|
|
13
|
+
|
|
14
|
+
**Developer changes**:
|
|
15
|
+
|
|
16
|
+
No changes required. To customise the appearance of date input segments, use the new style props:
|
|
17
|
+
|
|
18
|
+
```tsx
|
|
19
|
+
<DateInput
|
|
20
|
+
label="Custom date input"
|
|
21
|
+
inputContainerStyle={{ maxWidth: 'auto' }}
|
|
22
|
+
inputStyle={{ fontSize: 16 }}
|
|
23
|
+
inputLabelStyle={{ fontWeight: 'bold' }}
|
|
24
|
+
/>
|
|
25
|
+
```
|
|
26
|
+
|
|
3
27
|
## 0.16.1
|
|
4
28
|
|
|
5
29
|
### Patch Changes
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { DateInputProps } from './DateInput.props';
|
|
2
2
|
declare const DateInput: {
|
|
3
|
-
({ label, helperText, helperIcon, validationStatus, validText, invalidText, disabled, readonly, required, hideDay, hideMonth, hideYear, dayPlaceholder, monthPlaceholder, yearPlaceholder, dayValue, monthValue, yearValue, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, ...props }: DateInputProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
({ label, helperText, helperIcon, validationStatus, validText, invalidText, disabled, readonly, required, hideDay, hideMonth, hideYear, dayPlaceholder, monthPlaceholder, yearPlaceholder, dayValue, monthValue, yearValue, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, inputLabelStyle, inputContainerStyle, inputStyle, ...props }: DateInputProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
displayName: string;
|
|
5
5
|
};
|
|
6
6
|
export default DateInput;
|
|
@@ -3,8 +3,8 @@ import { View } from 'react-native';
|
|
|
3
3
|
import { StyleSheet } from 'react-native-unistyles';
|
|
4
4
|
import { FormField } from '../FormField';
|
|
5
5
|
import DateInputSegment from './DateInputSegment';
|
|
6
|
-
const DateInput = ({ label, helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled, readonly, required, hideDay = false, hideMonth = false, hideYear = false, dayPlaceholder = 'DD', monthPlaceholder = 'MM', yearPlaceholder = 'YYYY', dayValue, monthValue, yearValue, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, ...props }) => {
|
|
7
|
-
return (_jsx(FormField, { label: label, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, required: required, style: styles.wrap, ...props, children: _jsxs(View, { style: styles.container, children: [!hideDay && (_jsx(DateInputSegment, { label: "Day", placeholder: dayPlaceholder, value: dayValue, onChange: onDayChange, onFocus: onDayFocus, onBlur: onDayBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-day" })), !hideMonth && (_jsx(DateInputSegment, { label: "Month", placeholder: monthPlaceholder, value: monthValue, onChange: onMonthChange, onFocus: onMonthFocus, onBlur: onMonthBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-month" })), !hideYear && (_jsx(DateInputSegment, { label: "Year", placeholder: yearPlaceholder, value: yearValue, onChange: onYearChange, onFocus: onYearFocus, onBlur: onYearBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 4, testID: "date-input-year" }))] }) }));
|
|
6
|
+
const DateInput = ({ label, helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled, readonly, required, hideDay = false, hideMonth = false, hideYear = false, dayPlaceholder = 'DD', monthPlaceholder = 'MM', yearPlaceholder = 'YYYY', dayValue, monthValue, yearValue, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, inputLabelStyle, inputContainerStyle, inputStyle, ...props }) => {
|
|
7
|
+
return (_jsx(FormField, { label: label, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, required: required, style: styles.wrap, ...props, children: _jsxs(View, { style: styles.container, children: [!hideDay && (_jsx(DateInputSegment, { label: "Day", placeholder: dayPlaceholder, value: dayValue, onChange: onDayChange, onFocus: onDayFocus, onBlur: onDayBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-day", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle })), !hideMonth && (_jsx(DateInputSegment, { label: "Month", placeholder: monthPlaceholder, value: monthValue, onChange: onMonthChange, onFocus: onMonthFocus, onBlur: onMonthBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-month", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle })), !hideYear && (_jsx(DateInputSegment, { label: "Year", placeholder: yearPlaceholder, value: yearValue, onChange: onYearChange, onFocus: onYearFocus, onBlur: onYearBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 4, testID: "date-input-year", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle }))] }) }));
|
|
8
8
|
};
|
|
9
9
|
DateInput.displayName = 'DateInput';
|
|
10
10
|
const styles = StyleSheet.create(theme => ({
|
|
@@ -14,7 +14,6 @@ const styles = StyleSheet.create(theme => ({
|
|
|
14
14
|
container: {
|
|
15
15
|
flexDirection: 'row',
|
|
16
16
|
gap: theme.components.input.date.gap,
|
|
17
|
-
// alignItems: 'stretch',
|
|
18
17
|
},
|
|
19
18
|
}));
|
|
20
19
|
export default DateInput;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import type { TextInputProps } from 'react-native';
|
|
1
|
+
import type { TextInputProps, ViewProps } from 'react-native';
|
|
2
2
|
import type { FormFieldBaseProps } from '../FormField/FormField.props';
|
|
3
|
+
import LabelProps from '../Label/Label.props';
|
|
3
4
|
export interface DateInputProps extends FormFieldBaseProps {
|
|
4
5
|
/**
|
|
5
6
|
* Whether the day segment is hidden.
|
|
@@ -76,4 +77,24 @@ export interface DateInputProps extends FormFieldBaseProps {
|
|
|
76
77
|
* Callback fired when the year segment loses focus.
|
|
77
78
|
*/
|
|
78
79
|
onYearBlur?: TextInputProps['onBlur'];
|
|
80
|
+
inputContainerStyle?: ViewProps['style'];
|
|
81
|
+
inputStyle?: ViewProps['style'];
|
|
82
|
+
inputLabelStyle?: LabelProps['style'];
|
|
83
|
+
}
|
|
84
|
+
export interface DateInputSegmentProps {
|
|
85
|
+
label: string;
|
|
86
|
+
placeholder?: string;
|
|
87
|
+
value?: string;
|
|
88
|
+
onChange?: (text: string) => void;
|
|
89
|
+
onFocus?: DateInputProps['onDayFocus'];
|
|
90
|
+
onBlur?: DateInputProps['onDayBlur'];
|
|
91
|
+
disabled?: boolean;
|
|
92
|
+
required?: boolean;
|
|
93
|
+
validationStatus?: DateInputProps['validationStatus'];
|
|
94
|
+
maxLength?: number;
|
|
95
|
+
readonly?: boolean;
|
|
96
|
+
testID?: string;
|
|
97
|
+
inputContainerStyle?: ViewProps['style'];
|
|
98
|
+
inputStyle?: ViewProps['style'];
|
|
99
|
+
inputLabelStyle?: LabelProps['style'];
|
|
79
100
|
}
|
|
@@ -1,20 +1,6 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
interface DateInputSegmentProps {
|
|
3
|
-
label: string;
|
|
4
|
-
placeholder?: string;
|
|
5
|
-
value?: string;
|
|
6
|
-
onChange?: (text: string) => void;
|
|
7
|
-
onFocus?: DateInputProps['onDayFocus'];
|
|
8
|
-
onBlur?: DateInputProps['onDayBlur'];
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
required?: boolean;
|
|
11
|
-
validationStatus?: DateInputProps['validationStatus'];
|
|
12
|
-
maxLength?: number;
|
|
13
|
-
readonly?: boolean;
|
|
14
|
-
testID?: string;
|
|
15
|
-
}
|
|
1
|
+
import type { DateInputSegmentProps } from './DateInput.props';
|
|
16
2
|
declare const DateInputSegment: {
|
|
17
|
-
({ label, placeholder, value, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, }: DateInputSegmentProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
({ label, placeholder, value, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, inputContainerStyle, inputStyle, inputLabelStyle, }: DateInputSegmentProps): import("react/jsx-runtime").JSX.Element;
|
|
18
4
|
displayName: string;
|
|
19
5
|
};
|
|
20
6
|
export default DateInputSegment;
|
|
@@ -3,16 +3,16 @@ import { View } from 'react-native';
|
|
|
3
3
|
import { StyleSheet } from 'react-native-unistyles';
|
|
4
4
|
import { BodyText } from '../BodyText';
|
|
5
5
|
import { Input } from '../Input';
|
|
6
|
-
const DateInputSegment = ({ label, placeholder, value, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, }) => {
|
|
6
|
+
const DateInputSegment = ({ label, placeholder, value, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, inputContainerStyle, inputStyle, inputLabelStyle, }) => {
|
|
7
7
|
styles.useVariants({ disabled });
|
|
8
|
-
return (_jsxs(View, { style: styles.container, children: [_jsx(BodyText, { size: "md", style: styles.label, children: label }), _jsx(Input, { value: value, onChangeText: onChange, onFocus: onFocus, onBlur: onBlur, placeholder: disabled ? undefined : placeholder, keyboardType: "number-pad", maxLength: maxLength, testID: testID, accessibilityLabel: label, disabled: disabled, validationStatus: validationStatus, readonly: readonly, style:
|
|
8
|
+
return (_jsxs(View, { style: [styles.container, inputContainerStyle], children: [_jsx(BodyText, { size: "md", style: [styles.label, inputLabelStyle], children: label }), _jsx(Input, { value: value, onChangeText: onChange, onFocus: onFocus, onBlur: onBlur, placeholder: disabled ? undefined : placeholder, keyboardType: "number-pad", maxLength: maxLength, testID: testID, accessibilityLabel: label, disabled: disabled, validationStatus: validationStatus, readonly: readonly, style: inputStyle })] }));
|
|
9
9
|
};
|
|
10
10
|
DateInputSegment.displayName = 'DateInputSegment';
|
|
11
11
|
const styles = StyleSheet.create(theme => ({
|
|
12
12
|
container: {
|
|
13
13
|
flex: 1,
|
|
14
14
|
gap: theme.components.input.gap,
|
|
15
|
-
|
|
15
|
+
maxWidth: 96,
|
|
16
16
|
},
|
|
17
17
|
label: {
|
|
18
18
|
variants: {
|
|
@@ -23,8 +23,5 @@ const styles = StyleSheet.create(theme => ({
|
|
|
23
23
|
},
|
|
24
24
|
},
|
|
25
25
|
},
|
|
26
|
-
input: {
|
|
27
|
-
// maxWidth: 96,
|
|
28
|
-
},
|
|
29
26
|
}));
|
|
30
27
|
export default DateInputSegment;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@utilitywarehouse/hearth-react-native",
|
|
3
|
-
"version": "0.16.
|
|
3
|
+
"version": "0.16.2",
|
|
4
4
|
"description": "Utility Warehouse React Native UI library",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"types": "build/index.d.ts",
|
|
@@ -55,10 +55,10 @@
|
|
|
55
55
|
"vite": "^7.1.3",
|
|
56
56
|
"vite-plugin-svgr": "^4.5.0",
|
|
57
57
|
"vitest": "^3.2.4",
|
|
58
|
-
"@utilitywarehouse/hearth-fonts": "^0.0.4",
|
|
59
58
|
"@utilitywarehouse/hearth-react-icons": "^0.7.4",
|
|
60
59
|
"@utilitywarehouse/hearth-react-native-icons": "^0.7.4",
|
|
61
60
|
"@utilitywarehouse/hearth-svg-assets": "^0.3.0",
|
|
61
|
+
"@utilitywarehouse/hearth-fonts": "^0.0.4",
|
|
62
62
|
"@utilitywarehouse/hearth-tokens": "^0.2.2"
|
|
63
63
|
},
|
|
64
64
|
"peerDependencies": {
|
|
@@ -26,6 +26,7 @@ The `DateInput` component allows users to enter dates manually using separate in
|
|
|
26
26
|
- [Flexible Segments](#flexible-segments)
|
|
27
27
|
- [Grouping Inputs](#grouping-inputs)
|
|
28
28
|
- [With State](#with-state)
|
|
29
|
+
- [Overriding Styles](#overriding-styles)
|
|
29
30
|
- [Accessibility](#accessibility)
|
|
30
31
|
|
|
31
32
|
## Playground
|
|
@@ -65,35 +66,38 @@ const MyComponent = () => {
|
|
|
65
66
|
|
|
66
67
|
### DateInputProps
|
|
67
68
|
|
|
68
|
-
| Prop
|
|
69
|
-
|
|
|
70
|
-
| `label`
|
|
71
|
-
| `helperText`
|
|
72
|
-
| `helperIcon`
|
|
73
|
-
| `validationStatus`
|
|
74
|
-
| `validText`
|
|
75
|
-
| `invalidText`
|
|
76
|
-
| `required`
|
|
77
|
-
| `disabled`
|
|
78
|
-
| `readonly`
|
|
79
|
-
| `hideDay`
|
|
80
|
-
| `hideMonth`
|
|
81
|
-
| `hideYear`
|
|
82
|
-
| `dayPlaceholder`
|
|
83
|
-
| `monthPlaceholder`
|
|
84
|
-
| `yearPlaceholder`
|
|
85
|
-
| `dayValue`
|
|
86
|
-
| `monthValue`
|
|
87
|
-
| `yearValue`
|
|
88
|
-
| `onDayChange`
|
|
89
|
-
| `onMonthChange`
|
|
90
|
-
| `onYearChange`
|
|
91
|
-
| `onDayFocus`
|
|
92
|
-
| `onMonthFocus`
|
|
93
|
-
| `onYearFocus`
|
|
94
|
-
| `onDayBlur`
|
|
95
|
-
| `onMonthBlur`
|
|
96
|
-
| `onYearBlur`
|
|
69
|
+
| Prop | Type | Default | Description |
|
|
70
|
+
| --------------------- | ----------------------------------- | ----------- | ----------------------------------------------------- |
|
|
71
|
+
| `label` | `string` | - | Label text displayed above the inputs |
|
|
72
|
+
| `helperText` | `string` | - | Helper text displayed below the inputs |
|
|
73
|
+
| `helperIcon` | `ComponentType` | - | Icon component to display with helper/validation text |
|
|
74
|
+
| `validationStatus` | `'initial' \| 'valid' \| 'invalid'` | `'initial'` | Validation status of the input |
|
|
75
|
+
| `validText` | `string` | - | Text to display when validation status is valid |
|
|
76
|
+
| `invalidText` | `string` | - | Text to display when validation status is invalid |
|
|
77
|
+
| `required` | `boolean` | `false` | Whether the input is required |
|
|
78
|
+
| `disabled` | `boolean` | `false` | Whether the input is disabled |
|
|
79
|
+
| `readonly` | `boolean` | `false` | Whether the input is read-only |
|
|
80
|
+
| `hideDay` | `boolean` | `false` | Whether to hide the day segment |
|
|
81
|
+
| `hideMonth` | `boolean` | `false` | Whether to hide the month segment |
|
|
82
|
+
| `hideYear` | `boolean` | `false` | Whether to hide the year segment |
|
|
83
|
+
| `dayPlaceholder` | `string` | `'DD'` | Placeholder text for the day segment |
|
|
84
|
+
| `monthPlaceholder` | `string` | `'MM'` | Placeholder text for the month segment |
|
|
85
|
+
| `yearPlaceholder` | `string` | `'YYYY'` | Placeholder text for the year segment |
|
|
86
|
+
| `dayValue` | `string` | - | Controlled value for the day segment |
|
|
87
|
+
| `monthValue` | `string` | - | Controlled value for the month segment |
|
|
88
|
+
| `yearValue` | `string` | - | Controlled value for the year segment |
|
|
89
|
+
| `onDayChange` | `(text: string) => void` | - | Callback fired when the day value changes |
|
|
90
|
+
| `onMonthChange` | `(text: string) => void` | - | Callback fired when the month value changes |
|
|
91
|
+
| `onYearChange` | `(text: string) => void` | - | Callback fired when the year value changes |
|
|
92
|
+
| `onDayFocus` | `(e: NativeSyntheticEvent) => void` | - | Callback fired when the day segment receives focus |
|
|
93
|
+
| `onMonthFocus` | `(e: NativeSyntheticEvent) => void` | - | Callback fired when the month segment receives focus |
|
|
94
|
+
| `onYearFocus` | `(e: NativeSyntheticEvent) => void` | - | Callback fired when the year segment receives focus |
|
|
95
|
+
| `onDayBlur` | `(e: NativeSyntheticEvent) => void` | - | Callback fired when the day segment loses focus |
|
|
96
|
+
| `onMonthBlur` | `(e: NativeSyntheticEvent) => void` | - | Callback fired when the month segment loses focus |
|
|
97
|
+
| `onYearBlur` | `(e: NativeSyntheticEvent) => void` | - | Callback fired when the year segment loses focus |
|
|
98
|
+
| `inputContainerStyle` | `ViewStyle` | - | Custom style for each input container |
|
|
99
|
+
| `inputStyle` | `ViewStyle` | - | Custom style for each input field |
|
|
100
|
+
| `inputLabelStyle` | `TextStyle` | - | Custom style for each input label |
|
|
97
101
|
|
|
98
102
|
## Examples
|
|
99
103
|
|
|
@@ -155,6 +159,20 @@ Programmatically control date values:
|
|
|
155
159
|
|
|
156
160
|
<Canvas of={Stories.WithState} />
|
|
157
161
|
|
|
162
|
+
### Overriding Styles
|
|
163
|
+
|
|
164
|
+
You can override the styles of the input containers, input fields, and input labels using the `inputContainerStyle`, `inputStyle`, and `inputLabelStyle` props respectively:
|
|
165
|
+
|
|
166
|
+
<Canvas of={Stories.CustomWidth} />
|
|
167
|
+
|
|
168
|
+
```tsx
|
|
169
|
+
<DateInput
|
|
170
|
+
label="Custom width date input"
|
|
171
|
+
helperText="Date input with custom width"
|
|
172
|
+
inputContainerStyle={{ maxWidth: 'auto' }}
|
|
173
|
+
/>
|
|
174
|
+
```
|
|
175
|
+
|
|
158
176
|
## Accessibility
|
|
159
177
|
|
|
160
178
|
- Each segment has a descriptive label ("Day", "Month", "Year") for screen readers
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import type { TextInputProps } from 'react-native';
|
|
1
|
+
import type { TextInputProps, ViewProps } from 'react-native';
|
|
2
2
|
import type { FormFieldBaseProps } from '../FormField/FormField.props';
|
|
3
|
+
import LabelProps from '../Label/Label.props';
|
|
3
4
|
|
|
4
5
|
export interface DateInputProps extends FormFieldBaseProps {
|
|
5
6
|
/**
|
|
@@ -77,4 +78,34 @@ export interface DateInputProps extends FormFieldBaseProps {
|
|
|
77
78
|
* Callback fired when the year segment loses focus.
|
|
78
79
|
*/
|
|
79
80
|
onYearBlur?: TextInputProps['onBlur'];
|
|
81
|
+
/*
|
|
82
|
+
* Style for all the input segment's container.
|
|
83
|
+
*/
|
|
84
|
+
inputContainerStyle?: ViewProps['style'];
|
|
85
|
+
/*
|
|
86
|
+
* Style for all the input segment's TextInput.
|
|
87
|
+
*/
|
|
88
|
+
inputStyle?: ViewProps['style'];
|
|
89
|
+
/*
|
|
90
|
+
* Style for all the input segment's label.
|
|
91
|
+
*/
|
|
92
|
+
inputLabelStyle?: LabelProps['style'];
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
export interface DateInputSegmentProps {
|
|
96
|
+
label: string;
|
|
97
|
+
placeholder?: string;
|
|
98
|
+
value?: string;
|
|
99
|
+
onChange?: (text: string) => void;
|
|
100
|
+
onFocus?: DateInputProps['onDayFocus'];
|
|
101
|
+
onBlur?: DateInputProps['onDayBlur'];
|
|
102
|
+
disabled?: boolean;
|
|
103
|
+
required?: boolean;
|
|
104
|
+
validationStatus?: DateInputProps['validationStatus'];
|
|
105
|
+
maxLength?: number;
|
|
106
|
+
readonly?: boolean;
|
|
107
|
+
testID?: string;
|
|
108
|
+
inputContainerStyle?: ViewProps['style'];
|
|
109
|
+
inputStyle?: ViewProps['style'];
|
|
110
|
+
inputLabelStyle?: LabelProps['style'];
|
|
80
111
|
}
|
|
@@ -267,3 +267,13 @@ export const WithState: Story = {
|
|
|
267
267
|
);
|
|
268
268
|
},
|
|
269
269
|
};
|
|
270
|
+
|
|
271
|
+
export const CustomWidth: Story = {
|
|
272
|
+
render: () => (
|
|
273
|
+
<DateInput
|
|
274
|
+
label="Custom width date input"
|
|
275
|
+
helperText="Date input with custom width"
|
|
276
|
+
inputContainerStyle={{ maxWidth: 'auto' }}
|
|
277
|
+
/>
|
|
278
|
+
),
|
|
279
|
+
};
|
|
@@ -32,6 +32,9 @@ const DateInput = ({
|
|
|
32
32
|
onDayBlur,
|
|
33
33
|
onMonthBlur,
|
|
34
34
|
onYearBlur,
|
|
35
|
+
inputLabelStyle,
|
|
36
|
+
inputContainerStyle,
|
|
37
|
+
inputStyle,
|
|
35
38
|
...props
|
|
36
39
|
}: DateInputProps) => {
|
|
37
40
|
return (
|
|
@@ -63,6 +66,9 @@ const DateInput = ({
|
|
|
63
66
|
validationStatus={validationStatus}
|
|
64
67
|
maxLength={2}
|
|
65
68
|
testID="date-input-day"
|
|
69
|
+
inputContainerStyle={inputContainerStyle}
|
|
70
|
+
inputStyle={inputStyle}
|
|
71
|
+
inputLabelStyle={inputLabelStyle}
|
|
66
72
|
/>
|
|
67
73
|
)}
|
|
68
74
|
{!hideMonth && (
|
|
@@ -79,6 +85,9 @@ const DateInput = ({
|
|
|
79
85
|
validationStatus={validationStatus}
|
|
80
86
|
maxLength={2}
|
|
81
87
|
testID="date-input-month"
|
|
88
|
+
inputContainerStyle={inputContainerStyle}
|
|
89
|
+
inputStyle={inputStyle}
|
|
90
|
+
inputLabelStyle={inputLabelStyle}
|
|
82
91
|
/>
|
|
83
92
|
)}
|
|
84
93
|
{!hideYear && (
|
|
@@ -95,6 +104,9 @@ const DateInput = ({
|
|
|
95
104
|
validationStatus={validationStatus}
|
|
96
105
|
maxLength={4}
|
|
97
106
|
testID="date-input-year"
|
|
107
|
+
inputContainerStyle={inputContainerStyle}
|
|
108
|
+
inputStyle={inputStyle}
|
|
109
|
+
inputLabelStyle={inputLabelStyle}
|
|
98
110
|
/>
|
|
99
111
|
)}
|
|
100
112
|
</View>
|
|
@@ -111,7 +123,6 @@ const styles = StyleSheet.create(theme => ({
|
|
|
111
123
|
container: {
|
|
112
124
|
flexDirection: 'row',
|
|
113
125
|
gap: theme.components.input.date.gap,
|
|
114
|
-
// alignItems: 'stretch',
|
|
115
126
|
},
|
|
116
127
|
}));
|
|
117
128
|
|
|
@@ -2,22 +2,7 @@ import { View } from 'react-native';
|
|
|
2
2
|
import { StyleSheet } from 'react-native-unistyles';
|
|
3
3
|
import { BodyText } from '../BodyText';
|
|
4
4
|
import { Input } from '../Input';
|
|
5
|
-
import type {
|
|
6
|
-
|
|
7
|
-
interface DateInputSegmentProps {
|
|
8
|
-
label: string;
|
|
9
|
-
placeholder?: string;
|
|
10
|
-
value?: string;
|
|
11
|
-
onChange?: (text: string) => void;
|
|
12
|
-
onFocus?: DateInputProps['onDayFocus'];
|
|
13
|
-
onBlur?: DateInputProps['onDayBlur'];
|
|
14
|
-
disabled?: boolean;
|
|
15
|
-
required?: boolean;
|
|
16
|
-
validationStatus?: DateInputProps['validationStatus'];
|
|
17
|
-
maxLength?: number;
|
|
18
|
-
readonly?: boolean;
|
|
19
|
-
testID?: string;
|
|
20
|
-
}
|
|
5
|
+
import type { DateInputSegmentProps } from './DateInput.props';
|
|
21
6
|
|
|
22
7
|
const DateInputSegment = ({
|
|
23
8
|
label,
|
|
@@ -31,11 +16,14 @@ const DateInputSegment = ({
|
|
|
31
16
|
maxLength,
|
|
32
17
|
readonly,
|
|
33
18
|
testID,
|
|
19
|
+
inputContainerStyle,
|
|
20
|
+
inputStyle,
|
|
21
|
+
inputLabelStyle,
|
|
34
22
|
}: DateInputSegmentProps) => {
|
|
35
23
|
styles.useVariants({ disabled });
|
|
36
24
|
return (
|
|
37
|
-
<View style={styles.container}>
|
|
38
|
-
<BodyText size="md" style={styles.label}>
|
|
25
|
+
<View style={[styles.container, inputContainerStyle]}>
|
|
26
|
+
<BodyText size="md" style={[styles.label, inputLabelStyle]}>
|
|
39
27
|
{label}
|
|
40
28
|
</BodyText>
|
|
41
29
|
<Input
|
|
@@ -51,7 +39,7 @@ const DateInputSegment = ({
|
|
|
51
39
|
disabled={disabled}
|
|
52
40
|
validationStatus={validationStatus}
|
|
53
41
|
readonly={readonly}
|
|
54
|
-
style={
|
|
42
|
+
style={inputStyle}
|
|
55
43
|
/>
|
|
56
44
|
</View>
|
|
57
45
|
);
|
|
@@ -63,7 +51,7 @@ const styles = StyleSheet.create(theme => ({
|
|
|
63
51
|
container: {
|
|
64
52
|
flex: 1,
|
|
65
53
|
gap: theme.components.input.gap,
|
|
66
|
-
|
|
54
|
+
maxWidth: 96,
|
|
67
55
|
},
|
|
68
56
|
label: {
|
|
69
57
|
variants: {
|
|
@@ -74,9 +62,6 @@ const styles = StyleSheet.create(theme => ({
|
|
|
74
62
|
},
|
|
75
63
|
},
|
|
76
64
|
},
|
|
77
|
-
input: {
|
|
78
|
-
// maxWidth: 96,
|
|
79
|
-
},
|
|
80
65
|
}));
|
|
81
66
|
|
|
82
67
|
export default DateInputSegment;
|