chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
111 lines (107 loc) • 3.18 kB
JavaScript
/**
* @component
*/
import PropTypes from 'prop-types';
import React, { useContext } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import RadioButton from '../../react-chayns-radiobutton/component/RadioButton';
import Tooltip from '../../react-chayns-tooltip/component/Tooltip';
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;
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 && /*#__PURE__*/React.createElement(TransitionGroup, null, checked && /*#__PURE__*/React.createElement(CSSTransition, {
key: "children",
classNames: "react-fade",
timeout: {
enter: 500,
exit: 500
}
}, /*#__PURE__*/React.createElement("div", {
className: "selectlist__selectitem"
}, 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