@pagopa/io-app-design-system 1.37.1 → 1.38.1

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 (60) hide show
  1. package/lib/commonjs/components/buttons/ButtonSolid.js +2 -2
  2. package/lib/commonjs/components/buttons/ButtonSolid.js.map +1 -1
  3. package/lib/commonjs/components/divider/Divider.js +8 -31
  4. package/lib/commonjs/components/divider/Divider.js.map +1 -1
  5. package/lib/commonjs/components/index.js +11 -11
  6. package/lib/commonjs/components/index.js.map +1 -1
  7. package/lib/commonjs/components/layout/HeaderSecondLevel.js +3 -1
  8. package/lib/commonjs/components/layout/HeaderSecondLevel.js.map +1 -1
  9. package/lib/commonjs/components/listitems/ListItemRadio.js +2 -1
  10. package/lib/commonjs/components/listitems/ListItemRadio.js.map +1 -1
  11. package/lib/commonjs/components/searchInput/SearchInput.js +222 -0
  12. package/lib/commonjs/components/searchInput/SearchInput.js.map +1 -0
  13. package/lib/commonjs/components/{endOfPage → searchInput}/index.js +4 -4
  14. package/lib/commonjs/components/searchInput/index.js.map +1 -0
  15. package/lib/module/components/buttons/ButtonSolid.js +2 -2
  16. package/lib/module/components/buttons/ButtonSolid.js.map +1 -1
  17. package/lib/module/components/divider/Divider.js +7 -29
  18. package/lib/module/components/divider/Divider.js.map +1 -1
  19. package/lib/module/components/index.js +1 -1
  20. package/lib/module/components/index.js.map +1 -1
  21. package/lib/module/components/layout/HeaderSecondLevel.js +3 -1
  22. package/lib/module/components/layout/HeaderSecondLevel.js.map +1 -1
  23. package/lib/module/components/listitems/ListItemRadio.js +2 -1
  24. package/lib/module/components/listitems/ListItemRadio.js.map +1 -1
  25. package/lib/module/components/searchInput/SearchInput.js +213 -0
  26. package/lib/module/components/searchInput/SearchInput.js.map +1 -0
  27. package/lib/module/components/searchInput/index.js +2 -0
  28. package/lib/module/components/searchInput/index.js.map +1 -0
  29. package/lib/typescript/components/divider/Divider.d.ts +1 -5
  30. package/lib/typescript/components/divider/Divider.d.ts.map +1 -1
  31. package/lib/typescript/components/index.d.ts +1 -1
  32. package/lib/typescript/components/index.d.ts.map +1 -1
  33. package/lib/typescript/components/layout/HeaderSecondLevel.d.ts +3 -1
  34. package/lib/typescript/components/layout/HeaderSecondLevel.d.ts.map +1 -1
  35. package/lib/typescript/components/listitems/ListItemRadio.d.ts.map +1 -1
  36. package/lib/typescript/components/searchInput/SearchInput.d.ts +25 -0
  37. package/lib/typescript/components/searchInput/SearchInput.d.ts.map +1 -0
  38. package/lib/typescript/components/searchInput/index.d.ts +2 -0
  39. package/lib/typescript/components/searchInput/index.d.ts.map +1 -0
  40. package/package.json +1 -1
  41. package/src/components/buttons/ButtonSolid.tsx +2 -2
  42. package/src/components/divider/Divider.tsx +11 -25
  43. package/src/components/index.tsx +1 -1
  44. package/src/components/layout/HeaderSecondLevel.tsx +4 -0
  45. package/src/components/listitems/ListItemRadio.tsx +4 -1
  46. package/src/components/searchInput/SearchInput.tsx +308 -0
  47. package/src/components/searchInput/index.tsx +1 -0
  48. package/lib/commonjs/components/endOfPage/EndOfPage.js +0 -36
  49. package/lib/commonjs/components/endOfPage/EndOfPage.js.map +0 -1
  50. package/lib/commonjs/components/endOfPage/index.js.map +0 -1
  51. package/lib/module/components/endOfPage/EndOfPage.js +0 -28
  52. package/lib/module/components/endOfPage/EndOfPage.js.map +0 -1
  53. package/lib/module/components/endOfPage/index.js +0 -2
  54. package/lib/module/components/endOfPage/index.js.map +0 -1
  55. package/lib/typescript/components/endOfPage/EndOfPage.d.ts +0 -23
  56. package/lib/typescript/components/endOfPage/EndOfPage.d.ts.map +0 -1
  57. package/lib/typescript/components/endOfPage/index.d.ts +0 -2
  58. package/lib/typescript/components/endOfPage/index.d.ts.map +0 -1
  59. package/src/components/endOfPage/EndOfPage.tsx +0 -55
  60. package/src/components/endOfPage/index.tsx +0 -1
@@ -0,0 +1,25 @@
1
+ import React from "react";
2
+ import { GestureResponderEvent, TextInputProps } from "react-native";
3
+ import { WithTestID } from "src/utils/types";
4
+ type SearchInputPressableProps = {
5
+ onPress: (event: GestureResponderEvent) => void;
6
+ };
7
+ type SearchInputActionProps = {
8
+ pressable: SearchInputPressableProps;
9
+ onChangeText?: never;
10
+ value?: never;
11
+ } | {
12
+ pressable?: never;
13
+ onChangeText: (value: string) => void;
14
+ value: string;
15
+ };
16
+ type SearchInputProps = WithTestID<{
17
+ accessibilityLabel: TextInputProps["accessibilityLabel"];
18
+ cancelButtonLabel: string;
19
+ clearAccessibilityLabel: string;
20
+ placeholder: TextInputProps["placeholder"];
21
+ autoFocus?: TextInputProps["autoFocus"];
22
+ }> & SearchInputActionProps;
23
+ export declare const SearchInput: ({ accessibilityLabel, cancelButtonLabel, clearAccessibilityLabel, onChangeText, placeholder, value, autoFocus, pressable, testID }: SearchInputProps) => React.JSX.Element;
24
+ export {};
25
+ //# sourceMappingURL=SearchInput.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../../src/components/searchInput/SearchInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAGL,qBAAqB,EAOrB,cAAc,EAEf,MAAM,cAAc,CAAC;AAUtB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AA6B7C,KAAK,yBAAyB,GAAG;IAC/B,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACjD,CAAC;AAEF,KAAK,sBAAsB,GACvB;IACE,SAAS,EAAE,yBAAyB,CAAC;IACrC,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,GACD;IACE,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEN,KAAK,gBAAgB,GAAG,UAAU,CAAC;IACjC,kBAAkB,EAAE,cAAc,CAAC,oBAAoB,CAAC,CAAC;IACzD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,uBAAuB,EAAE,MAAM,CAAC;IAChC,WAAW,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;CACzC,CAAC,GACA,sBAAsB,CAAC;AAUzB,eAAO,MAAM,WAAW,uIAUrB,gBAAgB,sBAoKlB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export * from "./SearchInput";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/searchInput/index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pagopa/io-app-design-system",
3
- "version": "1.37.1",
3
+ "version": "1.38.1",
4
4
  "description": "The library defining the core components of the design system of @pagopa/io-app",
5
5
  "main": "lib/commonjs/index",
6
6
  "module": "lib/module/index",
@@ -210,7 +210,7 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
210
210
  // Interpolate animation values from `isPressed` values
211
211
  const pressedAnimationStyle = useAnimatedStyle(() => {
212
212
  // Link color states to the pressed states
213
- const bgColor = interpolateColor(
213
+ const backgroundColor = interpolateColor(
214
214
  progressPressed.value,
215
215
  [0, 1],
216
216
  [colorMap[color].default, colorMap[color].pressed]
@@ -225,7 +225,7 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
225
225
  );
226
226
 
227
227
  return {
228
- backgroundColor: bgColor,
228
+ backgroundColor,
229
229
  transform: [{ scale }]
230
230
  };
231
231
  });
@@ -2,34 +2,20 @@ import React from "react";
2
2
  import { View, StyleSheet } from "react-native";
3
3
  import { IOColors, useIOTheme } from "../../core";
4
4
 
5
- type DividerOrientation = "vertical" | "horizontal";
6
-
7
- type DividerProps = {
8
- orientation: DividerOrientation;
9
- };
10
-
11
5
  const DEFAULT_BORDER_SIZE = StyleSheet.hairlineWidth;
12
6
 
13
7
  /**
14
- Native `Divider` component
15
- @param {DividerOrientation} orientation
8
+ Horizontal `Divider` component
16
9
  */
17
- const BaseDivider = React.memo(({ orientation }: DividerProps) => {
10
+ export const Divider = () => {
18
11
  const theme = useIOTheme();
19
- const baseStyle = {
20
- backgroundColor: IOColors[theme["divider-default"]],
21
- ...(orientation === "vertical"
22
- ? { width: DEFAULT_BORDER_SIZE }
23
- : { height: DEFAULT_BORDER_SIZE })
24
- };
25
- return <View style={baseStyle} />;
26
- });
27
12
 
28
- /**
29
- Horizontal Divider component
30
- */
31
- export const Divider = () => <BaseDivider orientation={"horizontal"} />;
32
- /**
33
- Vertical Divider component
34
- */
35
- export const VDivider = () => <BaseDivider orientation={"vertical"} />;
13
+ return (
14
+ <View
15
+ style={{
16
+ backgroundColor: IOColors[theme["divider-default"]],
17
+ height: DEFAULT_BORDER_SIZE
18
+ }}
19
+ />
20
+ );
21
+ };
@@ -8,7 +8,6 @@ export * from "./checkbox";
8
8
  export * from "./codeInput";
9
9
  export * from "./contentWrapper";
10
10
  export * from "./divider";
11
- export * from "./endOfPage";
12
11
  export * from "./featureInfo";
13
12
  export * from "./icons";
14
13
  export * from "./image";
@@ -29,5 +28,6 @@ export * from "./switch";
29
28
  export * from "./tabs";
30
29
  export * from "./tag";
31
30
  export * from "./textInput";
31
+ export * from "./searchInput";
32
32
  export * from "./toast";
33
33
  export * from "./typography";
@@ -36,10 +36,12 @@ type BackProps =
36
36
  | {
37
37
  goBack: () => void;
38
38
  backAccessibilityLabel: string;
39
+ backTestID?: string;
39
40
  }
40
41
  | {
41
42
  goBack?: never;
42
43
  backAccessibilityLabel?: never;
44
+ backTestID?: never;
43
45
  };
44
46
 
45
47
  type CommonProps = WithTestID<{
@@ -121,6 +123,7 @@ export const HeaderSecondLevel = ({
121
123
  scrollValues = undefined,
122
124
  goBack,
123
125
  backAccessibilityLabel,
126
+ backTestID,
124
127
  title,
125
128
  type,
126
129
  transparent = false,
@@ -197,6 +200,7 @@ export const HeaderSecondLevel = ({
197
200
  color="neutral"
198
201
  onPress={goBack}
199
202
  accessibilityLabel={backAccessibilityLabel}
203
+ testID={backTestID}
200
204
  />
201
205
  ) : (
202
206
  <HSpacer size={32} />
@@ -274,7 +274,10 @@ export const ListItemRadio = ({
274
274
  </H6>
275
275
  </View>
276
276
  <HSpacer size={8} />
277
- <View pointerEvents="none">
277
+ <View
278
+ pointerEvents="none"
279
+ importantForAccessibility="no-hide-descendants"
280
+ >
278
281
  <AnimatedRadio checked={selected ?? toggleValue} />
279
282
  </View>
280
283
  </View>
@@ -0,0 +1,308 @@
1
+ /* eslint-disable functional/immutable-data */
2
+ import React, { useCallback, useMemo, useRef, useState } from "react";
3
+ import {
4
+ ColorValue,
5
+ Dimensions,
6
+ GestureResponderEvent,
7
+ LayoutChangeEvent,
8
+ LayoutRectangle,
9
+ Platform,
10
+ Pressable,
11
+ StyleSheet,
12
+ TextInput,
13
+ TextInputProps,
14
+ View
15
+ } from "react-native";
16
+ import Animated, {
17
+ Easing,
18
+ Extrapolate,
19
+ interpolate,
20
+ interpolateColor,
21
+ useAnimatedStyle,
22
+ useSharedValue,
23
+ withTiming
24
+ } from "react-native-reanimated";
25
+ import { WithTestID } from "src/utils/types";
26
+ import {
27
+ IOColors,
28
+ IOSpacingScale,
29
+ IOVisualCostants,
30
+ useIOExperimentalDesign,
31
+ useIOTheme
32
+ } from "../../core";
33
+ import { makeFontStyleObject } from "../../utils/fonts";
34
+ import { ButtonLink } from "../buttons";
35
+ import { IOIconSizeScale, Icon } from "../icons";
36
+
37
+ /* Component visual attributes */
38
+ const inputPaddingHorizontal: IOSpacingScale = 12;
39
+ const inputPaddingClearButton: IOSpacingScale = 8;
40
+ const inputRadius: number = 8;
41
+ const inputBgColorDefault: ColorValue = IOColors["grey-50"];
42
+ const inputBgColorFocused: ColorValue = IOColors["grey-100"];
43
+ const inputColorPlaceholder: ColorValue = IOColors["grey-700"];
44
+ const iconMargin: IOSpacingScale = 8;
45
+ const iconColor: IOColors = "grey-700";
46
+ const iconSize: IOIconSizeScale = 16;
47
+ const iconCloseSize: IOIconSizeScale = 24;
48
+ const inputFontSizePlaceholder: number = 12;
49
+ const cancelButtonMargin: IOSpacingScale = 16;
50
+ const inputTransitionDuration: number = 250;
51
+ const inputHeightIOS: number = 36;
52
+ const inputHeightAndroid: number = 42;
53
+
54
+ type SearchInputPressableProps = {
55
+ onPress: (event: GestureResponderEvent) => void;
56
+ };
57
+
58
+ type SearchInputActionProps =
59
+ | {
60
+ pressable: SearchInputPressableProps;
61
+ onChangeText?: never;
62
+ value?: never;
63
+ }
64
+ | {
65
+ pressable?: never;
66
+ onChangeText: (value: string) => void;
67
+ value: string;
68
+ };
69
+
70
+ type SearchInputProps = WithTestID<{
71
+ accessibilityLabel: TextInputProps["accessibilityLabel"];
72
+ cancelButtonLabel: string;
73
+ clearAccessibilityLabel: string;
74
+ placeholder: TextInputProps["placeholder"];
75
+ autoFocus?: TextInputProps["autoFocus"];
76
+ }> &
77
+ SearchInputActionProps;
78
+
79
+ const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
80
+ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
81
+
82
+ const inputWithTimingConfig = {
83
+ duration: inputTransitionDuration,
84
+ easing: Easing.inOut(Easing.cubic)
85
+ };
86
+
87
+ export const SearchInput = ({
88
+ accessibilityLabel,
89
+ cancelButtonLabel,
90
+ clearAccessibilityLabel,
91
+ onChangeText,
92
+ placeholder,
93
+ value = "",
94
+ autoFocus,
95
+ pressable,
96
+ testID
97
+ }: SearchInputProps) => {
98
+ const searchInputRef = useRef<TextInput>(null);
99
+
100
+ /* Component visual attributes */
101
+ const theme = useIOTheme();
102
+ const { isExperimental } = useIOExperimentalDesign();
103
+ const inputCaretColor = IOColors[theme["interactiveElem-default"]];
104
+
105
+ /* Widths used for the transition:
106
+ - `SearchInput` entire width
107
+ - `Cancel` button */
108
+ const inputWidth: number = useMemo(
109
+ () =>
110
+ Dimensions.get("window").width - IOVisualCostants.appMarginDefault * 2,
111
+ []
112
+ );
113
+
114
+ const [cancelButtonWidth, setCancelButtonWidth] =
115
+ useState<LayoutRectangle["width"]>(0);
116
+
117
+ const getCancelButtonWidth = ({ nativeEvent }: LayoutChangeEvent) => {
118
+ setCancelButtonWidth(nativeEvent.layout.width);
119
+ };
120
+
121
+ const inputWidthWithCancel: number = useMemo(
122
+ () => inputWidth - cancelButtonWidth,
123
+ [inputWidth, cancelButtonWidth]
124
+ );
125
+
126
+ /* Reanimated styles */
127
+ const inputAnimatedWidth = useSharedValue<number>(inputWidth);
128
+ const isFocused = useSharedValue(0);
129
+
130
+ /* Applied to the `SearchInput` */
131
+ const animatedStyle = useAnimatedStyle(() => ({
132
+ width: withTiming(inputAnimatedWidth.value, inputWithTimingConfig),
133
+ backgroundColor: interpolateColor(
134
+ isFocused.value,
135
+ [0, 1],
136
+ [inputBgColorDefault, inputBgColorFocused]
137
+ )
138
+ }));
139
+
140
+ /* Applied to the `Cancel` button */
141
+ const cancelButtonAnimatedStyle = useAnimatedStyle(() => ({
142
+ transform: [
143
+ {
144
+ translateX: interpolate(
145
+ isFocused.value,
146
+ [0, 1],
147
+ [cancelButtonWidth + IOVisualCostants.appMarginDefault, 0],
148
+ Extrapolate.CLAMP
149
+ )
150
+ }
151
+ ],
152
+ opacity: interpolate(isFocused.value, [0, 1], [0.5, 1])
153
+ }));
154
+
155
+ /* Applied to the `Clear` button inside the `SearchInput` */
156
+ const clearButtonAnimatedStyle = useAnimatedStyle(() => {
157
+ const showClearButton = value.length > 0;
158
+
159
+ return {
160
+ transform: [
161
+ {
162
+ scale: showClearButton
163
+ ? withTiming(1, inputWithTimingConfig)
164
+ : withTiming(0.5, inputWithTimingConfig)
165
+ }
166
+ ],
167
+ opacity: withTiming(showClearButton ? 1 : 0, inputWithTimingConfig)
168
+ };
169
+ }, [value]);
170
+
171
+ /* Related event handlers */
172
+ const handleFocus = () => {
173
+ isFocused.value = withTiming(1, inputWithTimingConfig);
174
+ inputAnimatedWidth.value = inputWidthWithCancel;
175
+ };
176
+
177
+ const handleBlur = () => {
178
+ isFocused.value = withTiming(0, inputWithTimingConfig);
179
+ inputAnimatedWidth.value = inputWidth;
180
+ };
181
+
182
+ const cancel = useCallback(() => {
183
+ onChangeText?.("");
184
+ searchInputRef.current?.clear();
185
+ searchInputRef.current?.blur();
186
+ }, [onChangeText]);
187
+
188
+ const clear = useCallback(() => {
189
+ onChangeText?.("");
190
+ searchInputRef.current?.clear();
191
+ }, [onChangeText]);
192
+
193
+ const handleChangeText = useCallback(
194
+ (text: string) => onChangeText?.(text),
195
+ [onChangeText]
196
+ );
197
+
198
+ const renderSearchBar = () => (
199
+ <Animated.View style={styles.searchBar}>
200
+ <Animated.View
201
+ style={[styles.searchInput, animatedStyle]}
202
+ pointerEvents={pressable ? "none" : "auto"}
203
+ >
204
+ <View style={styles.iconContainer}>
205
+ <Icon name="search" size={iconSize} color={iconColor} />
206
+ </View>
207
+ <AnimatedTextInput
208
+ testID={testID}
209
+ ref={searchInputRef}
210
+ inputMode="search"
211
+ returnKeyType="search"
212
+ accessibilityRole={"search"}
213
+ accessibilityLabel={accessibilityLabel}
214
+ style={[
215
+ styles.textInput,
216
+ Platform.OS === "ios"
217
+ ? styles.textInputIOS
218
+ : styles.textInputAndroid,
219
+ isExperimental ? styles.placeholder : styles.placeholderLegacy
220
+ ]}
221
+ selectionColor={inputCaretColor}
222
+ cursorColor={inputCaretColor}
223
+ placeholder={placeholder}
224
+ placeholderTextColor={inputColorPlaceholder}
225
+ onFocus={handleFocus}
226
+ onBlur={handleBlur}
227
+ onChangeText={handleChangeText}
228
+ value={value}
229
+ autoFocus={autoFocus}
230
+ />
231
+ <AnimatedPressable
232
+ style={[styles.clearButton, clearButtonAnimatedStyle]}
233
+ onPress={clear}
234
+ accessibilityLabel={clearAccessibilityLabel}
235
+ accessibilityRole="button"
236
+ hitSlop={16}
237
+ >
238
+ <Icon name="closeSmall" size={iconCloseSize} color={iconColor} />
239
+ </AnimatedPressable>
240
+ </Animated.View>
241
+ <Animated.View
242
+ onLayout={getCancelButtonWidth}
243
+ style={[styles.cancelButton, cancelButtonAnimatedStyle]}
244
+ >
245
+ <ButtonLink label={cancelButtonLabel} onPress={cancel} />
246
+ </Animated.View>
247
+ </Animated.View>
248
+ );
249
+
250
+ return pressable ? (
251
+ <Pressable
252
+ accessibilityRole="button"
253
+ accessibilityLabel={placeholder}
254
+ onPress={pressable?.onPress}
255
+ >
256
+ {renderSearchBar()}
257
+ </Pressable>
258
+ ) : (
259
+ renderSearchBar()
260
+ );
261
+ };
262
+
263
+ const styles = StyleSheet.create({
264
+ searchBar: {
265
+ width: "100%",
266
+ flexDirection: "row",
267
+ justifyContent: "flex-start",
268
+ alignItems: "center"
269
+ },
270
+ searchInput: {
271
+ flexShrink: 0,
272
+ borderRadius: inputRadius,
273
+ borderCurve: "continuous",
274
+ flexDirection: "row",
275
+ alignItems: "center",
276
+ paddingLeft: inputPaddingHorizontal,
277
+ paddingRight: inputPaddingClearButton
278
+ },
279
+ textInput: {
280
+ flexShrink: 1,
281
+ flexGrow: 1
282
+ },
283
+ textInputIOS: {
284
+ height: inputHeightIOS
285
+ },
286
+ textInputAndroid: {
287
+ height: inputHeightAndroid
288
+ },
289
+ iconContainer: {
290
+ marginRight: iconMargin
291
+ },
292
+ placeholder: {
293
+ fontSize: inputFontSizePlaceholder,
294
+ ...makeFontStyleObject("Regular", false, "ReadexPro")
295
+ },
296
+ placeholderLegacy: {
297
+ fontSize: inputFontSizePlaceholder,
298
+ ...makeFontStyleObject("Regular", false, "TitilliumWeb")
299
+ },
300
+ cancelButton: {
301
+ position: "absolute",
302
+ right: 0,
303
+ paddingLeft: cancelButtonMargin
304
+ },
305
+ clearButton: {
306
+ marginLeft: iconMargin
307
+ }
308
+ });
@@ -0,0 +1 @@
1
+ export * from "./SearchInput";
@@ -1,36 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.EndOfPage = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _reactNative = require("react-native");
9
- var _spacer = require("../spacer");
10
- var _buttons = require("../buttons");
11
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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); }
13
- const EndOfPage = _ref => {
14
- let {
15
- primaryAction,
16
- secondaryAction
17
- } = _ref;
18
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_spacer.VSpacer, {
19
- size: 32
20
- }), primaryAction ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_buttons.ButtonSolid, _extends({}, primaryAction.props, {
21
- fullWidth: true
22
- })), secondaryAction && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_spacer.VSpacer, {
23
- size: 16
24
- }), /*#__PURE__*/_react.default.createElement(_spacer.VSpacer, {
25
- size: 4
26
- }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
27
- style: {
28
- justifyContent: "center",
29
- flexDirection: "row"
30
- }
31
- }, /*#__PURE__*/_react.default.createElement(_buttons.ButtonLink, secondaryAction.props)))) : /*#__PURE__*/_react.default.createElement(_spacer.VSpacer, {
32
- size: 32
33
- }));
34
- };
35
- exports.EndOfPage = EndOfPage;
36
- //# sourceMappingURL=EndOfPage.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_spacer","_buttons","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","EndOfPage","_ref","primaryAction","secondaryAction","createElement","Fragment","VSpacer","size","ButtonSolid","props","fullWidth","View","style","justifyContent","flexDirection","ButtonLink","exports"],"sourceRoot":"../../../../src","sources":["components/endOfPage/EndOfPage.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAKoB,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AA0Bb,MAAMQ,SAAS,GAAGC,IAAA;EAAA,IAAC;IAAEC,aAAa;IAAEC;EAAuB,CAAC,GAAAF,IAAA;EAAA,oBACjExB,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAAA3B,MAAA,CAAAQ,OAAA,CAAAoB,QAAA,qBACE5B,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACvB,OAAA,CAAAyB,OAAO;IAACC,IAAI,EAAE;EAAG,CAAE,CAAC,EACpBL,aAAa,gBACZzB,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAAA3B,MAAA,CAAAQ,OAAA,CAAAoB,QAAA,qBACE5B,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACtB,QAAA,CAAA0B,WAAW,EAAAtB,QAAA,KAAKgB,aAAa,CAACO,KAAK;IAAEC,SAAS;EAAA,EAAE,CAAC,EACjDP,eAAe,iBACd1B,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAAA3B,MAAA,CAAAQ,OAAA,CAAAoB,QAAA,qBACE5B,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACvB,OAAA,CAAAyB,OAAO;IAACC,IAAI,EAAE;EAAG,CAAE,CAAC,eACrB9B,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACvB,OAAA,CAAAyB,OAAO;IAACC,IAAI,EAAE;EAAE,CAAE,CAAC,eACpB9B,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACxB,YAAA,CAAA+B,IAAI;IAACC,KAAK,EAAE;MAAEC,cAAc,EAAE,QAAQ;MAAEC,aAAa,EAAE;IAAM;EAAE,gBAC9DrC,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACtB,QAAA,CAAAiC,UAAU,EAAKZ,eAAe,CAACM,KAAQ,CACpC,CACN,CAEJ,CAAC,gBAEHhC,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACvB,OAAA,CAAAyB,OAAO;IAACC,IAAI,EAAE;EAAG,CAAE,CAEtB,CAAC;AAAA,CACJ;AAACS,OAAA,CAAAhB,SAAA,GAAAA,SAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"names":["_EndOfPage","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sourceRoot":"../../../../src","sources":["components/endOfPage/index.tsx"],"mappings":";;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,UAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,UAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,UAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}
@@ -1,28 +0,0 @@
1
- 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); }
2
- import React from "react";
3
- import { View } from "react-native";
4
- import { VSpacer } from "../spacer";
5
- import { ButtonLink, ButtonSolid } from "../buttons";
6
- export const EndOfPage = _ref => {
7
- let {
8
- primaryAction,
9
- secondaryAction
10
- } = _ref;
11
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VSpacer, {
12
- size: 32
13
- }), primaryAction ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonSolid, _extends({}, primaryAction.props, {
14
- fullWidth: true
15
- })), secondaryAction && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VSpacer, {
16
- size: 16
17
- }), /*#__PURE__*/React.createElement(VSpacer, {
18
- size: 4
19
- }), /*#__PURE__*/React.createElement(View, {
20
- style: {
21
- justifyContent: "center",
22
- flexDirection: "row"
23
- }
24
- }, /*#__PURE__*/React.createElement(ButtonLink, secondaryAction.props)))) : /*#__PURE__*/React.createElement(VSpacer, {
25
- size: 32
26
- }));
27
- };
28
- //# sourceMappingURL=EndOfPage.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["React","View","VSpacer","ButtonLink","ButtonSolid","EndOfPage","_ref","primaryAction","secondaryAction","createElement","Fragment","size","_extends","props","fullWidth","style","justifyContent","flexDirection"],"sourceRoot":"../../../../src","sources":["components/endOfPage/EndOfPage.tsx"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,OAAO,QAAQ,WAAW;AACnC,SACEC,UAAU,EAEVC,WAAW,QAEN,YAAY;AA0BnB,OAAO,MAAMC,SAAS,GAAGC,IAAA;EAAA,IAAC;IAAEC,aAAa;IAAEC;EAAuB,CAAC,GAAAF,IAAA;EAAA,oBACjEN,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,qBACEV,KAAA,CAAAS,aAAA,CAACP,OAAO;IAACS,IAAI,EAAE;EAAG,CAAE,CAAC,EACpBJ,aAAa,gBACZP,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,qBACEV,KAAA,CAAAS,aAAA,CAACL,WAAW,EAAAQ,QAAA,KAAKL,aAAa,CAACM,KAAK;IAAEC,SAAS;EAAA,EAAE,CAAC,EACjDN,eAAe,iBACdR,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,qBACEV,KAAA,CAAAS,aAAA,CAACP,OAAO;IAACS,IAAI,EAAE;EAAG,CAAE,CAAC,eACrBX,KAAA,CAAAS,aAAA,CAACP,OAAO;IAACS,IAAI,EAAE;EAAE,CAAE,CAAC,eACpBX,KAAA,CAAAS,aAAA,CAACR,IAAI;IAACc,KAAK,EAAE;MAAEC,cAAc,EAAE,QAAQ;MAAEC,aAAa,EAAE;IAAM;EAAE,gBAC9DjB,KAAA,CAAAS,aAAA,CAACN,UAAU,EAAKK,eAAe,CAACK,KAAQ,CACpC,CACN,CAEJ,CAAC,gBAEHb,KAAA,CAAAS,aAAA,CAACP,OAAO;IAACS,IAAI,EAAE;EAAG,CAAE,CAEtB,CAAC;AAAA,CACJ"}
@@ -1,2 +0,0 @@
1
- export * from "./EndOfPage";
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/endOfPage/index.tsx"],"mappings":"AAAA,cAAc,aAAa"}
@@ -1,23 +0,0 @@
1
- import React from "react";
2
- import { ButtonLinkProps, ButtonSolidProps } from "../buttons";
3
- type PrimaryActionProp = {
4
- type: "Solid";
5
- props: Omit<ButtonSolidProps, "fullWidth">;
6
- };
7
- type SecondaryActionProp = {
8
- type: "Link";
9
- props: ButtonLinkProps;
10
- };
11
- type Props = {
12
- primaryAction?: never;
13
- secondaryAction?: never;
14
- } | {
15
- primaryAction: PrimaryActionProp;
16
- secondaryAction?: never;
17
- } | {
18
- primaryAction: PrimaryActionProp;
19
- secondaryAction: SecondaryActionProp;
20
- };
21
- export declare const EndOfPage: ({ primaryAction, secondaryAction }: Props) => React.JSX.Element;
22
- export {};
23
- //# sourceMappingURL=EndOfPage.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"EndOfPage.d.ts","sourceRoot":"","sources":["../../../../src/components/endOfPage/EndOfPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAEL,eAAe,EAEf,gBAAgB,EACjB,MAAM,YAAY,CAAC;AAEpB,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;CAC5C,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,KAAK,KAAK,GACN;IACE,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB,GACD;IACE,aAAa,EAAE,iBAAiB,CAAC;IACjC,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB,GACD;IACE,aAAa,EAAE,iBAAiB,CAAC;IACjC,eAAe,EAAE,mBAAmB,CAAC;CACtC,CAAC;AAEN,eAAO,MAAM,SAAS,uCAAwC,KAAK,sBAoBlE,CAAC"}
@@ -1,2 +0,0 @@
1
- export * from "./EndOfPage";
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/endOfPage/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}
@@ -1,55 +0,0 @@
1
- import React from "react";
2
- import { View } from "react-native";
3
- import { VSpacer } from "../spacer";
4
- import {
5
- ButtonLink,
6
- ButtonLinkProps,
7
- ButtonSolid,
8
- ButtonSolidProps
9
- } from "../buttons";
10
-
11
- type PrimaryActionProp = {
12
- type: "Solid";
13
- props: Omit<ButtonSolidProps, "fullWidth">;
14
- };
15
-
16
- type SecondaryActionProp = {
17
- type: "Link";
18
- props: ButtonLinkProps;
19
- };
20
-
21
- type Props =
22
- | {
23
- primaryAction?: never;
24
- secondaryAction?: never;
25
- }
26
- | {
27
- primaryAction: PrimaryActionProp;
28
- secondaryAction?: never;
29
- }
30
- | {
31
- primaryAction: PrimaryActionProp;
32
- secondaryAction: SecondaryActionProp;
33
- };
34
-
35
- export const EndOfPage = ({ primaryAction, secondaryAction }: Props) => (
36
- <>
37
- <VSpacer size={32} />
38
- {primaryAction ? (
39
- <>
40
- <ButtonSolid {...primaryAction.props} fullWidth />
41
- {secondaryAction && (
42
- <>
43
- <VSpacer size={16} />
44
- <VSpacer size={4} />
45
- <View style={{ justifyContent: "center", flexDirection: "row" }}>
46
- <ButtonLink {...secondaryAction.props} />
47
- </View>
48
- </>
49
- )}
50
- </>
51
- ) : (
52
- <VSpacer size={32} />
53
- )}
54
- </>
55
- );
@@ -1 +0,0 @@
1
- export * from "./EndOfPage";