@draftbit/core 46.4.4-11985a.2 → 46.4.4-1a94b9.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/Container.js +5 -17
- package/lib/commonjs/components/DatePicker/DatePicker.js +18 -8
- package/lib/commonjs/components/Picker/Picker.js +5 -5
- package/lib/commonjs/components/Stepper.js +8 -3
- package/lib/commonjs/components/Text.js +6 -2
- package/lib/commonjs/components/TextField.js +5 -1
- package/lib/commonjs/index.js +0 -38
- package/lib/commonjs/mappings/DatePicker.js +13 -0
- package/lib/commonjs/mappings/Stepper.js +1 -1
- package/lib/commonjs/mappings/TextField.js +1 -1
- package/lib/commonjs/mappings/TextInput.js +1 -1
- package/lib/commonjs/utilities.js +2 -2
- package/lib/module/components/Accordion/AccordionItem.js +5 -26
- package/lib/module/components/DatePicker/DatePicker.js +25 -15
- package/lib/module/components/Image.js +3 -18
- package/lib/module/components/Picker/Picker.js +2 -2
- package/lib/module/components/Picker/PickerComponent.web.js +5 -23
- package/lib/module/components/ScreenContainer.js +5 -22
- package/lib/module/components/Stepper.js +7 -3
- package/lib/module/components/Text.js +6 -2
- package/lib/module/components/TextField.js +5 -1
- package/lib/module/constants.js +0 -1
- package/lib/module/index.js +0 -1
- package/lib/module/mappings/DatePicker.js +14 -1
- package/lib/module/mappings/Stepper.js +2 -2
- package/lib/module/mappings/TextField.js +1 -1
- package/lib/module/mappings/TextInput.js +1 -1
- package/lib/module/utilities.js +3 -3
- package/lib/typescript/src/components/DatePicker/DatePicker.d.ts +4 -0
- package/lib/typescript/src/components/Stepper.d.ts +1 -2
- package/lib/typescript/src/components/Text.d.ts +2 -1
- package/lib/typescript/src/components/TextField.d.ts +2 -1
- package/lib/typescript/src/index.d.ts +0 -1
- package/lib/typescript/src/mappings/DatePicker.d.ts +42 -0
- package/lib/typescript/src/mappings/TextField.d.ts +2 -2
- package/lib/typescript/src/mappings/TextInput.d.ts +1 -1
- package/lib/typescript/src/utilities.d.ts +3 -3
- package/package.json +3 -3
- package/src/components/DatePicker/DatePicker.js +14 -8
- package/src/components/DatePicker/DatePicker.tsx +23 -7
- package/src/components/Picker/Picker.js +1 -1
- package/src/components/Picker/Picker.tsx +2 -2
- package/src/components/Stepper.js +5 -3
- package/src/components/Stepper.tsx +5 -5
- package/src/components/Text.js +8 -2
- package/src/components/Text.tsx +6 -1
- package/src/components/TextField.js +6 -1
- package/src/components/TextField.tsx +7 -1
- package/src/index.js +0 -1
- package/src/index.tsx +0 -9
- package/src/mappings/DatePicker.js +21 -1
- package/src/mappings/DatePicker.ts +23 -0
- package/src/mappings/Stepper.js +5 -2
- package/src/mappings/Stepper.ts +5 -1
- package/src/mappings/TextField.js +1 -1
- package/src/mappings/TextField.ts +1 -1
- package/src/mappings/TextInput.js +1 -1
- package/src/mappings/TextInput.ts +1 -1
- package/src/utilities.js +2 -5
- package/src/utilities.ts +2 -13
- package/lib/commonjs/components/Table/Table.js +0 -35
- package/lib/commonjs/components/Table/TableCell.js +0 -50
- package/lib/commonjs/components/Table/TableHeader.js +0 -41
- package/lib/commonjs/components/Table/TablePaginator.js +0 -17
- package/lib/commonjs/components/Table/TableRow.js +0 -47
- package/lib/commonjs/components/Table/TableTitle.js +0 -60
- package/lib/commonjs/components/Table/index.js +0 -55
- package/lib/commonjs/mappings/Table.js +0 -102
- package/lib/module/components/Table/Table.js +0 -23
- package/lib/module/components/Table/TableCell.js +0 -37
- package/lib/module/components/Table/TableHeader.js +0 -27
- package/lib/module/components/Table/TablePaginator.js +0 -6
- package/lib/module/components/Table/TableRow.js +0 -33
- package/lib/module/components/Table/TableTitle.js +0 -47
- package/lib/module/components/Table/index.js +0 -6
- package/lib/module/mappings/Table.js +0 -93
- package/lib/typescript/src/components/Table/Table.d.ts +0 -8
- package/lib/typescript/src/components/Table/TableCell.d.ts +0 -10
- package/lib/typescript/src/components/Table/TableHeader.d.ts +0 -12
- package/lib/typescript/src/components/Table/TablePaginator.d.ts +0 -3
- package/lib/typescript/src/components/Table/TableRow.d.ts +0 -12
- package/lib/typescript/src/components/Table/TableTitle.d.ts +0 -12
- package/lib/typescript/src/components/Table/index.d.ts +0 -6
- package/lib/typescript/src/mappings/Table.d.ts +0 -148
- package/src/components/Table/Table.js +0 -10
- package/src/components/Table/Table.tsx +0 -22
- package/src/components/Table/TableCell.js +0 -21
- package/src/components/Table/TableCell.tsx +0 -44
- package/src/components/Table/TableHeader.js +0 -11
- package/src/components/Table/TableHeader.tsx +0 -28
- package/src/components/Table/TablePaginator.js +0 -5
- package/src/components/Table/TablePaginator.tsx +0 -10
- package/src/components/Table/TableRow.js +0 -16
- package/src/components/Table/TableRow.tsx +0 -31
- package/src/components/Table/TableTitle.js +0 -28
- package/src/components/Table/TableTitle.tsx +0 -58
- package/src/components/Table/index.js +0 -6
- package/src/components/Table/index.tsx +0 -6
- package/src/mappings/Table.js +0 -136
- package/src/mappings/Table.ts +0 -144
|
@@ -19,6 +19,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
19
19
|
|
|
20
20
|
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; }
|
|
21
21
|
|
|
22
|
+
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); }
|
|
23
|
+
|
|
22
24
|
const Container = _ref => {
|
|
23
25
|
let {
|
|
24
26
|
useThemeGutterPadding,
|
|
@@ -80,10 +82,9 @@ const Container = _ref => {
|
|
|
80
82
|
};
|
|
81
83
|
const Wrap = elevation ? _Elevation.default : _reactNative.View;
|
|
82
84
|
if (elevation) containerStyle.elevation = elevation;
|
|
83
|
-
return /*#__PURE__*/React.createElement(Wrap, {
|
|
84
|
-
style: [containerStyle, style]
|
|
85
|
-
|
|
86
|
-
}, backgroundImage ? /*#__PURE__*/React.createElement(_reactNative.ImageBackground, {
|
|
85
|
+
return /*#__PURE__*/React.createElement(Wrap, _extends({
|
|
86
|
+
style: [containerStyle, style]
|
|
87
|
+
}, rest), backgroundImage ? /*#__PURE__*/React.createElement(_reactNative.ImageBackground, {
|
|
87
88
|
source: typeof backgroundImage === "string" ? {
|
|
88
89
|
uri: backgroundImage
|
|
89
90
|
} : backgroundImage,
|
|
@@ -100,17 +101,4 @@ const Container = _ref => {
|
|
|
100
101
|
|
|
101
102
|
var _default = (0, _theming.withTheme)(Container);
|
|
102
103
|
|
|
103
|
-
exports.default = _default;izeMode: backgroundImageResizeMode,
|
|
104
|
-
style: {
|
|
105
|
-
flex: 1
|
|
106
|
-
}
|
|
107
|
-
}, /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
108
|
-
style: innerStyle
|
|
109
|
-
}, children)) : /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
110
|
-
style: innerStyle
|
|
111
|
-
}, children));
|
|
112
|
-
};
|
|
113
|
-
|
|
114
|
-
var _default = (0, _theming.withTheme)(Container);
|
|
115
|
-
|
|
116
104
|
exports.default = _default;
|
|
@@ -21,6 +21,8 @@ var _Touchable = _interopRequireDefault(require("../Touchable"));
|
|
|
21
21
|
|
|
22
22
|
var _DatePickerComponent = _interopRequireDefault(require("./DatePickerComponent"));
|
|
23
23
|
|
|
24
|
+
var _utilities = require("../../utilities");
|
|
25
|
+
|
|
24
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
27
|
|
|
26
28
|
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); }
|
|
@@ -57,7 +59,11 @@ const DatePicker = _ref => {
|
|
|
57
59
|
rightIconName,
|
|
58
60
|
leftIconMode = "inset",
|
|
59
61
|
label,
|
|
62
|
+
labelSize,
|
|
63
|
+
labelColor,
|
|
60
64
|
placeholder,
|
|
65
|
+
borderColor: inputBorderColor,
|
|
66
|
+
borderColorActive: inputBorderColorActive,
|
|
61
67
|
...props
|
|
62
68
|
} = _ref;
|
|
63
69
|
const [value, setValue] = React.useState(date || defaultValue);
|
|
@@ -74,6 +80,9 @@ const DatePicker = _ref => {
|
|
|
74
80
|
measured: false,
|
|
75
81
|
width: 0
|
|
76
82
|
});
|
|
83
|
+
const {
|
|
84
|
+
textStyles
|
|
85
|
+
} = (0, _utilities.extractStyles)(style);
|
|
77
86
|
|
|
78
87
|
const getValidDate = () => {
|
|
79
88
|
if (!value) {
|
|
@@ -175,8 +184,8 @@ const DatePicker = _ref => {
|
|
|
175
184
|
|
|
176
185
|
const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
|
|
177
186
|
const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);
|
|
178
|
-
const MAXIMIZED_LABEL_FONT_SIZE = typography.subtitle1.fontSize;
|
|
179
|
-
const MINIMIZED_LABEL_FONT_SIZE = typography.caption.fontSize;
|
|
187
|
+
const MAXIMIZED_LABEL_FONT_SIZE = (textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontSize) || typography.subtitle1.fontSize;
|
|
188
|
+
const MINIMIZED_LABEL_FONT_SIZE = labelSize ? labelSize : typography.caption.fontSize;
|
|
180
189
|
const hasActiveOutline = focused;
|
|
181
190
|
let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
|
|
182
191
|
inputTextColor = colors.strong;
|
|
@@ -188,9 +197,9 @@ const DatePicker = _ref => {
|
|
|
188
197
|
underlineColor = "transparent";
|
|
189
198
|
backgroundColor = colors.divider;
|
|
190
199
|
} else {
|
|
191
|
-
activeColor = colors.primary;
|
|
192
|
-
placeholderColor = borderColor = colors.light;
|
|
193
|
-
underlineColor = colors.light;
|
|
200
|
+
activeColor = inputBorderColorActive || colors.primary;
|
|
201
|
+
placeholderColor = borderColor = inputBorderColor || colors.light;
|
|
202
|
+
underlineColor = inputBorderColor || colors.light;
|
|
194
203
|
backgroundColor = colors.background;
|
|
195
204
|
}
|
|
196
205
|
|
|
@@ -250,6 +259,7 @@ const DatePicker = _ref => {
|
|
|
250
259
|
};
|
|
251
260
|
const labelStyle = { ...typography.subtitle1,
|
|
252
261
|
top: type === "solid" ? 16 : 0,
|
|
262
|
+
fontFamily: textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontFamily,
|
|
253
263
|
left: leftIconName && leftIconMode === "inset" ? ICON_SIZE + (type === "solid" ? 16 : 12) : 0,
|
|
254
264
|
transform: [{
|
|
255
265
|
// Move label to top
|
|
@@ -273,7 +283,7 @@ const DatePicker = _ref => {
|
|
|
273
283
|
};
|
|
274
284
|
const inputStyles = [styles.input, inputStyle, type === "solid" ? {
|
|
275
285
|
marginHorizontal: 12
|
|
276
|
-
} : {}]; // const render = (props) => <NativeTextInput {...props} />;
|
|
286
|
+
} : {}, textStyles]; // const render = (props) => <NativeTextInput {...props} />;
|
|
277
287
|
|
|
278
288
|
return /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
279
289
|
style: [styles.container, style]
|
|
@@ -319,7 +329,7 @@ const DatePicker = _ref => {
|
|
|
319
329
|
style: [styles.placeholder, type === "solid" ? {
|
|
320
330
|
paddingHorizontal: 12
|
|
321
331
|
} : {}, labelStyle, {
|
|
322
|
-
color: colors.light,
|
|
332
|
+
color: labelColor || colors.light,
|
|
323
333
|
opacity: labeled.interpolate({
|
|
324
334
|
inputRange: [0, 1],
|
|
325
335
|
outputRange: [hasActiveOutline ? 1 : 0, 0]
|
|
@@ -330,7 +340,7 @@ const DatePicker = _ref => {
|
|
|
330
340
|
style: [styles.placeholder, type === "solid" ? {
|
|
331
341
|
paddingHorizontal: 12
|
|
332
342
|
} : {}, labelStyle, {
|
|
333
|
-
color:
|
|
343
|
+
color: labelColor || placeholder,
|
|
334
344
|
opacity: hasActiveOutline ? labeled : 1
|
|
335
345
|
}],
|
|
336
346
|
numberOfLines: 1
|
|
@@ -284,10 +284,6 @@ const Picker = _ref => {
|
|
|
284
284
|
);
|
|
285
285
|
};
|
|
286
286
|
|
|
287
|
-
var _default = (0, _theming.withTheme)(Picker);
|
|
288
|
-
|
|
289
|
-
exports.default = _default;
|
|
290
|
-
|
|
291
287
|
const styles = _reactNative.StyleSheet.create({
|
|
292
288
|
marginsContainer: {
|
|
293
289
|
alignSelf: "stretch",
|
|
@@ -357,4 +353,8 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
357
353
|
maxWidth: deviceWidth,
|
|
358
354
|
maxHeight: deviceHeight
|
|
359
355
|
}
|
|
360
|
-
});
|
|
356
|
+
});
|
|
357
|
+
|
|
358
|
+
var _default = (0, _theming.withTheme)(Picker);
|
|
359
|
+
|
|
360
|
+
exports.default = _default;
|
|
@@ -15,6 +15,8 @@ var _theming = require("../theming");
|
|
|
15
15
|
|
|
16
16
|
var _IconButton = _interopRequireDefault(require("./IconButton"));
|
|
17
17
|
|
|
18
|
+
var _utilities = require("../utilities");
|
|
19
|
+
|
|
18
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
21
|
|
|
20
22
|
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); }
|
|
@@ -28,7 +30,6 @@ const Stepper = _ref => {
|
|
|
28
30
|
value: valueProp,
|
|
29
31
|
defaultValue,
|
|
30
32
|
style,
|
|
31
|
-
typeStyle,
|
|
32
33
|
iconSize = 24,
|
|
33
34
|
iconColor,
|
|
34
35
|
onChange,
|
|
@@ -38,6 +39,10 @@ const Stepper = _ref => {
|
|
|
38
39
|
},
|
|
39
40
|
Icon
|
|
40
41
|
} = _ref;
|
|
42
|
+
const {
|
|
43
|
+
viewStyles,
|
|
44
|
+
textStyles
|
|
45
|
+
} = (0, _utilities.extractStyles)(style);
|
|
41
46
|
const [value, setValue] = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0);
|
|
42
47
|
|
|
43
48
|
const isValidValue = valueArg => valueArg >= min && valueArg <= max;
|
|
@@ -60,7 +65,7 @@ const Stepper = _ref => {
|
|
|
60
65
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
61
66
|
style: [{
|
|
62
67
|
flexDirection: "row"
|
|
63
|
-
},
|
|
68
|
+
}, viewStyles]
|
|
64
69
|
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
|
|
65
70
|
Icon: Icon,
|
|
66
71
|
icon: "MaterialIcons/remove",
|
|
@@ -77,7 +82,7 @@ const Stepper = _ref => {
|
|
|
77
82
|
alignSelf: "center",
|
|
78
83
|
color: colors.medium,
|
|
79
84
|
marginHorizontal: 8
|
|
80
|
-
},
|
|
85
|
+
}, textStyles]
|
|
81
86
|
}, value), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
|
|
82
87
|
Icon: Icon,
|
|
83
88
|
icon: "MaterialIcons/add",
|
|
@@ -24,10 +24,14 @@ class Text extends React.Component {
|
|
|
24
24
|
super(...arguments);
|
|
25
25
|
|
|
26
26
|
_defineProperty(this, "_root", void 0);
|
|
27
|
+
|
|
28
|
+
_defineProperty(this, "state", {
|
|
29
|
+
nativeProps: {}
|
|
30
|
+
});
|
|
27
31
|
}
|
|
28
32
|
|
|
29
33
|
setNativeProps(args) {
|
|
30
|
-
|
|
34
|
+
this.state.nativeProps = args || {};
|
|
31
35
|
}
|
|
32
36
|
|
|
33
37
|
render() {
|
|
@@ -36,7 +40,7 @@ class Text extends React.Component {
|
|
|
36
40
|
...rest
|
|
37
41
|
} = this.props;
|
|
38
42
|
const writingDirection = _reactNative.I18nManager.isRTL ? "rtl" : "ltr";
|
|
39
|
-
return /*#__PURE__*/React.createElement(_reactNative.Text, _extends({}, rest, {
|
|
43
|
+
return /*#__PURE__*/React.createElement(_reactNative.Text, _extends({}, rest, this.state.nativeProps, {
|
|
40
44
|
ref: c => {
|
|
41
45
|
this._root = c;
|
|
42
46
|
},
|
|
@@ -32,6 +32,7 @@ class TextField extends React.Component {
|
|
|
32
32
|
super(...arguments);
|
|
33
33
|
|
|
34
34
|
_defineProperty(this, "state", {
|
|
35
|
+
nativeProps: {},
|
|
35
36
|
labeled: new _reactNative.Animated.Value(this.props.value || this.props.error ? 0 : 1),
|
|
36
37
|
focused: false,
|
|
37
38
|
placeholder: this.props.error ? this.props.placeholder : "",
|
|
@@ -162,7 +163,9 @@ class TextField extends React.Component {
|
|
|
162
163
|
* @internal
|
|
163
164
|
*/
|
|
164
165
|
setNativeProps(args) {
|
|
165
|
-
|
|
166
|
+
this.setState(state => ({ ...state,
|
|
167
|
+
nativeState: args || {}
|
|
168
|
+
}));
|
|
166
169
|
}
|
|
167
170
|
|
|
168
171
|
isFocused() {
|
|
@@ -444,6 +447,7 @@ class TextField extends React.Component {
|
|
|
444
447
|
underlineColorAndroid: "transparent",
|
|
445
448
|
style: inputStyles,
|
|
446
449
|
...rest,
|
|
450
|
+
...this.state.nativeProps,
|
|
447
451
|
value: this.state.value
|
|
448
452
|
})), rightIconName ? /*#__PURE__*/React.createElement(Icon, {
|
|
449
453
|
name: rightIconName,
|
package/lib/commonjs/index.js
CHANGED
|
@@ -369,42 +369,6 @@ Object.defineProperty(exports, "SwitchRow", {
|
|
|
369
369
|
return _Switch.SwitchRow;
|
|
370
370
|
}
|
|
371
371
|
});
|
|
372
|
-
Object.defineProperty(exports, "Table", {
|
|
373
|
-
enumerable: true,
|
|
374
|
-
get: function () {
|
|
375
|
-
return _Table.Table;
|
|
376
|
-
}
|
|
377
|
-
});
|
|
378
|
-
Object.defineProperty(exports, "TableCell", {
|
|
379
|
-
enumerable: true,
|
|
380
|
-
get: function () {
|
|
381
|
-
return _Table.TableCell;
|
|
382
|
-
}
|
|
383
|
-
});
|
|
384
|
-
Object.defineProperty(exports, "TableHeader", {
|
|
385
|
-
enumerable: true,
|
|
386
|
-
get: function () {
|
|
387
|
-
return _Table.TableHeader;
|
|
388
|
-
}
|
|
389
|
-
});
|
|
390
|
-
Object.defineProperty(exports, "TablePaginator", {
|
|
391
|
-
enumerable: true,
|
|
392
|
-
get: function () {
|
|
393
|
-
return _Table.TablePaginator;
|
|
394
|
-
}
|
|
395
|
-
});
|
|
396
|
-
Object.defineProperty(exports, "TableRow", {
|
|
397
|
-
enumerable: true,
|
|
398
|
-
get: function () {
|
|
399
|
-
return _Table.TableRow;
|
|
400
|
-
}
|
|
401
|
-
});
|
|
402
|
-
Object.defineProperty(exports, "TableTitle", {
|
|
403
|
-
enumerable: true,
|
|
404
|
-
get: function () {
|
|
405
|
-
return _Table.TableTitle;
|
|
406
|
-
}
|
|
407
|
-
});
|
|
408
372
|
Object.defineProperty(exports, "TextField", {
|
|
409
373
|
enumerable: true,
|
|
410
374
|
get: function () {
|
|
@@ -512,8 +476,6 @@ var _Layout = require("./components/Layout");
|
|
|
512
476
|
|
|
513
477
|
var _index = require("./components/RadioButton/index");
|
|
514
478
|
|
|
515
|
-
var _Table = require("./components/Table");
|
|
516
|
-
|
|
517
479
|
var _CardBlock = _interopRequireDefault(require("./components/CardBlock"));
|
|
518
480
|
|
|
519
481
|
var _CardContainer = _interopRequireDefault(require("./components/CardContainer"));
|
|
@@ -18,6 +18,12 @@ const SEED_DATA_PROPS = {
|
|
|
18
18
|
required: true,
|
|
19
19
|
group: _types.GROUPS.data
|
|
20
20
|
},
|
|
21
|
+
labelSize: (0, _types.createNumberProp)({
|
|
22
|
+
label: "Label Size"
|
|
23
|
+
}),
|
|
24
|
+
labelColor: (0, _types.createColorProp)({
|
|
25
|
+
label: "Label Color"
|
|
26
|
+
}),
|
|
21
27
|
mode: {
|
|
22
28
|
label: "Mode",
|
|
23
29
|
description: "Choose between date, time and datetime",
|
|
@@ -29,6 +35,12 @@ const SEED_DATA_PROPS = {
|
|
|
29
35
|
options: ["date", "time", "datetime"],
|
|
30
36
|
group: _types.GROUPS.basic
|
|
31
37
|
},
|
|
38
|
+
borderColor: (0, _types.createColorProp)({
|
|
39
|
+
label: "Border Color"
|
|
40
|
+
}),
|
|
41
|
+
borderColorActive: (0, _types.createColorProp)({
|
|
42
|
+
label: "Border Color"
|
|
43
|
+
}),
|
|
32
44
|
format: {
|
|
33
45
|
label: "Format",
|
|
34
46
|
description: "Create an output format for the date.",
|
|
@@ -145,6 +157,7 @@ const SEED_DATA = [{
|
|
|
145
157
|
category: _types.COMPONENT_TYPES.input,
|
|
146
158
|
layout: null,
|
|
147
159
|
triggers: [_types.Triggers.OnDateChange],
|
|
160
|
+
StylesPanelSections: [_types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Size, _types.StylesPanelSections.Typography],
|
|
148
161
|
props: { ...SEED_DATA_PROPS,
|
|
149
162
|
type: {
|
|
150
163
|
label: "Appearance",
|
|
@@ -12,7 +12,7 @@ const SEED_DATA = [{
|
|
|
12
12
|
tag: "Stepper",
|
|
13
13
|
description: "A component used to control the quantity of something",
|
|
14
14
|
category: _types.COMPONENT_TYPES.control,
|
|
15
|
-
stylesPanelSections: _types.BLOCK_STYLES_SECTIONS,
|
|
15
|
+
stylesPanelSections: [_types.StylesPanelSections.Typography, ..._types.BLOCK_STYLES_SECTIONS],
|
|
16
16
|
layout: {},
|
|
17
17
|
triggers: [_types.Triggers.OnChange],
|
|
18
18
|
props: {
|
|
@@ -24,7 +24,7 @@ const SEED_DATA_PROPS = {
|
|
|
24
24
|
description: "Can automatically capitalize sentences, words, and characters (Default: none).",
|
|
25
25
|
editable: true,
|
|
26
26
|
required: false,
|
|
27
|
-
defaultValue:
|
|
27
|
+
defaultValue: "none",
|
|
28
28
|
options: ["none", "sentences", "words", "characters"],
|
|
29
29
|
formType: _types.FORM_TYPES.flatArray,
|
|
30
30
|
propType: _types.PROP_TYPES.STRING
|
|
@@ -103,7 +103,7 @@ const SEED_DATA = [{
|
|
|
103
103
|
description: "Can automatically capitalize sentences, words, and characters (Default: none).",
|
|
104
104
|
editable: true,
|
|
105
105
|
required: false,
|
|
106
|
-
defaultValue:
|
|
106
|
+
defaultValue: "none",
|
|
107
107
|
options: ["none", "sentences", "words", "characters"],
|
|
108
108
|
formType: _types.FORM_TYPES.flatArray,
|
|
109
109
|
propType: _types.PROP_TYPES.STRING
|
|
@@ -1,3 +1,5 @@
|
|
|
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
|
+
|
|
1
3
|
import * as React from "react";
|
|
2
4
|
import { Pressable, StyleSheet, View } from "react-native";
|
|
3
5
|
import Text from "../Text";
|
|
@@ -18,10 +20,9 @@ const AccordionItem = _ref => {
|
|
|
18
20
|
textStyles,
|
|
19
21
|
viewStyles
|
|
20
22
|
} = extractStyles(style);
|
|
21
|
-
return /*#__PURE__*/React.createElement(Pressable, {
|
|
22
|
-
style: [styles.container, viewStyles]
|
|
23
|
-
|
|
24
|
-
}, /*#__PURE__*/React.createElement(View, {
|
|
23
|
+
return /*#__PURE__*/React.createElement(Pressable, _extends({
|
|
24
|
+
style: [styles.container, viewStyles]
|
|
25
|
+
}, rest), /*#__PURE__*/React.createElement(View, {
|
|
25
26
|
style: styles.row
|
|
26
27
|
}, icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
27
28
|
name: icon,
|
|
@@ -35,28 +36,6 @@ const AccordionItem = _ref => {
|
|
|
35
36
|
}, label))));
|
|
36
37
|
};
|
|
37
38
|
|
|
38
|
-
const styles = StyleSheet.create({
|
|
39
|
-
container: {
|
|
40
|
-
padding: 8
|
|
41
|
-
},
|
|
42
|
-
row: {
|
|
43
|
-
flexDirection: "row",
|
|
44
|
-
alignItems: "center",
|
|
45
|
-
paddingLeft: 8
|
|
46
|
-
},
|
|
47
|
-
item: {
|
|
48
|
-
marginVertical: 6,
|
|
49
|
-
paddingLeft: 8
|
|
50
|
-
},
|
|
51
|
-
content: {
|
|
52
|
-
flex: 1,
|
|
53
|
-
justifyContent: "center"
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
export default withTheme(AccordionItem);xtStyles
|
|
57
|
-
}, label))));
|
|
58
|
-
};
|
|
59
|
-
|
|
60
39
|
const styles = StyleSheet.create({
|
|
61
40
|
container: {
|
|
62
41
|
padding: 8
|
|
@@ -1,3 +1,5 @@
|
|
|
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
|
+
|
|
1
3
|
import * as React from "react";
|
|
2
4
|
import { View, Animated, Text, StyleSheet, I18nManager, TextInput as NativeTextInput } from "react-native";
|
|
3
5
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
@@ -6,6 +8,7 @@ import { withTheme } from "../../theming";
|
|
|
6
8
|
import Portal from "../Portal/Portal";
|
|
7
9
|
import Touchable from "../Touchable";
|
|
8
10
|
import DateTimePicker from "./DatePickerComponent";
|
|
11
|
+
import { extractStyles } from "../../utilities";
|
|
9
12
|
const AnimatedText = Animated.createAnimatedComponent(Text);
|
|
10
13
|
const FOCUS_ANIMATION_DURATION = 150;
|
|
11
14
|
const BLUR_ANIMATION_DURATION = 180;
|
|
@@ -33,7 +36,11 @@ const DatePicker = _ref => {
|
|
|
33
36
|
rightIconName,
|
|
34
37
|
leftIconMode = "inset",
|
|
35
38
|
label,
|
|
39
|
+
labelSize,
|
|
40
|
+
labelColor,
|
|
36
41
|
placeholder,
|
|
42
|
+
borderColor: inputBorderColor,
|
|
43
|
+
borderColorActive: inputBorderColorActive,
|
|
37
44
|
...props
|
|
38
45
|
} = _ref;
|
|
39
46
|
const [value, setValue] = React.useState(date || defaultValue);
|
|
@@ -50,6 +57,9 @@ const DatePicker = _ref => {
|
|
|
50
57
|
measured: false,
|
|
51
58
|
width: 0
|
|
52
59
|
});
|
|
60
|
+
const {
|
|
61
|
+
textStyles
|
|
62
|
+
} = extractStyles(style);
|
|
53
63
|
|
|
54
64
|
const getValidDate = () => {
|
|
55
65
|
if (!value) {
|
|
@@ -151,8 +161,8 @@ const DatePicker = _ref => {
|
|
|
151
161
|
|
|
152
162
|
const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
|
|
153
163
|
const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);
|
|
154
|
-
const MAXIMIZED_LABEL_FONT_SIZE = typography.subtitle1.fontSize;
|
|
155
|
-
const MINIMIZED_LABEL_FONT_SIZE = typography.caption.fontSize;
|
|
164
|
+
const MAXIMIZED_LABEL_FONT_SIZE = (textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontSize) || typography.subtitle1.fontSize;
|
|
165
|
+
const MINIMIZED_LABEL_FONT_SIZE = labelSize ? labelSize : typography.caption.fontSize;
|
|
156
166
|
const hasActiveOutline = focused;
|
|
157
167
|
let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
|
|
158
168
|
inputTextColor = colors.strong;
|
|
@@ -164,9 +174,9 @@ const DatePicker = _ref => {
|
|
|
164
174
|
underlineColor = "transparent";
|
|
165
175
|
backgroundColor = colors.divider;
|
|
166
176
|
} else {
|
|
167
|
-
activeColor = colors.primary;
|
|
168
|
-
placeholderColor = borderColor = colors.light;
|
|
169
|
-
underlineColor = colors.light;
|
|
177
|
+
activeColor = inputBorderColorActive || colors.primary;
|
|
178
|
+
placeholderColor = borderColor = inputBorderColor || colors.light;
|
|
179
|
+
underlineColor = inputBorderColor || colors.light;
|
|
170
180
|
backgroundColor = colors.background;
|
|
171
181
|
}
|
|
172
182
|
|
|
@@ -226,6 +236,7 @@ const DatePicker = _ref => {
|
|
|
226
236
|
};
|
|
227
237
|
const labelStyle = { ...typography.subtitle1,
|
|
228
238
|
top: type === "solid" ? 16 : 0,
|
|
239
|
+
fontFamily: textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontFamily,
|
|
229
240
|
left: leftIconName && leftIconMode === "inset" ? ICON_SIZE + (type === "solid" ? 16 : 12) : 0,
|
|
230
241
|
transform: [{
|
|
231
242
|
// Move label to top
|
|
@@ -249,7 +260,7 @@ const DatePicker = _ref => {
|
|
|
249
260
|
};
|
|
250
261
|
const inputStyles = [styles.input, inputStyle, type === "solid" ? {
|
|
251
262
|
marginHorizontal: 12
|
|
252
|
-
} : {}]; // const render = (props) => <NativeTextInput {...props} />;
|
|
263
|
+
} : {}, textStyles]; // const render = (props) => <NativeTextInput {...props} />;
|
|
253
264
|
|
|
254
265
|
return /*#__PURE__*/React.createElement(View, {
|
|
255
266
|
style: [styles.container, style]
|
|
@@ -260,9 +271,9 @@ const DatePicker = _ref => {
|
|
|
260
271
|
pointerEvents: "none"
|
|
261
272
|
}, /*#__PURE__*/React.createElement(View, {
|
|
262
273
|
style: [styles.container, style]
|
|
263
|
-
}, leftIconName && leftIconMode === "outset" ? /*#__PURE__*/React.createElement(Icon, {
|
|
274
|
+
}, leftIconName && leftIconMode === "outset" ? /*#__PURE__*/React.createElement(Icon, _extends({}, leftIconProps, {
|
|
264
275
|
style: leftIconStyle
|
|
265
|
-
}) : null, /*#__PURE__*/React.createElement(View, {
|
|
276
|
+
})) : null, /*#__PURE__*/React.createElement(View, {
|
|
266
277
|
style: [containerStyle, style ? {
|
|
267
278
|
height: style.height
|
|
268
279
|
} : {}]
|
|
@@ -295,7 +306,7 @@ const DatePicker = _ref => {
|
|
|
295
306
|
style: [styles.placeholder, type === "solid" ? {
|
|
296
307
|
paddingHorizontal: 12
|
|
297
308
|
} : {}, labelStyle, {
|
|
298
|
-
color: colors.light,
|
|
309
|
+
color: labelColor || colors.light,
|
|
299
310
|
opacity: labeled.interpolate({
|
|
300
311
|
inputRange: [0, 1],
|
|
301
312
|
outputRange: [hasActiveOutline ? 1 : 0, 0]
|
|
@@ -306,15 +317,15 @@ const DatePicker = _ref => {
|
|
|
306
317
|
style: [styles.placeholder, type === "solid" ? {
|
|
307
318
|
paddingHorizontal: 12
|
|
308
319
|
} : {}, labelStyle, {
|
|
309
|
-
color:
|
|
320
|
+
color: labelColor || placeholder,
|
|
310
321
|
opacity: hasActiveOutline ? labeled : 1
|
|
311
322
|
}],
|
|
312
323
|
numberOfLines: 1
|
|
313
|
-
}, label)) : null, leftIconName && leftIconMode === "inset" ? /*#__PURE__*/React.createElement(Icon, {
|
|
324
|
+
}, label)) : null, leftIconName && leftIconMode === "inset" ? /*#__PURE__*/React.createElement(Icon, _extends({}, leftIconProps, {
|
|
314
325
|
style: { ...leftIconStyle,
|
|
315
326
|
marginLeft: type === "solid" ? 16 : 0
|
|
316
327
|
}
|
|
317
|
-
}) : null, /*#__PURE__*/React.createElement(NativeTextInput, {
|
|
328
|
+
})) : null, /*#__PURE__*/React.createElement(NativeTextInput, _extends({
|
|
318
329
|
value: formatDate(),
|
|
319
330
|
placeholder: label ? placeholder1 : placeholder,
|
|
320
331
|
editable: !disabled,
|
|
@@ -323,9 +334,8 @@ const DatePicker = _ref => {
|
|
|
323
334
|
onFocus: _handleFocus,
|
|
324
335
|
onBlur: _handleBlur,
|
|
325
336
|
underlineColorAndroid: "transparent",
|
|
326
|
-
style: inputStyles
|
|
327
|
-
|
|
328
|
-
})), rightIconName ? /*#__PURE__*/React.createElement(Icon, {
|
|
337
|
+
style: inputStyles
|
|
338
|
+
}, props))), rightIconName ? /*#__PURE__*/React.createElement(Icon, {
|
|
329
339
|
name: rightIconName,
|
|
330
340
|
size: ICON_SIZE,
|
|
331
341
|
color: colors.light,
|
|
@@ -1,3 +1,5 @@
|
|
|
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
|
+
|
|
1
3
|
/* README: Internal Image component used for stuff like Card. DO NOT EXPORT! */
|
|
2
4
|
import React from "react";
|
|
3
5
|
import { Image as NativeImage, StyleSheet } from "react-native";
|
|
@@ -62,24 +64,7 @@ const Image = _ref2 => {
|
|
|
62
64
|
height,
|
|
63
65
|
aspectRatio
|
|
64
66
|
}]
|
|
65
|
-
}, /*#__PURE__*/React.createElement(NativeImage, {
|
|
66
|
-
source: imageSource,
|
|
67
|
-
resizeMode: resizeMode,
|
|
68
|
-
style: [style, {
|
|
69
|
-
height: "100%",
|
|
70
|
-
width: "100%"
|
|
71
|
-
}]
|
|
72
|
-
}));
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
return /*#__PURE__*/React.createElement(NativeImage, { ...props,
|
|
76
|
-
source: source,
|
|
77
|
-
resizeMode: resizeMode,
|
|
78
|
-
style: style
|
|
79
|
-
});
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
export default Image;ent(NativeImage, _extends({}, props, {
|
|
67
|
+
}, /*#__PURE__*/React.createElement(NativeImage, _extends({}, props, {
|
|
83
68
|
source: imageSource,
|
|
84
69
|
resizeMode: resizeMode,
|
|
85
70
|
style: [style, {
|
|
@@ -261,7 +261,6 @@ const Picker = _ref => {
|
|
|
261
261
|
);
|
|
262
262
|
};
|
|
263
263
|
|
|
264
|
-
export default withTheme(Picker);
|
|
265
264
|
const styles = StyleSheet.create({
|
|
266
265
|
marginsContainer: {
|
|
267
266
|
alignSelf: "stretch",
|
|
@@ -331,4 +330,5 @@ const styles = StyleSheet.create({
|
|
|
331
330
|
maxWidth: deviceWidth,
|
|
332
331
|
maxHeight: deviceHeight
|
|
333
332
|
}
|
|
334
|
-
});
|
|
333
|
+
});
|
|
334
|
+
export default withTheme(Picker);
|
|
@@ -1,3 +1,5 @@
|
|
|
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
|
+
|
|
1
3
|
import * as React from "react";
|
|
2
4
|
import { View, StyleSheet } from "react-native";
|
|
3
5
|
import { Picker as NativePicker } from "@react-native-picker/picker";
|
|
@@ -8,6 +10,8 @@ import TextField from "../TextField";
|
|
|
8
10
|
import Touchable from "../Touchable";
|
|
9
11
|
|
|
10
12
|
const Picker = _ref => {
|
|
13
|
+
var _options$find$label, _options$find;
|
|
14
|
+
|
|
11
15
|
let {
|
|
12
16
|
style,
|
|
13
17
|
options,
|
|
@@ -17,9 +21,6 @@ const Picker = _ref => {
|
|
|
17
21
|
onValueChange: onValueChangeOverride = () => {},
|
|
18
22
|
...props
|
|
19
23
|
} = _ref;
|
|
20
|
-
|
|
21
|
-
var _a, _b;
|
|
22
|
-
|
|
23
24
|
const {
|
|
24
25
|
viewStyles: {
|
|
25
26
|
borderRadius,
|
|
@@ -66,7 +67,7 @@ const Picker = _ref => {
|
|
|
66
67
|
};
|
|
67
68
|
|
|
68
69
|
const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
|
|
69
|
-
const selectedLabel = selectedValue && ((
|
|
70
|
+
const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
|
|
70
71
|
return /*#__PURE__*/React.createElement(Touchable, {
|
|
71
72
|
disabled: disabled,
|
|
72
73
|
onPress: toggleFocus,
|
|
@@ -89,25 +90,6 @@ const Picker = _ref => {
|
|
|
89
90
|
label: o.label,
|
|
90
91
|
value: o.value,
|
|
91
92
|
key: o.value
|
|
92
|
-
}))), /*#__PURE__*/React.createElement(View, {
|
|
93
|
-
pointerEvents: "none"
|
|
94
|
-
}, /*#__PURE__*/React.createElement(TextField, { ...props,
|
|
95
|
-
value: selectedLabel,
|
|
96
|
-
placeholder: placeholder,
|
|
97
|
-
// @ts-ignore
|
|
98
|
-
ref: textField,
|
|
99
|
-
disabled: disabled,
|
|
100
|
-
// @ts-expect-error
|
|
101
|
-
style: stylesWithoutMargin
|
|
102
|
-
}))));
|
|
103
|
-
};
|
|
104
|
-
|
|
105
|
-
const styles = StyleSheet.create({
|
|
106
|
-
container: {
|
|
107
|
-
alignSelf: "stretch"
|
|
108
|
-
}
|
|
109
|
-
});
|
|
110
|
-
export default withTheme(Picker); key: o.value
|
|
111
93
|
}))), /*#__PURE__*/React.createElement(View, {
|
|
112
94
|
pointerEvents: "none"
|
|
113
95
|
}, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
|