@wix/design-system/dist/esm/ModalSelectorLayout/ModalSelectorLayout.js

@wix/design-system

import React from 'react';
import SelectorList from '../SelectorList';
import { HeaderLayout } from '../MessageBoxFunctionalLayout/components/HeaderLayout';
import { FooterLayout } from '../MessageBoxFunctionalLayout/components/FooterLayout';
import { classes } from './ModalSelectorLayout.st.css.js';
import { dataHooks } from './ModalSelectorLayout.helpers';
/**
 * 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.PureComponent {
    constructor() {
        super(...arguments);
        this._getEnabledItems = items => items.filter(({ disabled }) => !disabled);
    }
    render() {
        const { 
        // SelectorList props
        dataSource, imageSize, imageShape, searchPlaceholder, emptyState, noResultsFoundStateFactory: renderNoResults, itemsPerPage, withSearch, searchDebounceMs, onSelect, multiple, subtitle, 
        // Modal props
        dataHook, title, onClose, onCancel, onOk, height, maxHeight, cancelButtonText, okButtonText, disableConfirmation, sideActions, } = this.props;
        return (React.createElement(SelectorList, { dataSource,
            imageSize,
            imageShape,
            searchPlaceholder,
            emptyState,
            renderNoResults,
            itemsPerPage,
            withSearch,
            searchDebounceMs,
            onSelect,
            multiple,
            subtitle, dataHook: dataHooks.selectorList }, ({ renderList, renderToggleAllCheckbox, selectedItems }) => {
            const enabledItems = this._getEnabledItems(selectedItems);
            return (React.createElement("div", { "data-hook": dataHook, className: classes.modalContent, style: { height, maxHeight } },
                React.createElement(HeaderLayout, { title: title, onCancel: onClose }),
                renderList(),
                React.createElement(FooterLayout, { onCancel: onCancel, onOk: () => onOk(multiple ? enabledItems : enabledItems[0]), cancelText: cancelButtonText, confirmText: okButtonText, enableOk: !disableConfirmation && !!selectedItems.length, children: !sideActions && multiple && renderToggleAllCheckbox(), sideActions: sideActions })));
        }));
    }
}
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,
};
export default ModalSelectorLayout;
//# sourceMappingURL=ModalSelectorLayout.js.map