@vimeo/iris
Version:
Vimeo Design System
158 lines (151 loc) • 9.09 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_Select_Select_style = require('./Select.style.js');
var components_inputs_Select_Select_state = require('./Select.state.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_hooks_useOutsideClick = require('../../../utils/hooks/useOutsideClick.js');
var utils_DOM_geometry = require('../../../utils/DOM/geometry.js');
require('styled-components');
require('../Shared.js');
require('polished');
require('../../../color/colors.js');
require('../../../icons/ui/ChevronDown.js');
require('../../../typography/Text/Text.js');
require('../../../typography/Text/Text.style.js');
require('../../../typography/typography.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/css.js');
require('../../../typography/Paragraph/Paragraph.js');
require('../../../typography/Paragraph/Paragraph.style.js');
require('../../PopOver/PopOver.style.js');
require('../../PopOver/PopOver.error.js');
require('../../../typography/Header/Header.js');
require('../../../typography/Header/Header.style.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/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 SelectFaux(_a) {
var children = _a.children, className = _a.className, defaultValue = _a.defaultValue, disabled = _a.disabled, _b = _a.format, format = _b === void 0 ? 'basic' : _b, forwardRef = _a.forwardRef, id = _a.id, label = _a.label, messages = _a.messages, _c = _a.placeholder, placeholder = _c === void 0 ? 'Please select an option.' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, status = _a.status, style = _a.style, _e = _a.maxHeight, maxHeight = _e === void 0 ? '100%' : _e, value = _a.value, props = tslib_es6.__rest(_a, ["children", "className", "defaultValue", "disabled", "format", "forwardRef", "id", "label", "messages", "placeholder", "size", "status", "style", "maxHeight", "value"]);
var _f = tslib_es6.__read(React.useReducer(components_inputs_Select_Select_state.reducer, components_inputs_Select_Select_state.init(defaultValue)), 2), state = _f[0], dispatch = _f[1];
var width = state.width, selected = state.selected, active = state.active;
var _g = tslib_es6.__read(utils_hooks_useLayoutStyles.useLayoutStyles(style), 2), layoutStyles = _g[0], displayStyles = _g[1];
var wrapperRef = React.useRef(null);
var popOverRef = React.useRef(null);
var selectRef = React.useRef(null);
React.useImperativeHandle(forwardRef, function () { return selectRef.current; });
utils_hooks_useOutsideClick.useOutsideClick([wrapperRef, popOverRef], function () {
return dispatch({ type: 'SET_ACTIVE', payload: false });
});
React.useLayoutEffect(function () {
var payload = utils_DOM_geometry.geometry(wrapperRef.current).width;
dispatch({ type: 'SET_WIDTH', payload: payload });
}, [size]);
React.useEffect(function () {
if (value !== selected) {
if (typeof value !== 'undefined') {
dispatch({ type: 'SET_SELECTED', payload: value });
}
else if (selected) {
dispatch({ type: 'SET_SELECTED', payload: selected });
}
}
}, [value, selected]);
function onClick(child) {
return function () {
if (child.props.disabled)
return;
var event = new Event('change', { bubbles: true });
selectRef.current.value = child.props.value;
selectRef.current.dispatchEvent(event);
dispatch({ type: 'SET_SELECTED', payload: child.props.value });
dispatch({ type: 'SET_ACTIVE', payload: false });
};
}
var options = children
.filter(function (child) { return child.type !== 'a'; })
.map(makeOption);
var content = (React__default["default"].createElement("div", null, children.map(function (child, i) {
return typeof child.type === 'string'
? child
: React.cloneElement(child, {
onClick: onClick(child),
key: i,
faux: true,
});
})));
return (React__default["default"].createElement(components_inputs_Wrapper_Wrapper.Wrapper, { className: className, id: id, label: label, ref: wrapperRef, messages: messages, status: status, style: tslib_es6.__assign({}, layoutStyles) },
React__default["default"].createElement(components_PopOver_PopOver.PopOver, { attach: "bottom", style: {
width: width,
maxWidth: '100%',
maxHeight: maxHeight,
overflowY: 'scroll',
}, content: React__default["default"].createElement("div", { ref: popOverRef }, content), active: disabled ? false : active },
React__default["default"].createElement("div", { style: { position: 'relative', cursor: 'pointer' }, onClick: function () { return dispatch({ type: 'TOGGLE_ACTIVE' }); } },
!selected && (React__default["default"].createElement(components_inputs_Select_Select_style.Placeholder, { inputSize: size, style: {
position: 'absolute',
top: 0,
left: 0,
height: '100%',
} }, placeholder)),
React__default["default"].createElement(components_inputs_Select_Select_style.SelectStyled, tslib_es6.__assign({ "aria-label": label, format: status || format, disabled: disabled, inputSize: size, readOnly: true, ref: selectRef, value: selected === null || selected === void 0 ? void 0 : selected.toString(), style: tslib_es6.__assign(tslib_es6.__assign({}, displayStyles), { pointerEvents: 'none', opacity: selected ? 1 : 0 }) }, props),
selected,
options),
React__default["default"].createElement(components_inputs_Select_Select_style.ChevronDown, { size: size })))));
}
function makeOption(_a, i) {
var _b = _a.props, value = _b.value, children = _b.children;
return (React__default["default"].createElement("option", { key: i, value: value }, Array.isArray(children)
? children.filter(function (cc) { return typeof cc === 'string'; })
: children));
}
exports.SelectFaux = SelectFaux;