@vimeo/iris
Version:
Vimeo Design System
150 lines (147 loc) • 8.45 kB
JavaScript
import { b as __rest, _ as __read, c as __assign } from '../../../tslib.es6-7f0e734f.js';
import React__default, { useReducer, useRef, useImperativeHandle, useLayoutEffect, useEffect, cloneElement } from 'react';
import { Placeholder, SelectStyled, ChevronDown } from './Select.style.esm.js';
import { reducer, init } from './Select.state.esm.js';
import { Wrapper } from '../Wrapper/Wrapper.esm.js';
import { PopOver } from '../../PopOver/PopOver.esm.js';
import { useLayoutStyles } from '../../../utils/hooks/useLayoutStyles.esm.js';
import { useOutsideClick } from '../../../utils/hooks/useOutsideClick.esm.js';
import { geometry } from '../../../utils/DOM/geometry.esm.js';
import 'styled-components';
import '../Shared.esm.js';
import 'polished';
import '../../../color/colors.esm.js';
import '../../../icons/ui/ChevronDown.esm.js';
import '../../../typography/Text/Text.esm.js';
import '../../../typography/Text/Text.style.esm.js';
import '../../../typography/typography.esm.js';
import '../../../tokens/core.esm.js';
import '../../../tokens/color/index.esm.js';
import '../../../tokens/color/background/background.esm.js';
import '../../../tokens/util/readToken.esm.js';
import '../../../tokens/util/clamp.esm.js';
import '../../../tokens/color/format/format.esm.js';
import '../../../tokens/color/format/primary.esm.js';
import '../../../tokens/color/format/secondary.esm.js';
import '../../../tokens/color/format/tertiary.esm.js';
import '../../../tokens/color/rainbow/rainbow.esm.js';
import '../../../tokens/color/rainbow/conic/index.esm.js';
import '../../../tokens/color/rainbow/conic/sm.esm.js';
import '../../../tokens/color/rainbow/conic/xl.esm.js';
import '../../../tokens/color/rainbow/linear/index.esm.js';
import '../../../tokens/color/rainbow/linear/sm.esm.js';
import '../../../tokens/color/rainbow/linear/xl.esm.js';
import '../../../tokens/color/livestream/livestream.esm.js';
import '../../../tokens/color/status/status.esm.js';
import '../../../tokens/color/status/caution.esm.js';
import '../../../tokens/color/status/negative.esm.js';
import '../../../tokens/color/status/positive.esm.js';
import '../../../tokens/color/stroke/stroke.esm.js';
import '../../../tokens/color/surface/surface.esm.js';
import '../../../tokens/color/text/text.esm.js';
import '../../../tokens/util/round.esm.js';
import '../../../tokens/color/upsell/upsell.esm.js';
import '../../../tokens/color/upsell/sm.esm.js';
import '../../../tokens/color/upsell/xl.esm.js';
import '../../../tokens/color/upsell/new.esm.js';
import '../../../tokens/edge/edge.esm.js';
import '../../../tokens/space/space.esm.js';
import '../../../tokens/typography/index.esm.js';
import '../../../tokens/typography/size/size.esm.js';
import '../../../typography/Text/EditableText.esm.js';
import '../../../utils/HOCs/withIris.esm.js';
import '../../../utils/css.esm.js';
import '../../../typography/Paragraph/Paragraph.esm.js';
import '../../../typography/Paragraph/Paragraph.style.esm.js';
import '../../PopOver/PopOver.style.esm.js';
import '../../PopOver/PopOver.error.esm.js';
import '../../../typography/Header/Header.esm.js';
import '../../../typography/Header/Header.style.esm.js';
import '../../../utils/hooks/usePortal_DEPRECATED/usePortal_DEPRECATED.esm.js';
import 'react-dom';
import '../../../utils/hooks/usePortal_DEPRECATED/usePortal_DEPRECATED.style.esm.js';
import '../../../utils/hooks/usePortal_DEPRECATED/useMountAnimations.esm.js';
import '../../../utils/hooks/useIsomorphicEffect.esm.js';
import '../../../utils/DOM/getComputedStyles.esm.js';
import '../../../utils/DOM/animate.esm.js';
import '../../../utils/events/onEvent.esm.js';
import '../../../utils/hooks/usePortal_DEPRECATED/coordinates.esm.js';
import '../../../utils/hooks/usePortal_DEPRECATED/Anchor.esm.js';
import '../../../utils/DOM/SSR.esm.js';
import '../../../utils/DOM/createPortalOutlet.esm.js';
import '../../../utils/DOM/createElement.esm.js';
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 = __rest(_a, ["children", "className", "defaultValue", "disabled", "format", "forwardRef", "id", "label", "messages", "placeholder", "size", "status", "style", "maxHeight", "value"]);
var _f = __read(useReducer(reducer, init(defaultValue)), 2), state = _f[0], dispatch = _f[1];
var width = state.width, selected = state.selected, active = state.active;
var _g = __read(useLayoutStyles(style), 2), layoutStyles = _g[0], displayStyles = _g[1];
var wrapperRef = useRef(null);
var popOverRef = useRef(null);
var selectRef = useRef(null);
useImperativeHandle(forwardRef, function () { return selectRef.current; });
useOutsideClick([wrapperRef, popOverRef], function () {
return dispatch({ type: 'SET_ACTIVE', payload: false });
});
useLayoutEffect(function () {
var payload = geometry(wrapperRef.current).width;
dispatch({ type: 'SET_WIDTH', payload: payload });
}, [size]);
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.createElement("div", null, children.map(function (child, i) {
return typeof child.type === 'string'
? child
: cloneElement(child, {
onClick: onClick(child),
key: i,
faux: true,
});
})));
return (React__default.createElement(Wrapper, { className: className, id: id, label: label, ref: wrapperRef, messages: messages, status: status, style: __assign({}, layoutStyles) },
React__default.createElement(PopOver, { attach: "bottom", style: {
width: width,
maxWidth: '100%',
maxHeight: maxHeight,
overflowY: 'scroll',
}, content: React__default.createElement("div", { ref: popOverRef }, content), active: disabled ? false : active },
React__default.createElement("div", { style: { position: 'relative', cursor: 'pointer' }, onClick: function () { return dispatch({ type: 'TOGGLE_ACTIVE' }); } },
!selected && (React__default.createElement(Placeholder, { inputSize: size, style: {
position: 'absolute',
top: 0,
left: 0,
height: '100%',
} }, placeholder)),
React__default.createElement(SelectStyled, __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: __assign(__assign({}, displayStyles), { pointerEvents: 'none', opacity: selected ? 1 : 0 }) }, props),
selected,
options),
React__default.createElement(ChevronDown, { size: size })))));
}
function makeOption(_a, i) {
var _b = _a.props, value = _b.value, children = _b.children;
return (React__default.createElement("option", { key: i, value: value }, Array.isArray(children)
? children.filter(function (cc) { return typeof cc === 'string'; })
: children));
}
export { SelectFaux };