@sanity/rich-date-input 2.0.10-canary.0 → 3.0.0

package/src/components/TimezoneSelector.tsx

@@ -0,0 +1,82 @@
+import {SearchIcon} from '@sanity/icons'
+import {ObjectInputProps, set} from 'sanity'
+import {allTimezones, unlocalizeDateTime} from '../utils'
+import {NormalizedTimeZone, RichDate} from '../types'
+import {Autocomplete, Card, Text, Box} from '@sanity/ui'
+import {formatInTimeZone, zonedTimeToUtc} from 'date-fns-tz'
+
+interface TimezoneSelectorProps {
+  onChange: Pick<ObjectInputProps, 'onChange'>['onChange']
+  value?: RichDate
+}
+
+export const TimezoneSelector = (props: TimezoneSelectorProps) => {
+  const {onChange, value} = props
+  const currentTz = allTimezones.find((tz) => tz.name === value?.timezone)
+  const userTz = allTimezones.find(
+    (tz) => tz.name === Intl.DateTimeFormat().resolvedOptions().timeZone,
+  )!
+
+  const handleTimezoneChange = (selectedTz: string) => {
+    const newTimezone =
+      allTimezones.find((tz) => tz.value === selectedTz) ?? (userTz as NormalizedTimeZone)
+
+    const offset = newTimezone.currentTimeOffsetInMinutes ?? 0
+    const timezonePatch = set(newTimezone.name, ['timezone'])
+    const offsetPatch = set(offset, ['offset'])
+    const patches = [timezonePatch, offsetPatch]
+
+    //then, recalculate UTC and local from "old" time with the new offset
+    if (value?.utc) {
+      const desiredDateTime = unlocalizeDateTime(value.utc, value.timezone)
+      const newUtcDate = zonedTimeToUtc(desiredDateTime, newTimezone.name).toISOString()
+      const newLocalDate = formatInTimeZone(
+        newUtcDate,
+        newTimezone.name,
+        "yyyy-MM-dd'T'HH:mm:ssXXX",
+      )
+      patches.push(set(newUtcDate, ['utc']))
+      patches.push(set(newLocalDate, ['local']))
+    }
+    onChange(patches)
+  }
+
+  return (
+    //taken from Scheduled Publishing, again!
+    //https://github.com/sanity-io/sanity-plugin-scheduled-publishing/blob/bb282e3df9a8a73df37fab8ee1fdd0e2430745be/src/components/dialogs/DialogTimeZone.tsx#L100
+    <Box padding={4}>
+      <Autocomplete
+        fontSize={2}
+        icon={SearchIcon}
+        id="timezone"
+        onChange={handleTimezoneChange}
+        openButton
+        options={allTimezones}
+        padding={4}
+        placeholder="Search for a city or time zone"
+        popover={{
+          boundaryElement: document.querySelector('body'),
+          constrainSize: true,
+          placement: 'bottom-start',
+        }}
+        renderOption={(option) => {
+          return (
+            <Card as="button" padding={3}>
+              <Text size={1} textOverflow="ellipsis">
+                <span>GMT{option.offset}</span>
+                <span style={{fontWeight: 500, marginLeft: '1em'}}>{option.alternativeName}</span>
+                <span style={{marginLeft: '1em'}}>{option.mainCities}</span>
+              </Text>
+            </Card>
+          )
+        }}
+        renderValue={(_, option) => {
+          if (!option) return ''
+          return `${option.alternativeName} (${option.namePretty})`
+        }}
+        tabIndex={-1}
+        value={currentTz?.value ?? userTz.value}
+      />
+    </Box>
+  )
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+import {definePlugin} from 'sanity'
+import {richDateSchema, RichDateDefinition, RichDateSchemaType} from './schema'
+import {RichDate} from './types'
+
+export const richDate = definePlugin({
+  name: 'v3-rich-date-input',
+  schema: {
+    types: [richDateSchema],
+  },
+})
+
+export type {RichDateDefinition, RichDateSchemaType, RichDate}

package/src/schema.ts

@@ -0,0 +1,61 @@
+import {
+  DatetimeDefinition,
+  ObjectDefinition,
+  ObjectSchemaType,
+  defineField,
+  defineType,
+} from 'sanity'
+import {RichDateInput} from './components/RichDateInput'
+
+const richDateTypeName = 'richDate' as const
+
+export type RichDateSchemaType = Omit<ObjectSchemaType, 'options'> & {
+  options?: DatetimeDefinition['options']
+}
+
+/**
+ *  @public
+ */
+export interface RichDateDefinition extends Omit<ObjectDefinition, 'type' | 'fields' | 'options'> {
+  type: typeof richDateTypeName
+  options?: DatetimeDefinition['options']
+}
+
+declare module 'sanity' {
+  //allows the custom input to be valid for the schema def
+  export interface IntrinsicDefinitions {
+    richDate: RichDateDefinition
+  }
+}
+
+export const richDateSchema = defineType({
+  name: richDateTypeName,
+  title: 'Rich Date',
+  type: 'object',
+  fields: [
+    defineField({
+      name: 'local',
+      title: 'Local',
+      type: 'string',
+    }),
+    defineField({
+      name: 'utc',
+      title: 'UTC',
+      type: 'string',
+    }),
+    defineField({
+      name: 'timezone',
+      title: 'Timezone',
+      type: 'string',
+    }),
+    defineField({
+      name: 'offset',
+      title: 'Offset',
+      type: 'number',
+    }),
+  ],
+
+  components: {
+    input: RichDateInput,
+  },
+})

package/src/types/index.ts

@@ -0,0 +1,17 @@
+export interface RichDate {
+  local: string
+  utc: string
+  timezone: string
+  offset: number
+}
+
+export interface NormalizedTimeZone {
+  abbreviation: string
+  alternativeName: string
+  mainCities: string
+  name: string
+  namePretty: string
+  offset: string
+  value: string
+  currentTimeOffsetInMinutes: number
+}

package/src/utils/index.ts

@@ -0,0 +1,39 @@
+import {getTimeZones} from '@vvo/tzdb'
+import {NormalizedTimeZone} from '../types'
+import {formatInTimeZone} from 'date-fns-tz'
+
+export const unlocalizeDateTime = (datetime: string, timezone: string): string => {
+  return formatInTimeZone(datetime, timezone, 'yyyy-MM-dd HH:mm:ss')
+}
+
+/* We have to "fake" a UTC date to make the datepicker look "right"
+ * to the user. For example, if someone sets 7:00AM PST, which is 3PM UTC
+ * and I am on the east coast, I want to have 12:00PM UTC, which will look like 7:00AM to me
+ * In other words, UTC minus 3 hours, or (UTC(my offset - their offset))
+ * this is purely cosmetic and should not be saved at all
+ */
+export const getConstructedUTCDate = (utc: string, offset: number): string => {
+  const date = new Date(utc)
+  const currentOffset = new Date().getTimezoneOffset() * -1
+  const diff = currentOffset - offset
+  const fakeUTCDate = new Date(date.getTime() - diff * 60 * 1000)
+  return fakeUTCDate.toISOString()
+}
+
+//keep some consistency with scheduled publishing
+//https://github.com/sanity-io/sanity-plugin-scheduled-publishing/blob/bb282e3df9a8a73df37fab8ee1fdd0e2430745be/src/hooks/useTimeZone.tsx#L17
+export const allTimezones = getTimeZones().map((tz) => {
+  return {
+    abbreviation: tz.abbreviation,
+    alternativeName: tz.alternativeName,
+    mainCities: tz.mainCities.join(', '),
+    // Main time zone name 'Africa/Dar_es_Salaam'
+    name: tz.name,
+    // Time zone name with underscores removed
+    namePretty: tz.name.replaceAll('_', ' '),
+    offset: tz.currentTimeFormat.split(' ')[0],
+    // all searchable text - this is transformed before being rendered in `<AutoComplete>`
+    value: `${tz.currentTimeFormat} ${tz.abbreviation} ${tz.name}`,
+    currentTimeOffsetInMinutes: tz.currentTimeOffsetInMinutes,
+  } as NormalizedTimeZone
+})

package/v2-incompatible.js

@@ -0,0 +1,11 @@
+const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
+const {name, version, sanityExchangeUrl} = require('./package.json')
+
+export default showIncompatiblePluginDialog({
+  name: name,
+  versions: {
+    v3: version,
+    v2: undefined,
+  },
+  sanityExchangeUrl,
+})

package/lib/RichDate.css

@@ -1,28 +0,0 @@
-@import 'part:@sanity/base/theme/variables-style';
-
-.input {
-  composes: textInput from 'part:@sanity/base/theme/forms/text-input-style';
-  width: 100%;
-}
-
-.datepicker {
-  composes: shadow-6dp from 'part:@sanity/base/theme/shadows-style';
-  position: relative;
-}
-
-.root {
-  position: relative;
-}
-
-.rootWithTime {
-  composes: root;
-}
-
-.deprecationWarning {
-  padding: var(--medium-padding);
-  border: 3px dashed var(--state-warning-color);
-
-  @nest & > code {
-    font-weight: bold;
-  }
-}

package/lib/RichDate.js

@@ -1,163 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
-
-var _generateHelpUrl = _interopRequireDefault(require("@sanity/generate-help-url"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _default = _interopRequireDefault(require("part:@sanity/components/formfields/default"));
-
-var _RichDate = _interopRequireDefault(require("./RichDate.css"));
-
-var _patchEvent = require("part:@sanity/form-builder/patch-event");
-
-var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
-
-require("react-datepicker/dist/react-datepicker-cssmodules.css");
-
-var _default2 = _interopRequireDefault(require("part:@sanity/components/selects/default"));
-
-var _util = require("./util");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var DEPRECATION_WARNING = /*#__PURE__*/_react.default.createElement("div", {
-  className: _RichDate.default.deprecationWarning
-}, "This field has ", /*#__PURE__*/_react.default.createElement("code", null, "type: ", 'date'), ", which is deprecated and should be changed to", ' ', /*#__PURE__*/_react.default.createElement("code", null, "type: ", 'richDate'), ". Please update your schema and migrate your data.", ' ', /*#__PURE__*/_react.default.createElement("a", {
-  href: (0, _generateHelpUrl.default)('migrate-to-rich-date'),
-  target: "_blank",
-  rel: "noopener noreferrer"
-}, "More info"));
-
-class RichDateInput extends _react.default.PureComponent {
-  constructor() {
-    super(...arguments);
-
-    _defineProperty(this, "handleChange", nextValue => {
-      var onChange = this.props.onChange;
-      var assembledValue = this.assembleOutgoingValue(nextValue);
-      onChange(_patchEvent.PatchEvent.from(assembledValue ? (0, _patchEvent.set)(assembledValue) : (0, _patchEvent.unset)()));
-    });
-
-    _defineProperty(this, "handleTimeChange", nextValue => {
-      var onChange = this.props.onChange;
-      var assembledValue = this.assembleOutgoingValue(nextValue.value);
-      onChange(_patchEvent.PatchEvent.from(assembledValue ? (0, _patchEvent.set)(assembledValue) : (0, _patchEvent.unset)()));
-    });
-
-    _defineProperty(this, "getCurrentValue", () => {
-      var value = this.props.value;
-
-      if (!value) {
-        return null;
-      }
-
-      return (0, _util.getOptions)(this.props).inputUtc ? value.utc : value.local;
-    });
-  }
-
-  assembleOutgoingValue(newMoment) {
-    if (!newMoment || !newMoment.isValid()) {
-      return undefined;
-    }
-
-    var name = this.props.type.name;
-
-    if ((0, _util.getOptions)(this.props).inputUtc) {
-      return {
-        _type: name,
-        utc: newMoment.utc().format() // e.g. "2017-02-12T09:15:00Z"
-
-      };
-    }
-
-    return {
-      _type: name,
-      local: newMoment.format(),
-      // e.g. 2017-02-21T10:15:00+01:00
-      utc: newMoment.utc().format(),
-      // e.g. 2017-02-12T09:15:00Z
-      timezone: _momentTimezone.default.tz.guess(),
-      // e.g. Europe/Oslo
-      offset: (0, _momentTimezone.default)().utcOffset() // e.g. 60 (utc offset in minutes)
-
-    };
-  }
-
-  render() {
-    var _this$props = this.props,
-        value = _this$props.value,
-        type = _this$props.type,
-        level = _this$props.level;
-    var title = type.title,
-        description = type.description;
-    var options = (0, _util.getOptions)(this.props);
-    var format = [options.inputDate ? options.dateFormat : null, options.inputTime ? options.timeFormat : null].filter(Boolean).join(' ');
-    var timeIntervals = (0, _util.getTimeIntervals)(value, options);
-    var activeTimeInterval = timeIntervals.find(time => time.isActive === true);
-    var placeholder = typeof type.placeholder === 'function' ? type.placeholder() : type.placeholder;
-    return /*#__PURE__*/_react.default.createElement(_default.default, {
-      labelFor: this.inputId,
-      label: title,
-      level: level,
-      description: description
-    }, type.name === 'date' && DEPRECATION_WARNING, /*#__PURE__*/_react.default.createElement("div", {
-      className: options.inputTime ? _RichDate.default.rootWithTime : _RichDate.default.root
-    }, options.inputDate && /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, _extends({}, options, {
-      showMonthDropdown: true,
-      showYearDropdown: true,
-      todayButton: options.calendarTodayLabel,
-      selected: value && (0, _momentTimezone.default)(options.inputUtc ? value.utc : value.local),
-      placeholderText: placeholder,
-      calendarClassName: _RichDate.default.datepicker,
-      className: _RichDate.default.input,
-      onChange: this.handleChange,
-      value: value && (0, _momentTimezone.default)(options.inputUtc ? value.utc : value.local).format(format),
-      showTimeSelect: options.inputTime,
-      dateFormat: options.dateFormat,
-      timeFormat: options.timeFormat,
-      timeIntervals: options.timeStep
-    })), !options.inputDate && options.inputTime && /*#__PURE__*/_react.default.createElement(_default2.default, {
-      items: timeIntervals,
-      value: activeTimeInterval,
-      onChange: this.handleTimeChange
-    })));
-  }
-
-}
-
-exports.default = RichDateInput;
-RichDateInput.propTypes = {
-  value: _propTypes.default.shape({
-    utc: _propTypes.default.string,
-    local: _propTypes.default.string,
-    timezone: _propTypes.default.string,
-    offset: _propTypes.default.number
-  }),
-  type: _propTypes.default.shape({
-    title: _propTypes.default.string.isRequired,
-    name: _propTypes.default.string.isRequired,
-    options: _propTypes.default.object
-  }),
-  onChange: _propTypes.default.func,
-  level: _propTypes.default.number
-};
-RichDateInput.contextTypes = {
-  resolveInputComponent: _propTypes.default.func,
-  schema: _propTypes.default.object,
-  intl: _propTypes.default.shape({
-    locale: _propTypes.default.string
-  })
-};

package/lib/index.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _RichDate.default;
-  }
-});
-Object.defineProperty(exports, "schema", {
-  enumerable: true,
-  get: function get() {
-    return _schema.default;
-  }
-});
-
-var _RichDate = _interopRequireDefault(require("./RichDate"));
-
-var _schema = _interopRequireDefault(require("./schema"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/schema.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _RichDate = _interopRequireDefault(require("./RichDate"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = {
-  title: 'Rich Date',
-  name: 'richDate',
-  type: 'object',
-  fields: [{
-    name: 'utc',
-    type: 'datetime',
-    title: 'UTC',
-    required: true
-  }, {
-    name: 'local',
-    type: 'datetime',
-    title: 'Local'
-  }, {
-    name: 'timezone',
-    type: 'string',
-    title: 'Timezone'
-  }, {
-    name: 'offset',
-    type: 'number',
-    title: 'Offset'
-  }],
-  inputComponent: _RichDate.default
-};
-exports.default = _default;

package/lib/story.js

@@ -1,42 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _storybook = require("part:@sanity/storybook");
-
-var _richDate = _interopRequireDefault(require("part:@sanity/form-builder/input/rich-date"));
-
-var _knobs = require("part:@sanity/storybook/addons/knobs");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _storybook.storiesOf)('Date Picker', module).addDecorator(_knobs.withKnobs).add('Default', () => {
-  var dateFormat = (0, _knobs.text)('dateFormat', 'YYYY-MM-DD');
-  var timeFormat = (0, _knobs.text)('timeFormat', 'HH:mm');
-  var inputUtc = (0, _knobs.boolean)('inputUtc', false);
-  var timeStep = (0, _knobs.number)('timeStep', 15);
-  var calendarTodayLabel = (0, _knobs.text)('calendarTodayLabel', 'Today');
-  var placeholderDate = (0, _knobs.text)('placeholderDate');
-  var placeholderTime = (0, _knobs.text)('placeholderTime');
-  var inputDate = (0, _knobs.boolean)('inputDate', true);
-  var inputTime = (0, _knobs.boolean)('inputTime', true);
-  var options = {
-    dateFormat,
-    timeFormat,
-    inputUtc,
-    timeStep,
-    calendarTodayLabel,
-    placeholderDate,
-    placeholderTime,
-    inputDate,
-    inputTime
-  };
-  return /*#__PURE__*/_react.default.createElement(_richDate.default, {
-    onChange: (0, _storybook.action)('onChange'),
-    type: {
-      title: (0, _knobs.text)('title'),
-      description: (0, _knobs.text)('description'),
-      options: options
-    }
-  });
-});

package/lib/util.js

@@ -1,52 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getOptions = getOptions;
-exports.getPlaceholderText = getPlaceholderText;
-exports.getTimeIntervals = getTimeIntervals;
-
-var _moment = _interopRequireDefault(require("moment"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function getOptions(props) {
-  var options = Object.assign({}, props.type.options);
-  options.dateFormat = options.dateFormat || 'YYYY-MM-DD';
-  options.timeFormat = options.timeFormat || 'HH:mm';
-  options.inputUtc = options.inputUtc === true;
-  options.timeStep = options.timeStep || 15;
-  options.calendarTodayLabel = options.calendarTodayLabel || 'Today';
-  options.inputDate = options.hasOwnProperty('inputDate') ? options.inputDate : true;
-  options.inputTime = options.hasOwnProperty('inputTime') ? options.inputTime : true;
-  options.placeholderDate = options.placeholderDate || (0, _moment.default)().format(options.dateFormat);
-  options.placeholderTime = options.placeholderTime || (0, _moment.default)().format(options.timeFormat);
-  return options;
-}
-
-function getPlaceholderText(options) {
-  return "".concat(options.inputDate ? options.placeholderDate : '', " ").concat(options.inputTime ? options.placeholderTime : '');
-}
-
-function getTimeIntervals(value, options) {
-  var timeStep = options.timeStep,
-      timeFormat = options.timeFormat;
-  var activeTime = value && (0, _moment.default)(value);
-  var beginningOfDay = (0, _moment.default)().startOf('day');
-  var multiplier = 1440 / timeStep;
-  var timeIntervals = [];
-
-  for (var i = 0; i < multiplier; i++) {
-    timeIntervals.push(beginningOfDay.clone().add(i * timeStep, 'minutes'));
-  }
-
-  return timeIntervals.map(time => {
-    var isActive = activeTime && time.format(options.timeFormat) === activeTime.format(options.timeFormat);
-    return {
-      title: time.format(timeFormat),
-      value: time,
-      isActive: isActive
-    };
-  });
-}

package/schema.js

@@ -1 +0,0 @@
-module.exports = require('./lib/schema')