@procore/core-react
Version:
React library of Procore Design Guidelines
319 lines (310 loc) • 14.4 kB
JavaScript
var _excluded = ["children", "variant"],
_excluded2 = ["children"],
_excluded3 = ["children", "expanded", "expandableContentMaxHeight"],
_excluded4 = ["children"],
_excluded5 = ["children"],
_excluded6 = ["children"],
_excluded7 = ["isExpanded", "onExpandChange", "children"],
_excluded8 = ["children"],
_excluded9 = ["children"],
_excluded0 = ["children", "icon"],
_excluded1 = ["children"],
_excluded10 = ["children"],
_excluded11 = ["children"],
_excluded12 = ["children"],
_excluded13 = ["children", "variant"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import { Clear, EllipsisVertical, Error, Info, Warning } from '@procore/core-icons/dist';
import { partition } from 'ramda';
import React from 'react';
import { Button } from '../Button';
import { Card } from '../Card';
import { Flex } from '../Flex';
import { Menu, useMenu } from '../Menu/Menu';
import { OverlayTrigger } from '../OverlayTrigger';
import { useI18nContext } from '../_hooks/I18n';
import { OverflowObserver } from '../_hooks/OverflowObserver';
import { addSubcomponents } from '../_utils/addSubcomponents';
import { mergeRefs } from '../_utils/mergeRefs';
import { StyledAction, StyledActionsTrigger, StyledBannerContainer, StyledBody, StyledContent, StyledExpandableContent, StyledExpandableContentContainer, StyledIconContainer, StyledMiniBannerContainer, StyledTitle } from './Banner.styles';
var defaultIcons = {
error: /*#__PURE__*/React.createElement(Error, {
size: "lg"
}),
attention: /*#__PURE__*/React.createElement(Warning, {
size: "lg"
}),
info: /*#__PURE__*/React.createElement(Info, {
size: "lg"
}),
UNSAFE_attention_emphasized: /*#__PURE__*/React.createElement(Warning, {
size: "lg"
})
};
var Banner_ = /*#__PURE__*/React.forwardRef(function Banner(_ref, ref) {
var children = _ref.children,
variant = _ref.variant,
props = _objectWithoutProperties(_ref, _excluded);
var _ref2 = partition(function (element) {
return /*#__PURE__*/React.isValidElement(element) && element.type === ExpandableContent;
}, React.Children.toArray(children)),
_ref3 = _slicedToArray(_ref2, 2),
expandableContentNodes = _ref3[0],
content = _ref3[1];
var isExpandable = expandableContentNodes.length !== 0;
var iconElement = React.useMemo(function () {
return React.Children.toArray(children).find(function (child) {
return /*#__PURE__*/React.isValidElement(child) && child.type === Icon;
});
}, [children]);
var hasCustomIcon = iconElement && iconElement.props.icon;
return /*#__PURE__*/React.createElement(StyledBannerContainer, _extends({
ref: ref,
$isExpandable: isExpandable,
$variant: variant
}, props), isExpandable ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledExpandableContentContainer, {
justifyContent: "space-between",
alignItems: "center",
gap: "lg"
}, !hasCustomIcon && /*#__PURE__*/React.createElement(Icon, {
icon: defaultIcons[variant]
}), content), expandableContentNodes) : /*#__PURE__*/React.createElement(Flex, {
justifyContent: "flex-start",
alignItems: "center",
gap: "lg",
grow: "1"
}, !hasCustomIcon && /*#__PURE__*/React.createElement(Icon, {
icon: defaultIcons[variant]
}), content));
});
var Content = /*#__PURE__*/React.forwardRef(function Content(_ref4, ref) {
var children = _ref4.children,
props = _objectWithoutProperties(_ref4, _excluded2);
return /*#__PURE__*/React.createElement(StyledContent, _extends({}, props, {
ref: ref
}), children);
});
var ExpandableContent = /*#__PURE__*/React.forwardRef(function ExpandableContent(_ref5, ref) {
var children = _ref5.children,
_ref5$expanded = _ref5.expanded,
expanded = _ref5$expanded === void 0 ? false : _ref5$expanded,
_ref5$expandableConte = _ref5.expandableContentMaxHeight,
expandableContentMaxHeight = _ref5$expandableConte === void 0 ? 120 : _ref5$expandableConte,
props = _objectWithoutProperties(_ref5, _excluded3);
var containerRef = React.useRef(null);
return expanded ? /*#__PURE__*/React.createElement(OverflowObserver, null, function (_ref6) {
var overflowRef = _ref6.ref,
isOverflowingY = _ref6.isOverflowingY;
return /*#__PURE__*/React.createElement(StyledExpandableContent, _extends({
ref: mergeRefs(ref, containerRef),
"data-qa": "core-banner-expandable-content",
onAnimationEnd: function onAnimationEnd() {
return overflowRef(containerRef.current);
},
$isOverflowingY: isOverflowingY,
$expandableContentMaxHeight: expandableContentMaxHeight
}, props, isOverflowingY && {
tabIndex: 0
}), children);
}) : null;
});
var Title = /*#__PURE__*/React.forwardRef(function Title(_ref7, ref) {
var children = _ref7.children,
props = _objectWithoutProperties(_ref7, _excluded4);
return /*#__PURE__*/React.createElement(StyledTitle, _extends({}, props, {
ref: ref
}), children);
});
var Body = /*#__PURE__*/React.forwardRef(function Body(_ref8, ref) {
var children = _ref8.children,
props = _objectWithoutProperties(_ref8, _excluded5);
return /*#__PURE__*/React.createElement(StyledBody, _extends({}, props, {
ref: ref
}), children);
});
var Action = /*#__PURE__*/React.forwardRef(function Action(_ref9, ref) {
var children = _ref9.children,
props = _objectWithoutProperties(_ref9, _excluded6);
return /*#__PURE__*/React.createElement(StyledAction, _extends({}, props, {
ref: ref
}), children);
});
var ExpandActionButton = /*#__PURE__*/React.forwardRef(function ExpandActionButton(_ref0, ref) {
var isExpanded = _ref0.isExpanded,
onExpandChange = _ref0.onExpandChange,
children = _ref0.children,
props = _objectWithoutProperties(_ref0, _excluded7);
var I18n = useI18nContext();
var label = children !== null && children !== void 0 ? children : isExpanded ? I18n.t('core.banner.collapse') : I18n.t('core.banner.expand');
return /*#__PURE__*/React.createElement(Button, _extends({
ref: ref,
type: "button",
"aria-expanded": isExpanded,
onClick: function onClick() {
return onExpandChange(!isExpanded);
}
}, props), label);
});
var DropdownAction = /*#__PURE__*/React.forwardRef(function DropdownAction(_ref1, ref) {
var children = _ref1.children,
props = _objectWithoutProperties(_ref1, _excluded8);
return /*#__PURE__*/React.createElement(Menu.Item, _extends({
ref: ref,
item: null
}, props), children);
});
var Actions = /*#__PURE__*/React.forwardRef(function Actions(_ref10, ref) {
var children = _ref10.children,
props = _objectWithoutProperties(_ref10, _excluded9);
var actionButtons = React.Children.toArray(children).filter(function (element) {
return /*#__PURE__*/React.isValidElement(element) && element.type === Action;
});
return /*#__PURE__*/React.createElement(OverlayTrigger, {
overlay: /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Menu, {
ref: function ref(node) {
return node === null || node === void 0 ? void 0 : node.focus();
},
usingHook: useMenu({
isSelectable: function isSelectable(_ref11) {
var type = _ref11.type;
return type === DropdownAction;
}
})
}, /*#__PURE__*/React.createElement(Menu.Options, null, actionButtons.map(function (_ref12, idx) {
var actionButtonProps = _ref12.props;
return /*#__PURE__*/React.createElement(DropdownAction, _extends({
key: idx
}, actionButtonProps));
})))),
ref: ref,
placement: "bottom-right"
}, /*#__PURE__*/React.createElement(StyledActionsTrigger, _extends({
"data-qa": "core-banner-actions-trigger",
variant: "tertiary",
arrow: false,
icon: /*#__PURE__*/React.createElement(EllipsisVertical, null)
}, props)));
});
var Icon = /*#__PURE__*/React.forwardRef(function Icon(_ref13, ref) {
var children = _ref13.children,
icon = _ref13.icon,
props = _objectWithoutProperties(_ref13, _excluded0);
return /*#__PURE__*/React.createElement(StyledIconContainer, _extends({
ref: ref,
"aria-hidden": "true"
}, props), icon);
});
var Dismiss = /*#__PURE__*/React.forwardRef(function Dismiss(_ref14, ref) {
var children = _ref14.children,
props = _objectWithoutProperties(_ref14, _excluded1);
var I18n = useI18nContext();
return /*#__PURE__*/React.createElement(Button, _extends({
"aria-label": I18n.t('core.banner.dismissAlert'),
ref: ref
}, props, {
icon: /*#__PURE__*/React.createElement(Clear, null),
variant: "tertiary"
}));
});
export var ErrorBanner = /*#__PURE__*/React.forwardRef(function ErrorBanner(_ref15, ref) {
var children = _ref15.children,
props = _objectWithoutProperties(_ref15, _excluded10);
return /*#__PURE__*/React.createElement(Banner, _extends({
ref: ref,
variant: "error"
}, props), /*#__PURE__*/React.createElement(Icon, {
icon: /*#__PURE__*/React.createElement(Error, {
size: "lg"
})
}), children);
});
export var InfoBanner = /*#__PURE__*/React.forwardRef(function InfoBanner(_ref16, ref) {
var children = _ref16.children,
props = _objectWithoutProperties(_ref16, _excluded11);
return /*#__PURE__*/React.createElement(Banner, _extends({
ref: ref,
variant: "info"
}, props), /*#__PURE__*/React.createElement(Icon, {
icon: /*#__PURE__*/React.createElement(Info, {
size: "lg"
})
}), children);
});
/**
* @since 11.26.0
*/
export var AttentionBanner = /*#__PURE__*/React.forwardRef(function AttentionBanner(_ref17, ref) {
var children = _ref17.children,
props = _objectWithoutProperties(_ref17, _excluded12);
return /*#__PURE__*/React.createElement(Banner, _extends({
ref: ref,
variant: "attention"
}, props), /*#__PURE__*/React.createElement(Icon, {
icon: /*#__PURE__*/React.createElement(Warning, {
size: "lg"
})
}), children);
});
/**
* @deprecated ActionBanner was renamed to AttentionBanner.
* @deprecatedSince 11.26.0
*/
export var ActionBanner = AttentionBanner;
export var UNSAFE_MiniBanner = /*#__PURE__*/React.forwardRef(function MiniBanner(_ref18, ref) {
var children = _ref18.children,
_ref18$variant = _ref18.variant,
variant = _ref18$variant === void 0 ? 'info' : _ref18$variant,
props = _objectWithoutProperties(_ref18, _excluded13);
return /*#__PURE__*/React.createElement(StyledMiniBannerContainer, _extends({
ref: ref,
variant: variant
}, props), children);
});
Banner_.displayName = 'Banner';
Body.displayName = 'Banner.Body';
Content.displayName = 'Banner.Content';
ExpandableContent.displayName = 'Banner.ExpandableContent';
Title.displayName = 'Banner.Title';
Action.displayName = 'Banner.Action';
ExpandActionButton.displayName = 'Banner.ExpandActionButton';
Actions.displayName = 'Banner.Actions';
DropdownAction.displayName = 'Banner.DropdownAction';
Icon.displayName = 'Banner.Icon';
Dismiss.displayName = 'Banner.Dismiss';
ErrorBanner.displayName = 'ErrorBanner';
InfoBanner.displayName = 'InfoBanner';
AttentionBanner.displayName = 'AttentionBanner';
ActionBanner.displayName = 'ActionBanner';
UNSAFE_MiniBanner.displayName = 'MiniBanner';
/**
We use banners to contextually convey complicated or supplemental information
to a user. Depending on the type of banner, we can provide more information
about a feature or page the user is on, an action the user needs to perform,
or an error the user has encountered.
Procore banners are informative and actionable. Always explain what the user
needs to know (and in some cases, why they’re seeing the banner), and provide
an actionable next step.
@since 10.19.0
@see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-banner--demo)
@see [Design Guidelines](https://design.procore.com/banner)
*/
export var Banner = addSubcomponents({
Body: Body,
Content: Content,
ExpandableContent: ExpandableContent,
Title: Title,
Action: Action,
ExpandActionButton: ExpandActionButton,
Actions: Actions,
Icon: Icon,
Dismiss: Dismiss
}, Banner_);
//# sourceMappingURL=Banner.js.map