cloudhubui/dist/countrypicker/CountryPicker.js

Various components to use in react projects

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));

var _Popover = _interopRequireDefault(require("@material-ui/core/Popover"));

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _List = _interopRequireDefault(require("@material-ui/core/List"));

var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));

var _ListItemAvatar = _interopRequireDefault(require("@material-ui/core/ListItemAvatar"));

var _Avatar = _interopRequireDefault(require("@material-ui/core/Avatar"));

var _cca = _interopRequireDefault(require("./data/cca2.json"));

var _Emoji = _interopRequireDefault(require("./Emoji"));

var _countriesEmoji = _interopRequireDefault(require("./data/countries-emoji.json"));

var _countries = _interopRequireDefault(require("./data/countries.json"));

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

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

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

var countries = null;
var Emoji = null;
var memo; // let isEmojiable = Platform.OS === 'ios';

var isEmojiable = true;
var FLAG_TYPES = {
  flat: 'flat',
  emoji: 'emoji'
};

var setCountries = function setCountries(flagType) {
  if (typeof flagType !== 'undefined') {
    isEmojiable = flagType === FLAG_TYPES.emoji;
  }

  if (isEmojiable) {
    countries = _countriesEmoji.default;
    Emoji = _Emoji.default;
  } else {
    countries = _countries.default;
    Emoji = /*#__PURE__*/_react.default.createElement("div", null);
  }
};

setCountries('emoji');
var styles = {
  popover: {
    minWidth: 380,
    maxHeight: 400
  },
  emojiFlag: {
    margin: 0,
    width: 24,
    height: 24,
    paddingTop: 8,
    overflow: 'hidden',
    display: 'flex',
    alignItems: 'center'
  }
};

var CountryPicker = /*#__PURE__*/function (_Component) {
  _inherits(CountryPicker, _Component);

  var _super = _createSuper(CountryPicker);

  function CountryPicker(props) {
    var _this;

    _classCallCheck(this, CountryPicker);

    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_this), "onSelectCountry", function (cca2) {
      if (cca2) {
        _this.props.onChange(_objectSpread(_objectSpread({
          cca2: cca2
        }, countries[cca2]), {}, {
          flag: undefined,
          name: _this.getCountryName(countries[cca2])
        }));

        _this.setState({
          anchorEl: null,
          cca2: cca2
        });
      } else {
        _this.setState({
          anchorEl: null
        });

        _this.props.onChange(null);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "onClose", function () {
      _this.setState({
        dataSource: _this.state.cca2List
      });

      if (_this.props.onClose) {
        _this.props.onClose();
      }
    });

    _defineProperty(_assertThisInitialized(_this), "handleClick", function (event) {
      _this.setState({
        anchorEl: event.currentTarget
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleClose", function () {
      _this.setState({
        anchorEl: null
      });
    });

    setCountries(props.flagType);

    var countryList = _toConsumableArray(props.countryList);

    var excludeCountries = _toConsumableArray(props.excludeCountries);

    excludeCountries.forEach(function (excludeCountry) {
      var index = countryList.indexOf(excludeCountry);

      if (index !== -1) {
        countryList.splice(index, 1);
      }
    });
    countryList = countryList.map(function (c) {
      return [c, _this.getCountryName(countries[c])];
    }).sort(function (a, b) {
      if (a[1] < b[1]) return -1;
      if (a[1] > b[1]) return 1;
      return 0;
    }).map(function (c) {
      return c[0];
    });
    _this.state = {
      cca2List: countryList,
      dataSource: countryList,
      anchorEl: null,
      cca2: props.cca2
    };
    return _this;
  }

  _createClass(CountryPicker, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (prevProps.countryList !== this.props.countryList) {
        this.setState({
          cca2List: this.props.countryList,
          dataSource: this.props.countryList,
          cca2: this.props.cca2
        });
      }
    }
  }, {
    key: "getCountryName",
    value: function getCountryName(country, optionalTranslation) {
      var translation = optionalTranslation || this.props.translation || 'eng';
      return country.name[translation] || country.name.common;
    }
  }, {
    key: "getLetters",
    value: function getLetters(list) {
      var _this2 = this;

      return Object.keys(list.reduce(function (acc, val) {
        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, _this2.getCountryName(countries[val]).slice(0, 1).toUpperCase(), ''));
      }, {})).sort();
    }
  }, {
    key: "renderCountries",
    value: function renderCountries() {
      var _this3 = this;

      var dataSource = this.state.dataSource;
      var size = this.props.size;

      if (memo) {
        return memo;
      }

      memo = dataSource.map(function (cca2) {
        var country = countries[cca2];
        return /*#__PURE__*/_react.default.createElement(_ListItem.default, {
          key: cca2,
          button: true,
          onClick: function onClick() {
            return _this3.onSelectCountry(cca2);
          }
        }, /*#__PURE__*/_react.default.createElement(_ListItemAvatar.default, null, CountryPicker.renderFlag({
          cca2: cca2,
          size: size
        })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
          primary: _this3.getCountryName(country)
        }));
      });
      return memo;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$state = this.state,
          anchorEl = _this$state.anchorEl,
          cca2 = _this$state.cca2;
      var size = this.props.size;
      var open = Boolean(anchorEl);
      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
        onClick: this.handleClick,
        style: {
          padding: 5
        }
      }, CountryPicker.renderFlag({
        cca2: cca2,
        size: size
      })), /*#__PURE__*/_react.default.createElement(_Popover.default, {
        open: open,
        anchorEl: anchorEl,
        onClose: this.handleClose,
        anchorOrigin: {
          vertical: 'top',
          horizontal: 'left'
        },
        transformOrigin: {
          vertical: 'top',
          horizontal: 'left'
        }
      }, /*#__PURE__*/_react.default.createElement(_List.default, {
        dense: true,
        style: styles.popover
      }, this.renderCountries())));
    }
  }], [{
    key: "renderEmojiFlag",
    value: function renderEmojiFlag(_ref) {
      var cca2 = _ref.cca2,
          size = _ref.size;
      return /*#__PURE__*/_react.default.createElement("div", {
        style: styles.emojiFlag
      }, cca2 !== '' && countries[cca2.toUpperCase()] ? /*#__PURE__*/_react.default.createElement(Emoji, {
        name: countries[cca2.toUpperCase()].flag
      }) : null);
    }
  }, {
    key: "renderImageFlag",
    value: function renderImageFlag(_ref2) {
      var cca2 = _ref2.cca2,
          size = _ref2.size;
      return cca2 !== '' ? /*#__PURE__*/_react.default.createElement(_Avatar.default, {
        alt: "".concat(cca2),
        src: countries[cca2].flag,
        style: {
          height: size,
          width: size,
          margin: 0
        }
      }) : null;
    }
  }, {
    key: "renderFlag",
    value: function renderFlag(_ref3) {
      var cca2 = _ref3.cca2,
          size = _ref3.size;
      return isEmojiable ? CountryPicker.renderEmojiFlag({
        cca2: cca2,
        size: size
      }) : CountryPicker.renderImageFlag({
        cca2: cca2,
        size: size
      });
    }
  }]);

  return CountryPicker;
}(_react.Component);

exports.default = CountryPicker;

_defineProperty(CountryPicker, "propTypes", {
  cca2: _propTypes.default.string.isRequired,
  translation: _propTypes.default.string,
  onChange: _propTypes.default.func.isRequired,
  onClose: _propTypes.default.func,
  closeable: _propTypes.default.bool,
  filterable: _propTypes.default.bool,
  children: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.node]),
  countryList: _propTypes.default.array,
  excludeCountries: _propTypes.default.array,
  styles: _propTypes.default.object,
  filterPlaceholder: _propTypes.default.string,
  autoFocusFilter: _propTypes.default.bool,
  // to provide a functionality to disable/enable the onPress of Country Picker.
  disabled: _propTypes.default.bool,
  transparent: _propTypes.default.bool,
  animationType: _propTypes.default.oneOf(['slide', 'fade', 'none']),
  flagType: _propTypes.default.oneOf(Object.values(FLAG_TYPES)),
  hideAlphabetFilter: _propTypes.default.bool,
  renderFilter: _propTypes.default.func,
  size: _propTypes.default.number
});

_defineProperty(CountryPicker, "defaultProps", {
  translation: 'eng',
  countryList: _cca.default,
  excludeCountries: [],
  filterPlaceholder: 'Filter',
  autoFocusFilter: true,
  transparent: false,
  animationType: 'none',
  children: /*#__PURE__*/_react.default.createElement("div", null),
  onClose: function onClose() {},
  closeable: true,
  styles: {},
  filterable: true,
  disabled: false,
  flagType: 'flat',
  renderFilter: function renderFilter() {
    return /*#__PURE__*/_react.default.createElement("div", null);
  },
  hideAlphabetFilter: true,
  size: 32
});