@draftbit/core 47.2.14-41b571.2 → 47.2.14-5888e0.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 +18 -18
- 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 +18 -18
- package/src/components/SwipeableItem/SwipeableItem.js.map +1 -1
- package/src/components/SwipeableItem/SwipeableItem.tsx +44 -26
- 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-5888e0.2+5888e0c",
|
|
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-5888e0.2+5888e0c",
|
|
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": "5888e0c8318382a4d4cce263f420f2da5e6ae7fe"
|
|
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,24 +32,24 @@ 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
|
-
(
|
|
52
|
-
throw Error("Colliding configuration in SwipeableItem. You cannot have SwipeableItemButton(s) on the
|
|
50
|
+
if ((leftSwipeButtons.length && isLeftSwipeHandled) ||
|
|
51
|
+
(rightSwipeButtons.length && isRightSwipeHandled)) {
|
|
52
|
+
throw Error("Colliding configuration in SwipeableItem. You cannot have SwipeableItemButton(s) on the swipe direction 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
|
|
55
55
|
const renderBehindItem = (item, index) => (React.createElement(Pressable, { key: index.toString(), onPress: item.onPress, style: [
|
|
@@ -57,25 +57,25 @@ const SwipeableItem = ({ theme, style, children, Icon, closeOnPress, leftOpenVal
|
|
|
57
57
|
{ backgroundColor: item.backgroundColor || theme.colors.primary },
|
|
58
58
|
] },
|
|
59
59
|
item.icon && (React.createElement(Icon, { name: item.icon, size: item.iconSize || 25, color: item.color || theme.colors.surface })),
|
|
60
|
-
React.createElement(Text, { style: [textStyles, { color: item.color || theme.colors.surface }] }, item.title)));
|
|
60
|
+
item.title && (React.createElement(Text, { style: [textStyles, { color: item.color || theme.colors.surface }] }, item.title))));
|
|
61
61
|
const defaultLeftOpenValue = componentWidth ? componentWidth / 2 : 0;
|
|
62
62
|
const defaultRightOpenValue = componentWidth ? -componentWidth / 2 : 0;
|
|
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.onSwipedRight) === null || _a === void 0 ? void 0 : _a.call(rightSwipe); } : undefined, onRightAction: isLeftSwipeHandled ? () => { var _a; return (_a = leftSwipe.onSwipedLeft) === 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,16 +162,16 @@ 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
|
-
"Colliding configuration in SwipeableItem. You cannot have SwipeableItemButton(s) on the
|
|
174
|
+
"Colliding configuration in SwipeableItem. You cannot have SwipeableItemButton(s) on the swipe direction where swipe handling is configured. Either reset swipe configuration or remove the button(s)."
|
|
161
175
|
);
|
|
162
176
|
}
|
|
163
177
|
|
|
@@ -178,9 +192,13 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
|
|
|
178
192
|
color={item.color || theme.colors.surface}
|
|
179
193
|
/>
|
|
180
194
|
)}
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
195
|
+
{item.title && (
|
|
196
|
+
<Text
|
|
197
|
+
style={[textStyles, { color: item.color || theme.colors.surface }]}
|
|
198
|
+
>
|
|
199
|
+
{item.title}
|
|
200
|
+
</Text>
|
|
201
|
+
)}
|
|
184
202
|
</Pressable>
|
|
185
203
|
);
|
|
186
204
|
|
|
@@ -197,28 +215,28 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
|
|
|
197
215
|
{/*@ts-ignore*/}
|
|
198
216
|
<SwipeRow
|
|
199
217
|
leftOpenValue={
|
|
200
|
-
|
|
218
|
+
isRightSwipeHandled ? 0 : leftOpenValue || defaultLeftOpenValue //If in swiping mode, don't keep open
|
|
201
219
|
}
|
|
202
220
|
rightOpenValue={
|
|
203
|
-
|
|
221
|
+
isLeftSwipeHandled ? 0 : rightOpenValue || defaultRightOpenValue
|
|
204
222
|
}
|
|
205
223
|
leftActivationValue={
|
|
206
|
-
leftActivationValue ||
|
|
224
|
+
leftActivationValue || isRightSwipeHandled
|
|
207
225
|
? defaultLeftOpenValue * (swipeActivationPercentage / 100) //When swipe passes activation percentage then it should be considered activated (call onSwipe)
|
|
208
226
|
: defaultLeftOpenValue
|
|
209
227
|
}
|
|
210
228
|
rightActivationValue={
|
|
211
|
-
rightActivationValue ||
|
|
229
|
+
rightActivationValue || isLeftSwipeHandled
|
|
212
230
|
? defaultRightOpenValue * (swipeActivationPercentage / 100)
|
|
213
231
|
: defaultRightOpenValue
|
|
214
232
|
}
|
|
215
|
-
stopLeftSwipe={
|
|
216
|
-
stopRightSwipe={
|
|
233
|
+
stopLeftSwipe={stopRightSwipe || defaultLeftOpenValue}
|
|
234
|
+
stopRightSwipe={stopLeftSwipe || defaultRightOpenValue}
|
|
217
235
|
onLeftAction={
|
|
218
|
-
|
|
236
|
+
isRightSwipeHandled ? () => rightSwipe.onSwipedRight?.() : undefined
|
|
219
237
|
}
|
|
220
238
|
onRightAction={
|
|
221
|
-
|
|
239
|
+
isLeftSwipeHandled ? () => leftSwipe.onSwipedLeft?.() : undefined
|
|
222
240
|
}
|
|
223
241
|
swipeGestureBegan={onStartSwiping}
|
|
224
242
|
swipeGestureEnded={onStopSwiping}
|
|
@@ -228,22 +246,22 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
|
|
|
228
246
|
>
|
|
229
247
|
<View style={styles.behindContainer}>
|
|
230
248
|
<View style={styles.behindContainerItem}>
|
|
231
|
-
{
|
|
249
|
+
{isRightSwipeHandled
|
|
232
250
|
? renderBehindItem(
|
|
233
|
-
|
|
251
|
+
rightSwipeToSwipeableItemBehindItem(rightSwipe),
|
|
234
252
|
0
|
|
235
253
|
)
|
|
236
|
-
:
|
|
254
|
+
: rightSwipeButtons.map((item, index) =>
|
|
237
255
|
renderBehindItem(item.props, index)
|
|
238
256
|
)}
|
|
239
257
|
</View>
|
|
240
258
|
<View style={styles.behindContainerItem}>
|
|
241
|
-
{
|
|
259
|
+
{isLeftSwipeHandled
|
|
242
260
|
? renderBehindItem(
|
|
243
|
-
|
|
261
|
+
leftSwipeToSwipeableItemBehindItem(leftSwipe),
|
|
244
262
|
0
|
|
245
263
|
)
|
|
246
|
-
:
|
|
264
|
+
: leftSwipeButtons.map((item, index) =>
|
|
247
265
|
renderBehindItem(item.props, index)
|
|
248
266
|
)}
|
|
249
267
|
</View>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { pick } from "lodash";
|
|
2
2
|
export function extractRightSwipeProps(object) {
|
|
3
3
|
return pick(object, [
|
|
4
|
-
"
|
|
4
|
+
"onSwipedRight",
|
|
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
|
+
"onSwipedLeft",
|
|
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.onSwipedRight,
|
|
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.onSwipedLeft,
|
|
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,
|
|
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,eAAe;QACf,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,cAAc;QACd,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,aAAa;QAC5B,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,YAAY;QAC3B,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
|
+
onSwipedRight?: () => 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
|
+
onSwipedLeft?: () => 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
|
+
"onSwipedRight",
|
|
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
|
+
"onSwipedLeft",
|
|
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.onSwipedRight,
|
|
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.onSwipedLeft,
|
|
75
75
|
icon: swipe.leftSwipeIcon,
|
|
76
76
|
iconSize: swipe.leftSwipeIconSize,
|
|
77
77
|
backgroundColor: swipe.leftSwipeBackgroundColor,
|