feat(StringInputWithCharacterCount): max count

varianter · Sep 10, 2024 · 0d4e537 · 0d4e537
1 parent c837800
commit 0d4e537
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/studio/components/StringInputWithCharacterCount.tsx b/studio/components/StringInputWithCharacterCount.tsx
@@ -1,14 +1,22 @@
 import { Box, Stack, Text } from "@sanity/ui";
 import { StringInputProps } from "sanity";
 
-export const StringInputWithCharacterCount = (props: StringInputProps) => {
-  const characterCount = props.value?.length ?? 0;
+type StringInputWithCharacterCountProps = StringInputProps & {
+  maxCount?: number;
+};
+
+export const StringInputWithCharacterCount = ({
+  maxCount,
+  ...defaultProps
+}: StringInputWithCharacterCountProps) => {
+  const characterCount = defaultProps.value?.length ?? 0;
 
   return (
     <Stack space={3}>
-      <Box>{props.renderDefault(props)}</Box>
+      <Box>{defaultProps.renderDefault(defaultProps)}</Box>
       <Text size={1} muted>
-        {characterCount} characters
+        {characterCount}
+        {maxCount && `/${maxCount}`} characters
       </Text>
     </Stack>
   );

diff --git a/studio/schemas/objects/seo.ts b/studio/schemas/objects/seo.ts
@@ -30,7 +30,8 @@ const seo = defineField({
         Rule.max(70).error("A title cannot exceed 70 characters"),
       ],
       components: {
-        input: StringInputWithCharacterCount,
+        input: (props) =>
+          StringInputWithCharacterCount({ ...props, maxCount: 70 }),
       },
     }),
     defineField({
@@ -48,7 +49,8 @@ const seo = defineField({
         ),
       ],
       components: {
-        input: StringInputWithCharacterCount,
+        input: (props) =>
+          StringInputWithCharacterCount({ ...props, maxCount: 160 }),
       },
     }),
     defineField({