baseui
Version:
A React Component library implementing the Base design language
210 lines (207 loc) • 8.37 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = CountryPicker;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = require("./styled-components");
var _select = require("../select");
var _popover = require("../popover");
var _overrides = require("../helpers/overrides");
var _defaultProps = _interopRequireDefault(require("./default-props"));
var _utils = require("./utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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
};
const DropdownListItem = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const {
children,
...rest
} = props;
return /*#__PURE__*/_react.default.createElement(_styledComponents.StyledCountrySelectDropdownListItem, _extends({
ref: ref
}, rest), props.children);
});
DropdownListItem.displayName = 'DropdownListItem';
// @ts-ignore
function DropdownOptionContent(props) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.children);
}
function CountryPicker(props) {
const {
country,
disabled,
error,
inputRef,
maxDropdownHeight,
maxDropdownWidth,
mapIsoToLabel,
onCountryChange,
overrides,
positive,
required,
size
} = props;
const [resetScrollIndex, setResetScrollIndex] = (0, _react.useState)(false);
const sharedProps = {
$disabled: disabled,
$error: error,
$positive: positive,
$required: required,
$size: size
};
const options = Object.values(props.countries);
const scrollIndex = options.findIndex(opt => opt.id === country.id);
const baseSelectOverrides = {
Root: {
component: _styledComponents.StyledRoot
},
Input: {
style: {
width: 0
},
props: {
// https://github.com/uber/baseweb/issues/3846
autoComplete: 'chrome-off'
}
},
IconsContainer: {
style: {
paddingRight: '0'
}
},
SingleValue: {
style: {
display: 'flex',
alignItems: 'center'
}
},
StatefulMenu: {
props: {
// @ts-ignore
stateReducer: (type, nextState) => {
const next = {
...nextState,
highlightedIndex: resetScrollIndex ? 0 : nextState.highlightedIndex
};
setResetScrollIndex(false);
return next;
},
initialState: {
isFocused: true,
highlightedIndex: scrollIndex
}
}
},
DropdownContainer: {
style: {
width: maxDropdownWidth,
maxWidth: 'calc(100vw - 10px)'
}
},
Dropdown: {
props: {
$country: country,
$maxDropdownHeight: maxDropdownHeight,
$mapIsoToLabel: mapIsoToLabel,
$overrides: {
CountrySelectDropdown: overrides.CountrySelectDropdown,
CountrySelectDropdownListItem: overrides.CountrySelectDropdownListItem,
CountrySelectDropdownFlagColumn: overrides.CountrySelectDropdownFlagColumn,
CountrySelectDropdownNameColumn: overrides.CountrySelectDropdownNameColumn,
CountrySelectDropdownDialcodeColumn: overrides.CountrySelectDropdownDialcodeColumn,
FlagContainer: overrides.FlagContainer
}
}
},
DropdownListItem: {
component: DropdownListItem
},
OptionContent: {
component: DropdownOptionContent
},
Popover: {
props: {
focusLock: false,
placement: _popover.PLACEMENT.bottomLeft
}
}
};
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 [FlagColumn, flagColumnProps] = (0, _overrides.getOverrides)(overrides.CountrySelectDropdownFlagColumn, _styledComponents.StyledCountrySelectDropdownFlagColumn);
const [FlagContainer, flagContainerProps] = (0, _overrides.getOverrides)(overrides.FlagContainer, _styledComponents.StyledFlagContainer);
const [NameColumn, nameColumnProps] = (0, _overrides.getOverrides)(overrides.CountrySelectDropdownNameColumn, _styledComponents.StyledCountrySelectDropdownNameColumn);
const [Dialcode, dialcodeProps] = (0, _overrides.getOverrides)(overrides.CountrySelectDropdownDialcodeColumn, _styledComponents.StyledCountrySelectDropdownDialcodeColumn);
return /*#__PURE__*/_react.default.createElement(Select, _extends({
clearable: false,
disabled: disabled
// eslint-disable-next-line @typescript-eslint/no-unused-vars
// @ts-ignore
,
getOptionLabel: ({
option,
optionState
}) => {
const iso = option.id;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FlagColumn, flagColumnProps, /*#__PURE__*/_react.default.createElement(FlagContainer, _extends({
$iso: iso,
"data-iso": iso
}, flagContainerProps), (0, _utils.iso2FlagEmoji)(iso))), /*#__PURE__*/_react.default.createElement(NameColumn, nameColumnProps, mapIsoToLabel ? mapIsoToLabel(iso) : option.label), /*#__PURE__*/_react.default.createElement(Dialcode, dialcodeProps, option.dialCode));
},
getValueLabel: value => {
const iso = value.option.id;
return /*#__PURE__*/_react.default.createElement(FlagContainer, _extends({
$iso: iso,
"data-iso": iso
}, sharedProps, flagContainerProps), (0, _utils.iso2FlagEmoji)(iso));
},
error: error,
maxDropdownHeight: maxDropdownHeight
// @ts-ignore
,
onChange: event => {
if (typeof onCountryChange === 'function') {
onCountryChange(event);
} else if (process.env.NODE_ENV !== "production") {
console.warn('CountryPicker component is controlled (or stateless) ' + 'and requires an `onCountryChange` handler to be passed in ' + 'that handles the `country` prop value update.');
}
// After choosing a country, shift focus to the text input
if (inputRef && inputRef.current) {
inputRef.current.focus();
}
},
options: options,
positive: positive,
"aria-label": "Select country",
required: required,
size: size,
value: [country],
onInputChange: () => {
setResetScrollIndex(true);
}
}, selectProps));
}