wix-style-react
Version:
wix-style-react
276 lines (275 loc) • 8.65 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
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");
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/EditableSelector/EditableSelector.js";
class EditableSelector extends _react.default.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 = _ref => {
var {
newTitle,
index
} = _ref;
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 /*#__PURE__*/_react.default.createElement(_EditableRow.default, {
key: index,
dataHook: _constants.dataHooks.editRowWrapper,
onApprove: newTitle => this._onNewOptionApprove({
newTitle,
index
}),
onCancel: () => this._onNewOptionCancel(),
newOption: title,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 7
}
});
};
}
render() {
var {
dataHook,
title,
newRowLabel,
editButtonText,
toggleType
} = this.props;
var {
options
} = this.props;
options = options || [];
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 7
}
}, title && /*#__PURE__*/_react.default.createElement("div", {
className: _EditableSelectorSt.classes.title,
"data-hook": _constants.dataHooks.title,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
weight: "normal",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 13
}
}, title)), /*#__PURE__*/_react.default.createElement("div", {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 9
}
}, options.map((option, index) => this.state.editingRow === index ? this._renderInput(option.title, index) : /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.row,
className: _EditableSelectorSt.classes.row,
key: index,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 120,
columnNumber: 15
}
}, /*#__PURE__*/_react.default.createElement(_Selector.default, {
dataHook: _constants.dataHooks.item,
id: index,
title: option.title,
isSelected: option.isSelected,
toggleType: toggleType,
onToggle: id => this._onOptionToggle(id),
className: _EditableSelectorSt.classes.editableSelectorItem,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 17
}
}), /*#__PURE__*/_react.default.createElement("div", {
className: _EditableSelectorSt.classes.optionMenu,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 134,
columnNumber: 17
}
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
onClick: () => this._deleteItem(index),
dataHook: _constants.dataHooks.deleteItem,
type: "button",
size: "small",
skin: "inverted",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 19
}
}, /*#__PURE__*/_react.default.createElement("span", {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 21
}
}, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Delete, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 143,
columnNumber: 23
}
}))), /*#__PURE__*/_react.default.createElement("div", {
className: _EditableSelectorSt.classes.editRow,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 19
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => this._editItem(index),
dataHook: _constants.dataHooks.editItem,
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 21
}
}, editButtonText)))))), this.state.addingNewRow && this._renderInput(), /*#__PURE__*/_react.default.createElement("div", {
className: _EditableSelectorSt.classes.newRowButton,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 161,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_TextButton.default, {
as: "a",
underline: "none",
onClick: this._addNewRow,
prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Add, {
className: _EditableSelectorSt.classes.icon,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 166,
columnNumber: 25
}
}),
dataHook: _constants.dataHooks.newRowButtonText,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 162,
columnNumber: 11
}
}, newRowLabel)));
}
}
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
}))
};
EditableSelector.defaultProps = {
toggleType: 'checkbox',
newRowLabel: 'New Row',
editButtonText: 'Edit'
};
EditableSelector.displayName = 'EditableSelector';
var _default = exports.default = EditableSelector;
//# sourceMappingURL=EditableSelector.js.map