chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
165 lines (160 loc) • 5.59 kB
JavaScript
;
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 _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
*/
const ANIMATION_TIMEOUT = 500;
/**
* A vertical list of radio buttons that reveal content when selected.
*/
class SelectList extends _react.Component {
constructor(props) {
super(props);
this.changeActiveItem = (id, value) => {
const {
selectedId
} = this.state;
if (id === selectedId) return;
if (this.changing) return;
const {
onChange,
value: propValue
} = this.props;
if (onChange) {
onChange(id, value);
}
if (propValue !== undefined && propValue !== null) {
return;
}
this.changing = true;
window.setTimeout(() => {
this.changing = false;
}, ANIMATION_TIMEOUT);
this.setState({
selectedId: id
});
};
const preselectId = props.defaultValue || props.defaultValue === 0 ? props.defaultValue : props.value;
this.state = {
selectedId: preselectId || 0
};
this.selectListId = props.listId || `cc_selectlist__${SelectList.maxId}`;
SelectList.maxId += 1;
}
componentDidMount() {
const {
selectFirst,
children
} = this.props;
if (selectFirst) {
this.calculateFirst(children);
}
}
componentDidUpdate(prevProps) {
const {
value
} = this.props;
if (prevProps && prevProps.value !== value) {
// eslint-disable-next-line react/no-did-update-set-state
this.setState({
selectedId: value
});
}
}
calculateFirst(children) {
if (!children) {
return;
}
let firstItemId = 0;
for (let i = 0, z = children.length; i < z; i += 1) {
const child = children[i];
if ( /*#__PURE__*/_react.default.isValidElement(child)) {
if (child && child.props && child.props.id && !child.props.disabled) {
firstItemId = child.props.id;
break;
}
}
}
this.setState({
selectedId: firstItemId
});
}
render() {
const {
className,
children,
style
} = this.props;
const {
selectedId
} = this.state;
return /*#__PURE__*/_react.default.createElement("div", {
className: className,
style: style
}, /*#__PURE__*/_react.default.createElement(_selectListContext.default.Provider, {
value: {
selectListSelectedId: selectedId,
changeListItem: this.changeActiveItem,
selectListId: this.selectListId
}
}, children));
}
}
exports.default = SelectList;
SelectList.maxId = 0;
SelectList.contextType = _selectListContext.default;
SelectList.propTypes = {
/**
* A callback that is invoked when the selected item changes.
*/
onChange: _propTypes.default.func,
/**
* Specifies the `SelectItem` that is selected by default with its `id`.
*/
defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/**
* The currently selected `SelectItem` by its `id`.
*/
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/**
* The children elements of the list. Should contain `SelectItem`
* components.
*/
children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]),
/**
* Wether the first entry should be selected by default. **(deprecated)**
*/
selectFirst: _propTypes.default.bool,
// eslint-disable-line react/no-unused-prop-types
/**
* A classname string that will be applied to the container element.
*/
className: _propTypes.default.string,
/**
* A React style object
*/
style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])),
/**
* The id used for the html attributes of this select list
*/
listId: _propTypes.default.string
};
SelectList.defaultProps = {
className: null,
defaultValue: null,
value: null,
onChange: null,
selectFirst: null,
children: null,
style: null,
listId: null
};
SelectList.displayName = 'SelectList';
//# sourceMappingURL=SelectList.js.map