ferns-ui 0.26.3 → 0.27.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 +6 -2
  2. package/dist/Button.js +48 -39
  3. package/dist/Button.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/Button.tsx +89 -71
package/dist/Button.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { ButtonColor, Color, IconName, IconPrefix } from "./Common";
2
+ import { ButtonColor, Color, IconName, IconPrefix, TooltipDirection } from "./Common";
3
3
  export interface ButtonProps {
4
4
  children?: React.ReactElement;
5
5
  text: string;
@@ -18,5 +18,9 @@ export interface ButtonProps {
18
18
  confirmationHeading?: string;
19
19
  shape?: "rounded" | "pill";
20
20
  testID?: string;
21
+ tooltip?: {
22
+ text: string;
23
+ idealDirection?: TooltipDirection;
24
+ };
21
25
  }
22
- export declare function Button({ disabled, type, loading: propsLoading, children, text, inline, icon, iconPrefix, size, onClick, color, withConfirmation, confirmationText, confirmationHeading, shape, testID, }: ButtonProps): JSX.Element;
26
+ export declare function Button({ disabled, type, loading: propsLoading, children, text, inline, icon, iconPrefix, size, onClick, color, withConfirmation, confirmationText, confirmationHeading, shape, testID, tooltip, }: ButtonProps): JSX.Element;
package/dist/Button.js CHANGED
@@ -1,10 +1,11 @@
1
1
  import debounce from "lodash/debounce";
2
2
  import React, { useState } from "react";
3
- import { ActivityIndicator, TouchableOpacity } from "react-native";
3
+ import { ActivityIndicator, TouchableOpacity, View } from "react-native";
4
4
  import { Box } from "./Box";
5
5
  import { Icon } from "./Icon";
6
6
  import { Modal } from "./Modal";
7
7
  import { Text } from "./Text";
8
+ import { Tooltip } from "./Tooltip";
8
9
  import { Unifier } from "./Unifier";
9
10
  const buttonTextColor = {
10
11
  blue: "white",
@@ -25,7 +26,7 @@ const HEIGHTS = {
25
26
  md: 40,
26
27
  lg: 48,
27
28
  };
28
- export function Button({ disabled = false, type = "solid", loading: propsLoading, children, text, inline = false, icon, iconPrefix, size = "md", onClick, color = "gray", withConfirmation = false, confirmationText = "Are you sure you want to continue?", confirmationHeading = "Confirm", shape = "rounded", testID, }) {
29
+ export function Button({ disabled = false, type = "solid", loading: propsLoading, children, text, inline = false, icon, iconPrefix, size = "md", onClick, color = "gray", withConfirmation = false, confirmationText = "Are you sure you want to continue?", confirmationHeading = "Confirm", shape = "rounded", testID, tooltip, }) {
29
30
  const [loading, setLoading] = useState(propsLoading);
30
31
  const [showConfirmation, setShowConfirmation] = useState(false);
31
32
  const getBackgroundColor = (backgroundColor) => {
@@ -67,45 +68,53 @@ export function Button({ disabled = false, type = "solid", loading: propsLoading
67
68
  } },
68
69
  React.createElement(Text, null, confirmationText)));
69
70
  };
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: shape === "pill" ? 999 : 5,
81
- borderColor: getBorderColor(color),
82
- borderWidth: type === "outline" ? 2 : 0,
83
- opacity: disabled ? 0.4 : 1,
84
- flexDirection: "row",
85
- paddingHorizontal: 8 * 2,
86
- }, testID: testID, onPress: debounce(async () => {
87
- Unifier.utils.haptic();
88
- setLoading(true);
89
- try {
90
- if (withConfirmation && !showConfirmation) {
91
- setShowConfirmation(true);
71
+ const renderButton = () => {
72
+ return (React.createElement(View, null,
73
+ React.createElement(TouchableOpacity, { disabled: disabled || loading, style: {
74
+ alignSelf: inline === true ? undefined : "stretch",
75
+ height: HEIGHTS[size || "md"],
76
+ backgroundColor: getBackgroundColor(color),
77
+ // width: inline === true ? undefined : "100%",
78
+ flexShrink: inline ? 1 : 0,
79
+ // flexGrow: inline ? 0 : 1,
80
+ alignItems: "center",
81
+ justifyContent: "center",
82
+ borderRadius: shape === "pill" ? 999 : 5,
83
+ borderColor: getBorderColor(color),
84
+ borderWidth: type === "outline" ? 2 : 0,
85
+ opacity: disabled ? 0.4 : 1,
86
+ flexDirection: "row",
87
+ paddingHorizontal: 8 * 2,
88
+ }, testID: testID, onPress: debounce(async () => {
89
+ Unifier.utils.haptic();
90
+ setLoading(true);
91
+ try {
92
+ if (withConfirmation && !showConfirmation) {
93
+ setShowConfirmation(true);
94
+ }
95
+ else if (onClick) {
96
+ await onClick();
97
+ }
92
98
  }
93
- else if (onClick) {
94
- await onClick();
99
+ catch (e) {
100
+ setLoading(false);
101
+ throw e;
95
102
  }
96
- }
97
- catch (e) {
98
103
  setLoading(false);
99
- throw e;
100
- }
101
- setLoading(false);
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()));
104
+ }, 500, { leading: true }) },
105
+ icon !== undefined && (React.createElement(Box, { paddingX: 2 },
106
+ React.createElement(Icon, { color: getTextColor(color), name: icon, prefix: iconPrefix || "far", size: size }))),
107
+ Boolean(children) && children,
108
+ Boolean(text) && (React.createElement(Text, { color: getTextColor(color), font: "button", inline: inline, size: size, skipLinking: true, weight: "bold" }, text)),
109
+ Boolean(loading) && (React.createElement(Box, { marginLeft: 2 },
110
+ React.createElement(ActivityIndicator, { color: getTextColor(color), size: "small" })))),
111
+ Boolean(withConfirmation) && renderConfirmation()));
112
+ };
113
+ if (tooltip) {
114
+ return (React.createElement(Tooltip, { idealDirection: tooltip.idealDirection, text: tooltip.text }, renderButton()));
115
+ }
116
+ else {
117
+ return renderButton();
118
+ }
110
119
  }
111
120
  //# 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.26.3",
3
+ "version": "0.27.0",
4
4
  "main": "dist/index.js",
5
5
  "license": "Apache-2.0",
6
6
  "scripts": {
package/src/Button.tsx CHANGED
@@ -1,12 +1,13 @@
1
1
  import debounce from "lodash/debounce";
2
2
  import React, {useState} from "react";
3
- import {ActivityIndicator, TouchableOpacity} from "react-native";
3
+ import {ActivityIndicator, TouchableOpacity, View} from "react-native";
4
4
 
5
5
  import {Box} from "./Box";
6
- import {ButtonColor, Color, IconName, IconPrefix, UnifiedTheme} from "./Common";
6
+ import {ButtonColor, Color, IconName, IconPrefix, TooltipDirection, UnifiedTheme} from "./Common";
7
7
  import {Icon} from "./Icon";
8
8
  import {Modal} from "./Modal";
9
9
  import {Text} from "./Text";
10
+ import {Tooltip} from "./Tooltip";
10
11
  import {Unifier} from "./Unifier";
11
12
 
12
13
  export interface ButtonProps {
@@ -29,6 +30,10 @@ export interface ButtonProps {
29
30
  confirmationHeading?: string;
30
31
  shape?: "rounded" | "pill";
31
32
  testID?: string;
33
+ tooltip?: {
34
+ text: string;
35
+ idealDirection?: TooltipDirection;
36
+ };
32
37
  }
33
38
 
34
39
  const buttonTextColor: {[buttonColor: string]: "white" | "darkGray"} = {
@@ -69,6 +74,7 @@ export function Button({
69
74
  confirmationHeading = "Confirm",
70
75
  shape = "rounded",
71
76
  testID,
77
+ tooltip,
72
78
  }: ButtonProps) {
73
79
  const [loading, setLoading] = useState(propsLoading);
74
80
  const [showConfirmation, setShowConfirmation] = useState(false);
@@ -125,77 +131,89 @@ export function Button({
125
131
  );
126
132
  };
127
133
 
128
- return (
129
- <>
130
- <TouchableOpacity
131
- disabled={disabled || loading}
132
- style={{
133
- alignSelf: inline === true ? undefined : "stretch",
134
- height: HEIGHTS[size || "md"],
135
- backgroundColor: getBackgroundColor(color),
136
- // width: inline === true ? undefined : "100%",
137
- flexShrink: inline ? 1 : 0,
138
- // flexGrow: inline ? 0 : 1,
139
- alignItems: "center",
140
- justifyContent: "center",
141
- borderRadius: shape === "pill" ? 999 : 5,
142
- borderColor: getBorderColor(color),
143
- borderWidth: type === "outline" ? 2 : 0,
144
- opacity: disabled ? 0.4 : 1,
145
- flexDirection: "row",
146
- paddingHorizontal: 8 * 2,
147
- }}
148
- testID={testID}
149
- onPress={debounce(
150
- async () => {
151
- Unifier.utils.haptic();
152
- setLoading(true);
153
- try {
154
- if (withConfirmation && !showConfirmation) {
155
- setShowConfirmation(true);
156
- } else if (onClick) {
157
- await onClick();
134
+ const renderButton = () => {
135
+ return (
136
+ <View>
137
+ <TouchableOpacity
138
+ disabled={disabled || loading}
139
+ style={{
140
+ alignSelf: inline === true ? undefined : "stretch",
141
+ height: HEIGHTS[size || "md"],
142
+ backgroundColor: getBackgroundColor(color),
143
+ // width: inline === true ? undefined : "100%",
144
+ flexShrink: inline ? 1 : 0,
145
+ // flexGrow: inline ? 0 : 1,
146
+ alignItems: "center",
147
+ justifyContent: "center",
148
+ borderRadius: shape === "pill" ? 999 : 5,
149
+ borderColor: getBorderColor(color),
150
+ borderWidth: type === "outline" ? 2 : 0,
151
+ opacity: disabled ? 0.4 : 1,
152
+ flexDirection: "row",
153
+ paddingHorizontal: 8 * 2,
154
+ }}
155
+ testID={testID}
156
+ onPress={debounce(
157
+ async () => {
158
+ Unifier.utils.haptic();
159
+ setLoading(true);
160
+ try {
161
+ if (withConfirmation && !showConfirmation) {
162
+ setShowConfirmation(true);
163
+ } else if (onClick) {
164
+ await onClick();
165
+ }
166
+ } catch (e) {
167
+ setLoading(false);
168
+ throw e;
158
169
  }
159
- } catch (e) {
160
170
  setLoading(false);
161
- throw e;
162
- }
163
- setLoading(false);
164
- },
165
- 500,
166
- {leading: true}
167
- )}
168
- >
169
- {icon !== undefined && (
170
- <Box paddingX={2}>
171
- <Icon
171
+ },
172
+ 500,
173
+ {leading: true}
174
+ )}
175
+ >
176
+ {icon !== undefined && (
177
+ <Box paddingX={2}>
178
+ <Icon
179
+ color={getTextColor(color as Color)}
180
+ name={icon}
181
+ prefix={iconPrefix || "far"}
182
+ size={size}
183
+ />
184
+ </Box>
185
+ )}
186
+ {Boolean(children) && children}
187
+ {Boolean(text) && (
188
+ <Text
172
189
  color={getTextColor(color as Color)}
173
- name={icon}
174
- prefix={iconPrefix || "far"}
190
+ font="button"
191
+ inline={inline}
175
192
  size={size}
176
- />
177
- </Box>
178
- )}
179
- {Boolean(children) && children}
180
- {Boolean(text) && (
181
- <Text
182
- color={getTextColor(color as Color)}
183
- font="button"
184
- inline={inline}
185
- size={size}
186
- skipLinking
187
- weight="bold"
188
- >
189
- {text}
190
- </Text>
191
- )}
192
- {Boolean(loading) && (
193
- <Box marginLeft={2}>
194
- <ActivityIndicator color={getTextColor(color as Color)} size="small" />
195
- </Box>
196
- )}
197
- </TouchableOpacity>
198
- {Boolean(withConfirmation) && renderConfirmation()}
199
- </>
200
- );
193
+ skipLinking
194
+ weight="bold"
195
+ >
196
+ {text}
197
+ </Text>
198
+ )}
199
+ {Boolean(loading) && (
200
+ <Box marginLeft={2}>
201
+ <ActivityIndicator color={getTextColor(color as Color)} size="small" />
202
+ </Box>
203
+ )}
204
+ </TouchableOpacity>
205
+ {Boolean(withConfirmation) && renderConfirmation()}
206
+ </View>
207
+ );
208
+ };
209
+
210
+ if (tooltip) {
211
+ return (
212
+ <Tooltip idealDirection={tooltip.idealDirection} text={tooltip.text}>
213
+ {renderButton()}
214
+ </Tooltip>
215
+ );
216
+ } else {
217
+ return renderButton();
218
+ }
201
219
  }