@vimeo/iris/components/Button/Button.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 components_Button_Button_style = require('./Button.style.js');
var components_Button_Button_config = require('./Button.config.js');
var components_Button_FeaturedIcon = require('./FeaturedIcon.js');
var components_LoaderCircular_LoaderCircular = require('../LoaderCircular/LoaderCircular.js');
var utils_HOCs_withIris = require('../../utils/HOCs/withIris.js');
var utils_hooks_useDeprecate = require('../../utils/hooks/useDeprecate.js');
var utils_general_mergeReactRefs = require('../../utils/general/mergeReactRefs.js');
var utils_css = require('../../utils/css.js');
require('styled-components');
require('polished');
require('../../themes/index.js');
require('../../color/colors.js');
require('../../tokens/core.js');
require('../../tokens/color/index.js');
require('../../tokens/color/background/background.js');
require('../../tokens/util/readToken.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('../LoaderCircular/LoaderCircular.style.js');

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

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

var Button = utils_HOCs_withIris.withIris(ButtonComponent, true, 'components/Button/Button');
var deprecatedProps = {
    circular: '@vimeo/iris: Button `circular` prop has been deprecated. Please use `pill`. `circular` will be removed in Iris 9.\n',
};
function ButtonComponent(_a) {
    var _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, children = _a.children, color = _a.color, _d = _a.element, element = _d === void 0 ? 'button' : _d, fluid = _a.fluid, _e = _a.format, format = _e === void 0 ? 'primary' : _e, forwardRef = _a.forwardRef, icon = _a.icon, _f = _a.iconPosition, iconPosition = _f === void 0 ? 'left' : _f, loading = _a.loading, _g = _a.pill, pill = _g === void 0 ? false : _g, _h = _a.size, size = _h === void 0 ? 'md' : _h, status = _a.status, _j = _a.textShift, textShift = _j === void 0 ? false : _j, theme = _a.theme, type = _a.type, _k = _a.variant, variant = _k === void 0 ? 'solid' : _k, onClick = _a.onClick, props = tslib_es6.__rest(_a, ["active", "checked", "children", "color", "element", "fluid", "format", "forwardRef", "icon", "iconPosition", "loading", "pill", "size", "status", "textShift", "theme", "type", "variant", "onClick"]);
    // const irisError = useIrisError({ format, ...props }, Button);
    utils_hooks_useDeprecate.useDeprecate(props, deprecatedProps);
    var buttonRef = React.useRef(null);
    var iconOnly = typeof children === 'undefined' && icon;
    var iconLeft = iconPosition === 'left' && icon;
    var iconRight = iconPosition === 'right' && icon;
    var iconFeatured = iconPosition === 'featured' && icon;
    var iconAction = iconPosition === 'action' && icon;
    var radius = pill ? 50 : components_Button_Button_config.borderRadii[size] + 2;
    var formatInstrinsic = format;
    if (status && status !== 'neutral')
        formatInstrinsic = status;
    return (React__default["default"].createElement(components_Button_Button_style.ButtonStyled, tslib_es6.__assign({ as: element, color: color, fluid: fluid, format: formatInstrinsic, icon: !!icon, iconOnly: iconOnly, iconPosition: iconPosition, "$loading": loading, pill: pill, ref: utils_general_mergeReactRefs.mergeRefs([buttonRef, forwardRef]), size: size, textShift: textShift, theme: theme, type: type, checked: checked, active: active, variant: variant, onClick: function (event) {
            var _a;
            //Safari Button Focus Fix
            (_a = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
            if (onClick) {
                onClick(event);
            }
        } }, props),
        iconFeatured && (React__default["default"].createElement(components_Button_FeaturedIcon.FeaturedIcon, { size: size }, icon)),
        iconLeft,
        children && (React__default["default"].createElement(components_Button_Button_style.ButtonChildren, { size: size }, children)),
        iconRight,
        iconAction,
        loading && (React__default["default"].createElement(components_LoaderCircular_LoaderCircular.LoaderCircular, { size: size, format: "adaptive", style: utils_css.centered })),
        React__default["default"].createElement(utils_css.Focus, { parent: components_Button_Button_style.ButtonStyled, radius: radius, isKeyboardOnly: true })));
}

exports.Button = Button;