@talixo-ds/options-input 0.0.22 → 0.0.23
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.
|
@@ -3,7 +3,7 @@ import Tooltip from '@mui/material/Tooltip';
|
|
|
3
3
|
import Box from '@mui/material/Box';
|
|
4
4
|
import Typography from '@mui/material/Typography';
|
|
5
5
|
import * as MuiIcons from '@mui/icons-material';
|
|
6
|
-
import * as DesignSystemIcons from '@talixo-ds/
|
|
6
|
+
import * as DesignSystemIcons from '@talixo-ds/icons';
|
|
7
7
|
import { MinMaxValueLabel } from './min-max-value-label';
|
|
8
8
|
const OptionsInputContentItem = ({ item: { quantity, details, label, max, min, icon }, displayMinMax = false, disabled = false, }) => {
|
|
9
9
|
const Icon = DesignSystemIcons[icon] || MuiIcons[icon];
|
|
@@ -11,36 +11,50 @@ import Button from '@mui/material/Button';
|
|
|
11
11
|
import AddIcon from '@mui/icons-material/Add';
|
|
12
12
|
import RemoveIcon from '@mui/icons-material/Remove';
|
|
13
13
|
import * as MuiIcons from '@mui/icons-material';
|
|
14
|
-
import * as DesignSystemIcons from '@talixo-ds/
|
|
14
|
+
import * as DesignSystemIcons from '@talixo-ds/icons';
|
|
15
15
|
import { MinMaxValueLabel } from './min-max-value-label';
|
|
16
16
|
const OptionsInputDropdownItem = ({ item: { id, quantity = 0, label, max, min, icon, details, inputQuantity }, onChange, onBlur, index, displayMinMax, }) => {
|
|
17
17
|
const [shouldDisplayFullDetails, setShouldDisplayFullDetails] = useState(false);
|
|
18
18
|
const Icon = DesignSystemIcons[icon] || MuiIcons[icon];
|
|
19
|
-
return (_jsxs(_Fragment, {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
19
|
+
return (_jsxs(_Fragment, {
|
|
20
|
+
children: [!!index && (_jsx(Divider, { sx: { color: (theme) => theme.palette.primary.main } })), _jsxs(ListItem, {
|
|
21
|
+
sx: {
|
|
22
|
+
display: 'flex',
|
|
23
|
+
justifyContent: 'space-between',
|
|
24
|
+
}, className: classNames('options-input__dropdown-item', {
|
|
25
|
+
'options-input__dropdown-item--empty': !quantity,
|
|
26
|
+
}), children: [_jsxs(Box, {
|
|
27
|
+
display: "flex", alignItems: "center", children: [_jsx(Icon, { fontSize: "small", color: "black" }), _jsx(TextField, {
|
|
28
|
+
onChange: ({ target }) => onChange(id, target.value), onBlur: onBlur, value: inputQuantity, variant: "standard", inputProps: {
|
|
29
|
+
inputMode: 'numeric',
|
|
30
|
+
pattern: '-?[0-9]*',
|
|
31
|
+
style: {
|
|
32
|
+
textAlign: 'center',
|
|
33
|
+
},
|
|
34
|
+
'data-testid': 'dropdown-item-input',
|
|
35
|
+
},
|
|
36
|
+
// eslint-disable-next-line react/jsx-no-duplicate-props
|
|
37
|
+
InputProps: { disableUnderline: true }, className: "options-input__dropdown-item-input"
|
|
38
|
+
}), _jsxs(Box, {
|
|
39
|
+
display: "flex", flexDirection: "column", justifyContent: "center", paddingRight: 2, paddingLeft: 1, minWidth: "5rem", children: [_jsx(Typography, { variant: "caption", fontWeight: 600, fontSize: 13, sx: { my: 0 }, color: "black", children: label || id }), details && (_jsx(Box, {
|
|
40
|
+
position: "relative", height: "1rem", "data-testid": "option-details-container", onMouseEnter: () => setShouldDisplayFullDetails(true), onMouseLeave: () => setShouldDisplayFullDetails(false), children: _jsx(Typography, {
|
|
41
|
+
variant: "caption", color: "gray", sx: {
|
|
42
|
+
my: 0,
|
|
43
|
+
zIndex: 10000,
|
|
44
|
+
position: 'fixed',
|
|
45
|
+
...(shouldDisplayFullDetails && {
|
|
46
|
+
backgroundColor: quantity ? '#ffffff' : '#eeeeee',
|
|
47
|
+
border: 'thin solid #d3d3d3',
|
|
48
|
+
}),
|
|
49
|
+
}, "data-testid": "option-details", children: details?.length <= 15 || shouldDisplayFullDetails
|
|
50
|
+
? details
|
|
51
|
+
: `${details?.slice(0, 15)}...`
|
|
52
|
+
})
|
|
53
|
+
})), displayMinMax && (_jsx(MinMaxValueLabel, { min: min, max: max, color: "gray" }))]
|
|
54
|
+
})]
|
|
55
|
+
}), _jsxs(ButtonGroup, { variant: "outlined", size: "small", className: "options-input__dropdown-item-buttons", children: [_jsx(Button, { onClick: () => onChange(id, quantity + 1), disabled: quantity === max, className: "options-input__dropdown-item-button", role: "button", color: "primary", children: _jsx(AddIcon, { sx: { color: 'primary' } }) }), _jsx(Button, { onClick: () => onChange(id, quantity - 1), disabled: quantity === min, className: "options-input__dropdown-item-button", role: "button", color: "primary", children: _jsx(RemoveIcon, { sx: { color: 'primary' } }) })] })]
|
|
56
|
+
})]
|
|
57
|
+
}));
|
|
44
58
|
};
|
|
45
59
|
export default OptionsInputDropdownItem;
|
|
46
60
|
//# sourceMappingURL=options-input-dropdown-item.js.map
|
package/dist/options-input.js
CHANGED
|
@@ -8,7 +8,7 @@ import ClickAwayListener from '@mui/material/ClickAwayListener';
|
|
|
8
8
|
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
|
9
9
|
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
|
|
10
10
|
import * as MuiIcons from '@mui/icons-material';
|
|
11
|
-
import * as DesignSystemIcons from '@talixo-ds/
|
|
11
|
+
import * as DesignSystemIcons from '@talixo-ds/icons';
|
|
12
12
|
import OptionsInputContentItem from './components/options-input-content-item';
|
|
13
13
|
import OptionsInputDropdownItem from './components/options-input-dropdown-item';
|
|
14
14
|
import './styles.scss';
|
|
@@ -86,31 +86,45 @@ export const OptionsInput = ({ options, onChange, onFocus, onBlur, persistentOpt
|
|
|
86
86
|
: maxQuantity,
|
|
87
87
|
};
|
|
88
88
|
}));
|
|
89
|
-
return (_jsxs(_Fragment, {
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
89
|
+
return (_jsxs(_Fragment, {
|
|
90
|
+
children: [_jsxs(Box, {
|
|
91
|
+
id: id, onClick: toggleInput, onBlur: onInputBlur, onFocus: onInputFocus, className: classNames('options-input__container', {
|
|
92
|
+
'options-input__container--open': open,
|
|
93
|
+
'options-input__container--disabled': disabled,
|
|
94
|
+
'options-input__container--read-only': readOnly,
|
|
95
|
+
[className]: !!className,
|
|
96
|
+
}), sx: [
|
|
97
|
+
{ '&:hover': { borderColor: '#d3d3d3' } },
|
|
98
|
+
...(Array.isArray(containerSx) ? containerSx : [containerSx]),
|
|
99
|
+
open && {
|
|
100
|
+
borderColor: (theme) => theme.palette.primary.main,
|
|
101
|
+
'&:hover': { borderColor: (theme) => theme.palette.primary.main },
|
|
102
|
+
},
|
|
103
|
+
], "data-testid": rest['data-testid'] || 'options-input-container', tabIndex: 0, children: [_jsx(Box, {
|
|
104
|
+
display: "flex", gap: itemsGap, children: currentOptions
|
|
105
|
+
.filter(({ quantity, id: optionId, icon }) => !!(MuiIcons?.[icon] || DesignSystemIcons?.[icon]) &&
|
|
106
|
+
(quantity !== 0 || persistentOptions.includes(optionId)))
|
|
107
|
+
.map((option) => (_jsx(OptionsInputContentItem, { item: option, disabled: disabled, displayMinMax: displayMinMax }, option.id)))
|
|
108
|
+
}), !readOnly &&
|
|
109
|
+
(open ? (_jsx(KeyboardArrowUpIcon, { color: "primary" })) : (_jsx(KeyboardArrowDownIcon, {
|
|
110
|
+
sx: {
|
|
111
|
+
color: (theme) => disabled
|
|
112
|
+
? theme.palette.grey[400]
|
|
113
|
+
: theme.palette.action.focus,
|
|
114
|
+
}
|
|
115
|
+
})))]
|
|
116
|
+
}), _jsx(ClickAwayListener, {
|
|
117
|
+
onClickAway: () => open && setAnchorEl(undefined), children: _jsx(Popper, {
|
|
118
|
+
open: open, placement: "bottom-start", anchorEl: anchorEl, sx: (theme) => ({ zIndex: theme.zIndex.modal }), children: _jsx(List, {
|
|
119
|
+
disablePadding: true, "data-testid": "options-dropdown-list", className: "options-input__dropdown-items-list", sx: {
|
|
120
|
+
bgcolor: 'Background',
|
|
121
|
+
border: (theme) => `thin solid ${theme.palette.primary.main}`,
|
|
122
|
+
}, children: currentOptions
|
|
123
|
+
.filter(({ icon }) => !!(MuiIcons?.[icon] || DesignSystemIcons?.[icon]))
|
|
124
|
+
.map((option, index) => (_jsx(OptionsInputDropdownItem, { item: option, onBlur: onDropdownItemBlur(option.id), onChange: onValueChange, index: index, displayMinMax: displayMinMax }, option.id)))
|
|
125
|
+
})
|
|
126
|
+
})
|
|
127
|
+
})]
|
|
128
|
+
}));
|
|
115
129
|
};
|
|
116
130
|
//# sourceMappingURL=options-input.js.map
|