sanity-plugin-recurring-dates 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-recurring-dates",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Add a custom input component to your Sanity Studio to manage recurring dates (e.g. for events)",
   "keywords": [
     "sanity",

package/src/components/RecurringDate.tsx

@@ -2,20 +2,25 @@ import {Box, Flex, Grid, Select, Stack, Text} from '@sanity/ui'
 import {upperFirst} from 'lodash'
 import React, {useCallback, useState} from 'react'
 import {rrulestr} from 'rrule'
-import {ObjectInputMember, type ObjectInputProps, set} from 'sanity'
+import {ObjectInputMember, type ObjectInputProps, ObjectSchemaType, set} from 'sanity'
 import {Feedback} from 'sanity-plugin-utils'
 
 import type {PluginConfig, WithRequiredProperty} from '../types'
 import {validateRRuleStrings} from '../utils'
 import {CustomRule} from './CustomRule'
+import {RemoveEndDate} from './RemoveEndDate'
 
 type RecurringDatesProps = ObjectInputProps & {
   pluginConfig: WithRequiredProperty<PluginConfig, 'defaultRecurrences'>
 }
 
+type RecurringDateObjectSchemaType = Omit<ObjectSchemaType, 'options'> & {
+  options?: PluginConfig
+}
+
 export function RecurringDates(props: RecurringDatesProps) {
   const {onChange, members, value: currentValue, schemaType, pluginConfig} = props
-  const {options}: {options?: PluginConfig} = schemaType
+  const {options, title}: RecurringDateObjectSchemaType = schemaType
   const {defaultRecurrences, hideEndDate, hideCustom, dateTimeOptions} = {
     ...pluginConfig,
     ...options,
@@ -32,10 +37,8 @@ export function RecurringDates(props: RecurringDatesProps) {
       const {value} = event.currentTarget
 
       if (value == 'custom') {
-        // open modal...
         onOpen()
       } else {
-        // update the field
         onChange(set(value, ['rrule']))
       }
     },
@@ -82,9 +85,13 @@ export function RecurringDates(props: RecurringDatesProps) {
     }
   }
 
+  // Do we have an end date set for this field?
+  const hasEndDate = currentValue && currentValue.endDate
+
   return (
     <Stack space={3}>
       <Grid columns={hideEndDate ? 1 : 2} gap={3}>
+        {hasEndDate && hideEndDate && <RemoveEndDate title={title} onChange={onChange} />}
         <Flex align="flex-end" gap={2}>
           <Box flex={1}>
             {startDateMember && <ObjectInputMember member={startDateMember} {...renderProps} />}

package/src/components/RemoveEndDate.tsx

@@ -0,0 +1,48 @@
+import {TrashIcon, WarningOutlineIcon} from '@sanity/icons'
+import {Box, Button, Card, Flex, Stack, Text} from '@sanity/ui'
+import {upperFirst} from 'lodash'
+import {useCallback} from 'react'
+import {type ObjectInputProps, unset} from 'sanity'
+
+export function RemoveEndDate({
+  title,
+  onChange,
+}: {
+  title?: string
+  onChange: ObjectInputProps['onChange']
+}) {
+  // Update the RRULE field when the select changes
+  const handleUnsetClick = useCallback(() => {
+    onChange(unset(['endDate']))
+  }, [onChange])
+
+  return (
+    <Card padding={4} radius={2} tone="caution" data-ui="Alert">
+      <Flex>
+        <Box>
+          <Text size={1}>
+            <WarningOutlineIcon />
+          </Text>
+        </Box>
+        <Stack space={3} flex={1} marginLeft={3}>
+          <Text size={1} weight="semibold">
+            The {title ? upperFirst(title) : `current`} field has an end date
+          </Text>
+          <Box>
+            <Text as="p" muted size={1}>
+              This field has an end date value, but the end date is currently disabled for this
+              field.
+            </Text>
+          </Box>
+          <Button
+            icon={TrashIcon}
+            tone="critical"
+            text={<>Remove end date</>}
+            onClick={handleUnsetClick}
+            width="100%"
+          />
+        </Stack>
+      </Flex>
+    </Card>
+  )
+}

package/src/plugin.tsx

@@ -4,7 +4,7 @@ import {DEFAULT_CONFIG} from './constants'
 import recurringDateSchema from './schema/recurringDates'
 import {PluginConfig, WithRequiredProperty} from './types'
 
-export const recurringDates = definePlugin<PluginConfig>((config) => {
+export const recurringDates = definePlugin<PluginConfig | void>((config) => {
   const pluginConfig: WithRequiredProperty<PluginConfig, 'defaultRecurrences'> = {
     ...DEFAULT_CONFIG,
     ...config,

package/src/schema/recurringDates.tsx

@@ -4,7 +4,7 @@ import {RecurringDates} from '../components/RecurringDate'
 import {PluginConfig, WithRequiredProperty} from '../types'
 
 export default (config: WithRequiredProperty<PluginConfig, 'defaultRecurrences'>) => {
-  const {hideEndDate, dateTimeOptions} = config
+  const {dateTimeOptions} = config
 
   return defineField({
     name: 'recurringDates',
@@ -36,7 +36,7 @@ export default (config: WithRequiredProperty<PluginConfig, 'defaultRecurrences'>
         type: 'string',
         hidden: true,
       }),
-    ].filter((field) => !(field.name === 'endDate' && hideEndDate)),
+    ],
     components: {
       input: (props) => RecurringDates({...props, pluginConfig: config}),
     },

package/src/types.ts

@@ -25,3 +25,9 @@ declare module 'sanity' {
     recurringDates: RecurringDateFieldOptions
   }
 }
+
+export interface RecurringDate {
+  rrule: string
+  startDate: string
+  endDate: String
+}