@vimeo/iris/components/TourPoint/Caret.js

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../../tslib.es6-3ec409b7.js');
var React = require('react');
var styled = require('styled-components');
var tokens_core = 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('polished');
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');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

function Caret(_a) {
    var _b = _a.attach, attach = _b === void 0 ? 'left' : _b;
    var style = attachPosition({ attach: attach });
    return React__default["default"].createElement(CaretStyled, { style: style });
}
function caret(side, sideA, sideB, borderSize) {
    return side === sideA || side === sideB ? borderSize : 0;
}
var CaretStyled = styled__default["default"].div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  position: absolute;\n  width: 1rem;\n  height: 1rem;\n  transform: rotate(-45deg);\n  background: ", ";\n  border: 0.25rem solid transparent;\n  background-clip: padding-box;\n"], ["\n  position: absolute;\n  width: 1rem;\n  height: 1rem;\n  transform: rotate(-45deg);\n  background: ", ";\n  border: 0.25rem solid transparent;\n  background-clip: padding-box;\n"])), tokens_core.core.color.surface(600));
function attachPosition(_a) {
    var _b;
    var _c = _a.attach, attach = _c === void 0 ? 'left' : _c, _d = _a.distance, distance = _d === void 0 ? 1 : _d, _e = _a.size, size = _e === void 0 ? 0.5 : _e;
    var borderSize = '0.25rem';
    var _f = tslib_es6.__read(attach.split('-'), 2), side = _f[0], placement = _f[1];
    var attachSide = distance + size + 'rem';
    var attachCenter = 'calc(50% - ' + size + 'rem)';
    var axisY = side === 'top' || side === 'bottom';
    var shiftProp = placement ? placement : axisY ? 'left' : 'top';
    var shiftVal = placement ? attachSide : attachCenter;
    var border = {
        borderTopWidth: caret(side, 'top', 'left', borderSize),
        borderRightWidth: caret(side, 'right', 'top', borderSize),
        borderBottomWidth: caret(side, 'bottom', 'right', borderSize),
        borderLeftWidth: caret(side, 'left', 'bottom', borderSize),
    };
    var borderRadius = '0.125rem';
    var styleSide = tslib_es6.__assign((_b = {}, _b[side] = '-0.68rem', _b[shiftProp] = shiftVal, _b.borderRadius = borderRadius, _b), border);
    return styleSide;
}
function buildClipPaths(attach) {
    var _a = tslib_es6.__read(attach.split('-'), 2), side = _a[0], placement = _a[1];
    var axis = side === 'left' || side === 'right' ? 'X' : 'Y';
    var TL = side === 'left' || side === 'top';
    var sign = TL ? 1 : -1;
    var operator = TL ? '+' : '-';
    var end = TL ? '0%' : '100%';
    var distance = 0.67 * sign * -1 + 'rem';
    var inset = "calc(".concat(end, " ").concat(operator, " 1rem)");
    var translate = "translate".concat(axis, "(").concat(distance, ")");
    var _b = tslib_es6.__read(buildVertices(placement, side, inset), 3), A = _b[0], B = _b[1], Tip = _b[2];
    var clipPath = "polygon(".concat(A, ", ").concat(Tip, ", ").concat(B, ")");
    return {
        '--caret-translate': translate,
        '--caret-clip-path': clipPath,
    };
}
function buildVertices(placement, side, inset) {
    var TL = placement === 'left' || placement === 'top';
    var end = TL ? '0%' : '100%';
    var sign = TL ? 1 : -1;
    var points = buildPoints(placement, sign, end);
    return points.map(function (point, i) {
        var tip = i === 2;
        var outset = inset.replace('1rem', '0rem');
        return tip
            ? buildVertex(side, outset, point)
            : buildVertex(side, inset, point);
    });
}
function buildVertex(side, X, Y) {
    return side === 'left' || side === 'right'
        ? "".concat(X, " ").concat(Y)
        : "".concat(Y, " ").concat(X);
}
function buildPoints(placement, sign, end) {
    if (!placement) {
        return [
            'calc(50% + 1rem)',
            'calc(50% - 1rem)',
            'calc(50% + 0rem)',
        ];
    }
    else {
        return [
            "calc(".concat(end, " + ").concat(sign * 1.25, "rem)"),
            "calc(".concat(end, " + ").concat(sign * 3.25, "rem)"),
            "calc(".concat(end, " + ").concat(sign * 2.25, "rem)"),
        ];
    }
}
var templateObject_1;

exports.Caret = Caret;
exports.CaretStyled = CaretStyled;
exports.buildClipPaths = buildClipPaths;