wix-style-react
Version:
284 lines (230 loc) • 11.4 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 _SelectorList = _interopRequireDefault(require("../SelectorList"));
var _HeaderLayout = _interopRequireDefault(require("../MessageBox/FunctionalLayout/HeaderLayout"));
var _FooterLayout = _interopRequireDefault(require("../MessageBox/FunctionalLayout/FooterLayout"));
var _ModalSelectorLayoutSt = require("./ModalSelectorLayout.st.css");
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _ModalSelectorLayout = require("./ModalSelectorLayout.helpers");
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; } }
/**
* Use this component when needed to select one / multiple items having complex descriptions.
* E.g.: choosing products to promote via ShoutOuts
*/
var ModalSelectorLayout = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2["default"])(ModalSelectorLayout, _React$PureComponent);
var _super = _createSuper(ModalSelectorLayout);
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 = _super.call.apply(_super, [this].concat(args));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getEnabledItems", function (items) {
return items.filter(function (_ref) {
var disabled = _ref.disabled;
return !disabled;
});
});
return _this;
}
(0, _createClass2["default"])(ModalSelectorLayout, [{
key: "componentDidMount",
value: function componentDidMount() {
(0, _deprecationLog["default"])("Using \"<ModalSelectorLayout/>\" is deprecated. Instead, we advise you to use the newer \"<SelectorList/>\" component in combination with \"<CustomModalLayout/>\". Please refer to it's documentation for an example.");
}
}, {
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: _ModalSelectorLayout.dataHooks.selectorList
}, 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
}
}, /*#__PURE__*/_react["default"].createElement(_HeaderLayout["default"], {
title: title,
onCancel: onClose
}), renderList(), /*#__PURE__*/_react["default"].createElement(_FooterLayout["default"], {
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
}));
});
}
}]);
return ModalSelectorLayout;
}(_react["default"].PureComponent);
exports["default"] = ModalSelectorLayout;
(0, _defineProperty2["default"])(ModalSelectorLayout, "displayName", 'ModalSelectorLayout');
(0, _defineProperty2["default"])(ModalSelectorLayout, "propTypes", {
/** applied as data-hook HTML attribute that can be used to create driver in testing */
dataHook: _propTypes["default"].string,
/** Title of the modal */
title: _propTypes["default"].node,
/** Fixed text displayed above the list */
subtitle: _propTypes["default"].node,
/** OK button callback, called with the currently selected item */
onOk: _propTypes["default"].func,
/** X button callback */
onClose: _propTypes["default"].func,
/** Cancel button callback */
onCancel: _propTypes["default"].func,
/**
* paging function that should have a signature of
* ```typescript
* (searchQuery: string, offset: number, limit: number) =>
* Promise<{
* items: Array<{
* id: number | string,
* title: node,
* subtitle?: string,
* extraText?: string,
* extraNode?: node,
* disabled?: boolean // show item as disabled, dont count it in "select all", exclude from `onOk`
* selected?: boolean // force item as selected
* image?: node
* subtitleNode?: node,
* belowNode?: node,
* showBelowNodeOnSelect?: boolean,
* }>,
* totalCount: number
* }>
* ```
* `offset` - next requested item's index<br>
* `limit` - number of items requested<br>
* `totalCount` - total number of items that suffice the current search query
* */
dataSource: _propTypes["default"].func.isRequired,
/** Cancel button's text */
cancelButtonText: _propTypes["default"].string,
/** OK button's text */
okButtonText: _propTypes["default"].string,
/** Image icon size */
imageSize: _propTypes["default"].oneOf(['tiny', 'small', 'portrait', 'large', 'cinema']),
/**
* Image icon shape, `rectangular` or `circle`.<br>
* NOTE: `circle` is not compatible with `imageSize` of `portrait` or `cinema`
* */
imageShape: function imageShape(props, propName, componentName) {
if (['portrait', 'cinema'].includes(props.imageSize) && props[propName] === 'circle') {
return new Error("".concat(componentName, ": prop \"imageSize\" with value of \"").concat(props.imageSize, "\" is incompatible with prop imageShape with value of \"circle\" \u2014 use \"rectangular\" instead."));
}
},
/** Placeholder text of the search input */
searchPlaceholder: _propTypes["default"].string,
/**
* Component/element that will be rendered when there is nothing to display,
* i.e. empty `{items:[], totalCount: 0}` was returned on the first call to `dataSource`
* */
emptyState: _propTypes["default"].node,
/**
* Function that will get the current `searchQuery` and should return the component/element
* that will be rendered when there are no items that suffice the entered search query
* */
noResultsFoundStateFactory: _propTypes["default"].func,
/** Number of items loaded each time the user scrolls down */
itemsPerPage: _propTypes["default"].number,
/** Whether to display the search input or not */
withSearch: _propTypes["default"].bool,
/** Search debounce in milliseconds */
searchDebounceMs: _propTypes["default"].number,
/** Height CSS property, sets the height of the modal */
height: _propTypes["default"].string,
/** Max-height CSS property, sets the maximum height of the modal. */
maxHeight: _propTypes["default"].string,
/** display checkbox and allow multi selection */
multiple: _propTypes["default"].bool,
/** string to be displayed in footer when `multiple` prop is used and no items are selected */
selectAllText: _propTypes["default"].string,
/** string to be displayed in footer when `multiple` prop is used and some or all items ar selected */
deselectAllText: _propTypes["default"].string,
/** to disable confirm button */
disableConfirmation: _propTypes["default"].bool,
/** callback that triggers on select and return selected item object*/
onSelect: _propTypes["default"].func,
/** Used to display some side component in the footer.
* Will override element select all in the footer when multiple=true */
sideActions: _propTypes["default"].node
});
(0, _defineProperty2["default"])(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
});