fix: graph disabled state (#58)

gorules · Jun 6, 2024 · ab83b67 · ab83b67
1 parent 026d5af
commit ab83b67
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 13 deletions.
diff --git a/packages/jdm-editor/src/components/decision-graph/dg.stories.tsx b/packages/jdm-editor/src/components/decision-graph/dg.stories.tsx
@@ -71,6 +71,28 @@ export const Uncontrolled: Story = {
   },
 };
 
+export const Disabled: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<any>(defaultGraph);
+    return (
+      <div
+        style={{
+          height: '100%',
+        }}
+      >
+        <DecisionGraph
+          {...args}
+          value={value}
+          onChange={(val) => {
+            setValue?.(val);
+          }}
+          disabled
+        />
+      </div>
+    );
+  },
+};
+
 const components: NodeSpecification[] = [
   {
     type: 'decisionNode',

diff --git a/packages/jdm-editor/src/components/decision-graph/graph/graph-aside.tsx b/packages/jdm-editor/src/components/decision-graph/graph/graph-aside.tsx
@@ -24,7 +24,6 @@ export type GraphAsideProps = {
 export const GraphAside: React.FC<GraphAsideProps> = ({ defaultOpenMenu = 'components' }) => {
   const fileInput = useRef<HTMLInputElement>(null);
   const excelFileInput = useRef<HTMLInputElement>(null);
-  const [menu, setMenu] = useState<Menu | false>(defaultOpenMenu);
 
   const { setDecisionGraph, setActivePanel } = useDecisionGraphActions();
   const { decisionGraph, activeNodeId, disabled, hasInputNode, panels, activePanel } = useDecisionGraphState(
@@ -38,6 +37,8 @@ export const GraphAside: React.FC<GraphAsideProps> = ({ defaultOpenMenu = 'compo
     }),
   );
 
+  const [menu, setMenu] = useState<Menu | false>(disabled ? false : defaultOpenMenu);
+
   const handleUploadInput = async (event: any) => {
     const fileList = event?.target?.files as FileList;
     const reader = new FileReader();
@@ -202,18 +203,22 @@ export const GraphAside: React.FC<GraphAsideProps> = ({ defaultOpenMenu = 'compo
       />
       <div className={'grl-dg__aside__side-bar'}>
         <div className={'grl-dg__aside__side-bar__top'}>
-          <Tooltip placement='right' title='Components'>
-            <Button
-              type={'primary'}
-              icon={<PlusCircleOutlined />}
-              onClick={() => setMenu((m) => (m !== 'components' ? 'components' : false))}
-            />
-          </Tooltip>
-          <Dropdown menu={{ items: uploadItems }} placement='bottomRight' trigger={['click']} arrow>
-            <Button type={'text'} disabled={disabled} icon={<CloudUploadOutlined />} />
-          </Dropdown>
+          {!disabled && (
+            <Tooltip placement='right' title='Components'>
+              <Button
+                type={'primary'}
+                icon={<PlusCircleOutlined />}
+                onClick={() => setMenu((m) => (m !== 'components' ? 'components' : false))}
+              />
+            </Tooltip>
+          )}
+          {!disabled && (
+            <Dropdown menu={{ items: uploadItems }} placement='bottomRight' trigger={['click']} arrow>
+              <Button type={'text'} disabled={disabled} icon={<CloudUploadOutlined />} />
+            </Dropdown>
+          )}
           <Dropdown menu={{ items: downloadItems }} placement='bottomRight' trigger={['click']} arrow>
-            <Button type={'text'} disabled={disabled} icon={<CloudDownloadOutlined />} />
+            <Button type={'text'} icon={<CloudDownloadOutlined />} />
           </Dropdown>
         </div>
         <div className={'grl-dg__aside__side-bar__bottom'}>
@@ -230,7 +235,7 @@ export const GraphAside: React.FC<GraphAsideProps> = ({ defaultOpenMenu = 'compo
           ))}
         </div>
       </div>
-      {menu && (
+      {menu && !disabled && (
         <div className={'grl-dg__aside__menu'}>
           {menu === 'components' && (
             <>