@vimeo/iris
Version:
Vimeo Design System
144 lines (137 loc) • 8.36 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib_es6 = require('../../tslib.es6-3ec409b7.js');
var React = require('react');
var components_TourPoint_TourPoint_style = require('./TourPoint.style.js');
var components_TourPoint_TourPoint_context = require('./TourPoint.context.js');
var components_TourPoint_TourPoint_motion = require('./TourPoint.motion.js');
var components_TourPoint_Caret = require('./Caret.js');
var components_Button_Button = require('../Button/Button.js');
var utils_hooks_useAnchor_useAnchor = require('../../utils/hooks/useAnchor/useAnchor.js');
var typography_Header_Header = require('../../typography/Header/Header.js');
var typography_Paragraph_Paragraph = require('../../typography/Paragraph/Paragraph.js');
var utils_general_capitalize = require('../../utils/general/capitalize.js');
var utils_hooks_usePortal = require('../../utils/hooks/usePortal.js');
require('styled-components');
require('../../typography/Text/Text.js');
require('../../typography/Text/Text.style.js');
require('polished');
require('../../typography/typography.js');
require('../../tokens/core.js');
require('../../tokens/color/index.js');
require('../../tokens/color/background/background.js');
require('../../tokens/util/readToken.js');
require('../../color/colors.js');
require('../../tokens/util/clamp.js');
require('../../tokens/color/format/format.js');
require('../../tokens/color/format/primary.js');
require('../../tokens/color/format/secondary.js');
require('../../tokens/color/format/tertiary.js');
require('../../tokens/color/rainbow/rainbow.js');
require('../../tokens/color/rainbow/conic/index.js');
require('../../tokens/color/rainbow/conic/sm.js');
require('../../tokens/color/rainbow/conic/xl.js');
require('../../tokens/color/rainbow/linear/index.js');
require('../../tokens/color/rainbow/linear/sm.js');
require('../../tokens/color/rainbow/linear/xl.js');
require('../../tokens/color/livestream/livestream.js');
require('../../tokens/color/status/status.js');
require('../../tokens/color/status/caution.js');
require('../../tokens/color/status/negative.js');
require('../../tokens/color/status/positive.js');
require('../../tokens/color/stroke/stroke.js');
require('../../tokens/color/surface/surface.js');
require('../../tokens/color/text/text.js');
require('../../tokens/util/round.js');
require('../../tokens/color/upsell/upsell.js');
require('../../tokens/color/upsell/sm.js');
require('../../tokens/color/upsell/xl.js');
require('../../tokens/color/upsell/new.js');
require('../../tokens/edge/edge.js');
require('../../tokens/space/space.js');
require('../../tokens/typography/index.js');
require('../../tokens/typography/size/size.js');
require('../../typography/Text/EditableText.js');
require('../../utils/HOCs/withIris.js');
require('../../utils/hooks/useLayoutStyles.js');
require('../../utils/DOM/geometry.js');
require('../../utils/css.js');
require('../../utils/general/generateUID.js');
require('../../use-id-29bc1b38.js');
require('../../es.typed-array.set-5ee45ede.js');
require('../Button/Button.style.js');
require('../Button/Button.config.js');
require('../Button/FeaturedIcon.js');
require('../../themes/index.js');
require('../LoaderCircular/LoaderCircular.js');
require('../LoaderCircular/LoaderCircular.style.js');
require('../../utils/hooks/useDeprecate.js');
require('../../utils/general/mergeReactRefs.js');
require('../../utils/general/throttle.js');
require('../../typography/Header/Header.style.js');
require('../../typography/Paragraph/Paragraph.style.js');
require('react-dom');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
TourPoint.Motion = components_TourPoint_TourPoint_motion.Motion;
var lessThan = function (a, b) { return a < b && a; };
var greaterThan = function (a, b) { return a > b || a; };
function TourPoint(_a) {
var _b;
var _c = _a.active, active = _c === void 0 ? true : _c, _d = _a.alt, alt = _d === void 0 ? null : _d, _e = _a.attach, attach = _e === void 0 ? 'left' : _e, children = _a.children, _f = _a.confirmation, confirmation = _f === void 0 ? 'Got it' : _f, _g = _a.dismission, dismission = _g === void 0 ? 'Dismiss' : _g, content = _a.content, getStepsTranslation = _a.getStepsTranslation, onClose = _a.onClose, src = _a.src, step = _a.step, style = _a.style, title = _a.title, props = tslib_es6.__rest(_a, ["active", "alt", "attach", "children", "confirmation", "dismission", "content", "getStepsTranslation", "onClose", "src", "step", "style", "title"]);
var _h = React.useContext(components_TourPoint_TourPoint_context.TourContext), index = _h.active, indexSet = _h.activeSet, automated = _h.automated, steps = _h.steps;
var ref = React.useRef(null);
var refAnchor = React.useRef(null);
var childrenClone = React.cloneElement(children, { ref: ref });
var propsAnchor = utils_hooks_useAnchor_useAnchor.useAnchor(ref, attach, active);
var Image = src && React__default["default"].createElement("img", { src: src, alt: alt });
var Title = title && React__default["default"].createElement(typography_Header_Header.Header, { size: "3" }, title);
var Content = slotProgressive(content, React__default["default"].createElement(typography_Paragraph_Paragraph.Paragraph, { size: "1" }));
function stepFn(direction, increment, compare) {
if (increment === void 0) { increment = 0; }
if (compare === void 0) { compare = null; }
var next = compare ? compare(index + increment, steps) : null;
return function (event) {
if (automated) {
onClose === null || onClose === void 0 ? void 0 : onClose(event, { direction: direction });
indexSet(next);
}
};
}
var stepBack = stepFn('back', -1, lessThan);
var stepNext = stepFn('next', 1, greaterThan);
var dismiss = stepFn('dismiss');
var Confirm = slotProgressive(confirmation, React__default["default"].createElement(components_Button_Button.Button, { onClick: stepNext }));
var Dismiss = slotProgressive(dismission, React__default["default"].createElement(components_Button_Button.Button, { variant: "minimalTransparent", onClick: dismiss }));
var clipPath = components_TourPoint_Caret.buildClipPaths(attach);
var side = attach.split('-')[0] || attach;
var marginSide = 'margin' + utils_general_capitalize.capitalize(side);
var margin = '1rem';
var zIndex = (style === null || style === void 0 ? void 0 : style.zIndex) || 6000;
var childrenPortal = utils_hooks_usePortal.usePortal(React__default["default"].createElement(utils_hooks_useAnchor_useAnchor.Anchor, tslib_es6.__assign({ zIndex: zIndex }, propsAnchor),
React__default["default"].createElement(components_TourPoint_TourPoint_motion.Motion, { attach: attach },
React__default["default"].createElement(components_TourPoint_TourPoint_style.TourPointStyled, tslib_es6.__assign({ style: tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, style), clipPath), (_b = {}, _b[marginSide] = margin, _b)), ref: refAnchor }, props),
Image,
Title,
Content,
React__default["default"].createElement(components_TourPoint_TourPoint_style.Footer, null,
steps && (React__default["default"].createElement(components_TourPoint_TourPoint_style.Steps, { onClick: stepBack }, getStepsTranslation
? getStepsTranslation({
currentStep: step,
totalSteps: steps,
})
: "Step ".concat(step, " of ").concat(steps))),
Dismiss,
Confirm),
React__default["default"].createElement(components_TourPoint_Caret.Caret, { attach: attach })))));
return (React__default["default"].createElement(React__default["default"].Fragment, null,
childrenClone,
childrenPortal));
}
function slotProgressive(children, Wrapper) {
var ProgressiveElement = typeof children === 'string' || typeof children === 'number'
? React.cloneElement(Wrapper, { children: children })
: children;
return ProgressiveElement;
}
exports.TourPoint = TourPoint;