wix-style-react
Version:
wix-style-react
108 lines • 5.27 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { Add, Delete } from '@wix/wix-ui-icons-common';
import Selector from '../Selector';
import Text from '../Text';
import Button from '../Button';
import IconButton from '../IconButton';
import TextButton from '../TextButton';
import EditableRow from './EditableRow/EditableRow';
import { classes } from './EditableSelector.st.css';
import { dataHooks } from './constants';
class EditableSelector extends React.PureComponent {
constructor() {
super(...arguments);
this.state = {
addingNewRow: false,
editingRow: null,
};
this._addNewRow = () => {
this.setState({ addingNewRow: true, editingRow: false });
};
this._editItem = index => {
this.setState({ editingRow: index, addingNewRow: false });
};
this._deleteItem = index => {
this.props.onOptionDelete && this.props.onOptionDelete({ index });
};
this._onNewOptionApprove = ({ newTitle, index }) => {
if (this.state.addingNewRow) {
this.props.onOptionAdded && this.props.onOptionAdded({ newTitle });
}
else {
this.props.onOptionEdit && this.props.onOptionEdit({ newTitle, index });
}
this.setState({
addingNewRow: false,
editingRow: null,
});
};
this._onNewOptionCancel = () => {
this.setState({
addingNewRow: false,
editingRow: null,
});
};
this._onOptionToggle = id => {
this.props.onOptionToggle && this.props.onOptionToggle(id);
};
this._renderInput = (title, index) => {
return (React.createElement(EditableRow, { key: index, dataHook: dataHooks.editRowWrapper, onApprove: newTitle => this._onNewOptionApprove({ newTitle, index }), onCancel: () => this._onNewOptionCancel(), newOption: title }));
};
}
render() {
const { dataHook, title, newRowLabel, editButtonText, toggleType } = this.props;
let { options } = this.props;
options = options || [];
return (React.createElement("div", { "data-hook": dataHook },
title && (React.createElement("div", { className: classes.title, "data-hook": dataHooks.title },
React.createElement(Text, { weight: "normal" }, title))),
React.createElement("div", null, options.map((option, index) => this.state.editingRow === index ? (this._renderInput(option.title, index)) : (React.createElement("div", { "data-hook": dataHooks.row, className: classes.row, key: index },
React.createElement(Selector, { dataHook: dataHooks.item, id: index, title: option.title, isSelected: option.isSelected, toggleType: toggleType, onToggle: id => this._onOptionToggle(id), className: classes.editableSelectorItem }),
React.createElement("div", { className: classes.optionMenu },
React.createElement(IconButton, { onClick: () => this._deleteItem(index), dataHook: dataHooks.deleteItem, type: "button", size: "small", skin: "inverted" },
React.createElement("span", null,
React.createElement(Delete, null))),
React.createElement("div", { className: classes.editRow },
React.createElement(Button, { onClick: () => this._editItem(index), dataHook: dataHooks.editItem, size: "small" }, editButtonText))))))),
this.state.addingNewRow && this._renderInput(),
React.createElement("div", { className: classes.newRowButton },
React.createElement(TextButton, { as: "a", underline: "none", onClick: this._addNewRow, prefixIcon: React.createElement(Add, { className: classes.icon }), dataHook: dataHooks.newRowButtonText }, newRowLabel))));
}
}
EditableSelector.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** The editable selector's title */
title: PropTypes.string,
/** Specifies the type of the toggle */
toggleType: PropTypes.oneOf(['checkbox', 'radio']),
/** Text for the add new row button */
newRowLabel: PropTypes.string,
/** Text for the edit button */
editButtonText: PropTypes.string,
/** New option added callback function */
onOptionAdded: PropTypes.func,
/** Option edited callback function */
onOptionEdit: PropTypes.func,
/** Option deleted callback function */
onOptionDelete: PropTypes.func,
/** Option toggled callback function */
onOptionToggle: PropTypes.func,
/** Array of objects:
* * `title` - the title of the option.
* * `isSelected` - whether this option is selected or not.
*/
options: PropTypes.arrayOf(PropTypes.shape({
title: PropTypes.string.isRequired,
isSelected: PropTypes.bool,
})),
};
EditableSelector.defaultProps = {
toggleType: 'checkbox',
newRowLabel: 'New Row',
editButtonText: 'Edit',
};
EditableSelector.displayName = 'EditableSelector';
export default EditableSelector;
//# sourceMappingURL=EditableSelector.js.map