@wix/design-system
Version:
@wix/design-system
286 lines (285 loc) • 11.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
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.js");
var _constants = require("./constants");
var _IconThemeContext = require("../WixDesignSystemIconThemeProvider/IconThemeContext");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/EditableSelector/EditableSelector.jsx";
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var EditableSelector = /*#__PURE__*/function (_React$PureComponent) {
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 = _callSuper(this, EditableSelector, [].concat(args));
_this.state = {
addingNewRow: false,
editingRow: null
};
_this._addNewRow = function () {
_this.setState({
addingNewRow: true,
editingRow: false
});
};
_this._editItem = function (index) {
_this.setState({
editingRow: index,
addingNewRow: false
});
};
_this._deleteItem = function (index) {
_this.props.onOptionDelete && _this.props.onOptionDelete({
index: index
});
};
_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
});
};
_this._onNewOptionCancel = function () {
_this.setState({
addingNewRow: false,
editingRow: null
});
};
_this._onOptionToggle = function (id) {
_this.props.onOptionToggle && _this.props.onOptionToggle(id);
};
_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,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 7
}
});
};
return _this;
}
(0, _inherits2["default"])(EditableSelector, _React$PureComponent);
return (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(_IconThemeContext.IconThemeContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 7
}
}, function (_ref2) {
var _icons$EditableSelect, _icons$EditableSelect2;
var _ref2$icons = _ref2.icons,
icons = _ref2$icons === void 0 ? {} : _ref2$icons;
var AddIcon = ((_icons$EditableSelect = icons.EditableSelector) == null ? void 0 : _icons$EditableSelect.Add) || _wixUiIconsCommon.Add;
var DeleteIcon = ((_icons$EditableSelect2 = icons.EditableSelector) == null ? void 0 : _icons$EditableSelect2.Delete) || _wixUiIconsCommon.Delete;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 13
}
}, title && /*#__PURE__*/_react["default"].createElement("div", {
className: _EditableSelectorSt.classes.title,
"data-hook": _constants.dataHooks.title,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 17
}
}, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
weight: "normal",
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 19
}
}, title)), /*#__PURE__*/_react["default"].createElement("div", {
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 15
}
}, 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,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 21
}
}, /*#__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,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 23
}
}), /*#__PURE__*/_react["default"].createElement("div", {
className: _EditableSelectorSt.classes.optionMenu,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 23
}
}, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
onClick: function onClick() {
return _this2._deleteItem(index);
},
dataHook: _constants.dataHooks.deleteItem,
type: "button",
size: "small",
priority: "secondary",
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 110,
columnNumber: 25
}
}, /*#__PURE__*/_react["default"].createElement("span", {
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 117,
columnNumber: 27
}
}, /*#__PURE__*/_react["default"].createElement(DeleteIcon, {
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 29
}
}))), /*#__PURE__*/_react["default"].createElement("div", {
className: _EditableSelectorSt.classes.editRow,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 121,
columnNumber: 25
}
}, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
onClick: function onClick() {
return _this2._editItem(index);
},
dataHook: _constants.dataHooks.editItem,
size: "small",
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 122,
columnNumber: 27
}
}, editButtonText))));
})), _this2.state.addingNewRow && _this2._renderInput(), /*#__PURE__*/_react["default"].createElement("div", {
className: _EditableSelectorSt.classes.newRowButton,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 136,
columnNumber: 15
}
}, /*#__PURE__*/_react["default"].createElement(_TextButton["default"], {
as: "a",
underline: "none",
onClick: _this2._addNewRow,
prefixIcon: /*#__PURE__*/_react["default"].createElement(AddIcon, {
className: _EditableSelectorSt.classes.icon,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 31
}
}),
dataHook: _constants.dataHooks.newRowButtonText,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 137,
columnNumber: 17
}
}, newRowLabel)));
});
}
}]);
}(_react["default"].PureComponent);
EditableSelector.defaultProps = {
toggleType: 'checkbox',
newRowLabel: 'New Row',
editButtonText: 'Edit'
};
EditableSelector.displayName = 'EditableSelector';
var _default = exports["default"] = EditableSelector;