@ovotech/element-native 5.5.0 → 5.6.0

package/dist/components/SelectField/Select.js

@@ -1,134 +1,34 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const element_core_1 = require("@ovotech/element-core");
 const lodash_groupby_1 = __importDefault(require("lodash.groupby"));
 const react_1 = require("react");
 const react_native_1 = require("react-native");
-const react_native_safe_area_context_1 = require("react-native-safe-area-context");
-const styled_native_1 = __importStar(require("../../styled.native"));
 const Icon_1 = require("../Icon");
 const P_1 = require("../P");
 const Strong_1 = require("../Strong");
-const SelectInput = styled_native_1.default.TouchableOpacity(({ theme, hasError }) => {
-    return (0, styled_native_1.css) `
-      flex-direction: row;
-      align-items: center;
-      background-color: transparent;
-      border-color: ${hasError
-        ? theme.input.color.borderError
-        : theme.input.color.border};
-      border-width: ${(0, element_core_1.numToPx)(theme.border.width.md)};
-      border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.sm)};
-      padding: ${(0, element_core_1.numToPx)(theme.space[200])};
-      padding-right: ${(0, element_core_1.numToPx)(theme.space[350])};
-      height: ${(0, element_core_1.numToPx)(theme.space[1100])};
-    `;
-});
-const DropdownWrapper = styled_native_1.default.TouchableOpacity(({ theme }) => (0, styled_native_1.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 = (0, styled_native_1.default)(react_native_safe_area_context_1.SafeAreaView)(({ theme }) => (0, styled_native_1.css) `
-    width: 95%;
-    max-height: 70%;
-    border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.sm)};
-    background-color: ${theme.color.surface.bright};
-  `);
-const SelectOption = styled_native_1.default.TouchableOpacity(({ theme, isLastOption }) => (0, styled_native_1.css) `
-    flex-direction: row;
-    align-items: center;
-    border-bottom-color: ${theme.color.input.borderDim};
-    border-bottom-width: ${isLastOption ? 0 : 1}px;
-    padding: 0 ${(0, element_core_1.numToPx)(theme.space[400])};
-  `);
-const Radio = styled_native_1.default.View(({ theme, isChecked }) => (0, styled_native_1.css) `
-    background-color: ${isChecked
-    ? theme.input.color.selectedTint
-    : 'transparent'};
-    width: ${(0, element_core_1.numToPx)(theme.space[600])};
-    height: ${(0, element_core_1.numToPx)(theme.space[600])};
-    margin-left: auto;
-    border-radius: ${(0, element_core_1.numToPx)(theme.space[600])};
-    border-width: ${(0, element_core_1.numToPx)(theme.border.width.md)};
-    border-color: ${theme.input.color[isChecked ? 'selected' : 'border']};
-  `);
-const RadioDot = styled_native_1.default.View(({ theme, isChecked }) => (0, styled_native_1.css) `
-    background-color: ${theme.input.color.selected};
-    position: absolute;
-    top: ${(0, element_core_1.numToPx)(theme.space[100])};
-    width: ${(0, element_core_1.numToPx)(theme.space[300])};
-    height: ${(0, element_core_1.numToPx)(theme.space[300])};
-    border-radius: ${(0, element_core_1.numToPx)(theme.space[300])};
-    align-self: center;
-    opacity: ${isChecked ? 1 : 0};
-  `);
-const StyledP = (0, styled_native_1.default)(P_1.P)(({ theme }) => (0, styled_native_1.css) `
-    margin-top: ${(0, element_core_1.numToPx)(theme.space[300])};
-    margin-bottom: ${(0, element_core_1.numToPx)(theme.space[300])};
-  `);
-const StyledCategory = (0, styled_native_1.default)(P_1.P)(({ theme }) => (0, styled_native_1.css) `
-    font-size: ${(0, element_core_1.numToPx)(theme.font.size.xs.mediaQuery.lg)};
-    color: ${theme.color.surface.onSurface};
-    background-color: ${theme.color.surface.surface};
-    padding: ${(0, element_core_1.numToPx)(theme.space[100])} ${(0, element_core_1.numToPx)(theme.space[400])};
-  `);
-const Select = ({ options = [], defaultSelected = { label: '', value: 'default' }, noOptionMessage = 'No option selected', onSelected = () => null, hasError = false, testID = 'select', ref, }) => {
+const styled_1 = require("./styled");
+const Select = ({ options = [], defaultSelected = { label: '', value: 'default' }, noOptionMessage = 'No option selected', onSelected = () => null, hasError = false, selected, size = 'medium', testID = 'select', ref, }) => {
     const [isOpen, setOpen] = (0, react_1.useState)(false);
-    const [selected, setSelected] = (0, react_1.useState)(defaultSelected);
+    const [selectedVal, setSelectedVal] = (0, react_1.useState)(defaultSelected);
+    const isSmall = size === 'small';
+    const iconName = `chevron-down${isSmall ? '-small' : ''}`;
     const height = react_native_1.Dimensions.get('window').height;
     const dropdownContainerMaxHeight = height * 0.7;
     const handleOptionPress = (val) => {
         onSelected(val);
         setOpen(false);
-        setSelected(val);
+        setSelectedVal(val);
     };
     const optionsByCategories = (0, lodash_groupby_1.default)(options, 'category');
     const requiredOption = {
         label: `-- ${noOptionMessage} --`,
         value: 'default',
     };
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(SelectInput, { testID: testID, hasError: hasError, onPress: () => setOpen(!isOpen), ref: ref, children: [(0, jsx_runtime_1.jsx)(P_1.P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { onPress: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { nestedScrollEnabled: true, testID: `${testID}-OptionsScrollView`, children: [(0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: () => handleOptionPress(requiredOption), children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: requiredOption.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === requiredOption.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(category => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [category !== 'undefined' ? ((0, jsx_runtime_1.jsx)(StyledCategory, { children: category })) : null, optionsByCategories[category].map((option, i) => ((0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: () => handleOptionPress(option), children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === option.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)))] }, category)))] }) }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(styled_1.SelectInput, { testID: testID, hasError: hasError, isSelected: selected, size: size, onPress: () => setOpen(!isOpen), ref: ref, children: [(0, jsx_runtime_1.jsx)(P_1.P, { style: { marginTop: 0, marginBottom: 0 }, children: selectedVal.value === 'default' ? '' : selectedVal.label }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: iconName, size: isSmall ? 16 : 20, style: { marginLeft: 'auto' } })] }), (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(styled_1.DropdownWrapper, { onPress: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(styled_1.DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { nestedScrollEnabled: true, testID: `${testID}-OptionsScrollView`, children: [(0, jsx_runtime_1.jsxs)(styled_1.SelectOption, { accessible: true, accessibilityRole: "radio", onPress: () => handleOptionPress(requiredOption), children: [(0, jsx_runtime_1.jsx)(styled_1.StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: requiredOption.label }) }), (0, jsx_runtime_1.jsx)(styled_1.Radio, { isChecked: selectedVal.value === requiredOption.value, children: (0, jsx_runtime_1.jsx)(styled_1.RadioDot, { isChecked: selectedVal.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(category => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [category !== 'undefined' ? ((0, jsx_runtime_1.jsx)(styled_1.StyledCategory, { children: category })) : null, optionsByCategories[category].map((option, i) => ((0, jsx_runtime_1.jsxs)(styled_1.SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: () => handleOptionPress(option), children: [(0, jsx_runtime_1.jsx)(styled_1.StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }), (0, jsx_runtime_1.jsx)(styled_1.Radio, { isChecked: selectedVal.value === option.value, children: (0, jsx_runtime_1.jsx)(styled_1.RadioDot, { isChecked: selectedVal.value === option.value }) })] }, option.label)))] }, category)))] }) }) }) })] }));
 };
 exports.Select = Select;

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

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

package/dist/components/SelectField/SelectField.js

@@ -16,7 +16,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const Field_1 = require("../Field");
 const Select_1 = require("./Select");
 const SelectField = (_a) => {
-    var { error, options, onSelected, noOptionMessage, defaultSelected, testID, ref } = _a, rest = __rest(_a, ["error", "options", "onSelected", "noOptionMessage", "defaultSelected", "testID", "ref"]);
-    return ((0, jsx_runtime_1.jsx)(Field_1.Field, Object.assign({ affixWidth: 20, error: error }, rest, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, { onSelected: onSelected, options: options, noOptionMessage: noOptionMessage, defaultSelected: defaultSelected, hasError: Boolean(error), testID: testID, ref: ref }) }) })));
+    var { error, options, onSelected, noOptionMessage, defaultSelected, size = 'medium', testID, ref } = _a, rest = __rest(_a, ["error", "options", "onSelected", "noOptionMessage", "defaultSelected", "size", "testID", "ref"]);
+    return ((0, jsx_runtime_1.jsx)(Field_1.Field, Object.assign({ affixWidth: 20, error: error }, rest, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, { onSelected: onSelected, options: options, noOptionMessage: noOptionMessage, defaultSelected: defaultSelected, hasError: Boolean(error), size: size, testID: testID, ref: ref }) })));
 };
 exports.SelectField = SelectField;