@ovotech/element-native 5.3.0 → 5.4.1

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,42 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useState, cloneElement, useEffect, createRef, useRef, } from 'react';
+import styled, { css } from '../../styled.native';
+import { filterChildrenByType } from '../../utils';
+import { Card } from '../Card';
+import { TabList } from './TabList';
+import { TabPanel } from './TabPanel';
+const TabsCard = styled(Card)(({ theme: { core, semantic }, inline }) => css `
+    padding: 0;
+    border: ${numToPx(core.borderWidth.small)} solid
+      ${inline ? semantic.border.differentiated : 'transparent'};
+    background: transparent;
+  `);
+export const Tabs = ({ children, defaultSelected = 0, onSelected, fullWidth, inline, ...rest }) => {
+    const [activeTab, setActiveTab] = useState(defaultSelected);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore there is no way to properly type it
+    const tabList = filterChildrenByType(children, TabList);
+    const tabPanels = filterChildrenByType(children, TabPanel);
+    const tabRefs = tabPanels.map(() => createRef());
+    const loaded = useRef(false);
+    useEffect(() => {
+        if (loaded.current) {
+            onSelected && onSelected(activeTab);
+        }
+        else {
+            loaded.current = true;
+        }
+    }, [onSelected, activeTab]);
+    return (_jsxs(TabsCard, { inline: inline, ...rest, children: [tabList.map((child) => cloneElement(child, {
+                setActiveTab,
+                activeTab,
+                tabRefs,
+                fullWidth,
+                inline,
+            })), tabPanels
+                .filter((_, index) => index === activeTab)
+                .map((child, index) => cloneElement(child, {
+                hidden: activeTab !== index,
+            }))] }));
+};

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,4 @@
+export { Tabs } from './Tabs';
+export { Tab } from './Tab';
+export { TabList } from './TabList';
+export { TabPanel } from './TabPanel';

package/dist/components/Tabs/index.js

@@ -0,0 +1,4 @@
+export { Tabs } from './Tabs';
+export { Tab } from './Tab';
+export { TabList } from './TabList';
+export { TabPanel } from './TabPanel';

package/dist/components/TextField/TextField.d.ts

@@ -0,0 +1,5 @@
+import { FieldProps } from '../Field';
+import { InputProps } from '../Input/Input';
+type Props = Omit<FieldProps, 'children'> & InputProps;
+export declare const TextField: ({ ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TextField/TextField.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Field } from '../Field';
+import { TextInput } from '../TextInput';
+export const TextField = ({ ref, ...rest }) => {
+    return (_jsx(Field, { ...rest, children: _jsx(TextInput, { ref: ref }) }));
+};

package/dist/components/TextField/index.d.ts

@@ -0,0 +1 @@
+export { TextField } from './TextField';

package/dist/components/TextField/index.js

@@ -0,0 +1 @@
+export { TextField } from './TextField';

package/dist/components/TextGroup/TextGroup.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+import { ViewProps } from 'react-native';
+export declare const TextGroup: ({ children, ...rest }: PropsWithChildren<ViewProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TextGroup/TextGroup.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement, } from 'react';
+import { View } from 'react-native';
+import { getValidChildren } from '../../utils';
+export const TextGroup = ({ children, ...rest }) => {
+    const validChildren = getValidChildren(children);
+    return (_jsx(View, { ...rest, children: Children.map(validChildren, (child, index) => {
+            if (!isValidElement(child)) {
+                return;
+            }
+            const typedChild = child;
+            const newStyles = {
+                ...(index === 0 ? { marginTop: 0 } : {}),
+                marginBottom: 0,
+            };
+            return cloneElement(typedChild, {
+                style: [typedChild.props.style, newStyles],
+            });
+        }) }));
+};

package/dist/components/TextGroup/index.d.ts

@@ -0,0 +1 @@
+export { TextGroup } from './TextGroup';

package/dist/components/TextGroup/index.js

@@ -0,0 +1 @@
+export { TextGroup } from './TextGroup';

package/dist/components/TextInput/TextInput.d.ts

@@ -0,0 +1,8 @@
+import { Ref } from 'react';
+import { TextInput as RNTextInput } from 'react-native';
+import { InputProps } from '../Input/Input';
+type Props = InputProps & {
+    ref?: Ref<RNTextInput>;
+};
+declare const TextInput: ({ ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export { TextInput };

package/dist/components/TextInput/TextInput.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from '../Input/Input';
+const TextInput = ({ ref, ...props }) => (_jsx(Input, { keyboardType: "default", ref: ref, ...props }));
+export { TextInput };

package/dist/components/TextInput/index.d.ts

@@ -0,0 +1 @@
+export { TextInput } from './TextInput';

package/dist/components/TextInput/index.js

@@ -0,0 +1 @@
+export { TextInput } from './TextInput';

package/dist/components/TextLink/TextLink.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren, Ref } from 'react';
+import { Text, TextProps } from 'react-native';
+type Props = PropsWithChildren<TextProps & {
+    opensInNewWindow?: boolean;
+    ref?: Ref<Text>;
+}>;
+declare const TextLink: ({ children, opensInNewWindow, accessibilityLabel, ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export { TextLink };

package/dist/components/TextLink/TextLink.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from 'react-native';
+import styled, { css } from '../../styled.native';
+import { getText } from '../../utils/utils';
+import { Icon } from '../Icon';
+const StyledText = styled.Text(({ theme: { core, semantic } }) => css `
+    font-family: ${core.fontFamily.body.native};
+    color: ${semantic.message.link};
+    text-decoration: underline;
+    text-decoration-color: ${semantic.message.link};
+  `);
+const StyledIcon = styled(Icon)(({ theme: { semantic } }) => css `
+    color: ${semantic.message.branded};
+  `);
+const TextLink = ({ children, opensInNewWindow = false, accessibilityLabel, ref, ...rest }) => {
+    const updatedAccessibilityLabel = opensInNewWindow
+        ? `${accessibilityLabel ? accessibilityLabel : getText(children)} (opens in new window)`
+        : accessibilityLabel;
+    return (_jsxs(Text, { ...rest, accessibilityLabel: updatedAccessibilityLabel, ref: ref, children: [_jsx(StyledText, { children: children }), opensInNewWindow && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(StyledIcon, { size: 12, name: "new-window" })] }))] }));
+};
+export { TextLink };

package/dist/components/TextLink/index.d.ts

@@ -0,0 +1 @@
+export { TextLink } from './TextLink';

package/dist/components/TextLink/index.js

@@ -0,0 +1 @@
+export { TextLink } from './TextLink';

package/dist/components/TextareaField/TextareaField.d.ts

@@ -0,0 +1,5 @@
+import { FieldProps } from '../Field';
+import { TextareaInputProps } from '../TextareaInput';
+type Props = Omit<FieldProps, 'children'> & TextareaInputProps;
+export declare const TextareaField: ({ ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TextareaField/TextareaField.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Field } from '../Field';
+import { TextareaInput } from '../TextareaInput';
+export const TextareaField = ({ ref, ...rest }) => {
+    return (_jsx(Field, { ...rest, children: _jsx(TextareaInput, { ref: ref }) }));
+};

package/dist/components/TextareaField/index.d.ts

@@ -0,0 +1 @@
+export { TextareaField } from './TextareaField';

package/dist/components/TextareaField/index.js

@@ -0,0 +1 @@
+export { TextareaField } from './TextareaField';

package/dist/components/TextareaInput/TextareaInput.d.ts

@@ -0,0 +1,6 @@
+import { InputProps } from '../Input/Input';
+type TextareaInputProps = InputProps & {
+    rows?: number;
+};
+declare const TextareaInput: ({ rows, ref, ...rest }: TextareaInputProps) => import("react/jsx-runtime").JSX.Element;
+export { TextareaInput, TextareaInputProps };

package/dist/components/TextareaInput/TextareaInput.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { Input } from '../Input/Input';
+const StyledInput = styled(Input)(({ theme: { core }, rows }) => css `
+    padding: ${numToPx(core.space[2])};
+    padding-top: ${numToPx(core.space[3])};
+    height: ${core.space[8] * rows}px;
+  `);
+const TextareaInput = ({ rows = 3, ref, ...rest }) => {
+    return (_jsx(StyledInput, { ...rest, keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, ref: ref }));
+};
+export { TextareaInput };

package/dist/components/TextareaInput/index.d.ts

@@ -0,0 +1 @@
+export { TextareaInput, TextareaInputProps } from './TextareaInput';

package/dist/components/TextareaInput/index.js

@@ -0,0 +1 @@
+export { TextareaInput } from './TextareaInput';

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,13 @@
+export declare const ToastsContainer: ({ top }: {
+    top?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+type ToastVariant = 'default' | 'error';
+export declare const showToast: ({ message, dismissible, action, actionTitle, variant, duration, }: {
+    message: string;
+    dismissible?: boolean;
+    action?(): void;
+    actionTitle?: string;
+    variant?: ToastVariant;
+    duration?: number;
+}) => string;
+export {};

package/dist/components/Toast/Toast.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toast, ToastPosition, Toasts, } from '@backpackapp-io/react-native-toast';
+import { numToPx } from '@ovotech/element-core';
+import { useEffect, useRef, useState } from 'react';
+import { Dimensions, TouchableOpacity, View } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import styled, { css } from '../../styled.native';
+import { Action } from '../ActionList';
+import { Icon } from '../Icon';
+import { P } from '../P';
+export const ToastsContainer = ({ top = -80 }) => (_jsx(Toasts, { extraInsets: { top } }));
+const StyledView = styled.View(({ theme: { core }, variant }) => css `
+    background-color: ${variant === 'default'
+    ? core.color.brand.forest
+    : core.color.red.darkest};
+    overflow: hidden;
+    padding-top: ${numToPx(core.space[2])};
+    padding-bottom: ${numToPx(core.space[3])};
+    padding-right: ${numToPx(core.space[2])};
+    padding-left: ${numToPx(core.space[4])};
+    border-radius: ${numToPx(core.radius.max)};
+    flex-direction: row;
+  `);
+const StyledP = styled(P)(({ theme: { semantic } }) => css `
+    color: ${semantic.inverted.message.base};
+  `);
+const StyledThinBorder = styled(Animated.View)(({ theme: { core }, variant }) => css `
+    background-color: ${variant === 'default'
+    ? core.color.brand.energised
+    : core.color.red.light};
+    height: 1px;
+  `);
+const StyledThickBorder = styled(Animated.View)(({ theme: { core }, variant }) => css `
+    background-color: ${variant === 'default'
+    ? core.color.brand.leaf
+    : core.color.red.base};
+    height: 3px;
+  `);
+const StyledCloseIcon = styled(TouchableOpacity)(({ theme: { core, semantic } }) => css `
+    background-color: ${semantic.inverted.surface};
+    border-radius: ${numToPx(core.radius.max)};
+    width: ${numToPx(core.space[7])};
+    height: ${numToPx(core.space[7])};
+    padding: ${numToPx(core.space[2])};
+    align-items: center;
+    justify-content: center;
+  `);
+export const showToast = ({ message, dismissible = false, action, actionTitle, variant = 'default', duration = 5000, }) => {
+    return action || dismissible
+        ? toast.loading(message, {
+            id: 'clipboard',
+            position: ToastPosition.BOTTOM,
+            disableShadow: true,
+            customToast: t => (_jsx(CustomToast, { ...t, dismissible: dismissible, action: action, actionTitle: actionTitle, variant: variant }, message)),
+        })
+        : toast(message, {
+            id: 'clipboard',
+            position: ToastPosition.BOTTOM,
+            duration,
+            disableShadow: true,
+            customToast: t => (_jsx(CustomToastWithTimeIndicator, { ...t, variant: variant }, message)),
+        });
+};
+const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, }) => {
+    const toastPadding = 20;
+    const textRef = useRef(null);
+    const [textHeight, setTextHeight] = useState(0);
+    const windowWidth = Dimensions.get('window').width;
+    const screenPadding = 32;
+    const toastWidth = windowWidth - screenPadding;
+    const sharedWidth = useSharedValue(toastWidth);
+    const style = useAnimatedStyle(() => {
+        return {
+            width: withTiming(sharedWidth.value, {
+                duration: duration,
+                easing: Easing.linear,
+            }),
+        };
+    });
+    useEffect(() => {
+        sharedWidth.value = 0;
+    }, []);
+    return (_jsxs(StyledView, { variant: variant, style: {
+            width: toastWidth,
+            height: textHeight + toastPadding,
+            flexWrap: 'wrap',
+        }, children: [_jsx(StyledP, { ref: textRef, onLayout: () => {
+                    textRef.current?.measureInWindow((_x, _y, _width, height) => {
+                        setTextHeight(height);
+                    });
+                }, children: message }), _jsxs(View, { style: { position: 'absolute', bottom: 0 }, children: [_jsx(StyledThinBorder, { variant: variant, style: style }), _jsx(StyledThickBorder, { variant: variant, style: style })] })] }));
+};
+const CustomToast = ({ id, message, dismissible, action, actionTitle, width, variant, }) => {
+    const toastPadding = 20;
+    const textRef = useRef(null);
+    const actionRef = useRef(null);
+    const [textHeight, setTextHeight] = useState(0);
+    const [actionHeight, setActionHeight] = useState(0);
+    const toastHeight = Math.floor(textHeight) === Math.floor(actionHeight) && !dismissible // handling multiline
+        ? textHeight
+        : textHeight + actionHeight;
+    const handleAction = () => {
+        if (action && actionTitle) {
+            action();
+            toast.dismiss(id);
+        }
+    };
+    return (_jsxs(StyledView, { variant: variant, style: {
+            width,
+            height: toastHeight + toastPadding,
+            alignItems: action ? 'flex-start' : 'center',
+        }, children: [_jsxs(View, { style: {
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
+                    justifyContent: 'space-between',
+                    flex: 1,
+                }, children: [_jsx(StyledP, { ref: textRef, onLayout: () => {
+                            textRef.current?.measureInWindow((_x, _y, _width, height) => {
+                                setTextHeight(height);
+                            });
+                        }, children: message }), action && actionTitle ? (_jsx(Action, { ref: actionRef, style: { width: 'auto' }, inverted: true, inline: true, iconRight: "chevron-right-small", onPress: handleAction, onLayout: () => {
+                            actionRef.current?.measureInWindow((_x, _y, _width, height) => {
+                                setActionHeight(height);
+                            });
+                        }, children: actionTitle })) : null] }), dismissible ? (_jsx(StyledCloseIcon, { onPress: () => toast.dismiss(id), children: _jsx(Icon, { name: "cross", color: "#fff", size: 14 }) })) : null] }));
+};

package/dist/components/Toast/index.d.ts

@@ -0,0 +1 @@
+export { showToast, ToastsContainer } from './Toast';

package/dist/components/Toast/index.js

@@ -0,0 +1 @@
+export { showToast, ToastsContainer } from './Toast';

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

@@ -0,0 +1,13 @@
+import { ReactNode, RefObject } from 'react';
+import { TouchableOpacityProps, View } from 'react-native';
+export type HorizontalPosition = 'left' | 'right';
+type ToggleProps = Omit<TouchableOpacityProps, 'children'> & {
+    label?: string | ReactNode;
+    checked?: boolean;
+    inline?: boolean;
+    hint?: ReactNode;
+    labelPosition?: HorizontalPosition;
+    ref?: RefObject<View>;
+};
+export declare const Toggle: ({ activeOpacity, checked, label, hint, inline, labelPosition, testID, ref, ...rest }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Toggle/Toggle.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Animated, View } from 'react-native';
+import { useTheme } from '../../styled.native';
+import { HintText } from '../HintText/HintText';
+import { LabelText } from '../LabelText';
+import { StyledToggleDot, StyledToggleInputWrapper, StyledToggleInput, StyledWrapper, } from './styles';
+const Input = ({ checked, labelPosition, testID, ...rest }) => {
+    const { core } = useTheme();
+    const leftVal = useRef(new Animated.Value(checked ? core.space[6] : core.space[1])).current;
+    useEffect(() => {
+        Animated.timing(leftVal, {
+            toValue: checked ? core.space[6] : core.space[1],
+            duration: 150, // i.e. theme.core.transition.fast
+            useNativeDriver: true,
+        }).start();
+    }, [checked]);
+    return (_jsx(StyledToggleInputWrapper, { labelPosition: labelPosition, ...rest, children: _jsx(StyledToggleInput, { checked: checked, testID: testID, children: _jsx(StyledToggleDot, { style: {
+                    transform: [{ translateX: leftVal }],
+                }, checked: checked }) }) }));
+};
+export const Toggle = ({ activeOpacity = 0.8, checked = false, label, hint, inline, labelPosition = 'left', testID, ref, ...rest }) => {
+    const hasLabel = label !== undefined;
+    return (_jsxs(StyledWrapper, { ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline, ...rest, children: [hasLabel ? (_jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })) : null, _jsx(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] }));
+};

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

@@ -0,0 +1 @@
+export { Toggle } from './Toggle';

package/dist/components/Toggle/index.js

@@ -0,0 +1 @@
+export { Toggle } from './Toggle';