@ovotech/element-native 5.3.0 → 5.4.1

package/dist/components/Field/Field.js

@@ -0,0 +1,38 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement, createRef, } from 'react';
+import { TouchableWithoutFeedback, View } from 'react-native';
+import { getText, mergeRefs } from '../../utils';
+import { ErrorText } from '../ErrorText';
+import { FormGroup } from '../FormGroup';
+import { HintText } from '../HintText';
+import { LabelText } from '../LabelText';
+import { Stack } from '../Stack';
+import { Stretch } from '../Stretch';
+export const Field = ({ children, label, optional = false, hint, error, fullWidth, characters = 25, affixWidth = 0, ref, ...rest }) => {
+    const hasError = !!error;
+    const inputRef = createRef();
+    const labelText = optional ? `${label} (optional)` : label;
+    const accessibilityLabel = [labelText, getText(hint), getText(error)]
+        .filter(Boolean)
+        .join(', ');
+    return (_jsx(FormGroup, { error: hasError || undefined, testID: "nb-field-form-group", children: _jsxs(Stack, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: () => {
+                        if (inputRef.current) {
+                            // @ts-ignore. Toggle picker if this is a select menu.
+                            if (inputRef.current.togglePicker) {
+                                // @ts-ignore
+                                inputRef.current.togglePicker();
+                            }
+                            else {
+                                // @ts-ignore
+                                inputRef.current.focus();
+                            }
+                        }
+                    }, children: _jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }) }), _jsx(Stretch, { defaultWidth: `${Math.ceil(characters * 0.8 * 16) + affixWidth}px`, fullWidth: fullWidth, children: Children.map(children, child => isValidElement(child)
+                        ? cloneElement(child, {
+                            invalid: hasError || undefined,
+                            ref: mergeRefs(inputRef, ref),
+                            accessibilityLabel,
+                            ...rest,
+                        })
+                        : child) })] }) }));
+};

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

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

package/dist/components/Field/index.js

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

package/dist/components/FilterSelect/FilterSelect.d.ts

@@ -0,0 +1,17 @@
+type Option = {
+    label: string;
+    value: string;
+    collapsedLabel?: string;
+};
+export type FilterSelect = {
+    defaultSelected?: Option;
+    options: Array<Option>;
+    onSelected?(value: Option): void;
+    testID?: string;
+    rightText?: string;
+    leftText?: string;
+    dropdownDirection?: 'left' | 'right';
+    accessibilityHint?: string;
+};
+export declare const FilterSelect: ({ options, defaultSelected, onSelected, testID, rightText, leftText, dropdownDirection, accessibilityHint, }: FilterSelect) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/FilterSelect/FilterSelect.js

@@ -0,0 +1,67 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { Fragment, useRef, useState } from 'react';
+import { Dimensions, Modal, ScrollView, TouchableWithoutFeedback, View, } from 'react-native';
+import styled, { css, useTheme } from '../../styled.native';
+import { Divider } from '../Divider';
+import { Icon } from '../Icon';
+import { Margin } from '../Margin';
+import { P } from '../P';
+import { Strong } from '../Strong';
+const SelectInput = styled.TouchableOpacity(({ theme: { core } }) => {
+    return css `
+    flex-direction: row;
+    align-items: center;
+    background-color: ${core.color.brand.white};
+    border-radius: ${numToPx(core.radius.max)};
+    padding-left: ${numToPx(core.space[2])};
+    padding-right: ${numToPx(core.space[1])};
+  `;
+});
+const DropdownWrapper = styled.View(({ theme: { core } }) => css `
+    width: 100%;
+    height: 100%;
+
+    /* 40 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */
+    background-color: ${core.color.neutral.darkest}40;
+  `);
+const DropdownContainer = styled.View(({ theme: { core } }) => css `
+    flex: 1;
+    min-width: 25%;
+    max-height: 100%;
+    border-radius: ${numToPx(core.radius.large)};
+    background-color: ${core.color.brand.white};
+    position: absolute;
+  `);
+const SelectOption = styled.TouchableOpacity(({ theme: { core } }) => css `
+    flex-direction: row;
+    align-items: center;
+    padding: 0 ${numToPx(core.space[2])};
+  `);
+export const FilterSelect = ({ options = [], defaultSelected = { label: '', value: 'default' }, onSelected = () => null, testID = 'select', rightText, leftText, dropdownDirection = 'right', accessibilityHint, }) => {
+    const theme = useTheme();
+    const selectRef = useRef(null);
+    const [isOpen, setOpen] = useState(false);
+    const [selected, setSelected] = useState(defaultSelected);
+    const [measure, setMeasure] = useState(null);
+    const handleOptionPress = (val) => {
+        onSelected(val);
+        setOpen(false);
+        setSelected(val);
+    };
+    return (_jsxs(View, { style: { flexDirection: 'row' }, children: [leftText ? _jsxs(P, { children: [leftText, " "] }) : null, _jsxs(SelectInput, { ref: selectRef, testID: testID, onPress: () => setOpen(!isOpen), onLayout: () => {
+                    selectRef.current?.measureInWindow((x, y, width) => {
+                        setMeasure({
+                            top: y - theme.core.space[3],
+                            left: x,
+                            right: Dimensions.get('window').width - (x + width),
+                        });
+                    });
+                }, accessible: true, accessibilityRole: "combobox", accessibilityHint: accessibilityHint, children: [_jsx(P, { children: _jsx(Strong, { children: selected.value === 'default'
+                                ? ''
+                                : selected.collapsedLabel ?? selected.label }) }), _jsx(Icon, { name: "caret-arrow-down", size: 14, style: { marginLeft: 2 } })] }, String(isOpen)), rightText ? _jsxs(P, { children: [" ", rightText] }) : null, _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: () => setOpen(false), children: _jsx(TouchableWithoutFeedback, { onPress: () => setOpen(false), children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, { style: {
+                                top: measure?.top,
+                                left: dropdownDirection === 'right' ? measure?.left : undefined,
+                                right: dropdownDirection === 'left' ? measure?.right : undefined,
+                            }, children: _jsx(ScrollView, { nestedScrollEnabled: true, children: options.map((option, i) => (_jsxs(Fragment, { children: [_jsx(SelectOption, { accessible: true, accessibilityRole: "button", onPress: () => handleOptionPress(option), children: _jsx(Margin, { vertical: 3, children: _jsx(P, { children: _jsx(Strong, { children: option.label }) }) }) }), i === options.length - 1 ? null : (_jsx(Divider, { type: "differentiated" }))] }, option.label))) }) }) }) }) })] }));
+};

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

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

package/dist/components/FilterSelect/index.js

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

package/dist/components/FormGroup/FormGroup.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+type Props = ViewProps & {
+    children?: ReactNode;
+    error?: boolean;
+};
+declare const FormGroup: ({ children, error, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export { FormGroup };

package/dist/components/FormGroup/FormGroup.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import styled from '../../styled.native';
+const FormGroupWrapper = styled.View `
+  flex-direction: row;
+`;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const FormGroup = ({ children, error, ...rest }) => (_jsx(FormGroupWrapper, { ...rest, children: _jsx(View, { style: { flex: 1 }, children: children }) }));
+export { FormGroup };

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

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

package/dist/components/FormGroup/index.js

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