@draftbit/core 46.8.2-0a0db3.2 → 46.8.2-2fe7f4.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.
Files changed (40) hide show
  1. package/lib/commonjs/components/AnimatedCircularProgress.js +1 -12
  2. package/lib/commonjs/components/AspectRatio.js +1 -17
  3. package/lib/commonjs/components/Banner.js +4 -23
  4. package/lib/commonjs/components/Checkbox/CheckboxGroupRow.js +5 -23
  5. package/lib/commonjs/components/Checkbox/context.js +1 -1
  6. package/lib/commonjs/components/CircleImage.js +1 -15
  7. package/lib/commonjs/components/CircularProgress.js +8 -26
  8. package/lib/commonjs/components/Container.js +4 -15
  9. package/lib/commonjs/components/DeprecatedCardWrapper.js +1 -15
  10. package/lib/commonjs/components/DeprecatedFAB.js +3 -21
  11. package/lib/commonjs/components/Divider.js +1 -14
  12. package/lib/commonjs/components/Elevation.js +2 -14
  13. package/lib/commonjs/components/FormRow.js +2 -16
  14. package/lib/commonjs/components/IconButton.js +4 -19
  15. package/lib/commonjs/components/Image.js +2 -17
  16. package/lib/commonjs/components/Layout.js +19 -40
  17. package/lib/commonjs/components/Picker/PickerComponent.web.js +3 -20
  18. package/lib/commonjs/components/Portal/PortalConsumer.js +7 -22
  19. package/lib/commonjs/components/Portal/PortalHost.js +15 -44
  20. package/lib/commonjs/components/Portal/PortalManager.js +8 -34
  21. package/lib/commonjs/components/Pressable.js +2 -15
  22. package/lib/commonjs/components/ProgressBar.js +7 -37
  23. package/lib/commonjs/components/RadioButton/RadioButton.js +2 -13
  24. package/lib/commonjs/components/RadioButton/RadioButtonFieldGroup.js +1 -9
  25. package/lib/commonjs/components/RadioButton/RadioButtonGroup.js +2 -15
  26. package/lib/commonjs/components/RadioButton/RadioButtonRow.js +5 -23
  27. package/lib/commonjs/components/ScreenContainer.js +6 -24
  28. package/lib/commonjs/components/StarRating.js +4 -23
  29. package/lib/commonjs/components/StepIndicator.js +18 -57
  30. package/lib/commonjs/components/Surface.js +2 -14
  31. package/lib/commonjs/components/Switch.js +10 -19
  32. package/lib/commonjs/components/TabView/TabView.js +18 -18
  33. package/lib/commonjs/components/Text.js +4 -50
  34. package/lib/commonjs/components/TextField.js +28 -76
  35. package/lib/commonjs/components/Touchable.js +2 -15
  36. package/lib/module/components/TabView/TabView.js +11 -1
  37. package/lib/typescript/src/components/TabView/TabView.d.ts.map +1 -1
  38. package/package.json +3 -3
  39. package/src/components/TabView/TabView.js +5 -2
  40. package/src/components/TabView/TabView.tsx +11 -1
@@ -10,6 +10,10 @@ var _theming = require("../theming");
10
10
  var _utilities = require("../utilities");
11
11
  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); }
12
12
  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; }
13
+ 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
+ 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; }
15
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
16
+ 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); }
13
17
  const AnimatedText = _reactNative.Animated.createAnimatedComponent(_reactNative.Text);
14
18
  const FOCUS_ANIMATION_DURATION = 150;
15
19
  const BLUR_ANIMATION_DURATION = 180;
@@ -17,7 +21,7 @@ const ICON_SIZE = 24;
17
21
  class TextField extends React.Component {
18
22
  constructor() {
19
23
  super(...arguments);
20
- this.state = {
24
+ _defineProperty(this, "state", {
21
25
  nativeProps: {},
22
26
  labeled: new _reactNative.Animated.Value(this.props.value || this.props.error ? 0 : 1),
23
27
  focused: false,
@@ -26,46 +30,47 @@ class TextField extends React.Component {
26
30
  measured: false,
27
31
  width: 0
28
32
  }
29
- };
30
- this._timer = setTimeout(() => {}, 0);
31
- this._showPlaceholder = () => {
33
+ });
34
+ _defineProperty(this, "_timer", setTimeout(() => {}, 0));
35
+ _defineProperty(this, "_showPlaceholder", () => {
32
36
  clearTimeout(this._timer);
37
+
33
38
  // Set the placeholder in a delay to offset the label animation
34
39
  // If we show it immediately, they'll overlap and look ugly
35
40
  this._timer = setTimeout(() => this.setState({
36
41
  placeholder: this.props.placeholder
37
42
  }), 50);
38
- };
39
- this._hidePlaceholder = () => this.setState({
40
- placeholder: ""
41
43
  });
42
- this._restoreLabel = () => _reactNative.Animated.timing(this.state.labeled, {
44
+ _defineProperty(this, "_hidePlaceholder", () => this.setState({
45
+ placeholder: ""
46
+ }));
47
+ _defineProperty(this, "_restoreLabel", () => _reactNative.Animated.timing(this.state.labeled, {
43
48
  toValue: 1,
44
49
  duration: FOCUS_ANIMATION_DURATION,
45
50
  useNativeDriver: true
46
- }).start();
47
- this._minmizeLabel = () => _reactNative.Animated.timing(this.state.labeled, {
51
+ }).start());
52
+ _defineProperty(this, "_minmizeLabel", () => _reactNative.Animated.timing(this.state.labeled, {
48
53
  toValue: 0,
49
54
  duration: BLUR_ANIMATION_DURATION,
50
55
  useNativeDriver: true
51
- }).start();
52
- this._handleFocus = () => {
56
+ }).start());
57
+ _defineProperty(this, "_handleFocus", () => {
53
58
  if (this.props.disabled) {
54
59
  return;
55
60
  }
56
61
  this.setState({
57
62
  focused: true
58
63
  });
59
- };
60
- this._handleBlur = () => {
64
+ });
65
+ _defineProperty(this, "_handleBlur", () => {
61
66
  if (this.props.disabled) {
62
67
  return;
63
68
  }
64
69
  this.setState({
65
70
  focused: false
66
71
  });
67
- };
68
- this._handleChangeText = value => {
72
+ });
73
+ _defineProperty(this, "_handleChangeText", value => {
69
74
  if (this.props.disabled) {
70
75
  return;
71
76
  }
@@ -80,8 +85,8 @@ class TextField extends React.Component {
80
85
  });
81
86
  this.props.onChangeText && this.props.onChangeText(value.nativeEvent.text);
82
87
  }
83
- };
84
- this._root = undefined;
88
+ });
89
+ _defineProperty(this, "_root", undefined);
85
90
  }
86
91
  static getDerivedStateFromProps(nextProps, prevState) {
87
92
  return {
@@ -168,9 +173,7 @@ class TextField extends React.Component {
168
173
  roundness,
169
174
  disabledOpacity
170
175
  },
171
- render = props => /*#__PURE__*/React.createElement(_reactNative.TextInput, {
172
- ...props
173
- }),
176
+ render = props => /*#__PURE__*/React.createElement(_reactNative.TextInput, props),
174
177
  ...rest
175
178
  } = this.props;
176
179
  const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
@@ -310,10 +313,9 @@ class TextField extends React.Component {
310
313
  } = _reactNative.StyleSheet.flatten(style || {});
311
314
  return /*#__PURE__*/React.createElement(_reactNative.View, {
312
315
  style: [styles.container, styleProp]
313
- }, leftIconName && leftIconMode === "outset" ? /*#__PURE__*/React.createElement(Icon, {
314
- ...leftIconProps,
316
+ }, leftIconName && leftIconMode === "outset" ? /*#__PURE__*/React.createElement(Icon, _extends({}, leftIconProps, {
315
317
  style: leftIconStyle
316
- }) : null, /*#__PURE__*/React.createElement(_reactNative.View, {
318
+ })) : null, /*#__PURE__*/React.createElement(_reactNative.View, {
317
319
  style: (0, _utilities.applyStyles)([containerStyle], {
318
320
  height: style === null || style === void 0 ? void 0 : style.height,
319
321
  backgroundColor: bgColor,
@@ -381,10 +383,9 @@ class TextField extends React.Component {
381
383
  style: {
382
384
  justifyContent: type === "solid" ? "center" : undefined
383
385
  }
384
- }, /*#__PURE__*/React.createElement(Icon, {
385
- ...leftIconProps,
386
+ }, /*#__PURE__*/React.createElement(Icon, _extends({}, leftIconProps, {
386
387
  style: leftIconStyle
387
- })) : null, render({
388
+ }))) : null, render({
388
389
  ref: c => {
389
390
  this._root = c;
390
391
  },
@@ -422,55 +423,6 @@ class TextField extends React.Component {
422
423
  }
423
424
  var _default = (0, _theming.withTheme)(TextField);
424
425
  exports.default = _default;
425
- const styles = _reactNative.StyleSheet.create({
426
- container: {
427
- alignSelf: "stretch"
428
- },
429
- placeholder: {
430
- position: "absolute",
431
- left: 0
432
- },
433
- underline: {
434
- position: "absolute",
435
- left: 0,
436
- right: 0,
437
- bottom: 0,
438
- height: 2
439
- },
440
- input: {
441
- flexGrow: 1,
442
- justifyContent: "center",
443
- textAlignVertical: "center",
444
- margin: 0,
445
- textAlign: _reactNative.I18nManager.isRTL ? "right" : "left"
446
- }
447
- });_handleFocus,
448
- onBlur: this._handleBlur,
449
- underlineColorAndroid: "transparent",
450
- style: inputStyles,
451
- ...rest,
452
- ...this.state.nativeProps,
453
- value: this.state.value
454
- })), rightIconName ? /*#__PURE__*/React.createElement(Icon, {
455
- name: rightIconName,
456
- size: ICON_SIZE,
457
- color: colors.light,
458
- style: {
459
- position: "absolute",
460
- right: 16,
461
- marginTop: type === "solid" ? MINIMIZED_LABEL_FONT_SIZE + 4 : 16
462
- }
463
- }) : null, assistiveText ? /*#__PURE__*/React.createElement(_reactNative.Text, {
464
- style: [{
465
- color: error ? colors.error : colors.light,
466
- marginTop: 8,
467
- marginLeft: assistiveTextLeftMargin
468
- }]
469
- }, assistiveText) : null);
470
- }
471
- }
472
- var _default = (0, _theming.withTheme)(TextField);
473
- exports.default = _default;
474
426
  const styles = _reactNative.StyleSheet.create({
475
427
  container: {
476
428
  alignSelf: "stretch"
@@ -7,6 +7,7 @@ exports.default = Touchable;
7
7
  var _react = _interopRequireDefault(require("react"));
8
8
  var _reactNative = require("react-native");
9
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
+ 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); }
10
11
  function Touchable(_ref) {
11
12
  let {
12
13
  children,
@@ -19,22 +20,8 @@ function Touchable(_ref) {
19
20
  style,
20
21
  ...props
21
22
  } = _ref;
22
- return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
23
+ return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, _extends({
23
24
  disabled: disabled,
24
- onPress: onPress,
25
- delayLongPress: delayLongPress ? delayLongPress : 500,
26
- hitSlop: hitSlop ? hitSlop : 8,
27
- style: _ref2 => {
28
- let {
29
- pressed
30
- } = _ref2;
31
- return [{
32
- opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1
33
- }, style];
34
- },
35
- ...props
36
- }, children);
37
- } disabled: disabled,
38
25
  onPress: onPress,
39
26
  delayLongPress: delayLongPress ? delayLongPress : 500,
40
27
  hitSlop: hitSlop ? hitSlop : 8,
@@ -76,6 +76,7 @@ const TabViewComponent = _ref => {
76
76
  color
77
77
  } = _ref2;
78
78
  return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
79
+ style: styles.icon,
79
80
  name: route.icon,
80
81
  color: color,
81
82
  size: 16
@@ -83,7 +84,8 @@ const TabViewComponent = _ref => {
83
84
  },
84
85
  style: {
85
86
  backgroundColor: tabsBackgroundColor || theme.colors.background
86
- }
87
+ },
88
+ contentContainerStyle: styles.tabBarContainer
87
89
  }));
88
90
  };
89
91
 
@@ -108,6 +110,14 @@ const TabViewComponent = _ref => {
108
110
  const styles = StyleSheet.create({
109
111
  tabView: {
110
112
  flex: 1
113
+ },
114
+ //Prevent height of bar from filling container
115
+ tabBarContainer: {
116
+ flex: undefined
117
+ },
118
+ icon: {
119
+ width: 16,
120
+ height: 16
111
121
  }
112
122
  });
113
123
  export default withTheme(TabViewComponent);
@@ -1 +1 @@
1
- {"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../../../src/components/TabView/TabView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AAWhE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAMvD,aAAK,cAAc,GAAG,KAAK,GAAG,QAAQ,CAAC;AACvC,aAAK,mBAAmB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvD,aAAK,YAAY,GAAG;IAClB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;CACd,GAAG,QAAQ,CAAC;;;;AAiHb,wBAA2C"}
1
+ {"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../../../src/components/TabView/TabView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AAWhE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAMvD,aAAK,cAAc,GAAG,KAAK,GAAG,QAAQ,CAAC;AACvC,aAAK,mBAAmB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvD,aAAK,YAAY,GAAG;IAClB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;CACd,GAAG,QAAQ,CAAC;;;;AA2Hb,wBAA2C"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@draftbit/core",
3
- "version": "46.8.2-0a0db3.2+0a0db3b",
3
+ "version": "46.8.2-2fe7f4.2+2fe7f49",
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.8.2-0a0db3.2+0a0db3b",
44
+ "@draftbit/types": "^46.8.2-2fe7f4.2+2fe7f49",
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",
@@ -94,5 +94,5 @@
94
94
  ]
95
95
  ]
96
96
  },
97
- "gitHead": "0a0db3be11947a0ea8b922d741a9c2604a0e6748"
97
+ "gitHead": "2fe7f498ea206b3d2f0103d25975d06e235a7fec"
98
98
  }
@@ -42,9 +42,9 @@ const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, tabBarPosition,
42
42
  const renderTabBar = (props) => {
43
43
  return (React.createElement(TabBar, { ...props, activeColor: activeColor || theme.colors.primary, inactiveColor: inactiveColor || theme.colors.divider, pressColor: pressColor || theme.colors.primary, scrollEnabled: scrollEnabled, indicatorStyle: {
44
44
  backgroundColor: indicatorColor || theme.colors.primary,
45
- }, labelStyle: textStyles, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: 16 })) : null, style: {
45
+ }, labelStyle: textStyles, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { style: styles.icon, name: route.icon, color: color, size: 16 })) : null, style: {
46
46
  backgroundColor: tabsBackgroundColor || theme.colors.background,
47
- } }));
47
+ }, contentContainerStyle: styles.tabBarContainer }));
48
48
  };
49
49
  //Cannot render TabView without at least one tab
50
50
  if (!routes.length) {
@@ -54,5 +54,8 @@ const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, tabBarPosition,
54
54
  };
55
55
  const styles = StyleSheet.create({
56
56
  tabView: { flex: 1 },
57
+ //Prevent height of bar from filling container
58
+ tabBarContainer: { flex: undefined },
59
+ icon: { width: 16, height: 16 },
57
60
  });
58
61
  export default withTheme(TabViewComponent);
@@ -115,12 +115,18 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
115
115
  labelStyle={textStyles}
116
116
  renderIcon={({ route, color }) =>
117
117
  route?.icon ? (
118
- <Icon name={route.icon} color={color} size={16} />
118
+ <Icon
119
+ style={styles.icon}
120
+ name={route.icon}
121
+ color={color}
122
+ size={16}
123
+ />
119
124
  ) : null
120
125
  }
121
126
  style={{
122
127
  backgroundColor: tabsBackgroundColor || theme.colors.background,
123
128
  }}
129
+ contentContainerStyle={styles.tabBarContainer}
124
130
  />
125
131
  );
126
132
  };
@@ -146,6 +152,10 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
146
152
 
147
153
  const styles = StyleSheet.create({
148
154
  tabView: { flex: 1 },
155
+
156
+ //Prevent height of bar from filling container
157
+ tabBarContainer: { flex: undefined },
158
+ icon: { width: 16, height: 16 },
149
159
  });
150
160
 
151
161
  export default withTheme(TabViewComponent);