@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.
Files changed (80) hide show
  1. package/lib/commonjs/components/CardBlock.js +13 -4
  2. package/lib/commonjs/components/CardContainerRating.js +13 -4
  3. package/lib/commonjs/components/Carousel.js +1 -2
  4. package/lib/commonjs/components/Checkbox/Checkbox.js +22 -4
  5. package/lib/commonjs/components/Checkbox/CheckboxGroupRow.js +23 -5
  6. package/lib/commonjs/components/Checkbox/CheckboxRow.js +23 -6
  7. package/lib/commonjs/components/Config.js +3 -3
  8. package/lib/commonjs/components/Container.js +15 -4
  9. package/lib/commonjs/components/DatePicker/DatePicker.js +29 -16
  10. package/lib/commonjs/components/DeprecatedFAB.js +21 -3
  11. package/lib/commonjs/components/Divider.js +14 -1
  12. package/lib/commonjs/components/FAB.js +18 -4
  13. package/lib/commonjs/components/FormRow.js +16 -2
  14. package/lib/commonjs/components/IconButton.js +19 -4
  15. package/lib/commonjs/components/Image.js +17 -2
  16. package/lib/commonjs/components/Layout.js +40 -19
  17. package/lib/commonjs/components/Picker/Picker.js +4 -4
  18. package/lib/commonjs/components/Picker/PickerComponent.android.js +2 -2
  19. package/lib/commonjs/components/Picker/PickerComponent.ios.js +2 -2
  20. package/lib/commonjs/components/Picker/PickerComponent.web.js +19 -4
  21. package/lib/commonjs/components/Portal/PortalHost.js +44 -15
  22. package/lib/commonjs/components/Portal/PortalManager.js +34 -8
  23. package/lib/commonjs/components/Pressable.js +15 -2
  24. package/lib/commonjs/components/ProgressBar.js +37 -7
  25. package/lib/commonjs/components/RadioButton/RadioButton.js +1 -1
  26. package/lib/commonjs/components/RadioButton/RadioButtonFieldGroup.js +9 -1
  27. package/lib/commonjs/components/RadioButton/RadioButtonRow.js +1 -1
  28. package/lib/commonjs/components/ScreenContainer.js +20 -4
  29. package/lib/commonjs/components/StepIndicator.js +58 -19
  30. package/lib/commonjs/components/Stepper.js +2 -1
  31. package/lib/commonjs/components/Surface.js +14 -2
  32. package/lib/commonjs/components/Switch.js +19 -10
  33. package/lib/commonjs/components/TextField.js +76 -28
  34. package/lib/commonjs/components/ToggleButton.js +15 -2
  35. package/lib/commonjs/components/Touchable.js +15 -2
  36. package/lib/commonjs/constants.js +1 -1
  37. package/lib/commonjs/mappings/FieldSearchBarFull.js +3 -1
  38. package/lib/commonjs/utilities.js +2 -3
  39. package/lib/module/components/Accordion/AccordionItem.js +25 -4
  40. package/lib/module/components/AnimatedCircularProgress.js +13 -1
  41. package/lib/module/components/AspectRatio.js +18 -1
  42. package/lib/module/components/AvatarEdit.js +15 -4
  43. package/lib/module/components/CardContainerRating.js +14 -4
  44. package/lib/module/components/CardContainerShortImage.js +18 -4
  45. package/lib/module/components/Carousel.js +1 -2
  46. package/lib/module/components/Checkbox/Checkbox.js +25 -4
  47. package/lib/module/components/Checkbox/CheckboxGroup.js +16 -2
  48. package/lib/module/components/CircleImage.js +16 -1
  49. package/lib/module/components/CircularProgress.js +28 -8
  50. package/lib/module/components/Config.js +3 -3
  51. package/lib/module/components/Container.js +17 -4
  52. package/lib/module/components/DatePicker/DatePicker.js +30 -16
  53. package/lib/module/components/DeprecatedCardWrapper.js +18 -1
  54. package/lib/module/components/DeprecatedFAB.js +23 -3
  55. package/lib/module/components/Elevation.js +14 -2
  56. package/lib/module/components/FAB.js +22 -4
  57. package/lib/module/components/FieldSearchBarFull.js +1 -2
  58. package/lib/module/components/IconButton.js +21 -4
  59. package/lib/module/components/Picker/Picker.js +4 -4
  60. package/lib/module/components/Picker/PickerComponent.android.js +2 -2
  61. package/lib/module/components/Picker/PickerComponent.ios.js +2 -2
  62. package/lib/module/components/Picker/PickerComponent.web.js +19 -4
  63. package/lib/module/components/Portal/Portal.js +28 -3
  64. package/lib/module/components/Portal/PortalHost.js +45 -15
  65. package/lib/module/components/Portal/PortalManager.js +33 -7
  66. package/lib/module/components/ProgressBar.js +39 -7
  67. package/lib/module/components/RadioButton/RadioButton.js +1 -1
  68. package/lib/module/components/RadioButton/RadioButtonFieldGroup.js +10 -1
  69. package/lib/module/components/RadioButton/RadioButtonRow.js +1 -1
  70. package/lib/module/components/RadioButton/context.js +1 -1
  71. package/lib/module/components/StarRating.js +24 -4
  72. package/lib/module/components/StepIndicator.js +1 -1
  73. package/lib/module/components/Surface.js +15 -1
  74. package/lib/module/components/TextField.js +78 -28
  75. package/lib/module/components/ToggleButton.js +16 -2
  76. package/lib/module/components/Touchable.js +15 -2
  77. package/lib/module/constants.js +1 -0
  78. package/lib/module/mappings/StarRating.js +7 -2
  79. package/lib/module/utilities.js +2 -3
  80. 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
- _defineProperty(this, "state", {
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
- _defineProperty(this, "_timer", setTimeout(() => {}, 0));
27
- _defineProperty(this, "_showPlaceholder", () => {
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
- _defineProperty(this, "_hidePlaceholder", () => this.setState({
30
+ };
31
+ this._hidePlaceholder = () => this.setState({
37
32
  placeholder: ""
38
- }));
39
- _defineProperty(this, "_restoreLabel", () => Animated.timing(this.state.labeled, {
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
- _defineProperty(this, "_minmizeLabel", () => Animated.timing(this.state.labeled, {
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
- _defineProperty(this, "_handleFocus", () => {
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
- _defineProperty(this, "_handleBlur", () => {
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
- _defineProperty(this, "_handleChangeText", value => {
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
- _defineProperty(this, "_root", undefined);
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, props),
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, _extends({}, leftIconProps, {
305
+ }, leftIconName && leftIconMode === "outset" ? /*#__PURE__*/React.createElement(Icon, {
306
+ ...leftIconProps,
309
307
  style: leftIconStyle
310
- })) : null, /*#__PURE__*/React.createElement(View, {
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, _extends({}, leftIconProps, {
376
+ }, /*#__PURE__*/React.createElement(Icon, {
377
+ ...leftIconProps,
379
378
  style: leftIconStyle
380
- }))) : null, render({
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, _extends({
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, _extends({
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,
@@ -6,4 +6,5 @@ const DEFAULT_STATUSBAR_HEIGHT_EXPO = expo !== null && expo !== void 0 && expo.C
6
6
  export const APPROX_STATUSBAR_HEIGHT = Platform.select({
7
7
  android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
8
8
  ios: Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0
9
+ });O : 0
9
10
  });
@@ -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
  };
@@ -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("Invalid value: ".concat(value));
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.5-427e0d.2+427e0db",
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.5-427e0d.2+427e0db",
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": "427e0dbd70a5afc4843e2b1fbe72ba415f0abbe9"
94
+ "gitHead": "1aa46d395f6b9926de0025de6479f1aed37dc0c5"
95
95
  }