react-base-guide/lib/components/dropdown-button/index.js

react ui components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const button_1 = __importDefault(require("../button"));
const icon_button_1 = __importDefault(require("../icon-button"));
const dropdown_menu_1 = __importDefault(require("../dropdown-menu"));
const add_custom_style_1 = require("../../utils/add-custom-style");
const Wrapper = styled_components_1.default.div `
  position: relative;
  vertical-align: middle;
  ${p => (0, add_custom_style_1.addCustomStyle)(p.$styled, "inline-block")}
`;
const onBlur = (e, setOpen, containerRef) => {
    if (!e.relatedTarget || !containerRef.current.contains(e.relatedTarget)) {
        setOpen(false);
    }
};
const DropdownButton = (props) => {
    var _a, _b;
    const [open, setOpen] = (0, react_1.useState)(false);
    const containerRef = (0, react_1.useRef)(null);
    return ((0, jsx_runtime_1.jsxs)(Wrapper, Object.assign({ ref: containerRef, className: props.className, "$styled": props.styled, onBlur: e => onBlur(e, setOpen, containerRef) }, { children: [props.icon ?
                (0, jsx_runtime_1.jsx)(icon_button_1.default, Object.assign({ disabled: props.disabled, secondary: props.secondary, size: props.size, onClick: () => setOpen(!open), styled: { width: (_a = props.styled) === null || _a === void 0 ? void 0 : _a.width } }, { children: props.children })) :
                (0, jsx_runtime_1.jsx)(button_1.default, Object.assign({ disabled: props.disabled, progress: props.progress, secondary: props.secondary, onClick: () => setOpen(!open), styled: { width: (_b = props.styled) === null || _b === void 0 ? void 0 : _b.width } }, { children: props.children })), (!props.progress && !props.disabled) && (0, jsx_runtime_1.jsx)(dropdown_menu_1.default, { open: open, menuWidth: props.menuWidth || (props.icon ? null : "100%"), menuHeight: props.menuHeight, right: props.right, up: props.up, rows: props.rows })] })));
};
exports.default = DropdownButton;
//# sourceMappingURL=index.js.map