wix-style-react
Version:
235 lines (200 loc) • 8.34 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
import React from 'react';
import PropTypes from 'prop-types';
import Add from 'wix-ui-icons-common/Add';
import Delete from 'wix-ui-icons-common/Delete';
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';
var EditableSelector = /*#__PURE__*/function (_React$PureComponent) {
_inherits(EditableSelector, _React$PureComponent);
var _super = _createSuper(EditableSelector);
function EditableSelector() {
var _this;
_classCallCheck(this, EditableSelector);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "state", {
addingNewRow: false,
editingRow: null
});
_defineProperty(_assertThisInitialized(_this), "_addNewRow", function () {
_this.setState({
addingNewRow: true,
editingRow: false
});
});
_defineProperty(_assertThisInitialized(_this), "_editItem", function (index) {
_this.setState({
editingRow: index,
addingNewRow: false
});
});
_defineProperty(_assertThisInitialized(_this), "_deleteItem", function (index) {
_this.props.onOptionDelete && _this.props.onOptionDelete({
index: index
});
});
_defineProperty(_assertThisInitialized(_this), "_onNewOptionApprove", function (_ref) {
var newTitle = _ref.newTitle,
index = _ref.index;
if (_this.state.addingNewRow) {
_this.props.onOptionAdded && _this.props.onOptionAdded({
newTitle: newTitle
});
} else {
_this.props.onOptionEdit && _this.props.onOptionEdit({
newTitle: newTitle,
index: index
});
}
_this.setState({
addingNewRow: false,
editingRow: null
});
});
_defineProperty(_assertThisInitialized(_this), "_onNewOptionCancel", function () {
_this.setState({
addingNewRow: false,
editingRow: null
});
});
_defineProperty(_assertThisInitialized(_this), "_onOptionToggle", function (id) {
_this.props.onOptionToggle && _this.props.onOptionToggle(id);
});
_defineProperty(_assertThisInitialized(_this), "_renderInput", function (title, index) {
return /*#__PURE__*/React.createElement(EditableRow, {
key: index,
dataHook: dataHooks.editRowWrapper,
onApprove: function onApprove(newTitle) {
return _this._onNewOptionApprove({
newTitle: newTitle,
index: index
});
},
onCancel: function onCancel() {
return _this._onNewOptionCancel();
},
newOption: title
});
});
return _this;
}
_createClass(EditableSelector, [{
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
dataHook = _this$props.dataHook,
title = _this$props.title,
newRowLabel = _this$props.newRowLabel,
editButtonText = _this$props.editButtonText,
toggleType = _this$props.toggleType;
var options = this.props.options;
options = options || [];
return /*#__PURE__*/React.createElement("div", {
"data-hook": dataHook
}, title && /*#__PURE__*/React.createElement("div", {
className: classes.title,
"data-hook": dataHooks.title
}, /*#__PURE__*/React.createElement(Text, {
weight: "normal"
}, title)), /*#__PURE__*/React.createElement("div", null, options.map(function (option, index) {
return _this2.state.editingRow === index ? _this2._renderInput(option.title, index) : /*#__PURE__*/React.createElement("div", {
"data-hook": dataHooks.row,
className: classes.row,
key: index
}, /*#__PURE__*/React.createElement(Selector, {
dataHook: dataHooks.item,
id: index,
title: option.title,
isSelected: option.isSelected,
toggleType: toggleType,
onToggle: function onToggle(id) {
return _this2._onOptionToggle(id);
},
className: classes.editableSelectorItem
}), /*#__PURE__*/React.createElement("div", {
className: classes.optionMenu
}, /*#__PURE__*/React.createElement(IconButton, {
onClick: function onClick() {
return _this2._deleteItem(index);
},
dataHook: dataHooks.deleteItem,
type: "button",
size: "small",
skin: "inverted"
}, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Delete, null))), /*#__PURE__*/React.createElement("div", {
className: classes.editRow
}, /*#__PURE__*/React.createElement(Button, {
onClick: function onClick() {
return _this2._editItem(index);
},
dataHook: dataHooks.editItem,
size: "small"
}, editButtonText))));
})), this.state.addingNewRow && this._renderInput(), /*#__PURE__*/React.createElement("div", {
className: classes.newRowButton
}, /*#__PURE__*/React.createElement(TextButton, {
as: "a",
underline: "none",
onClick: this._addNewRow,
prefixIcon: /*#__PURE__*/React.createElement(Add, {
className: classes.icon
}),
dataHook: dataHooks.newRowButtonText
}, newRowLabel)));
}
}]);
return EditableSelector;
}(React.PureComponent);
_defineProperty(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
}))
});
_defineProperty(EditableSelector, "defaultProps", {
toggleType: 'checkbox',
newRowLabel: 'New Row',
editButtonText: 'Edit'
});
EditableSelector.displayName = 'EditableSelector';
export default EditableSelector;