From 9c618159993e1bf685ae184e8356979302810ee0 Mon Sep 17 00:00:00 2001
From: 1ilit <lilitmousheghyan@gmail.com>
Date: Tue, 19 Sep 2023 15:47:48 +0300
Subject: [PATCH] sidesheets

---
 src/components/table.jsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/table.jsx b/src/components/table.jsx
index 8c27ba1..8ec4b5c 100644
--- a/src/components/table.jsx
+++ b/src/components/table.jsx
@@ -16,6 +16,7 @@ import {
   Tag,
   Popconfirm,
   Toast,
+  SideSheet,
 } from "@douyinfe/semi-ui";
 
 export default function Table(props) {
@@ -23,6 +24,7 @@ export default function Table(props) {
   const [hoveredField, setHoveredField] = useState(-1);
   const [name, setName] = useState(props.tableData.name);
   const [visible, setVisible] = useState(false);
+  const [sideSheetOn, setSideSheetOn] = useState(false);
   const [editFieldVisible, setEditFieldVisible] = useState(-1);
 
   const [field, setField] = useState({
@@ -135,7 +137,10 @@ export default function Table(props) {
             }
             {isHovered && (
               <div className="flex justify-end items-center">
-                <button className="btn bg-sky-800 text-white text-xs py-1 px-2 me-2 opacity-80">
+                <button
+                  className="btn bg-sky-800 text-white text-xs py-1 px-2 me-2 opacity-80"
+                  onClick={() => setSideSheetOn(true)}
+                >
                   <IconEdit />
                 </button>
                 <button
@@ -226,7 +231,7 @@ export default function Table(props) {
                       className={`w-[10px] h-[10px] bg-green-600 rounded-full me-2`}
                       onMouseDown={(ev) => {
                         props.handleGripField(i);
-                        props.setLine((prev)=>({
+                        props.setLine((prev) => ({
                           ...prev,
                           startFieldId: i,
                           startTableId: props.id,
@@ -470,6 +475,11 @@ export default function Table(props) {
           </Row>
         </Form>
       </Modal>
+      <SideSheet title="Sidesheet" visible={sideSheetOn} onCancel={() => setSideSheetOn
+      (false)}>
+        <p>This is the content of a basic sidesheet.</p>
+        <p>Here is more content...</p>
+      </SideSheet>
     </g>
   );
 }