baseui
Version:
A React Component library implementing the Base design language
158 lines (154 loc) • 6.95 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StyledRoot = exports.StyledPhoneInputRoot = exports.StyledFlagContainer = exports.StyledDialCode = exports.StyledCountrySelectDropdownNameColumn = exports.StyledCountrySelectDropdownListItemElement = exports.StyledCountrySelectDropdownListItem = exports.StyledCountrySelectDropdownFlagColumn = exports.StyledCountrySelectDropdownDialcodeColumn = exports.StyledCountrySelectDropdownContainer = exports.StyledCountrySelectContainer = void 0;
var React = _interopRequireWildcard(require("react"));
var _constants = require("./constants");
var _styles = require("../styles");
var _menu = require("../menu");
var _select = require("../select");
var _defaultProps = _interopRequireDefault(require("../select/default-props"));
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; }
/*
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.
*/
// The root element of the PhoneInputNext
const StyledPhoneInputRoot = exports.StyledPhoneInputRoot = (0, _styles.styled)('div', {
display: 'flex'
});
StyledPhoneInputRoot.displayName = "StyledPhoneInputRoot";
StyledPhoneInputRoot.displayName = 'StyledPhoneInputRoot';
const StyledFlagContainer = exports.StyledFlagContainer = (0, _styles.styled)('span', ({
$size = _constants.SIZE.default,
$theme: {
sizing
}
}) => {
const sizeToFont = {
[_constants.SIZE.mini]: sizing.scale700,
[_constants.SIZE.compact]: sizing.scale800,
[_constants.SIZE.default]: sizing.scale900,
[_constants.SIZE.large]: sizing.scale1000
};
return {
fontSize: sizeToFont[$size]
};
});
StyledFlagContainer.displayName = "StyledFlagContainer";
StyledFlagContainer.displayName = 'StyledFlagContainer';
// An override component for the Select's Root styled element
const StyledRoot = exports.StyledRoot = (0, _styles.withStyle)(_select.StyledRoot, props => {
// hard coded widths for the flag dropdown anchor
const sizeToWidth = {
[_constants.SIZE.mini]: '50px',
[_constants.SIZE.compact]: '60px',
[_constants.SIZE.default]: '70px',
[_constants.SIZE.large]: '80px'
};
return {
width: sizeToWidth[props.$size || _constants.SIZE.default],
display: 'inline-block'
};
});
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
const StyledDialCode = exports.StyledDialCode = (0, _styles.styled)('div', ({
$theme: {
direction,
sizing
}
}) => {
const marginDir = direction === 'rtl' ? 'marginRight' : 'marginLeft';
return {
[marginDir]: sizing.scale100,
display: 'flex',
alignItems: 'center'
};
});
StyledDialCode.displayName = "StyledDialCode";
StyledDialCode.displayName = 'StyledDialCode';
const StyledCountrySelectContainer = exports.StyledCountrySelectContainer = (0, _styles.styled)('div', {
display: 'flex',
alignItems: 'center'
});
StyledCountrySelectContainer.displayName = "StyledCountrySelectContainer";
StyledCountrySelectContainer.displayName = 'StyledCountrySelectContainer';
const StyledCountrySelectDropdownContainer = exports.StyledCountrySelectDropdownContainer = (0, _styles.withStyle)(_menu.StyledList, props => {
const {
$height = _defaultProps.default.maxDropdownHeight
} = props;
return {
height: $height,
paddingTop: 0,
paddingBottom: 0
};
});
StyledCountrySelectDropdownContainer.displayName = "StyledCountrySelectDropdownContainer";
StyledCountrySelectDropdownContainer.displayName = 'StyledCountrySelectDropdownContainer';
const StyledCountrySelectDropdownListItemElement = exports.StyledCountrySelectDropdownListItemElement = (0, _styles.withStyle)(_select.StyledDropdownListItem, {
paddingTop: 0,
paddingBottom: 0,
paddingLeft: 0,
paddingRight: 0,
display: 'flex',
alignItems: 'center',
height: '42px'
});
StyledCountrySelectDropdownListItemElement.displayName = "StyledCountrySelectDropdownListItemElement";
StyledCountrySelectDropdownListItemElement.displayName = 'StyledCountrySelectDropdownListItemElement';
const StyledCountrySelectDropdownListItem = exports.StyledCountrySelectDropdownListItem = (0, _styles.withWrapper)(StyledCountrySelectDropdownListItemElement, Styled =>
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function StyledCountrySelectDropdownListItem({
item,
...restProps
}) {
return /*#__PURE__*/React.createElement(Styled, restProps);
});
const StyledCountrySelectDropdownFlagColumn = exports.StyledCountrySelectDropdownFlagColumn = (0, _styles.styled)('div', ({
$theme: {
direction,
sizing
}
}) => {
const paddingDir = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
return {
[paddingDir]: sizing.scale600,
display: 'flex',
alignItems: 'center'
};
});
StyledCountrySelectDropdownFlagColumn.displayName = "StyledCountrySelectDropdownFlagColumn";
StyledCountrySelectDropdownFlagColumn.displayName = 'StyledCountrySelectDropdownFlagColumn';
const StyledCountrySelectDropdownNameColumn = exports.StyledCountrySelectDropdownNameColumn = (0, _styles.styled)('div', ({
$theme: {
direction,
sizing
}
}) => {
const paddingDir = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
return {
[paddingDir]: sizing.scale600
};
});
StyledCountrySelectDropdownNameColumn.displayName = "StyledCountrySelectDropdownNameColumn";
StyledCountrySelectDropdownNameColumn.displayName = 'StyledCountrySelectDropdownNameColumn';
const StyledCountrySelectDropdownDialcodeColumn = exports.StyledCountrySelectDropdownDialcodeColumn = (0, _styles.styled)('div', ({
$theme: {
direction,
sizing
}
}) => {
const paddingDir = direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
const marginDir = direction === 'rtl' ? 'marginRight' : 'marginLeft';
return {
[paddingDir]: sizing.scale600,
[marginDir]: 'auto'
};
});
StyledCountrySelectDropdownDialcodeColumn.displayName = "StyledCountrySelectDropdownDialcodeColumn";
StyledCountrySelectDropdownDialcodeColumn.displayName = 'StyledCountrySelectDropdownDialcodeColumn';