@vimeo/iris
Version:
Vimeo Design System
135 lines (128 loc) • 7.83 kB
JavaScript
'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 typography_Text_Text = require('../../../typography/Text/Text.js');
var tokens_core = require('../../../tokens/core.js');
var typography_Paragraph_Paragraph = require('../../../typography/Paragraph/Paragraph.js');
require('../../../typography/Text/Text.style.js');
require('polished');
require('../../../typography/typography.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('../../../typography/Paragraph/Paragraph.style.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);
var Wrapper = React.forwardRef(function (_a, ref) {
var children = _a.children; _a.defaultValue; var disabled = _a.disabled, floating = _a.floating, floatLabel = _a.floatLabel; _a.icon; var id = _a.id, label = _a.label, _b = _a.messages, messages = _b === void 0 ? {} : _b, status = _a.status, style = _a.style, size = _a.size, theme = _a.theme; _a.value; var props = tslib_es6.__rest(_a, ["children", "defaultValue", "disabled", "floating", "floatLabel", "icon", "id", "label", "messages", "status", "style", "size", "theme", "value"]);
var active = floating && floatLabel;
var preMessage = messages.pre && messages.pre;
var postMessage = messages.post && messages.post;
var error = status === 'negative' && messages.error;
var help = status === 'positive' && messages.help;
return (React__default["default"].createElement("div", tslib_es6.__assign({}, props, { ref: ref, style: tslib_es6.__assign(tslib_es6.__assign({}, style), { position: 'relative' }) }),
preMessage,
label && (React__default["default"].createElement(Label, { floating: floating, active: active, sizeInput: size, htmlFor: id, disabled: disabled }, label)),
children,
Object.values(messages).length > 0 && (React__default["default"].createElement(MessageArea, { error: error, help: help, post: postMessage, status: status, theme: theme }))));
});
// NOTE!
// 09/2021
// ——————————
// The following was quickly eye-balled to add floating support
// to inputs of all sizes. This is not ideal and should be replaced
// by values derived from higher-order input size tokens.
var sizes = {
xxs: 0.5,
xs: 0.75,
sm: 0.75,
md: 1,
lg: 1.5,
xl: 1.75,
xxl: 2,
};
var tops = {
xxs: 0.25,
xs: 0.55,
sm: 0.95,
md: 0.95,
lg: 1.1,
xl: 1.55,
xxl: 2,
};
var lefts = {
xxs: 0.25,
xs: 0.35,
sm: 0.5,
md: 0.6,
lg: 0.7,
xl: 0.9,
xxl: 1.1,
};
var Label = styled__default["default"](typography_Text_Text.Text).attrs({ element: 'label' })(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n display: inline-block;\n transition: 120ms ease-in-out;\n cursor: ", ";\n font-size: ", "rem;\n color: ", ";\n margin-bottom: 0.2rem;\n font-weight: 400;\n\n ", ";\n\n ", ";\n"], ["\n display: inline-block;\n transition: 120ms ease-in-out;\n cursor: ", ";\n font-size: ", "rem;\n color: ", ";\n margin-bottom: 0.2rem;\n font-weight: 400;\n\n ", ";\n\n ", ";\n"])), function (p) { return (p.disabled ? 'not-allowed' : 'pointer'); }, function (p) { return 0.315 + sizes[p.sizeInput] / 1.8; }, tokens_core.core.color.text(600), function (p) {
return p.floating &&
!p.active && styled.css(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n pointer-events: none;\n position: absolute;\n z-index: 1;\n font-size: ", "rem;\n top: ", "rem;\n left: 0.75rem;\n "], ["\n pointer-events: none;\n position: absolute;\n z-index: 1;\n font-size: ", "rem;\n top: ", "rem;\n left: 0.75rem;\n "])), sizes[p.sizeInput], tops[p.sizeInput]);
}, function (p) {
return p.floating &&
p.active && styled.css(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n position: absolute;\n z-index: 1;\n font-size: ", "rem;\n top: ", "rem;\n left: ", "rem;\n "], ["\n position: absolute;\n z-index: 1;\n font-size: ", "rem;\n top: ", "rem;\n left: ", "rem;\n "])), 0.315 + sizes[p.sizeInput] / 1.8, 0.25 + tops[p.sizeInput] / 4, lefts[p.sizeInput]);
});
var MessageArea = React.forwardRef(function (_a, ref) {
var error = _a.error, _b = _a.position, position = _b === void 0 ? 'bottom' : _b, help = _a.help, post = _a.post; _a.theme; var props = tslib_es6.__rest(_a, ["error", "position", "help", "post", "theme"]);
if (post)
props.children = post;
if (help)
props.children = help;
if (error)
props.children = error;
return (React__default["default"].createElement("div", tslib_es6.__assign({}, props, { style: {
display: 'inline-flex',
marginBottom: position === 'sublabel' && '0.5rem',
} }),
post && React__default["default"].createElement(Message, tslib_es6.__assign({ ref: ref }, props)),
help && React__default["default"].createElement(Message, tslib_es6.__assign({ ref: ref }, props)),
error && React__default["default"].createElement(Message, tslib_es6.__assign({ ref: ref }, props))));
});
function Message(_a) {
var children = _a.children, status = _a.status, props = tslib_es6.__rest(_a, ["children", "status"]);
return (React__default["default"].createElement(typography_Paragraph_Paragraph.Paragraph, tslib_es6.__assign({}, props, { size: "3", element: "span", role: status === 'negative' ? 'alert' : 'note', status: status, style: { overflow: 'hidden' } }), children));
}
var templateObject_1, templateObject_2, templateObject_3;
exports.Wrapper = Wrapper;