chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
245 lines (242 loc) • 7.97 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 _ChooseButton = _interopRequireDefault(require("../../react-chayns-button/component/ChooseButton"));
var _is = require("../../utils/is");
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 choose button that opens a selection dialog when clicked.
*/
class SelectButton extends _react.Component {
constructor(props) {
super(props);
this.state = {
selected: props.list.filter(item => item[props.selectedFlag])
};
this.onClick = this.onClick.bind(this);
this.getDialogList = this.getDialogList.bind(this);
}
componentDidUpdate(prevProps) {
const {
list,
listKey,
listValue,
selectedFlag
} = this.props;
if (list !== prevProps.list || listKey !== prevProps.listKey || listValue !== prevProps.listValue || selectedFlag !== prevProps.selectedFlag) {
// eslint-disable-next-line react/no-did-update-set-state
this.setState({
selected: list.filter(item => item[selectedFlag])
});
}
}
onClick(e) {
const {
quickFind,
multiSelect,
title,
description,
list,
selectAllButton,
onSelect,
stopPropagation
} = this.props;
const dialogList = this.getDialogList(list);
chayns.dialog.select({
title,
selectAllButton,
message: description,
quickfind: quickFind,
multiselect: multiSelect,
list: dialogList,
buttons: multiSelect || []
}).then(result => {
if (onSelect && result.buttonType > 0) {
onSelect(this.getReturnList(result));
}
}).catch(err => {
// eslint-disable-next-line no-console
console.error(err);
});
if (stopPropagation) e.stopPropagation();
}
getDialogList(_list) {
const {
selected
} = this.state;
const {
showListSelection,
listKey,
listValue
} = this.props;
const list = [];
if (_list) {
_list.forEach((item, i) => {
const curListKey = listKey || i;
if (item[curListKey] && item[listValue]) {
list.push({
name: item[listValue],
value: item[curListKey],
isSelected: selected.indexOf(item) >= 0 && showListSelection
});
}
});
}
return list;
}
getReturnList(selected) {
const {
list,
listKey
} = this.props;
const {
buttonType,
selection: selectedItems
} = selected;
const result = [];
selectedItems.forEach(item => {
list.forEach(listItem => {
if (listItem[listKey] === item.value) {
result.push(listItem);
}
});
});
this.setState({
selected: result
});
return {
buttonType,
selection: result
};
}
render() {
const {
className,
label,
disabled,
listValue,
showSelection,
style
} = this.props;
const {
selected
} = this.state;
const numberOfItems = (0, _is.isNumber)(showSelection) ? showSelection : 2;
return /*#__PURE__*/_react.default.createElement(_ChooseButton.default, {
className: className,
disabled: disabled,
onClick: this.onClick,
style: style
}, selected && selected.length > 0 && showSelection ? selected.map((item, index) => {
let str = index > 0 && index < selected.length && index < numberOfItems ? ', ' : '';
str += index < numberOfItems ? item[listValue] : '';
str += index === numberOfItems ? '...' : '';
return str;
}) : label);
}
}
exports.default = SelectButton;
SelectButton.propTypes = {
/**
* A callback that is invoked when the selection has changed.
*/
onSelect: _propTypes.default.func,
/**
* A string that will be shown as a title in the selection dialog.
*/
title: _propTypes.default.string,
/**
* A string that will be shown as a description in the selection dialog.
*/
description: _propTypes.default.string,
/**
* Disables any user interaction and renders the button in a disabled style.
*/
disabled: _propTypes.default.bool,
/**
* The content of the button.
*/
label: _propTypes.default.string,
/**
* An array of items to select from. Items are provided in an object shape.
*/
list: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
/**
* The property name of the list item objects that will uniquely identify
* each one.
*/
listKey: _propTypes.default.string,
/**
* The property name of the list item objects that will be shown as its name
* in the selection dialog.
*/
listValue: _propTypes.default.string,
/**
* The property name of the list item objects that mark an item as selected.
*/
selectedFlag: _propTypes.default.string,
/**
* Wether multiple options can be selected.
*/
multiSelect: _propTypes.default.bool,
/**
* Wether a search field should be shown in the selection dialog.
*/
quickFind: _propTypes.default.bool,
/**
* Adds a checkbox with the given text of this property which allows you to
* enable and disable all elements of the select list at the same time.
* Based on the list items isSelected state the checkbox is enabled or
* disabled. If all elements of the list are selected, the checkbox will be
* checked.
*/
selectAllButton: _propTypes.default.string,
/**
* A classname string that will be applied to the button.
*/
className: _propTypes.default.string,
/**
* A React style object that will be applied ot the button
*/
style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])),
/**
* Wether the current selection should be shown in the button. Use a number
* to specify the maximum amount of items selected.
*/
showSelection: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.number]),
/**
* Wether the current selection should be shown in the dialog list.
*/
showListSelection: _propTypes.default.bool,
/**
* Wether to stop propagation of click events to parent elements.
*/
stopPropagation: _propTypes.default.bool
};
SelectButton.defaultProps = {
quickFind: false,
multiSelect: false,
title: '',
description: '',
label: 'Select',
showSelection: true,
selectAllButton: null,
className: null,
onSelect: null,
disabled: false,
listKey: 'name',
listValue: 'value',
selectedFlag: 'isSelected',
stopPropagation: false,
showListSelection: true,
style: null
};
SelectButton.displayName = 'SelectButton';
//# sourceMappingURL=SelectButton.js.map