baseui
Version:
A React Component library implementing the Base design language
157 lines (154 loc) • 6.96 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _dateFnsTz = require("date-fns-tz");
var _overrides = require("../helpers/overrides");
var _locale = require("../locale");
var _select = require("../select");
var _tzdata = require("./tzdata");
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); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
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.
*/ // global Intl
class TimezonePicker extends React.Component {
constructor(...args) {
super(...args);
_defineProperty(this, "state", {
timezones: [],
value: null
});
_defineProperty(this, "buildTimezones", compareDate => {
let timezones = [];
for (const zoneName of _tzdata.zones) {
try {
const offset = (0, _dateFnsTz.getTimezoneOffset)(zoneName, compareDate) / 3_600_000;
const offsetFormatted = `${offset >= 0 ? '+' : '-'}${Math.abs(offset)}`;
let label = `(GMT${offsetFormatted}) ${zoneName.replace(/_/g, ' ')}`;
if (this.props.includeAbbreviations) {
const abbreviation = (0, _dateFnsTz.format)(compareDate, 'zzz', {
timeZone: zoneName
});
if (abbreviation) {
label += ` - ${abbreviation}`;
}
}
const offsetMinutes = offset * 60;
timezones.push({
id: zoneName,
label,
// offset output is in minutes, difference of UTC and this zone (negative for hours ahead of UTC, positive for hours behind)
offset: offsetMinutes === 0 ? 0 : offsetMinutes * -1
});
} catch (error) {
// Ignores timezones that are not available within a user's browser/operating system
console.error(`failed to format zone name ${zoneName}`);
}
}
if (this.props.additionalTimezones) {
timezones = timezones.concat(this.props.additionalTimezones);
}
// Sorts W -> E, prioritizes america. could be more nuanced based on system tz but simple for now
return timezones.sort((a, b) => {
const offsetDelta = b.offset - a.offset;
if (offsetDelta !== 0) return offsetDelta;
if (typeof a.label === 'string' && typeof b.label === 'string') {
if (a.label < b.label) return -1;
if (a.label > b.label) return 1;
}
return 0;
});
});
}
componentDidMount() {
const timezones = this.buildTimezones(this.props.date || new Date());
if (typeof document !== 'undefined') {
if (!this.props.value) {
const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
this.setState({
timezones,
value: tz
});
const option = timezones.find(o => o.id === tz);
option && this.props.onChange && this.props.onChange(option);
} else {
this.setState({
timezones
});
}
} else {
this.setState({
timezones
});
}
}
componentDidUpdate(prevProps) {
const prevTime = prevProps.date ? prevProps.date.getTime() : 0;
const nextTime = this.props.date ? this.props.date.getTime() : 0;
if (prevTime !== nextTime) {
const timezones = this.buildTimezones(this.props.date || new Date());
this.setState({
timezones
});
const option = timezones.find(o => o.id === this.state.value);
option && this.props.onChange && this.props.onChange(option);
}
}
render() {
const {
overrides = {}
} = this.props;
const [OverriddenSelect, selectProps] = (0, _overrides.getOverrides)(overrides.Select, _select.Select);
selectProps.overrides = (0, _overrides.mergeOverrides)({
Dropdown: {
style: {
maxHeight: '360px'
}
}
}, selectProps.overrides);
let options = this.state.timezones;
if (this.props.mapLabels) {
options = options.map(option => {
// @ts-ignore
option.label = this.props.mapLabels(option);
return option;
});
}
return /*#__PURE__*/React.createElement(_locale.LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(OverriddenSelect, _extends({
"aria-label": locale.datepicker.timezonePickerAriaLabel,
options: options,
clearable: false,
disabled: this.props.disabled,
error: this.props.error,
positive: this.props.positive,
size: this.props.size
// @ts-ignore
,
onChange: params => {
if (params.type === 'clear') {
this.setState({
value: ''
});
this.props.onChange && this.props.onChange(null);
} else {
this.setState({
value: params.option.id
});
this.props.onChange && this.props.onChange(params.option);
}
},
value: this.props.value || this.state.value ? [{
id: this.props.value || this.state.value
}] : null
}, selectProps)));
}
}
var _default = exports.default = TimezonePicker;