@ovotech/element-native 5.4.1 → 5.4.2-canary-317a648-425

package/dist/src/components/SelectField/Select.js

@@ -1,94 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import groupBy from 'lodash.groupby';
-import { Fragment, useState } from 'react';
-import { Dimensions, Modal, ScrollView, View, } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import styled, { css } from '../../styled.native';
-import { Icon } from '../Icon';
-import { P } from '../P';
-import { Strong } from '../Strong';
-const SelectInput = styled.TouchableOpacity(({ theme, hasError }) => {
-    return css `
-      flex-direction: row;
-      align-items: center;
-      background-color: transparent;
-      border-color: ${hasError
-        ? theme.input.color.borderError
-        : theme.input.color.border};
-      border-width: ${numToPx(theme.border.width.md)};
-      border-radius: ${numToPx(theme.border.radius.sm)};
-      padding: ${numToPx(theme.space[200])};
-      padding-right: ${numToPx(theme.space[350])};
-      height: ${numToPx(theme.space[1100])};
-    `;
-});
-const DropdownWrapper = styled.TouchableOpacity(({ theme }) => css `
-    flex: 1;
-    justify-content: center;
-    align-items: center;
-
-    /* 80 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */
-    background-color: ${theme.color.brand.dark}80;
-  `);
-const DropdownContainer = styled(SafeAreaView)(({ theme }) => css `
-    width: 95%;
-    max-height: 70%;
-    border-radius: ${numToPx(theme.border.radius.sm)};
-    background-color: ${theme.color.surface.bright};
-  `);
-const SelectOption = styled.TouchableOpacity(({ theme, isLastOption }) => css `
-    flex-direction: row;
-    align-items: center;
-    border-bottom-color: ${theme.color.input.borderDim};
-    border-bottom-width: ${isLastOption ? 0 : 1}px;
-    padding: 0 ${numToPx(theme.space[400])};
-  `);
-const Radio = styled.View(({ theme, isChecked }) => css `
-    background-color: ${isChecked
-    ? theme.input.color.selectedTint
-    : 'transparent'};
-    width: ${numToPx(theme.space[600])};
-    height: ${numToPx(theme.space[600])};
-    margin-left: auto;
-    border-radius: ${numToPx(theme.space[600])};
-    border-width: ${numToPx(theme.border.width.md)};
-    border-color: ${theme.input.color[isChecked ? 'selected' : 'border']};
-  `);
-const RadioDot = styled.View(({ theme, isChecked }) => css `
-    background-color: ${theme.input.color.selected};
-    position: absolute;
-    top: ${numToPx(theme.space[100])};
-    width: ${numToPx(theme.space[300])};
-    height: ${numToPx(theme.space[300])};
-    border-radius: ${numToPx(theme.space[300])};
-    align-self: center;
-    opacity: ${isChecked ? 1 : 0};
-  `);
-const StyledP = styled(P)(({ theme }) => css `
-    margin-top: ${numToPx(theme.space[300])};
-    margin-bottom: ${numToPx(theme.space[300])};
-  `);
-const StyledCategory = styled(P)(({ theme }) => css `
-    font-size: ${numToPx(theme.font.size.xs.mediaQuery.lg)};
-    color: ${theme.color.surface.onSurface};
-    background-color: ${theme.color.surface.surface};
-    padding: ${numToPx(theme.space[100])} ${numToPx(theme.space[400])};
-  `);
-export const Select = ({ options = [], defaultSelected = { label: '', value: 'default' }, noOptionMessage = 'No option selected', onSelected = () => null, hasError = false, testID = 'select', ref, }) => {
-    const [isOpen, setOpen] = useState(false);
-    const [selected, setSelected] = useState(defaultSelected);
-    const height = Dimensions.get('window').height;
-    const dropdownContainerMaxHeight = height * 0.7;
-    const handleOptionPress = (val) => {
-        onSelected(val);
-        setOpen(false);
-        setSelected(val);
-    };
-    const optionsByCategories = groupBy(options, 'category');
-    const requiredOption = {
-        label: `-- ${noOptionMessage} --`,
-        value: 'default',
-    };
-    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, onPress: () => setOpen(!isOpen), ref: ref, children: [_jsx(P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), _jsx(Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: () => setOpen(false), children: _jsx(DropdownWrapper, { onPress: () => setOpen(false), children: _jsx(DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: _jsxs(ScrollView, { nestedScrollEnabled: true, testID: `${testID}-OptionsScrollView`, children: [_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: () => handleOptionPress(requiredOption), children: [_jsx(StyledP, { children: _jsx(Strong, { children: requiredOption.label }) }), _jsx(Radio, { isChecked: selected.value === requiredOption.value, children: _jsx(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(category => (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map((option, i) => (_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: () => handleOptionPress(option), children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, { isChecked: selected.value === option.value, children: _jsx(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)))] }, category)))] }) }) }) })] }));
-};

package/dist/src/components/SelectField/SelectField.d.ts

@@ -1,10 +0,0 @@
-import { RefObject } from 'react';
-import { FieldProps } from '../Field';
-import { SelectProps } from './Select';
-import { TouchableOpacityProps } from 'react-native';
-type SelectFieldProps = SelectProps & Omit<FieldProps, 'children'> & {
-    testID?: string;
-    ref?: RefObject<TouchableOpacityProps | null>;
-};
-export declare const SelectField: ({ error, options, onSelected, noOptionMessage, defaultSelected, testID, ref, ...rest }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/src/components/SelectField/SelectField.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Field } from '../Field';
-import { Select } from './Select';
-export const SelectField = ({ error, options, onSelected, noOptionMessage, defaultSelected, testID, ref, ...rest }) => (_jsx(Field, { affixWidth: 20, error: error, ...rest, children: _jsx(_Fragment, { children: _jsx(Select, { onSelected: onSelected, options: options, noOptionMessage: noOptionMessage, defaultSelected: defaultSelected, hasError: Boolean(error), testID: testID, ref: ref }) }) }));

package/dist/src/components/SelectField/index.d.ts

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

package/dist/src/components/SelectField/index.js

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

package/dist/src/components/SkeletonAnimation/SkeletonAnimation.d.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from 'react';
-export declare const SkeletonAnimation: ({ children, animation, testID, }: {
-    children: ReactNode;
-    animation?: "none" | "pulse";
-    testID?: string;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/SkeletonAnimation/SkeletonAnimation.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-import { Animated, Platform, View } from 'react-native';
-export const SkeletonAnimation = ({ children, animation = 'pulse', testID, }) => {
-    const animationRef = useRef(new Animated.Value(0));
-    const animationLoop = useRef(undefined);
-    useEffect(() => {
-        animationLoop.current = Animated.timing(animationRef.current, {
-            toValue: 2,
-            delay: 400,
-            duration: 1500,
-            useNativeDriver: !!Platform.select({
-                web: false,
-                native: true,
-            }),
-        });
-        animationRef.current.setValue(0);
-        Animated.loop(animationLoop.current).start();
-    }, []);
-    return (_jsx(View, { accessible: false, accessibilityRole: "none", accessibilityLabel: "loading...", testID: testID, children: animation === 'pulse' ? (_jsx(Animated.View, { style: [
-                {
-                    height: '100%',
-                    width: '100%',
-                    opacity: animationRef.current.interpolate({
-                        inputRange: [0.25, 1, 2],
-                        outputRange: [1, 0.25, 1],
-                    }),
-                },
-            ], children: children })) : (_jsx(View, { children: children })) }));
-};

package/dist/src/components/SkeletonAnimation/index.d.ts

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

package/dist/src/components/SkeletonAnimation/index.js

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

package/dist/src/components/SkeletonCircle/SkeletonCircle.d.ts

@@ -1,6 +0,0 @@
-import { ViewProps } from 'react-native';
-type Props = ViewProps & {
-    width?: string;
-};
-export declare const SkeletonCircle: ({ width, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/src/components/SkeletonCircle/SkeletonCircle.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { pxToNumber } from '@ovotech/element-core';
-import styled from '../../styled.native';
-import { SkeletonAnimation } from '../SkeletonAnimation';
-const StyledSkeletonCircleWrapper = styled.View(({ width }) => `width: ${width}; max-width: 100%;`);
-const StyledSkeletonCircle = styled.View(({ theme, width }) => `
-    background-color: ${theme.color.surface.dim};
-    height: 0;
-    padding-bottom: 100%;
-    border-radius: ${pxToNumber(width) / 2}px;
-  `);
-export const SkeletonCircle = ({ width = '120px', ...rest }) => (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonCircleWrapper, { width: width, ...rest, children: _jsx(StyledSkeletonCircle, { width: width }) }) }));

package/dist/src/components/SkeletonCircle/index.d.ts

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

package/dist/src/components/SkeletonCircle/index.js

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

package/dist/src/components/SkeletonHeading/SkeletonHeading.d.ts

@@ -1,8 +0,0 @@
-import { ComponentType } from 'react';
-import { ViewProps } from 'react-native';
-type Props = ViewProps & {
-    size?: string;
-    headingComponent?: ComponentType<any>;
-};
-export declare const SkeletonHeading: ({ size, headingComponent: Heading, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/src/components/SkeletonHeading/SkeletonHeading.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from '../../styled.native';
-import { Heading3 } from '../Heading';
-import { SkeletonAnimation } from '../SkeletonAnimation';
-const StyledSkeletonHeading = styled.View(({ theme, size }) => `
-    background-color: ${theme.color.surface.dim};
-    width: ${size};
-  `);
-export const SkeletonHeading = ({ size = '70%', headingComponent: Heading = Heading3, ...rest }) => (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonHeading, { "aria-hidden": "true", size: size, as: Heading, ...rest, children: "\u00A0" }) }));

package/dist/src/components/SkeletonHeading/index.d.ts

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

package/dist/src/components/SkeletonHeading/index.js

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

package/dist/src/components/SkeletonText/SkeletonText.d.ts

@@ -1,6 +0,0 @@
-import { ViewProps } from 'react-native';
-type Props = ViewProps & {
-    lines?: number;
-};
-export declare const SkeletonText: ({ lines, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/src/components/SkeletonText/SkeletonText.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { useBreakpoint } from '../../hooks';
-import styled from '../../styled.native';
-import { P } from '../P';
-import { SkeletonAnimation } from '../SkeletonAnimation';
-const StyledSkeletonText = styled.View(({ theme, aboveSmallBreakpoint, short }) => {
-    return `
-    background-color: ${theme.color.surface.dim};
-    margin-bottom: ${numToPx(theme.space[200])};
-    height: ${aboveSmallBreakpoint
-        ? numToPx(theme.font.size.md.mediaQuery.lg)
-        : numToPx(theme.font.size.md.mediaQuery.sm)};
-
-    ${short ? 'width: 50%' : ''};
-  `;
-});
-export const SkeletonText = ({ lines = 1, ...rest }) => {
-    const generatedLines = [];
-    const { smallAndUp } = useBreakpoint();
-    for (let i = 1; i <= lines; i++) {
-        generatedLines.push(_jsx(StyledSkeletonText, { short: i === lines, aboveSmallBreakpoint: smallAndUp }, `line-${i}`));
-    }
-    return (
-    // @ts-ignore styled components stuff
-    _jsx(P, { as: SkeletonAnimation, ...rest, children: generatedLines }));
-};

package/dist/src/components/SkeletonText/index.d.ts

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

package/dist/src/components/SkeletonText/index.js

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

package/dist/src/components/Spinner/Spinner.d.ts

@@ -1,8 +0,0 @@
-type SpinnerSize = 'large' | 'small';
-type SpinnerProps = {
-    inverted?: boolean;
-    size?: SpinnerSize | number;
-    accessibilityLabel?: string;
-};
-export declare const Spinner: ({ inverted, size, accessibilityLabel, }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/src/components/Spinner/Spinner.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useMemo } from 'react';
-import { View } from 'react-native';
-import Animated, { Easing, cancelAnimation, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
-import { ThemeContext } from '../../styled.native';
-const semanticSizes = { large: 65, small: 32 };
-export const Spinner = ({ inverted = false, size = 'small', accessibilityLabel = 'Loading', }) => {
-    const theme = useContext(ThemeContext);
-    const rotation = useSharedValue(0);
-    const rectSize = size in semanticSizes
-        ? semanticSizes[size]
-        : size;
-    const halfRectSize = rectSize / 2;
-    const containerStyle = useMemo(() => ({
-        width: rectSize,
-        height: rectSize,
-    }), [rectSize]);
-    const rectStyles = useMemo(() => ({
-        width: rectSize,
-        height: rectSize,
-        backgroundColor: theme.color.brand[inverted ? 'onBrand' : 'brand'],
-        transform: [{ rotate: '-15deg' }],
-    }), [rectSize]);
-    const animatedStyles = useAnimatedStyle(() => ({
-        transform: [{ rotateY: `${rotation.value}deg` }],
-        transformOrigin: [halfRectSize, halfRectSize, 0],
-    }));
-    useEffect(() => {
-        cancelAnimation(rotation);
-        rotation.value = withRepeat(withTiming(-360, { duration: 2000, easing: Easing.linear }), 200, false);
-        return () => {
-            cancelAnimation(rotation);
-        };
-    }, []);
-    return (_jsx(View, { style: [containerStyle], accessible: true, accessibilityLabel: accessibilityLabel, children: _jsx(Animated.View, { style: animatedStyles, children: _jsx(View, { style: rectStyles }) }) }));
-};

package/dist/src/components/Spinner/index.d.ts

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

package/dist/src/components/Spinner/index.js

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

package/dist/src/components/Stack/Stack.d.ts

@@ -1,7 +0,0 @@
-import { SpaceKey } from '@ovotech/element-core';
-import { ComponentProps, ElementType } from 'react';
-interface Props extends ComponentProps<ElementType> {
-    spaceBetween: SpaceKey | SpaceKey[];
-}
-declare const Stack: ({ children, spaceBetween, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
-export { Stack };

package/dist/src/components/Stack/Stack.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { View } from 'react-native';
-import styled from 'styled-components';
-import { useBreakpoint } from '../../hooks';
-import { useTheme } from '../../styled.native';
-import { responsiveStyle } from '../../utils';
-const StyledStack = styled(View)(({ gapStyle }) => `
-  ${gapStyle}
-`);
-const Stack = ({ children, spaceBetween, ...rest }) => {
-    const breakpoints = useBreakpoint();
-    const theme = useTheme();
-    const formatter = (spaceKey) => numToPx(theme.space[String(spaceKey * 100)]);
-    const gapStyle = responsiveStyle('gap', spaceBetween, breakpoints, formatter);
-    return (_jsx(StyledStack, { gapStyle: gapStyle, ...rest, children: children }));
-};
-export { Stack };

package/dist/src/components/Stack/index.d.ts

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

package/dist/src/components/Stack/index.js

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

package/dist/src/components/Stretch/Stretch.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-import { ViewProps } from 'react-native';
-export declare const Stretch: (props: ViewProps & {
-    fullWidth?: boolean;
-    defaultWidth: string;
-    children: ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Stretch/Stretch.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useBreakpoint } from '../../hooks';
-import styled, { css } from '../../styled.native';
-const StyledStretch = styled.View(
-// full width on small, default width on tablet or if fullWidth is false
-({ smallAndUp, fullWidth = true, defaultWidth }) => css `
-    width: ${!fullWidth || smallAndUp ? defaultWidth : '100%'};
-    ${defaultWidth && !fullWidth ? 'max-width: 100%;' : ''}
-  `);
-export const Stretch = (props) => {
-    const { smallAndUp } = useBreakpoint();
-    return _jsx(StyledStretch, { smallAndUp: smallAndUp, ...props });
-};

package/dist/src/components/Stretch/index.d.ts

@@ -1 +0,0 @@
-export * from './Stretch';

package/dist/src/components/Stretch/index.js

@@ -1 +0,0 @@
-export * from './Stretch';