✨ - feat: add support for editable rows in DataGrid component

maykinmedia · Mar 29, 2024 · 096be7b · 096be7b
1 parent 6897283
commit 096be7b
Show file tree

Hide file tree

Showing 18 changed files with 771 additions and 209 deletions.
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -33,9 +33,7 @@
   font-family: var(--typography-font-family-body);
   font-size: var(--mykn-button-font-size);
   font-weight: var(--mykn-button-font-weight);
-  justify-content: center;
   line-height: var(--mykn-button-line-height);
-  text-align: center;
   text-decoration: none;
   transition: all var(--animation-duration-fast)
     var(--animation-timing-function);
@@ -51,6 +49,21 @@
     pointer-events: none;
   }
 
+  &--align-start {
+    justify-content: start;
+    text-align: start;
+  }
+
+  &--align-center {
+    justify-content: center;
+    text-align: center;
+  }
+
+  &--align-end {
+    justify-content: end;
+    text-align: end;
+  }
+
   &--bold {
     --mykn-button-font-weight: var(--typography-font-weight-bold);
   }

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -6,6 +6,9 @@ import "./button.scss";
 type BaseButtonProps = {
   active?: boolean;
 
+  /** Aligns the contents based on the current direction. */
+  align?: "start" | "center" | "end" | "space-between";
+
   /** Whether the text should be presented bold. */
   bold?: boolean;
 
@@ -40,6 +43,7 @@ export type ButtonLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
 /**
  * Button component
  * @param active
+ * @param align
  * @param bold
  * @param justify
  * @param muted
@@ -50,10 +54,11 @@ export type ButtonLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
  * @param wrap
  * @constructor
  */
-export const Button = React.forwardRef<HTMLAnchorElement, ButtonProps>(
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       active = false,
+      align = "center",
       bold = false,
       justify = false,
       muted = false,
@@ -71,6 +76,7 @@ export const Button = React.forwardRef<HTMLAnchorElement, ButtonProps>(
         ref={ref as LegacyRef<HTMLButtonElement>}
         className={clsx(
           "mykn-button",
+          `mykn-button--align-${align}`,
           `mykn-button--size-${size}`,
           `mykn-button--variant-${variant}`,
           {
@@ -96,6 +102,7 @@ Button.displayName = "Button";
 /**
  * Button component
  * @param active
+ * @param align
  * @param bold
  * @param justify
  * @param muted
@@ -110,6 +117,7 @@ export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
   (
     {
       active = false,
+      align = "center",
       bold = false,
       justify = false,
       muted = false,
@@ -127,6 +135,7 @@ export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
         ref={ref as LegacyRef<HTMLAnchorElement>}
         className={clsx(
           "mykn-button",
+          `mykn-button--align-${align}`,
           `mykn-button--size-${size}`,
           `mykn-button--variant-${variant}`,
           {

diff --git a/src/components/data/datagrid/datagrid.scss b/src/components/data/datagrid/datagrid.scss
@@ -23,7 +23,7 @@
   }
 
   &__head &__row:first-child &__cell {
-    border-top: 1px solid var(--typography-color-border);
+    border-block-start: 1px solid var(--typography-color-border);
   }
 
   &__head &__cell {
@@ -36,9 +36,11 @@
   }
 
   &__cell {
-    border-bottom: 1px solid var(--typography-color-border);
+    border-block-start: 1px solid transparent;
+    border-block-end: 1px solid var(--typography-color-border);
     box-sizing: border-box;
     padding: var(--spacing-v) var(--spacing-h);
+    position: relative;
 
     .mykn-a:not(:last-child) {
       margin-inline-end: var(--spacing-h);
@@ -57,13 +59,36 @@
     width: 0;
   }
 
+  &__cell--editable .mykn-button {
+    border: none;
+  }
+
+  &__cell--editable:not(#{&}__cell--type-boolean) .mykn-form-control {
+    height: 100%;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    z-index: 1;
+
+    .mykn-input {
+      width: 100%;
+    }
+  }
+
+  &__cell--editable:not(#{&}__cell--type-boolean) {
+    padding: 0;
+  }
+
   &__foot {
     position: sticky;
     bottom: 0;
   }
 
   &__foot &__cell {
-    border-bottom: none;
+    border-block-start: 1px solid var(--typography-color-border);
+    border-block-end: none;
     padding: 0;
   }
 
@@ -100,7 +125,7 @@
     }
 
     &__row:nth-child(even) &__cell {
-      border-bottom: 1px solid var(--typography-color-background);
+      border-block-end: 1px solid var(--typography-color-background);
     }
 
     &__cell {

diff --git a/src/components/data/datagrid/datagrid.stories.tsx b/src/components/data/datagrid/datagrid.stories.tsx
@@ -188,7 +188,6 @@ export const JSONPlaceholderExample: Story = {
         {...args}
         count={100}
         objectList={objectList}
-        onSort={(field) => setSort(field)}
         loading={loading}
         page={page}
         pageSize={pageSize}
@@ -201,10 +200,32 @@ export const JSONPlaceholderExample: Story = {
         ]}
         selected={
           // SelectableRows story
+          args.selectable &&
           objectList.length > 0 && [objectList[1], objectList[3], objectList[4]]
         }
         onPageChange={setPage}
         onPageSizeChange={setPageSize}
+        onSort={(field) => setSort(field)}
+        onEdit={async (rowData: AttributeData) => {
+          setLoading(true);
+          await fetch(
+            `https://jsonplaceholder.typicode.com/posts/${rowData.id}`,
+            {
+              method: "PUT",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify(rowData),
+            },
+          );
+          const index = objectList.findIndex(
+            (r) => Number(r.id) === rowData.id,
+          );
+          const newObjectList = [...objectList];
+          newObjectList[index] = rowData;
+          setObjectList(newObjectList);
+          setLoading(false);
+        }}
       />
     );
   },
@@ -214,10 +235,39 @@ export const SelectableRows: Story = {
   ...JSONPlaceholderExample,
   args: {
     ...JSONPlaceholderExample.args,
+    fields: ["userId", "id", "title"],
     selectable: true,
   },
   argTypes: {
     onSelect: { action: "onSelect" },
     onSelectionChange: { action: "onSelectionChange" },
   },
 };
+
+export const EditableRows: Story = {
+  ...JSONPlaceholderExample,
+  args: {
+    ...JSONPlaceholderExample.args,
+    // editable: true,
+    fields: [
+      {
+        type: "number",
+        name: "userId",
+        options: [
+          { label: 1, value: 1 },
+          { label: 2, value: 2 },
+        ],
+        editable: true,
+      },
+      { name: "id", type: "number", editable: false },
+      "title",
+      {
+        type: "boolean",
+        name: "published",
+      },
+    ],
+  },
+  argTypes: {
+    onEdit: { action: "onEdit" },
+  },
+};