@procore/core-react
Version:
React library of Procore Design Guidelines
273 lines (267 loc) • 19.9 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
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 _regeneratorRuntime() { "use strict"; var r = _regenerator(), e = r.m(_regeneratorRuntime), t = (Object.getPrototypeOf ? Object.getPrototypeOf(e) : e.__proto__).constructor; function n(r) { var e = "function" == typeof r && r.constructor; return !!e && (e === t || "GeneratorFunction" === (e.displayName || e.name)); } var o = { "throw": 1, "return": 2, "break": 3, "continue": 3 }; function a(r) { var e, t; return function (n) { e || (e = { stop: function stop() { return t(n.a, 2); }, "catch": function _catch() { return n.v; }, abrupt: function abrupt(r, e) { return t(n.a, o[r], e); }, delegateYield: function delegateYield(r, o, a) { return e.resultName = o, t(n.d, _regeneratorValues(r), a); }, finish: function finish(r) { return t(n.f, r); } }, t = function t(r, _t, o) { n.p = e.prev, n.n = e.next; try { return r(_t, o); } finally { e.next = n.n; } }), e.resultName && (e[e.resultName] = n.v, e.resultName = void 0), e.sent = n.v, e.next = n.n; try { return r.call(this, e); } finally { n.p = e.prev, n.n = e.next; } }; } return (_regeneratorRuntime = function _regeneratorRuntime() { return { wrap: function wrap(e, t, n, o) { return r.w(a(e), t, n, o && o.reverse()); }, isGeneratorFunction: n, mark: r.m, awrap: function awrap(r, e) { return new _OverloadYield(r, e); }, AsyncIterator: _regeneratorAsyncIterator, async: function async(r, e, t, o, u) { return (n(e) ? _regeneratorAsyncGen : _regeneratorAsync)(a(r), e, t, o, u); }, keys: _regeneratorKeys, values: _regeneratorValues }; })(); }
function _regeneratorValues(e) { if (null != e) { var t = e["function" == typeof Symbol && Symbol.iterator || "@@iterator"], r = 0; if (t) return t.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) return { next: function next() { return e && r >= e.length && (e = void 0), { value: e && e[r++], done: !e }; } }; } throw new TypeError(_typeof(e) + " is not iterable"); }
function _regeneratorKeys(e) { var n = Object(e), r = []; for (var t in n) r.unshift(t); return function e() { for (; r.length;) if ((t = r.pop()) in n) return e.value = t, e.done = !1, e; return e.done = !0, e; }; }
function _regeneratorAsync(n, e, r, t, o) { var a = _regeneratorAsyncGen(n, e, r, t, o); return a.next().then(function (n) { return n.done ? n.value : a.next(); }); }
function _regeneratorAsyncGen(r, e, t, o, n) { return new _regeneratorAsyncIterator(_regenerator().w(r, e, t, o), n || Promise); }
function _regeneratorAsyncIterator(t, e) { function n(r, o, i, f) { try { var c = t[r](o), u = c.value; return u instanceof _OverloadYield ? e.resolve(u.v).then(function (t) { n("next", t, i, f); }, function (t) { n("throw", t, i, f); }) : e.resolve(u).then(function (t) { c.value = t, i(c); }, function (t) { return n("throw", t, i, f); }); } catch (t) { f(t); } } var r; this.next || (_regeneratorDefine2(_regeneratorAsyncIterator.prototype), _regeneratorDefine2(_regeneratorAsyncIterator.prototype, "function" == typeof Symbol && Symbol.asyncIterator || "@asyncIterator", function () { return this; })), _regeneratorDefine2(this, "_invoke", function (t, o, i) { function f() { return new e(function (e, r) { n(t, i, e, r); }); } return r = r ? r.then(f, f) : f(); }, !0); }
function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { if (r) i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n;else { var o = function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); }; o("next", 0), o("throw", 1), o("return", 2); } }, _regeneratorDefine2(e, r, n, t); }
function _OverloadYield(e, d) { this.v = e, this.k = d; }
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
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; }
import { Clear } from '@procore/core-icons/dist';
import React from 'react';
import { Button } from '../Button';
import { StyledModal, StyledModalScrim } from '../Modal/Modal.styles';
import { useModalDialogLike } from '../OverlayTrigger/a11yPresets';
import { Portal } from '../Portal';
import { useEventRegistry } from '../_hooks/EventRegistry';
import { OverridableFocusScope } from '../_hooks/FocusScopeOverride';
import { useHotkey } from '../_hooks/Hotkey';
import { useI18nContext } from '../_hooks/I18n';
import { useScrollLock } from '../_hooks/ScrollLock';
import { useUpdateEffect } from '../_hooks/useUpdateEffect';
import { CloseWithConfirmContext, useCloseWithConfirmState } from '../_utils/closeWithConfirm';
import { closingPhasesInOrder, openingPhasesInOrder } from './Tearsheet.constants';
import { animationSpeed, StyledButtonCard, StyledButtonContainer, StyledScrimContainer, StyledTearsheetBody, StyledTearsheetContent } from './Tearsheet.styles';
import { getAnimationState, getScrimClassName, wait } from './Tearsheet.util';
export var TearsheetContext = /*#__PURE__*/React.createContext({
placement: null,
addListener: function addListener() {
return function () {};
}
});
/**
The Tearsheet is a container for complex content placed over another layout,
such as the Detail Page layout. They slide out from one direction on the screen.
They allow users complete complex and detail rich tasks without leaving the page they were on.
@since 10.25.0
@see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-tearsheet--demo)
@see [Design Guidelines](https://design.procore.com/tearsheet)
*/
export var Tearsheet = /*#__PURE__*/React.forwardRef(function Tearsheet(_ref, ref) {
var ariaDescribedBy = _ref['aria-describedby'],
ariaDetails = _ref['aria-details'],
ariaLabelledBy = _ref['aria-labelledby'],
ariaLabel = _ref['aria-label'],
_ref$block = _ref.block,
block = _ref$block === void 0 ? false : _ref$block,
children = _ref.children,
id = _ref.id,
open = _ref.open,
onClose_ = _ref.onClose,
afterShow = _ref.afterShow,
afterHide = _ref.afterHide,
_ref$placement = _ref.placement,
placement = _ref$placement === void 0 ? 'right' : _ref$placement,
role = _ref.role,
_ref$stretch = _ref.stretch,
stretch = _ref$stretch === void 0 ? false : _ref$stretch,
qa = _ref.qa;
var I18n = useI18nContext();
var _React$useState = React.useState('closed'),
_React$useState2 = _slicedToArray(_React$useState, 2),
status = _React$useState2[0],
setStatus = _React$useState2[1];
var _React$useState3 = React.useState('disabled'),
_React$useState4 = _slicedToArray(_React$useState3, 2),
phase = _React$useState4[0],
setPhase = _React$useState4[1];
var _React$useState5 = React.useState(open),
_React$useState6 = _slicedToArray(_React$useState5, 2),
isVisible = _React$useState6[0],
setIsVisible = _React$useState6[1];
var closeBtnRef = React.useRef(null);
var closeWithConfirmState = useCloseWithConfirmState();
var closeWithConfirm = closeWithConfirmState.closeWithConfirm;
var onClose = closeWithConfirm(onClose_);
var _useModalDialogLike = useModalDialogLike({
'aria-describedby': ariaDescribedBy,
'aria-details': ariaDetails,
'aria-labelledby': ariaLabelledBy,
'aria-label': ariaLabel,
'aria-modal': undefined,
id: id,
isOpen: isVisible && status === 'open',
role: role
}),
dialogProps = _useModalDialogLike.dialogProps,
focusScopeProps = _useModalDialogLike.focusScopeProps;
var _useEventRegistry = useEventRegistry(),
registry = _useEventRegistry.registry,
addListener = _useEventRegistry.addListener;
var ctx = React.useMemo(function () {
return {
addListener: addListener,
placement: placement
};
}, [placement, addListener]);
useScrollLock(status !== 'closed');
React.useEffect(function () {
// do not run 'closing' animation if the initial state is closed
if (open) {
setStatus('opening');
}
}, []);
useUpdateEffect(function () {
setStatus(open ? 'opening' : 'closing');
}, [open]);
function handleClose() {
if (status === 'open') {
onClose();
}
}
useHotkey({
key: ['Escape', 'Esc'],
handler: handleClose
});
React.useEffect(function () {
;
_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
var _closeBtnRef$current, _registry$current$aft, _iterator, _step, openingPhase, _iterator2, _step2, closingPhase;
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (!(status === 'opening')) {
_context.next = 28;
break;
}
setIsVisible(true);
_iterator = _createForOfIteratorHelper(openingPhasesInOrder);
_context.prev = 3;
_iterator.s();
case 5:
if ((_step = _iterator.n()).done) {
_context.next = 12;
break;
}
openingPhase = _step.value;
setPhase(openingPhase);
_context.next = 10;
return wait(animationSpeed[openingPhase]);
case 10:
_context.next = 5;
break;
case 12:
_context.next = 17;
break;
case 14:
_context.prev = 14;
_context.t0 = _context["catch"](3);
_iterator.e(_context.t0);
case 17:
_context.prev = 17;
_iterator.f();
return _context.finish(17);
case 20:
setStatus('open');
setPhase('disabled');
(_closeBtnRef$current = closeBtnRef.current) === null || _closeBtnRef$current === void 0 ? void 0 : _closeBtnRef$current.focus();
_context.next = 25;
return wait(0);
case 25:
(_registry$current$aft = registry.current.afterShow) === null || _registry$current$aft === void 0 ? void 0 : _registry$current$aft.forEach(function (cb) {
return cb();
});
afterShow === null || afterShow === void 0 ? void 0 : afterShow();
return _context.abrupt("return");
case 28:
if (!(status === 'closing')) {
_context.next = 51;
break;
}
_iterator2 = _createForOfIteratorHelper(closingPhasesInOrder);
_context.prev = 30;
_iterator2.s();
case 32:
if ((_step2 = _iterator2.n()).done) {
_context.next = 39;
break;
}
closingPhase = _step2.value;
setPhase(closingPhase);
_context.next = 37;
return wait(animationSpeed[closingPhase]);
case 37:
_context.next = 32;
break;
case 39:
_context.next = 44;
break;
case 41:
_context.prev = 41;
_context.t1 = _context["catch"](30);
_iterator2.e(_context.t1);
case 44:
_context.prev = 44;
_iterator2.f();
return _context.finish(44);
case 47:
setStatus('closed');
setPhase('disabled');
setIsVisible(false);
afterHide === null || afterHide === void 0 ? void 0 : afterHide();
case 51:
case "end":
return _context.stop();
}
}, _callee, null, [[3, 14, 17, 20], [30, 41, 44, 47]]);
}))();
}, [status]);
if (!isVisible) {
return null;
}
return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(OverridableFocusScope, _extends({}, focusScopeProps, {
restoreFocus: true
}), /*#__PURE__*/React.createElement(StyledModal, {
ref: ref,
className: getScrimClassName(status, phase)
}, /*#__PURE__*/React.createElement(StyledModalScrim, null), /*#__PURE__*/React.createElement(StyledTearsheetContent, _extends({}, dialogProps, {
ref: ref,
$placement: placement
}, getAnimationState('tearsheet', phase, status)), /*#__PURE__*/React.createElement(StyledScrimContainer, {
$placement: placement,
onClick: handleClose,
"data-qa": qa === null || qa === void 0 ? void 0 : qa.scrim
}, /*#__PURE__*/React.createElement(StyledButtonContainer, {
$placement: placement
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(StyledButtonCard, getAnimationState('closeButton', phase, status), /*#__PURE__*/React.createElement(Button, {
ref: closeBtnRef,
"aria-label": I18n.t('core.tearsheet.a11y.close'),
onClick: function onClick(e) {
e.stopPropagation();
onClose();
},
size: "lg",
variant: "tertiary",
icon: /*#__PURE__*/React.createElement(Clear, null),
"data-qa": qa === null || qa === void 0 ? void 0 : qa.closeButton
}))))), /*#__PURE__*/React.createElement(StyledTearsheetBody, {
"aria-labelledby": ariaLabelledBy,
role: "region",
tabIndex: 0,
onScroll: function onScroll() {
var _registry$current$scr;
(_registry$current$scr = registry.current.scroll) === null || _registry$current$scr === void 0 ? void 0 : _registry$current$scr.forEach(function (cb) {
return cb();
});
},
$placement: placement,
$stretch: stretch,
$block: block
}, /*#__PURE__*/React.createElement(TearsheetContext.Provider, {
value: ctx
}, /*#__PURE__*/React.createElement(CloseWithConfirmContext.Provider, {
value: closeWithConfirmState
}, children)))))));
});
//# sourceMappingURL=Tearsheet.js.map