chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
118 lines (114 loc) • 3.33 kB
JavaScript
/**
* @component
*/
import PropTypes from 'prop-types';
import React, { useContext, useEffect } from 'react';
import { useTransitionState } from 'react-transition-state';
import clsx from 'clsx';
import RadioButton from '../../react-chayns-radiobutton/component/RadioButton';
import Tooltip from '../../react-chayns-tooltip/component/Tooltip';
import { mapStatusToClass } from '../../utils/mapStatusToClass';
import SelectListContext from './selectListContext';
/**
* A radio button that expands its content when selected. Should be used inside
* of a `SelectList`.
*/
const SelectListItem = _ref => {
let {
children,
id,
htmlId,
value,
className,
tooltipProps,
disabled = false,
name = ''
} = _ref;
const {
selectListSelectedId,
changeListItem,
selectListId
} = useContext(SelectListContext);
const handleChange = () => {
if (changeListItem) {
changeListItem(id, value);
}
};
const checked = id === selectListSelectedId;
const [{
status,
isMounted
}, toggle] = useTransitionState({
timeout: 500,
mountOnEnter: true,
unmountOnExit: true,
preEnter: true
});
useEffect(() => {
toggle(checked);
}, [checked, toggle]);
return /*#__PURE__*/React.createElement("div", {
key: id,
className: className
}, tooltipProps ? /*#__PURE__*/React.createElement(Tooltip, tooltipProps, /*#__PURE__*/React.createElement(RadioButton, {
style: {
display: 'inline'
},
id: htmlId,
name: selectListId,
checked: checked,
onChange: handleChange,
disabled: disabled
}, name)) : /*#__PURE__*/React.createElement(RadioButton, {
id: htmlId,
name: selectListId,
checked: checked,
onChange: handleChange,
disabled: disabled
}, name), children && isMounted && /*#__PURE__*/React.createElement("div", {
className: clsx('selectlist__selectitem', mapStatusToClass(status, 'react-fade'))
}, children));
};
SelectListItem.propTypes = {
/**
* The select item id. It identifies the `SelectItem` for the
* `defaultValue`- and `value`-props of the `SelectList`-component and will
* be given as the first argument to the `onChange`-callback of the
* `SelectList`-component.
*/
id: PropTypes.number,
/**
* The html id which will be used for the input of the radio button
*/
htmlId: PropTypes.string,
/**
* A classname string that will be applied to the container element.
*/
className: PropTypes.string,
/**
* Disables any user interaction and renders the `SelectItem` in a disabled
* style.
*/
disabled: PropTypes.bool,
/**
* The items content that will be revealed when it is selected.
*/
children: PropTypes.node,
/**
* The name of the `SelectItem` that is shown as a label next to its radio
* button.
*/
name: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/**
* Any additional info for the item.
*/
value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
/**
* When specified, a `ToolTip`-component will wrap the radio button and these
* props will be forwarded.
*/
tooltipProps: PropTypes.object // eslint-disable-line react/forbid-prop-types
};
SelectListItem.displayName = 'SelectItem';
export default SelectListItem;
//# sourceMappingURL=SelectItem.js.map