smart-react-components/pagination/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 ListElement = styled__default(Ul).attrs(({ p = "0" }) => ({ p }))(({ theme, type, fill$, shape, fixedSize }) => `
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: -${theme.src.pagination.margin.y} -${theme.src.pagination.margin.x};

    > li {
        margin: ${theme.src.pagination.margin.y} ${theme.src.pagination.margin.x};

        > a {
            border-radius: ${theme.src.pagination.radius[shape]};

            ${fixedSize
    ? `
                justify-content: center;
                align-items: center;
                width: ${theme.src.pagination.fixedSize};
                height: ${theme.src.pagination.fixedSize};
            ` : `
                padding: ${theme.src.pagination.padding.y} ${theme.src.pagination.padding.x};
            `}
            
            ${fill$
    ? `
                border-color: ${theme.src.type[type].dark};
                background: ${theme.src.type[type].main};
                color: ${theme.src.type[type].font};
                fill: ${theme.src.type[type].font};
        
                &[href]:hover,
                &.active {
                    border-color: ${theme.src.type[type].darkest};
                    background: ${theme.src.type[type].dark};
                }
            `
    : `
                border-color: ${theme.src.type[type].pagination.border};
                background: ${theme.src.type[type].pagination.background};
                color: ${theme.src.type[type].pagination.font};
                fill: ${theme.src.type[type].pagination.font};
        
                &[href]:hover {
                    background: ${theme.src.type[type].pagination.border};
                }
        
                &.active {
                    border-color: ${theme.src.type[type].dark};
                    background: ${theme.src.type[type].main} !important;
                    color: ${theme.src.type[type].font};
                    fill: ${theme.src.type[type].font};
                }
            `}
        }
    }
`);

const List = ({ elementProps = index.DV.JSX_ELEMENT_PROPS, children, type = "primary", fill = true, shape = "default", fixedSize, waveEffect = "light" }) => {
    const getItemList = () => {
        const list = Array.isArray(children) ? children : [children];
        return list.map((item, index) => React__default.cloneElement(item, { key: (item.key || index), waveEffect }));
    };
    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, waveEffect]);
    return React__default.createElement(ListElement, Object.assign({}, elementProps, { type: type, "fill$": fill, shape: shape, fixedSize: fixedSize }), itemList);
};

module.exports = List;