Skip to content

Commit

Permalink
refactor: replace modal with shadcn
Browse files Browse the repository at this point in the history
  • Loading branch information
@ObservedObserver
ObservedObserver committed Sep 30, 2023
1 parent b5808c9 commit a8864b9
Show file tree
Hide file tree
Showing 7 changed files with 331 additions and 171 deletions.
1 change: 1 addition & 0 deletions app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"@heroicons/react": "^2.0.8",
"@kanaries-temp/gw-dsl-parser": "0.1.3",
"@kanaries/graphic-walker": "0.4.15",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-tabs": "^1.0.4",
Expand Down
26 changes: 18 additions & 8 deletions app/src/components/codeExportModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ import atomOneLight from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one
import type { IGlobalStore } from "@kanaries/graphic-walker/dist/store";
import type { IVisSpec } from "@kanaries/graphic-walker/dist/interfaces";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import commonStore from "@/store/common";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";

import Modal from "../modal";
import { usePythonCode } from "./usePythonCode";
import commonStore from "@/store/common";

SyntaxHighlighter.registerLanguage("json", json);
SyntaxHighlighter.registerLanguage("python", py);
Expand Down Expand Up @@ -61,9 +61,19 @@ const CodeExport: React.FC<ICodeExport> = observer((props) => {
}, [open]);

return (
<Modal show={open} onClose={closeModal}>
<div>
<h2 className="mb-4 font-semibold">Code Export</h2>
<Dialog
open={open}
onOpenChange={(show) => {
setOpen(show);
}}
>
<DialogContent className="sm:max-w-[90%] lg:max-w-[900px]">
<DialogHeader>
<DialogTitle>Code Export</DialogTitle>
<DialogDescription>
Export the code of all charts in PyGWalker.
</DialogDescription>
</DialogHeader>
<div className="text-sm max-h-64 overflow-auto">
<Tabs defaultValue="python" className="w-full">
<TabsList>
Expand All @@ -74,7 +84,7 @@ const CodeExport: React.FC<ICodeExport> = observer((props) => {
<p>{tips}</p>
</div>
<TabsContent className="py-4" value="python">
<h3 className="text-sm font-medium mb-2">PyGWalker Code</h3>
<h3 className="text-sm font-medium mb-2">PyGWalker Code</h3>
<SyntaxHighlighter showLineNumbers language="python" style={atomOneLight}>
{pyCode}
</SyntaxHighlighter>
Expand Down Expand Up @@ -109,8 +119,8 @@ const CodeExport: React.FC<ICodeExport> = observer((props) => {
</TabsContent>
</Tabs>
</div>
</div>
</Modal>
</DialogContent>
</Dialog>
);
});

Expand Down
23 changes: 11 additions & 12 deletions app/src/components/initModal/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,29 @@
import React from "react";
import Modal from "../modal";
import { observer } from "mobx-react-lite";
import { Dialog, DialogContent } from "@/components/ui/dialog";

import commonStore from "../../store/common";


interface IInitModal {}

const InitModal: React.FC<IInitModal> = observer((props) => {
return (
<Modal
show={commonStore.initModalOpen}
hideClose={true}
>
<div>
<Dialog open={commonStore.initModalOpen} modal={true}>
<DialogContent>
<div className="flex justify-between mb-1">
<span className="text-base font-medium text-blue-700 dark:text-white">{ commonStore.initModalInfo.title }</span>
<span className="text-base font-medium text-blue-700 dark:text-white">{commonStore.initModalInfo.title}</span>
<span className="text-sm font-medium text-blue-700 dark:text-white">
{ commonStore.initModalInfo.curIndex } / { commonStore.initModalInfo.total }
{commonStore.initModalInfo.curIndex} / {commonStore.initModalInfo.total}
</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div className="bg-blue-600 h-2.5 rounded-full" style={{ width: `${Math.floor(commonStore.initModalInfo.curIndex/commonStore.initModalInfo.total*100)}%` }}></div>
<div
className="bg-blue-600 h-2.5 rounded-full"
style={{ width: `${Math.floor((commonStore.initModalInfo.curIndex / commonStore.initModalInfo.total) * 100)}%` }}
></div>
</div>
</div>
</Modal>
</DialogContent>
</Dialog>
);
});

Expand Down
85 changes: 0 additions & 85 deletions app/src/components/modal.tsx
View file

This file was deleted.

147 changes: 87 additions & 60 deletions app/src/components/shareModal/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
import React, { useState, ReactElement, useEffect } from 'react';
import React, { useState, ReactElement, useEffect } from "react";
import { observer } from "mobx-react-lite";
import type { IGWHandler } from '@kanaries/graphic-walker/dist/interfaces';
import type { IGlobalStore } from '@kanaries/graphic-walker/dist/store'
import type { IGWHandler } from "@kanaries/graphic-walker/dist/interfaces";
import type { IGlobalStore } from "@kanaries/graphic-walker/dist/store";

import communicationStore from "../../store/communication";
import commonStore from "../../store/common";
import { formatExportedChartDatas } from "../../utils/save"
import Modal from "../modal";
import { Button } from "@/components/ui/button"
import { formatExportedChartDatas } from "../../utils/save";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";

interface IShareModal {
gwRef: React.MutableRefObject<IGWHandler | null>,
storeRef: React.MutableRefObject<IGlobalStore | null>
gwRef: React.MutableRefObject<IGWHandler | null>;
storeRef: React.MutableRefObject<IGlobalStore | null>;
open: boolean;
setOpen: (open: boolean) => void;
}

const ShareModal: React.FC<IShareModal> = observer((props) => {
const [ sharing, setSharing ] = useState(false);
const [ name, setName ] = useState("");
const [ isNewNotebook, setIsNewNotebook ] = useState(true);
const [sharing, setSharing] = useState(false);
const [name, setName] = useState("");
const [isNewNotebook, setIsNewNotebook] = useState(true);

useEffect(() => {
if (props.open) {
Expand All @@ -29,77 +29,104 @@ const ShareModal: React.FC<IShareModal> = observer((props) => {
}, [props.open]);

const shareSuccess = (shareUrl: string) => {
commonStore.setNotification({
type: "success",
title: "Success",
message: <>
<a className='font-semibold' href={shareUrl} target="_blank" >{shareUrl}</a>
</>,
}, 30_000);
}
commonStore.setNotification(
{
type: "success",
title: "Success",
message: (
<>
<a className="font-semibold" href={shareUrl} target="_blank">
{shareUrl}
</a>
</>
),
},
30_000
);
};

const shareFailed = (errorMsg: string | ReactElement) => {
commonStore.setNotification({
type: "error",
title: "Error",
message: errorMsg,
}, 30_000);
}
commonStore.setNotification(
{
type: "error",
title: "Error",
message: errorMsg,
},
30_000
);
};

const onClick = async () => {
if (sharing) return;
setSharing(true);

let chartData = await props.gwRef.current?.exportChart!("data-url");
const resp = await communicationStore.comm?.sendMsg("upload_charts", {
"chartName": name,
"newNotebook": isNewNotebook,
"visSpec": JSON.stringify(props.storeRef.current?.vizStore.exportViewSpec()!),
"chartData": await formatExportedChartDatas(chartData!),
}, 120_000);
const resp = await communicationStore.comm?.sendMsg(
"upload_charts",
{
chartName: name,
newNotebook: isNewNotebook,
visSpec: JSON.stringify(props.storeRef.current?.vizStore.exportViewSpec()!),
chartData: await formatExportedChartDatas(chartData!),
},
120_000
);
if (resp?.success) {
props.setOpen(false);
shareSuccess(resp.data?.shareUrl);
} else {
shareFailed(resp?.message!);
}
setSharing(false);
}
};

return (
<Modal
show={props.open}
onClose={() => {
props.setOpen(false);
<Dialog
open={props.open}
onOpenChange={(show) => {
props.setOpen(show);
}}
>
<div>
<h1 className="mb-4">Share</h1>
<div className="text-sm max-h-64 overflow-auto">
<input
value={name}
onChange={(e) => { setName(e.target.value) }}
type="text"
placeholder='please input chart name'
id="chart-name-input"
className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
/>
<div className="flex items-center justify-end mt-2">
<input id="link-checkbox" type="checkbox" checked={isNewNotebook} onChange={(e) => {setIsNewNotebook(e.target.checked)}} className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
<label className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
Auto create kanaries notebook?
</label>
<DialogContent>
<DialogHeader>
<DialogTitle>Share</DialogTitle>
<DialogDescription>
Share your charts as an interactive web pygwalker notebook with others.
</DialogDescription>
</DialogHeader>
<div>
<div className="text-sm max-h-64 overflow-auto">
<input
value={name}
onChange={(e) => {
setName(e.target.value);
}}
type="text"
placeholder="please input chart name"
id="chart-name-input"
className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
/>
<div className="flex items-center justify-end mt-2">
<input
id="link-checkbox"
type="checkbox"
checked={isNewNotebook}
onChange={(e) => {
setIsNewNotebook(e.target.checked);
}}
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Auto create kanaries notebook?</label>
</div>
</div>
</div>
<div className="mt-4 flex justify-end">
<Button variant="outline" className="mr-2 px-6"
disabled={sharing}
onClick={onClick}>
<div className="mt-4 flex justify-end">
<Button variant="outline" className="mr-2 px-6" disabled={sharing} onClick={onClick}>
{sharing ? "sharing.." : "share"}
</Button>
</Button>
</div>
</div>
</div>
</Modal>
</DialogContent>
</Dialog>
);
});

Expand Down
Loading

0 comments on commit a8864b9

Please sign in to comment.