wix-style-react/dist/src/ModalSelectorLayout/ModalSelectorLayout.d.ts

wix-style-react

/**
 * Use this component when needed to select one / multiple items having complex descriptions.
 * E.g.: choosing products to promote via ShoutOuts
 */
export default class ModalSelectorLayout extends React.PureComponent<any, any, any> {
    static displayName: string;
    static propTypes: {
        /** applied as data-hook HTML attribute that can be used to create driver in testing */
        dataHook: PropTypes.Requireable<string>;
        /** Title of the modal */
        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /** Fixed text displayed above the list */
        subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /** OK button callback, called with the currently selected item  */
        onOk: PropTypes.Requireable<(...args: any[]) => any>;
        /** X button callback */
        onClose: PropTypes.Requireable<(...args: any[]) => any>;
        /** Cancel button callback */
        onCancel: PropTypes.Requireable<(...args: any[]) => any>;
        /**
         * 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.Validator<(...args: any[]) => any>;
        /** Cancel button's text */
        cancelButtonText: PropTypes.Requireable<string>;
        /** OK button's text */
        okButtonText: PropTypes.Requireable<string>;
        /** Image icon size */
        imageSize: PropTypes.Requireable<string>;
        /**
         * Image icon shape, `rectangular` or `circle`.<br>
         * NOTE: `circle` is not compatible with `imageSize` of `portrait` or `cinema`
         * */
        imageShape: (props: any, propName: any, componentName: any) => Error | undefined;
        /** Placeholder text of the search input */
        searchPlaceholder: PropTypes.Requireable<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.Requireable<PropTypes.ReactNodeLike>;
        /**
         * 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.Requireable<(...args: any[]) => any>;
        /** Number of items loaded each time the user scrolls down */
        itemsPerPage: PropTypes.Requireable<number>;
        /** Whether to display the search input or not */
        withSearch: PropTypes.Requireable<boolean>;
        /** Search debounce in milliseconds */
        searchDebounceMs: PropTypes.Requireable<number>;
        /** Height CSS property, sets the height of the modal */
        height: PropTypes.Requireable<string>;
        /** Max-height CSS property, sets the maximum height of the modal. */
        maxHeight: PropTypes.Requireable<string>;
        /** display checkbox and allow multi selection */
        multiple: PropTypes.Requireable<boolean>;
        /** string to be displayed in footer when `multiple` prop is used and no items are selected  */
        selectAllText: PropTypes.Requireable<string>;
        /** string to be displayed in footer when `multiple` prop is used and some or all items ar selected */
        deselectAllText: PropTypes.Requireable<string>;
        /** to disable confirm button */
        disableConfirmation: PropTypes.Requireable<boolean>;
        /** callback that triggers on select and return selected item object*/
        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
        /** Used to display some side component in the footer.
         * Will override element select all in the footer when multiple=true */
        sideActions: PropTypes.Requireable<PropTypes.ReactNodeLike>;
    };
    static defaultProps: {
        title: string;
        okButtonText: string;
        cancelButtonText: string;
        searchPlaceholder: string;
        imageSize: string;
        imageShape: string;
        itemsPerPage: number;
        withSearch: boolean;
        height: string;
        maxHeight: string;
        selectAllText: string;
        deselectAllText: string;
        disableConfirmation: boolean;
    };
    constructor(props: any);
    constructor(props: any, context: any);
    _getEnabledItems: (items: any) => any;
    render(): React.JSX.Element;
}
import React from 'react';
import PropTypes from 'prop-types';
//# sourceMappingURL=ModalSelectorLayout.d.ts.map