smart-react-components/UseSelectMethods-88c2134a.js

React UI library, wide variety of editable ready to use Styled and React components.

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var Div = require('./element/Div.js');
var Close = require('./Close-72bfdc7e.js');
var Badge = require('./Badge-28700875.js');
var Container = require('./Container-7b969272.js');
var Icon = require('./Icon-8e539dc5.js');
var Span = require('./element/Span.js');
var Text = require('./Text-c2784368.js');
var ArrowDown = require('./ArrowDown-a8680a44.js');

var useSelectMethods = ({ size, sizeSm, sizeMd, sizeLg, sizeXl, box, placeholder, optionType, badgeType, arrow, children, fill, shape, hover, waveEffect, disabled, active, setActive, closeBox, search }) => {
    const [searchText, setSearchText] = React__default.useState("");
    const searchTextInit = React__default.useRef(false);
    /**
     * Sets value if it is not disabled.
     *
     * @param value
     */
    const setValue = (value) => {
        if (!disabled) {
            if (box && !Array.isArray(active))
                closeBox();
            setActive(value);
        }
    };
    /**
     * Removes item from the active if it is not disabled.
     *
     * @param value
     */
    const removeItem = (value) => {
        if (!disabled)
            setActive(active.filter(i => i != value));
    };
    /**
     * Clones the item.
     *
     * @param item
     * @param index
     */
    const cloneElement = (item, index) => React__default.cloneElement(item, { key: item.key || index, box, type: optionType, size, sizeSm, sizeMd, sizeLg, sizeXl, fill, shape, hover, waveEffect, active, setActive: setValue });
    /**
     * Returns item list.
     */
    const getItemList = () => {
        let itemList = {
            value: [],
            active: null,
            isPlaceholder: false
        };
        let list = Array.isArray(children) ? children : [children];
        if (search && searchText) {
            const _searchText = searchText.toLowerCase();
            let _list = [];
            let lastCategory = null;
            let lastCategoryIndex;
            list.forEach((item, index) => {
                if (typeof item.props.value !== "undefined") {
                    if (item.props.value) {
                        let value = item.props.searchValue ? item.props.searchValue.toLowerCase() : item.props.value.toLowerCase();
                        if (value.includes(_searchText))
                            _list.push(cloneElement(item, index));
                    }
                }
                else { // category
                    if (lastCategory && lastCategoryIndex == _list.length)
                        _list.pop();
                    lastCategory = cloneElement(item, index);
                    _list.push(lastCategory);
                    lastCategoryIndex = _list.length;
                }
            });
            if (lastCategory && lastCategoryIndex == _list.length)
                _list.pop();
            itemList.value = _list;
        }
        else
            itemList.value = list.map((item, index) => cloneElement(item, index));
        if (box) {
            let base = null;
            if (Array.isArray(active) && active.length > 0) {
                let baseList = [];
                if (badgeType) {
                    list.forEach((item, index) => {
                        if (active.indexOf(item.props.value) > -1) {
                            baseList.push(React__default.createElement(Badge.Badge, { key: item.key != null ? item.key : index, type: badgeType, size: size, sizeSm: sizeSm, sizeMd: sizeMd, sizeLg: sizeLg, sizeXl: sizeXl, "data-src-not-clickable": true },
                                React__default.createElement(Icon.BadgeIcon, { onClick: () => removeItem(item.props.value) },
                                    React__default.createElement(Close.CloseIcon, { iconSize: size, iconSizeSm: sizeSm, iconSizeMd: sizeMd, iconSizeLg: sizeLg, iconSizeXl: sizeXl })),
                                React__default.createElement(Text.BadgeText, null, item.props.children)));
                        }
                    });
                    base = React__default.createElement(Container.BadgeContainer, { space: true }, baseList);
                }
                else {
                    list.forEach((item, index) => {
                        if (active.indexOf(item.props.value) > -1)
                            baseList.push(React__default.createElement("span", { key: item.key != null ? item.key : index }, item.props.children), ", ");
                    });
                    baseList.pop();
                    base = React__default.createElement(Span, { wordWrap: "break-word", wordBreak: "break-word" }, baseList);
                }
            }
            else if (!Array.isArray(active) && active != null) {
                for (let i in list) {
                    let item = list[i];
                    if (item.props.value == active) {
                        base = item.props.children;
                        break;
                    }
                }
            }
            else {
                itemList.isPlaceholder = true;
                base = placeholder || React__default.createElement(React__default.Fragment, null, "\u00A0");
            }
            itemList.active = (React__default.createElement(Div, { display: "flex", justifyContent: "space-between", alignItems: "center" },
                React__default.createElement(Div, { flex: "1 1 auto" }, base),
                arrow && React__default.createElement(ArrowDown.ArrowDown, { iconSize: size, iconSizeSm: sizeSm, iconSizeMd: sizeMd, iconSizeLg: sizeLg, iconSizeXl: sizeXl, flex: "0 0 auto", ml: 3 })));
        }
        return itemList;
    };
    const [itemList, setItemList] = React__default.useState(() => getItemList());
    const itemListInit = React__default.useRef(false);
    React__default.useEffect(() => {
        if (!itemListInit.current)
            itemListInit.current = true;
        else
            setItemList(getItemList());
    }, [children, active]);
    React__default.useEffect(() => {
        if (!searchTextInit.current)
            searchTextInit.current = true;
        else
            setItemList(getItemList());
    }, [searchText]);
    return { itemList, searchText, setSearchText };
};

exports.useSelectMethods = useSelectMethods;