chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
150 lines (147 loc) • 5.74 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _ExpandableContent = _interopRequireDefault(require("../../../react-chayns-expandable_content/component/ExpandableContent"));
var _connectExpandableContext = _interopRequireDefault(require("./connectExpandableContext"));
var _ExpandableContext = _interopRequireDefault(require("./ExpandableContext"));
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; }
let maxId = 1;
function getId() {
const id = maxId;
maxId += 1;
return id;
}
class AbstractExpandableListItem extends _react.PureComponent {
constructor(props) {
super(props);
this.id = getId();
this.onToggle = this.onToggle.bind(this);
this.onClose = this.onClose.bind(this);
this.onOpen = this.onOpen.bind(this);
/* Improve update-performance */
this.precreated = {
true: {
onOpen: this.onOpen,
onClose: this.onClose,
onToggle: this.onToggle,
open: true
},
false: {
onOpen: this.onOpen,
onClose: this.onClose,
onToggle: this.onToggle,
open: false
}
};
}
componentDidMount() {
const {
onOpen,
defaultOpen
} = this.props;
if (onOpen && defaultOpen) onOpen(this.id);
}
componentDidUpdate(prevProps) {
const {
open: openIds,
openProp
} = this.props;
const prevOpen = prevProps.openProp !== null ? prevProps.openProp : prevProps.open && prevProps.open.indexOf && prevProps.open.indexOf(this.id) !== -1;
const open = openProp !== null ? openProp : openIds && openIds.indexOf && openIds.indexOf(this.id) !== -1;
if (prevOpen !== open && openProp === null) {
if (open) {
this.onOpen();
} else {
this.onClose();
}
}
}
onToggle() {
const {
openProp,
onToggle
} = this.props;
if (openProp !== null) {
if (openProp) {
this.onClose();
} else {
this.onOpen();
}
}
onToggle(this.id);
}
onOpen() {
const {
onOpenProp
} = this.props;
if (onOpenProp) onOpenProp(this.id);
}
onClose() {
const {
onCloseProp
} = this.props;
if (onCloseProp) onCloseProp(this.id);
}
render() {
const {
header,
children,
className,
clickable,
open: openIds,
noContentClass,
openProp,
style
} = this.props;
const open = openProp !== null ? openProp : openIds && openIds.indexOf && openIds.indexOf(this.id) !== -1;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _clsx.default)('list-item', className, open && 'list-item--expanded', clickable && 'list-item--clickable'),
style: style
}, /*#__PURE__*/_react.default.createElement(_ExpandableContext.default.Provider, {
value: this.precreated[open]
}, header, children && /*#__PURE__*/_react.default.createElement(_ExpandableContent.default, {
open: open,
style: style ? style.body : null
}, /*#__PURE__*/_react.default.createElement("div", {
className: !noContentClass ? 'list-item__content' : ""
}, children))));
}
}
AbstractExpandableListItem.propTypes = {
onToggle: _propTypes.default.func.isRequired,
open: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.bool]),
children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]),
header: _propTypes.default.node.isRequired,
onOpenProp: _propTypes.default.func,
onCloseProp: _propTypes.default.func,
className: _propTypes.default.string,
clickable: _propTypes.default.bool,
noContentClass: _propTypes.default.bool,
openProp: _propTypes.default.bool,
// eslint-disable-next-line react/forbid-prop-types
style: _propTypes.default.object,
defaultOpen: _propTypes.default.bool,
onOpen: _propTypes.default.func
};
AbstractExpandableListItem.defaultProps = {
open: false,
children: null,
className: '',
clickable: false,
noContentClass: false,
openProp: null,
style: null,
onOpenProp: null,
onCloseProp: null,
defaultOpen: false,
onOpen: null
};
AbstractExpandableListItem.displayName = 'AbstractExpandableListItem';
var _default = (0, _connectExpandableContext.default)(AbstractExpandableListItem);
exports.default = _default;
//# sourceMappingURL=AbstractExpandableListItem.js.map