@totalsoft/rocket-ui
Version:
A set of reusable and composable React components built on top of Material UI core for developing fast and friendly web applications interfaces.
31 lines • 1.8 kB
JavaScript
import React, { useEffect, useState, useRef } from 'react';
import PropTypes from 'prop-types';
import { is } from 'ramda';
import { Checkbox, Tooltip } from '@mui/material';
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import CheckBoxIcon from '@mui/icons-material/CheckBox';
import { Option as BaseOption } from './DeprecatedAutocompleteStyles';
import Typography from '../../dataDisplay/Typography';
const Option = ({ optionLabel, createdLabel, selected, withCheckboxes, option, ...rest }) => {
const optionRef = useRef(undefined);
const [isOverflow, setIsOverflow] = useState(false);
const label = createdLabel ? `${createdLabel} "${optionLabel}"` : optionLabel;
useEffect(() => {
setIsOverflow(optionRef?.current?.scrollWidth > optionRef?.current?.clientWidth);
}, []);
return withCheckboxes ? (React.createElement("li", { ...rest },
React.createElement(Checkbox, { icon: React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: React.createElement(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }),
optionLabel)) : (React.createElement(Tooltip, { title: optionLabel, disableHoverListener: !isOverflow },
React.createElement("li", { ...rest, "aria-disabled": is(String, option) ? false : option?.isDisabled },
React.createElement(BaseOption, { ref: optionRef },
React.createElement(Typography, null, label)))));
};
Option.propTypes = {
optionLabel: PropTypes.string.isRequired,
selected: PropTypes.bool,
withCheckboxes: PropTypes.bool,
createdLabel: PropTypes.string,
option: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
};
export default Option;
//# sourceMappingURL=Option.js.map