wix-style-react
Version:
wix-style-react
223 lines (197 loc) • 9.2 kB
JavaScript
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
import classNames from 'classnames';
import PropTypes from 'prop-types';
import isUndefined from 'lodash/isUndefined';
import defaultTo from 'lodash/defaultTo';
import differenceBy from 'lodash/differenceBy';
import { allValidators, extendPropTypes } from '../utils/propTypes';
import deprecationLog from '../utils/deprecationLog';
import InputWithOptions from '../InputWithOptions/InputWithOptions';
import styles from './Dropdown.scss';
var NO_SELECTED_ID = null;
var Dropdown = function (_InputWithOptions) {
_inherits(Dropdown, _InputWithOptions);
function Dropdown(props) {
_classCallCheck(this, Dropdown);
var _this = _possibleConstructorReturn(this, (Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call(this, props));
if (props.upgrade) {
_this.state = _extends({
value: '',
selectedId: NO_SELECTED_ID
}, Dropdown.getNextState(props, defaultTo(props.selectedId, props.initialSelectedId)));
} else {
_this.deprecatedUpdate(props, { isFirstTime: true });
}
return _this;
}
_createClass(Dropdown, [{
key: 'isSelectedIdControlled',
value: function isSelectedIdControlled() {
var _props = this.props,
upgrade = _props.upgrade,
selectedId = _props.selectedId;
return upgrade && !isUndefined(selectedId);
}
}, {
key: 'isControlledSupported',
value: function isControlledSupported() {
return this.props.upgrade;
}
}, {
key: 'getSelectedId',
value: function getSelectedId() {
if (this.isControlledSupported()) {
return this.isSelectedIdControlled() ? this.props.selectedId : this.state.selectedId;
} else {
return this.state.selectedId;
}
}
}, {
key: '_onInputClicked',
value: function _onInputClicked(event) {
if (this.state.showOptions && Date.now() - this.state.lastOptionsShow > 200) {
this.hideOptions();
} else {
this.showOptions();
}
if (this.props.onInputClicked) {
this.props.onInputClicked(event);
}
}
/**
* Updates the value by the selectedId.
* If selectedId is not found in options, then value is NOT changed.
*/
}, {
key: 'deprecatedUpdate',
value: function deprecatedUpdate(props, _ref) {
var isFirstTime = _ref.isFirstTime;
var value = '',
selectedId = -1;
if (!isUndefined(props.selectedId)) {
var option = props.options.find(function (_option) {
return _option.id === props.selectedId;
});
if (option) {
value = props.valueParser(option);
selectedId = option.id;
}
}
if (isFirstTime) {
this.state = { value: value, selectedId: selectedId };
} else {
this.setState({ value: value, selectedId: selectedId });
}
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (this.props.upgrade) {
if (nextProps.selectedId !== this.props.selectedId || !Dropdown.isOptionsEqual(this.props.options, nextProps.options)) {
this.setState(Dropdown.getNextState(nextProps, defaultTo(nextProps.selectedId, this.state.selectedId)));
}
} else {
this.deprecatedUpdate(nextProps, { isFirstTime: false });
}
}
}, {
key: 'inputClasses',
value: function inputClasses() {
var classes = _defineProperty({}, styles.readonly, true);
classes[styles.noBorder] = this.props.noBorder;
return classNames(classes);
}
}, {
key: 'dropdownAdditionalProps',
value: function dropdownAdditionalProps() {
return {
selectedId: this.getSelectedId(),
value: this.state.value,
tabIndex: -1
};
}
}, {
key: 'inputAdditionalProps',
value: function inputAdditionalProps() {
return {
readOnly: true,
value: this.state.value
};
}
}, {
key: '_onSelect',
value: function _onSelect(option) {
if (!this.isControlledSupported() || !this.isSelectedIdControlled()) {
this.setState({
value: this.props.valueParser(option),
selectedId: option.id
});
}
_get(Dropdown.prototype.__proto__ || Object.getPrototypeOf(Dropdown.prototype), '_onSelect', this).call(this, option);
}
}, {
key: '_onChange',
value: function _onChange(event) {
this.setState({ value: event.target.value });
_get(Dropdown.prototype.__proto__ || Object.getPrototypeOf(Dropdown.prototype), '_onChange', this).call(this, event);
}
}], [{
key: 'isOptionsEqual',
value: function isOptionsEqual(optionsA, optionsB) {
return differenceBy(optionsA, optionsB, function (o) {
return o.id;
}).length === 0;
}
}, {
key: 'getNextState',
value: function getNextState(props, selectedId) {
if (!isUndefined(selectedId)) {
var option = props.options.find(function (_option) {
return _option.id === selectedId;
});
if (option) {
var value = props.valueParser(option) || '';
return { value: value, selectedId: selectedId };
} else {
return { value: '', selectedId: NO_SELECTED_ID };
}
}
return {};
}
}]);
return Dropdown;
}(InputWithOptions);
Dropdown.propTypes = _extends({}, InputWithOptions.propTypes, {
/** When true, then `selectedId` is used for Controlled mode, and `initialSelectedId` for Uncontrolled mode. */
upgrade: PropTypes.bool,
/** Sets the selected option id. (Implies Controlled mode) */
selectedId: InputWithOptions.propTypes.selectedId,
/** An initial selected option id. (Implies Uncontrolled mode) */
initialSelectedId: InputWithOptions.propTypes.selectedId
});
extendPropTypes(Dropdown, {
selectedId: allValidators(InputWithOptions.propTypes.selectedId, function (props, propName) {
if (props[propName] !== undefined && props['initialSelectedId'] !== undefined) {
return new Error('\'selectedId\' and \'initialSelectedId\' cannot both be used at the same time.');
}
}),
initialSelectedId: allValidators(InputWithOptions.propTypes.selectedId, function (props, propName) {
if (props[propName] !== undefined && !props['upgrade']) {
return new Error('\'initialSelectedId\' can be used only if you pass \'upgrade=true\' as well.');
}
}),
upgrade: allValidators(PropTypes.bool, function (props, propName) {
if (!props[propName]) {
deprecationLog('Dropdown: New API! Please upgrade by passing the prop \'upgrade=true\', and refer to documentation.');
}
})
});
Dropdown.defaultProps = InputWithOptions.defaultProps;
Dropdown.displayName = 'Dropdown';
export default Dropdown;