smart-react-components/breadcrumb/List.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 index = require('../index-6d498b59.js');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
require('../index-56ba89df.js');
var Ul = require('../element/Ul.js');

var DividerElement = styled__default.li `
    flex: 0 0 auto;
    padding: 0 1px;
`;

var ListElement = styled__default(Ul)(({ theme, type, fill$, shape }) => `
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    overflow: hidden;
    list-style: none;
    border-radius: ${theme.src.breadcrumb.radius[shape]};
    padding: 1px;

    &,
    > li {
        border-radius: ${theme.src.breadcrumb.radius[shape]};
    }

    > li > a {
        padding: ${theme.src.breadcrumb.padding.y} ${theme.src.breadcrumb.padding.x};
    }

    ${fill$
    ? `
        background: ${theme.src.type[type].main};

        > li > a {
            color: ${theme.src.type[type].breadcrumb.fontFill};
            fill: ${theme.src.type[type].breadcrumb.fontFill};
    
            &.active {
                color: ${theme.src.type[type].lightest};
                fill: ${theme.src.type[type].lightest};
            }

            &[disabled="true"],
            &[data-disabled="true"] {
                color: ${theme.src.type[type].darkest};
                fill: ${theme.src.type[type].darkest};
            }
        }

        ${DividerElement} {
            color: ${theme.src.type[type].breadcrumb.fontFill};
            fill: ${theme.src.type[type].breadcrumb.fontFill};
        }
    `
    : `
        background: ${theme.src.type[type].breadcrumb.background};

        > li > a {
            color: ${theme.src.type[type].main};
            fill: ${theme.src.type[type].main};

            &:hover {
                color: ${theme.src.type[type].dark};
                fill: ${theme.src.type[type].dark};
            }

            &.active {
                color: ${theme.src.type[type].darkest};
                fill: ${theme.src.type[type].darkest};
            }

            &[disabled="true"],
            &[data-disabled="true"] {
                color: ${theme.src.type[type].breadcrumb.font};
                fill: ${theme.src.type[type].breadcrumb.font};
            }
        }

        ${DividerElement} {
            color: ${theme.src.type[type].breadcrumb.font};
            fill: ${theme.src.type[type].breadcrumb.font};
        }
    `}
`);

const List = ({ elementProps = index.DV.JSX_ELEMENT_PROPS, children, type = "primary", fill = true, shape = "default", waveEffect = "dark", divider = "/" }) => {
    const getItemList = () => {
        const list = Array.isArray(children) ? children : [children];
        const itemList = [];
        list.forEach((item, index) => {
            if (index != 0)
                itemList.push(React__default.createElement(DividerElement, { key: `divider-${index}` }, divider));
            itemList.push(React__default.cloneElement(item, { key: (item.key || index), waveEffect }));
        });
        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]);
    return React__default.createElement(ListElement, Object.assign({}, elementProps, { type: type, "fill$": fill, shape: shape }), itemList);
};

module.exports = List;