feat: sort-ordering; nested object selection

Co-authored-by: Simeon Griggs <[email protected]>
ricokahler · Sep 2, 2021 · 36bafc5 · 36bafc5
1 parent 5ecc457
commit 36bafc5
Show file tree

Hide file tree

Showing 13 changed files with 1,936 additions and 2,063 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,18 +38,18 @@
     "@babel/preset-typescript": "7.15.0",
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-node-resolve": "11.2.1",
-    "@sanity/base": "2.13.1",
-    "@sanity/cli": "^2.14.0",
-    "@sanity/client": "2.13.0",
-    "@sanity/components": "2.13.0",
-    "@sanity/core": "2.13.1",
-    "@sanity/default-layout": "2.13.1",
-    "@sanity/default-login": "2.13.1",
-    "@sanity/desk-tool": "2.13.1",
-    "@sanity/google-maps-input": "2.13.1",
-    "@sanity/icons": "1.1.5",
-    "@sanity/ui": "0.36.3",
-    "@sanity/vision": "2.13.1",
+    "@sanity/base": "^2.17.0",
+    "@sanity/cli": "^2.17.0",
+    "@sanity/client": "^2.16.0",
+    "@sanity/components": "^2.14.0",
+    "@sanity/core": "^2.17.0",
+    "@sanity/default-layout": "^2.17.0",
+    "@sanity/default-login": "^2.17.0",
+    "@sanity/desk-tool": "^2.17.0",
+    "@sanity/google-maps-input": "^2.17.0",
+    "@sanity/icons": "^1.1.5",
+    "@sanity/ui": "0.34.7",
+    "@sanity/vision": "^2.15.0",
     "@types/classnames": "2.3.0",
     "@types/react": "17.0.19",
     "@types/react-dom": "17.0.9",

diff --git a/schemas/movie.js b/schemas/movie.js
@@ -1,4 +1,4 @@
-import {MdLocalMovies as icon} from 'react-icons/md'
+import { MdLocalMovies as icon } from 'react-icons/md';
 
 export default {
   name: 'movie',
@@ -52,13 +52,36 @@ export default {
       name: 'castMembers',
       title: 'Cast Members',
       type: 'array',
-      of: [{type: 'castMember'}],
+      of: [{ type: 'castMember' }],
     },
     {
       name: 'crewMembers',
       title: 'Crew Members',
       type: 'array',
-      of: [{type: 'crewMember'}],
+      of: [{ type: 'crewMember' }],
+    },
+    {
+      name: 'seo',
+      title: 'SEO',
+      type: 'object',
+      fields: [
+        {
+          name: 'seoTitle',
+          title: 'Seo Title',
+          type: 'string',
+        },
+        {
+          name: 'seoDescription',
+          title: 'Seo Description',
+          type: 'string',
+        },
+      ],
+      preview: {
+        select: {
+          title: 'seoTitle',
+          subtitle: 'seoDescription',
+        },
+      },
     },
   ],
   preview: {
@@ -70,15 +93,17 @@ export default {
       castName1: 'castMembers.1.person.name',
     },
     prepare(selection) {
-      const year = selection.date && selection.date.split('-')[0]
-      const cast = [selection.castName0, selection.castName1].filter(Boolean).join(', ')
+      const year = selection.date && selection.date.split('-')[0];
+      const cast = [selection.castName0, selection.castName1]
+        .filter(Boolean)
+        .join(', ');
 
       return {
         title: `${selection.title} ${year ? `(${year})` : ''}`,
         date: selection.date,
         subtitle: cast,
         media: selection.media,
-      }
+      };
     },
   },
-}
+};
diff --git a/structure.js b/structure.js
@@ -5,5 +5,5 @@ export default () =>
   S.list()
     .title('Base')
     .items([
-      S.listItem().title('Normal List').child(createSuperPane('movie', S)),
+      S.listItem().title('Normal List').child(createSuperPane('movie')),
     ]);
diff --git a/super-pane/bulk-actions-menu/index.tsx b/super-pane/bulk-actions-menu/index.tsx
@@ -7,7 +7,6 @@ import {
   Dialog,
   Button,
   MenuButton,
-  Label,
   useToast,
 } from '@sanity/ui';
 import {
@@ -24,6 +23,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 const client = _client as import('@sanity/client').SanityClient;
 
 interface Props {
+  disabled: Boolean;
   className?: string;
   typeName: string;
   selectedIds: Set<string>;
@@ -63,6 +63,7 @@ const removeDraftPrefix = (s: string) =>
   s.startsWith('drafts.') ? s.substring('drafts.'.length) : s;
 
 function BulkActionsMenu({
+  disabled,
   className,
   selectedIds,
   typeName,
@@ -261,9 +262,15 @@ function BulkActionsMenu({
     <>
       <MenuButton
         button={
-          <button className={className}>
-            <Label>Bulk Actions</Label>
-          </button>
+          disabled ? (
+            <Button fontSize={1} paddingY={1} paddingX={2} disabled>
+              Bulk Actions
+            </Button>
+          ) : (
+            <Button fontSize={1} paddingY={1} paddingX={2}>
+              Bulk Actions
+            </Button>
+          )
         }
         portal
         id={buttonId}

diff --git a/super-pane/cell/index.tsx b/super-pane/cell/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import SanityPreview from 'part:@sanity/base/preview';
 import blockContentToString from '../block-content-to-string';
 import styles from './styles.module.css';
+import { Text } from '@sanity/ui';
 
 interface Props {
   field: any;
@@ -10,6 +11,15 @@ interface Props {
 
 function Cell({ field, value }: Props) {
   switch (field.type.name) {
+    // Hacky! Format _just_ the updatedAt field
+    case '_updatedAt': {
+      return (
+        <td key={field.name}>
+          <Text size={1}>{new Date(value).toLocaleString()}</Text>
+        </td>
+      );
+    }
+    // The rest of these types are legit!
     case 'string':
     case 'number': {
       return <td key={field.name}>{value}</td>;

diff --git a/super-pane/column-selector/index.tsx b/super-pane/column-selector/index.tsx
@@ -3,6 +3,7 @@ import { Dialog, Checkbox, Button } from '@sanity/ui';
 import { nanoid } from 'nanoid';
 import schema from 'part:@sanity/base/schema';
 import styles from './styles.module.css';
+import { getSelectableFields } from '../helpers/get-selectable-fields';
 
 interface Props {
   typeName: string;
@@ -12,6 +13,13 @@ interface Props {
   initiallySelectedColumns: Set<string>;
 }
 
+export interface SelectableField {
+  field: any;
+  fieldPath: string;
+  title: string;
+  level: number;
+}
+
 function ColumnSelector({
   open,
   onClose,
@@ -21,7 +29,7 @@ function ColumnSelector({
 }: Props) {
   const schemaType = schema.get(typeName);
   const [selectedColumns, setSelectedColumns] = useState(
-    initiallySelectedColumns,
+    initiallySelectedColumns
   );
 
   useEffect(() => {
@@ -31,6 +39,26 @@ function ColumnSelector({
   }, [open, initiallySelectedColumns]);
 
   const dialogId = useMemo(() => nanoid(), []);
+
+  function handleSelect(fieldPath: string) {
+    setSelectedColumns((set) => {
+      const nextSet = new Set(set);
+
+      if (set.has(fieldPath)) {
+        nextSet.delete(fieldPath);
+      } else {
+        nextSet.add(fieldPath);
+      }
+
+      return nextSet;
+    });
+  }
+
+  const selectableFields = useMemo(
+    () => getSelectableFields(schemaType.fields),
+    [schemaType.fields]
+  );
+
   if (!open) {
     return null;
   }
@@ -62,52 +90,25 @@ function ColumnSelector({
             <Checkbox
               className={styles.checkbox}
               checked={selectedColumns.has('_updatedAt')}
-              onChange={() => {
-                setSelectedColumns((set) => {
-                  const nextSet = new Set(set);
-
-                  if (set.has('_updatedAt')) {
-                    nextSet.delete('_updatedAt');
-                  } else {
-                    nextSet.add('_updatedAt');
-                  }
-
-                  return nextSet;
-                });
-              }}
+              onChange={() => handleSelect('_updatedAt')}
             />
             <span>Updated At</span>
           </label>
         </li>
-        {schemaType.fields.map((i: any) => {
-          const fieldName: string = i.name;
-          const title: string = i.type.title;
-
-          return (
-            <li key={fieldName}>
+        {selectableFields.map(
+          ({ fieldPath, title, level }: SelectableField) => (
+            <li key={fieldPath} style={{ marginLeft: level > 0 ? `1rem` : `` }}>
               <label className={styles.label}>
                 <Checkbox
                   className={styles.checkbox}
-                  checked={selectedColumns.has(fieldName)}
-                  onChange={() => {
-                    setSelectedColumns((set) => {
-                      const nextSet = new Set(set);
-
-                      if (set.has(fieldName)) {
-                        nextSet.delete(fieldName);
-                      } else {
-                        nextSet.add(fieldName);
-                      }
-
-                      return nextSet;
-                    });
-                  }}
+                  checked={selectedColumns.has(fieldPath)}
+                  onChange={() => handleSelect(fieldPath)}
                 />
                 <span>{title}</span>
               </label>
             </li>
-          );
-        })}
+          )
+        )}
       </ul>
     </Dialog>
   );