wix-style-react
Version:
wix-style-react
230 lines (229 loc) • 8.21 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 _SelectorList = _interopRequireDefault(require("../SelectorList"));
var _HeaderLayout = _interopRequireDefault(require("../MessageBoxFunctionalLayout/HeaderLayout"));
var _FooterLayout = _interopRequireDefault(require("../MessageBoxFunctionalLayout/FooterLayout"));
var _ModalSelectorLayoutSt = require("./ModalSelectorLayout.st.css");
var _ModalSelectorLayout2 = require("./ModalSelectorLayout.helpers");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/ModalSelectorLayout/ModalSelectorLayout.js";
/**
* Use this component when needed to select one / multiple items having complex descriptions.
* E.g.: choosing products to promote via ShoutOuts
*/
class ModalSelectorLayout extends _react.default.PureComponent {
constructor() {
super(...arguments);
this._getEnabledItems = items => items.filter(_ref => {
var {
disabled
} = _ref;
return !disabled;
});
}
render() {
var {
// SelectorList props
dataSource,
imageSize,
imageShape,
searchPlaceholder,
emptyState,
noResultsFoundStateFactory: renderNoResults,
itemsPerPage,
withSearch,
searchDebounceMs,
onSelect,
multiple,
subtitle,
// Modal props
dataHook,
title,
onClose,
onCancel,
onOk: _onOk,
height,
maxHeight,
cancelButtonText,
okButtonText,
disableConfirmation,
sideActions
} = this.props;
return /*#__PURE__*/_react.default.createElement(_SelectorList.default, {
dataSource,
imageSize,
imageShape,
searchPlaceholder,
emptyState,
renderNoResults,
itemsPerPage,
withSearch,
searchDebounceMs,
onSelect,
multiple,
subtitle,
dataHook: _ModalSelectorLayout2.dataHooks.selectorList,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 191,
columnNumber: 7
}
}, _ref2 => {
var {
renderList,
renderToggleAllCheckbox,
selectedItems
} = _ref2;
var enabledItems = this._getEnabledItems(selectedItems);
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
className: _ModalSelectorLayoutSt.classes.modalContent,
style: {
height,
maxHeight
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 211,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_HeaderLayout.default, {
title: title,
onCancel: onClose,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 216,
columnNumber: 15
}
}), renderList(), /*#__PURE__*/_react.default.createElement(_FooterLayout.default, {
onCancel: onCancel,
onOk: () => _onOk(multiple ? enabledItems : enabledItems[0]),
cancelText: cancelButtonText,
confirmText: okButtonText,
enableOk: !disableConfirmation && !!selectedItems.length,
children: !sideActions && multiple && renderToggleAllCheckbox(),
sideActions: sideActions,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 218,
columnNumber: 15
}
}));
});
}
}
exports.default = ModalSelectorLayout;
ModalSelectorLayout.displayName = 'ModalSelectorLayout';
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: (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
};
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
};
//# sourceMappingURL=ModalSelectorLayout.js.map