You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
326 lines
11 KiB
326 lines
11 KiB
'use strict';
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
var memoizeOne = require('memoize-one');
|
|
var index$1 = require('../../dist/index-5b950e59.cjs.dev.js');
|
|
var React = require('react');
|
|
var _extends = require('@babel/runtime/helpers/extends');
|
|
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
var reactTransitionGroup = require('react-transition-group');
|
|
require('@emotion/react');
|
|
require('@babel/runtime/helpers/typeof');
|
|
require('@babel/runtime/helpers/taggedTemplateLiteral');
|
|
require('@babel/runtime/helpers/defineProperty');
|
|
require('react-dom');
|
|
require('@floating-ui/dom');
|
|
require('use-isomorphic-layout-effect');
|
|
|
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
|
|
function _interopNamespace(e) {
|
|
if (e && e.__esModule) return e;
|
|
var n = Object.create(null);
|
|
if (e) {
|
|
Object.keys(e).forEach(function (k) {
|
|
if (k !== 'default') {
|
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
Object.defineProperty(n, k, d.get ? d : {
|
|
enumerable: true,
|
|
get: function () {
|
|
return e[k];
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
n['default'] = e;
|
|
return Object.freeze(n);
|
|
}
|
|
|
|
var memoizeOne__default = /*#__PURE__*/_interopDefault(memoizeOne);
|
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
|
|
var _excluded$4 = ["in", "onExited", "appear", "enter", "exit"];
|
|
// strip transition props off before spreading onto select component
|
|
var AnimatedInput = function AnimatedInput(WrappedComponent) {
|
|
return function (_ref) {
|
|
_ref.in;
|
|
_ref.onExited;
|
|
_ref.appear;
|
|
_ref.enter;
|
|
_ref.exit;
|
|
var props = _objectWithoutProperties(_ref, _excluded$4);
|
|
return /*#__PURE__*/React__namespace.createElement(WrappedComponent, props);
|
|
};
|
|
};
|
|
|
|
var _excluded$3 = ["component", "duration", "in", "onExited"];
|
|
var Fade = function Fade(_ref) {
|
|
var Tag = _ref.component,
|
|
_ref$duration = _ref.duration,
|
|
duration = _ref$duration === void 0 ? 1 : _ref$duration,
|
|
inProp = _ref.in;
|
|
_ref.onExited;
|
|
var props = _objectWithoutProperties(_ref, _excluded$3);
|
|
var nodeRef = React.useRef(null);
|
|
var transition = {
|
|
entering: {
|
|
opacity: 0
|
|
},
|
|
entered: {
|
|
opacity: 1,
|
|
transition: "opacity ".concat(duration, "ms")
|
|
},
|
|
exiting: {
|
|
opacity: 0
|
|
},
|
|
exited: {
|
|
opacity: 0
|
|
}
|
|
};
|
|
return /*#__PURE__*/React__namespace.createElement(reactTransitionGroup.Transition, {
|
|
mountOnEnter: true,
|
|
unmountOnExit: true,
|
|
in: inProp,
|
|
timeout: duration,
|
|
nodeRef: nodeRef
|
|
}, function (state) {
|
|
var innerProps = {
|
|
style: _objectSpread({}, transition[state]),
|
|
ref: nodeRef
|
|
};
|
|
return /*#__PURE__*/React__namespace.createElement(Tag, _extends({
|
|
innerProps: innerProps
|
|
}, props));
|
|
});
|
|
};
|
|
|
|
// ==============================
|
|
// Collapse Transition
|
|
// ==============================
|
|
|
|
var collapseDuration = 260;
|
|
// wrap each MultiValue with a collapse transition; decreases width until
|
|
// finally removing from DOM
|
|
var Collapse = function Collapse(_ref2) {
|
|
var children = _ref2.children,
|
|
_in = _ref2.in,
|
|
_onExited = _ref2.onExited;
|
|
var ref = React.useRef(null);
|
|
var _useState = React.useState('auto'),
|
|
_useState2 = _slicedToArray(_useState, 2),
|
|
width = _useState2[0],
|
|
setWidth = _useState2[1];
|
|
React.useEffect(function () {
|
|
var el = ref.current;
|
|
if (!el) return;
|
|
|
|
/*
|
|
Here we're invoking requestAnimationFrame with a callback invoking our
|
|
call to getBoundingClientRect and setState in order to resolve an edge case
|
|
around portalling. Certain portalling solutions briefly remove children from the DOM
|
|
before appending them to the target node. This is to avoid us trying to call getBoundingClientrect
|
|
while the Select component is in this state.
|
|
*/
|
|
// cannot use `offsetWidth` because it is rounded
|
|
var rafId = window.requestAnimationFrame(function () {
|
|
return setWidth(el.getBoundingClientRect().width);
|
|
});
|
|
return function () {
|
|
return window.cancelAnimationFrame(rafId);
|
|
};
|
|
}, []);
|
|
var getStyleFromStatus = function getStyleFromStatus(status) {
|
|
switch (status) {
|
|
default:
|
|
return {
|
|
width: width
|
|
};
|
|
case 'exiting':
|
|
return {
|
|
width: 0,
|
|
transition: "width ".concat(collapseDuration, "ms ease-out")
|
|
};
|
|
case 'exited':
|
|
return {
|
|
width: 0
|
|
};
|
|
}
|
|
};
|
|
return /*#__PURE__*/React__namespace.createElement(reactTransitionGroup.Transition, {
|
|
enter: false,
|
|
mountOnEnter: true,
|
|
unmountOnExit: true,
|
|
in: _in,
|
|
onExited: function onExited() {
|
|
var el = ref.current;
|
|
if (!el) return;
|
|
_onExited === null || _onExited === void 0 ? void 0 : _onExited(el);
|
|
},
|
|
timeout: collapseDuration,
|
|
nodeRef: ref
|
|
}, function (status) {
|
|
return /*#__PURE__*/React__namespace.createElement("div", {
|
|
ref: ref,
|
|
style: _objectSpread({
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap'
|
|
}, getStyleFromStatus(status))
|
|
}, children);
|
|
});
|
|
};
|
|
|
|
var _excluded$2 = ["in", "onExited"];
|
|
// strip transition props off before spreading onto actual component
|
|
|
|
var AnimatedMultiValue = function AnimatedMultiValue(WrappedComponent) {
|
|
return function (_ref) {
|
|
var inProp = _ref.in,
|
|
onExited = _ref.onExited,
|
|
props = _objectWithoutProperties(_ref, _excluded$2);
|
|
return /*#__PURE__*/React__namespace.createElement(Collapse, {
|
|
in: inProp,
|
|
onExited: onExited
|
|
}, /*#__PURE__*/React__namespace.createElement(WrappedComponent, _extends({
|
|
cropWithEllipsis: inProp
|
|
}, props)));
|
|
};
|
|
};
|
|
|
|
// fade in when last multi-value removed, otherwise instant
|
|
var AnimatedPlaceholder = function AnimatedPlaceholder(WrappedComponent) {
|
|
return function (props) {
|
|
return /*#__PURE__*/React__namespace.createElement(Fade, _extends({
|
|
component: WrappedComponent,
|
|
duration: props.isMulti ? collapseDuration : 1
|
|
}, props));
|
|
};
|
|
};
|
|
|
|
// instant fade; all transition-group children must be transitions
|
|
|
|
var AnimatedSingleValue = function AnimatedSingleValue(WrappedComponent) {
|
|
return function (props) {
|
|
return /*#__PURE__*/React__namespace.createElement(Fade, _extends({
|
|
component: WrappedComponent
|
|
}, props));
|
|
};
|
|
};
|
|
|
|
var _excluded$1 = ["component"],
|
|
_excluded2 = ["children"];
|
|
// make ValueContainer a transition group
|
|
var AnimatedValueContainer = function AnimatedValueContainer(WrappedComponent) {
|
|
return function (props) {
|
|
return props.isMulti ? /*#__PURE__*/React__namespace.createElement(IsMultiValueContainer, _extends({
|
|
component: WrappedComponent
|
|
}, props)) : /*#__PURE__*/React__namespace.createElement(reactTransitionGroup.TransitionGroup, _extends({
|
|
component: WrappedComponent
|
|
}, props));
|
|
};
|
|
};
|
|
var IsMultiValueContainer = function IsMultiValueContainer(_ref) {
|
|
var component = _ref.component,
|
|
restProps = _objectWithoutProperties(_ref, _excluded$1);
|
|
var multiProps = useIsMultiValueContainer(restProps);
|
|
return /*#__PURE__*/React__namespace.createElement(reactTransitionGroup.TransitionGroup, _extends({
|
|
component: component
|
|
}, multiProps));
|
|
};
|
|
var useIsMultiValueContainer = function useIsMultiValueContainer(_ref2) {
|
|
var children = _ref2.children,
|
|
props = _objectWithoutProperties(_ref2, _excluded2);
|
|
var isMulti = props.isMulti,
|
|
hasValue = props.hasValue,
|
|
innerProps = props.innerProps,
|
|
_props$selectProps = props.selectProps,
|
|
components = _props$selectProps.components,
|
|
controlShouldRenderValue = _props$selectProps.controlShouldRenderValue;
|
|
var _useState = React.useState(isMulti && controlShouldRenderValue && hasValue),
|
|
_useState2 = _slicedToArray(_useState, 2),
|
|
cssDisplayFlex = _useState2[0],
|
|
setCssDisplayFlex = _useState2[1];
|
|
var _useState3 = React.useState(false),
|
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
removingValue = _useState4[0],
|
|
setRemovingValue = _useState4[1];
|
|
React.useEffect(function () {
|
|
if (hasValue && !cssDisplayFlex) {
|
|
setCssDisplayFlex(true);
|
|
}
|
|
}, [hasValue, cssDisplayFlex]);
|
|
React.useEffect(function () {
|
|
if (removingValue && !hasValue && cssDisplayFlex) {
|
|
setCssDisplayFlex(false);
|
|
}
|
|
setRemovingValue(false);
|
|
}, [removingValue, hasValue, cssDisplayFlex]);
|
|
var onExited = function onExited() {
|
|
return setRemovingValue(true);
|
|
};
|
|
var childMapper = function childMapper(child) {
|
|
if (isMulti && /*#__PURE__*/React__namespace.isValidElement(child)) {
|
|
// Add onExited callback to MultiValues
|
|
if (child.type === components.MultiValue) {
|
|
return /*#__PURE__*/React__namespace.cloneElement(child, {
|
|
onExited: onExited
|
|
});
|
|
}
|
|
// While container flexed, Input cursor is shown after Placeholder text,
|
|
// so remove Placeholder until display is set back to grid
|
|
if (child.type === components.Placeholder && cssDisplayFlex) {
|
|
return null;
|
|
}
|
|
}
|
|
return child;
|
|
};
|
|
var newInnerProps = _objectSpread(_objectSpread({}, innerProps), {}, {
|
|
style: _objectSpread(_objectSpread({}, innerProps === null || innerProps === void 0 ? void 0 : innerProps.style), {}, {
|
|
display: isMulti && hasValue || cssDisplayFlex ? 'flex' : 'grid'
|
|
})
|
|
});
|
|
var newProps = _objectSpread(_objectSpread({}, props), {}, {
|
|
innerProps: newInnerProps,
|
|
children: React__namespace.Children.toArray(children).map(childMapper)
|
|
});
|
|
return newProps;
|
|
};
|
|
|
|
var _excluded = ["Input", "MultiValue", "Placeholder", "SingleValue", "ValueContainer"];
|
|
var makeAnimated = function makeAnimated() {
|
|
var externalComponents = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
var components = index$1.defaultComponents({
|
|
components: externalComponents
|
|
});
|
|
var Input = components.Input,
|
|
MultiValue = components.MultiValue,
|
|
Placeholder = components.Placeholder,
|
|
SingleValue = components.SingleValue,
|
|
ValueContainer = components.ValueContainer,
|
|
rest = _objectWithoutProperties(components, _excluded);
|
|
return _objectSpread({
|
|
Input: AnimatedInput(Input),
|
|
MultiValue: AnimatedMultiValue(MultiValue),
|
|
Placeholder: AnimatedPlaceholder(Placeholder),
|
|
SingleValue: AnimatedSingleValue(SingleValue),
|
|
ValueContainer: AnimatedValueContainer(ValueContainer)
|
|
}, rest);
|
|
};
|
|
var AnimatedComponents = makeAnimated();
|
|
var Input = AnimatedComponents.Input;
|
|
var MultiValue = AnimatedComponents.MultiValue;
|
|
var Placeholder = AnimatedComponents.Placeholder;
|
|
var SingleValue = AnimatedComponents.SingleValue;
|
|
var ValueContainer = AnimatedComponents.ValueContainer;
|
|
var index = memoizeOne__default['default'](makeAnimated);
|
|
|
|
exports.Input = Input;
|
|
exports.MultiValue = MultiValue;
|
|
exports.Placeholder = Placeholder;
|
|
exports.SingleValue = SingleValue;
|
|
exports.ValueContainer = ValueContainer;
|
|
exports.default = index;
|