@draftbit/core 46.6.5-427e0d.2 → 46.6.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/components/CardBlock.js +13 -4
- package/lib/commonjs/components/CardContainerRating.js +13 -4
- package/lib/commonjs/components/Carousel.js +1 -2
- package/lib/commonjs/components/Checkbox/Checkbox.js +22 -4
- package/lib/commonjs/components/Checkbox/CheckboxGroupRow.js +23 -5
- package/lib/commonjs/components/Checkbox/CheckboxRow.js +23 -6
- package/lib/commonjs/components/Config.js +3 -3
- package/lib/commonjs/components/Container.js +15 -4
- package/lib/commonjs/components/DatePicker/DatePicker.js +29 -16
- package/lib/commonjs/components/DeprecatedFAB.js +21 -3
- package/lib/commonjs/components/Divider.js +14 -1
- package/lib/commonjs/components/FAB.js +18 -4
- package/lib/commonjs/components/FormRow.js +16 -2
- package/lib/commonjs/components/IconButton.js +19 -4
- package/lib/commonjs/components/Image.js +17 -2
- package/lib/commonjs/components/Layout.js +40 -19
- package/lib/commonjs/components/Picker/Picker.js +4 -4
- package/lib/commonjs/components/Picker/PickerComponent.android.js +2 -2
- package/lib/commonjs/components/Picker/PickerComponent.ios.js +2 -2
- package/lib/commonjs/components/Picker/PickerComponent.web.js +19 -4
- package/lib/commonjs/components/Portal/PortalHost.js +44 -15
- package/lib/commonjs/components/Portal/PortalManager.js +34 -8
- package/lib/commonjs/components/Pressable.js +15 -2
- package/lib/commonjs/components/ProgressBar.js +37 -7
- package/lib/commonjs/components/RadioButton/RadioButton.js +1 -1
- package/lib/commonjs/components/RadioButton/RadioButtonFieldGroup.js +9 -1
- package/lib/commonjs/components/RadioButton/RadioButtonRow.js +1 -1
- package/lib/commonjs/components/ScreenContainer.js +20 -4
- package/lib/commonjs/components/StepIndicator.js +58 -19
- package/lib/commonjs/components/Stepper.js +2 -1
- package/lib/commonjs/components/Surface.js +14 -2
- package/lib/commonjs/components/Switch.js +19 -10
- package/lib/commonjs/components/TextField.js +76 -28
- package/lib/commonjs/components/ToggleButton.js +15 -2
- package/lib/commonjs/components/Touchable.js +15 -2
- package/lib/commonjs/constants.js +1 -1
- package/lib/commonjs/mappings/FieldSearchBarFull.js +3 -1
- package/lib/commonjs/utilities.js +2 -3
- package/lib/module/components/Accordion/AccordionItem.js +25 -4
- package/lib/module/components/AnimatedCircularProgress.js +13 -1
- package/lib/module/components/AspectRatio.js +18 -1
- package/lib/module/components/AvatarEdit.js +15 -4
- package/lib/module/components/CardContainerRating.js +14 -4
- package/lib/module/components/CardContainerShortImage.js +18 -4
- package/lib/module/components/Carousel.js +1 -2
- package/lib/module/components/Checkbox/Checkbox.js +25 -4
- package/lib/module/components/Checkbox/CheckboxGroup.js +16 -2
- package/lib/module/components/CircleImage.js +16 -1
- package/lib/module/components/CircularProgress.js +28 -8
- package/lib/module/components/Config.js +3 -3
- package/lib/module/components/Container.js +17 -4
- package/lib/module/components/DatePicker/DatePicker.js +30 -16
- package/lib/module/components/DeprecatedCardWrapper.js +18 -1
- package/lib/module/components/DeprecatedFAB.js +23 -3
- package/lib/module/components/Elevation.js +14 -2
- package/lib/module/components/FAB.js +22 -4
- package/lib/module/components/FieldSearchBarFull.js +1 -2
- package/lib/module/components/IconButton.js +21 -4
- package/lib/module/components/Picker/Picker.js +4 -4
- package/lib/module/components/Picker/PickerComponent.android.js +2 -2
- package/lib/module/components/Picker/PickerComponent.ios.js +2 -2
- package/lib/module/components/Picker/PickerComponent.web.js +19 -4
- package/lib/module/components/Portal/Portal.js +28 -3
- package/lib/module/components/Portal/PortalHost.js +45 -15
- package/lib/module/components/Portal/PortalManager.js +33 -7
- package/lib/module/components/ProgressBar.js +39 -7
- package/lib/module/components/RadioButton/RadioButton.js +1 -1
- package/lib/module/components/RadioButton/RadioButtonFieldGroup.js +10 -1
- package/lib/module/components/RadioButton/RadioButtonRow.js +1 -1
- package/lib/module/components/RadioButton/context.js +1 -1
- package/lib/module/components/StarRating.js +24 -4
- package/lib/module/components/StepIndicator.js +1 -1
- package/lib/module/components/Surface.js +15 -1
- package/lib/module/components/TextField.js +78 -28
- package/lib/module/components/ToggleButton.js +16 -2
- package/lib/module/components/Touchable.js +15 -2
- package/lib/module/constants.js +1 -0
- package/lib/module/mappings/StarRating.js +7 -2
- package/lib/module/utilities.js +2 -3
- package/package.json +3 -3
|
@@ -1,4 +1,3 @@
|
|
|
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
|
/* Copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx */
|
|
3
2
|
import * as React from "react";
|
|
4
3
|
import { Animated, StyleSheet } from "react-native";
|
|
@@ -34,6 +33,21 @@ const Surface = _ref => {
|
|
|
34
33
|
return colors.surface;
|
|
35
34
|
}
|
|
36
35
|
};
|
|
36
|
+
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
37
|
+
...rest,
|
|
38
|
+
style: [{
|
|
39
|
+
backgroundColor: getBackgroundColor(),
|
|
40
|
+
elevation,
|
|
41
|
+
...evalationStyles,
|
|
42
|
+
...restStyle
|
|
43
|
+
}]
|
|
44
|
+
}, children);
|
|
45
|
+
};
|
|
46
|
+
export default withTheme(Surface);erlay(elevation, colors.surface);
|
|
47
|
+
} else {
|
|
48
|
+
return colors.surface;
|
|
49
|
+
}
|
|
50
|
+
};
|
|
37
51
|
return /*#__PURE__*/React.createElement(Animated.View, _extends({}, rest, {
|
|
38
52
|
style: [{
|
|
39
53
|
backgroundColor: getBackgroundColor(),
|
|
@@ -1,7 +1,3 @@
|
|
|
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
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
3
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
4
|
-
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
5
1
|
import * as React from "react";
|
|
6
2
|
import { View, Animated, TextInput as NativeTextInput, StyleSheet, Text, I18nManager } from "react-native";
|
|
7
3
|
import { withTheme } from "../theming";
|
|
@@ -13,7 +9,7 @@ const ICON_SIZE = 24;
|
|
|
13
9
|
class TextField extends React.Component {
|
|
14
10
|
constructor() {
|
|
15
11
|
super(...arguments);
|
|
16
|
-
|
|
12
|
+
this.state = {
|
|
17
13
|
nativeProps: {},
|
|
18
14
|
labeled: new Animated.Value(this.props.value || this.props.error ? 0 : 1),
|
|
19
15
|
focused: false,
|
|
@@ -22,47 +18,46 @@ class TextField extends React.Component {
|
|
|
22
18
|
measured: false,
|
|
23
19
|
width: 0
|
|
24
20
|
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
};
|
|
22
|
+
this._timer = setTimeout(() => {}, 0);
|
|
23
|
+
this._showPlaceholder = () => {
|
|
28
24
|
clearTimeout(this._timer);
|
|
29
|
-
|
|
30
25
|
// Set the placeholder in a delay to offset the label animation
|
|
31
26
|
// If we show it immediately, they'll overlap and look ugly
|
|
32
27
|
this._timer = setTimeout(() => this.setState({
|
|
33
28
|
placeholder: this.props.placeholder
|
|
34
29
|
}), 50);
|
|
35
|
-
}
|
|
36
|
-
|
|
30
|
+
};
|
|
31
|
+
this._hidePlaceholder = () => this.setState({
|
|
37
32
|
placeholder: ""
|
|
38
|
-
})
|
|
39
|
-
|
|
33
|
+
});
|
|
34
|
+
this._restoreLabel = () => Animated.timing(this.state.labeled, {
|
|
40
35
|
toValue: 1,
|
|
41
36
|
duration: FOCUS_ANIMATION_DURATION,
|
|
42
37
|
useNativeDriver: true
|
|
43
|
-
}).start()
|
|
44
|
-
|
|
38
|
+
}).start();
|
|
39
|
+
this._minmizeLabel = () => Animated.timing(this.state.labeled, {
|
|
45
40
|
toValue: 0,
|
|
46
41
|
duration: BLUR_ANIMATION_DURATION,
|
|
47
42
|
useNativeDriver: true
|
|
48
|
-
}).start()
|
|
49
|
-
|
|
43
|
+
}).start();
|
|
44
|
+
this._handleFocus = () => {
|
|
50
45
|
if (this.props.disabled) {
|
|
51
46
|
return;
|
|
52
47
|
}
|
|
53
48
|
this.setState({
|
|
54
49
|
focused: true
|
|
55
50
|
});
|
|
56
|
-
}
|
|
57
|
-
|
|
51
|
+
};
|
|
52
|
+
this._handleBlur = () => {
|
|
58
53
|
if (this.props.disabled) {
|
|
59
54
|
return;
|
|
60
55
|
}
|
|
61
56
|
this.setState({
|
|
62
57
|
focused: false
|
|
63
58
|
});
|
|
64
|
-
}
|
|
65
|
-
|
|
59
|
+
};
|
|
60
|
+
this._handleChangeText = value => {
|
|
66
61
|
if (this.props.disabled) {
|
|
67
62
|
return;
|
|
68
63
|
}
|
|
@@ -77,8 +72,8 @@ class TextField extends React.Component {
|
|
|
77
72
|
});
|
|
78
73
|
this.props.onChangeText && this.props.onChangeText(value.nativeEvent.text);
|
|
79
74
|
}
|
|
80
|
-
}
|
|
81
|
-
|
|
75
|
+
};
|
|
76
|
+
this._root = undefined;
|
|
82
77
|
}
|
|
83
78
|
static getDerivedStateFromProps(nextProps, prevState) {
|
|
84
79
|
return {
|
|
@@ -165,7 +160,9 @@ class TextField extends React.Component {
|
|
|
165
160
|
roundness,
|
|
166
161
|
disabledOpacity
|
|
167
162
|
},
|
|
168
|
-
render = props => /*#__PURE__*/React.createElement(NativeTextInput,
|
|
163
|
+
render = props => /*#__PURE__*/React.createElement(NativeTextInput, {
|
|
164
|
+
...props
|
|
165
|
+
}),
|
|
169
166
|
...rest
|
|
170
167
|
} = this.props;
|
|
171
168
|
const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
|
|
@@ -305,9 +302,10 @@ class TextField extends React.Component {
|
|
|
305
302
|
} = StyleSheet.flatten(style || {});
|
|
306
303
|
return /*#__PURE__*/React.createElement(View, {
|
|
307
304
|
style: [styles.container, styleProp]
|
|
308
|
-
}, leftIconName && leftIconMode === "outset" ? /*#__PURE__*/React.createElement(Icon,
|
|
305
|
+
}, leftIconName && leftIconMode === "outset" ? /*#__PURE__*/React.createElement(Icon, {
|
|
306
|
+
...leftIconProps,
|
|
309
307
|
style: leftIconStyle
|
|
310
|
-
})
|
|
308
|
+
}) : null, /*#__PURE__*/React.createElement(View, {
|
|
311
309
|
style: applyStyles([containerStyle], {
|
|
312
310
|
height: style === null || style === void 0 ? void 0 : style.height,
|
|
313
311
|
backgroundColor: bgColor,
|
|
@@ -375,9 +373,10 @@ class TextField extends React.Component {
|
|
|
375
373
|
style: {
|
|
376
374
|
justifyContent: type === "solid" ? "center" : undefined
|
|
377
375
|
}
|
|
378
|
-
}, /*#__PURE__*/React.createElement(Icon,
|
|
376
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
377
|
+
...leftIconProps,
|
|
379
378
|
style: leftIconStyle
|
|
380
|
-
}))
|
|
379
|
+
})) : null, render({
|
|
381
380
|
ref: c => {
|
|
382
381
|
this._root = c;
|
|
383
382
|
},
|
|
@@ -414,6 +413,57 @@ class TextField extends React.Component {
|
|
|
414
413
|
}
|
|
415
414
|
}
|
|
416
415
|
export default withTheme(TextField);
|
|
416
|
+
const styles = StyleSheet.create({
|
|
417
|
+
container: {
|
|
418
|
+
alignSelf: "stretch"
|
|
419
|
+
},
|
|
420
|
+
placeholder: {
|
|
421
|
+
position: "absolute",
|
|
422
|
+
left: 0
|
|
423
|
+
},
|
|
424
|
+
underline: {
|
|
425
|
+
position: "absolute",
|
|
426
|
+
left: 0,
|
|
427
|
+
right: 0,
|
|
428
|
+
bottom: 0,
|
|
429
|
+
height: 2
|
|
430
|
+
},
|
|
431
|
+
input: {
|
|
432
|
+
flexGrow: 1,
|
|
433
|
+
justifyContent: "center",
|
|
434
|
+
textAlignVertical: "center",
|
|
435
|
+
margin: 0,
|
|
436
|
+
textAlign: I18nManager.isRTL ? "right" : "left"
|
|
437
|
+
}
|
|
438
|
+
});ionColor: activeColor,
|
|
439
|
+
multiline,
|
|
440
|
+
numberOfLines,
|
|
441
|
+
onFocus: this._handleFocus,
|
|
442
|
+
onBlur: this._handleBlur,
|
|
443
|
+
underlineColorAndroid: "transparent",
|
|
444
|
+
style: inputStyles,
|
|
445
|
+
...rest,
|
|
446
|
+
...this.state.nativeProps,
|
|
447
|
+
value: this.state.value
|
|
448
|
+
})), rightIconName ? /*#__PURE__*/React.createElement(Icon, {
|
|
449
|
+
name: rightIconName,
|
|
450
|
+
size: ICON_SIZE,
|
|
451
|
+
color: colors.light,
|
|
452
|
+
style: {
|
|
453
|
+
position: "absolute",
|
|
454
|
+
right: 16,
|
|
455
|
+
marginTop: type === "solid" ? MINIMIZED_LABEL_FONT_SIZE + 4 : 16
|
|
456
|
+
}
|
|
457
|
+
}) : null, assistiveText ? /*#__PURE__*/React.createElement(Text, {
|
|
458
|
+
style: [{
|
|
459
|
+
color: error ? colors.error : colors.light,
|
|
460
|
+
marginTop: 8,
|
|
461
|
+
marginLeft: assistiveTextLeftMargin
|
|
462
|
+
}]
|
|
463
|
+
}, assistiveText) : null);
|
|
464
|
+
}
|
|
465
|
+
}
|
|
466
|
+
export default withTheme(TextField);
|
|
417
467
|
const styles = StyleSheet.create({
|
|
418
468
|
container: {
|
|
419
469
|
alignSelf: "stretch"
|
|
@@ -1,4 +1,3 @@
|
|
|
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
|
import * as React from "react";
|
|
3
2
|
import { withTheme } from "../theming";
|
|
4
3
|
import { StyleSheet } from "react-native";
|
|
@@ -38,13 +37,28 @@ const ToggleButton = _ref => {
|
|
|
38
37
|
setInternalValue(!internalValue);
|
|
39
38
|
onPress(!internalValue);
|
|
40
39
|
};
|
|
41
|
-
return /*#__PURE__*/React.createElement(IconButton,
|
|
40
|
+
return /*#__PURE__*/React.createElement(IconButton, {
|
|
42
41
|
Icon: Icon,
|
|
43
42
|
icon: icon,
|
|
44
43
|
size: iconSize,
|
|
45
44
|
color: internalValue ? colors[color] : colors[colorSecondary],
|
|
46
45
|
onPress: handlePress,
|
|
47
46
|
disabled: disabled,
|
|
47
|
+
style: [styles.mainContainer, {
|
|
48
|
+
width,
|
|
49
|
+
height,
|
|
50
|
+
backgroundColor: internalValue ? colors[colorSecondary] : colors[color],
|
|
51
|
+
borderColor: colors[borderColor]
|
|
52
|
+
}, style],
|
|
53
|
+
...rest
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
const styles = StyleSheet.create({
|
|
57
|
+
mainContainer: {
|
|
58
|
+
borderWidth: 1
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
export default withTheme(ToggleButton);: disabled,
|
|
48
62
|
style: [styles.mainContainer, {
|
|
49
63
|
width,
|
|
50
64
|
height,
|
|
@@ -1,4 +1,3 @@
|
|
|
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
|
import React from "react";
|
|
3
2
|
import { Pressable } from "react-native";
|
|
4
3
|
export default function Touchable(_ref) {
|
|
@@ -13,8 +12,22 @@ export default function Touchable(_ref) {
|
|
|
13
12
|
style,
|
|
14
13
|
...props
|
|
15
14
|
} = _ref;
|
|
16
|
-
return /*#__PURE__*/React.createElement(Pressable,
|
|
15
|
+
return /*#__PURE__*/React.createElement(Pressable, {
|
|
17
16
|
disabled: disabled,
|
|
17
|
+
onPress: onPress,
|
|
18
|
+
delayLongPress: delayLongPress ? delayLongPress : 500,
|
|
19
|
+
hitSlop: hitSlop ? hitSlop : 8,
|
|
20
|
+
style: _ref2 => {
|
|
21
|
+
let {
|
|
22
|
+
pressed
|
|
23
|
+
} = _ref2;
|
|
24
|
+
return [{
|
|
25
|
+
opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1
|
|
26
|
+
}, style];
|
|
27
|
+
},
|
|
28
|
+
...props
|
|
29
|
+
}, children);
|
|
30
|
+
} disabled: disabled,
|
|
18
31
|
onPress: onPress,
|
|
19
32
|
delayLongPress: delayLongPress ? delayLongPress : 500,
|
|
20
33
|
hitSlop: hitSlop ? hitSlop : 8,
|
package/lib/module/constants.js
CHANGED
|
@@ -17,9 +17,7 @@ export const SEED_DATA = {
|
|
|
17
17
|
}),
|
|
18
18
|
fieldName: createFieldNameProp({
|
|
19
19
|
defaultValue: "ratingValue",
|
|
20
|
-
// this is the name of the variable declared on the screen in Draftbit
|
|
21
20
|
handlerPropName: "onPress",
|
|
22
|
-
// the change handler prop in this component
|
|
23
21
|
valuePropName: "rating" // the value prop in this component
|
|
24
22
|
}),
|
|
25
23
|
|
|
@@ -43,4 +41,11 @@ export const SEED_DATA = {
|
|
|
43
41
|
defaultValue: "divider"
|
|
44
42
|
})
|
|
45
43
|
}
|
|
44
|
+
};primary"
|
|
45
|
+
}),
|
|
46
|
+
inactiveColor: createColorProp({
|
|
47
|
+
label: "Inactive Color",
|
|
48
|
+
defaultValue: "divider"
|
|
49
|
+
})
|
|
50
|
+
}
|
|
46
51
|
};
|
package/lib/module/utilities.js
CHANGED
|
@@ -44,7 +44,6 @@ export function extractBorderAndMarginStyles(style, additionalBorderStyles, addi
|
|
|
44
44
|
marginStyles
|
|
45
45
|
};
|
|
46
46
|
}
|
|
47
|
-
|
|
48
47
|
/**
|
|
49
48
|
* Merges a style object on top of another style object. In React Native,
|
|
50
49
|
* keys with undefined values in a style object will still override styles
|
|
@@ -75,6 +74,6 @@ export function getValueForRadioButton(value) {
|
|
|
75
74
|
} else if (isNumber(value)) {
|
|
76
75
|
return String(value);
|
|
77
76
|
} else {
|
|
78
|
-
throw new Error(
|
|
77
|
+
throw new Error(`Invalid value: ${value}`);
|
|
79
78
|
}
|
|
80
|
-
}
|
|
79
|
+
}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "46.6.
|
|
3
|
+
"version": "46.6.6",
|
|
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.6.
|
|
44
|
+
"@draftbit/types": "^46.6.6",
|
|
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": "1aa46d395f6b9926de0025de6479f1aed37dc0c5"
|
|
95
95
|
}
|