ferns-ui 0.15.0 → 0.16.0

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 (5) hide show
  1. package/dist/Button.d.ts +4 -1
  2. package/dist/Button.js +50 -34
  3. package/dist/Button.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/Button.tsx +97 -61
package/dist/Button.d.ts CHANGED
@@ -13,5 +13,8 @@ export interface ButtonProps {
13
13
  icon?: GestaltIconName | string;
14
14
  iconPrefix?: IconPrefix;
15
15
  iconColor?: ButtonColor | Color;
16
+ withConfirmation?: boolean;
17
+ confirmationText?: string;
18
+ confirmationHeading?: string;
16
19
  }
17
- export declare function Button({ disabled, type, loading: propsLoading, children, text, inline, icon, iconPrefix, size, onClick, color, }: ButtonProps): JSX.Element;
20
+ export declare function Button({ disabled, type, loading: propsLoading, children, text, inline, icon, iconPrefix, size, onClick, color, withConfirmation, confirmationText, confirmationHeading, }: ButtonProps): JSX.Element;
package/dist/Button.js CHANGED
@@ -3,6 +3,7 @@ import React, { useState } from "react";
3
3
  import { ActivityIndicator, TouchableOpacity } from "react-native";
4
4
  import { Box } from "./Box";
5
5
  import { Icon } from "./Icon";
6
+ import { Modal } from "./Modal";
6
7
  import { Text } from "./Text";
7
8
  import { Unifier } from "./Unifier";
8
9
  const buttonTextColor = {
@@ -24,8 +25,9 @@ const HEIGHTS = {
24
25
  md: 40,
25
26
  lg: 48,
26
27
  };
27
- export function Button({ disabled, type, loading: propsLoading, children, text, inline, icon, iconPrefix, size, onClick, color = "lightGray", }) {
28
+ export function Button({ disabled, type, loading: propsLoading, children, text, inline, icon, iconPrefix, size, onClick, color = "lightGray", withConfirmation = false, confirmationText = "Are you sure you want to continue?", confirmationHeading = "Confirm", }) {
28
29
  const [loading, setLoading] = useState(propsLoading);
30
+ const [showConfirmation, setShowConfirmation] = useState(false);
29
31
  const getBackgroundColor = (backgroundColor) => {
30
32
  if (type === "ghost" || type === "outline") {
31
33
  return "transparent";
@@ -56,40 +58,54 @@ export function Button({ disabled, type, loading: propsLoading, children, text,
56
58
  if (color === "gray") {
57
59
  color = "lightGray";
58
60
  }
59
- return (React.createElement(TouchableOpacity, { disabled: disabled || loading, style: {
60
- alignSelf: inline === true ? undefined : "stretch",
61
- height: HEIGHTS[size || "md"],
62
- backgroundColor: getBackgroundColor(color),
63
- // width: inline === true ? undefined : "100%",
64
- flexShrink: inline ? 1 : 0,
65
- // flexGrow: inline ? 0 : 1,
66
- alignItems: "center",
67
- justifyContent: "center",
68
- borderRadius: 5,
69
- borderColor: getBorderColor(color),
70
- borderWidth: type === "outline" ? 2 : 0,
71
- opacity: disabled ? 0.4 : 1,
72
- flexDirection: "row",
73
- paddingHorizontal: 4 * 2,
74
- }, onPress: debounce(async () => {
75
- Unifier.utils.haptic();
76
- setLoading(true);
77
- try {
78
- if (onClick) {
79
- await onClick();
61
+ const renderConfirmation = () => {
62
+ return (React.createElement(Modal, { heading: confirmationHeading, primaryButtonOnClick: () => {
63
+ onClick();
64
+ setShowConfirmation(false);
65
+ }, primaryButtonText: "Confirm", secondaryButtonOnClick: () => setShowConfirmation(false), secondaryButtonText: "Cancel", size: "sm", visible: showConfirmation, onDismiss: () => {
66
+ setShowConfirmation(false);
67
+ } },
68
+ React.createElement(Text, null, confirmationText)));
69
+ };
70
+ return (React.createElement(React.Fragment, null,
71
+ React.createElement(TouchableOpacity, { disabled: disabled || loading, style: {
72
+ alignSelf: inline === true ? undefined : "stretch",
73
+ height: HEIGHTS[size || "md"],
74
+ backgroundColor: getBackgroundColor(color),
75
+ // width: inline === true ? undefined : "100%",
76
+ flexShrink: inline ? 1 : 0,
77
+ // flexGrow: inline ? 0 : 1,
78
+ alignItems: "center",
79
+ justifyContent: "center",
80
+ borderRadius: 5,
81
+ borderColor: getBorderColor(color),
82
+ borderWidth: type === "outline" ? 2 : 0,
83
+ opacity: disabled ? 0.4 : 1,
84
+ flexDirection: "row",
85
+ paddingHorizontal: 4 * 2,
86
+ }, onPress: debounce(async () => {
87
+ Unifier.utils.haptic();
88
+ setLoading(true);
89
+ try {
90
+ if (withConfirmation && !showConfirmation) {
91
+ setShowConfirmation(true);
92
+ }
93
+ else if (onClick) {
94
+ await onClick();
95
+ }
96
+ }
97
+ catch (e) {
98
+ setLoading(false);
99
+ throw e;
80
100
  }
81
- }
82
- catch (e) {
83
101
  setLoading(false);
84
- throw e;
85
- }
86
- setLoading(false);
87
- }, 500, { leading: true }) },
88
- icon !== undefined && (React.createElement(Box, { paddingX: 2 },
89
- React.createElement(Icon, { color: getTextColor(color), name: icon, prefix: iconPrefix || "far", size: size }))),
90
- Boolean(children) && children,
91
- Boolean(text) && (React.createElement(Text, { color: getTextColor(color), font: "button", inline: inline, size: size, skipLinking: true, weight: "bold" }, text)),
92
- (loading || loading) && (React.createElement(Box, { marginLeft: 2 },
93
- React.createElement(ActivityIndicator, { color: getTextColor(color), size: "small" })))));
102
+ }, 500, { leading: true }) },
103
+ icon !== undefined && (React.createElement(Box, { paddingX: 2 },
104
+ React.createElement(Icon, { color: getTextColor(color), name: icon, prefix: iconPrefix || "far", size: size }))),
105
+ Boolean(children) && children,
106
+ Boolean(text) && (React.createElement(Text, { color: getTextColor(color), font: "button", inline: inline, size: size, skipLinking: true, weight: "bold" }, text)),
107
+ Boolean(loading) && (React.createElement(Box, { marginLeft: 2 },
108
+ React.createElement(ActivityIndicator, { color: getTextColor(color), size: "small" })))),
109
+ Boolean(withConfirmation) && renderConfirmation()));
94
110
  }
95
111
  //# sourceMappingURL=Button.js.map
package/dist/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ferns-ui",
3
- "version": "0.15.0",
3
+ "version": "0.16.0",
4
4
  "main": "dist/index.js",
5
5
  "license": "Apache-2.0",
6
6
  "scripts": {
package/src/Button.tsx CHANGED
@@ -5,6 +5,7 @@ import {ActivityIndicator, TouchableOpacity} from "react-native";
5
5
  import {Box} from "./Box";
6
6
  import {ButtonColor, Color, GestaltIconName, IconPrefix, UnifiedTheme} from "./Common";
7
7
  import {Icon} from "./Icon";
8
+ import {Modal} from "./Modal";
8
9
  import {Text} from "./Text";
9
10
  import {Unifier} from "./Unifier";
10
11
 
@@ -25,6 +26,9 @@ export interface ButtonProps {
25
26
  icon?: GestaltIconName | string;
26
27
  iconPrefix?: IconPrefix;
27
28
  iconColor?: ButtonColor | Color;
29
+ withConfirmation?: boolean;
30
+ confirmationText?: string;
31
+ confirmationHeading?: string;
28
32
  }
29
33
 
30
34
  const buttonTextColor: {[buttonColor: string]: "white" | "darkGray"} = {
@@ -60,8 +64,12 @@ export function Button({
60
64
  size,
61
65
  onClick,
62
66
  color = "lightGray",
67
+ withConfirmation = false,
68
+ confirmationText = "Are you sure you want to continue?",
69
+ confirmationHeading = "Confirm",
63
70
  }: ButtonProps) {
64
71
  const [loading, setLoading] = useState(propsLoading);
72
+ const [showConfirmation, setShowConfirmation] = useState(false);
65
73
 
66
74
  const getBackgroundColor = (backgroundColor: string): string => {
67
75
  if (type === "ghost" || type === "outline") {
@@ -92,71 +100,99 @@ export function Button({
92
100
  if (color === "gray") {
93
101
  color = "lightGray";
94
102
  }
103
+
104
+ const renderConfirmation = () => {
105
+ return (
106
+ <Modal
107
+ heading={confirmationHeading}
108
+ primaryButtonOnClick={() => {
109
+ onClick();
110
+ setShowConfirmation(false);
111
+ }}
112
+ primaryButtonText="Confirm"
113
+ secondaryButtonOnClick={(): void => setShowConfirmation(false)}
114
+ secondaryButtonText="Cancel"
115
+ size="sm"
116
+ visible={showConfirmation}
117
+ onDismiss={(): void => {
118
+ setShowConfirmation(false);
119
+ }}
120
+ >
121
+ <Text>{confirmationText}</Text>
122
+ </Modal>
123
+ );
124
+ };
125
+
95
126
  return (
96
- <TouchableOpacity
97
- disabled={disabled || loading}
98
- style={{
99
- alignSelf: inline === true ? undefined : "stretch",
100
- height: HEIGHTS[size || "md"],
101
- backgroundColor: getBackgroundColor(color),
102
- // width: inline === true ? undefined : "100%",
103
- flexShrink: inline ? 1 : 0,
104
- // flexGrow: inline ? 0 : 1,
105
- alignItems: "center",
106
- justifyContent: "center",
107
- borderRadius: 5,
108
- borderColor: getBorderColor(color),
109
- borderWidth: type === "outline" ? 2 : 0,
110
- opacity: disabled ? 0.4 : 1,
111
- flexDirection: "row",
112
- paddingHorizontal: 4 * 2,
113
- }}
114
- onPress={debounce(
115
- async () => {
116
- Unifier.utils.haptic();
117
- setLoading(true);
118
- try {
119
- if (onClick) {
120
- await onClick();
127
+ <>
128
+ <TouchableOpacity
129
+ disabled={disabled || loading}
130
+ style={{
131
+ alignSelf: inline === true ? undefined : "stretch",
132
+ height: HEIGHTS[size || "md"],
133
+ backgroundColor: getBackgroundColor(color),
134
+ // width: inline === true ? undefined : "100%",
135
+ flexShrink: inline ? 1 : 0,
136
+ // flexGrow: inline ? 0 : 1,
137
+ alignItems: "center",
138
+ justifyContent: "center",
139
+ borderRadius: 5,
140
+ borderColor: getBorderColor(color),
141
+ borderWidth: type === "outline" ? 2 : 0,
142
+ opacity: disabled ? 0.4 : 1,
143
+ flexDirection: "row",
144
+ paddingHorizontal: 4 * 2,
145
+ }}
146
+ onPress={debounce(
147
+ async () => {
148
+ Unifier.utils.haptic();
149
+ setLoading(true);
150
+ try {
151
+ if (withConfirmation && !showConfirmation) {
152
+ setShowConfirmation(true);
153
+ } else if (onClick) {
154
+ await onClick();
155
+ }
156
+ } catch (e) {
157
+ setLoading(false);
158
+ throw e;
121
159
  }
122
- } catch (e) {
123
160
  setLoading(false);
124
- throw e;
125
- }
126
- setLoading(false);
127
- },
128
- 500,
129
- {leading: true}
130
- )}
131
- >
132
- {icon !== undefined && (
133
- <Box paddingX={2}>
134
- <Icon
161
+ },
162
+ 500,
163
+ {leading: true}
164
+ )}
165
+ >
166
+ {icon !== undefined && (
167
+ <Box paddingX={2}>
168
+ <Icon
169
+ color={getTextColor(color as Color)}
170
+ name={icon}
171
+ prefix={iconPrefix || "far"}
172
+ size={size}
173
+ />
174
+ </Box>
175
+ )}
176
+ {Boolean(children) && children}
177
+ {Boolean(text) && (
178
+ <Text
135
179
  color={getTextColor(color as Color)}
136
- name={icon}
137
- prefix={iconPrefix || "far"}
180
+ font="button"
181
+ inline={inline}
138
182
  size={size}
139
- />
140
- </Box>
141
- )}
142
- {Boolean(children) && children}
143
- {Boolean(text) && (
144
- <Text
145
- color={getTextColor(color as Color)}
146
- font="button"
147
- inline={inline}
148
- size={size}
149
- skipLinking
150
- weight="bold"
151
- >
152
- {text}
153
- </Text>
154
- )}
155
- {(loading || loading) && (
156
- <Box marginLeft={2}>
157
- <ActivityIndicator color={getTextColor(color as Color)} size="small" />
158
- </Box>
159
- )}
160
- </TouchableOpacity>
183
+ skipLinking
184
+ weight="bold"
185
+ >
186
+ {text}
187
+ </Text>
188
+ )}
189
+ {Boolean(loading) && (
190
+ <Box marginLeft={2}>
191
+ <ActivityIndicator color={getTextColor(color as Color)} size="small" />
192
+ </Box>
193
+ )}
194
+ </TouchableOpacity>
195
+ {Boolean(withConfirmation) && renderConfirmation()}
196
+ </>
161
197
  );
162
198
  }