Add expand button

Author: kraenhansen

packages/compass-crud/src/components/json-editor.tsx

@@ -257,6 +257,14 @@ const JSONEditor: React.FunctionComponent<JSONEditorProps> = ({
     onDeletionFinished,
   ]);
 
+  const toggleExpandCollapse = useCallback(() => {
+    if (doc.expanded) {
+      doc.collapse();
+    } else {
+      doc.expand();
+    }
+  }, [doc]);
+
   // Trying to change CodeMirror editor state when an update "effect" is in
   // progress results in an error which is why we timeout the code mirror update
   // itself.
@@ -296,6 +304,8 @@ const JSONEditor: React.FunctionComponent<JSONEditorProps> = ({
         className={cx(editorStyles, darkMode && editorDarkModeStyles)}
         actionsClassName={actionsGroupStyles}
         completer={completer}
+        onExpand={editing ? undefined : toggleExpandCollapse}
+        expanded={expanded}
       />
       <DocumentList.DocumentEditActionsFooter
         doc={doc}

packages/compass-editor/src/action-button.tsx

@@ -15,6 +15,13 @@ const actionButtonStyle = css({
   pointerEvents: 'all',
 });
 
+const actionCompactButtonStyle = css({
+  '& > div:has(svg)': {
+    paddingLeft: 3,
+    paddingRight: 3,
+  },
+});
+
 const actionButtonContentStyle = css({
   position: 'relative',
 });
@@ -53,7 +60,8 @@ export const ActionButton: React.FunctionComponent<{
     ...args: Parameters<React.MouseEventHandler<HTMLButtonElement>>
   ) => boolean | void;
   'data-testid'?: string;
-}> = ({ label, icon, onClick, ...props }) => {
+  compact?: boolean;
+}> = ({ label, icon, onClick, compact, ...props }) => {
   const [clickResult, setClickResult] = useState<'success' | 'error'>(
     'success'
   );
@@ -90,7 +98,7 @@ export const ActionButton: React.FunctionComponent<{
       aria-label={label}
       title={label}
       onClick={onButtonClick}
-      className={actionButtonStyle}
+      className={cx(actionButtonStyle, { [actionCompactButtonStyle]: compact })}
       data-testid={props['data-testid'] ?? `editor-action-${label}`}
     >
       <div className={actionButtonContentStyle}>

packages/compass-editor/src/actions-container.tsx

@@ -10,6 +10,8 @@ type ActionsContainerProps = {
   customActions?: Action[];
   className?: string;
   editorRef: RefObject<EditorRef>;
+  onExpand?: () => void;
+  expanded?: boolean;
 };
 
 const actionsContainerStyle = css({
@@ -22,12 +24,19 @@ const actionsContainerStyle = css({
   pointerEvents: 'none',
 });
 
+const actionsGroupItemSeparator = css({
+  flex: '1 0 auto',
+  pointerEvents: 'none',
+});
+
 export const ActionsContainer = ({
   copyable,
   formattable,
   customActions,
   className,
   editorRef,
+  onExpand,
+  expanded,
 }: ActionsContainerProps) => {
   return (
     <div
@@ -37,6 +46,15 @@ export const ActionsContainer = ({
         className
       )}
     >
+      {onExpand && (
+        <ActionButton
+          label={expanded ? 'Collapse all' : 'Expand all'}
+          icon={expanded ? 'CaretDown' : 'CaretRight'}
+          onClick={onExpand}
+          compact
+        />
+      )}
+      <span className={actionsGroupItemSeparator}></span>
       {copyable && (
         <ActionButton
           label="Copy"

packages/compass-editor/src/editor.tsx

@@ -1399,6 +1399,8 @@ type MultilineEditorProps = EditorProps & {
   formattable?: boolean;
   editorClassName?: string;
   actionsClassName?: string;
+  onExpand?: () => void;
+  expanded?: boolean;
 };
 
 const MultilineEditor = React.forwardRef<EditorRef, MultilineEditorProps>(
@@ -1411,8 +1413,10 @@ const MultilineEditor = React.forwardRef<EditorRef, MultilineEditorProps>(
       editorClassName,
       actionsClassName,
       darkMode: _darkMode,
+      onExpand,
+      expanded,
       ...props
-    },
+    }: MultilineEditorProps,
     ref
   ) {
     const darkMode = useDarkMode(_darkMode);
@@ -1492,6 +1496,8 @@ const MultilineEditor = React.forwardRef<EditorRef, MultilineEditorProps>(
         ></BaseEditor>
         {hasActions && (
           <ActionsContainer
+            onExpand={onExpand}
+            expanded={expanded}
             copyable={copyable}
             formattable={formattable}
             editorRef={editorRef}