@draftbit/core 46.4.4-cc754a.2 → 46.4.4-cd0423.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/lib/commonjs/components/Accordion/AccordionItem.js +25 -5
- package/lib/commonjs/components/DatePicker/DatePicker.js +25 -15
- package/lib/commonjs/components/DatePicker/{DatePickerComponent.web.js → DatePickerComponent.__web.js} +3 -0
- package/lib/commonjs/components/DatePicker/DatePickerComponent.js +2 -0
- package/lib/commonjs/mappings/DatePicker.js +20 -3
- package/lib/commonjs/mappings/TextArea.js +14 -3
- package/lib/commonjs/mappings/TextField.js +14 -4
- package/lib/commonjs/mappings/TextInput.js +14 -3
- package/lib/module/components/DatePicker/DatePicker.js +24 -15
- package/lib/module/components/DatePicker/{DatePickerComponent.web.js → DatePickerComponent.__web.js} +3 -0
- package/lib/module/components/DatePicker/DatePickerComponent.js +2 -0
- package/lib/module/constants.js +1 -0
- package/lib/module/mappings/DatePicker.js +21 -4
- package/lib/module/mappings/TextArea.js +15 -4
- package/lib/module/mappings/TextField.js +14 -4
- package/lib/module/mappings/TextInput.js +15 -4
- package/lib/typescript/src/components/DatePicker/DatePicker.d.ts +4 -0
- package/lib/typescript/src/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/lib/typescript/src/components/DatePicker/{DatePickerComponent.web.d.ts → DatePickerComponent.__web.d.ts} +1 -1
- package/lib/typescript/src/components/DatePicker/{DatePickerComponent.web.d.ts.map → DatePickerComponent.__web.d.ts.map} +1 -1
- package/lib/typescript/src/components/DatePicker/DatePickerComponent.d.ts.map +1 -1
- package/lib/typescript/src/components/DatePicker/DatePickerComponentType.d.ts +1 -0
- package/lib/typescript/src/components/DatePicker/DatePickerComponentType.d.ts.map +1 -1
- package/lib/typescript/src/mappings/DatePicker.d.ts +42 -0
- package/lib/typescript/src/mappings/DatePicker.d.ts.map +1 -1
- package/lib/typescript/src/mappings/TextArea.d.ts +21 -1
- package/lib/typescript/src/mappings/TextArea.d.ts.map +1 -1
- package/lib/typescript/src/mappings/TextField.d.ts +22 -2
- package/lib/typescript/src/mappings/TextField.d.ts.map +1 -1
- package/lib/typescript/src/mappings/TextInput.d.ts +21 -1
- package/lib/typescript/src/mappings/TextInput.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/components/DatePicker/DatePicker.js +20 -13
- package/src/components/DatePicker/DatePicker.tsx +29 -13
- package/src/components/DatePicker/{DatePickerComponent.web.js → DatePickerComponent.__web.js} +2 -2
- package/src/components/DatePicker/{DatePickerComponent.web.tsx → DatePickerComponent.__web.tsx} +3 -0
- package/src/components/DatePicker/DatePickerComponent.js +2 -2
- package/src/components/DatePicker/DatePickerComponent.tsx +2 -0
- package/src/components/DatePicker/DatePickerComponentType.ts +1 -0
- package/src/mappings/DatePicker.js +28 -4
- package/src/mappings/DatePicker.ts +30 -3
- package/src/mappings/TextArea.js +15 -4
- package/src/mappings/TextArea.ts +15 -3
- package/src/mappings/TextField.js +14 -4
- package/src/mappings/TextField.ts +14 -4
- package/src/mappings/TextInput.js +15 -4
- package/src/mappings/TextInput.ts +15 -3
|
@@ -62,7 +62,7 @@ const SEED_DATA_PROPS = {
|
|
|
62
62
|
propType: PROP_TYPES.BOOLEAN
|
|
63
63
|
},
|
|
64
64
|
disabled: {
|
|
65
|
-
group: GROUPS.
|
|
65
|
+
group: GROUPS.data,
|
|
66
66
|
label: "Disabled",
|
|
67
67
|
description: "Whether the input should be disabled. Will prevent input and show a greyed out state.",
|
|
68
68
|
formType: FORM_TYPES.boolean,
|
|
@@ -72,12 +72,22 @@ const SEED_DATA_PROPS = {
|
|
|
72
72
|
required: false
|
|
73
73
|
},
|
|
74
74
|
editable: {
|
|
75
|
-
group: GROUPS.
|
|
76
|
-
label: "Editable",
|
|
75
|
+
group: GROUPS.data,
|
|
76
|
+
label: "Editable?",
|
|
77
77
|
description: "If false, the text is not editable",
|
|
78
78
|
editable: true,
|
|
79
79
|
required: false,
|
|
80
|
-
defaultValue:
|
|
80
|
+
defaultValue: null,
|
|
81
|
+
formType: FORM_TYPES.boolean,
|
|
82
|
+
propType: PROP_TYPES.BOOLEAN
|
|
83
|
+
},
|
|
84
|
+
blurOnSubmit: {
|
|
85
|
+
group: GROUPS.advanced,
|
|
86
|
+
label: "Blur On Submit",
|
|
87
|
+
description: "If true, the text field will blur when submitted. ",
|
|
88
|
+
editable: true,
|
|
89
|
+
required: false,
|
|
90
|
+
defaultValue: null,
|
|
81
91
|
formType: FORM_TYPES.boolean,
|
|
82
92
|
propType: PROP_TYPES.BOOLEAN
|
|
83
93
|
},
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, StylesPanelSections } from "@draftbit/types";
|
|
1
|
+
import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, StylesPanelSections, createDisabledProp } from "@draftbit/types";
|
|
2
2
|
export const SEED_DATA_PROPS = {
|
|
3
3
|
style: {
|
|
4
4
|
group: GROUPS.basic,
|
|
@@ -140,12 +140,12 @@ export const SEED_DATA = [{
|
|
|
140
140
|
propType: PROP_TYPES.BOOLEAN
|
|
141
141
|
},
|
|
142
142
|
editable: {
|
|
143
|
-
group: GROUPS.
|
|
144
|
-
label: "Editable",
|
|
143
|
+
group: GROUPS.data,
|
|
144
|
+
label: "Editable?",
|
|
145
145
|
description: "If false, the text is not editable",
|
|
146
146
|
editable: true,
|
|
147
147
|
required: false,
|
|
148
|
-
defaultValue:
|
|
148
|
+
defaultValue: null,
|
|
149
149
|
formType: FORM_TYPES.boolean,
|
|
150
150
|
propType: PROP_TYPES.BOOLEAN
|
|
151
151
|
},
|
|
@@ -214,6 +214,16 @@ export const SEED_DATA = [{
|
|
|
214
214
|
formType: FORM_TYPES.string,
|
|
215
215
|
propType: PROP_TYPES.STRING
|
|
216
216
|
},
|
|
217
|
+
blurOnSubmit: {
|
|
218
|
+
group: GROUPS.advanced,
|
|
219
|
+
label: "Blur On Submit",
|
|
220
|
+
description: "If true, the text field will blur when submitted. ",
|
|
221
|
+
editable: true,
|
|
222
|
+
required: false,
|
|
223
|
+
defaultValue: null,
|
|
224
|
+
formType: FORM_TYPES.boolean,
|
|
225
|
+
propType: PROP_TYPES.BOOLEAN
|
|
226
|
+
},
|
|
217
227
|
returnKeyType: {
|
|
218
228
|
group: GROUPS.advanced,
|
|
219
229
|
label: "Return Key Type",
|
|
@@ -279,6 +289,7 @@ export const SEED_DATA = [{
|
|
|
279
289
|
formType: FORM_TYPES.number,
|
|
280
290
|
propType: PROP_TYPES.NUMBER
|
|
281
291
|
},
|
|
292
|
+
disabled: createDisabledProp(),
|
|
282
293
|
scrollEnabled: {
|
|
283
294
|
group: GROUPS.basic,
|
|
284
295
|
label: "Scroll Enabled",
|
|
@@ -15,10 +15,14 @@ declare type Props = {
|
|
|
15
15
|
mode?: "date" | "time" | "datetime";
|
|
16
16
|
type?: "solid" | "underline";
|
|
17
17
|
label?: string;
|
|
18
|
+
labelSize?: number;
|
|
19
|
+
labelColor: string;
|
|
18
20
|
placeholder?: string;
|
|
19
21
|
leftIconName?: string;
|
|
20
22
|
leftIconMode?: "outset" | "inset";
|
|
21
23
|
rightIconName?: string;
|
|
24
|
+
borderColor?: string;
|
|
25
|
+
borderColorActive?: string;
|
|
22
26
|
} & IconSlot & TextInputProps;
|
|
23
27
|
declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props>, "theme"> & {
|
|
24
28
|
theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,SAAS,EACT,SAAS,EAET,cAAc,EAKf,MAAM,cAAc,CAAC;AAStB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,SAAS,EACT,SAAS,EAET,cAAc,EAKf,MAAM,cAAc,CAAC;AAStB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAStD,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnD,KAAK,EAAE,KAAK,CAAC;IAOb,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GAAG,QAAQ,GACV,cAAc,CAAC;;;;AA4fjB,wBAAqC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerComponent.
|
|
1
|
+
{"version":3,"file":"DatePickerComponent.__web.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/DatePickerComponent.__web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,EAAE,wBAAwB,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoD9E,wBAA8C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerComponent.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/DatePickerComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,wBAAwB,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAE9E,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"DatePickerComponent.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/DatePickerComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,wBAAwB,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAE9E,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CA8BjE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerComponentType.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/DatePickerComponentType.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,2BAA2B,CAAC;AAE9C,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;IACnC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,KAAK,CAAC;CACtB"}
|
|
1
|
+
{"version":3,"file":"DatePickerComponentType.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/DatePickerComponentType.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,2BAA2B,CAAC;AAE9C,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;IACnC,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,KAAK,CAAC;CACtB"}
|
|
@@ -5,6 +5,7 @@ export declare const SEED_DATA: {
|
|
|
5
5
|
category: string;
|
|
6
6
|
layout: null;
|
|
7
7
|
triggers: string[];
|
|
8
|
+
StylesPanelSections: string[];
|
|
8
9
|
props: {
|
|
9
10
|
type: {
|
|
10
11
|
label: string;
|
|
@@ -27,6 +28,27 @@ export declare const SEED_DATA: {
|
|
|
27
28
|
required: boolean;
|
|
28
29
|
group: string;
|
|
29
30
|
};
|
|
31
|
+
labelSize: {
|
|
32
|
+
label: string;
|
|
33
|
+
description: string;
|
|
34
|
+
formType: string;
|
|
35
|
+
propType: string;
|
|
36
|
+
group: string;
|
|
37
|
+
defaultValue: null;
|
|
38
|
+
editable: boolean;
|
|
39
|
+
required: boolean;
|
|
40
|
+
step: number;
|
|
41
|
+
};
|
|
42
|
+
labelColor: {
|
|
43
|
+
group: string;
|
|
44
|
+
label: string;
|
|
45
|
+
description: string;
|
|
46
|
+
editable: boolean;
|
|
47
|
+
required: boolean;
|
|
48
|
+
defaultValue: null;
|
|
49
|
+
formType: string;
|
|
50
|
+
propType: string;
|
|
51
|
+
};
|
|
30
52
|
mode: {
|
|
31
53
|
label: string;
|
|
32
54
|
description: string;
|
|
@@ -38,6 +60,26 @@ export declare const SEED_DATA: {
|
|
|
38
60
|
options: string[];
|
|
39
61
|
group: string;
|
|
40
62
|
};
|
|
63
|
+
borderColor: {
|
|
64
|
+
group: string;
|
|
65
|
+
label: string;
|
|
66
|
+
description: string;
|
|
67
|
+
editable: boolean;
|
|
68
|
+
required: boolean;
|
|
69
|
+
defaultValue: null;
|
|
70
|
+
formType: string;
|
|
71
|
+
propType: string;
|
|
72
|
+
};
|
|
73
|
+
borderColorActive: {
|
|
74
|
+
group: string;
|
|
75
|
+
label: string;
|
|
76
|
+
description: string;
|
|
77
|
+
editable: boolean;
|
|
78
|
+
required: boolean;
|
|
79
|
+
defaultValue: null;
|
|
80
|
+
formType: string;
|
|
81
|
+
propType: string;
|
|
82
|
+
};
|
|
41
83
|
format: {
|
|
42
84
|
label: string;
|
|
43
85
|
description: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/mappings/DatePicker.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/mappings/DatePicker.ts"],"names":[],"mappings":"AAmKA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BrB,CAAC"}
|
|
@@ -58,6 +58,26 @@ export declare const SEED_DATA: {
|
|
|
58
58
|
formType: string;
|
|
59
59
|
propType: string;
|
|
60
60
|
};
|
|
61
|
+
blurOnSubmit: {
|
|
62
|
+
group: string;
|
|
63
|
+
label: string;
|
|
64
|
+
description: string;
|
|
65
|
+
editable: boolean;
|
|
66
|
+
required: boolean;
|
|
67
|
+
defaultValue: null;
|
|
68
|
+
formType: string;
|
|
69
|
+
propType: string;
|
|
70
|
+
};
|
|
71
|
+
disabled: {
|
|
72
|
+
label: string;
|
|
73
|
+
description: string;
|
|
74
|
+
group: string;
|
|
75
|
+
editable: boolean;
|
|
76
|
+
required: boolean;
|
|
77
|
+
formType: string;
|
|
78
|
+
propType: string;
|
|
79
|
+
defaultValue: null;
|
|
80
|
+
};
|
|
61
81
|
caretHidden: {
|
|
62
82
|
group: string;
|
|
63
83
|
label: string;
|
|
@@ -84,7 +104,7 @@ export declare const SEED_DATA: {
|
|
|
84
104
|
description: string;
|
|
85
105
|
editable: boolean;
|
|
86
106
|
required: boolean;
|
|
87
|
-
defaultValue:
|
|
107
|
+
defaultValue: null;
|
|
88
108
|
formType: string;
|
|
89
109
|
propType: string;
|
|
90
110
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TextArea.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TextArea.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuRrB,CAAC"}
|
|
@@ -125,7 +125,17 @@ export declare const SEED_DATA: ({
|
|
|
125
125
|
description: string;
|
|
126
126
|
editable: boolean;
|
|
127
127
|
required: boolean;
|
|
128
|
-
defaultValue:
|
|
128
|
+
defaultValue: null;
|
|
129
|
+
formType: string;
|
|
130
|
+
propType: string;
|
|
131
|
+
};
|
|
132
|
+
blurOnSubmit: {
|
|
133
|
+
group: string;
|
|
134
|
+
label: string;
|
|
135
|
+
description: string;
|
|
136
|
+
editable: boolean;
|
|
137
|
+
required: boolean;
|
|
138
|
+
defaultValue: null;
|
|
129
139
|
formType: string;
|
|
130
140
|
propType: string;
|
|
131
141
|
};
|
|
@@ -432,7 +442,17 @@ export declare const SEED_DATA: ({
|
|
|
432
442
|
description: string;
|
|
433
443
|
editable: boolean;
|
|
434
444
|
required: boolean;
|
|
435
|
-
defaultValue:
|
|
445
|
+
defaultValue: null;
|
|
446
|
+
formType: string;
|
|
447
|
+
propType: string;
|
|
448
|
+
};
|
|
449
|
+
blurOnSubmit: {
|
|
450
|
+
group: string;
|
|
451
|
+
label: string;
|
|
452
|
+
description: string;
|
|
453
|
+
editable: boolean;
|
|
454
|
+
required: boolean;
|
|
455
|
+
defaultValue: null;
|
|
436
456
|
formType: string;
|
|
437
457
|
propType: string;
|
|
438
458
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TextField.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TextField.ts"],"names":[],"mappings":"AA6TA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgGrB,CAAC"}
|
|
@@ -108,6 +108,16 @@ export declare const SEED_DATA: {
|
|
|
108
108
|
formType: string;
|
|
109
109
|
propType: string;
|
|
110
110
|
};
|
|
111
|
+
disabled: {
|
|
112
|
+
label: string;
|
|
113
|
+
description: string;
|
|
114
|
+
group: string;
|
|
115
|
+
editable: boolean;
|
|
116
|
+
required: boolean;
|
|
117
|
+
formType: string;
|
|
118
|
+
propType: string;
|
|
119
|
+
defaultValue: null;
|
|
120
|
+
};
|
|
111
121
|
scrollEnabled: {
|
|
112
122
|
group: string;
|
|
113
123
|
label: string;
|
|
@@ -280,7 +290,7 @@ export declare const SEED_DATA: {
|
|
|
280
290
|
description: string;
|
|
281
291
|
editable: boolean;
|
|
282
292
|
required: boolean;
|
|
283
|
-
defaultValue:
|
|
293
|
+
defaultValue: null;
|
|
284
294
|
formType: string;
|
|
285
295
|
propType: string;
|
|
286
296
|
};
|
|
@@ -349,6 +359,16 @@ export declare const SEED_DATA: {
|
|
|
349
359
|
formType: string;
|
|
350
360
|
propType: string;
|
|
351
361
|
};
|
|
362
|
+
blurOnSubmit: {
|
|
363
|
+
group: string;
|
|
364
|
+
label: string;
|
|
365
|
+
description: string;
|
|
366
|
+
editable: boolean;
|
|
367
|
+
required: boolean;
|
|
368
|
+
defaultValue: null;
|
|
369
|
+
formType: string;
|
|
370
|
+
propType: string;
|
|
371
|
+
};
|
|
352
372
|
returnKeyType: {
|
|
353
373
|
group: string;
|
|
354
374
|
label: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TextInput.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TextInput.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D3B,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoWrB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "46.4.4-
|
|
3
|
+
"version": "46.4.4-cd0423.2+cd04235",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@date-io/date-fns": "^1.3.13",
|
|
43
43
|
"@draftbit/react-theme-provider": "^2.1.1",
|
|
44
|
-
"@draftbit/types": "^46.4.4-
|
|
44
|
+
"@draftbit/types": "^46.4.4-cd0423.2+cd04235",
|
|
45
45
|
"@material-ui/core": "^4.11.0",
|
|
46
46
|
"@material-ui/pickers": "^3.2.10",
|
|
47
47
|
"@react-native-community/slider": "4.2.3",
|
|
@@ -91,5 +91,5 @@
|
|
|
91
91
|
]
|
|
92
92
|
]
|
|
93
93
|
},
|
|
94
|
-
"gitHead": "
|
|
94
|
+
"gitHead": "cd04235c8f6183b86fab5418c19140bb09fffd4e"
|
|
95
95
|
}
|
|
@@ -6,6 +6,7 @@ import { withTheme } from "../../theming";
|
|
|
6
6
|
import Portal from "../Portal/Portal";
|
|
7
7
|
import Touchable from "../Touchable";
|
|
8
8
|
import DateTimePicker from "./DatePickerComponent";
|
|
9
|
+
import { extractStyles } from "../../utilities";
|
|
9
10
|
const AnimatedText = Animated.createAnimatedComponent(Text);
|
|
10
11
|
const FOCUS_ANIMATION_DURATION = 150;
|
|
11
12
|
const BLUR_ANIMATION_DURATION = 180;
|
|
@@ -24,7 +25,7 @@ const MONTHS = [
|
|
|
24
25
|
"November",
|
|
25
26
|
"December",
|
|
26
27
|
];
|
|
27
|
-
const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, placeholder, ...props }) => {
|
|
28
|
+
const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, labelSize, labelColor, placeholder, borderColor: inputBorderColor, borderColorActive: inputBorderColorActive, ...props }) => {
|
|
28
29
|
const [value, setValue] = React.useState(date || defaultValue);
|
|
29
30
|
React.useEffect(() => {
|
|
30
31
|
if (defaultValue != null) {
|
|
@@ -36,6 +37,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
|
|
|
36
37
|
const [placeholder1, setPlaceholder1] = React.useState("");
|
|
37
38
|
const [focused, setFocused] = React.useState(false);
|
|
38
39
|
const [labelLayout, setLabelLayout] = React.useState({ measured: false, width: 0 });
|
|
40
|
+
const { textStyles } = extractStyles(style);
|
|
39
41
|
const getValidDate = () => {
|
|
40
42
|
if (!value) {
|
|
41
43
|
return new Date();
|
|
@@ -125,8 +127,10 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
|
|
|
125
127
|
};
|
|
126
128
|
const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
|
|
127
129
|
const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);
|
|
128
|
-
const MAXIMIZED_LABEL_FONT_SIZE = typography.subtitle1.fontSize;
|
|
129
|
-
const MINIMIZED_LABEL_FONT_SIZE =
|
|
130
|
+
const MAXIMIZED_LABEL_FONT_SIZE = (textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontSize) || typography.subtitle1.fontSize;
|
|
131
|
+
const MINIMIZED_LABEL_FONT_SIZE = labelSize
|
|
132
|
+
? labelSize
|
|
133
|
+
: typography.caption.fontSize;
|
|
130
134
|
const hasActiveOutline = focused;
|
|
131
135
|
let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
|
|
132
136
|
inputTextColor = colors.strong;
|
|
@@ -138,9 +142,9 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
|
|
|
138
142
|
backgroundColor = colors.divider;
|
|
139
143
|
}
|
|
140
144
|
else {
|
|
141
|
-
activeColor = colors.primary;
|
|
142
|
-
placeholderColor = borderColor = colors.light;
|
|
143
|
-
underlineColor = colors.light;
|
|
145
|
+
activeColor = inputBorderColorActive || colors.primary;
|
|
146
|
+
placeholderColor = borderColor = inputBorderColor || colors.light;
|
|
147
|
+
underlineColor = inputBorderColor || colors.light;
|
|
144
148
|
backgroundColor = colors.background;
|
|
145
149
|
}
|
|
146
150
|
const { lineHeight, ...subtitle1 } = typography.subtitle1;
|
|
@@ -160,6 +164,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
|
|
|
160
164
|
borderTopRightRadius: roundness,
|
|
161
165
|
paddingBottom: 12,
|
|
162
166
|
marginTop: 16,
|
|
167
|
+
backgroundColor,
|
|
163
168
|
};
|
|
164
169
|
}
|
|
165
170
|
else {
|
|
@@ -202,6 +207,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
|
|
|
202
207
|
const labelStyle = {
|
|
203
208
|
...typography.subtitle1,
|
|
204
209
|
top: type === "solid" ? 16 : 0,
|
|
210
|
+
fontFamily: textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontFamily,
|
|
205
211
|
left: leftIconName && leftIconMode === "inset"
|
|
206
212
|
? ICON_SIZE + (type === "solid" ? 16 : 12)
|
|
207
213
|
: 0,
|
|
@@ -245,14 +251,15 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
|
|
|
245
251
|
styles.input,
|
|
246
252
|
inputStyle,
|
|
247
253
|
type === "solid" ? { marginHorizontal: 12 } : {},
|
|
254
|
+
textStyles,
|
|
248
255
|
];
|
|
249
256
|
// const render = (props) => <NativeTextInput {...props} />;
|
|
250
|
-
return (React.createElement(View, { style: [styles.container
|
|
257
|
+
return (React.createElement(View, { style: [styles.container] },
|
|
251
258
|
React.createElement(Touchable, { disabled: disabled, onPress: toggleVisibility },
|
|
252
259
|
React.createElement(View, { pointerEvents: "none" },
|
|
253
|
-
React.createElement(View, { style: [styles.container
|
|
260
|
+
React.createElement(View, { style: [styles.container] },
|
|
254
261
|
leftIconName && leftIconMode === "outset" ? (React.createElement(Icon, { ...leftIconProps, style: leftIconStyle })) : null,
|
|
255
|
-
React.createElement(View, { style: [containerStyle, style
|
|
262
|
+
React.createElement(View, { style: [containerStyle, style] },
|
|
256
263
|
type === "underline" ? (
|
|
257
264
|
// When type === 'flat', render an underline
|
|
258
265
|
React.createElement(Animated.View, { style: [
|
|
@@ -282,7 +289,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
|
|
|
282
289
|
type === "solid" ? { paddingHorizontal: 12 } : {},
|
|
283
290
|
labelStyle,
|
|
284
291
|
{
|
|
285
|
-
color: colors.light,
|
|
292
|
+
color: labelColor || colors.light,
|
|
286
293
|
opacity: labeled.interpolate({
|
|
287
294
|
inputRange: [0, 1],
|
|
288
295
|
outputRange: [hasActiveOutline ? 1 : 0, 0],
|
|
@@ -294,7 +301,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
|
|
|
294
301
|
type === "solid" ? { paddingHorizontal: 12 } : {},
|
|
295
302
|
labelStyle,
|
|
296
303
|
{
|
|
297
|
-
color:
|
|
304
|
+
color: labelColor || placeholder,
|
|
298
305
|
opacity: hasActiveOutline ? labeled : 1,
|
|
299
306
|
},
|
|
300
307
|
], numberOfLines: 1 }, label))) : null,
|
|
@@ -302,7 +309,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
|
|
|
302
309
|
...leftIconStyle,
|
|
303
310
|
marginLeft: type === "solid" ? 16 : 0,
|
|
304
311
|
} })) : null,
|
|
305
|
-
React.createElement(NativeTextInput, { value: formatDate(), placeholder: label ? placeholder1 : placeholder, editable: !disabled, placeholderTextColor: placeholderColor, selectionColor: activeColor, onFocus: _handleFocus, onBlur: _handleBlur, underlineColorAndroid: "transparent", style: inputStyles, ...props })),
|
|
312
|
+
React.createElement(NativeTextInput, { value: formatDate(), placeholder: label ? placeholder1 : placeholder, editable: !disabled, placeholderTextColor: placeholderColor, selectionColor: activeColor, onFocus: _handleFocus, onBlur: _handleBlur, underlineColorAndroid: "transparent", style: [inputStyles, style], ...props })),
|
|
306
313
|
rightIconName ? (React.createElement(Icon, { name: rightIconName, size: ICON_SIZE, color: colors.light, style: {
|
|
307
314
|
position: "absolute",
|
|
308
315
|
right: 16,
|
|
@@ -324,7 +331,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
|
|
|
324
331
|
paddingRight: insets.right,
|
|
325
332
|
},
|
|
326
333
|
] },
|
|
327
|
-
React.createElement(DateTimePicker, { value: getValidDate(), mode: mode, isVisible: pickerVisible, toggleVisibility: toggleVisibility, onChange: (_event, data) => {
|
|
334
|
+
React.createElement(DateTimePicker, { value: getValidDate(), mode: mode, style: inputStyles, isVisible: pickerVisible, toggleVisibility: toggleVisibility, onChange: (_event, data) => {
|
|
328
335
|
toggleVisibility();
|
|
329
336
|
setValue(data);
|
|
330
337
|
onDateChange(data);
|
|
@@ -23,6 +23,7 @@ import DateTimePicker from "./DatePickerComponent";
|
|
|
23
23
|
|
|
24
24
|
import type { Theme } from "../../styles/DefaultTheme";
|
|
25
25
|
import type { IconSlot } from "../../interfaces/Icon";
|
|
26
|
+
import { extractStyles } from "../../utilities";
|
|
26
27
|
|
|
27
28
|
const AnimatedText = Animated.createAnimatedComponent(Text);
|
|
28
29
|
|
|
@@ -47,10 +48,14 @@ type Props = {
|
|
|
47
48
|
mode?: "date" | "time" | "datetime";
|
|
48
49
|
type?: "solid" | "underline";
|
|
49
50
|
label?: string;
|
|
51
|
+
labelSize?: number;
|
|
52
|
+
labelColor: string;
|
|
50
53
|
placeholder?: string;
|
|
51
54
|
leftIconName?: string;
|
|
52
55
|
leftIconMode?: "outset" | "inset";
|
|
53
56
|
rightIconName?: string;
|
|
57
|
+
borderColor?: string;
|
|
58
|
+
borderColorActive?: string;
|
|
54
59
|
} & IconSlot &
|
|
55
60
|
TextInputProps;
|
|
56
61
|
|
|
@@ -84,7 +89,11 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
|
|
|
84
89
|
rightIconName,
|
|
85
90
|
leftIconMode = "inset",
|
|
86
91
|
label,
|
|
92
|
+
labelSize,
|
|
93
|
+
labelColor,
|
|
87
94
|
placeholder,
|
|
95
|
+
borderColor: inputBorderColor,
|
|
96
|
+
borderColorActive: inputBorderColorActive,
|
|
88
97
|
...props
|
|
89
98
|
}) => {
|
|
90
99
|
const [value, setValue] = React.useState<any>(date || defaultValue);
|
|
@@ -106,6 +115,8 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
|
|
|
106
115
|
width: number;
|
|
107
116
|
}>({ measured: false, width: 0 });
|
|
108
117
|
|
|
118
|
+
const { textStyles } = extractStyles(style);
|
|
119
|
+
|
|
109
120
|
const getValidDate = (): Date => {
|
|
110
121
|
if (!value) {
|
|
111
122
|
return new Date();
|
|
@@ -211,8 +222,11 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
|
|
|
211
222
|
|
|
212
223
|
const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
|
|
213
224
|
const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);
|
|
214
|
-
const MAXIMIZED_LABEL_FONT_SIZE =
|
|
215
|
-
|
|
225
|
+
const MAXIMIZED_LABEL_FONT_SIZE =
|
|
226
|
+
textStyles?.fontSize || typography.subtitle1.fontSize;
|
|
227
|
+
const MINIMIZED_LABEL_FONT_SIZE = labelSize
|
|
228
|
+
? labelSize
|
|
229
|
+
: typography.caption.fontSize;
|
|
216
230
|
|
|
217
231
|
const hasActiveOutline = focused;
|
|
218
232
|
|
|
@@ -233,9 +247,9 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
|
|
|
233
247
|
underlineColor = "transparent";
|
|
234
248
|
backgroundColor = colors.divider;
|
|
235
249
|
} else {
|
|
236
|
-
activeColor = colors.primary;
|
|
237
|
-
placeholderColor = borderColor = colors.light;
|
|
238
|
-
underlineColor = colors.light;
|
|
250
|
+
activeColor = inputBorderColorActive || colors.primary;
|
|
251
|
+
placeholderColor = borderColor = inputBorderColor || colors.light;
|
|
252
|
+
underlineColor = inputBorderColor || colors.light;
|
|
239
253
|
backgroundColor = colors.background;
|
|
240
254
|
}
|
|
241
255
|
|
|
@@ -259,6 +273,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
|
|
|
259
273
|
borderTopRightRadius: roundness,
|
|
260
274
|
paddingBottom: 12,
|
|
261
275
|
marginTop: 16,
|
|
276
|
+
backgroundColor,
|
|
262
277
|
};
|
|
263
278
|
} else {
|
|
264
279
|
containerStyle = {
|
|
@@ -306,6 +321,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
|
|
|
306
321
|
const labelStyle = {
|
|
307
322
|
...typography.subtitle1,
|
|
308
323
|
top: type === "solid" ? 16 : 0,
|
|
324
|
+
fontFamily: textStyles?.fontFamily,
|
|
309
325
|
left:
|
|
310
326
|
leftIconName && leftIconMode === "inset"
|
|
311
327
|
? ICON_SIZE + (type === "solid" ? 16 : 12)
|
|
@@ -351,21 +367,20 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
|
|
|
351
367
|
styles.input,
|
|
352
368
|
inputStyle,
|
|
353
369
|
type === "solid" ? { marginHorizontal: 12 } : {},
|
|
370
|
+
textStyles,
|
|
354
371
|
];
|
|
355
372
|
|
|
356
373
|
// const render = (props) => <NativeTextInput {...props} />;
|
|
357
374
|
|
|
358
375
|
return (
|
|
359
|
-
<View style={[styles.container
|
|
376
|
+
<View style={[styles.container]}>
|
|
360
377
|
<Touchable disabled={disabled} onPress={toggleVisibility}>
|
|
361
378
|
<View pointerEvents="none">
|
|
362
|
-
<View style={[styles.container
|
|
379
|
+
<View style={[styles.container]}>
|
|
363
380
|
{leftIconName && leftIconMode === "outset" ? (
|
|
364
381
|
<Icon {...leftIconProps} style={leftIconStyle} />
|
|
365
382
|
) : null}
|
|
366
|
-
<View
|
|
367
|
-
style={[containerStyle, style ? { height: style.height } : {}]}
|
|
368
|
-
>
|
|
383
|
+
<View style={[containerStyle, style]}>
|
|
369
384
|
{type === "underline" ? (
|
|
370
385
|
// When type === 'flat', render an underline
|
|
371
386
|
<Animated.View
|
|
@@ -406,7 +421,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
|
|
|
406
421
|
type === "solid" ? { paddingHorizontal: 12 } : {},
|
|
407
422
|
labelStyle,
|
|
408
423
|
{
|
|
409
|
-
color: colors.light,
|
|
424
|
+
color: labelColor || colors.light,
|
|
410
425
|
opacity: labeled.interpolate({
|
|
411
426
|
inputRange: [0, 1],
|
|
412
427
|
outputRange: [hasActiveOutline ? 1 : 0, 0],
|
|
@@ -423,7 +438,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
|
|
|
423
438
|
type === "solid" ? { paddingHorizontal: 12 } : {},
|
|
424
439
|
labelStyle,
|
|
425
440
|
{
|
|
426
|
-
color:
|
|
441
|
+
color: labelColor || placeholder,
|
|
427
442
|
opacity: hasActiveOutline ? labeled : 1,
|
|
428
443
|
},
|
|
429
444
|
]}
|
|
@@ -453,7 +468,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
|
|
|
453
468
|
onFocus={_handleFocus}
|
|
454
469
|
onBlur={_handleBlur}
|
|
455
470
|
underlineColorAndroid={"transparent"}
|
|
456
|
-
style={inputStyles}
|
|
471
|
+
style={[inputStyles, style]}
|
|
457
472
|
{...props}
|
|
458
473
|
/>
|
|
459
474
|
</View>
|
|
@@ -497,6 +512,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
|
|
|
497
512
|
<DateTimePicker
|
|
498
513
|
value={getValidDate()}
|
|
499
514
|
mode={mode}
|
|
515
|
+
style={inputStyles}
|
|
500
516
|
isVisible={pickerVisible}
|
|
501
517
|
toggleVisibility={toggleVisibility}
|
|
502
518
|
onChange={(_event: any, data: any) => {
|