@ovotech/element-native 5.3.0 → 5.4.1

package/dist/components/DataTable/styles.js

@@ -0,0 +1,100 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+export const StyledTableContainer = styled.View(({ theme: { core, semantic } }) => css `
+    flex-grow: 1;
+    border-bottom-width: ${numToPx(core.borderWidth.small)};
+    border-bottom-color: ${semantic.border.differentiated};
+  `);
+export const TableHeader = styled.View(({ theme: { core }, cellWidth, smallAndUp }) => css `
+    padding-top: ${numToPx(core.space[smallAndUp ? 3 : 2])};
+    padding-bottom: ${numToPx(core.space[smallAndUp ? 3 : 2])};
+    padding-left: ${numToPx(core.space[1])};
+    padding-right: ${numToPx(core.space[1])};
+    flex: ${cellWidth === 'auto' ? 1 : 0};
+    align-self: stretch;
+    flex-direction: row;
+    width: ${cellWidth};
+  `);
+export const TableHeaderText = styled.Text(({ theme: { semantic, core }, smallAndUp }) => css `
+    font-family: ${core.fontFamily.bodyBold.native};
+    line-height: ${numToPx(core.lineHeight.body[smallAndUp ? 'large' : 'small'])};
+    font-size: ${numToPx(core.fontSize.body[smallAndUp ? 'large' : 'small'])};
+    color: ${semantic.message.base};
+    text-align: left;
+    flex-wrap: wrap;
+  `);
+export const TableCaptionText = styled.Text(({ theme: { core, semantic }, smallAndUp }) => css `
+    font-family: ${core.fontFamily.bodyBold.native};
+    font-size: ${numToPx(core.fontSize.heading4[smallAndUp ? 'large' : 'small'])};
+    line-height: ${numToPx(core.lineHeight.heading4[smallAndUp ? 'large' : 'small'])};
+    color: ${semantic.message.branded};
+    text-align: left;
+    flex-wrap: wrap;
+  `);
+export const CellText = styled.Text(({ theme: { core }, smallAndUp }) => css `
+    font-family: ${core.fontFamily.body.native};
+    line-height: ${numToPx(core.lineHeight.body.large)};
+    font-size: ${numToPx(core.fontSize.body[smallAndUp ? 'large' : 'small'])};
+  `);
+export const TableCaption = styled.View(({ theme: { core } }) => css `
+    padding: ${numToPx(core.space[4])} ${numToPx(core.space[2])};
+  `);
+export const TableRow = styled.View(({ theme: { semantic, core }, stripe }) => css `
+    background-color: ${stripe
+    ? semantic.surface.cutout
+    : semantic.surface.base};
+    flex-direction: row;
+    align-items: stretch;
+    border-bottom-width: ${stripe ? '0px' : numToPx(core.borderWidth.small)};
+    border-bottom-color: ${stripe
+    ? 'transparent'
+    : `${semantic.border.differentiated}`};
+  `);
+export const TableRowHeading = styled.View(({ theme: { semantic, core } }) => css `
+    background-color: ${semantic.surface.base};
+    border-bottom-width: ${numToPx(core.borderWidth.small)};
+    border-bottom-color: ${semantic.border.functional};
+    flex-direction: row;
+    align-items: stretch;
+  `);
+export const TableBody = styled.View `
+  flex-direction: column;
+  flex-wrap: nowrap;
+`;
+export const TableCell = styled.View(({ theme: { core }, cellWidth, smallAndUp }) => {
+    return css `
+      padding-top: ${numToPx(core.space[smallAndUp ? 3 : 2])};
+      padding-bottom: ${numToPx(core.space[smallAndUp ? 3 : 2])};
+      padding-left: ${numToPx(core.space[2])};
+      padding-right: ${numToPx(core.space[2])};
+      width: ${cellWidth};
+      flex: ${cellWidth === 'auto' ? 1 : 0};
+    `;
+});
+export const RowHeading = styled.View(({ theme: { core }, cellWidth, smallAndUp }) => {
+    return css `
+      padding-top: ${numToPx(core.space[smallAndUp ? 3 : 2])};
+      padding-bottom: ${numToPx(core.space[smallAndUp ? 3 : 2])};
+      padding-left: ${numToPx(core.space[2])};
+      padding-right: ${numToPx(core.space[2])};
+      width: ${cellWidth};
+      flex: ${cellWidth === 'auto' ? 1 : 0};
+    `;
+});
+export const StyledSeparatorRow = styled.View(({ theme: { core, semantic }, width }) => {
+    const minWidth = width ? `${width - core.space[2] * 2}px` : '100%';
+    return `
+      min-width: ${minWidth};
+      flex: 1;
+      flex-direction: row;
+      background-color: ${semantic.surface.elevated};
+      padding: ${numToPx(core.space[1])} ${numToPx(core.space[2])};
+    `;
+});
+export const SeparatorRowText = styled.Text(({ theme: { core, semantic }, smallAndUp }) => `
+  flex: 1;
+  font-family: ${core.fontFamily.body.native};
+  font-size: ${numToPx(core.fontSize.small[smallAndUp ? 'large' : 'small'])};
+  line-height: ${numToPx(core.lineHeight.small[smallAndUp ? 'large' : 'small'])};
+  color: ${semantic.message.secondary};
+`);

package/dist/components/DataTable/types.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode, Ref } from 'react';
+import { View } from 'react-native';
+export type SeparatorRow = {
+    content: string;
+    isSeparator: boolean;
+};
+type Item = ReactNode | SeparatorRow;
+export type TableProps = {
+    items: Item[][];
+    columnHeadings?: ReactNode[];
+    caption?: ReactNode;
+    rowHeadings?: boolean;
+    columnWidths: string[];
+    striped?: boolean;
+    ref?: Ref<View>;
+};
+export type TableRowProps = Pick<TableProps, 'rowHeadings' | 'striped' | 'columnWidths'> & {
+    data: Item[];
+    index: number;
+};
+export {};

package/dist/components/DataTable/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/DateField/DateField.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode, RefObject } from 'react';
+import { TextInput } from 'react-native';
+export type DateFormat = {
+    day: string;
+    month: string;
+    year: string;
+};
+type Props = {
+    label: string;
+    value: DateFormat;
+    autoFocusNext?: boolean;
+    editable?: boolean;
+    error?: ReactNode;
+    fullWidth?: boolean;
+    hint?: ReactNode;
+    optional?: boolean;
+    onChange: (date: DateFormat) => void;
+    ref?: RefObject<TextInput>;
+    testID?: string;
+};
+export declare const DateField: ({ autoFocusNext, label, hint, error, optional, fullWidth, onChange, value, testID, editable, ref, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DateField/DateField.js

@@ -0,0 +1,68 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useRef } from 'react';
+import { TouchableWithoutFeedback, View } from 'react-native';
+import styled, { css } from '../../styled.native';
+import { mergeRefs, getText } from '../../utils';
+import { ErrorText } from '../ErrorText';
+import { FormGroup } from '../FormGroup';
+import { HintText } from '../HintText';
+import { LabelText } from '../LabelText';
+import { NumberInput } from '../NumberInput';
+import { Stack } from '../Stack';
+import { SubLabelText } from '../SubLabelText';
+const InlineFields = styled.View(({ stretch, theme: { core } }) => {
+    const margin = numToPx(core.space[1]);
+    return css `
+      margin-left: -${margin};
+      margin-right: -${margin};
+      flex-direction: row;
+      ${stretch ? '' : `width: 265px;`}
+    `;
+});
+const SubField = styled(Stack)(({ theme: { core } }) => {
+    const padding = numToPx(core.space[1]);
+    return css `
+    padding-right: ${padding};
+    padding-left: ${padding};
+  `;
+});
+const DayField = styled(SubField) `
+  width: 25%;
+`;
+const MonthField = styled(SubField) `
+  width: 25%;
+`;
+const YearField = styled(SubField) `
+  width: 50%;
+`;
+export const DateField = ({ autoFocusNext = false, label, hint, error, optional = false, fullWidth = false, onChange, value, testID, editable = true, ref, }) => {
+    const hasError = !!error;
+    const dayRef = useRef(null);
+    const monthRef = useRef(null);
+    const yearRef = useRef(null);
+    const nextFieldRef = {
+        day: monthRef,
+        month: yearRef,
+    };
+    const handleChange = (key) => (datePartValue) => {
+        onChange &&
+            onChange({
+                ...value,
+                [key]: datePartValue,
+            });
+        if (key !== 'year' && autoFocusNext) {
+            const nextField = nextFieldRef[key].current;
+            if (nextField && datePartValue.length === 2) {
+                nextField.focus();
+            }
+        }
+    };
+    const accessibilityLabel = (labelText) => [labelText, getText(hint), getText(error)].filter(Boolean).join(', ');
+    const focusRef = (internalRef) => () => {
+        if (internalRef.current) {
+            internalRef.current.focus();
+        }
+    };
+    return (_jsx(FormGroup, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [_jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }), _jsxs(InlineFields, { stretch: fullWidth, children: [_jsxs(DayField, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: focusRef(dayRef), accessible: false, children: _jsx(SubLabelText, { children: "Day" }) }), _jsx(NumberInput, { ref: mergeRefs(dayRef, ref), accessibilityLabel: accessibilityLabel('Day'), invalid: hasError, value: value.day, onChangeText: handleChange('day'), testID: testID, stretch: true, editable: editable })] }), _jsxs(MonthField, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: focusRef(monthRef), accessible: false, children: _jsx(SubLabelText, { children: "Month" }) }), _jsx(NumberInput, { ref: monthRef, accessibilityLabel: accessibilityLabel('Month'), invalid: hasError, value: value.month, onChangeText: handleChange('month'), testID: `${testID}-month`, stretch: true, editable: editable })] }), _jsxs(YearField, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: focusRef(yearRef), accessible: false, children: _jsx(SubLabelText, { children: "Year" }) }), _jsx(NumberInput, { ref: yearRef, accessibilityLabel: accessibilityLabel('Year'), invalid: hasError, value: value.year, onChangeText: handleChange('year'), testID: `${testID}-year`, stretch: true, editable: editable, maxLength: 4 })] })] })] }) }));
+};

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

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

package/dist/components/DateField/index.js

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

package/dist/components/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Dd, Dl } from './styled';
+type DescriptionListProps = ComponentProps<typeof Dl>;
+declare const DescriptionList: ({ children, ...rest }: DescriptionListProps) => import("react/jsx-runtime").JSX.Element;
+type DescriptionItemProps = ComponentProps<typeof Dd> & {
+    label: ReactNode;
+    index?: number;
+};
+declare const DescriptionItem: ({ label, children, index, ...rest }: DescriptionItemProps) => import("react/jsx-runtime").JSX.Element;
+export { DescriptionList, DescriptionItem };

package/dist/components/DescriptionList/DescriptionList.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, } from 'react';
+import { getValidChildren } from '../../utils';
+import { Dd, Dl, Dt } from './styled';
+const DescriptionList = ({ children, ...rest }) => {
+    const validChildren = getValidChildren(children);
+    return (_jsx(Dl, { ...rest, children: Children.map(validChildren, (child, index) => cloneElement(child, {
+            index,
+        })) }));
+};
+const DescriptionItem = ({ label, children, index, ...rest }) => (_jsxs(_Fragment, { children: [_jsx(Dt, { style: index === 0 ? { marginTop: 0 } : undefined, children: label }), _jsx(Dd, { ...rest, children: children })] }));
+export { DescriptionList, DescriptionItem };

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

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

package/dist/components/DescriptionList/index.js

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