@sanity/rich-date-input 2.0.10 → 3.0.1

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 userTzName = Intl.DateTimeFormat().resolvedOptions().timeZone
+  const userTz = (allTimezones.find((tz) => tz.name === userTzName) ??
+    allTimezones.find((tz) => tz.group.includes(userTzName)))!
+
+  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,18 @@
+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
+  group: string[]
+}

package/src/utils/index.ts

@@ -0,0 +1,40 @@
+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,
+    group: tz.group,
+  } 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/schema.js

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