@wix/design-system
Version:
@wix/design-system
152 lines (151 loc) • 6.63 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 _SelectorList = _interopRequireDefault(require("../SelectorList"));
var _HeaderLayout = require("../MessageBoxFunctionalLayout/components/HeaderLayout");
var _FooterLayout = require("../MessageBoxFunctionalLayout/components/FooterLayout");
var _ModalSelectorLayoutSt = require("./ModalSelectorLayout.st.css.js");
var _ModalSelectorLayout2 = require("./ModalSelectorLayout.helpers");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/ModalSelectorLayout/ModalSelectorLayout.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; })(); }
/**
* Use this component when needed to select one / multiple items having complex descriptions.
* E.g.: choosing products to promote via ShoutOuts
*/
var ModalSelectorLayout = exports["default"] = /*#__PURE__*/function (_React$PureComponent) {
function ModalSelectorLayout() {
var _this;
(0, _classCallCheck2["default"])(this, ModalSelectorLayout);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, ModalSelectorLayout, [].concat(args));
_this._getEnabledItems = function (items) {
return items.filter(function (_ref) {
var disabled = _ref.disabled;
return !disabled;
});
};
return _this;
}
(0, _inherits2["default"])(ModalSelectorLayout, _React$PureComponent);
return (0, _createClass2["default"])(ModalSelectorLayout, [{
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
dataSource = _this$props.dataSource,
imageSize = _this$props.imageSize,
imageShape = _this$props.imageShape,
searchPlaceholder = _this$props.searchPlaceholder,
emptyState = _this$props.emptyState,
renderNoResults = _this$props.noResultsFoundStateFactory,
itemsPerPage = _this$props.itemsPerPage,
withSearch = _this$props.withSearch,
searchDebounceMs = _this$props.searchDebounceMs,
onSelect = _this$props.onSelect,
multiple = _this$props.multiple,
subtitle = _this$props.subtitle,
dataHook = _this$props.dataHook,
title = _this$props.title,
onClose = _this$props.onClose,
onCancel = _this$props.onCancel,
_onOk = _this$props.onOk,
height = _this$props.height,
maxHeight = _this$props.maxHeight,
cancelButtonText = _this$props.cancelButtonText,
okButtonText = _this$props.okButtonText,
disableConfirmation = _this$props.disableConfirmation,
sideActions = _this$props.sideActions;
return /*#__PURE__*/_react["default"].createElement(_SelectorList["default"], {
dataSource: dataSource,
imageSize: imageSize,
imageShape: imageShape,
searchPlaceholder: searchPlaceholder,
emptyState: emptyState,
renderNoResults: renderNoResults,
itemsPerPage: itemsPerPage,
withSearch: withSearch,
searchDebounceMs: searchDebounceMs,
onSelect: onSelect,
multiple: multiple,
subtitle: subtitle,
dataHook: _ModalSelectorLayout2.dataHooks.selectorList,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 7
}
}, function (_ref2) {
var renderList = _ref2.renderList,
renderToggleAllCheckbox = _ref2.renderToggleAllCheckbox,
selectedItems = _ref2.selectedItems;
var enabledItems = _this2._getEnabledItems(selectedItems);
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
className: _ModalSelectorLayoutSt.classes.modalContent,
style: {
height: height,
maxHeight: maxHeight
},
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 13
}
}, /*#__PURE__*/_react["default"].createElement(_HeaderLayout.HeaderLayout, {
title: title,
onCancel: onClose,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 15
}
}), renderList(), /*#__PURE__*/_react["default"].createElement(_FooterLayout.FooterLayout, {
onCancel: onCancel,
onOk: function onOk() {
return _onOk(multiple ? enabledItems : enabledItems[0]);
},
cancelText: cancelButtonText,
confirmText: okButtonText,
enableOk: !disableConfirmation && !!selectedItems.length,
children: !sideActions && multiple && renderToggleAllCheckbox(),
sideActions: sideActions,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 15
}
}));
});
}
}]);
}(_react["default"].PureComponent);
ModalSelectorLayout.displayName = 'ModalSelectorLayout';
ModalSelectorLayout.defaultProps = {
title: 'Choose Your Items',
okButtonText: 'Select',
cancelButtonText: 'Cancel',
searchPlaceholder: 'Search...',
imageSize: 'large',
imageShape: 'rectangular',
itemsPerPage: 50,
withSearch: true,
height: '100%',
maxHeight: '100%',
selectAllText: 'Select All',
deselectAllText: 'Deselect All',
disableConfirmation: false
};