@ovotech/element-native 4.1.3 → 4.1.4-canary-0ff2b3c-274

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/FilterSelect/FilterSelect.d.ts +3 -1
  2. package/dist/components/FilterSelect/FilterSelect.js +17 -8
  3. package/dist/esm/components/FilterSelect/FilterSelect.js +18 -9
  4. package/package.json +3 -3
package/dist/components/FilterSelect/FilterSelect.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  type Option = {
2
2
  label: string;
3
3
  value: string;
4
+ collapsedLabel?: string;
4
5
  };
5
6
  export type FilterSelect = {
6
7
  defaultSelected?: Option;
@@ -9,6 +10,7 @@ export type FilterSelect = {
9
10
  testID?: string;
10
11
  rightText?: string;
11
12
  leftText?: string;
13
+ dropdownDirection?: 'left' | 'right';
12
14
  };
13
- export declare const FilterSelect: ({ options, defaultSelected, onSelected, testID, rightText, leftText, }: FilterSelect) => JSX.Element;
15
+ export declare const FilterSelect: ({ options, defaultSelected, onSelected, testID, rightText, leftText, dropdownDirection, }: FilterSelect) => JSX.Element;
14
16
  export {};
package/dist/components/FilterSelect/FilterSelect.js CHANGED
@@ -55,11 +55,13 @@ var SelectOption = styled_native_1.default.TouchableOpacity(function (_a) {
55
55
  return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex-direction: row;\n align-items: center;\n padding: 0 ", ";\n "], ["\n flex-direction: row;\n align-items: center;\n padding: 0 ", ";\n "])), (0, element_core_1.numToPx)(core.space[2]));
56
56
  });
57
57
  var FilterSelect = function (_a) {
58
- var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.defaultSelected, defaultSelected = _c === void 0 ? { label: '', value: 'default' } : _c, _d = _a.onSelected, onSelected = _d === void 0 ? function () { return null; } : _d, _e = _a.testID, testID = _e === void 0 ? 'select' : _e, rightText = _a.rightText, leftText = _a.leftText;
58
+ var _b;
59
+ var _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.defaultSelected, defaultSelected = _d === void 0 ? { label: '', value: 'default' } : _d, _e = _a.onSelected, onSelected = _e === void 0 ? function () { return null; } : _e, _f = _a.testID, testID = _f === void 0 ? 'select' : _f, rightText = _a.rightText, leftText = _a.leftText, _g = _a.dropdownDirection, dropdownDirection = _g === void 0 ? 'right' : _g;
60
+ var theme = (0, styled_native_1.useTheme)();
59
61
  var selectRef = (0, react_1.useRef)(null);
60
- var _f = (0, react_1.useState)(false), isOpen = _f[0], setOpen = _f[1];
61
- var _g = (0, react_1.useState)(defaultSelected), selected = _g[0], setSelected = _g[1];
62
- var _h = (0, react_1.useState)(null), measure = _h[0], setMeasure = _h[1];
62
+ var _h = (0, react_1.useState)(false), isOpen = _h[0], setOpen = _h[1];
63
+ var _j = (0, react_1.useState)(defaultSelected), selected = _j[0], setSelected = _j[1];
64
+ var _k = (0, react_1.useState)(null), measure = _k[0], setMeasure = _k[1];
63
65
  var handleOptionPress = function (val) {
64
66
  onSelected(val);
65
67
  setOpen(false);
@@ -67,12 +69,19 @@ var FilterSelect = function (_a) {
67
69
  };
68
70
  return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row' }, children: [leftText ? (0, jsx_runtime_1.jsxs)(P_1.P, { children: [leftText, " "] }) : null, (0, jsx_runtime_1.jsxs)(SelectInput, { ref: selectRef, testID: testID, onPress: function () { return setOpen(!isOpen); }, onLayout: function () {
69
71
  var _a;
70
- (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (x, y) {
71
- setMeasure({ top: y - 12, left: x });
72
+ (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (x, y, width) {
73
+ setMeasure({
74
+ top: y - theme.core.space[3],
75
+ left: x,
76
+ right: x - (width + theme.core.space[3]),
77
+ });
72
78
  });
73
- }, children: [(0, jsx_runtime_1.jsx)(P_1.P, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: selected.value === 'default' ? '' : selected.label }) }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "caret-arrow-down", size: 14, style: { marginLeft: 2 } })] }, String(isOpen)), rightText ? (0, jsx_runtime_1.jsxs)(P_1.P, { children: [" ", rightText] }) : null, (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { style: {
79
+ }, children: [(0, jsx_runtime_1.jsx)(P_1.P, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: selected.value === 'default'
80
+ ? ''
81
+ : (_b = selected.collapsedLabel) !== null && _b !== void 0 ? _b : selected.label }) }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "caret-arrow-down", size: 14, style: { marginLeft: 2 } })] }, String(isOpen)), rightText ? (0, jsx_runtime_1.jsxs)(P_1.P, { children: [" ", rightText] }) : null, (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { style: {
74
82
  top: measure === null || measure === void 0 ? void 0 : measure.top,
75
- left: measure === null || measure === void 0 ? void 0 : measure.left,
83
+ left: dropdownDirection === 'right' ? measure === null || measure === void 0 ? void 0 : measure.left : undefined,
84
+ right: dropdownDirection === 'left' ? measure === null || measure === void 0 ? void 0 : measure.right : undefined,
76
85
  }, children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { nestedScrollEnabled: true, children: options.map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SelectOption, { accessible: true, accessibilityRole: "button", onPress: function () { return handleOptionPress(option); }, children: (0, jsx_runtime_1.jsx)(Margin_1.Margin, { vertical: 3, children: (0, jsx_runtime_1.jsx)(P_1.P, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }) }) }), i === options.length - 1 ? null : ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { type: "differentiated" }))] }, option.label)); }) }) }) }) })] }));
77
86
  };
78
87
  exports.FilterSelect = FilterSelect;
package/dist/esm/components/FilterSelect/FilterSelect.js CHANGED
@@ -6,7 +6,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
6
6
  import { numToPx } from '@ovotech/element-core';
7
7
  import { Fragment, useRef, useState } from 'react';
8
8
  import { Modal, ScrollView, View } from 'react-native';
9
- import styled, { css } from '../../styled.native';
9
+ import styled, { css, useTheme } from '../../styled.native';
10
10
  import { Divider } from '../Divider';
11
11
  import { Icon } from '../Icon';
12
12
  import { Margin } from '../Margin';
@@ -29,11 +29,13 @@ var SelectOption = styled.TouchableOpacity(function (_a) {
29
29
  return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex-direction: row;\n align-items: center;\n padding: 0 ", ";\n "], ["\n flex-direction: row;\n align-items: center;\n padding: 0 ", ";\n "])), numToPx(core.space[2]));
30
30
  });
31
31
  export var FilterSelect = function (_a) {
32
- var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.defaultSelected, defaultSelected = _c === void 0 ? { label: '', value: 'default' } : _c, _d = _a.onSelected, onSelected = _d === void 0 ? function () { return null; } : _d, _e = _a.testID, testID = _e === void 0 ? 'select' : _e, rightText = _a.rightText, leftText = _a.leftText;
32
+ var _b;
33
+ var _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.defaultSelected, defaultSelected = _d === void 0 ? { label: '', value: 'default' } : _d, _e = _a.onSelected, onSelected = _e === void 0 ? function () { return null; } : _e, _f = _a.testID, testID = _f === void 0 ? 'select' : _f, rightText = _a.rightText, leftText = _a.leftText, _g = _a.dropdownDirection, dropdownDirection = _g === void 0 ? 'right' : _g;
34
+ var theme = useTheme();
33
35
  var selectRef = useRef(null);
34
- var _f = useState(false), isOpen = _f[0], setOpen = _f[1];
35
- var _g = useState(defaultSelected), selected = _g[0], setSelected = _g[1];
36
- var _h = useState(null), measure = _h[0], setMeasure = _h[1];
36
+ var _h = useState(false), isOpen = _h[0], setOpen = _h[1];
37
+ var _j = useState(defaultSelected), selected = _j[0], setSelected = _j[1];
38
+ var _k = useState(null), measure = _k[0], setMeasure = _k[1];
37
39
  var handleOptionPress = function (val) {
38
40
  onSelected(val);
39
41
  setOpen(false);
@@ -41,12 +43,19 @@ export var FilterSelect = function (_a) {
41
43
  };
42
44
  return (_jsxs(View, { style: { flexDirection: 'row' }, children: [leftText ? _jsxs(P, { children: [leftText, " "] }) : null, _jsxs(SelectInput, { ref: selectRef, testID: testID, onPress: function () { return setOpen(!isOpen); }, onLayout: function () {
43
45
  var _a;
44
- (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (x, y) {
45
- setMeasure({ top: y - 12, left: x });
46
+ (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (x, y, width) {
47
+ setMeasure({
48
+ top: y - theme.core.space[3],
49
+ left: x,
50
+ right: x - (width + theme.core.space[3]),
51
+ });
46
52
  });
47
- }, children: [_jsx(P, { children: _jsx(Strong, { children: selected.value === 'default' ? '' : 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: function () { return setOpen(false); }, children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, { style: {
53
+ }, children: [_jsx(P, { children: _jsx(Strong, { children: selected.value === 'default'
54
+ ? ''
55
+ : (_b = selected.collapsedLabel) !== null && _b !== void 0 ? _b : 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: function () { return setOpen(false); }, children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, { style: {
48
56
  top: measure === null || measure === void 0 ? void 0 : measure.top,
49
- left: measure === null || measure === void 0 ? void 0 : measure.left,
57
+ left: dropdownDirection === 'right' ? measure === null || measure === void 0 ? void 0 : measure.left : undefined,
58
+ right: dropdownDirection === 'left' ? measure === null || measure === void 0 ? void 0 : measure.right : undefined,
50
59
  }, children: _jsx(ScrollView, { nestedScrollEnabled: true, children: options.map(function (option, i) { return (_jsxs(Fragment, { children: [_jsx(SelectOption, { accessible: true, accessibilityRole: "button", onPress: function () { return 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)); }) }) }) }) })] }));
51
60
  };
52
61
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ovotech/element-native",
3
- "version": "4.1.3",
3
+ "version": "4.1.4-canary-0ff2b3c-274",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -14,10 +14,10 @@
14
14
  },
15
15
  "dependencies": {
16
16
  "@backpackapp-io/react-native-toast": "^0.10.0",
17
+ "@ovotech/element-core": "3.0.1-canary-0ff2b3c-274",
17
18
  "deepmerge": "^4.2.2",
18
19
  "lodash.groupby": "^4.6.0",
19
- "react-native-reanimated-carousel": "^3.5.1",
20
- "@ovotech/element-core": "3.0.1"
20
+ "react-native-reanimated-carousel": "^3.5.1"
21
21
  },
22
22
  "devDependencies": {
23
23
  "@babel/core": "^7.11.5",