@draftbit/core 46.8.1-1b6459.2 → 46.8.1-2ae5b7.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 (30) hide show
  1. package/lib/commonjs/components/Checkbox/CheckboxGroupRow.js +5 -23
  2. package/lib/commonjs/components/Checkbox/CheckboxRow.js +6 -23
  3. package/lib/commonjs/components/Checkbox/context.js +1 -1
  4. package/lib/commonjs/components/CircleImage.js +1 -15
  5. package/lib/commonjs/components/CircularProgress.js +8 -26
  6. package/lib/commonjs/components/Container.js +4 -15
  7. package/lib/commonjs/components/DeckSwiper/DeckSwiper.js +38 -4
  8. package/lib/commonjs/components/DeprecatedButton.js +3 -20
  9. package/lib/commonjs/components/DeprecatedCardWrapper.js +1 -15
  10. package/lib/commonjs/components/Divider.js +1 -14
  11. package/lib/commonjs/components/Elevation.js +2 -14
  12. package/lib/commonjs/components/FAB.js +4 -18
  13. package/lib/commonjs/components/Portal/PortalHost.js +15 -44
  14. package/lib/commonjs/components/Portal/PortalManager.js +8 -34
  15. package/lib/commonjs/components/Pressable.js +2 -15
  16. package/lib/commonjs/components/ProgressBar.js +7 -37
  17. package/lib/commonjs/components/RadioButton/RadioButton.js +2 -13
  18. package/lib/commonjs/components/RadioButton/RadioButtonGroup.js +2 -15
  19. package/lib/commonjs/constants.js +1 -1
  20. package/lib/commonjs/styles/overlay.js +1 -3
  21. package/lib/module/components/DeckSwiper/DeckSwiper.js +38 -4
  22. package/lib/typescript/src/components/DeckSwiper/DeckSwiper.d.ts +8 -2
  23. package/lib/typescript/src/components/DeckSwiper/DeckSwiper.d.ts.map +1 -1
  24. package/lib/typescript/src/components/DeckSwiper/DeckSwiperCard.d.ts +2 -3
  25. package/lib/typescript/src/components/DeckSwiper/DeckSwiperCard.d.ts.map +1 -1
  26. package/package.json +3 -3
  27. package/src/components/DeckSwiper/DeckSwiper.js +33 -3
  28. package/src/components/DeckSwiper/DeckSwiper.tsx +51 -9
  29. package/src/components/DeckSwiper/DeckSwiperCard.js +1 -1
  30. package/src/components/DeckSwiper/DeckSwiperCard.tsx +3 -6
@@ -13,7 +13,8 @@ var _utilities = require("../../utilities");
13
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
14
  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); }
15
15
  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; }
16
- var Direction;
16
+ 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); }
17
+ let Direction;
17
18
  exports.Direction = Direction;
18
19
  (function (Direction) {
19
20
  Direction["Row"] = "row";
@@ -71,14 +72,13 @@ const CheckboxGroupRow = _ref => {
71
72
  textStyles,
72
73
  viewStyles
73
74
  } = (0, _utilities.extractStyles)(style);
74
- return /*#__PURE__*/React.createElement(_reactNative.Pressable, {
75
+ return /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
75
76
  onPress: handlePress,
76
77
  style: [styles.mainParent, {
77
78
  flexDirection: direction
78
79
  }, viewStyles],
79
- disabled: disabled,
80
- ...rest
81
- }, /*#__PURE__*/React.createElement(_reactNative.View, {
80
+ disabled: disabled
81
+ }, rest), /*#__PURE__*/React.createElement(_reactNative.View, {
82
82
  style: [styles.label, {
83
83
  alignItems: direction === Direction.Row ? "flex-start" : "flex-end"
84
84
  }, labelContainerStyle]
@@ -117,22 +117,4 @@ const styles = _reactNative.StyleSheet.create({
117
117
  }
118
118
  });
119
119
  var _default = CheckboxGroupRow;
120
- exports.default = _default;center",
121
- justifyContent: "space-around",
122
- paddingStart: 20,
123
- minHeight: 50,
124
- paddingEnd: 20,
125
- display: "flex",
126
- ..._reactNative.Platform.select({
127
- web: {
128
- cursor: "pointer",
129
- userSelect: "none"
130
- }
131
- })
132
- },
133
- label: {
134
- flex: 3
135
- }
136
- });
137
- var _default = CheckboxGroupRow;
138
120
  exports.default = _default;
@@ -14,7 +14,8 @@ var _Checkbox = _interopRequireDefault(require("./Checkbox"));
14
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
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); }
16
16
  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; }
17
- var Direction;
17
+ 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); }
18
+ let Direction;
18
19
  exports.Direction = Direction;
19
20
  (function (Direction) {
20
21
  Direction["Row"] = "row";
@@ -57,6 +58,7 @@ const CheckboxRow = _ref => {
57
58
  setInternalValue(status);
58
59
  }
59
60
  }, [status]);
61
+
60
62
  // This special logic is to handle weird APIs like Airtable that return
61
63
  // true or undefined for a boolean
62
64
  const previousDefaultValue = (0, _hooks.usePrevious)(defaultValue);
@@ -80,14 +82,13 @@ const CheckboxRow = _ref => {
80
82
  textStyles,
81
83
  viewStyles
82
84
  } = (0, _utilities.extractStyles)(style);
83
- return /*#__PURE__*/React.createElement(_reactNative.Pressable, {
85
+ return /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
84
86
  onPress: handlePress,
85
87
  style: [viewStyles, styles.mainParent, {
86
88
  flexDirection: direction
87
89
  }],
88
- disabled: disabled,
89
- ...rest
90
- }, /*#__PURE__*/React.createElement(_reactNative.View, {
90
+ disabled: disabled
91
+ }, rest), /*#__PURE__*/React.createElement(_reactNative.View, {
91
92
  style: [styles.label, {
92
93
  alignItems: direction === Direction.Row ? "flex-start" : "flex-end"
93
94
  }, labelContainerStyle]
@@ -124,22 +125,4 @@ const styles = _reactNative.StyleSheet.create({
124
125
  }
125
126
  });
126
127
  var _default = CheckboxRow;
127
- exports.default = _default;ems: "center",
128
- justifyContent: "space-around",
129
- paddingStart: 20,
130
- minHeight: 50,
131
- paddingEnd: 20,
132
- display: "flex",
133
- ..._reactNative.Platform.select({
134
- web: {
135
- cursor: "pointer",
136
- userSelect: "none"
137
- }
138
- })
139
- },
140
- label: {
141
- flex: 3
142
- }
143
- });
144
- var _default = CheckboxRow;
145
128
  exports.default = _default;
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.checkboxGroupContext = exports.Direction = void 0;
7
7
  exports.useCheckboxGroupContext = useCheckboxGroupContext;
8
8
  var _react = require("react");
9
- var Direction;
9
+ let Direction;
10
10
  exports.Direction = Direction;
11
11
  (function (Direction) {
12
12
  Direction["Horizontal"] = "horizontal";
@@ -10,6 +10,7 @@ var _Config = _interopRequireDefault(require("./Config"));
10
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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); }
13
14
  const CircleImage = _ref => {
14
15
  let {
15
16
  source = _Config.default.placeholderImageURL,
@@ -18,21 +19,6 @@ const CircleImage = _ref => {
18
19
  ...props
19
20
  } = _ref;
20
21
  const borderRadius = size / 2;
21
- return /*#__PURE__*/React.createElement(_reactNative.Image, {
22
- style: [{
23
- width: size,
24
- height: size,
25
- borderRadius
26
- }, style],
27
- source: typeof source === "string" ? {
28
- uri: source
29
- } : source,
30
- resizeMode: "cover",
31
- ...props
32
- });
33
- };
34
- var _default = CircleImage;
35
- exports.default = _default;size / 2;
36
22
  return /*#__PURE__*/React.createElement(_reactNative.Image, _extends({
37
23
  style: [{
38
24
  width: size,
@@ -8,24 +8,27 @@ var _react = _interopRequireDefault(require("react"));
8
8
  var _reactNative = require("react-native");
9
9
  var _reactNativeSvg = require("react-native-svg");
10
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+ 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; }
12
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
13
+ 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); }
11
14
  class CircularProgress extends _react.default.Component {
12
15
  constructor() {
13
16
  super(...arguments);
14
- this.polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
17
+ _defineProperty(this, "polarToCartesian", (centerX, centerY, radius, angleInDegrees) => {
15
18
  var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
16
19
  return {
17
20
  x: centerX + radius * Math.cos(angleInRadians),
18
21
  y: centerY + radius * Math.sin(angleInRadians)
19
22
  };
20
- };
21
- this.circlePath = (x, y, radius, startAngle, endAngle) => {
23
+ });
24
+ _defineProperty(this, "circlePath", (x, y, radius, startAngle, endAngle) => {
22
25
  var start = this.polarToCartesian(x, y, radius, endAngle * 0.9999);
23
26
  var end = this.polarToCartesian(x, y, radius, startAngle);
24
27
  var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
25
28
  var d = ["M", start.x, start.y, "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y];
26
29
  return d.join(" ");
27
- };
28
- this.clampFill = fill => Math.min(100, Math.max(0, fill));
30
+ });
31
+ _defineProperty(this, "clampFill", fill => Math.min(100, Math.max(0, fill)));
29
32
  }
30
33
  render() {
31
34
  const {
@@ -106,25 +109,4 @@ class CircularProgress extends _react.default.Component {
106
109
  }
107
110
  }
108
111
  var _default = CircularProgress;
109
- exports.default = _default;padding) / 2
110
- }, backgroundColor && /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Path, {
111
- d: backgroundPath,
112
- stroke: backgroundColor,
113
- strokeWidth: backgroundWidth || width,
114
- strokeLinecap: lineCap,
115
- strokeDasharray: strokeDasharrayBackground,
116
- fill: "transparent"
117
- }), fill > 0 && /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Path, {
118
- d: circlePathItem,
119
- stroke: tintColor,
120
- strokeWidth: width,
121
- strokeLinecap: lineCap,
122
- strokeDasharray: strokeDasharrayTint,
123
- fill: "transparent"
124
- }), cap)), children && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
125
- style: localChildrenContainerStyle
126
- }, children(fill)));
127
- }
128
- }
129
- var _default = CircularProgress;
130
112
  exports.default = _default;
@@ -11,6 +11,7 @@ var _Elevation = _interopRequireDefault(require("./Elevation"));
11
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
12
  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); }
13
13
  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; }
14
+ 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
15
  const Container = _ref => {
15
16
  let {
16
17
  useThemeGutterPadding,
@@ -72,10 +73,9 @@ const Container = _ref => {
72
73
  };
73
74
  const Wrap = elevation ? _Elevation.default : _reactNative.View;
74
75
  if (elevation) containerStyle.elevation = elevation;
75
- return /*#__PURE__*/React.createElement(Wrap, {
76
- style: [containerStyle, style],
77
- ...rest
78
- }, backgroundImage ? /*#__PURE__*/React.createElement(_reactNative.ImageBackground, {
76
+ return /*#__PURE__*/React.createElement(Wrap, _extends({
77
+ style: [containerStyle, style]
78
+ }, rest), backgroundImage ? /*#__PURE__*/React.createElement(_reactNative.ImageBackground, {
79
79
  source: typeof backgroundImage === "string" ? {
80
80
  uri: backgroundImage
81
81
  } : backgroundImage,
@@ -90,15 +90,4 @@ const Container = _ref => {
90
90
  }, children));
91
91
  };
92
92
  var _default = (0, _theming.withTheme)(Container);
93
- exports.default = _default;sizeMode: backgroundImageResizeMode,
94
- style: {
95
- flex: 1
96
- }
97
- }, /*#__PURE__*/React.createElement(_reactNative.View, {
98
- style: innerStyle
99
- }, children)) : /*#__PURE__*/React.createElement(_reactNative.View, {
100
- style: innerStyle
101
- }, children));
102
- };
103
- var _default = (0, _theming.withTheme)(Container);
104
93
  exports.default = _default;
@@ -17,13 +17,47 @@ const DeckSwiper = _ref => {
17
17
  verticalEnabled = true,
18
18
  horizontalEnabled = true,
19
19
  visibleCardCount = 1,
20
+ data,
21
+ keyExtractor,
22
+ renderItem,
20
23
  style,
21
24
  children
22
25
  } = _ref;
26
+ //Both 'renderItem' and 'data' are optional to allow direct children. But if one is included, both need to be included
27
+ if (data && !renderItem || renderItem && !data) {
28
+ throw new Error("'renderItem' and 'data' need to both be provided to lazily render. Either remove them entirley or include both");
29
+ }
30
+ if (data && renderItem && children) {
31
+ console.warn("'children' of DeckSwiper ignored due to usage of 'data' and 'renderItem'");
32
+ }
23
33
  const childrenArray = _react.default.useMemo(() => _react.default.Children.toArray(children), [children]);
24
34
 
25
35
  // an array of indices based on children count
26
36
  const cardsFillerData = _react.default.useMemo(() => Array.from(Array(childrenArray.length).keys()), [childrenArray]);
37
+ const cardsData = data || cardsFillerData;
38
+ const renderCard = (card, index) => {
39
+ if (renderItem) {
40
+ return renderItem({
41
+ item: card,
42
+ index
43
+ });
44
+ } else {
45
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, childrenArray[index]);
46
+ }
47
+ };
48
+ const renderFirstCard = () => {
49
+ if (cardsData.length) {
50
+ return renderCard(cardsData[0], 0);
51
+ }
52
+ return undefined;
53
+ };
54
+ const cardKeyExtractor = card => {
55
+ if (keyExtractor) {
56
+ return keyExtractor(card);
57
+ } else {
58
+ return card === null || card === void 0 ? void 0 : card.toString();
59
+ }
60
+ };
27
61
 
28
62
  /**
29
63
  * By default react-native-deck-swiper positions everything with absolute position.
@@ -37,10 +71,10 @@ const DeckSwiper = _ref => {
37
71
 
38
72
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
39
73
  style: styles.containerHeightFiller
40
- }, childrenArray.length && childrenArray[0]), /*#__PURE__*/_react.default.createElement(_reactNativeDeckSwiper.default, {
41
- cards: cardsFillerData,
42
- renderCard: (_, i) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, childrenArray[i]),
43
- keyExtractor: card => card === null || card === void 0 ? void 0 : card.toString(),
74
+ }, renderFirstCard()), /*#__PURE__*/_react.default.createElement(_reactNativeDeckSwiper.default, {
75
+ cards: cardsData,
76
+ renderCard: renderCard,
77
+ keyExtractor: cardKeyExtractor,
44
78
  containerStyle: _reactNative.StyleSheet.flatten([styles.cardsContainer, style]),
45
79
  cardStyle: styles.card,
46
80
  onSwiped: onIndexChanged,
@@ -13,6 +13,7 @@ var _theming = require("../theming");
13
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
14
  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); }
15
15
  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; }
16
+ 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); }
16
17
  const Button = _ref => {
17
18
  let {
18
19
  Icon,
@@ -83,8 +84,7 @@ const Button = _ref => {
83
84
  elevation,
84
85
  alignSelf: "stretch"
85
86
  }
86
- }, /*#__PURE__*/React.createElement(_reactNative.Pressable, {
87
- ...rest,
87
+ }, /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({}, rest, {
88
88
  onPress: onPress,
89
89
  accessibilityState: {
90
90
  disabled
@@ -92,7 +92,7 @@ const Button = _ref => {
92
92
  accessibilityRole: "button",
93
93
  disabled: disabled || loading,
94
94
  style: [styles.button, buttonStyle]
95
- }, /*#__PURE__*/React.createElement(_reactNative.View, {
95
+ }), /*#__PURE__*/React.createElement(_reactNative.View, {
96
96
  style: styles.content
97
97
  }, icon && loading !== true ? /*#__PURE__*/React.createElement(_reactNative.View, {
98
98
  style: iconStyle
@@ -124,21 +124,4 @@ const styles = _reactNative.StyleSheet.create({
124
124
  }
125
125
  });
126
126
  var _default = (0, _theming.withTheme)(Button);
127
- exports.default = _default;;
128
- };
129
- const styles = _reactNative.StyleSheet.create({
130
- button: {
131
- minWidth: 64,
132
- borderStyle: "solid"
133
- },
134
- content: {
135
- flexDirection: "row",
136
- alignItems: "center",
137
- justifyContent: "center"
138
- },
139
- icon: {
140
- width: _Config.default.buttonIconSize
141
- }
142
- });
143
- var _default = (0, _theming.withTheme)(Button);
144
127
  exports.default = _default;
@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
8
8
  var _theming = require("../theming");
9
9
  var _Touchable = _interopRequireDefault(require("./Touchable"));
10
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+ 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); }
11
12
  const getWidth = numColumns => {
12
13
  switch (numColumns) {
13
14
  case 1:
@@ -27,21 +28,6 @@ const Card = _ref => {
27
28
  ...rest
28
29
  } = _ref;
29
30
  const width = getWidth(numColumns);
30
- return /*#__PURE__*/_react.default.createElement(_Touchable.default, {
31
- disabled: !onPress,
32
- onPress: onPress,
33
- style: [style, {
34
- width
35
- }],
36
- ...rest
37
- }, children);
38
- };
39
- var _default = (0, _theming.withTheme)(Card);
40
- exports.default = _default;s,
41
- style,
42
- ...rest
43
- } = _ref;
44
- const width = getWidth(numColumns);
45
31
  return /*#__PURE__*/_react.default.createElement(_Touchable.default, _extends({
46
32
  disabled: !onPress,
47
33
  onPress: onPress,
@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
9
9
  var _theming = require("../theming");
10
10
  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); }
11
11
  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; }
12
+ 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); }
12
13
  const Divider = _ref => {
13
14
  let {
14
15
  style,
@@ -18,20 +19,6 @@ const Divider = _ref => {
18
19
  },
19
20
  ...rest
20
21
  } = _ref;
21
- return /*#__PURE__*/React.createElement(_reactNative.View, {
22
- style: [{
23
- backgroundColor: color || colors.divider,
24
- height: _reactNative.StyleSheet.hairlineWidth
25
- }, style],
26
- ...rest
27
- });
28
- };
29
- var _default = (0, _theming.withTheme)(Divider);
30
- exports.default = _default;eme: {
31
- colors
32
- },
33
- ...rest
34
- } = _ref;
35
22
  return /*#__PURE__*/React.createElement(_reactNative.View, _extends({
36
23
  style: [{
37
24
  backgroundColor: color || colors.divider,
@@ -11,6 +11,7 @@ var _theming = require("../theming");
11
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
12
  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); }
13
13
  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; }
14
+ 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
15
  /* directly copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx#L62 */
15
16
  const Elevation = _ref => {
16
17
  let {
@@ -27,24 +28,11 @@ const Elevation = _ref => {
27
28
  colors
28
29
  } = theme;
29
30
  const borderRadius = radius;
30
- return /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
31
- ...rest,
31
+ return /*#__PURE__*/React.createElement(_reactNative.Animated.View, _extends({}, rest, {
32
32
  style: [{
33
33
  borderRadius,
34
34
  backgroundColor: colors.surface
35
35
  }, elevation ? (0, _shadow.default)(elevation) : null, style]
36
- }, /*#__PURE__*/React.createElement(_reactNative.View, {
37
- style: {
38
- overflow: "hidden",
39
- borderRadius
40
- }
41
- }, children));
42
- };
43
- var _default = (0, _theming.withTheme)(Elevation);
44
- exports.default = _default;
45
- borderRadius,
46
- backgroundColor: colors.surface
47
- }, elevation ? (0, _shadow.default)(elevation) : null, style]
48
36
  }), /*#__PURE__*/React.createElement(_reactNative.View, {
49
37
  style: {
50
38
  overflow: "hidden",
@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
9
9
  var _theming = require("../theming");
10
10
  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); }
11
11
  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; }
12
+ 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); }
12
13
  const FAB = _ref => {
13
14
  let {
14
15
  onPress,
@@ -32,7 +33,7 @@ const FAB = _ref => {
32
33
  borderRadius: size / 2,
33
34
  overflow: "hidden"
34
35
  }, style]
35
- }, /*#__PURE__*/React.createElement(_reactNative.Pressable, {
36
+ }, /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
36
37
  onPress: onPress,
37
38
  disabled: loading || disabled,
38
39
  android_ripple: {
@@ -50,9 +51,8 @@ const FAB = _ref => {
50
51
  borderRadius: size / 2,
51
52
  backgroundColor
52
53
  }];
53
- },
54
- ...props
55
- }, /*#__PURE__*/React.createElement(_reactNative.View, null, loading ? /*#__PURE__*/React.createElement(_reactNative.ActivityIndicator, {
54
+ }
55
+ }, props), /*#__PURE__*/React.createElement(_reactNative.View, null, loading ? /*#__PURE__*/React.createElement(_reactNative.ActivityIndicator, {
56
56
  style: size > 50 ? {
57
57
  marginTop: 2,
58
58
  marginLeft: 2
@@ -79,18 +79,4 @@ const styles = _reactNative.StyleSheet.create({
79
79
  }
80
80
  });
81
81
  var _default = (0, _theming.withTheme)(FAB);
82
- exports.default = _default; styles = _reactNative.StyleSheet.create({
83
- button: {
84
- backgroundColor: "#5a45ff",
85
- justifyContent: "center",
86
- alignItems: "center",
87
- ..._reactNative.Platform.select({
88
- web: {
89
- cursor: "pointer",
90
- userSelect: "none"
91
- }
92
- })
93
- }
94
- });
95
- var _default = (0, _theming.withTheme)(FAB);
96
82
  exports.default = _default;
@@ -10,7 +10,11 @@ var _PortalManager = _interopRequireDefault(require("./PortalManager"));
10
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 _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; }
14
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
15
+ 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
16
  const PortalContext = /*#__PURE__*/React.createContext(null);
17
+
14
18
  /**
15
19
  * Portal host renders all of its children `Portal` elements.
16
20
  * For example, you can wrap a screen in `Portal.Host` to render items above the screen.
@@ -39,10 +43,10 @@ exports.PortalContext = PortalContext;
39
43
  class PortalHost extends React.Component {
40
44
  constructor() {
41
45
  super(...arguments);
42
- this.setManager = manager => {
46
+ _defineProperty(this, "setManager", manager => {
43
47
  this.manager = manager;
44
- };
45
- this.mount = children => {
48
+ });
49
+ _defineProperty(this, "mount", children => {
46
50
  const key = this.nextKey++;
47
51
  if (this.manager) {
48
52
  this.manager.mount(key, children);
@@ -54,8 +58,8 @@ class PortalHost extends React.Component {
54
58
  });
55
59
  }
56
60
  return key;
57
- };
58
- this.update = (key, children) => {
61
+ });
62
+ _defineProperty(this, "update", (key, children) => {
59
63
  if (this.manager) {
60
64
  this.manager.update(key, children);
61
65
  } else {
@@ -72,8 +76,8 @@ class PortalHost extends React.Component {
72
76
  this.queue.push(op);
73
77
  }
74
78
  }
75
- };
76
- this.unmount = key => {
79
+ });
80
+ _defineProperty(this, "unmount", key => {
77
81
  if (this.manager) {
78
82
  this.manager.unmount(key);
79
83
  } else {
@@ -82,9 +86,10 @@ class PortalHost extends React.Component {
82
86
  key
83
87
  });
84
88
  }
85
- };
86
- this.nextKey = 0;
87
- this.queue = [];
89
+ });
90
+ _defineProperty(this, "nextKey", 0);
91
+ _defineProperty(this, "queue", []);
92
+ _defineProperty(this, "manager", void 0);
88
93
  }
89
94
  componentDidMount() {
90
95
  const manager = this.manager;
@@ -123,40 +128,6 @@ class PortalHost extends React.Component {
123
128
  }
124
129
  }
125
130
  exports.default = PortalHost;
126
- PortalHost.displayName = "Portal.Host";
127
- const styles = _reactNative.StyleSheet.create({
128
- container: {
129
- flex: 1
130
- }
131
- });nager.mount(action.key, action.children);
132
- break;
133
- case "update":
134
- manager.update(action.key, action.children);
135
- break;
136
- case "unmount":
137
- manager.unmount(action.key);
138
- break;
139
- }
140
- }
141
- }
142
- }
143
- render() {
144
- return /*#__PURE__*/React.createElement(PortalContext.Provider, {
145
- value: {
146
- mount: this.mount,
147
- update: this.update,
148
- unmount: this.unmount
149
- }
150
- }, /*#__PURE__*/React.createElement(_reactNative.View, {
151
- style: styles.container,
152
- collapsable: false,
153
- pointerEvents: "box-none"
154
- }, this.props.children), /*#__PURE__*/React.createElement(_PortalManager.default, {
155
- ref: this.setManager
156
- }));
157
- }
158
- }
159
- exports.default = PortalHost;
160
131
  _defineProperty(PortalHost, "displayName", "Portal.Host");
161
132
  const styles = _reactNative.StyleSheet.create({
162
133
  container: {
@@ -8,54 +8,28 @@ var React = _interopRequireWildcard(require("react"));
8
8
  var _reactNative = require("react-native");
9
9
  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); }
10
10
  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; }
11
+ 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; }
12
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
13
+ 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); }
11
14
  /**
12
15
  * Portal host is the component which actually renders all Portals.
13
16
  */
14
17
  class PortalManager extends React.PureComponent {
15
18
  constructor() {
16
19
  super(...arguments);
17
- this.state = {
20
+ _defineProperty(this, "state", {
18
21
  portals: []
19
- };
20
- this.mount = (key, children) => {
22
+ });
23
+ _defineProperty(this, "mount", (key, children) => {
21
24
  this.setState(state => ({
22
25
  portals: [...state.portals, {
23
26
  key,
24
27
  children
25
28
  }]
26
29
  }));
27
- };
28
- this.update = (key, children) => this.setState(state => ({
29
- portals: state.portals.map(item => {
30
- if (item.key === key) {
31
- return {
32
- ...item,
33
- children
34
- };
35
- }
36
- return item;
37
- })
38
- }));
39
- this.unmount = key => this.setState(state => ({
40
- portals: state.portals.filter(item => item.key !== key)
41
- }));
42
- }
43
- render() {
44
- return this.state.portals.map(_ref => {
45
- let {
46
- key,
47
- children
48
- } = _ref;
49
- return /*#__PURE__*/React.createElement(_reactNative.View, {
50
- key: key,
51
- collapsable: false /* Need collapsable=false here to clip the elevations, otherwise they appear above sibling components */,
52
- pointerEvents: "box-none",
53
- style: _reactNative.StyleSheet.absoluteFill
54
- }, children);
55
30
  });
56
- }
57
- }
58
- exports.default = PortalManager;tate.portals.map(item => {
31
+ _defineProperty(this, "update", (key, children) => this.setState(state => ({
32
+ portals: state.portals.map(item => {
59
33
  if (item.key === key) {
60
34
  return {
61
35
  ...item,
@@ -7,6 +7,7 @@ exports.default = Pressable;
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 Pressable(_ref) {
11
12
  let {
12
13
  children,
@@ -19,22 +20,8 @@ function Pressable(_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
  onPress: onPress,
24
- disabled: disabled,
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
- } onPress: onPress,
38
25
  disabled: disabled,
39
26
  delayLongPress: delayLongPress ? delayLongPress : 500,
40
27
  hitSlop: hitSlop ? hitSlop : 8,
@@ -8,12 +8,16 @@ var _react = _interopRequireWildcard(require("react"));
8
8
  var _reactNative = require("react-native");
9
9
  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); }
10
10
  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; }
11
+ 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); }
12
+ 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; }
13
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
14
+ 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); }
11
15
  const INDETERMINATE_WIDTH_FACTOR = 0.3;
12
16
  const BAR_WIDTH_ZERO_POSITION = INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_WIDTH_FACTOR);
13
17
  class ProgressBar extends _react.Component {
14
18
  constructor(props) {
15
19
  super(props);
16
- this.handleLayout = event => {
20
+ _defineProperty(this, "handleLayout", event => {
17
21
  const {
18
22
  width = 150,
19
23
  onLayout
@@ -26,7 +30,7 @@ class ProgressBar extends _react.Component {
26
30
  if (onLayout) {
27
31
  onLayout(event);
28
32
  }
29
- };
33
+ });
30
34
  const {
31
35
  progress: progressP = 0,
32
36
  indeterminate = false
@@ -74,6 +78,7 @@ class ProgressBar extends _react.Component {
74
78
  ...animationConfig,
75
79
  toValue: progress,
76
80
  velocity: 0,
81
+ //adjust this value if animation fails - velocity is required
77
82
  useNativeDriver
78
83
  }).start();
79
84
  } else {
@@ -142,41 +147,6 @@ class ProgressBar extends _react.Component {
142
147
  })
143
148
  }]
144
149
  };
145
- return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
146
- style: [containerStyle, style],
147
- onLayout: this.handleLayout,
148
- ...restProps
149
- }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
150
- style: progressStyle
151
- }), children);
152
- }
153
- }
154
- exports.default = ProgressBar;,
155
- overflow: "hidden",
156
- backgroundColor: unfilledColor
157
- };
158
- const progressStyle = {
159
- backgroundColor: color,
160
- // Always take up full height of container.
161
- height: "100%",
162
- transform: [{
163
- translateX: this.state.animationValue.interpolate({
164
- inputRange: [0, 1],
165
- outputRange: [innerWidth * -INDETERMINATE_WIDTH_FACTOR, innerWidth]
166
- })
167
- }, {
168
- translateX: this.state.progress.interpolate({
169
- inputRange: [0, 1],
170
- outputRange: [innerWidth / (_reactNative.I18nManager.isRTL ? 2 : -2), 0]
171
- })
172
- }, {
173
- // Interpolation a temp workaround for https://github.com/facebook/react-native/issues/6278
174
- scaleX: this.state.progress.interpolate({
175
- inputRange: [0, 1],
176
- outputRange: [0.0001, 1]
177
- })
178
- }]
179
- };
180
150
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
181
151
  style: [containerStyle, style],
182
152
  onLayout: this.handleLayout
@@ -12,6 +12,7 @@ var _context = require("./context");
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
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); }
14
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; }
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); }
15
16
  const RadioButton = _ref => {
16
17
  let {
17
18
  Icon,
@@ -38,19 +39,7 @@ const RadioButton = _ref => {
38
39
  onPress === null || onPress === void 0 ? void 0 : onPress(realValue);
39
40
  onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realValue);
40
41
  };
41
- return /*#__PURE__*/React.createElement(_IconButton.default, {
42
- Icon: Icon,
43
- icon: isSelected ? selectedIcon : unselectedIcon,
44
- color: isSelected ? color : unselectedColor,
45
- disabled: disabled,
46
- onPress: handlePress,
47
- size: size,
48
- style: style,
49
- ...rest
50
- });
51
- };
52
- var _default = RadioButton;
53
- exports.default = _default;turn /*#__PURE__*/React.createElement(_IconButton.default, _extends({
42
+ return /*#__PURE__*/React.createElement(_IconButton.default, _extends({
54
43
  Icon: Icon,
55
44
  icon: isSelected ? selectedIcon : unselectedIcon,
56
45
  color: isSelected ? color : unselectedColor,
@@ -10,6 +10,7 @@ var _utilities = require("../../utilities");
10
10
  var _context = require("./context");
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); }
13
14
  const {
14
15
  Provider
15
16
  } = _context.radioButtonGroupContext;
@@ -49,23 +50,9 @@ const RadioButtonGroup = _ref => {
49
50
  alignItems: "center"
50
51
  });
51
52
  }
52
- return /*#__PURE__*/React.createElement(_reactNative.View, {
53
+ return /*#__PURE__*/React.createElement(_reactNative.View, _extends({
53
54
  style: [{
54
55
  minHeight: 40
55
- }, style],
56
- ...rest
57
- }, /*#__PURE__*/React.createElement(Provider, {
58
- value: {
59
- value: internalValue,
60
- onValueChange: handleValueChange,
61
- direction
62
- }
63
- }, /*#__PURE__*/React.createElement(_reactNative.View, {
64
- style: _containerStyle
65
- }, children)));
66
- };
67
- var _default = RadioButtonGroup;
68
- exports.default = _default;0
69
56
  }, style]
70
57
  }, rest), /*#__PURE__*/React.createElement(Provider, {
71
58
  value: {
@@ -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;
15
+ exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;AR_HEIGHT;
@@ -15,7 +15,6 @@ function overlay(elevation) {
15
15
  let surfaceColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _DarkTheme.default.colors.surface;
16
16
  if (isAnimatedValue(elevation)) {
17
17
  const inputRange = [0, 1, 2, 3, 8, 24];
18
-
19
18
  // @ts-expect-error: TS doesn't seem to refine the type correctly
20
19
  return elevation.interpolate({
21
20
  inputRange,
@@ -24,7 +23,6 @@ function overlay(elevation) {
24
23
  })
25
24
  });
26
25
  }
27
-
28
26
  // @ts-expect-error: TS doesn't seem to refine the type correctly
29
27
  return calculateColor(surfaceColor, elevation);
30
28
  }
@@ -65,4 +63,4 @@ const elevationOverlayTransparency = {
65
63
  22: 15.72,
66
64
  23: 15.84,
67
65
  24: 16
68
- };
66
+ };};
@@ -10,13 +10,47 @@ const DeckSwiper = _ref => {
10
10
  verticalEnabled = true,
11
11
  horizontalEnabled = true,
12
12
  visibleCardCount = 1,
13
+ data,
14
+ keyExtractor,
15
+ renderItem,
13
16
  style,
14
17
  children
15
18
  } = _ref;
19
+ //Both 'renderItem' and 'data' are optional to allow direct children. But if one is included, both need to be included
20
+ if (data && !renderItem || renderItem && !data) {
21
+ throw new Error("'renderItem' and 'data' need to both be provided to lazily render. Either remove them entirley or include both");
22
+ }
23
+ if (data && renderItem && children) {
24
+ console.warn("'children' of DeckSwiper ignored due to usage of 'data' and 'renderItem'");
25
+ }
16
26
  const childrenArray = React.useMemo(() => React.Children.toArray(children), [children]);
17
27
 
18
28
  // an array of indices based on children count
19
29
  const cardsFillerData = React.useMemo(() => Array.from(Array(childrenArray.length).keys()), [childrenArray]);
30
+ const cardsData = data || cardsFillerData;
31
+ const renderCard = (card, index) => {
32
+ if (renderItem) {
33
+ return renderItem({
34
+ item: card,
35
+ index
36
+ });
37
+ } else {
38
+ return /*#__PURE__*/React.createElement(React.Fragment, null, childrenArray[index]);
39
+ }
40
+ };
41
+ const renderFirstCard = () => {
42
+ if (cardsData.length) {
43
+ return renderCard(cardsData[0], 0);
44
+ }
45
+ return undefined;
46
+ };
47
+ const cardKeyExtractor = card => {
48
+ if (keyExtractor) {
49
+ return keyExtractor(card);
50
+ } else {
51
+ return card === null || card === void 0 ? void 0 : card.toString();
52
+ }
53
+ };
20
54
 
21
55
  /**
22
56
  * By default react-native-deck-swiper positions everything with absolute position.
@@ -30,10 +64,10 @@ const DeckSwiper = _ref => {
30
64
 
31
65
  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
32
66
  style: styles.containerHeightFiller
33
- }, childrenArray.length && childrenArray[0]), /*#__PURE__*/React.createElement(DeckSwiperComponent, {
34
- cards: cardsFillerData,
35
- renderCard: (_, i) => /*#__PURE__*/React.createElement(React.Fragment, null, childrenArray[i]),
36
- keyExtractor: card => card === null || card === void 0 ? void 0 : card.toString(),
67
+ }, renderFirstCard()), /*#__PURE__*/React.createElement(DeckSwiperComponent, {
68
+ cards: cardsData,
69
+ renderCard: renderCard,
70
+ keyExtractor: cardKeyExtractor,
37
71
  containerStyle: StyleSheet.flatten([styles.cardsContainer, style]),
38
72
  cardStyle: styles.card,
39
73
  onSwiped: onIndexChanged,
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { StyleProp, ViewStyle } from "react-native";
3
- export interface DeckSwiperProps {
3
+ export interface DeckSwiperProps<T> {
4
4
  onIndexChanged?: (index: number) => void;
5
5
  onEndReached?: () => void;
6
6
  startCardIndex?: number;
@@ -8,8 +8,14 @@ export interface DeckSwiperProps {
8
8
  verticalEnabled?: boolean;
9
9
  horizontalEnabled?: boolean;
10
10
  visibleCardCount?: number;
11
+ data?: Array<T>;
12
+ keyExtractor?: (item: T) => string;
13
+ renderItem?: ({ item, index }: {
14
+ item: T;
15
+ index: number;
16
+ }) => JSX.Element;
11
17
  style?: StyleProp<ViewStyle>;
12
18
  }
13
- declare const DeckSwiper: React.FC<React.PropsWithChildren<DeckSwiperProps>>;
19
+ declare const DeckSwiper: <T extends object>({ onIndexChanged, onEndReached, startCardIndex, infiniteSwiping, verticalEnabled, horizontalEnabled, visibleCardCount, data, keyExtractor, renderItem, style, children, }: React.PropsWithChildren<DeckSwiperProps<T>>) => JSX.Element;
14
20
  export default DeckSwiper;
15
21
  //# sourceMappingURL=DeckSwiper.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"DeckSwiper.d.ts","sourceRoot":"","sources":["../../../../../src/components/DeckSwiper/DeckSwiper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,cAAc,CAAC;AAGtE,MAAM,WAAW,eAAe;IAC9B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CA6DlE,CAAC;AAiBF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"DeckSwiper.d.ts","sourceRoot":"","sources":["../../../../../src/components/DeckSwiper/DeckSwiper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,cAAc,CAAC;AAGtE,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;QAAE,IAAI,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;IAC1E,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,UAAU,2PAoGf,CAAC;AAiBF,eAAe,UAAU,CAAC"}
@@ -3,11 +3,10 @@ import { StyleProp, ViewStyle } from "react-native";
3
3
  import type { Theme } from "../../styles/DefaultTheme";
4
4
  export interface DeckSwiperCardProps {
5
5
  style?: StyleProp<ViewStyle>;
6
- children: React.ReactNode;
7
6
  theme: Theme;
8
7
  }
9
- declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<DeckSwiperCardProps, "theme"> & {
8
+ declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<DeckSwiperCardProps>, "theme"> & {
10
9
  theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
11
- }> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<DeckSwiperCardProps> & React.FC<DeckSwiperCardProps>, {}>;
10
+ }> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<DeckSwiperCardProps>> & React.FC<React.PropsWithChildren<DeckSwiperCardProps>>, {}>;
12
11
  export default _default;
13
12
  //# sourceMappingURL=DeckSwiperCard.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"DeckSwiperCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/DeckSwiper/DeckSwiperCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAGvD,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC;CACd;;;;AA+BD,wBAAyC"}
1
+ {"version":3,"file":"DeckSwiperCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/DeckSwiper/DeckSwiperCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAGvD,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;CACd;;;;AA6BD,wBAAyC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@draftbit/core",
3
- "version": "46.8.1-1b6459.2+1b64593",
3
+ "version": "46.8.1-2ae5b7.2+2ae5b77",
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.1-1b6459.2+1b64593",
44
+ "@draftbit/types": "^46.8.1-2ae5b7.2+2ae5b77",
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",
@@ -92,5 +92,5 @@
92
92
  ]
93
93
  ]
94
94
  },
95
- "gitHead": "1b64593d591a225b64dc1a4fd0afbdcf3de444ef"
95
+ "gitHead": "2ae5b7790dbc8b74522107d35a88801b9c7a5c89"
96
96
  }
@@ -1,10 +1,40 @@
1
1
  import React from "react";
2
2
  import { StyleSheet, View } from "react-native";
3
3
  import DeckSwiperComponent from "react-native-deck-swiper";
4
- const DeckSwiper = ({ onIndexChanged, onEndReached, startCardIndex = 0, infiniteSwiping = false, verticalEnabled = true, horizontalEnabled = true, visibleCardCount = 1, style, children, }) => {
4
+ const DeckSwiper = ({ onIndexChanged, onEndReached, startCardIndex = 0, infiniteSwiping = false, verticalEnabled = true, horizontalEnabled = true, visibleCardCount = 1, data, keyExtractor, renderItem, style, children, }) => {
5
+ //Both 'renderItem' and 'data' are optional to allow direct children. But if one is included, both need to be included
6
+ if ((data && !renderItem) || (renderItem && !data)) {
7
+ throw new Error("'renderItem' and 'data' need to both be provided to lazily render. Either remove them entirley or include both");
8
+ }
9
+ if (data && renderItem && children) {
10
+ console.warn("'children' of DeckSwiper ignored due to usage of 'data' and 'renderItem'");
11
+ }
5
12
  const childrenArray = React.useMemo(() => React.Children.toArray(children), [children]);
6
13
  // an array of indices based on children count
7
14
  const cardsFillerData = React.useMemo(() => Array.from(Array(childrenArray.length).keys()), [childrenArray]);
15
+ const cardsData = data || cardsFillerData;
16
+ const renderCard = (card, index) => {
17
+ if (renderItem) {
18
+ return renderItem({ item: card, index });
19
+ }
20
+ else {
21
+ return React.createElement(React.Fragment, null, childrenArray[index]);
22
+ }
23
+ };
24
+ const renderFirstCard = () => {
25
+ if (cardsData.length) {
26
+ return renderCard(cardsData[0], 0);
27
+ }
28
+ return undefined;
29
+ };
30
+ const cardKeyExtractor = (card) => {
31
+ if (keyExtractor) {
32
+ return keyExtractor(card);
33
+ }
34
+ else {
35
+ return card === null || card === void 0 ? void 0 : card.toString();
36
+ }
37
+ };
8
38
  /**
9
39
  * By default react-native-deck-swiper positions everything with absolute position.
10
40
  * To overcome this, it is wrapped in a View to be able to add the component in any layout structure.
@@ -15,8 +45,8 @@ const DeckSwiper = ({ onIndexChanged, onEndReached, startCardIndex = 0, infinite
15
45
  * This effectivley makes the default height of the container be the height of the first card.
16
46
  */
17
47
  return (React.createElement(View, null,
18
- React.createElement(View, { style: styles.containerHeightFiller }, childrenArray.length && childrenArray[0]),
19
- React.createElement(DeckSwiperComponent, { cards: cardsFillerData, renderCard: (_, i) => React.createElement(React.Fragment, null, childrenArray[i]), keyExtractor: (card) => card === null || card === void 0 ? void 0 : card.toString(), containerStyle: StyleSheet.flatten([styles.cardsContainer, style]), cardStyle: styles.card, onSwiped: onIndexChanged, onSwipedAll: onEndReached, cardIndex: startCardIndex, infinite: infiniteSwiping, verticalSwipe: verticalEnabled, horizontalSwipe: horizontalEnabled, showSecondCard: visibleCardCount > 1, stackSize: visibleCardCount, backgroundColor: "transparent", cardVerticalMargin: 0, cardHorizontalMargin: 0 })));
48
+ React.createElement(View, { style: styles.containerHeightFiller }, renderFirstCard()),
49
+ React.createElement(DeckSwiperComponent, { cards: cardsData, renderCard: renderCard, keyExtractor: cardKeyExtractor, containerStyle: StyleSheet.flatten([styles.cardsContainer, style]), cardStyle: styles.card, onSwiped: onIndexChanged, onSwipedAll: onEndReached, cardIndex: startCardIndex, infinite: infiniteSwiping, verticalSwipe: verticalEnabled, horizontalSwipe: horizontalEnabled, showSecondCard: visibleCardCount > 1, stackSize: visibleCardCount, backgroundColor: "transparent", cardVerticalMargin: 0, cardHorizontalMargin: 0 })));
20
50
  };
21
51
  const styles = StyleSheet.create({
22
52
  cardsContainer: {
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import { StyleProp, ViewStyle, StyleSheet, View } from "react-native";
3
3
  import DeckSwiperComponent from "react-native-deck-swiper";
4
4
 
5
- export interface DeckSwiperProps {
5
+ export interface DeckSwiperProps<T> {
6
6
  onIndexChanged?: (index: number) => void;
7
7
  onEndReached?: () => void;
8
8
  startCardIndex?: number;
@@ -10,10 +10,13 @@ export interface DeckSwiperProps {
10
10
  verticalEnabled?: boolean;
11
11
  horizontalEnabled?: boolean;
12
12
  visibleCardCount?: number;
13
+ data?: Array<T>;
14
+ keyExtractor?: (item: T) => string;
15
+ renderItem?: ({ item, index }: { item: T; index: number }) => JSX.Element;
13
16
  style?: StyleProp<ViewStyle>;
14
17
  }
15
18
 
16
- const DeckSwiper: React.FC<React.PropsWithChildren<DeckSwiperProps>> = ({
19
+ const DeckSwiper = <T extends object>({
17
20
  onIndexChanged,
18
21
  onEndReached,
19
22
  startCardIndex = 0,
@@ -21,9 +24,25 @@ const DeckSwiper: React.FC<React.PropsWithChildren<DeckSwiperProps>> = ({
21
24
  verticalEnabled = true,
22
25
  horizontalEnabled = true,
23
26
  visibleCardCount = 1,
27
+ data,
28
+ keyExtractor,
29
+ renderItem,
24
30
  style,
25
31
  children,
26
- }) => {
32
+ }: React.PropsWithChildren<DeckSwiperProps<T>>) => {
33
+ //Both 'renderItem' and 'data' are optional to allow direct children. But if one is included, both need to be included
34
+ if ((data && !renderItem) || (renderItem && !data)) {
35
+ throw new Error(
36
+ "'renderItem' and 'data' need to both be provided to lazily render. Either remove them entirley or include both"
37
+ );
38
+ }
39
+
40
+ if (data && renderItem && children) {
41
+ console.warn(
42
+ "'children' of DeckSwiper ignored due to usage of 'data' and 'renderItem'"
43
+ );
44
+ }
45
+
27
46
  const childrenArray = React.useMemo(
28
47
  () => React.Children.toArray(children),
29
48
  [children]
@@ -35,6 +54,31 @@ const DeckSwiper: React.FC<React.PropsWithChildren<DeckSwiperProps>> = ({
35
54
  [childrenArray]
36
55
  );
37
56
 
57
+ const cardsData = data || cardsFillerData;
58
+
59
+ const renderCard = (card: any, index: number): JSX.Element => {
60
+ if (renderItem) {
61
+ return renderItem({ item: card, index });
62
+ } else {
63
+ return <>{childrenArray[index]}</>;
64
+ }
65
+ };
66
+
67
+ const renderFirstCard = (): JSX.Element | undefined => {
68
+ if (cardsData.length) {
69
+ return renderCard(cardsData[0], 0);
70
+ }
71
+ return undefined;
72
+ };
73
+
74
+ const cardKeyExtractor = (card: any) => {
75
+ if (keyExtractor) {
76
+ return keyExtractor(card);
77
+ } else {
78
+ return card?.toString();
79
+ }
80
+ };
81
+
38
82
  /**
39
83
  * By default react-native-deck-swiper positions everything with absolute position.
40
84
  * To overcome this, it is wrapped in a View to be able to add the component in any layout structure.
@@ -47,13 +91,11 @@ const DeckSwiper: React.FC<React.PropsWithChildren<DeckSwiperProps>> = ({
47
91
 
48
92
  return (
49
93
  <View>
50
- <View style={styles.containerHeightFiller}>
51
- {childrenArray.length && childrenArray[0]}
52
- </View>
94
+ <View style={styles.containerHeightFiller}>{renderFirstCard()}</View>
53
95
  <DeckSwiperComponent
54
- cards={cardsFillerData}
55
- renderCard={(_, i) => <>{childrenArray[i]}</>}
56
- keyExtractor={(card) => card?.toString()}
96
+ cards={cardsData as any[]}
97
+ renderCard={renderCard}
98
+ keyExtractor={cardKeyExtractor}
57
99
  containerStyle={
58
100
  StyleSheet.flatten([styles.cardsContainer, style]) as
59
101
  | object
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { View, StyleSheet } from "react-native";
3
3
  import { withTheme } from "../../theming";
4
- const DeckSwiperCard = ({ style, children, theme, }) => (React.createElement(View, { style: [
4
+ const DeckSwiperCard = ({ style, children, theme }) => (React.createElement(View, { style: [
5
5
  styles.card,
6
6
  {
7
7
  backgroundColor: theme.colors.background,
@@ -5,15 +5,12 @@ import { withTheme } from "../../theming";
5
5
 
6
6
  export interface DeckSwiperCardProps {
7
7
  style?: StyleProp<ViewStyle>;
8
- children: React.ReactNode;
9
8
  theme: Theme;
10
9
  }
11
10
 
12
- const DeckSwiperCard: React.FC<DeckSwiperCardProps> = ({
13
- style,
14
- children,
15
- theme,
16
- }) => (
11
+ const DeckSwiperCard: React.FC<
12
+ React.PropsWithChildren<DeckSwiperCardProps>
13
+ > = ({ style, children, theme }) => (
17
14
  <View
18
15
  style={[
19
16
  styles.card,