chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
125 lines (121 loc) • 5.05 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _reactTransitionState = require("react-transition-state");
var _clsx = _interopRequireDefault(require("clsx"));
var _RadioButton = _interopRequireDefault(require("../../react-chayns-radiobutton/component/RadioButton"));
var _Tooltip = _interopRequireDefault(require("../../react-chayns-tooltip/component/Tooltip"));
var _mapStatusToClass = require("../../utils/mapStatusToClass");
var _selectListContext = _interopRequireDefault(require("./selectListContext"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* @component
*/
/**
* 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
} = (0, _react.useContext)(_selectListContext.default);
const handleChange = () => {
if (changeListItem) {
changeListItem(id, value);
}
};
const checked = id === selectListSelectedId;
const [{
status,
isMounted
}, toggle] = (0, _reactTransitionState.useTransitionState)({
timeout: 500,
mountOnEnter: true,
unmountOnExit: true,
preEnter: true
});
(0, _react.useEffect)(() => {
toggle(checked);
}, [checked, toggle]);
return /*#__PURE__*/_react.default.createElement("div", {
key: id,
className: className
}, tooltipProps ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, tooltipProps, /*#__PURE__*/_react.default.createElement(_RadioButton.default, {
style: {
display: 'inline'
},
id: htmlId,
name: selectListId,
checked: checked,
onChange: handleChange,
disabled: disabled
}, name)) : /*#__PURE__*/_react.default.createElement(_RadioButton.default, {
id: htmlId,
name: selectListId,
checked: checked,
onChange: handleChange,
disabled: disabled
}, name), children && isMounted && /*#__PURE__*/_react.default.createElement("div", {
className: (0, _clsx.default)('selectlist__selectitem', (0, _mapStatusToClass.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.default.number,
/**
* The html id which will be used for the input of the radio button
*/
htmlId: _propTypes.default.string,
/**
* A classname string that will be applied to the container element.
*/
className: _propTypes.default.string,
/**
* Disables any user interaction and renders the `SelectItem` in a disabled
* style.
*/
disabled: _propTypes.default.bool,
/**
* The items content that will be revealed when it is selected.
*/
children: _propTypes.default.node,
/**
* The name of the `SelectItem` that is shown as a label next to its radio
* button.
*/
name: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
/**
* Any additional info for the item.
*/
value: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array]),
/**
* When specified, a `ToolTip`-component will wrap the radio button and these
* props will be forwarded.
*/
tooltipProps: _propTypes.default.object // eslint-disable-line react/forbid-prop-types
};
SelectListItem.displayName = 'SelectItem';
var _default = SelectListItem;
exports.default = _default;
//# sourceMappingURL=SelectItem.js.map