baseui/phone-input/country-picker.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = CountryPicker;
var _react = _interopRequireDefault(require("react"));
var _baseCountryPicker = _interopRequireDefault(require("./base-country-picker"));
var _constants = require("./constants");
var _select = require("../select");
var _overrides = require("../helpers/overrides");
var _defaultProps = _interopRequireDefault(require("./default-props"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); } /*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
CountryPicker.defaultProps = {
  disabled: _defaultProps.default.disabled,
  inputRef: {
    current: null
  },
  maxDropdownHeight: _defaultProps.default.maxDropdownHeight,
  maxDropdownWidth: _defaultProps.default.maxDropdownWidth,
  overrides: {},
  size: _defaultProps.default.size,
  error: _defaultProps.default.error,
  positive: _defaultProps.default.positive,
  required: _defaultProps.default.required
};
function CountryPicker(props) {
  const {
    overrides
  } = props;
  const baseSelectOverrides = {
    Root: {
      // @ts-ignore
      style: ({
        $theme: {
          direction,
          sizing
        }
      }) => {
        const marginDir = direction === 'rtl' ? 'marginLeft' : 'marginRight';
        return {
          [marginDir]: sizing.scale300,
          width: 'auto'
        };
      }
    },
    ControlContainer: {
      // @ts-ignore
      style: ({
        $theme: {
          direction,
          sizing
        },
        ...props
      }) => {
        const sizeToLeftPadding = {
          [_constants.SIZE.mini]: '0',
          [_constants.SIZE.compact]: sizing.scale0,
          [_constants.SIZE.default]: sizing.scale200,
          [_constants.SIZE.large]: sizing.scale400
        };
        const sizeToRightPadding = {
          [_constants.SIZE.mini]: sizing.scale400,
          [_constants.SIZE.compact]: sizing.scale500,
          [_constants.SIZE.default]: sizing.scale600,
          [_constants.SIZE.large]: sizing.scale700
        };
        const padStartDir = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
        const padEndDir = direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
        const styleOverride = {
          // @ts-ignore
          [padStartDir]: sizeToLeftPadding[props.$size || _constants.SIZE.default],
          // @ts-ignore
          [padEndDir]: sizeToRightPadding[props.$size || _constants.SIZE.default]
        };
        return styleOverride;
      }
    }
  };
  const [Select, selectProps] = (0, _overrides.getOverrides)(overrides.CountrySelect, _select.SingleSelect);
  const selectOverrides = (0, _overrides.mergeOverrides)(baseSelectOverrides, {
    Dropdown: overrides.CountrySelectDropdown || {},
    DropdownListItem: overrides.CountrySelectDropdownListItem || {}
  });
  selectProps.overrides = (0, _overrides.mergeOverrides)(selectOverrides, selectProps.overrides);
  const baseOverrides = {
    FlagContainer: {
      // @ts-ignore
      style: ({
        $theme: {
          direction,
          sizing
        },
        ...props
      }) => {
        const sizeToMargin = {
          [_constants.SIZE.mini]: sizing.scale200,
          [_constants.SIZE.compact]: sizing.scale300,
          [_constants.SIZE.default]: sizing.scale400,
          [_constants.SIZE.large]: sizing.scale500
        };
        const marginDir = direction === 'rtl' ? 'marginLeft' : 'marginRight';
        return {
          // @ts-ignore
          [marginDir]: sizeToMargin[props.$size || _constants.SIZE.default]
        };
      }
    },
    DialCode: {
      // @ts-ignore
      style: ({
        $theme: {
          direction,
          sizing
        }
      }) => {
        const marginDir = direction === 'rtl' ? 'marginRight' : 'marginLeft';
        return {
          [marginDir]: sizing.scale600
        };
      }
    }
  };
  const mergedOverrides = (0, _overrides.mergeOverrides)(baseOverrides, overrides);
  return /*#__PURE__*/_react.default.createElement(_baseCountryPicker.default, _extends({}, props, {
    overrides: {
      ...mergedOverrides,
      CountrySelect: {
        component: Select,
        props: selectProps
      }
    }
  }));
}