@vimeo/iris
Version:
Vimeo Design System
143 lines (136 loc) • 8.53 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib_es6 = require('../../../tslib.es6-3ec409b7.js');
var React = require('react');
var components_inputs_Input_Input_style = require('./Input.style.js');
var components_inputs_Input_useSuggestions = require('./useSuggestions.js');
var components_inputs_Wrapper_Wrapper = require('../Wrapper/Wrapper.js');
var components_PopOver_PopOver = require('../../PopOver/PopOver.js');
var utils_hooks_useLayoutStyles = require('../../../utils/hooks/useLayoutStyles.js');
var utils_css = require('../../../utils/css.js');
require('styled-components');
require('polished');
require('../Shared.js');
require('../../../color/colors.js');
require('../../../typography/Header/Header.js');
require('../../../typography/Header/Header.style.js');
require('../../../typography/typography.js');
require('../../../typography/Text/Text.js');
require('../../../typography/Text/Text.style.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('../../../typography/Text/EditableText.js');
require('../../../utils/HOCs/withIris.js');
require('../../../utils/DOM/geometry.js');
require('../../../typography/Paragraph/Paragraph.js');
require('../../../typography/Paragraph/Paragraph.style.js');
require('../../PopOver/PopOver.style.js');
require('../../PopOver/PopOver.error.js');
require('../../../utils/hooks/usePortal_DEPRECATED/usePortal_DEPRECATED.js');
require('react-dom');
require('../../../utils/hooks/usePortal_DEPRECATED/usePortal_DEPRECATED.style.js');
require('../../../utils/hooks/usePortal_DEPRECATED/useMountAnimations.js');
require('../../../utils/hooks/useIsomorphicEffect.js');
require('../../../utils/DOM/getComputedStyles.js');
require('../../../utils/DOM/animate.js');
require('../../../utils/events/onEvent.js');
require('../../../utils/hooks/usePortal_DEPRECATED/coordinates.js');
require('../../../utils/hooks/usePortal_DEPRECATED/Anchor.js');
require('../../../utils/hooks/useOutsideClick.js');
require('../../../utils/DOM/SSR.js');
require('../../../utils/DOM/createPortalOutlet.js');
require('../../../utils/DOM/createElement.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
function Text(_a) {
var _b;
var _c = _a.autoComplete, autoComplete = _c === void 0 ? true : _c, autosuggest = _a.autosuggest, children = _a.children, className = _a.className, disabled = _a.disabled, _d = _a.floating, floating = _d === void 0 ? false : _d, id = _a.id, label = _a.label, messages = _a.messages, forwardRef = _a.forwardRef, _e = _a.pill, pill = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? 'md' : _f, status = _a.status, _g = _a.style, style = _g === void 0 ? components_inputs_Input_Input_style.nullStyle : _g, onFocus = _a.onFocus, onBlur = _a.onBlur, theme = _a.theme, _h = _a.type, type = _h === void 0 ? 'text' : _h, value = _a.value, variant = _a.variant, props = tslib_es6.__rest(_a, ["autoComplete", "autosuggest", "children", "className", "disabled", "floating", "id", "label", "messages", "forwardRef", "pill", "size", "status", "style", "onFocus", "onBlur", "theme", "type", "value", "variant"]);
var _j = tslib_es6.__read(React.useState(false), 2), popoverActive = _j[0], setPopoverActive = _j[1];
var _k = tslib_es6.__read(utils_hooks_useLayoutStyles.useLayoutStyles(style), 2), layoutStyles = _k[0], displayStyles = _k[1];
var inputRef = React.useRef(null);
React.useImperativeHandle(forwardRef, function () { return inputRef.current; });
var suggestionsRef = React.useRef(null);
function onSuggestionSelect(selection) {
if (selection) {
inputRef.current.value = selection;
}
inputRef.current.focus();
setPopoverActive(false);
}
var suggestions = components_inputs_Input_useSuggestions.useSuggestions({
autosuggest: autosuggest,
onSelect: onSuggestionSelect,
});
function doFocus(e) {
setPopoverActive(true);
onFocus && onFocus(e);
}
function doBlur(e) {
var _a;
/**
* If the suggestions popover does not have a secondary target,
* call the onBlur function and close the suggestions popover
* (during a blur event, the relatedTarget should be the EventTarget receiving focus, if any)
*/
if (!((_a = suggestionsRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
onBlur && onBlur(e);
setPopoverActive(false);
}
}
function onKeyDown(e) {
var _a, _b;
if (!autosuggest)
return;
if (e.key === 'Enter' || e.key === 'ArrowDown') {
e.preventDefault();
setPopoverActive(true);
(_b = (_a = suggestionsRef.current) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.focus();
}
}
var floatLabel = popoverActive ||
(inputRef.current && ((_b = inputRef.current.value) === null || _b === void 0 ? void 0 : _b.length) > 0);
if (autoComplete === true)
autoComplete = 'on';
if (autoComplete === false)
autoComplete = 'off';
var inputComponent = (React__default["default"].createElement("div", { style: { position: 'relative' } },
children,
React__default["default"].createElement(components_inputs_Input_Input_style.InputStyled, tslib_es6.__assign({ "aria-invalid": status === 'negative', autoComplete: autoComplete, disabled: disabled, floating: floating, format: status, id: id, inputSize: size, onBlur: doBlur, onFocus: doFocus, onKeyDown: onKeyDown, pill: pill, ref: inputRef, style: displayStyles, theme: theme, type: type, value: value, variant: variant }, props)),
React__default["default"].createElement(utils_css.Focus, { parent: components_inputs_Input_Input_style.InputStyled, radius: pill ? 50 : 6, variant: variant, distance: 1 })));
var inputComponentWithAutoSuggest = (React__default["default"].createElement(components_PopOver_PopOver.PopOver, { active: popoverActive && (suggestions === null || suggestions === void 0 ? void 0 : suggestions.show), content: React__default["default"].createElement("div", { ref: suggestionsRef }, (suggestions === null || suggestions === void 0 ? void 0 : suggestions[0]) && suggestions) }, inputComponent));
return (React__default["default"].createElement(components_inputs_Wrapper_Wrapper.Wrapper, { className: className, disabled: disabled, floating: floating, floatLabel: floatLabel, id: id, label: label, messages: messages, size: size, status: status, style: layoutStyles, theme: theme }, (suggestions === null || suggestions === void 0 ? void 0 : suggestions.has)
? inputComponentWithAutoSuggest
: inputComponent));
}
exports.Text = Text;