react-select-module
Version:
A Select control built with and for ReactJS
277 lines (235 loc) • 11.1 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
var React = require('react');
var React__default = _interopDefault(React);
var memoizeOne = _interopDefault(require('memoize-one'));
require('@emotion/core');
require('react-dom');
require('@babel/runtime/helpers/typeof');
var index$1 = require('../../dist/index-2e6d22c8.browser.cjs.js');
require('@babel/runtime/helpers/taggedTemplateLiteral');
require('react-input-autosize');
var reactTransitionGroup = require('react-transition-group');
// note we need to be explicit about innerRef for flow
var AnimatedInput = function AnimatedInput(WrappedComponent) {
return function (_ref) {
var inProp = _ref.in,
onExited = _ref.onExited,
appear = _ref.appear,
enter = _ref.enter,
exit = _ref.exit,
props = _objectWithoutProperties(_ref, ["in", "onExited", "appear", "enter", "exit"]);
return /*#__PURE__*/React__default.createElement(WrappedComponent, props);
};
};
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
// Fade Transition
// ==============================
var Fade = function Fade(_ref) {
var Tag = _ref.component,
_ref$duration = _ref.duration,
duration = _ref$duration === void 0 ? 1 : _ref$duration,
inProp = _ref.in,
onExited = _ref.onExited,
props = _objectWithoutProperties(_ref, ["component", "duration", "in", "onExited"]);
var transition = {
entering: {
opacity: 0
},
entered: {
opacity: 1,
transition: "opacity ".concat(duration, "ms")
},
exiting: {
opacity: 0
},
exited: {
opacity: 0
}
};
return /*#__PURE__*/React__default.createElement(reactTransitionGroup.Transition, {
mountOnEnter: true,
unmountOnExit: true,
in: inProp,
timeout: duration
}, function (state) {
var innerProps = {
style: _objectSpread({}, transition[state])
};
return /*#__PURE__*/React__default.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 = /*#__PURE__*/function (_Component) {
_inherits(Collapse, _Component);
var _super = _createSuper(Collapse);
function Collapse() {
var _this;
_classCallCheck(this, Collapse);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_this.duration = collapseDuration;
_this.rafID = void 0;
_this.state = {
width: 'auto'
};
_this.transition = {
exiting: {
width: 0,
transition: "width ".concat(_this.duration, "ms ease-out")
},
exited: {
width: 0
}
};
_this.getWidth = function (ref) {
if (ref && isNaN(_this.state.width)) {
/*
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
_this.rafID = window.requestAnimationFrame(function () {
var _ref$getBoundingClien = ref.getBoundingClientRect(),
width = _ref$getBoundingClien.width;
_this.setState({
width: width
});
});
}
};
_this.getStyle = function (width) {
return {
overflow: 'hidden',
whiteSpace: 'nowrap',
width: width
};
};
_this.getTransition = function (state) {
return _this.transition[state];
};
return _this;
}
_createClass(Collapse, [{
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.rafID) {
window.cancelAnimationFrame(this.rafID);
}
} // width must be calculated; cannot transition from `undefined` to `number`
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
children = _this$props.children,
inProp = _this$props.in;
var width = this.state.width;
return /*#__PURE__*/React__default.createElement(reactTransitionGroup.Transition, {
enter: false,
mountOnEnter: true,
unmountOnExit: true,
in: inProp,
timeout: this.duration
}, function (state) {
var style = _objectSpread(_objectSpread({}, _this2.getStyle(width)), _this2.getTransition(state));
return /*#__PURE__*/React__default.createElement("div", {
ref: _this2.getWidth,
style: style
}, children);
});
}
}]);
return Collapse;
}(React.Component);
var AnimatedMultiValue = function AnimatedMultiValue(WrappedComponent) {
return function (_ref) {
var inProp = _ref.in,
onExited = _ref.onExited,
props = _objectWithoutProperties(_ref, ["in", "onExited"]);
return /*#__PURE__*/React__default.createElement(Collapse, {
in: inProp,
onExited: onExited
}, /*#__PURE__*/React__default.createElement(WrappedComponent, _extends({
cropWithEllipsis: inProp
}, props)));
};
};
var AnimatedPlaceholder = function AnimatedPlaceholder(WrappedComponent) {
return function (props) {
return /*#__PURE__*/React__default.createElement(Fade, _extends({
component: WrappedComponent,
duration: props.isMulti ? collapseDuration : 1
}, props));
};
};
var AnimatedSingleValue = function AnimatedSingleValue(WrappedComponent) {
return function (props) {
return /*#__PURE__*/React__default.createElement(Fade, _extends({
component: WrappedComponent
}, props));
};
};
var AnimatedValueContainer = function AnimatedValueContainer(WrappedComponent) {
return function (props) {
return /*#__PURE__*/React__default.createElement(reactTransitionGroup.TransitionGroup, _extends({
component: WrappedComponent
}, props));
};
};
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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, ["Input", "MultiValue", "Placeholder", "SingleValue", "ValueContainer"]);
return _objectSpread$1({
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(makeAnimated, index$1.exportedEqual);
exports.Input = Input;
exports.MultiValue = MultiValue;
exports.Placeholder = Placeholder;
exports.SingleValue = SingleValue;
exports.ValueContainer = ValueContainer;
exports.default = index;