sanity-plugin-recurring-dates 1.3.1 → 1.4.0

package/README.md

@@ -71,6 +71,17 @@ export default defineConfig({
 
       // Changes the date picker to date only, no time
       dateOnly: true, // defaults to false
+
+      // Change the field titles and descriptions
+      // field names will remain "startDate" and "endDate"
+      fieldTitles: {
+        startDate: 'Event starts',
+        endDate: 'Event ends',
+      },
+      fieldDescriptions: {
+        startDate: 'This is the date the event starts',
+        endDate: 'This is the date the event ends',
+      },
     }),
   ],
 })
@@ -114,6 +125,17 @@ defineField({
       startDate: (Rule) => Rule.required() // defaults to (Rule) => Rule.required()
       endDate: (Rule) => Rule.min(Rule.valueOfField('startDate')) // defaults to (Rule) => Rule.min(Rule.valueOfField('startDate'))
     }
+
+    // Change the field titles and descriptions
+    // field names will remain "startDate" and "endDate"
+    fieldTitles: {
+      startDate: 'Event starts',
+      endDate: 'Event ends',
+    },
+    fieldDescriptions: {
+      startDate: 'This is the date the event starts',
+      endDate: 'This is the date the event ends',
+    },
   },
 })
 ```

package/dist/index.d.ts

@@ -13,6 +13,14 @@ export declare interface PluginConfig {
     startDate?: (Rule: DateRule) => DateRule
     endDate?: (Rule: DateRule) => DateRule
   }
+  fieldTitles?: {
+    startDate?: string
+    endDate?: string
+  }
+  fieldDescriptions?: {
+    startDate?: string
+    endDate?: string
+  }
 }
 
 export declare interface RecurringDate {

package/dist/index.esm.js

@@ -5,7 +5,7 @@ import { Card, Text, Box, Grid, TextInput, useForwardedRef, Flex, Select, Button
 import { range, upperFirst } from 'lodash';
 import * as React from 'react';
 import React__default, { useState, useEffect, PureComponent, useCallback, forwardRef, useRef, useMemo } from 'react';
-import { rrulestr, Weekday, RRule } from 'rrule';
+import { rrulestr, Weekday, RRule, datetime } from 'rrule';
 import { Feedback } from 'sanity-plugin-utils';
 import { toDate as toDate$1, format as format$1 } from 'date-fns-tz';
 import { format, parse, DEFAULT_DATE_FORMAT as DEFAULT_DATE_FORMAT$1, DEFAULT_TIME_FORMAT } from '@sanity/util/legacyDateFormat';
@@ -4357,6 +4357,7 @@ function CustomRule(_ref8) {
     onChange,
     initialValue,
     startDate,
+    endDate,
     dateTimeOptions
   } = _ref8;
   const initialRule = useMemo(() => {
@@ -4367,6 +4368,7 @@ function CustomRule(_ref8) {
   const [count, setCount] = useState(initialRule.origOptions.count || null);
   const [until, setUntil] = useState(initialRule.origOptions.until || null);
   const [byweekday, setByweekday] = useState(initialRule.origOptions.byweekday || null);
+  const [untilValid, setUntilValid] = useState(true);
   const handleChange = useCallback(event => {
     const {
       name,
@@ -4396,9 +4398,15 @@ function CustomRule(_ref8) {
   }, [frequency, startDate]);
   const handleUntilChange = useCallback(date => {
     if (date) {
-      setUntil(toDate$1(`${date}T23:59:59`));
+      const untilDate = toDate$1(`${date}T23:59:59`);
+      if (endDate && untilDate < toDate$1(endDate) || startDate && untilDate < toDate$1(startDate)) {
+        setUntilValid(false);
+      } else {
+        setUntilValid(true);
+      }
+      setUntil(untilDate);
     }
-  }, []);
+  }, [endDate, startDate]);
   const handleEndChange = useCallback(event => {
     const {
       value
@@ -4537,6 +4545,12 @@ function CustomRule(_ref8) {
                   value: until ? formatUntilValue(new Date(until)) : formatUntilValue(getUntilDate()),
                   readOnly: !until
                 })
+              }), !untilValid && /* @__PURE__ */jsx(Feedback, {
+                tone: "critical",
+                children: /* @__PURE__ */jsx(Text, {
+                  size: 1,
+                  children: "Until date must be after event ends"
+                })
               })]
             }), /* @__PURE__ */jsxs(Flex, {
               gap: 2,
@@ -4590,7 +4604,8 @@ function CustomRule(_ref8) {
           }), /* @__PURE__ */jsx(Button, {
             text: "Done",
             tone: "positive",
-            onClick: handleConfirm
+            onClick: handleConfirm,
+            disabled: !untilValid
           })]
         })
       })]
@@ -4699,33 +4714,44 @@ function RecurringDates(props) {
       ...startDateMember?.field?.schemaType.options,
       ...dateTimeOptions
     };
+    if (dateOnly === true) {
+      startDateMember.field.schemaType.name = "date";
+    } else {
+      startDateMember.field.schemaType.name = "datetime";
+    }
+    if (validation?.startDate) {
+      startDateMember.field.schemaType.validation = CustomValidation => validation?.startDate?.(CustomValidation);
+    } else {
+      startDateMember.field.schemaType.validation = DefaultRule => DefaultRule.required();
+    }
+    if (options?.fieldTitles?.startDate) {
+      startDateMember.field.schemaType.title = options.fieldTitles.startDate;
+    }
+    if (options?.fieldDescriptions?.startDate) {
+      startDateMember.field.schemaType.description = options.fieldDescriptions.startDate;
+    }
   }
   if (endDateMember?.kind == "field") {
     endDateMember.field.schemaType.options = {
       ...endDateMember?.field?.schemaType.options,
       ...dateTimeOptions
     };
-  }
-  if (dateOnly === true) {
-    if (startDateMember?.kind == "field") {
-      startDateMember.field.schemaType.name = "date";
-    }
-    if (endDateMember?.kind == "field") {
+    if (dateOnly === true) {
       endDateMember.field.schemaType.name = "date";
+    } else {
+      endDateMember.field.schemaType.name = "datetime";
     }
-  } else {
-    if (startDateMember?.kind == "field") {
-      startDateMember.field.schemaType.name = "datetime";
+    if (validation?.endDate) {
+      endDateMember.field.schemaType.validation = CustomValidation => validation?.endDate?.(CustomValidation);
+    } else {
+      endDateMember.field.schemaType.validation = DefaultRule => DefaultRule.min(DefaultRule.valueOfField("startDate"));
     }
-    if (endDateMember?.kind == "field") {
-      endDateMember.field.schemaType.name = "datetime";
+    if (options?.fieldTitles?.endDate) {
+      endDateMember.field.schemaType.title = options.fieldTitles.endDate;
+    }
+    if (options?.fieldDescriptions?.endDate) {
+      endDateMember.field.schemaType.description = options.fieldDescriptions.endDate;
     }
-  }
-  if (validation?.startDate && startDateMember?.kind == "field") {
-    startDateMember.field.schemaType.validation = CustomValidation => validation?.startDate?.(CustomValidation);
-  }
-  if (validation?.endDate && endDateMember?.kind == "field") {
-    endDateMember.field.schemaType.validation = CustomValidation => validation?.endDate?.(CustomValidation);
   }
   const hasEndDate = currentValue?.endDate;
   return /* @__PURE__ */jsxs(Stack, {
@@ -4778,6 +4804,7 @@ function RecurringDates(props) {
           return null;
         }
         const rule = rrulestr(recurrence);
+        rule.options.until = rule?.options?.until && datetime(rule?.options?.until?.getFullYear(), rule?.options?.until?.getMonth() + 1, rule?.options?.until?.getDate(), rule?.options?.until?.getHours(), rule?.options?.until?.getMinutes(), rule?.options?.until?.getSeconds());
         return /* @__PURE__ */jsx("option", {
           value: recurrence,
           children: upperFirst(rule.toText())
@@ -4795,6 +4822,7 @@ function RecurringDates(props) {
       onChange,
       initialValue: currentValue?.rrule,
       startDate: startDateMember?.kind == "field" ? startDateMember?.field?.value : void 0,
+      endDate: endDateMember?.kind == "field" ? endDateMember?.field?.value : void 0,
       dateTimeOptions
     })]
   });
@@ -4816,6 +4844,9 @@ function RecurringDatesPreview(props) {
     ...options
   };
   const rule = rrule && rrulestr(rrule);
+  if (rule) {
+    rule.options.until = rule?.options?.until && datetime(rule?.options?.until?.getFullYear(), rule?.options?.until?.getMonth() + 1, rule?.options?.until?.getDate(), rule?.options?.until?.getHours(), rule?.options?.until?.getMinutes(), rule?.options?.until?.getSeconds());
+  }
   const dateFormat = dateTimeOptions?.dateFormat || DEFAULT_DATE_FORMAT$1;
   const timeFormat = dateTimeOptions?.timeFormat || DEFAULT_TIME_FORMAT;
   const start = startDate ? new Date(startDate) : void 0;
@@ -4846,7 +4877,9 @@ var recurringDateSchema = config => {
   const {
     dateTimeOptions,
     dateOnly,
-    validation
+    validation,
+    fieldTitles,
+    fieldDescriptions
   } = config;
   return defineField({
     name: "recurringDates",
@@ -4854,13 +4887,15 @@ var recurringDateSchema = config => {
     type: "object",
     icon: CalendarIcon,
     fields: [defineField({
-      title: "Start Date",
+      title: fieldTitles?.startDate || "Start Date",
+      description: fieldDescriptions?.startDate || "",
       name: "startDate",
       type: dateOnly ? "date" : "datetime",
       options: dateTimeOptions,
       validation: Rule => validation?.startDate ? validation.startDate(Rule) : Rule.required()
     }), defineField({
-      title: "End Date",
+      title: fieldTitles?.endDate || "End Date",
+      description: fieldDescriptions?.endDate || "",
       name: "endDate",
       type: dateOnly ? "date" : "datetime",
       options: dateTimeOptions,