wix-style-react
Version:
250 lines (207 loc) • 10.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Add = _interopRequireDefault(require("wix-ui-icons-common/Add"));
var _Delete = _interopRequireDefault(require("wix-ui-icons-common/Delete"));
var _Selector = _interopRequireDefault(require("../Selector"));
var _Text = _interopRequireDefault(require("../Text"));
var _Button = _interopRequireDefault(require("../Button"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _TextButton = _interopRequireDefault(require("../TextButton"));
var _EditableRow = _interopRequireDefault(require("./EditableRow/EditableRow"));
var _EditableSelectorSt = require("./EditableSelector.st.css");
var _constants = require("./constants");
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }
var EditableSelector = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2["default"])(EditableSelector, _React$PureComponent);
var _super = _createSuper(EditableSelector);
function EditableSelector() {
var _this;
(0, _classCallCheck2["default"])(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));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
addingNewRow: false,
editingRow: null
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_addNewRow", function () {
_this.setState({
addingNewRow: true,
editingRow: false
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_editItem", function (index) {
_this.setState({
editingRow: index,
addingNewRow: false
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_deleteItem", function (index) {
_this.props.onOptionDelete && _this.props.onOptionDelete({
index: index
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onNewOptionCancel", function () {
_this.setState({
addingNewRow: false,
editingRow: null
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onOptionToggle", function (id) {
_this.props.onOptionToggle && _this.props.onOptionToggle(id);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderInput", function (title, index) {
return /*#__PURE__*/_react["default"].createElement(_EditableRow["default"], {
key: index,
dataHook: _constants.dataHooks.editRowWrapper,
onApprove: function onApprove(newTitle) {
return _this._onNewOptionApprove({
newTitle: newTitle,
index: index
});
},
onCancel: function onCancel() {
return _this._onNewOptionCancel();
},
newOption: title
});
});
return _this;
}
(0, _createClass2["default"])(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["default"].createElement("div", {
"data-hook": dataHook
}, title && /*#__PURE__*/_react["default"].createElement("div", {
className: _EditableSelectorSt.classes.title,
"data-hook": _constants.dataHooks.title
}, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
weight: "normal"
}, title)), /*#__PURE__*/_react["default"].createElement("div", null, options.map(function (option, index) {
return _this2.state.editingRow === index ? _this2._renderInput(option.title, index) : /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.row,
className: _EditableSelectorSt.classes.row,
key: index
}, /*#__PURE__*/_react["default"].createElement(_Selector["default"], {
dataHook: _constants.dataHooks.item,
id: index,
title: option.title,
isSelected: option.isSelected,
toggleType: toggleType,
onToggle: function onToggle(id) {
return _this2._onOptionToggle(id);
},
className: _EditableSelectorSt.classes.editableSelectorItem
}), /*#__PURE__*/_react["default"].createElement("div", {
className: _EditableSelectorSt.classes.optionMenu
}, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
onClick: function onClick() {
return _this2._deleteItem(index);
},
dataHook: _constants.dataHooks.deleteItem,
type: "button",
size: "small",
skin: "inverted"
}, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null))), /*#__PURE__*/_react["default"].createElement("div", {
className: _EditableSelectorSt.classes.editRow
}, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
onClick: function onClick() {
return _this2._editItem(index);
},
dataHook: _constants.dataHooks.editItem,
size: "small"
}, editButtonText))));
})), this.state.addingNewRow && this._renderInput(), /*#__PURE__*/_react["default"].createElement("div", {
className: _EditableSelectorSt.classes.newRowButton
}, /*#__PURE__*/_react["default"].createElement(_TextButton["default"], {
as: "a",
underline: "none",
onClick: this._addNewRow,
prefixIcon: /*#__PURE__*/_react["default"].createElement(_Add["default"], {
className: _EditableSelectorSt.classes.icon
}),
dataHook: _constants.dataHooks.newRowButtonText
}, newRowLabel)));
}
}]);
return EditableSelector;
}(_react["default"].PureComponent);
(0, _defineProperty2["default"])(EditableSelector, "propTypes", {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes["default"].string,
/** The editable selector's title */
title: _propTypes["default"].string,
/** Specifies the type of the toggle */
toggleType: _propTypes["default"].oneOf(['checkbox', 'radio']),
/** Text for the add new row button */
newRowLabel: _propTypes["default"].string,
/** Text for the edit button */
editButtonText: _propTypes["default"].string,
/** New option added callback function */
onOptionAdded: _propTypes["default"].func,
/** Option edited callback function */
onOptionEdit: _propTypes["default"].func,
/** Option deleted callback function */
onOptionDelete: _propTypes["default"].func,
/** Option toggled callback function */
onOptionToggle: _propTypes["default"].func,
/** Array of objects:
* * `title` - the title of the option.
* * `isSelected` - whether this option is selected or not.
*/
options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
title: _propTypes["default"].string.isRequired,
isSelected: _propTypes["default"].bool
}))
});
(0, _defineProperty2["default"])(EditableSelector, "defaultProps", {
toggleType: 'checkbox',
newRowLabel: 'New Row',
editButtonText: 'Edit'
});
EditableSelector.displayName = 'EditableSelector';
var _default = EditableSelector;
exports["default"] = _default;