@talixo-ds/options-input 1.0.1 → 1.0.3

package/src/components/options-input-dropdown-item.tsx

@@ -1,148 +1,143 @@
-import React, { useState } from 'react';
-import classNames from 'classnames';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import ButtonGroup from '@mui/material/ButtonGroup';
-import Divider from '@mui/material/Divider';
-import TextField from '@mui/material/TextField';
-import ListItem from '@mui/material/ListItem';
-import Button from '@mui/material/Button';
-import AddIcon from '@mui/icons-material/Add';
-import RemoveIcon from '@mui/icons-material/Remove';
-import * as MuiIcons from '@mui/icons-material';
-import * as DesignSystemIcons from '@talixo-ds/icons';
-import { MinMaxValueLabel } from './min-max-value-label';
-import { OptionsInputOption } from '../types';
+import React, { useState } from "react";
+import classNames from "classnames";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import Divider from "@mui/material/Divider";
+import TextField from "@mui/material/TextField";
+import ListItem from "@mui/material/ListItem";
+import Button from "@mui/material/Button";
+import AddIcon from "@mui/icons-material/Add";
+import RemoveIcon from "@mui/icons-material/Remove";
+import * as DesignSystemIcons from "@talixo-ds/icons";
+import { MinMaxValueLabel } from "./min-max-value-label";
+import { capitalize } from "../utils";
+import type { OptionsInputOption } from "../types";
 
 export type OptionsInputDropdownItemProps = {
-  item: OptionsInputOption;
-  onBlur: () => void;
-  onChange: (id: string, value: number | string) => void;
-  index: number;
-  displayMinMax?: boolean;
+	item: OptionsInputOption;
+	onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+	onChange: (id: string, value: number | string) => void;
+	index: number;
+	displayMinMax?: boolean;
 };
 
 const OptionsInputDropdownItem = ({
-  item: { id, quantity = 0, label, max, min, icon, details, inputQuantity },
-  onChange,
-  onBlur,
-  index,
-  displayMinMax,
+	item: { id, quantity = 0, label, max, min, icon, details, inputQuantity },
+	onChange,
+	onBlur,
+	index,
+	displayMinMax
 }: OptionsInputDropdownItemProps) => {
-  const [shouldDisplayFullDetails, setShouldDisplayFullDetails] =
-    useState<boolean>(false);
-  const Icon = DesignSystemIcons[icon] || MuiIcons[icon];
+	const [shouldDisplayFullDetails, setShouldDisplayFullDetails] = useState<boolean>(false);
+	const Icon = DesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] || null;
 
-  return (
-    <>
-      {!!index && (
-        <Divider sx={{ color: (theme) => theme.palette.primary.main }} />
-      )}
-      <ListItem
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-        }}
-        className={classNames('options-input__dropdown-item', {
-          'options-input__dropdown-item--empty': !quantity,
-        })}
-      >
-        <Box display="flex" alignItems="center">
-          <Icon fontSize="small" color="black" />
-          <TextField
-            onChange={({ target }) => onChange(id, target.value)}
-            onBlur={onBlur}
-            value={inputQuantity}
-            variant="standard"
-            inputProps={{
-              inputMode: 'numeric',
-              pattern: '-?[0-9]*',
-              style: {
-                textAlign: 'center',
-              },
-              'data-testid': 'dropdown-item-input',
-            }}
-            // eslint-disable-next-line react/jsx-no-duplicate-props
-            InputProps={{ disableUnderline: true }}
-            className="options-input__dropdown-item-input"
-          />
-          <Box
-            display="flex"
-            flexDirection="column"
-            justifyContent="center"
-            paddingRight={2}
-            paddingLeft={1}
-            minWidth="5rem"
-          >
-            <Typography
-              variant="caption"
-              fontWeight={600}
-              fontSize={13}
-              sx={{ my: 0 }}
-              color="black"
-            >
-              {label || id}
-            </Typography>
-            {details && (
-              <Box
-                position="relative"
-                height="1rem"
-                data-testid="option-details-container"
-                onMouseEnter={() => setShouldDisplayFullDetails(true)}
-                onMouseLeave={() => setShouldDisplayFullDetails(false)}
-              >
-                <Typography
-                  variant="caption"
-                  color="gray"
-                  sx={{
-                    my: 0,
-                    zIndex: 10000,
-                    position: 'fixed',
-                    ...(shouldDisplayFullDetails && {
-                      backgroundColor: quantity ? '#ffffff' : '#eeeeee',
-                      border: 'thin solid #d3d3d3',
-                    }),
-                  }}
-                  data-testid="option-details"
-                >
-                  {details?.length <= 15 || shouldDisplayFullDetails
-                    ? details
-                    : `${details?.slice(0, 15)}...`}
-                </Typography>
-              </Box>
-            )}
-            {displayMinMax && (
-              <MinMaxValueLabel min={min} max={max} color="gray" />
-            )}
-          </Box>
-        </Box>
-        <ButtonGroup
-          variant="outlined"
-          size="small"
-          className="options-input__dropdown-item-buttons"
-        >
-          <Button
-            onClick={() => onChange(id, quantity + 1)}
-            disabled={quantity === max}
-            className="options-input__dropdown-item-button"
-            role="button"
-            color="primary"
-          >
-            <AddIcon sx={{ color: 'primary' }} />
-          </Button>
-          <Button
-            onClick={() => onChange(id, quantity - 1)}
-            disabled={quantity === min}
-            className="options-input__dropdown-item-button"
-            role="button"
-            color="primary"
-          >
-            <RemoveIcon sx={{ color: 'primary' }} />
-          </Button>
-        </ButtonGroup>
-      </ListItem>
-    </>
-  );
+	return (
+		<>
+			{!!index && <Divider sx={{ color: (theme) => theme.palette.primary.main }} />}
+			<ListItem
+				sx={{
+					display: "flex",
+					justifyContent: "space-between"
+				}}
+				className={classNames("options-input__dropdown-item", {
+					"options-input__dropdown-item--empty": !quantity
+				})}
+			>
+				<Box display="flex" alignItems="center">
+					<Icon fontSize="small" sx={{ color: "black" }} />
+					<TextField
+						onChange={({ target }) => onChange(id, target.value)}
+						onBlur={onBlur}
+						value={inputQuantity}
+						variant="standard"
+						inputProps={{
+							inputMode: "numeric",
+							pattern: "-?[0-9]*",
+							style: {
+								textAlign: "center"
+							},
+							"data-testid": "dropdown-item-input"
+						}}
+						// eslint-disable-next-line react/jsx-no-duplicate-props
+						InputProps={{ disableUnderline: true }}
+						className="options-input__dropdown-item-input"
+					/>
+					<Box
+						display="flex"
+						flexDirection="column"
+						justifyContent="center"
+						paddingRight={2}
+						paddingLeft={1}
+						minWidth="5rem"
+					>
+						<Typography
+							variant="caption"
+							fontWeight={600}
+							fontSize={13}
+							sx={{ my: 0 }}
+							color="black"
+						>
+							{label || id}
+						</Typography>
+						{details && (
+							<Box
+								position="relative"
+								height="1rem"
+								data-testid="option-details-container"
+								onMouseEnter={() => setShouldDisplayFullDetails(true)}
+								onMouseLeave={() => setShouldDisplayFullDetails(false)}
+							>
+								<Typography
+									variant="caption"
+									color="gray"
+									sx={{
+										my: 0,
+										zIndex: 10000,
+										position: "fixed",
+										...(shouldDisplayFullDetails && {
+											backgroundColor: quantity ? "#ffffff" : "#eeeeee",
+											border: "thin solid #d3d3d3"
+										})
+									}}
+									data-testid="option-details"
+								>
+									{details?.length <= 15 || shouldDisplayFullDetails
+										? details
+										: `${details?.slice(0, 15)}...`}
+								</Typography>
+							</Box>
+						)}
+						{displayMinMax && <MinMaxValueLabel min={min} max={max} color="gray" />}
+					</Box>
+				</Box>
+				<ButtonGroup
+					variant="outlined"
+					size="small"
+					className="options-input__dropdown-item-buttons"
+				>
+					<Button
+						onClick={() => onChange(id, quantity + 1)}
+						disabled={quantity === max}
+						className="options-input__dropdown-item-button"
+						role="button"
+						color="primary"
+					>
+						<AddIcon sx={{ color: "primary" }} />
+					</Button>
+					<Button
+						onClick={() => onChange(id, quantity - 1)}
+						disabled={quantity === min}
+						className="options-input__dropdown-item-button"
+						role="button"
+						color="primary"
+					>
+						<RemoveIcon sx={{ color: "primary" }} />
+					</Button>
+				</ButtonGroup>
+			</ListItem>
+		</>
+	);
 };
 
 export default OptionsInputDropdownItem;