@draftbit/core 46.7.9-9ade8f.2 → 46.7.9-b47217.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/DatePicker/DatePicker.js +0 -6
- package/lib/commonjs/components/DeprecatedFAB.js +21 -3
- package/lib/commonjs/components/Elevation.js +2 -14
- package/lib/commonjs/components/Picker/Picker.js +1 -7
- package/lib/commonjs/mappings/DatePicker.js +1 -6
- package/lib/commonjs/mappings/DatePickerModal.js +145 -0
- package/lib/commonjs/mappings/Picker.js +0 -5
- package/lib/commonjs/styles/overlay.js +1 -3
- package/lib/module/components/AnimatedCircularProgress.js +1 -13
- package/lib/module/components/DatePicker/DatePicker.js +1 -7
- package/lib/module/components/Picker/Picker.js +2 -8
- package/lib/module/constants.js +0 -1
- package/lib/module/mappings/DatePicker.js +2 -7
- package/lib/module/mappings/DatePickerModal.js +139 -0
- package/lib/module/mappings/Picker.js +1 -6
- package/lib/typescript/src/components/DatePicker/DatePicker.d.ts +0 -1
- package/lib/typescript/src/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/lib/typescript/src/components/Picker/Picker.d.ts +0 -1
- package/lib/typescript/src/components/Picker/Picker.d.ts.map +1 -1
- package/lib/typescript/src/mappings/DatePicker.d.ts +0 -10
- package/lib/typescript/src/mappings/DatePicker.d.ts.map +1 -1
- package/lib/typescript/src/mappings/DatePickerModal.d.ts +241 -0
- package/lib/typescript/src/mappings/DatePickerModal.d.ts.map +1 -0
- package/lib/typescript/src/mappings/Picker.d.ts +0 -10
- package/lib/typescript/src/mappings/Picker.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/components/DatePicker/DatePicker.js +2 -7
- package/src/components/DatePicker/DatePicker.tsx +0 -9
- package/src/components/Picker/Picker.js +2 -7
- package/src/components/Picker/Picker.tsx +1 -9
- package/src/mappings/DatePicker.js +1 -6
- package/src/mappings/DatePicker.ts +0 -6
- package/src/mappings/DatePickerModal.js +146 -0
- package/src/mappings/DatePickerModal.ts +168 -0
- package/src/mappings/Picker.js +1 -6
- package/src/mappings/Picker.ts +0 -6
|
@@ -48,7 +48,6 @@ const DatePicker = _ref => {
|
|
|
48
48
|
placeholder,
|
|
49
49
|
borderColor: inputBorderColor,
|
|
50
50
|
borderColorActive: inputBorderColorActive,
|
|
51
|
-
autoDismissKeyboard = true,
|
|
52
51
|
...props
|
|
53
52
|
} = _ref;
|
|
54
53
|
const [value, setValue] = React.useState(date || defaultValue);
|
|
@@ -144,11 +143,6 @@ const DatePicker = _ref => {
|
|
|
144
143
|
clearTimeout(_showPlaceholder());
|
|
145
144
|
};
|
|
146
145
|
}, [focused, label, placeholder]);
|
|
147
|
-
React.useEffect(() => {
|
|
148
|
-
if (pickerVisible && autoDismissKeyboard) {
|
|
149
|
-
_reactNative.Keyboard.dismiss();
|
|
150
|
-
}
|
|
151
|
-
}, [pickerVisible, autoDismissKeyboard]);
|
|
152
146
|
const _handleFocus = () => {
|
|
153
147
|
if (disabled) {
|
|
154
148
|
return;
|
|
@@ -14,7 +14,6 @@ var _theming = require("../theming");
|
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
15
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
16
16
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
18
17
|
const FAB = _ref => {
|
|
19
18
|
let {
|
|
20
19
|
Icon,
|
|
@@ -106,7 +105,8 @@ const FAB = _ref => {
|
|
|
106
105
|
style: [{
|
|
107
106
|
elevation
|
|
108
107
|
}, style]
|
|
109
|
-
}, /*#__PURE__*/React.createElement(_reactNative.Pressable,
|
|
108
|
+
}, /*#__PURE__*/React.createElement(_reactNative.Pressable, {
|
|
109
|
+
...rest,
|
|
110
110
|
onPress: onPress,
|
|
111
111
|
accessibilityState: {
|
|
112
112
|
disabled
|
|
@@ -114,7 +114,7 @@ const FAB = _ref => {
|
|
|
114
114
|
accessibilityRole: "button",
|
|
115
115
|
disabled: disabled || loading,
|
|
116
116
|
style: buttonStyles
|
|
117
|
-
}
|
|
117
|
+
}, /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
118
118
|
style: styles.content
|
|
119
119
|
}, icon && loading !== true ? /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
120
120
|
style: iconStyle
|
|
@@ -154,4 +154,22 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
154
154
|
}
|
|
155
155
|
});
|
|
156
156
|
var _default = (0, _theming.withTheme)(FAB);
|
|
157
|
+
exports.default = _default;ow",
|
|
158
|
+
alignItems: "center",
|
|
159
|
+
justifyContent: "center"
|
|
160
|
+
},
|
|
161
|
+
icon: {
|
|
162
|
+
alignItems: "center",
|
|
163
|
+
justifyContent: "center",
|
|
164
|
+
width: _Config.default.buttonIconSize
|
|
165
|
+
},
|
|
166
|
+
fixed: {
|
|
167
|
+
left: 0,
|
|
168
|
+
right: 0,
|
|
169
|
+
bottom: 0,
|
|
170
|
+
height: 64,
|
|
171
|
+
borderRadius: 0
|
|
172
|
+
}
|
|
173
|
+
});
|
|
174
|
+
var _default = (0, _theming.withTheme)(FAB);
|
|
157
175
|
exports.default = _default;
|
|
@@ -11,6 +11,7 @@ var _theming = require("../theming");
|
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
12
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
13
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
14
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
14
15
|
/* directly copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx#L62 */
|
|
15
16
|
const Elevation = _ref => {
|
|
16
17
|
let {
|
|
@@ -27,24 +28,11 @@ const Elevation = _ref => {
|
|
|
27
28
|
colors
|
|
28
29
|
} = theme;
|
|
29
30
|
const borderRadius = radius;
|
|
30
|
-
return /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
|
|
31
|
-
...rest,
|
|
31
|
+
return /*#__PURE__*/React.createElement(_reactNative.Animated.View, _extends({}, rest, {
|
|
32
32
|
style: [{
|
|
33
33
|
borderRadius,
|
|
34
34
|
backgroundColor: colors.surface
|
|
35
35
|
}, elevation ? (0, _shadow.default)(elevation) : null, style]
|
|
36
|
-
}, /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
37
|
-
style: {
|
|
38
|
-
overflow: "hidden",
|
|
39
|
-
borderRadius
|
|
40
|
-
}
|
|
41
|
-
}, children));
|
|
42
|
-
};
|
|
43
|
-
var _default = (0, _theming.withTheme)(Elevation);
|
|
44
|
-
exports.default = _default;
|
|
45
|
-
borderRadius,
|
|
46
|
-
backgroundColor: colors.surface
|
|
47
|
-
}, elevation ? (0, _shadow.default)(elevation) : null, style]
|
|
48
36
|
}), /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
49
37
|
style: {
|
|
50
38
|
overflow: "hidden",
|
|
@@ -65,8 +65,7 @@ const Picker = _ref => {
|
|
|
65
65
|
leftIconName,
|
|
66
66
|
placeholderTextColor = unstyledColor,
|
|
67
67
|
rightIconName,
|
|
68
|
-
type = "solid"
|
|
69
|
-
autoDismissKeyboard = true
|
|
68
|
+
type = "solid"
|
|
70
69
|
} = _ref;
|
|
71
70
|
const androidPickerRef = React.useRef(undefined);
|
|
72
71
|
const [internalValue, setInternalValue] = React.useState(value || defaultValue);
|
|
@@ -90,11 +89,6 @@ const Picker = _ref => {
|
|
|
90
89
|
androidPickerRef === null || androidPickerRef === void 0 ? void 0 : (_androidPickerRef$cur = androidPickerRef.current) === null || _androidPickerRef$cur === void 0 ? void 0 : _androidPickerRef$cur.focus();
|
|
91
90
|
}
|
|
92
91
|
}, [pickerVisible, androidPickerRef]);
|
|
93
|
-
React.useEffect(() => {
|
|
94
|
-
if (pickerVisible && autoDismissKeyboard) {
|
|
95
|
-
_reactNative.Keyboard.dismiss();
|
|
96
|
-
}
|
|
97
|
-
}, [pickerVisible, autoDismissKeyboard]);
|
|
98
92
|
const normalizedOptions = normalizeOptions(options);
|
|
99
93
|
const pickerOptions = placeholder ? [{
|
|
100
94
|
value: placeholder,
|
|
@@ -169,12 +169,7 @@ const SEED_DATA = [{
|
|
|
169
169
|
editable: true,
|
|
170
170
|
required: true,
|
|
171
171
|
group: _types.GROUPS.basic
|
|
172
|
-
}
|
|
173
|
-
autoDismissKeyboard: (0, _types.createStaticBoolProp)({
|
|
174
|
-
label: "Auto dismiss keyboard",
|
|
175
|
-
description: "Automatically dismiss keyboard when DatePicker is opened",
|
|
176
|
-
defaultValue: true
|
|
177
|
-
})
|
|
172
|
+
}
|
|
178
173
|
}
|
|
179
174
|
}];
|
|
180
175
|
exports.SEED_DATA = SEED_DATA;
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.SEED_DATA = void 0;
|
|
7
|
+
var _types = require("@draftbit/types");
|
|
8
|
+
/**
|
|
9
|
+
* Maps react-native-paper-dates DatePickerModal in modes: "single" and "multiple"
|
|
10
|
+
* Cannot map mode "range" because it relies on 2 fieldNames (startDate and endDate)
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
const SHARED_SEED_DATA = {
|
|
14
|
+
tag: "DatePickerModal",
|
|
15
|
+
packageName: "react-native-paper-dates",
|
|
16
|
+
triggers: [_types.Triggers.OnDismiss, _types.Triggers.OnConfirm, _types.Triggers.OnChange],
|
|
17
|
+
category: _types.COMPONENT_TYPES.input,
|
|
18
|
+
StylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.Background, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position]
|
|
19
|
+
};
|
|
20
|
+
const SHARED_SEED_DATA_PROPS = {
|
|
21
|
+
onDismiss: (0, _types.createActionProp)({
|
|
22
|
+
label: "On Dismiss",
|
|
23
|
+
description: "Called when date picker dimissed",
|
|
24
|
+
required: true
|
|
25
|
+
}),
|
|
26
|
+
locale: (0, _types.createTextProp)({
|
|
27
|
+
label: "Locale",
|
|
28
|
+
description: "A locale can be composed of both a base language, the country (territory) of use, and possibly codeset (which is usually assumed). For example, German is de",
|
|
29
|
+
defaultValue: "en",
|
|
30
|
+
required: true
|
|
31
|
+
}),
|
|
32
|
+
visible: (0, _types.createBoolProp)({
|
|
33
|
+
label: "Visible",
|
|
34
|
+
description: "Flag indicating if the component should be displayed",
|
|
35
|
+
required: true
|
|
36
|
+
}),
|
|
37
|
+
label: (0, _types.createTextProp)({
|
|
38
|
+
label: "Label",
|
|
39
|
+
description: "The label used as the header in the component",
|
|
40
|
+
defaultValue: "Select date"
|
|
41
|
+
}),
|
|
42
|
+
saveLabel: (0, _types.createTextProp)({
|
|
43
|
+
label: "Save Label",
|
|
44
|
+
description: "Label used to confirm a date selection",
|
|
45
|
+
defaultValue: "Save"
|
|
46
|
+
}),
|
|
47
|
+
saveLabelDisabled: (0, _types.createStaticBoolProp)({
|
|
48
|
+
label: "Disable Save Label",
|
|
49
|
+
description: "Flag indicating if the save label should be disabled and unable to receive events"
|
|
50
|
+
}),
|
|
51
|
+
uppercase: (0, _types.createStaticBoolProp)({
|
|
52
|
+
label: "Uppercase",
|
|
53
|
+
description: "Flag indicating if the text in the component should be uppercase",
|
|
54
|
+
defaultValue: true
|
|
55
|
+
}),
|
|
56
|
+
startYear: (0, _types.createStaticNumberProp)({
|
|
57
|
+
label: "Start Year",
|
|
58
|
+
description: "The start year when the component is rendered",
|
|
59
|
+
required: false,
|
|
60
|
+
defaultValue: 1800
|
|
61
|
+
}),
|
|
62
|
+
endYear: (0, _types.createStaticNumberProp)({
|
|
63
|
+
label: "End Year",
|
|
64
|
+
description: "The end year when the component is rendered",
|
|
65
|
+
required: false,
|
|
66
|
+
defaultValue: 2200
|
|
67
|
+
})
|
|
68
|
+
};
|
|
69
|
+
const SEED_DATA = [{
|
|
70
|
+
...SHARED_SEED_DATA,
|
|
71
|
+
name: "Date Picker Modal",
|
|
72
|
+
description: "Date Picker modal for date selection",
|
|
73
|
+
props: {
|
|
74
|
+
...SHARED_SEED_DATA_PROPS,
|
|
75
|
+
onConfirm: (0, _types.createActionProp)({
|
|
76
|
+
label: "On Confirm",
|
|
77
|
+
description: "Called when date selected and confirmed",
|
|
78
|
+
required: true
|
|
79
|
+
}),
|
|
80
|
+
onChange: (0, _types.createActionProp)({
|
|
81
|
+
label: "On Change",
|
|
82
|
+
description: "Called when date selection changes"
|
|
83
|
+
}),
|
|
84
|
+
mode: (0, _types.createTextEnumProp)({
|
|
85
|
+
label: "Mode",
|
|
86
|
+
description: "The selection mode of the date picker",
|
|
87
|
+
required: true,
|
|
88
|
+
options: ["single"],
|
|
89
|
+
editable: false,
|
|
90
|
+
defaultValue: "single",
|
|
91
|
+
formType: _types.FORM_TYPES.flatArray
|
|
92
|
+
}),
|
|
93
|
+
fieldName: (0, _types.createFieldNameProp)({
|
|
94
|
+
defaultValue: "date",
|
|
95
|
+
handlerPropName: "onConfirm",
|
|
96
|
+
valuePropName: "date"
|
|
97
|
+
})
|
|
98
|
+
}
|
|
99
|
+
}, {
|
|
100
|
+
...SHARED_SEED_DATA,
|
|
101
|
+
name: "Multiple Date Picker Modal",
|
|
102
|
+
description: "Date Picker modal for multiple date selection",
|
|
103
|
+
props: {
|
|
104
|
+
...SHARED_SEED_DATA_PROPS,
|
|
105
|
+
onConfirm: (0, _types.createActionProp)({
|
|
106
|
+
label: "On Confirm",
|
|
107
|
+
description: "Called when dates selected and confirmed",
|
|
108
|
+
required: true
|
|
109
|
+
}),
|
|
110
|
+
onChange: (0, _types.createActionProp)({
|
|
111
|
+
label: "On Change",
|
|
112
|
+
description: "Called when dates selection changes"
|
|
113
|
+
}),
|
|
114
|
+
mode: (0, _types.createTextEnumProp)({
|
|
115
|
+
label: "Mode",
|
|
116
|
+
description: "The selection mode of the date picker",
|
|
117
|
+
required: true,
|
|
118
|
+
options: ["multiple"],
|
|
119
|
+
editable: false,
|
|
120
|
+
defaultValue: "multiple",
|
|
121
|
+
formType: _types.FORM_TYPES.flatArray
|
|
122
|
+
}),
|
|
123
|
+
moreLabel: (0, _types.createTextProp)({
|
|
124
|
+
label: "More Label",
|
|
125
|
+
description: "The label used display when multiple dates have been selected in the component",
|
|
126
|
+
defaultValue: "More"
|
|
127
|
+
}),
|
|
128
|
+
startLabel: (0, _types.createTextProp)({
|
|
129
|
+
label: "Start Label",
|
|
130
|
+
description: "The label used as the prefix to the starting date in the component",
|
|
131
|
+
defaultValue: "Start"
|
|
132
|
+
}),
|
|
133
|
+
endLabel: (0, _types.createTextProp)({
|
|
134
|
+
label: "End Label",
|
|
135
|
+
description: "The label used as the suffix to the ending date in the component",
|
|
136
|
+
defaultValue: "End"
|
|
137
|
+
}),
|
|
138
|
+
fieldName: (0, _types.createFieldNameProp)({
|
|
139
|
+
defaultValue: "dates",
|
|
140
|
+
handlerPropName: "onConfirm",
|
|
141
|
+
valuePropName: "dates"
|
|
142
|
+
})
|
|
143
|
+
}
|
|
144
|
+
}];
|
|
145
|
+
exports.SEED_DATA = SEED_DATA;
|
|
@@ -142,11 +142,6 @@ const SEED_DATA = [{
|
|
|
142
142
|
}),
|
|
143
143
|
iconColor: (0, _types.createColorProp)({
|
|
144
144
|
label: "Icon Color"
|
|
145
|
-
}),
|
|
146
|
-
autoDismissKeyboard: (0, _types.createStaticBoolProp)({
|
|
147
|
-
label: "Auto dismiss keyboard",
|
|
148
|
-
description: "Automatically dismiss keyboard when Picker is opened",
|
|
149
|
-
defaultValue: true
|
|
150
145
|
})
|
|
151
146
|
},
|
|
152
147
|
layout: {}
|
|
@@ -15,7 +15,6 @@ function overlay(elevation) {
|
|
|
15
15
|
let surfaceColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _DarkTheme.default.colors.surface;
|
|
16
16
|
if (isAnimatedValue(elevation)) {
|
|
17
17
|
const inputRange = [0, 1, 2, 3, 8, 24];
|
|
18
|
-
|
|
19
18
|
// @ts-expect-error: TS doesn't seem to refine the type correctly
|
|
20
19
|
return elevation.interpolate({
|
|
21
20
|
inputRange,
|
|
@@ -24,7 +23,6 @@ function overlay(elevation) {
|
|
|
24
23
|
})
|
|
25
24
|
});
|
|
26
25
|
}
|
|
27
|
-
|
|
28
26
|
// @ts-expect-error: TS doesn't seem to refine the type correctly
|
|
29
27
|
return calculateColor(surfaceColor, elevation);
|
|
30
28
|
}
|
|
@@ -65,4 +63,4 @@ const elevationOverlayTransparency = {
|
|
|
65
63
|
22: 15.72,
|
|
66
64
|
23: 15.84,
|
|
67
65
|
24: 16
|
|
68
|
-
};
|
|
66
|
+
};};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
1
2
|
import * as React from "react";
|
|
2
3
|
import { Animated, Easing } from "react-native";
|
|
3
4
|
import CircularProgress from "./CircularProgress";
|
|
@@ -45,19 +46,6 @@ const AnimatedCircularProgress = _ref => {
|
|
|
45
46
|
React.useEffect(() => {
|
|
46
47
|
animate();
|
|
47
48
|
}, [fill, animate]);
|
|
48
|
-
return /*#__PURE__*/React.createElement(AnimatedProgress, {
|
|
49
|
-
...other,
|
|
50
|
-
style: other.style,
|
|
51
|
-
childrenContainerStyle: other.childrenContainerStyle,
|
|
52
|
-
fill: fillAnimation,
|
|
53
|
-
tintColor: animateColor()
|
|
54
|
-
});
|
|
55
|
-
};
|
|
56
|
-
export default AnimatedCircularProgress;imation;
|
|
57
|
-
};
|
|
58
|
-
React.useEffect(() => {
|
|
59
|
-
animate();
|
|
60
|
-
}, [fill, animate]);
|
|
61
49
|
return /*#__PURE__*/React.createElement(AnimatedProgress, _extends({}, other, {
|
|
62
50
|
style: other.style,
|
|
63
51
|
childrenContainerStyle: other.childrenContainerStyle,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
import { View, Animated, Text, StyleSheet, I18nManager, TextInput as NativeTextInput
|
|
3
|
+
import { View, Animated, Text, StyleSheet, I18nManager, TextInput as NativeTextInput } from "react-native";
|
|
4
4
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
5
5
|
import dateFormat from "dateformat";
|
|
6
6
|
import { withTheme } from "../../theming";
|
|
@@ -39,7 +39,6 @@ const DatePicker = _ref => {
|
|
|
39
39
|
placeholder,
|
|
40
40
|
borderColor: inputBorderColor,
|
|
41
41
|
borderColorActive: inputBorderColorActive,
|
|
42
|
-
autoDismissKeyboard = true,
|
|
43
42
|
...props
|
|
44
43
|
} = _ref;
|
|
45
44
|
const [value, setValue] = React.useState(date || defaultValue);
|
|
@@ -135,11 +134,6 @@ const DatePicker = _ref => {
|
|
|
135
134
|
clearTimeout(_showPlaceholder());
|
|
136
135
|
};
|
|
137
136
|
}, [focused, label, placeholder]);
|
|
138
|
-
React.useEffect(() => {
|
|
139
|
-
if (pickerVisible && autoDismissKeyboard) {
|
|
140
|
-
Keyboard.dismiss();
|
|
141
|
-
}
|
|
142
|
-
}, [pickerVisible, autoDismissKeyboard]);
|
|
143
137
|
const _handleFocus = () => {
|
|
144
138
|
if (disabled) {
|
|
145
139
|
return;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { View, StyleSheet, Text, Platform, Dimensions
|
|
2
|
+
import { View, StyleSheet, Text, Platform, Dimensions } from "react-native";
|
|
3
3
|
import { omit, pickBy, identity, isObject } from "lodash";
|
|
4
4
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
5
5
|
import { Picker as NativePicker } from "@react-native-picker/picker";
|
|
@@ -56,8 +56,7 @@ const Picker = _ref => {
|
|
|
56
56
|
leftIconName,
|
|
57
57
|
placeholderTextColor = unstyledColor,
|
|
58
58
|
rightIconName,
|
|
59
|
-
type = "solid"
|
|
60
|
-
autoDismissKeyboard = true
|
|
59
|
+
type = "solid"
|
|
61
60
|
} = _ref;
|
|
62
61
|
const androidPickerRef = React.useRef(undefined);
|
|
63
62
|
const [internalValue, setInternalValue] = React.useState(value || defaultValue);
|
|
@@ -81,11 +80,6 @@ const Picker = _ref => {
|
|
|
81
80
|
androidPickerRef === null || androidPickerRef === void 0 ? void 0 : (_androidPickerRef$cur = androidPickerRef.current) === null || _androidPickerRef$cur === void 0 ? void 0 : _androidPickerRef$cur.focus();
|
|
82
81
|
}
|
|
83
82
|
}, [pickerVisible, androidPickerRef]);
|
|
84
|
-
React.useEffect(() => {
|
|
85
|
-
if (pickerVisible && autoDismissKeyboard) {
|
|
86
|
-
Keyboard.dismiss();
|
|
87
|
-
}
|
|
88
|
-
}, [pickerVisible, autoDismissKeyboard]);
|
|
89
83
|
const normalizedOptions = normalizeOptions(options);
|
|
90
84
|
const pickerOptions = placeholder ? [{
|
|
91
85
|
value: placeholder,
|
package/lib/module/constants.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp
|
|
1
|
+
import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp } from "@draftbit/types";
|
|
2
2
|
const SEED_DATA_PROPS = {
|
|
3
3
|
mode: {
|
|
4
4
|
label: "Mode",
|
|
@@ -163,11 +163,6 @@ export const SEED_DATA = [{
|
|
|
163
163
|
editable: true,
|
|
164
164
|
required: true,
|
|
165
165
|
group: GROUPS.basic
|
|
166
|
-
}
|
|
167
|
-
autoDismissKeyboard: createStaticBoolProp({
|
|
168
|
-
label: "Auto dismiss keyboard",
|
|
169
|
-
description: "Automatically dismiss keyboard when DatePicker is opened",
|
|
170
|
-
defaultValue: true
|
|
171
|
-
})
|
|
166
|
+
}
|
|
172
167
|
}
|
|
173
168
|
}];
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { COMPONENT_TYPES, FORM_TYPES, Triggers, StylesPanelSections, createBoolProp, createTextProp, createTextEnumProp, createStaticBoolProp, createStaticNumberProp, createFieldNameProp, createActionProp } from "@draftbit/types";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Maps react-native-paper-dates DatePickerModal in modes: "single" and "multiple"
|
|
5
|
+
* Cannot map mode "range" because it relies on 2 fieldNames (startDate and endDate)
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
const SHARED_SEED_DATA = {
|
|
9
|
+
tag: "DatePickerModal",
|
|
10
|
+
packageName: "react-native-paper-dates",
|
|
11
|
+
triggers: [Triggers.OnDismiss, Triggers.OnConfirm, Triggers.OnChange],
|
|
12
|
+
category: COMPONENT_TYPES.input,
|
|
13
|
+
StylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position]
|
|
14
|
+
};
|
|
15
|
+
const SHARED_SEED_DATA_PROPS = {
|
|
16
|
+
onDismiss: createActionProp({
|
|
17
|
+
label: "On Dismiss",
|
|
18
|
+
description: "Called when date picker dimissed",
|
|
19
|
+
required: true
|
|
20
|
+
}),
|
|
21
|
+
locale: createTextProp({
|
|
22
|
+
label: "Locale",
|
|
23
|
+
description: "A locale can be composed of both a base language, the country (territory) of use, and possibly codeset (which is usually assumed). For example, German is de",
|
|
24
|
+
defaultValue: "en",
|
|
25
|
+
required: true
|
|
26
|
+
}),
|
|
27
|
+
visible: createBoolProp({
|
|
28
|
+
label: "Visible",
|
|
29
|
+
description: "Flag indicating if the component should be displayed",
|
|
30
|
+
required: true
|
|
31
|
+
}),
|
|
32
|
+
label: createTextProp({
|
|
33
|
+
label: "Label",
|
|
34
|
+
description: "The label used as the header in the component",
|
|
35
|
+
defaultValue: "Select date"
|
|
36
|
+
}),
|
|
37
|
+
saveLabel: createTextProp({
|
|
38
|
+
label: "Save Label",
|
|
39
|
+
description: "Label used to confirm a date selection",
|
|
40
|
+
defaultValue: "Save"
|
|
41
|
+
}),
|
|
42
|
+
saveLabelDisabled: createStaticBoolProp({
|
|
43
|
+
label: "Disable Save Label",
|
|
44
|
+
description: "Flag indicating if the save label should be disabled and unable to receive events"
|
|
45
|
+
}),
|
|
46
|
+
uppercase: createStaticBoolProp({
|
|
47
|
+
label: "Uppercase",
|
|
48
|
+
description: "Flag indicating if the text in the component should be uppercase",
|
|
49
|
+
defaultValue: true
|
|
50
|
+
}),
|
|
51
|
+
startYear: createStaticNumberProp({
|
|
52
|
+
label: "Start Year",
|
|
53
|
+
description: "The start year when the component is rendered",
|
|
54
|
+
required: false,
|
|
55
|
+
defaultValue: 1800
|
|
56
|
+
}),
|
|
57
|
+
endYear: createStaticNumberProp({
|
|
58
|
+
label: "End Year",
|
|
59
|
+
description: "The end year when the component is rendered",
|
|
60
|
+
required: false,
|
|
61
|
+
defaultValue: 2200
|
|
62
|
+
})
|
|
63
|
+
};
|
|
64
|
+
export const SEED_DATA = [{
|
|
65
|
+
...SHARED_SEED_DATA,
|
|
66
|
+
name: "Date Picker Modal",
|
|
67
|
+
description: "Date Picker modal for date selection",
|
|
68
|
+
props: {
|
|
69
|
+
...SHARED_SEED_DATA_PROPS,
|
|
70
|
+
onConfirm: createActionProp({
|
|
71
|
+
label: "On Confirm",
|
|
72
|
+
description: "Called when date selected and confirmed",
|
|
73
|
+
required: true
|
|
74
|
+
}),
|
|
75
|
+
onChange: createActionProp({
|
|
76
|
+
label: "On Change",
|
|
77
|
+
description: "Called when date selection changes"
|
|
78
|
+
}),
|
|
79
|
+
mode: createTextEnumProp({
|
|
80
|
+
label: "Mode",
|
|
81
|
+
description: "The selection mode of the date picker",
|
|
82
|
+
required: true,
|
|
83
|
+
options: ["single"],
|
|
84
|
+
editable: false,
|
|
85
|
+
defaultValue: "single",
|
|
86
|
+
formType: FORM_TYPES.flatArray
|
|
87
|
+
}),
|
|
88
|
+
fieldName: createFieldNameProp({
|
|
89
|
+
defaultValue: "date",
|
|
90
|
+
handlerPropName: "onConfirm",
|
|
91
|
+
valuePropName: "date"
|
|
92
|
+
})
|
|
93
|
+
}
|
|
94
|
+
}, {
|
|
95
|
+
...SHARED_SEED_DATA,
|
|
96
|
+
name: "Multiple Date Picker Modal",
|
|
97
|
+
description: "Date Picker modal for multiple date selection",
|
|
98
|
+
props: {
|
|
99
|
+
...SHARED_SEED_DATA_PROPS,
|
|
100
|
+
onConfirm: createActionProp({
|
|
101
|
+
label: "On Confirm",
|
|
102
|
+
description: "Called when dates selected and confirmed",
|
|
103
|
+
required: true
|
|
104
|
+
}),
|
|
105
|
+
onChange: createActionProp({
|
|
106
|
+
label: "On Change",
|
|
107
|
+
description: "Called when dates selection changes"
|
|
108
|
+
}),
|
|
109
|
+
mode: createTextEnumProp({
|
|
110
|
+
label: "Mode",
|
|
111
|
+
description: "The selection mode of the date picker",
|
|
112
|
+
required: true,
|
|
113
|
+
options: ["multiple"],
|
|
114
|
+
editable: false,
|
|
115
|
+
defaultValue: "multiple",
|
|
116
|
+
formType: FORM_TYPES.flatArray
|
|
117
|
+
}),
|
|
118
|
+
moreLabel: createTextProp({
|
|
119
|
+
label: "More Label",
|
|
120
|
+
description: "The label used display when multiple dates have been selected in the component",
|
|
121
|
+
defaultValue: "More"
|
|
122
|
+
}),
|
|
123
|
+
startLabel: createTextProp({
|
|
124
|
+
label: "Start Label",
|
|
125
|
+
description: "The label used as the prefix to the starting date in the component",
|
|
126
|
+
defaultValue: "Start"
|
|
127
|
+
}),
|
|
128
|
+
endLabel: createTextProp({
|
|
129
|
+
label: "End Label",
|
|
130
|
+
description: "The label used as the suffix to the ending date in the component",
|
|
131
|
+
defaultValue: "End"
|
|
132
|
+
}),
|
|
133
|
+
fieldName: createFieldNameProp({
|
|
134
|
+
defaultValue: "dates",
|
|
135
|
+
handlerPropName: "onConfirm",
|
|
136
|
+
valuePropName: "dates"
|
|
137
|
+
})
|
|
138
|
+
}
|
|
139
|
+
}];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME, createIconSizeProp, createColorProp, StylesPanelSections
|
|
1
|
+
import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME, createIconSizeProp, createColorProp, StylesPanelSections } from "@draftbit/types";
|
|
2
2
|
const SEED_DATA_PROPS = {
|
|
3
3
|
label: {
|
|
4
4
|
group: GROUPS.data,
|
|
@@ -136,11 +136,6 @@ export const SEED_DATA = [{
|
|
|
136
136
|
}),
|
|
137
137
|
iconColor: createColorProp({
|
|
138
138
|
label: "Icon Color"
|
|
139
|
-
}),
|
|
140
|
-
autoDismissKeyboard: createStaticBoolProp({
|
|
141
|
-
label: "Auto dismiss keyboard",
|
|
142
|
-
description: "Automatically dismiss keyboard when Picker is opened",
|
|
143
|
-
defaultValue: true
|
|
144
139
|
})
|
|
145
140
|
},
|
|
146
141
|
layout: {}
|
|
@@ -23,7 +23,6 @@ declare type Props = {
|
|
|
23
23
|
rightIconName?: string;
|
|
24
24
|
borderColor?: string;
|
|
25
25
|
borderColorActive?: string;
|
|
26
|
-
autoDismissKeyboard?: boolean;
|
|
27
26
|
} & IconSlot & TextInputProps;
|
|
28
27
|
declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props>, "theme"> & {
|
|
29
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,EACT,SAAS,EACT,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,EACT,SAAS,EACT,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,GAAG,SAAS,CAAC,GAAG;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,KAAK,EAAE,KAAK,CAAC;IAMb,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,CAAC,EAAE,MAAM,CAAC;IACpB,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;;;;AA+fjB,wBAAqC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Picker/Picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,SAAS,EACT,SAAS,
|
|
1
|
+
{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Picker/Picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,SAAS,EACT,SAAS,EAEV,MAAM,cAAc,CAAC;AAStB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAQtD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,oBAAY,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,GAAG,MAAM,EAAE,CAAC;IACnC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CACxB,CAAC;;;;AAiaF,wBAAiC"}
|
|
@@ -18,16 +18,6 @@ export declare const SEED_DATA: {
|
|
|
18
18
|
required: boolean;
|
|
19
19
|
group: string;
|
|
20
20
|
};
|
|
21
|
-
autoDismissKeyboard: {
|
|
22
|
-
label: string;
|
|
23
|
-
description: string;
|
|
24
|
-
formType: string;
|
|
25
|
-
propType: string;
|
|
26
|
-
defaultValue: boolean;
|
|
27
|
-
editable: boolean;
|
|
28
|
-
required: boolean;
|
|
29
|
-
group: string;
|
|
30
|
-
};
|
|
31
21
|
mode: {
|
|
32
22
|
label: string;
|
|
33
23
|
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":"AA+JA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BrB,CAAC"}
|