smart-react-components/dropdown/Item.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');
require('../DOMHelper-c0bd5a29.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 Div = require('../element/Div.js');
require('react-dom');
var WaveEffect = require('../WaveEffect-96d9007c.js');

const customKeys = {
    size$: (v, t) => `
        padding: ${t.dropdown.padding[v]} ${t.dropdown.padding[v]};
        margin: ${t.dropdown.margin[v].y} ${t.dropdown.margin[v].x};
        font-size: ${t.dropdown.fontSize[v]};
    `
};
const ItemElement = styled__default(Div).attrs({ customKeys })(({ theme, type$, shape, hover, disabled }) => `
    border-radius: ${theme.src.dropdown.radius[shape]};
    background: ${theme.src.type[type$].dropdown.background};
    color: ${theme.src.type[type$].dropdown.font};
    word-wrap: break-word;
    word-break: break-word;
    font-family: ${theme.src.fontFamily.dropdown};
    cursor: default;
    transition: 100ms 0s ease-in-out;
    transition-property: background, color;

    ${(hover && !theme.src.isMobile)
    ? `
            &:hover {
                background: ${theme.src.type[type$].main};
                color: ${theme.src.type[type$].font};
            }
        ` : ""}

    ${disabled
    ? `
        pointer-events: none;
        opacity: ${theme.src.dropdown.disabledOpacity};
    ` : ""}
`);
const Item = ({ size, sizeSm, sizeMd, sizeLg, sizeXl, elementProps = index.DV.JSX_ELEMENT_PROPS, children, type = "primary", shape = "default", hover, waveEffect, setStatus, callback, disabled }) => {
    const onClick = () => {
        if (disabled)
            return;
        setStatus(false);
        if (callback)
            callback();
    };
    const El = React__default.createElement(ItemElement, Object.assign({}, elementProps, { "size$": size, "size$Sm": sizeSm, "size$Md": sizeMd, "size$Lg": sizeLg, "size$Xl": sizeXl, "type$": type, shape: shape, hover: hover, onClick: onClick, disabled: disabled }), children);
    return waveEffect ? React__default.createElement(WaveEffect.WaveEffect, { type: waveEffect }, El) : El;
};

module.exports = Item;