@draftbit/core 47.0.1-2f600c.2 → 47.0.1-411297.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 (80) hide show
  1. package/lib/commonjs/components/AspectRatio.js +1 -17
  2. package/lib/commonjs/components/Button.js +3 -3
  3. package/lib/commonjs/components/Checkbox/Checkbox.js +3 -1
  4. package/lib/commonjs/components/Checkbox/CheckboxGroupRow.js +2 -1
  5. package/lib/commonjs/components/Checkbox/CheckboxRow.js +2 -1
  6. package/lib/commonjs/components/DeprecatedButton.js +27 -3
  7. package/lib/commonjs/components/DeprecatedFAB.js +2 -1
  8. package/lib/commonjs/components/Touchable.js +3 -8
  9. package/lib/commonjs/constants.js +1 -1
  10. package/lib/commonjs/mappings/Button.js +10 -39
  11. package/lib/commonjs/mappings/FlashList.js +45 -2
  12. package/lib/commonjs/mappings/FlatList.js +12 -0
  13. package/lib/commonjs/mappings/Touchable.js +7 -47
  14. package/lib/module/components/Accordion/AccordionItem.js +4 -25
  15. package/lib/module/components/AnimatedCircularProgress.js +1 -13
  16. package/lib/module/components/Button.js +3 -3
  17. package/lib/module/components/Checkbox/Checkbox.js +6 -4
  18. package/lib/module/components/Checkbox/CheckboxGroupRow.js +7 -25
  19. package/lib/module/components/Checkbox/CheckboxRow.js +8 -25
  20. package/lib/module/components/DeprecatedButton.js +28 -4
  21. package/lib/module/components/DeprecatedCardWrapper.js +1 -18
  22. package/lib/module/components/DeprecatedFAB.js +3 -2
  23. package/lib/module/components/NumberInput.js +3 -12
  24. package/lib/module/components/Portal/Portal.js +6 -2
  25. package/lib/module/components/ProgressBar.js +7 -39
  26. package/lib/module/components/Switch.js +10 -21
  27. package/lib/module/components/Touchable.js +3 -8
  28. package/lib/module/constants.js +0 -1
  29. package/lib/module/mappings/Button.js +11 -40
  30. package/lib/module/mappings/FlashList.js +46 -3
  31. package/lib/module/mappings/FlatList.js +13 -1
  32. package/lib/module/mappings/Touchable.js +9 -49
  33. package/lib/typescript/src/components/Button.d.ts.map +1 -1
  34. package/lib/typescript/src/components/Checkbox/Checkbox.d.ts +2 -2
  35. package/lib/typescript/src/components/Checkbox/Checkbox.d.ts.map +1 -1
  36. package/lib/typescript/src/components/Checkbox/CheckboxGroupRow.d.ts.map +1 -1
  37. package/lib/typescript/src/components/Checkbox/CheckboxRow.d.ts.map +1 -1
  38. package/lib/typescript/src/components/DeprecatedButton.d.ts +2 -2
  39. package/lib/typescript/src/components/DeprecatedButton.d.ts.map +1 -1
  40. package/lib/typescript/src/components/DeprecatedFAB.d.ts +2 -2
  41. package/lib/typescript/src/components/DeprecatedFAB.d.ts.map +1 -1
  42. package/lib/typescript/src/components/Touchable.d.ts +2 -7
  43. package/lib/typescript/src/components/Touchable.d.ts.map +1 -1
  44. package/lib/typescript/src/mappings/Button.d.ts +4 -113
  45. package/lib/typescript/src/mappings/Button.d.ts.map +1 -1
  46. package/lib/typescript/src/mappings/FlashList.d.ts +112 -2
  47. package/lib/typescript/src/mappings/FlashList.d.ts.map +1 -1
  48. package/lib/typescript/src/mappings/FlatList.d.ts +42 -0
  49. package/lib/typescript/src/mappings/FlatList.d.ts.map +1 -1
  50. package/lib/typescript/src/mappings/Touchable.d.ts +5 -59
  51. package/lib/typescript/src/mappings/Touchable.d.ts.map +1 -1
  52. package/package.json +3 -3
  53. package/src/components/Button.js +3 -3
  54. package/src/components/Button.tsx +4 -14
  55. package/src/components/Checkbox/Checkbox.js +3 -2
  56. package/src/components/Checkbox/Checkbox.tsx +7 -5
  57. package/src/components/Checkbox/CheckboxGroupRow.js +3 -2
  58. package/src/components/Checkbox/CheckboxGroupRow.tsx +3 -3
  59. package/src/components/Checkbox/CheckboxRow.js +3 -2
  60. package/src/components/Checkbox/CheckboxRow.tsx +3 -3
  61. package/src/components/DeprecatedButton.js +16 -4
  62. package/src/components/DeprecatedButton.tsx +31 -7
  63. package/src/components/DeprecatedFAB.js +3 -2
  64. package/src/components/DeprecatedFAB.tsx +5 -5
  65. package/src/components/Touchable.js +3 -3
  66. package/src/components/Touchable.tsx +4 -14
  67. package/src/mappings/Button.js +10 -39
  68. package/src/mappings/Button.ts +10 -41
  69. package/src/mappings/FlashList.js +77 -31
  70. package/src/mappings/FlashList.ts +82 -30
  71. package/src/mappings/FlatList.js +13 -1
  72. package/src/mappings/FlatList.ts +16 -0
  73. package/src/mappings/Touchable.js +7 -50
  74. package/src/mappings/Touchable.ts +6 -53
  75. package/lib/commonjs/components/Pressable.js +0 -37
  76. package/lib/module/components/Pressable.js +0 -30
  77. package/lib/typescript/src/components/Pressable.d.ts +0 -16
  78. package/lib/typescript/src/components/Pressable.d.ts.map +0 -1
  79. package/src/components/Pressable.js +0 -12
  80. package/src/components/Pressable.tsx +0 -50
@@ -7,6 +7,7 @@ exports.default = void 0;
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
  const AspectRatio = props => {
11
12
  const [layout, setLayout] = _react.default.useState(null);
12
13
  const {
@@ -33,23 +34,6 @@ const AspectRatio = props => {
33
34
  });
34
35
  }
35
36
  }
36
- return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
37
- ...props,
38
- style: style,
39
- onLayout: _ref => {
40
- let {
41
- nativeEvent: {
42
- layout: l
43
- }
44
- } = _ref;
45
- return setLayout(l);
46
- }
47
- }, props.children);
48
- };
49
- var _default = AspectRatio;
50
- exports.default = _default; });
51
- }
52
- }
53
37
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({}, props, {
54
38
  style: style,
55
39
  onLayout: _ref => {
@@ -21,11 +21,10 @@ function Base(_ref) {
21
21
  Icon,
22
22
  icon,
23
23
  title,
24
+ onPress,
24
25
  loading,
25
26
  disabled,
26
27
  style,
27
- activeOpacity,
28
- disabledOpacity,
29
28
  ...props
30
29
  } = _ref;
31
30
  const {
@@ -62,13 +61,14 @@ function Base(_ref) {
62
61
  buttonStyles.justifyContent = "flex-end";
63
62
  }
64
63
  return /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
64
+ onPress: onPress,
65
65
  disabled: disabled || loading,
66
66
  style: _ref2 => {
67
67
  let {
68
68
  pressed
69
69
  } = _ref2;
70
70
  return [styles.base, {
71
- opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1
71
+ opacity: pressed || disabled ? 0.75 : 1
72
72
  }, buttonStyles];
73
73
  }
74
74
  }, props), loading ? /*#__PURE__*/React.createElement(_reactNative.ActivityIndicator, {
@@ -7,7 +7,9 @@ exports.default = void 0;
7
7
  var React = _interopRequireWildcard(require("react"));
8
8
  var _reactNative = require("react-native");
9
9
  var _theming = require("../../theming");
10
+ var _Touchable = _interopRequireDefault(require("../Touchable"));
10
11
  var _hooks = require("../../hooks");
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
13
  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
14
  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
15
  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); }
@@ -58,7 +60,7 @@ const Checkbox = _ref => {
58
60
  onUncheck === null || onUncheck === void 0 ? void 0 : onUncheck();
59
61
  }
60
62
  };
61
- return /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({}, rest, {
63
+ return /*#__PURE__*/React.createElement(_Touchable.default, _extends({}, rest, {
62
64
  onPress: handlePress,
63
65
  disabled: disabled,
64
66
  accessibilityState: {
@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
9
9
  var _Checkbox = _interopRequireDefault(require("./Checkbox"));
10
10
  var _Text = _interopRequireDefault(require("../Text"));
11
11
  var _context = require("./context");
12
+ var _Touchable = _interopRequireDefault(require("../Touchable"));
12
13
  var _utilities = require("../../utilities");
13
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
15
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -72,7 +73,7 @@ const CheckboxGroupRow = _ref => {
72
73
  textStyles,
73
74
  viewStyles
74
75
  } = (0, _utilities.extractStyles)(style);
75
- return /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
76
+ return /*#__PURE__*/React.createElement(_Touchable.default, _extends({
76
77
  onPress: handlePress,
77
78
  style: [styles.mainParent, {
78
79
  flexDirection: direction
@@ -10,6 +10,7 @@ var _lodash = require("lodash");
10
10
  var _utilities = require("../../utilities");
11
11
  var _hooks = require("../../hooks");
12
12
  var _Text = _interopRequireDefault(require("../Text"));
13
+ var _Touchable = _interopRequireDefault(require("../Touchable"));
13
14
  var _Checkbox = _interopRequireDefault(require("./Checkbox"));
14
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
16
  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); }
@@ -82,7 +83,7 @@ const CheckboxRow = _ref => {
82
83
  textStyles,
83
84
  viewStyles
84
85
  } = (0, _utilities.extractStyles)(style);
85
- return /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
86
+ return /*#__PURE__*/React.createElement(_Touchable.default, _extends({
86
87
  onPress: handlePress,
87
88
  style: [viewStyles, styles.mainParent, {
88
89
  flexDirection: direction
@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
8
8
  var _reactNative = require("react-native");
9
9
  var _color = _interopRequireDefault(require("color"));
10
10
  var _Config = _interopRequireDefault(require("./Config"));
11
+ var _Touchable = _interopRequireDefault(require("./Touchable"));
11
12
  var _Elevation = _interopRequireDefault(require("./Elevation"));
12
13
  var _theming = require("../theming");
13
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -26,6 +27,7 @@ const Button = _ref => {
26
27
  children,
27
28
  onPress,
28
29
  elevation = 0,
30
+ style,
29
31
  theme: {
30
32
  colors,
31
33
  disabledOpacity,
@@ -79,19 +81,41 @@ const Button = _ref => {
79
81
  marginRight: -8,
80
82
  width: _Config.default.buttonIconSize
81
83
  }];
84
+ const {
85
+ margin,
86
+ marginEnd,
87
+ marginTop,
88
+ marginLeft,
89
+ marginRight,
90
+ marginBottom,
91
+ marginHorizontal,
92
+ marginVertical,
93
+ ...innerStyles
94
+ } = _reactNative.StyleSheet.flatten(style || {});
95
+ const margins = {
96
+ margin,
97
+ marginEnd,
98
+ marginTop,
99
+ marginLeft,
100
+ marginRight,
101
+ marginBottom,
102
+ marginHorizontal,
103
+ marginVertical
104
+ };
82
105
  return /*#__PURE__*/React.createElement(_Elevation.default, {
83
106
  style: {
84
107
  elevation,
85
- alignSelf: "stretch"
108
+ alignSelf: "stretch",
109
+ ...margins
86
110
  }
87
- }, /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({}, rest, {
111
+ }, /*#__PURE__*/React.createElement(_Touchable.default, _extends({}, rest, {
88
112
  onPress: onPress,
89
113
  accessibilityState: {
90
114
  disabled
91
115
  },
92
116
  accessibilityRole: "button",
93
117
  disabled: disabled || loading,
94
- style: [styles.button, buttonStyle]
118
+ style: [styles.button, buttonStyle, innerStyles]
95
119
  }), /*#__PURE__*/React.createElement(_reactNative.View, {
96
120
  style: styles.content
97
121
  }, icon && loading !== true ? /*#__PURE__*/React.createElement(_reactNative.View, {
@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
9
9
  var _color = _interopRequireDefault(require("color"));
10
10
  var _Config = _interopRequireDefault(require("./Config"));
11
11
  var _Text = _interopRequireDefault(require("./Text"));
12
+ var _Touchable = _interopRequireDefault(require("./Touchable"));
12
13
  var _Elevation = _interopRequireDefault(require("./Elevation"));
13
14
  var _theming = require("../theming");
14
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -106,7 +107,7 @@ const FAB = _ref => {
106
107
  style: [{
107
108
  elevation
108
109
  }, style]
109
- }, /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({}, rest, {
110
+ }, /*#__PURE__*/React.createElement(_Touchable.default, _extends({}, rest, {
110
111
  onPress: onPress,
111
112
  accessibilityState: {
112
113
  disabled
@@ -13,24 +13,19 @@ function Touchable(_ref) {
13
13
  children,
14
14
  disabled,
15
15
  onPress,
16
- activeOpacity,
17
- disabledOpacity,
18
- delayLongPress,
19
- hitSlop,
20
16
  style,
21
17
  ...props
22
18
  } = _ref;
23
19
  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, _extends({
24
- disabled: disabled,
25
20
  onPress: onPress,
26
- delayLongPress: delayLongPress ? delayLongPress : 500,
27
- hitSlop: hitSlop ? hitSlop : 8,
21
+ disabled: disabled,
22
+ hitSlop: 8,
28
23
  style: _ref2 => {
29
24
  let {
30
25
  pressed
31
26
  } = _ref2;
32
27
  return [{
33
- opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1
28
+ opacity: pressed || disabled ? 0.75 : 1
34
29
  }, style];
35
30
  }
36
31
  }, props), children);
@@ -12,4 +12,4 @@ const APPROX_STATUSBAR_HEIGHT = _reactNative.Platform.select({
12
12
  android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
13
13
  ios: _reactNative.Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0
14
14
  });
15
- exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;AR_HEIGHT;
15
+ exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;
@@ -5,10 +5,9 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.SEED_DATA = void 0;
7
7
  var _types = require("@draftbit/types");
8
- const SEED_DATA_TRIGGERS = [_types.Triggers.OnPress, _types.Triggers.OnLongPress];
8
+ const SEED_DATA_TRIGGERS = [_types.Triggers.OnPress];
9
9
  const SEED_DATA_PROPS = {
10
10
  onPress: (0, _types.createActionProp)(),
11
- onLongPress: (0, _types.createActionProp)(),
12
11
  icon: (0, _types.createIconProp)({
13
12
  defaultValue: null,
14
13
  required: false
@@ -19,37 +18,12 @@ const SEED_DATA_PROPS = {
19
18
  defaultValue: "Get Started"
20
19
  }),
21
20
  disabled: (0, _types.createDisabledProp)(),
22
- loading: (0, _types.createLoadingProp)(),
23
- activeOpacity: (0, _types.createStaticNumberProp)({
24
- label: "Active Opacity",
25
- description: "Opacity of the button when active.",
26
- defaultValue: 0.8,
27
- min: 0,
28
- max: 1,
29
- step: 0.01,
30
- precision: 2,
31
- required: false
32
- }),
33
- disabledOpacity: (0, _types.createStaticNumberProp)({
34
- label: "Disabled Opacity",
35
- description: "Opacity of the button when disabled.",
36
- defaultValue: 0.8,
37
- min: 0,
38
- max: 1,
39
- step: 0.01,
40
- precision: 2,
41
- required: false
42
- }),
43
- delayLongPress: (0, _types.createStaticNumberProp)({
44
- label: "Delay Long Press",
45
- description: "Duration (in milliseconds) from onPressIn before onLongPress is called.",
46
- required: false
47
- }),
48
- hitSlop: (0, _types.createStaticNumberProp)({
49
- label: "Hit Slop",
50
- description: "Sets additional distance outside of element in which a press can be detected",
51
- required: false
52
- })
21
+ loading: (0, _types.createLoadingProp)()
22
+ };
23
+ const LAYOUT = {
24
+ backgroundColor: "transparent",
25
+ borderRadius: 8,
26
+ fontFamily: "system-700"
53
27
  };
54
28
  const SEED_DATA = [{
55
29
  name: "Button Outline",
@@ -57,8 +31,7 @@ const SEED_DATA = [{
57
31
  category: _types.COMPONENT_TYPES.deprecated,
58
32
  stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
59
33
  layout: {
60
- borderRadius: 8,
61
- fontFamily: "system-700",
34
+ ...LAYOUT,
62
35
  backgroundColor: "transparent",
63
36
  borderWidth: 1,
64
37
  textAlign: "center"
@@ -71,8 +44,7 @@ const SEED_DATA = [{
71
44
  category: _types.COMPONENT_TYPES.deprecated,
72
45
  stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
73
46
  layout: {
74
- borderRadius: 8,
75
- fontFamily: "system-700",
47
+ ...LAYOUT,
76
48
  backgroundColor: "primary",
77
49
  textAlign: "center"
78
50
  },
@@ -84,8 +56,7 @@ const SEED_DATA = [{
84
56
  category: _types.COMPONENT_TYPES.button,
85
57
  stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
86
58
  layout: {
87
- borderRadius: 8,
88
- fontFamily: "system-700",
59
+ ...LAYOUT,
89
60
  backgroundColor: "primary",
90
61
  textAlign: "center"
91
62
  },
@@ -5,7 +5,42 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.SEED_DATA = void 0;
7
7
  var _types = require("@draftbit/types");
8
- const SEED_DATA = {
8
+ const SEED_DATA = [{
9
+ name: "Masonry List",
10
+ tag: "MasonryFlashList",
11
+ description: "Masonry Flashlist by Shopify",
12
+ packageName: "@shopify/flash-list",
13
+ category: _types.COMPONENT_TYPES.data,
14
+ stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
15
+ layout: {
16
+ flex: 1
17
+ },
18
+ triggers: [_types.Triggers.OnRefresh, _types.Triggers.OnEndReached],
19
+ props: {
20
+ onRefresh: (0, _types.createActionProp)(),
21
+ onEndReached: (0, _types.createActionProp)(),
22
+ numColumns: (0, _types.createNumColumnsType)({
23
+ editable: true
24
+ }),
25
+ estimatedItemSize: (0, _types.createNumberProp)({
26
+ group: _types.GROUPS.basic,
27
+ label: "Est. Item Size",
28
+ description: "Approximate size of the items before rendering.",
29
+ defaultValue: 50,
30
+ step: 1,
31
+ precision: 0
32
+ }),
33
+ optimizeItemArrangement: (0, _types.createStaticBoolProp)({
34
+ label: "Optimize Item Arrangement",
35
+ description: "If enabled, MasonryFlashList will try to reduce difference in column height by modifying item order. If true, specifying overrideItemLayout is required. Default value is false."
36
+ }),
37
+ onEndReachedThreshold: (0, _types.createStaticNumberProp)({
38
+ label: "End Reached Threshold",
39
+ description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
40
+ defaultValue: 0.5
41
+ })
42
+ }
43
+ }, {
9
44
  name: "FlashList",
10
45
  tag: "FlashList",
11
46
  description: "Flashlist by Shopify",
@@ -15,7 +50,10 @@ const SEED_DATA = {
15
50
  layout: {
16
51
  flex: 1
17
52
  },
53
+ triggers: [_types.Triggers.OnRefresh, _types.Triggers.OnEndReached],
18
54
  props: {
55
+ onRefresh: (0, _types.createActionProp)(),
56
+ onEndReached: (0, _types.createActionProp)(),
19
57
  estimatedItemSize: (0, _types.createNumberProp)({
20
58
  group: _types.GROUPS.basic,
21
59
  label: "Est. Item Size",
@@ -34,7 +72,12 @@ const SEED_DATA = {
34
72
  }),
35
73
  numColumns: (0, _types.createNumColumnsType)({
36
74
  editable: true
75
+ }),
76
+ onEndReachedThreshold: (0, _types.createStaticNumberProp)({
77
+ label: "End Reached Threshold",
78
+ description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
79
+ defaultValue: 0.5
37
80
  })
38
81
  }
39
- };
82
+ }];
40
83
  exports.SEED_DATA = SEED_DATA;
@@ -14,7 +14,10 @@ const SEED_DATA = {
14
14
  layout: {
15
15
  flex: 1
16
16
  },
17
+ triggers: [_types.Triggers.OnRefresh, _types.Triggers.OnEndReached],
17
18
  props: {
19
+ onRefresh: (0, _types.createActionProp)(),
20
+ onEndReached: (0, _types.createActionProp)(),
18
21
  horizontal: (0, _types.createStaticBoolProp)({
19
22
  label: "Horizontal",
20
23
  description: "Render list horizontally"
@@ -25,6 +28,15 @@ const SEED_DATA = {
25
28
  }),
26
29
  numColumns: (0, _types.createNumColumnsType)({
27
30
  editable: true
31
+ }),
32
+ initialNumToRender: (0, _types.createStaticBoolProp)({
33
+ label: "Initial Num To Render",
34
+ descriprion: "How many items to render in the initial batch"
35
+ }),
36
+ onEndReachedThreshold: (0, _types.createStaticNumberProp)({
37
+ label: "End Reached Threshold",
38
+ description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
39
+ defaultValue: 0.5
28
40
  })
29
41
  }
30
42
  };
@@ -5,56 +5,16 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.SEED_DATA = void 0;
7
7
  var _types = require("@draftbit/types");
8
- const SEED_DATA_PROPS = {
8
+ const SEED_DATA = {
9
+ name: "Touchable",
10
+ tag: "Touchable",
11
+ description: "Simple button with no styles",
12
+ category: _types.COMPONENT_TYPES.button,
9
13
  stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.Margins, _types.StylesPanelSections.Borders],
10
14
  layout: {},
11
- triggers: [_types.Triggers.OnPress, _types.Triggers.OnLongPress],
15
+ triggers: [_types.Triggers.OnPress],
12
16
  props: {
13
- onPress: (0, _types.createActionProp)(),
14
- onLongPress: (0, _types.createActionProp)(),
15
- activeOpacity: (0, _types.createStaticNumberProp)({
16
- label: "Active Opacity",
17
- description: "The opacity when the button is pressed.",
18
- defaultValue: 0.8,
19
- min: 0,
20
- max: 1,
21
- step: 0.01,
22
- precision: 2,
23
- required: false
24
- }),
25
- disabledOpacity: (0, _types.createStaticNumberProp)({
26
- label: "Disabled Opacity",
27
- description: "The opacity when the button is disabled.",
28
- defaultValue: 0.8,
29
- min: 0,
30
- max: 1,
31
- step: 0.01,
32
- precision: 2,
33
- required: false
34
- }),
35
- delayLongPress: (0, _types.createStaticNumberProp)({
36
- label: "Delay Long Press",
37
- description: "Duration (in milliseconds) from onPressIn before onLongPress is called.",
38
- required: false
39
- }),
40
- hitSlop: (0, _types.createStaticNumberProp)({
41
- label: "Hit Slop",
42
- description: "Sets additional distance outside of element in which a press can be detected.",
43
- required: false
44
- })
17
+ onPress: (0, _types.createActionProp)()
45
18
  }
46
19
  };
47
- const SEED_DATA = [{
48
- name: "Touchable",
49
- tag: "Touchable",
50
- description: "An interactive view with no styles",
51
- category: _types.COMPONENT_TYPES.deprecated,
52
- ...SEED_DATA_PROPS
53
- }, {
54
- name: "Pressable",
55
- tag: "Pressable",
56
- description: "An interactive view with no styles",
57
- category: _types.COMPONENT_TYPES.button,
58
- ...SEED_DATA_PROPS
59
- }];
60
20
  exports.SEED_DATA = SEED_DATA;
@@ -1,3 +1,4 @@
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
2
  import * as React from "react";
2
3
  import { Pressable, StyleSheet, View } from "react-native";
3
4
  import Text from "../Text";
@@ -17,10 +18,9 @@ const AccordionItem = _ref => {
17
18
  textStyles,
18
19
  viewStyles
19
20
  } = extractStyles(style);
20
- return /*#__PURE__*/React.createElement(Pressable, {
21
- style: [styles.container, viewStyles],
22
- ...rest
23
- }, /*#__PURE__*/React.createElement(View, {
21
+ return /*#__PURE__*/React.createElement(Pressable, _extends({
22
+ style: [styles.container, viewStyles]
23
+ }, rest), /*#__PURE__*/React.createElement(View, {
24
24
  style: styles.row
25
25
  }, icon ? /*#__PURE__*/React.createElement(Icon, {
26
26
  name: icon,
@@ -51,25 +51,4 @@ const styles = StyleSheet.create({
51
51
  justifyContent: "center"
52
52
  }
53
53
  });
54
- export default withTheme(AccordionItem);xtStyles
55
- }, label))));
56
- };
57
- const styles = StyleSheet.create({
58
- container: {
59
- padding: 8
60
- },
61
- row: {
62
- flexDirection: "row",
63
- alignItems: "center",
64
- paddingLeft: 8
65
- },
66
- item: {
67
- marginVertical: 6,
68
- paddingLeft: 8
69
- },
70
- content: {
71
- flex: 1,
72
- justifyContent: "center"
73
- }
74
- });
75
54
  export default withTheme(AccordionItem);
@@ -1,3 +1,4 @@
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
2
  import * as React from "react";
2
3
  import { Animated, Easing } from "react-native";
3
4
  import CircularProgress from "./CircularProgress";
@@ -45,19 +46,6 @@ const AnimatedCircularProgress = _ref => {
45
46
  React.useEffect(() => {
46
47
  animate();
47
48
  }, [fill, animate]);
48
- return /*#__PURE__*/React.createElement(AnimatedProgress, {
49
- ...other,
50
- style: other.style,
51
- childrenContainerStyle: other.childrenContainerStyle,
52
- fill: fillAnimation,
53
- tintColor: animateColor()
54
- });
55
- };
56
- export default AnimatedCircularProgress;imation;
57
- };
58
- React.useEffect(() => {
59
- animate();
60
- }, [fill, animate]);
61
49
  return /*#__PURE__*/React.createElement(AnimatedProgress, _extends({}, other, {
62
50
  style: other.style,
63
51
  childrenContainerStyle: other.childrenContainerStyle,
@@ -13,11 +13,10 @@ function Base(_ref) {
13
13
  Icon,
14
14
  icon,
15
15
  title,
16
+ onPress,
16
17
  loading,
17
18
  disabled,
18
19
  style,
19
- activeOpacity,
20
- disabledOpacity,
21
20
  ...props
22
21
  } = _ref;
23
22
  const {
@@ -54,13 +53,14 @@ function Base(_ref) {
54
53
  buttonStyles.justifyContent = "flex-end";
55
54
  }
56
55
  return /*#__PURE__*/React.createElement(Pressable, _extends({
56
+ onPress: onPress,
57
57
  disabled: disabled || loading,
58
58
  style: _ref2 => {
59
59
  let {
60
60
  pressed
61
61
  } = _ref2;
62
62
  return [styles.base, {
63
- opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1
63
+ opacity: pressed || disabled ? 0.75 : 1
64
64
  }, buttonStyles];
65
65
  }
66
66
  }, props), loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
@@ -1,6 +1,8 @@
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
2
  import * as React from "react";
2
- import { View, StyleSheet, Pressable } from "react-native";
3
+ import { View, StyleSheet } from "react-native";
3
4
  import { useTheme } from "../../theming";
5
+ import Touchable from "../Touchable";
4
6
  import { usePrevious } from "../../hooks";
5
7
  const Checkbox = _ref => {
6
8
  let {
@@ -25,6 +27,7 @@ const Checkbox = _ref => {
25
27
  setInternalValue(status);
26
28
  }
27
29
  }, [status]);
30
+
28
31
  // This special logic is to handle weird APIs like Airtable that return
29
32
  // true or undefined for a boolean
30
33
  const previousDefaultValue = usePrevious(defaultValue);
@@ -48,8 +51,7 @@ const Checkbox = _ref => {
48
51
  onUncheck === null || onUncheck === void 0 ? void 0 : onUncheck();
49
52
  }
50
53
  };
51
- return /*#__PURE__*/React.createElement(Pressable, {
52
- ...rest,
54
+ return /*#__PURE__*/React.createElement(Touchable, _extends({}, rest, {
53
55
  onPress: handlePress,
54
56
  disabled: disabled,
55
57
  accessibilityState: {
@@ -61,7 +63,7 @@ const Checkbox = _ref => {
61
63
  width: size,
62
64
  height: size
63
65
  }]
64
- }, /*#__PURE__*/React.createElement(Icon, {
66
+ }), /*#__PURE__*/React.createElement(Icon, {
65
67
  style: styles.icon,
66
68
  name: internalValue ? checkedIcon : uncheckedIcon,
67
69
  size: size,
@@ -1,11 +1,13 @@
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
2
  import * as React from "react";
2
- import { StyleSheet, View, Platform, Pressable } from "react-native";
3
+ import { StyleSheet, View, Platform } from "react-native";
3
4
  import Checkbox from "./Checkbox";
4
5
  import Text from "../Text";
5
6
  import { useCheckboxGroupContext } from "./context";
6
7
  import { Direction as GroupDirection } from "./context";
8
+ import Touchable from "../Touchable";
7
9
  import { extractStyles } from "../../utilities";
8
- export var Direction;
10
+ export let Direction;
9
11
  (function (Direction) {
10
12
  Direction["Row"] = "row";
11
13
  Direction["RowReverse"] = "row-reverse";
@@ -62,14 +64,13 @@ const CheckboxGroupRow = _ref => {
62
64
  textStyles,
63
65
  viewStyles
64
66
  } = extractStyles(style);
65
- return /*#__PURE__*/React.createElement(Pressable, {
67
+ return /*#__PURE__*/React.createElement(Touchable, _extends({
66
68
  onPress: handlePress,
67
69
  style: [styles.mainParent, {
68
70
  flexDirection: direction
69
71
  }, viewStyles],
70
- disabled: disabled,
71
- ...rest
72
- }, /*#__PURE__*/React.createElement(View, {
72
+ disabled: disabled
73
+ }, rest), /*#__PURE__*/React.createElement(View, {
73
74
  style: [styles.label, {
74
75
  alignItems: direction === Direction.Row ? "flex-start" : "flex-end"
75
76
  }, labelContainerStyle]
@@ -107,23 +108,4 @@ const styles = StyleSheet.create({
107
108
  flex: 3
108
109
  }
109
110
  });
110
- export default CheckboxGroupRow;reate({
111
- mainParent: {
112
- alignItems: "center",
113
- justifyContent: "space-around",
114
- paddingStart: 20,
115
- minHeight: 50,
116
- paddingEnd: 20,
117
- display: "flex",
118
- ...Platform.select({
119
- web: {
120
- cursor: "pointer",
121
- userSelect: "none"
122
- }
123
- })
124
- },
125
- label: {
126
- flex: 3
127
- }
128
- });
129
111
  export default CheckboxGroupRow;