♻️ Read only wrapper #1891

equinor · Dec 3, 2024 · 9d70261 · 9d70261
1 parent cae5490
commit 9d70261
Show file tree

Hide file tree

Showing 21 changed files with 776 additions and 400 deletions.
diff --git a/sanityv3/actions/fieldActions/CustomCopyFieldAction.ts b/sanityv3/actions/fieldActions/CustomCopyFieldAction.ts
@@ -26,12 +26,6 @@ export const copyAction = defineDocumentFieldAction({
           description: 'Cannot copy document. Use duplicate instead.',
         })
         return
-      } else if (path[0] === 'lang') {
-        toast.push({
-          title: 'Cannot copy language',
-          description: 'Copying language is not allowed.',
-        })
-        return
       }
       const value = getFormValue([]) as FormDocumentValue
       onCopy(path, value, {

diff --git a/sanityv3/package.json b/sanityv3/package.json
@@ -32,7 +32,7 @@
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rxjs": "^7.8.0",
-    "sanity": "^3.52.4",
+    "sanity": "^3.62.0",
     "sanity-plugin-documents-pane": "^2.1.0",
     "sanity-plugin-iframe-pane": "^2.3.0",
     "sanity-plugin-media": "^2.2.5",

diff --git a/sanityv3/pnpm-lock.yaml b/sanityv3/pnpm-lock.yaml
diff --git a/sanityv3/schemas/components/Breadcrumbs/BreadcrumbsInput.tsx b/sanityv3/schemas/components/Breadcrumbs/BreadcrumbsInput.tsx
@@ -6,13 +6,14 @@ import { BreadcrumbsPreview } from './BreadcrumbsPreview'
 import { getObjectMemberField } from '../utils/getObjectMemberField'
 import { constructBreadcrumbs } from './utils/constructBreadcrumbs'
 import { apiVersion } from '../../../sanity.client'
+import { ReadOnlyWrapper } from '../common/ReadOnlyWrapper'
 
 type BreadCrumbsInputProps = {
   value?: Reference[]
 } & ObjectInputProps
 
 export const BreadcrumbsInput = (props: BreadCrumbsInputProps) => {
-  const { value, members, renderField, renderInput, renderItem, renderPreview } = props
+  const { value, members, renderField, renderInput, renderItem, renderPreview, readOnly } = props
 
   const client = useClient({ apiVersion: apiVersion })
   const slug = useFormValue([`slug`]) as SlugValue
@@ -76,42 +77,44 @@ export const BreadcrumbsInput = (props: BreadCrumbsInputProps) => {
   if (!enableBreadcrumbs || !useCustomBreadcrumbs || !customBreadcrumbs) return null
 
   return (
-    <Card padding={[3, 3, 4]} radius={2} shadow={1}>
-      <Stack space={3}>
-        <Text size={1}>Here you can control the breadcrumbs for this page. Breadcrumbs are disabled by default.</Text>
-
-        <Grid columns={2} gap={3}>
-          <MemberField
-            member={enableBreadcrumbs}
-            renderInput={renderInput}
-            renderField={renderField}
-            renderItem={renderItem}
-            renderPreview={renderPreview}
-          />
-
-          {value?.enableBreadcrumbs && (
+    <ReadOnlyWrapper readOnly={readOnly}>
+      <Card padding={[3, 3, 4]} radius={2} shadow={1}>
+        <Stack space={3}>
+          <Text size={1}>Here you can control the breadcrumbs for this page. Breadcrumbs are disabled by default.</Text>
+
+          <Grid columns={2} gap={3}>
+            <MemberField
+              member={enableBreadcrumbs}
+              renderInput={renderInput}
+              renderField={renderField}
+              renderItem={renderItem}
+              renderPreview={renderPreview}
+            />
+
+            {value?.enableBreadcrumbs && (
+              <MemberField
+                member={useCustomBreadcrumbs}
+                renderInput={renderInput}
+                renderField={renderField}
+                renderItem={renderItem}
+                renderPreview={renderPreview}
+              />
+            )}
+          </Grid>
+
+          {value?.enableBreadcrumbs && <BreadcrumbsPreview breadcrumbs={breadcrumbs || defaultBreadcrumbs} />}
+
+          {value?.enableBreadcrumbs && value?.useCustomBreadcrumbs && (
             <MemberField
-              member={useCustomBreadcrumbs}
+              member={customBreadcrumbs}
               renderInput={renderInput}
               renderField={renderField}
               renderItem={renderItem}
               renderPreview={renderPreview}
             />
           )}
-        </Grid>
-
-        {value?.enableBreadcrumbs && <BreadcrumbsPreview breadcrumbs={breadcrumbs || defaultBreadcrumbs} />}
-
-        {value?.enableBreadcrumbs && value?.useCustomBreadcrumbs && (
-          <MemberField
-            member={customBreadcrumbs}
-            renderInput={renderInput}
-            renderField={renderField}
-            renderItem={renderItem}
-            renderPreview={renderPreview}
-          />
-        )}
-      </Stack>
-    </Card>
+        </Stack>
+      </Card>
+    </ReadOnlyWrapper>
   )
 }
diff --git a/sanityv3/schemas/components/ColorSelector/ColorSelector.tsx b/sanityv3/schemas/components/ColorSelector/ColorSelector.tsx
@@ -4,6 +4,7 @@ import { set } from 'sanity'
 import type { ObjectInputProps } from 'sanity'
 import styled from 'styled-components'
 import { defaultColors } from '../../defaultColors'
+import { ReadOnlyWrapper } from '../common/ReadOnlyWrapper'
 
 const Circle = styled.div<{ active: boolean }>`
   display: inline-block;
@@ -57,7 +58,7 @@ const ColorCircle = ({ color, active, onClickHandler }: ColorCircleProps) => (
 
 type ColorSelectorProps = ObjectInputProps
 
-export const ColorSelector = ({ value, onChange, schemaType }: ColorSelectorProps) => {
+export const ColorSelector = ({ value, onChange, schemaType, readOnly }: ColorSelectorProps) => {
   const { options } = schemaType
   const colors = (options?.colors as ColorSelectorValue[]) || defaultColors
 
@@ -74,26 +75,28 @@ export const ColorSelector = ({ value, onChange, schemaType }: ColorSelectorProp
   )
 
   return (
-    <Stack space={3}>
-      {colors && (
-        <Card>
-          <Flex direction={'row'} wrap={'wrap'}>
-            {colors
-              .filter((colorItem: ColorSelectorValue) => !colorItem?.onlyTextColor)
-              .map((colorItem: ColorSelectorValue) => {
-                return (
-                  <ColorCircle
-                    key={colorItem.value}
-                    color={colorItem}
-                    active={colorItem.value === value?.value}
-                    onClickHandler={handleSelect}
-                  />
-                )
-              })}
-          </Flex>
-        </Card>
-      )}
-    </Stack>
+    <ReadOnlyWrapper readOnly={readOnly}>
+      <Stack space={3}>
+        {colors && (
+          <Card>
+            <Flex direction={'row'} wrap={'wrap'}>
+              {colors
+                .filter((colorItem: ColorSelectorValue) => !colorItem?.onlyTextColor)
+                .map((colorItem: ColorSelectorValue) => {
+                  return (
+                    <ColorCircle
+                      key={colorItem.value}
+                      color={colorItem}
+                      active={colorItem.value === value?.value}
+                      onClickHandler={handleSelect}
+                    />
+                  )
+                })}
+            </Flex>
+          </Card>
+        )}
+      </Stack>
+    </ReadOnlyWrapper>
   )
 }