@draftbit/core 47.2.14-41b571.2 → 47.2.14-76dc6c.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.
- package/lib/src/components/SwipeableItem/SwipeableItem.d.ts +13 -0
- package/lib/src/components/SwipeableItem/SwipeableItem.js +16 -16
- package/lib/src/components/SwipeableItem/SwipeableItem.js.map +1 -1
- package/lib/src/components/SwipeableItem/SwipeableItemCommon.d.ts +3 -3
- package/lib/src/components/SwipeableItem/SwipeableItemCommon.js +6 -6
- package/lib/src/components/SwipeableItem/SwipeableItemCommon.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/components/SwipeableItem/SwipeableItem.js +16 -16
- package/src/components/SwipeableItem/SwipeableItem.js.map +1 -1
- package/src/components/SwipeableItem/SwipeableItem.tsx +36 -22
- package/src/components/SwipeableItem/SwipeableItemCommon.js +6 -6
- package/src/components/SwipeableItem/SwipeableItemCommon.js.map +1 -1
- package/src/components/SwipeableItem/SwipeableItemCommon.ts +9 -9
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "47.2.14-
|
|
3
|
+
"version": "47.2.14-76dc6c.2+76dc6c6",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/src/index.js",
|
|
6
6
|
"types": "lib/src/index.d.ts",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@date-io/date-fns": "^1.3.13",
|
|
41
41
|
"@draftbit/react-theme-provider": "^2.1.1",
|
|
42
|
-
"@draftbit/types": "^47.2.14-
|
|
42
|
+
"@draftbit/types": "^47.2.14-76dc6c.2+76dc6c6",
|
|
43
43
|
"@material-ui/core": "^4.11.0",
|
|
44
44
|
"@material-ui/pickers": "^3.2.10",
|
|
45
45
|
"@react-native-community/slider": "4.2.4",
|
|
@@ -77,5 +77,5 @@
|
|
|
77
77
|
"node_modules/",
|
|
78
78
|
"lib/"
|
|
79
79
|
],
|
|
80
|
-
"gitHead": "
|
|
80
|
+
"gitHead": "76dc6c64290b8b38fb6b0728b0b862fa7db7d547"
|
|
81
81
|
}
|
|
@@ -8,7 +8,7 @@ import { SwipeableListContext } from "./SwipeableList";
|
|
|
8
8
|
import { leftSwipeToSwipeableItemBehindItem, rightSwipeToSwipeableItemBehindItem, extractLeftSwipeProps, extractRightSwipeProps, } from "./SwipeableItemCommon";
|
|
9
9
|
const SwipeableItem = ({ theme, style, children, Icon, closeOnPress, leftOpenValue, rightOpenValue, leftActivationValue, rightActivationValue, swipeActivationPercentage = 80, stopLeftSwipe, stopRightSwipe, friction = 20, ...rest }) => {
|
|
10
10
|
const instanceOfSwipeableItemButtonProps = (object) => {
|
|
11
|
-
return "title" in object && "
|
|
11
|
+
return "title" in object && "revealSwipeDirection" in object;
|
|
12
12
|
};
|
|
13
13
|
const isEmptyObject = (object) => {
|
|
14
14
|
return Object.keys(object).length === 0;
|
|
@@ -32,23 +32,23 @@ const SwipeableItem = ({ theme, style, children, Icon, closeOnPress, leftOpenVal
|
|
|
32
32
|
sizeStyles /* Size styles needs to be readded to surface container due to inconsistencies on web */,
|
|
33
33
|
]);
|
|
34
34
|
const [componentWidth, setComponentWidth] = React.useState(null);
|
|
35
|
-
const
|
|
35
|
+
const leftSwipeButtons = React.useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child) &&
|
|
36
36
|
instanceOfSwipeableItemButtonProps(child.props) &&
|
|
37
|
-
child.props.
|
|
38
|
-
const
|
|
37
|
+
child.props.revealSwipeDirection === "left"), [children]);
|
|
38
|
+
const rightSwipeButtons = React.useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child) &&
|
|
39
39
|
instanceOfSwipeableItemButtonProps(child.props) &&
|
|
40
|
-
child.props.
|
|
40
|
+
child.props.revealSwipeDirection === "right"), [children]);
|
|
41
41
|
const remainingChildren = React.useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child) &&
|
|
42
42
|
!instanceOfSwipeableItemButtonProps(child.props)), [children]);
|
|
43
43
|
const leftSwipe = extractLeftSwipeProps(rest);
|
|
44
44
|
const rightSwipe = extractRightSwipeProps(rest);
|
|
45
45
|
const isLeftSwipeHandled = !isEmptyObject(leftSwipe);
|
|
46
46
|
const isRightSwipeHandled = !isEmptyObject(rightSwipe);
|
|
47
|
-
if (
|
|
47
|
+
if (leftSwipeButtons.length > 2 || rightSwipeButtons.length > 2) {
|
|
48
48
|
throw Error("Cannot have more than 2 SwipeableItemButton(s) per side");
|
|
49
49
|
}
|
|
50
|
-
if ((
|
|
51
|
-
(
|
|
50
|
+
if ((leftSwipeButtons.length && isLeftSwipeHandled) ||
|
|
51
|
+
(rightSwipeButtons.length && isRightSwipeHandled)) {
|
|
52
52
|
throw Error("Colliding configuration in SwipeableItem. You cannot have SwipeableItemButton(s) on the side where swipe handling is configured. Either reset swipe configuration or remove the button(s).");
|
|
53
53
|
}
|
|
54
54
|
//Renders a single 'behind' item. Used for both buttons and swipe handler
|
|
@@ -63,19 +63,19 @@ const SwipeableItem = ({ theme, style, children, Icon, closeOnPress, leftOpenVal
|
|
|
63
63
|
return (React.createElement(View, { onLayout: (event) => {
|
|
64
64
|
setComponentWidth(event.nativeEvent.layout.width);
|
|
65
65
|
}, style: [styles.parentContainer, parentContainerStyles] },
|
|
66
|
-
React.createElement(SwipeRow, { leftOpenValue:
|
|
67
|
-
, rightOpenValue:
|
|
66
|
+
React.createElement(SwipeRow, { leftOpenValue: isRightSwipeHandled ? 0 : leftOpenValue || defaultLeftOpenValue //If in swiping mode, don't keep open
|
|
67
|
+
, rightOpenValue: isLeftSwipeHandled ? 0 : rightOpenValue || defaultRightOpenValue, leftActivationValue: leftActivationValue || isRightSwipeHandled
|
|
68
68
|
? defaultLeftOpenValue * (swipeActivationPercentage / 100) //When swipe passes activation percentage then it should be considered activated (call onSwipe)
|
|
69
|
-
: defaultLeftOpenValue, rightActivationValue: rightActivationValue ||
|
|
69
|
+
: defaultLeftOpenValue, rightActivationValue: rightActivationValue || isLeftSwipeHandled
|
|
70
70
|
? defaultRightOpenValue * (swipeActivationPercentage / 100)
|
|
71
|
-
: defaultRightOpenValue, stopLeftSwipe:
|
|
71
|
+
: defaultRightOpenValue, stopLeftSwipe: stopRightSwipe || defaultLeftOpenValue, stopRightSwipe: stopLeftSwipe || defaultRightOpenValue, onLeftAction: isRightSwipeHandled ? () => { var _a; return (_a = rightSwipe.onSwipeRight) === null || _a === void 0 ? void 0 : _a.call(rightSwipe); } : undefined, onRightAction: isLeftSwipeHandled ? () => { var _a; return (_a = leftSwipe.onSwipeLeft) === null || _a === void 0 ? void 0 : _a.call(leftSwipe); } : undefined, swipeGestureBegan: onStartSwiping, swipeGestureEnded: onStopSwiping, closeOnRowPress: closeOnPress, friction: friction, ...rest },
|
|
72
72
|
React.createElement(View, { style: styles.behindContainer },
|
|
73
|
-
React.createElement(View, { style: styles.behindContainerItem }, isLeftSwipeHandled
|
|
74
|
-
? renderBehindItem(leftSwipeToSwipeableItemBehindItem(leftSwipe), 0)
|
|
75
|
-
: leftButtons.map((item, index) => renderBehindItem(item.props, index))),
|
|
76
73
|
React.createElement(View, { style: styles.behindContainerItem }, isRightSwipeHandled
|
|
77
74
|
? renderBehindItem(rightSwipeToSwipeableItemBehindItem(rightSwipe), 0)
|
|
78
|
-
:
|
|
75
|
+
: rightSwipeButtons.map((item, index) => renderBehindItem(item.props, index))),
|
|
76
|
+
React.createElement(View, { style: styles.behindContainerItem }, isLeftSwipeHandled
|
|
77
|
+
? renderBehindItem(leftSwipeToSwipeableItemBehindItem(leftSwipe), 0)
|
|
78
|
+
: leftSwipeButtons.map((item, index) => renderBehindItem(item.props, index)))),
|
|
79
79
|
React.createElement(View, { style: [
|
|
80
80
|
styles.surfaceContainer,
|
|
81
81
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SwipeableItem.js","sourceRoot":"","sources":["SwipeableItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,IAAI,EAIJ,UAAU,EACV,IAAI,GACL,MAAM,cAAc,CAAC;AACtB,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EACL,4BAA4B,EAC5B,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,iBAAiB,EACjB,aAAa,GACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAGxD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAIL,kCAAkC,EAClC,mCAAmC,EACnC,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"SwipeableItem.js","sourceRoot":"","sources":["SwipeableItem.tsx"],"names":[],"mappings":"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"}
|
|
@@ -32,6 +32,20 @@ import {
|
|
|
32
32
|
extractRightSwipeProps,
|
|
33
33
|
} from "./SwipeableItemCommon";
|
|
34
34
|
|
|
35
|
+
/**
|
|
36
|
+
* Clarification Regarding left/right directions and what they mean in the context of this component
|
|
37
|
+
* ------------------------------------------------------------------------------------------------------------
|
|
38
|
+
* Swipe Left / Left Swipe = Swiping to the left (i.e. Swiping from the right)
|
|
39
|
+
* Swipe Right / Right Swipe = Swiping to the right (i.e. Swiping from the left)
|
|
40
|
+
*
|
|
41
|
+
* This is only applies in the context of swipes, and not anywhere where a direction is refernced.
|
|
42
|
+
* For example 'rightOpenValue' referes to the open value on the right side.
|
|
43
|
+
* While 'stopRightSwipe' refers to the stop value of the swipe from left to right, which is on the left side.
|
|
44
|
+
* This is because one refers to a swipe and one does not, so the word 'right' has different meanings.
|
|
45
|
+
*
|
|
46
|
+
* This component is built around this concept to avoid confusion
|
|
47
|
+
*/
|
|
48
|
+
|
|
35
49
|
export interface SwipeableItemProps extends IconSlot {
|
|
36
50
|
closeOnPress?: boolean;
|
|
37
51
|
leftOpenValue?: number;
|
|
@@ -74,7 +88,7 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
|
|
|
74
88
|
const instanceOfSwipeableItemButtonProps = (
|
|
75
89
|
object: any
|
|
76
90
|
): object is SwipeableItemButtonProps => {
|
|
77
|
-
return "title" in object && "
|
|
91
|
+
return "title" in object && "revealSwipeDirection" in object;
|
|
78
92
|
};
|
|
79
93
|
|
|
80
94
|
const isEmptyObject = (object: object) => {
|
|
@@ -110,24 +124,24 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
|
|
|
110
124
|
const [componentWidth, setComponentWidth] = React.useState<number | null>(
|
|
111
125
|
null
|
|
112
126
|
);
|
|
113
|
-
const
|
|
127
|
+
const leftSwipeButtons = React.useMemo(
|
|
114
128
|
() =>
|
|
115
129
|
React.Children.toArray(children).filter(
|
|
116
130
|
(child) =>
|
|
117
131
|
React.isValidElement(child) &&
|
|
118
132
|
instanceOfSwipeableItemButtonProps(child.props) &&
|
|
119
|
-
child.props.
|
|
133
|
+
child.props.revealSwipeDirection === "left"
|
|
120
134
|
) as React.ReactElement<SwipeableItemButtonProps>[],
|
|
121
135
|
[children]
|
|
122
136
|
);
|
|
123
137
|
|
|
124
|
-
const
|
|
138
|
+
const rightSwipeButtons = React.useMemo(
|
|
125
139
|
() =>
|
|
126
140
|
React.Children.toArray(children).filter(
|
|
127
141
|
(child) =>
|
|
128
142
|
React.isValidElement(child) &&
|
|
129
143
|
instanceOfSwipeableItemButtonProps(child.props) &&
|
|
130
|
-
child.props.
|
|
144
|
+
child.props.revealSwipeDirection === "right"
|
|
131
145
|
) as React.ReactElement<SwipeableItemButtonProps>[],
|
|
132
146
|
[children]
|
|
133
147
|
);
|
|
@@ -148,13 +162,13 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
|
|
|
148
162
|
const isLeftSwipeHandled = !isEmptyObject(leftSwipe);
|
|
149
163
|
const isRightSwipeHandled = !isEmptyObject(rightSwipe);
|
|
150
164
|
|
|
151
|
-
if (
|
|
165
|
+
if (leftSwipeButtons.length > 2 || rightSwipeButtons.length > 2) {
|
|
152
166
|
throw Error("Cannot have more than 2 SwipeableItemButton(s) per side");
|
|
153
167
|
}
|
|
154
168
|
|
|
155
169
|
if (
|
|
156
|
-
(
|
|
157
|
-
(
|
|
170
|
+
(leftSwipeButtons.length && isLeftSwipeHandled) ||
|
|
171
|
+
(rightSwipeButtons.length && isRightSwipeHandled)
|
|
158
172
|
) {
|
|
159
173
|
throw Error(
|
|
160
174
|
"Colliding configuration in SwipeableItem. You cannot have SwipeableItemButton(s) on the side where swipe handling is configured. Either reset swipe configuration or remove the button(s)."
|
|
@@ -197,28 +211,28 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
|
|
|
197
211
|
{/*@ts-ignore*/}
|
|
198
212
|
<SwipeRow
|
|
199
213
|
leftOpenValue={
|
|
200
|
-
|
|
214
|
+
isRightSwipeHandled ? 0 : leftOpenValue || defaultLeftOpenValue //If in swiping mode, don't keep open
|
|
201
215
|
}
|
|
202
216
|
rightOpenValue={
|
|
203
|
-
|
|
217
|
+
isLeftSwipeHandled ? 0 : rightOpenValue || defaultRightOpenValue
|
|
204
218
|
}
|
|
205
219
|
leftActivationValue={
|
|
206
|
-
leftActivationValue ||
|
|
220
|
+
leftActivationValue || isRightSwipeHandled
|
|
207
221
|
? defaultLeftOpenValue * (swipeActivationPercentage / 100) //When swipe passes activation percentage then it should be considered activated (call onSwipe)
|
|
208
222
|
: defaultLeftOpenValue
|
|
209
223
|
}
|
|
210
224
|
rightActivationValue={
|
|
211
|
-
rightActivationValue ||
|
|
225
|
+
rightActivationValue || isLeftSwipeHandled
|
|
212
226
|
? defaultRightOpenValue * (swipeActivationPercentage / 100)
|
|
213
227
|
: defaultRightOpenValue
|
|
214
228
|
}
|
|
215
|
-
stopLeftSwipe={
|
|
216
|
-
stopRightSwipe={
|
|
229
|
+
stopLeftSwipe={stopRightSwipe || defaultLeftOpenValue}
|
|
230
|
+
stopRightSwipe={stopLeftSwipe || defaultRightOpenValue}
|
|
217
231
|
onLeftAction={
|
|
218
|
-
|
|
232
|
+
isRightSwipeHandled ? () => rightSwipe.onSwipeRight?.() : undefined
|
|
219
233
|
}
|
|
220
234
|
onRightAction={
|
|
221
|
-
|
|
235
|
+
isLeftSwipeHandled ? () => leftSwipe.onSwipeLeft?.() : undefined
|
|
222
236
|
}
|
|
223
237
|
swipeGestureBegan={onStartSwiping}
|
|
224
238
|
swipeGestureEnded={onStopSwiping}
|
|
@@ -228,22 +242,22 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
|
|
|
228
242
|
>
|
|
229
243
|
<View style={styles.behindContainer}>
|
|
230
244
|
<View style={styles.behindContainerItem}>
|
|
231
|
-
{
|
|
245
|
+
{isRightSwipeHandled
|
|
232
246
|
? renderBehindItem(
|
|
233
|
-
|
|
247
|
+
rightSwipeToSwipeableItemBehindItem(rightSwipe),
|
|
234
248
|
0
|
|
235
249
|
)
|
|
236
|
-
:
|
|
250
|
+
: rightSwipeButtons.map((item, index) =>
|
|
237
251
|
renderBehindItem(item.props, index)
|
|
238
252
|
)}
|
|
239
253
|
</View>
|
|
240
254
|
<View style={styles.behindContainerItem}>
|
|
241
|
-
{
|
|
255
|
+
{isLeftSwipeHandled
|
|
242
256
|
? renderBehindItem(
|
|
243
|
-
|
|
257
|
+
leftSwipeToSwipeableItemBehindItem(leftSwipe),
|
|
244
258
|
0
|
|
245
259
|
)
|
|
246
|
-
:
|
|
260
|
+
: leftSwipeButtons.map((item, index) =>
|
|
247
261
|
renderBehindItem(item.props, index)
|
|
248
262
|
)}
|
|
249
263
|
</View>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { pick } from "lodash";
|
|
2
2
|
export function extractRightSwipeProps(object) {
|
|
3
3
|
return pick(object, [
|
|
4
|
-
"
|
|
4
|
+
"onSwipeRight",
|
|
5
5
|
"rightSwipeTitle",
|
|
6
6
|
"rightSwipeIcon",
|
|
7
7
|
"rightSwipeIconSize",
|
|
@@ -11,7 +11,7 @@ export function extractRightSwipeProps(object) {
|
|
|
11
11
|
}
|
|
12
12
|
export function extractLeftSwipeProps(object) {
|
|
13
13
|
return pick(object, [
|
|
14
|
-
"
|
|
14
|
+
"onSwipeLeft",
|
|
15
15
|
"leftSwipeTitle",
|
|
16
16
|
"leftSwipeIcon",
|
|
17
17
|
"leftSwipeIconSize",
|
|
@@ -22,8 +22,8 @@ export function extractLeftSwipeProps(object) {
|
|
|
22
22
|
export function rightSwipeToSwipeableItemBehindItem(swipe) {
|
|
23
23
|
return {
|
|
24
24
|
title: swipe.rightSwipeTitle || "",
|
|
25
|
-
|
|
26
|
-
onSwipe: swipe.
|
|
25
|
+
revealSwipeDirection: "right",
|
|
26
|
+
onSwipe: swipe.onSwipeRight,
|
|
27
27
|
icon: swipe.rightSwipeIcon,
|
|
28
28
|
iconSize: swipe.rightSwipeIconSize,
|
|
29
29
|
backgroundColor: swipe.rightSwipeBackgroundColor,
|
|
@@ -33,8 +33,8 @@ export function rightSwipeToSwipeableItemBehindItem(swipe) {
|
|
|
33
33
|
export function leftSwipeToSwipeableItemBehindItem(swipe) {
|
|
34
34
|
return {
|
|
35
35
|
title: swipe.leftSwipeTitle || "",
|
|
36
|
-
|
|
37
|
-
onSwipe: swipe.
|
|
36
|
+
revealSwipeDirection: "left",
|
|
37
|
+
onSwipe: swipe.onSwipeLeft,
|
|
38
38
|
icon: swipe.leftSwipeIcon,
|
|
39
39
|
iconSize: swipe.leftSwipeIconSize,
|
|
40
40
|
backgroundColor: swipe.leftSwipeBackgroundColor,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SwipeableItemCommon.js","sourceRoot":"","sources":["SwipeableItemCommon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AA+B9B,MAAM,UAAU,sBAAsB,CAAC,MAAc;IACnD,OAAO,IAAI,CAAC,MAAM,EAAE;QAClB,cAAc;QACd,iBAAiB;QACjB,gBAAgB;QAChB,oBAAoB;QACpB,2BAA2B;QAC3B,iBAAiB;KAClB,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,MAAc;IAClD,OAAO,IAAI,CAAC,MAAM,EAAE;QAClB,aAAa;QACb,gBAAgB;QAChB,eAAe;QACf,mBAAmB;QACnB,0BAA0B;QAC1B,gBAAgB;KACjB,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,mCAAmC,CACjD,KAAsB;IAEtB,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,eAAe,IAAI,EAAE;QAClC,
|
|
1
|
+
{"version":3,"file":"SwipeableItemCommon.js","sourceRoot":"","sources":["SwipeableItemCommon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AA+B9B,MAAM,UAAU,sBAAsB,CAAC,MAAc;IACnD,OAAO,IAAI,CAAC,MAAM,EAAE;QAClB,cAAc;QACd,iBAAiB;QACjB,gBAAgB;QAChB,oBAAoB;QACpB,2BAA2B;QAC3B,iBAAiB;KAClB,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,MAAc;IAClD,OAAO,IAAI,CAAC,MAAM,EAAE;QAClB,aAAa;QACb,gBAAgB;QAChB,eAAe;QACf,mBAAmB;QACnB,0BAA0B;QAC1B,gBAAgB;KACjB,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,mCAAmC,CACjD,KAAsB;IAEtB,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,eAAe,IAAI,EAAE;QAClC,oBAAoB,EAAE,OAAO;QAC7B,OAAO,EAAE,KAAK,CAAC,YAAY;QAC3B,IAAI,EAAE,KAAK,CAAC,cAAc;QAC1B,QAAQ,EAAE,KAAK,CAAC,kBAAkB;QAClC,eAAe,EAAE,KAAK,CAAC,yBAAyB;QAChD,KAAK,EAAE,KAAK,CAAC,eAAe;KAC7B,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,kCAAkC,CAChD,KAAqB;IAErB,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,cAAc,IAAI,EAAE;QACjC,oBAAoB,EAAE,MAAM;QAC5B,OAAO,EAAE,KAAK,CAAC,WAAW;QAC1B,IAAI,EAAE,KAAK,CAAC,aAAa;QACzB,QAAQ,EAAE,KAAK,CAAC,iBAAiB;QACjC,eAAe,EAAE,KAAK,CAAC,wBAAwB;QAC/C,KAAK,EAAE,KAAK,CAAC,cAAc;KAC5B,CAAC;AACJ,CAAC"}
|
|
@@ -2,7 +2,7 @@ import { pick } from "lodash";
|
|
|
2
2
|
|
|
3
3
|
export interface SwipeableItemBehindItem {
|
|
4
4
|
title: string;
|
|
5
|
-
|
|
5
|
+
revealSwipeDirection: "left" | "right";
|
|
6
6
|
onPress?: () => void;
|
|
7
7
|
onSwipe?: () => void;
|
|
8
8
|
icon?: string;
|
|
@@ -12,7 +12,7 @@ export interface SwipeableItemBehindItem {
|
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
export interface RightSwipeProps {
|
|
15
|
-
|
|
15
|
+
onSwipeRight?: () => void;
|
|
16
16
|
rightSwipeTitle?: string;
|
|
17
17
|
rightSwipeIcon?: string;
|
|
18
18
|
rightSwipeIconSize?: number;
|
|
@@ -21,7 +21,7 @@ export interface RightSwipeProps {
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
export interface LeftSwipeProps {
|
|
24
|
-
|
|
24
|
+
onSwipeLeft?: () => void;
|
|
25
25
|
leftSwipeTitle?: string;
|
|
26
26
|
leftSwipeIcon?: string;
|
|
27
27
|
leftSwipeIconSize?: number;
|
|
@@ -31,7 +31,7 @@ export interface LeftSwipeProps {
|
|
|
31
31
|
|
|
32
32
|
export function extractRightSwipeProps(object: object): RightSwipeProps {
|
|
33
33
|
return pick(object, [
|
|
34
|
-
"
|
|
34
|
+
"onSwipeRight",
|
|
35
35
|
"rightSwipeTitle",
|
|
36
36
|
"rightSwipeIcon",
|
|
37
37
|
"rightSwipeIconSize",
|
|
@@ -42,7 +42,7 @@ export function extractRightSwipeProps(object: object): RightSwipeProps {
|
|
|
42
42
|
|
|
43
43
|
export function extractLeftSwipeProps(object: object): LeftSwipeProps {
|
|
44
44
|
return pick(object, [
|
|
45
|
-
"
|
|
45
|
+
"onSwipeLeft",
|
|
46
46
|
"leftSwipeTitle",
|
|
47
47
|
"leftSwipeIcon",
|
|
48
48
|
"leftSwipeIconSize",
|
|
@@ -56,8 +56,8 @@ export function rightSwipeToSwipeableItemBehindItem(
|
|
|
56
56
|
): Omit<SwipeableItemBehindItem, "onPress"> {
|
|
57
57
|
return {
|
|
58
58
|
title: swipe.rightSwipeTitle || "",
|
|
59
|
-
|
|
60
|
-
onSwipe: swipe.
|
|
59
|
+
revealSwipeDirection: "right",
|
|
60
|
+
onSwipe: swipe.onSwipeRight,
|
|
61
61
|
icon: swipe.rightSwipeIcon,
|
|
62
62
|
iconSize: swipe.rightSwipeIconSize,
|
|
63
63
|
backgroundColor: swipe.rightSwipeBackgroundColor,
|
|
@@ -70,8 +70,8 @@ export function leftSwipeToSwipeableItemBehindItem(
|
|
|
70
70
|
): Omit<SwipeableItemBehindItem, "onPress"> {
|
|
71
71
|
return {
|
|
72
72
|
title: swipe.leftSwipeTitle || "",
|
|
73
|
-
|
|
74
|
-
onSwipe: swipe.
|
|
73
|
+
revealSwipeDirection: "left",
|
|
74
|
+
onSwipe: swipe.onSwipeLeft,
|
|
75
75
|
icon: swipe.leftSwipeIcon,
|
|
76
76
|
iconSize: swipe.leftSwipeIconSize,
|
|
77
77
|
backgroundColor: swipe.leftSwipeBackgroundColor,
|