@vimeo/iris
Version:
Vimeo Design System
136 lines (133 loc) • 7.41 kB
JavaScript
import { b as __rest, c as __assign } from '../../tslib.es6-7f0e734f.js';
import React__default, { useContext, useRef, cloneElement } from 'react';
import { TourPointStyled, Footer, Steps } from './TourPoint.style.esm.js';
import { TourContext } from './TourPoint.context.esm.js';
import { Motion } from './TourPoint.motion.esm.js';
import { buildClipPaths, Caret } from './Caret.esm.js';
import { Button } from '../Button/Button.esm.js';
import { useAnchor, Anchor } from '../../utils/hooks/useAnchor/useAnchor.esm.js';
import { Header } from '../../typography/Header/Header.esm.js';
import { Paragraph } from '../../typography/Paragraph/Paragraph.esm.js';
import { capitalize } from '../../utils/general/capitalize.esm.js';
import { usePortal } from '../../utils/hooks/usePortal.esm.js';
import 'styled-components';
import '../../typography/Text/Text.esm.js';
import '../../typography/Text/Text.style.esm.js';
import 'polished';
import '../../typography/typography.esm.js';
import '../../tokens/core.esm.js';
import '../../tokens/color/index.esm.js';
import '../../tokens/color/background/background.esm.js';
import '../../tokens/util/readToken.esm.js';
import '../../color/colors.esm.js';
import '../../tokens/util/clamp.esm.js';
import '../../tokens/color/format/format.esm.js';
import '../../tokens/color/format/primary.esm.js';
import '../../tokens/color/format/secondary.esm.js';
import '../../tokens/color/format/tertiary.esm.js';
import '../../tokens/color/rainbow/rainbow.esm.js';
import '../../tokens/color/rainbow/conic/index.esm.js';
import '../../tokens/color/rainbow/conic/sm.esm.js';
import '../../tokens/color/rainbow/conic/xl.esm.js';
import '../../tokens/color/rainbow/linear/index.esm.js';
import '../../tokens/color/rainbow/linear/sm.esm.js';
import '../../tokens/color/rainbow/linear/xl.esm.js';
import '../../tokens/color/livestream/livestream.esm.js';
import '../../tokens/color/status/status.esm.js';
import '../../tokens/color/status/caution.esm.js';
import '../../tokens/color/status/negative.esm.js';
import '../../tokens/color/status/positive.esm.js';
import '../../tokens/color/stroke/stroke.esm.js';
import '../../tokens/color/surface/surface.esm.js';
import '../../tokens/color/text/text.esm.js';
import '../../tokens/util/round.esm.js';
import '../../tokens/color/upsell/upsell.esm.js';
import '../../tokens/color/upsell/sm.esm.js';
import '../../tokens/color/upsell/xl.esm.js';
import '../../tokens/color/upsell/new.esm.js';
import '../../tokens/edge/edge.esm.js';
import '../../tokens/space/space.esm.js';
import '../../tokens/typography/index.esm.js';
import '../../tokens/typography/size/size.esm.js';
import '../../typography/Text/EditableText.esm.js';
import '../../utils/HOCs/withIris.esm.js';
import '../../utils/hooks/useLayoutStyles.esm.js';
import '../../utils/DOM/geometry.esm.js';
import '../../utils/css.esm.js';
import '../../utils/general/generateUID.esm.js';
import '../../use-id-cc996331.js';
import '../../es.typed-array.set-c204e812.js';
import '../Button/Button.style.esm.js';
import '../Button/Button.config.esm.js';
import '../Button/FeaturedIcon.esm.js';
import '../../themes/index.esm.js';
import '../LoaderCircular/LoaderCircular.esm.js';
import '../LoaderCircular/LoaderCircular.style.esm.js';
import '../../utils/hooks/useDeprecate.esm.js';
import '../../utils/general/mergeReactRefs.esm.js';
import '../../utils/general/throttle.esm.js';
import '../../typography/Header/Header.style.esm.js';
import '../../typography/Paragraph/Paragraph.style.esm.js';
import 'react-dom';
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 = __rest(_a, ["active", "alt", "attach", "children", "confirmation", "dismission", "content", "getStepsTranslation", "onClose", "src", "step", "style", "title"]);
var _h = useContext(TourContext), index = _h.active, indexSet = _h.activeSet, automated = _h.automated, steps = _h.steps;
var ref = useRef(null);
var refAnchor = useRef(null);
var childrenClone = cloneElement(children, { ref: ref });
var propsAnchor = useAnchor(ref, attach, active);
var Image = src && React__default.createElement("img", { src: src, alt: alt });
var Title = title && React__default.createElement(Header, { size: "3" }, title);
var Content = slotProgressive(content, React__default.createElement(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.createElement(Button, { onClick: stepNext }));
var Dismiss = slotProgressive(dismission, React__default.createElement(Button, { variant: "minimalTransparent", onClick: dismiss }));
var clipPath = buildClipPaths(attach);
var side = attach.split('-')[0] || attach;
var marginSide = 'margin' + capitalize(side);
var margin = '1rem';
var zIndex = (style === null || style === void 0 ? void 0 : style.zIndex) || 6000;
var childrenPortal = usePortal(React__default.createElement(Anchor, __assign({ zIndex: zIndex }, propsAnchor),
React__default.createElement(Motion, { attach: attach },
React__default.createElement(TourPointStyled, __assign({ style: __assign(__assign(__assign({}, style), clipPath), (_b = {}, _b[marginSide] = margin, _b)), ref: refAnchor }, props),
Image,
Title,
Content,
React__default.createElement(Footer, null,
steps && (React__default.createElement(Steps, { onClick: stepBack }, getStepsTranslation
? getStepsTranslation({
currentStep: step,
totalSteps: steps,
})
: "Step ".concat(step, " of ").concat(steps))),
Dismiss,
Confirm),
React__default.createElement(Caret, { attach: attach })))));
return (React__default.createElement(React__default.Fragment, null,
childrenClone,
childrenPortal));
}
function slotProgressive(children, Wrapper) {
var ProgressiveElement = typeof children === 'string' || typeof children === 'number'
? cloneElement(Wrapper, { children: children })
: children;
return ProgressiveElement;
}
export { TourPoint };