@bigbinary/neetoui
Version:
neetoUI drives the experience at all neeto products
316 lines (308 loc) • 13.3 kB
JavaScript
import _extends from '@babel/runtime/helpers/extends';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default, { forwardRef, useState } from 'react';
import Tippy from '@tippyjs/react';
import classnames from 'classnames';
import { Down } from '@bigbinary/neeto-icons';
import { isNil } from 'ramda';
import Button from './Button.js';
import { h as hyphenize, n as noop } from './index-Dxaw6gl9.js';
import { isPresent } from '@bigbinary/neeto-cist';
import Tooltip from './Tooltip.js';
import { Link } from 'react-router-dom';
import './Spinner.js';
import 'tippy.js';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import 'qs';
import './en-CIkXIYyl.js';
import '@babel/runtime/helpers/toConsumableArray';
import 'dayjs';
import 'dayjs/plugin/localeData';
import 'dayjs/plugin/utc';
import 'dayjs/plugin/weekday';
import 'dayjs/plugin/weekOfYear';
var Divider = function Divider(props) {
return /*#__PURE__*/React__default.createElement("li", _extends({
className: "neeto-ui-dropdown__popup-divider"
}, props));
};
var _excluded$3 = ["children", "className"];
var Menu = function Menu(_ref) {
var children = _ref.children,
className = _ref.className,
otherProps = _objectWithoutProperties(_ref, _excluded$3);
return /*#__PURE__*/React__default.createElement("ul", _extends({
className: classnames("neeto-ui-dropdown__popup-menu", className)
}, otherProps), children);
};
var _excluded$2 = ["children", "className", "tooltipProps"];
var MenuItem = function MenuItem(_ref) {
var children = _ref.children,
className = _ref.className,
tooltipProps = _ref.tooltipProps,
otherProps = _objectWithoutProperties(_ref, _excluded$2);
var renderMenuItem = function renderMenuItem() {
return /*#__PURE__*/React__default.createElement("li", _extends({
className: classnames("neeto-ui-dropdown__popup-menu-item", className)
}, otherProps), children);
};
if (isPresent(tooltipProps)) {
return /*#__PURE__*/React__default.createElement(Tooltip, tooltipProps, renderMenuItem());
}
return renderMenuItem();
};
var _excluded$1 = ["children", "className", "isActive", "isDisabled", "style", "prefix", "suffix", "type", "to", "href", "tooltipProps"];
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var ITEM_BTN_STYLES = {
"default": "default",
danger: "danger"
};
var BUTTON_TYPES = {
button: "button",
reset: "reset",
submit: "submit"
};
var MenuItemButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
var children = _ref.children,
className = _ref.className,
isActive = _ref.isActive,
isDisabled = _ref.isDisabled,
_ref$style = _ref.style,
style = _ref$style === void 0 ? ITEM_BTN_STYLES["default"] : _ref$style,
prefix = _ref.prefix,
suffix = _ref.suffix,
_ref$type = _ref.type,
type = _ref$type === void 0 ? BUTTON_TYPES.button : _ref$type,
_ref$to = _ref.to,
to = _ref$to === void 0 ? "" : _ref$to,
_ref$href = _ref.href,
href = _ref$href === void 0 ? "" : _ref$href,
tooltipProps = _ref.tooltipProps,
otherProps = _objectWithoutProperties(_ref, _excluded$1);
var Parent, elementSpecificProps;
if (to) {
Parent = Link;
elementSpecificProps = {
to: to
};
} else if (href) {
Parent = "a";
elementSpecificProps = {
href: href
};
} else {
Parent = "button";
elementSpecificProps = {
type: type
};
}
return /*#__PURE__*/React__default.createElement(MenuItem, {
tooltipProps: tooltipProps
}, /*#__PURE__*/React__default.createElement(Parent, _extends({
disabled: isDisabled,
className: classnames("neeto-ui-dropdown__popup-menu-item-btn", className, {
"neeto-ui-dropdown__popup-menu-item-btn--active": isActive,
"neeto-ui-dropdown__popup-menu-item-btn--disabled": isDisabled,
"neeto-ui-dropdown__popup-menu-item-btn--style-danger": style === ITEM_BTN_STYLES.danger
})
}, _objectSpread$1(_objectSpread$1({
ref: ref
}, otherProps), elementSpecificProps)), prefix && /*#__PURE__*/React__default.createElement("div", {
className: "neeto-ui-dropdown__popup-menu-item-btn__prefix"
}, prefix), children, suffix && /*#__PURE__*/React__default.createElement("div", {
className: "neeto-ui-dropdown__popup-menu-item-btn__suffix"
}, suffix)));
});
MenuItemButton.displayName = "MenuItemButton";
MenuItem.Button = MenuItemButton;
var _excluded = ["style", "size"],
_excluded2 = ["icon", "label", "isOpen", "onClose", "dropdownProps", "position", "children", "className", "buttonStyle", "buttonSize", "buttonProps", "customTarget", "disabled", "closeOnEsc", "closeOnSelect", "closeOnOutsideClick", "dropdownModifiers", "trigger", "strategy", "onClick"],
_excluded3 = ["classNames", "className"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var BTN_STYLES = {
primary: "primary",
secondary: "secondary",
tertiary: "tertiary",
danger: "danger",
danger_text: "danger-text",
text: "text",
link: "link"
};
var BTN_SIZES = {
small: "small",
medium: "medium",
large: "large"
};
var STRATEGY = {
absolute: "absolute",
fixed: "fixed"
};
var PLACEMENT = {
auto: "auto",
autoStart: "auto-start",
autoEnd: "auto-end",
top: "top",
topStart: "top-start",
topEnd: "top-end",
bottom: "bottom",
bottomStart: "bottom-start",
bottomEnd: "bottom-end",
right: "right",
rightStart: "right-start",
rightEnd: "right-end",
left: "left",
leftStart: "left-start",
leftEnd: "left-end"
};
var TRIGGERS = {
click: "click",
hover: "mouseenter focus",
all: "mouseenter focus click",
manual: "manual"
};
var hideOnEsc = {
name: "hideOnEsc",
defaultValue: true,
fn: function fn(_ref) {
var hide = _ref.hide,
hideOnEsc = _ref.props.hideOnEsc;
function onKeyDown(event) {
var _event$key;
if (((_event$key = event.key) === null || _event$key === void 0 ? void 0 : _event$key.toLowerCase()) === "escape" && hideOnEsc) hide();
}
return {
onShow: function onShow() {
document.addEventListener("keydown", onKeyDown);
},
onHide: function onHide() {
document.removeEventListener("keydown", onKeyDown);
}
};
}
};
var plugins = [hideOnEsc];
var Dropdown = function Dropdown(_ref2) {
var icon = _ref2.icon,
label = _ref2.label,
isOpen = _ref2.isOpen,
_ref2$onClose = _ref2.onClose,
onClose = _ref2$onClose === void 0 ? noop : _ref2$onClose,
_ref2$dropdownProps = _ref2.dropdownProps,
dropdownProps = _ref2$dropdownProps === void 0 ? {} : _ref2$dropdownProps,
_ref2$position = _ref2.position,
position = _ref2$position === void 0 ? PLACEMENT.bottomEnd : _ref2$position,
children = _ref2.children,
className = _ref2.className,
_ref2$buttonStyle = _ref2.buttonStyle,
buttonStyle = _ref2$buttonStyle === void 0 ? BTN_STYLES.primary : _ref2$buttonStyle,
_ref2$buttonSize = _ref2.buttonSize,
buttonSize = _ref2$buttonSize === void 0 ? BTN_SIZES.medium : _ref2$buttonSize,
_ref2$buttonProps = _ref2.buttonProps,
_ref2$buttonProps2 = _ref2$buttonProps === void 0 ? {} : _ref2$buttonProps,
style = _ref2$buttonProps2.style,
size = _ref2$buttonProps2.size,
buttonProps = _objectWithoutProperties(_ref2$buttonProps2, _excluded),
customTarget = _ref2.customTarget,
_ref2$disabled = _ref2.disabled,
disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
_ref2$closeOnEsc = _ref2.closeOnEsc,
closeOnEsc = _ref2$closeOnEsc === void 0 ? true : _ref2$closeOnEsc,
_ref2$closeOnSelect = _ref2.closeOnSelect,
closeOnSelect = _ref2$closeOnSelect === void 0 ? true : _ref2$closeOnSelect,
_ref2$closeOnOutsideC = _ref2.closeOnOutsideClick,
closeOnOutsideClick = _ref2$closeOnOutsideC === void 0 ? true : _ref2$closeOnOutsideC,
_ref2$dropdownModifie = _ref2.dropdownModifiers,
dropdownModifiers = _ref2$dropdownModifie === void 0 ? [] : _ref2$dropdownModifie,
_ref2$trigger = _ref2.trigger,
trigger = _ref2$trigger === void 0 ? TRIGGERS.click : _ref2$trigger,
_ref2$strategy = _ref2.strategy,
strategy = _ref2$strategy === void 0 ? STRATEGY.absolute : _ref2$strategy,
onClick = _ref2.onClick,
otherProps = _objectWithoutProperties(_ref2, _excluded2);
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
instance = _useState2[0],
setInstance = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
mounted = _useState4[0],
setMounted = _useState4[1];
var isControlled = !isNil(isOpen);
var controlledProps = isControlled ? {
visible: isOpen
} : {
onClickOutside: function onClickOutside() {
return closeOnOutsideClick;
}
};
var dropdownClassnames = dropdownProps.classNames,
dropdownClassName = dropdownProps.className,
otherDropdownProps = _objectWithoutProperties(dropdownProps, _excluded3);
var close = function close() {
return instance.hide();
};
return /*#__PURE__*/React__default.createElement(Tippy, _extends({
interactive: true,
animation: false,
arrow: false,
duration: 0
// hideOnClick determines whether the dropdown should be hidden when the user clicks outside of the dropdown.
// https://atomiks.github.io/tippyjs/v6/all-props/#hideonclick
,
hideOnClick: isControlled ? undefined : closeOnOutsideClick || "toggle",
hideOnEsc: closeOnEsc,
maxWidth: "none",
offset: 0,
placement: position || PLACEMENT.bottomEnd,
popperOptions: {
strategy: strategy,
modifiers: dropdownModifiers
},
role: "dropdown",
theme: "light",
trigger: isControlled ? undefined : TRIGGERS[trigger],
className: classnames("neeto-ui-dropdown", _defineProperty({}, className, className)),
content: mounted ? /*#__PURE__*/React__default.createElement("div", _extends({
"data-cy": "".concat(hyphenize(label), "-dropdown-container"),
className: classnames("neeto-ui-dropdown__popup", _defineProperty(_defineProperty({}, dropdownClassName, dropdownClassName), dropdownClassnames, dropdownClassnames)),
onClick: closeOnSelect ? close : noop
}, otherDropdownProps), children) : null,
onCreate: function onCreate(instance) {
return instance && setInstance(instance);
},
onMount: function onMount() {
return setMounted(true);
},
onHidden: function onHidden() {
onClose();
setMounted(false);
}
}, _objectSpread(_objectSpread({
disabled: disabled,
plugins: plugins
}, otherProps), controlledProps)), customTarget ? /*#__PURE__*/React__default.createElement("span", {
onClick: onClick,
className: classnames({
"neeto-ui-cursor-not-allowed": disabled
})
}, typeof customTarget === "function" ? customTarget() : customTarget) : /*#__PURE__*/React__default.createElement(Button, _extends({
label: label,
onClick: onClick,
"data-cy": "".concat(hyphenize(label), "-dropdown-icon"),
disabled: disabled || (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.disabled),
icon: icon || Down,
iconPosition: "right",
size: size !== null && size !== void 0 ? size : buttonSize,
style: style !== null && style !== void 0 ? style : buttonStyle
}, buttonProps)));
};
Dropdown.Menu = Menu;
Dropdown.MenuItem = MenuItem;
Dropdown.Divider = Divider;
export { Dropdown as default };
//# sourceMappingURL=Dropdown.js.map