@confi/conflux-react-ui-test-package/esm/button-dropdown/button-dropdown.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useCallback, useMemo, useRef, useState } from 'react';
import useTheme from '../styles/use-theme';
import useClickAway from '../utils/use-click-away';
import { getColor } from './styles';
import ButtonDropdownIcon from './icon';
import ButtonDropdownItem from './button-dropdown-item';
import { ButtonDropdownContext } from './button-dropdown-context';
import { pickChild, pickChildByProps } from '../utils/collections';
import { getButtonSize } from '../button/styles';
var defaultProps = {
  type: 'default',
  size: 'medium',
  auto: false,
  loading: false,
  disabled: false,
  className: ''
};

var stopPropagation = function stopPropagation(event) {
  event.stopPropagation();
  event.nativeEvent.stopImmediatePropagation();
};

var ButtonDropdown = function ButtonDropdown(_ref) {
  var children = _ref.children,
      type = _ref.type,
      size = _ref.size,
      auto = _ref.auto,
      className = _ref.className,
      disabled = _ref.disabled,
      loading = _ref.loading,
      props = _objectWithoutProperties(_ref, ["children", "type", "size", "auto", "className", "disabled", "loading"]);

  var ref = useRef(null);
  var theme = useTheme();
  var colors = getColor(theme.palette, type);
  var sizes = getButtonSize(size, auto);
  var itemChildren = pickChild(children, ButtonDropdownItem)[1];

  var _pickChildByProps = pickChildByProps(itemChildren, 'main', true),
      _pickChildByProps2 = _slicedToArray(_pickChildByProps, 2),
      itemChildrenWithoutMain = _pickChildByProps2[0],
      mainItemChildren = _pickChildByProps2[1];

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

  var clickHandler = useCallback(function (event) {
    event.preventDefault();
    stopPropagation(event);
    if (disabled || loading) return;
    setVisible(!visible);
  }, [visible]);
  var initialValue = useMemo(function () {
    return {
      type: type,
      size: size,
      auto: auto,
      disabled: disabled,
      loading: loading
    };
  }, [type, size]);
  var bgColor = useMemo(function () {
    if (disabled || loading) return theme.palette.accents_1;
    return visible ? colors.hoverBgColor : colors.bgColor;
  }, [visible, colors, theme.palette]);
  useClickAway(ref, function () {
    return setVisible(false);
  });
  return /*#__PURE__*/React.createElement(ButtonDropdownContext.Provider, {
    value: initialValue
  }, /*#__PURE__*/React.createElement("div", _extends({
    ref: ref,
    onClick: stopPropagation
  }, props, {
    className: _JSXStyle.dynamic([["2001197514", [theme.palette.border, theme.layout.radius, theme.layout.radius, theme.layout.radius, colors.color, bgColor, sizes.height, colors.borderLeftColor, theme.layout.radius, theme.layout.radius, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + (props && props.className != null && props.className || "btn-dropdown ".concat(className))
  }), mainItemChildren, /*#__PURE__*/React.createElement("details", {
    open: visible,
    className: _JSXStyle.dynamic([["2001197514", [theme.palette.border, theme.layout.radius, theme.layout.radius, theme.layout.radius, colors.color, bgColor, sizes.height, colors.borderLeftColor, theme.layout.radius, theme.layout.radius, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]])
  }, /*#__PURE__*/React.createElement("summary", {
    onClick: clickHandler,
    className: _JSXStyle.dynamic([["2001197514", [theme.palette.border, theme.layout.radius, theme.layout.radius, theme.layout.radius, colors.color, bgColor, sizes.height, colors.borderLeftColor, theme.layout.radius, theme.layout.radius, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]])
  }, /*#__PURE__*/React.createElement(ButtonDropdownIcon, {
    color: colors.color,
    height: sizes.height
  })), /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["2001197514", [theme.palette.border, theme.layout.radius, theme.layout.radius, theme.layout.radius, colors.color, bgColor, sizes.height, colors.borderLeftColor, theme.layout.radius, theme.layout.radius, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "content"
  }, itemChildrenWithoutMain)), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "2001197514",
    dynamic: [theme.palette.border, theme.layout.radius, theme.layout.radius, theme.layout.radius, colors.color, bgColor, sizes.height, colors.borderLeftColor, theme.layout.radius, theme.layout.radius, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]
  }, ".btn-dropdown.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;box-sizing:border-box;border:1px solid ".concat(theme.palette.border, ";border-radius:").concat(theme.layout.radius, ";}.btn-dropdown.__jsx-style-dynamic-selector>button{border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}summary.__jsx-style-dynamic-selector{box-sizing:border-box;-webkit-tap-highlight-color:transparent;list-style:none;outline:none;color:").concat(colors.color, ";background-color:").concat(bgColor, ";height:").concat(sizes.height, ";border-left:1px solid ").concat(colors.borderLeftColor, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";cursor:").concat(disabled || loading ? 'not-allowed' : 'pointer', ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:auto;padding:0 1px;-webkit-transition:background 0.2s ease 0s,border-color 0.2s ease 0s;transition:background 0.2s ease 0s,border-color 0.2s ease 0s;}summary.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}.content.__jsx-style-dynamic-selector{position:absolute;right:0;left:0;z-index:90;width:100%;border-radius:").concat(theme.layout.radius, ";box-shadow:").concat(theme.expressiveness.shadowLarge, ";-webkit-transform:translateY(").concat(theme.layout.gapHalf, ");-ms-transform:translateY(").concat(theme.layout.gapHalf, ");transform:translateY(").concat(theme.layout.gapHalf, ");background-color:").concat(theme.palette.background, ";}.content.__jsx-style-dynamic-selector>button:first-of-type{border-top-left-radius:").concat(theme.layout.radius, ";border-top-right-radius:").concat(theme.layout.radius, ";}.content.__jsx-style-dynamic-selector>button:last-of-type{border-bottom-left-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}"))));
};

ButtonDropdown.defaultProps = defaultProps;
export default React.memo(ButtonDropdown);