@ovotech/element-native 5.5.0 → 5.7.0

package/dist/components/Toast/Toast.js

@@ -32,6 +32,17 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.showToast = exports.ToastsContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -44,7 +55,13 @@ const styled_native_1 = __importStar(require("../../styled.native"));
 const ActionList_1 = require("../ActionList");
 const Icon_1 = require("../Icon");
 const P_1 = require("../P");
-const ToastsContainer = ({ top = -80 }) => ((0, jsx_runtime_1.jsx)(react_native_toast_1.Toasts, { extraInsets: { top } }));
+const TOAST_PADDING = 20;
+const ToastsContainer = (_a) => {
+    var { top = -80, left, inModal = false } = _a, rest = __rest(_a, ["top", "left", "inModal"]);
+    // Extra right inset if in modal, unless it's been explicitly passed
+    const leftInset = inModal ? -20 : left !== null && left !== void 0 ? left : 0;
+    return (0, jsx_runtime_1.jsx)(react_native_toast_1.Toasts, Object.assign({ extraInsets: { top, left: leftInset } }, rest));
+};
 exports.ToastsContainer = ToastsContainer;
 const StyledView = styled_native_1.default.View(({ theme, variant }) => (0, styled_native_1.css) `
     background-color: ${variant === 'default'
@@ -76,30 +93,25 @@ const StyledCloseIcon = (0, styled_native_1.default)(react_native_1.TouchableOpa
     align-items: center;
     justify-content: center;
   `);
-const showToast = ({ message, dismissible = false, action, actionTitle, variant = 'default', duration = 5000, }) => {
-    return action || dismissible
-        ? react_native_toast_1.toast.loading(message, {
-            id: 'clipboard',
-            position: react_native_toast_1.ToastPosition.BOTTOM,
-            disableShadow: true,
-            customToast: t => ((0, jsx_runtime_1.jsx)(CustomToast, Object.assign({}, t, { dismissible: dismissible, action: action, actionTitle: actionTitle, variant: variant }), message)),
-        })
-        : (0, react_native_toast_1.toast)(message, {
-            id: 'clipboard',
-            position: react_native_toast_1.ToastPosition.BOTTOM,
-            duration,
-            disableShadow: true,
-            customToast: t => ((0, jsx_runtime_1.jsx)(CustomToastWithTimeIndicator, Object.assign({}, t, { variant: variant }), message)),
-        });
+const showToast = ({ message, dismissible = false, action, actionTitle, inlineContent, variant = 'default', duration = 5000, providerKey = 'DEFAULT', }) => {
+    const baseToastProps = {
+        id: 'clipboard',
+        position: react_native_toast_1.ToastPosition.BOTTOM,
+        disableShadow: true,
+        providerKey,
+    };
+    // Uses toast.loading for manual dismissal with action or dismiss
+    // Otherwise, use regular toast for auto-hiding with time indicator.
+    action || dismissible
+        ? react_native_toast_1.toast.loading(message, Object.assign(Object.assign({}, baseToastProps), { duration: 0, customToast: t => ((0, jsx_runtime_1.jsx)(CustomToast, Object.assign({}, t, { dismissible: dismissible, action: action, actionTitle: actionTitle, variant: variant, inline: inlineContent }), message)) }))
+        : (0, react_native_toast_1.toast)(message, Object.assign(Object.assign({}, baseToastProps), { duration, customToast: t => ((0, jsx_runtime_1.jsx)(CustomToastWithTimeIndicator, Object.assign({}, t, { variant: variant, inline: inlineContent }), message)) }));
 };
 exports.showToast = showToast;
-const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, }) => {
-    const toastPadding = 20;
+const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, inline = false, }) => {
     const textRef = (0, react_1.useRef)(null);
     const [textHeight, setTextHeight] = (0, react_1.useState)(0);
     const windowWidth = react_native_1.Dimensions.get('window').width;
-    const screenPadding = 32;
-    const toastWidth = windowWidth - screenPadding;
+    const toastWidth = windowWidth - TOAST_PADDING * 2;
     const sharedWidth = (0, react_native_reanimated_1.useSharedValue)(toastWidth);
     const style = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
         return {
@@ -114,8 +126,9 @@ const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, }) =>
     }, []);
     return ((0, jsx_runtime_1.jsxs)(StyledView, { variant: variant, style: {
             width: toastWidth,
-            height: textHeight + toastPadding,
+            height: textHeight + TOAST_PADDING,
             flexWrap: 'wrap',
+            flexDirection: inline ? 'row' : 'column',
         }, children: [(0, jsx_runtime_1.jsx)(StyledP, { ref: textRef, onLayout: () => {
                     var _a;
                     (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((_x, _y, _width, height) => {
@@ -123,13 +136,13 @@ const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, }) =>
                     });
                 }, children: message }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { position: 'absolute', bottom: 0 }, children: (0, jsx_runtime_1.jsx)(StyledBorder, { variant: variant, style: style }) })] }));
 };
-const CustomToast = ({ id, message, dismissible, action, actionTitle, width, variant, }) => {
-    const toastPadding = 20;
+const CustomToast = ({ id, message, dismissible, action, actionTitle, inline = false, width, variant, }) => {
     const textRef = (0, react_1.useRef)(null);
     const actionRef = (0, react_1.useRef)(null);
     const [textHeight, setTextHeight] = (0, react_1.useState)(0);
     const [actionHeight, setActionHeight] = (0, react_1.useState)(0);
     const toastHeight = textHeight + actionHeight;
+    const hasAction = action && actionTitle;
     const handleAction = () => {
         if (action && actionTitle) {
             action();
@@ -138,10 +151,10 @@ const CustomToast = ({ id, message, dismissible, action, actionTitle, width, var
     };
     return ((0, jsx_runtime_1.jsxs)(StyledView, { variant: variant, style: {
             width,
-            height: toastHeight + toastPadding,
-            alignItems: action ? 'flex-start' : 'center',
+            height: toastHeight + TOAST_PADDING,
+            alignItems: dismissible ? 'flex-start' : 'center',
         }, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
-                    flexDirection: 'row',
+                    flexDirection: inline ? 'row' : 'column',
                     flexWrap: 'wrap',
                     justifyContent: 'space-between',
                     flex: 1,
@@ -150,7 +163,7 @@ const CustomToast = ({ id, message, dismissible, action, actionTitle, width, var
                             (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((_x, _y, _width, height) => {
                                 setTextHeight(height);
                             });
-                        }, children: message }), action && actionTitle ? ((0, jsx_runtime_1.jsx)(ActionList_1.Action, { ref: actionRef, style: { width: 'auto' }, inverted: true, standalone: true, iconRight: "chevron-right-small", onPress: handleAction, onLayout: () => {
+                        }, children: message }), hasAction ? ((0, jsx_runtime_1.jsx)(ActionList_1.Action, { ref: actionRef, style: Object.assign({ width: 'auto', paddingBottom: 0 }, (inline ? { paddingTop: 0 } : {})), inverted: true, standalone: true, iconRight: "chevron-right-small", onPress: handleAction, onLayout: () => {
                             var _a;
                             (_a = actionRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((_x, _y, _width, height) => {
                                 setActionHeight(height);

package/dist/components/Toggle/Toggle.d.ts

@@ -8,6 +8,8 @@ type ToggleProps = Omit<TouchableOpacityProps, 'children'> & {
     hint?: ReactNode;
     labelPosition?: HorizontalPosition;
     ref?: React.RefObject<View>;
+    testID?: string;
+    toggleBackgroundColor?: string;
 };
-export declare const Toggle: ({ activeOpacity, checked, label, hint, inline, labelPosition, testID, ref, ...rest }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toggle: ({ activeOpacity, checked, label, hint, inline, labelPosition, testID, ref, toggleBackgroundColor, ...rest }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Toggle/Toggle.js

@@ -20,7 +20,7 @@ const HintText_1 = require("../HintText/HintText");
 const LabelText_1 = require("../LabelText");
 const styles_1 = require("./styles");
 const Input = (_a) => {
-    var { checked, labelPosition, testID } = _a, rest = __rest(_a, ["checked", "labelPosition", "testID"]);
+    var { checked, labelPosition, testID, toggleBackgroundColor } = _a, rest = __rest(_a, ["checked", "labelPosition", "testID", "toggleBackgroundColor"]);
     const theme = (0, styled_native_1.useTheme)();
     const leftVal = (0, react_1.useRef)(new react_native_1.Animated.Value(checked ? theme.space[600] : theme.space[100])).current;
     (0, react_1.useEffect)(() => {
@@ -30,13 +30,11 @@ const Input = (_a) => {
             useNativeDriver: true,
         }).start();
     }, [checked]);
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledToggleInputWrapper, Object.assign({ labelPosition: labelPosition }, rest, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledToggleInput, { checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(styles_1.StyledToggleDot, { style: {
-                    transform: [{ translateX: leftVal }],
-                }, checked: checked }) }) })));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledToggleInputWrapper, Object.assign({ labelPosition: labelPosition }, rest, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledToggleInput, { checked: checked, testID: testID, toggleBackgroundColor: toggleBackgroundColor, children: (0, jsx_runtime_1.jsx)(styles_1.StyledToggleDot, { style: { transform: [{ translateX: leftVal }] }, checked: checked }) }) })));
 };
 const Toggle = (_a) => {
-    var { activeOpacity = 0.8, checked = false, label, hint, inline, labelPosition = 'left', testID, ref } = _a, rest = __rest(_a, ["activeOpacity", "checked", "label", "hint", "inline", "labelPosition", "testID", "ref"]);
+    var { activeOpacity = 0.8, checked = false, label, hint, inline, labelPosition = 'left', testID, ref, toggleBackgroundColor } = _a, rest = __rest(_a, ["activeOpacity", "checked", "label", "hint", "inline", "labelPosition", "testID", "ref", "toggleBackgroundColor"]);
     const hasLabel = label !== undefined;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledWrapper, Object.assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline }, rest, { children: [hasLabel ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })) : null, (0, jsx_runtime_1.jsx)(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledWrapper, Object.assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline }, rest, { children: [hasLabel ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })) : null, (0, jsx_runtime_1.jsx)(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined, toggleBackgroundColor: toggleBackgroundColor })] })));
 };
 exports.Toggle = Toggle;