wix-style-react/dist/src/Dropdown/Dropdown.js

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

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); } };

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _isUndefined = require('lodash/isUndefined');

var _isUndefined2 = _interopRequireDefault(_isUndefined);

var _defaultTo = require('lodash/defaultTo');

var _defaultTo2 = _interopRequireDefault(_defaultTo);

var _differenceBy = require('lodash/differenceBy');

var _differenceBy2 = _interopRequireDefault(_differenceBy);

var _propTypes3 = require('../utils/propTypes');

var _deprecationLog = require('../utils/deprecationLog');

var _deprecationLog2 = _interopRequireDefault(_deprecationLog);

var _InputWithOptions2 = require('../InputWithOptions/InputWithOptions');

var _InputWithOptions3 = _interopRequireDefault(_InputWithOptions2);

var _Dropdown = require('./Dropdown.scss');

var _Dropdown2 = _interopRequireDefault(_Dropdown);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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; }

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, (0, _defaultTo2.default)(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 && !(0, _isUndefined2.default)(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 (!(0, _isUndefined2.default)(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, (0, _defaultTo2.default)(nextProps.selectedId, this.state.selectedId)));
        }
      } else {
        this.deprecatedUpdate(nextProps, { isFirstTime: false });
      }
    }
  }, {
    key: 'inputClasses',
    value: function inputClasses() {
      var classes = _defineProperty({}, _Dropdown2.default.readonly, true);
      classes[_Dropdown2.default.noBorder] = this.props.noBorder;
      return (0, _classnames2.default)(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 (0, _differenceBy2.default)(optionsA, optionsB, function (o) {
        return o.id;
      }).length === 0;
    }
  }, {
    key: 'getNextState',
    value: function getNextState(props, selectedId) {
      if (!(0, _isUndefined2.default)(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;
}(_InputWithOptions3.default);

Dropdown.propTypes = _extends({}, _InputWithOptions3.default.propTypes, {
  /** When true, then `selectedId` is used for Controlled mode, and `initialSelectedId` for Uncontrolled mode. */
  upgrade: _propTypes2.default.bool,
  /** Sets the selected option id. (Implies Controlled mode) */
  selectedId: _InputWithOptions3.default.propTypes.selectedId,
  /** An initial selected option id. (Implies Uncontrolled mode) */
  initialSelectedId: _InputWithOptions3.default.propTypes.selectedId
});

(0, _propTypes3.extendPropTypes)(Dropdown, {
  selectedId: (0, _propTypes3.allValidators)(_InputWithOptions3.default.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: (0, _propTypes3.allValidators)(_InputWithOptions3.default.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: (0, _propTypes3.allValidators)(_propTypes2.default.bool, function (props, propName) {
    if (!props[propName]) {
      (0, _deprecationLog2.default)('Dropdown: New API! Please upgrade by passing the prop \'upgrade=true\', and refer to documentation.');
    }
  })
});
Dropdown.defaultProps = _InputWithOptions3.default.defaultProps;
Dropdown.displayName = 'Dropdown';

exports.default = Dropdown;