@linzjs/step-ag-grid 17.10.0 → 17.12.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "17.10.0",
+  "version": "17.12.0",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/Grid.tsx

@@ -103,6 +103,7 @@ export interface GridProps {
   singleClickEdit?: boolean;
 
   loading?: boolean;
+  suppressCellFocus?: boolean;
 }
 
 /**
@@ -734,6 +735,7 @@ export const Grid = ({
           onRowDragMove={onRowDragMove}
           onRowDragEnd={onRowDragEnd}
           onRowDragLeave={onRowDragLeave}
+          suppressCellFocus={params.suppressCellFocus}
         />
       </div>
     </div>

package/src/stories/grid/GridViewList.stories.tsx

@@ -0,0 +1,124 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { Meta, StoryFn } from "@storybook/react";
+import { useMemo, useState } from "react";
+
+import "@linzjs/lui/dist/fonts";
+
+import {
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContextProvider,
+  GridProps,
+  GridUpdatingContextProvider,
+  GridWrapper,
+} from "../..";
+
+export default {
+  title: "Components / Grids",
+  component: Grid,
+  // Storybook hangs otherwise
+  parameters: {
+    docs: {
+      source: {
+        type: "code",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 1024, height: 400, display: "flex", flexDirection: "column" }}>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as Meta<typeof Grid>;
+
+interface ITestRow {
+  id: number;
+  position: string;
+  age: number;
+  height: string;
+  desc: string;
+  dd: string;
+}
+
+const GridReadOnlyTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: "id",
+        headerName: "Id",
+        lockVisible: true,
+        resizable: false,
+        lockPosition: "left",
+        cellRenderer: (props) => {
+          return <a href={"#"}>{props.value}</a>;
+        },
+      }),
+      GridCell({
+        field: "position",
+        headerName: "Position",
+        resizable: false,
+        lockPosition: "left",
+        cellRendererParams: {
+          warning: (props) => props.value === "Tester" && "Testers are testing",
+          info: (props) => props.value === "Developer" && "Developers are awesome",
+        },
+      }),
+      GridCell({
+        field: "desc",
+        headerName: "Description",
+        resizable: false,
+        lockPosition: "left",
+      }),
+      GridCell({
+        field: "age",
+        headerName: "Age",
+        resizable: false,
+        lockPosition: "left",
+      }),
+      GridCell({
+        field: "height",
+        headerName: "Height",
+        resizable: false,
+        lockPosition: "left",
+      }),
+    ],
+    [],
+  );
+
+  const [rowData] = useState<ITestRow[]>([
+    { id: 1000, position: "Tester", age: 30, height: `6'4"`, desc: "Tests application", dd: "1" },
+    { id: 1001, position: "Developer", age: 12, height: `5'3"`, desc: "Develops application", dd: "2" },
+    { id: 1002, position: "Manager", age: 65, height: `5'9"`, desc: "Manages", dd: "3" },
+  ]);
+
+  return (
+    <GridWrapper maxHeight={400}>
+      <Grid
+        data-testid={"readonly"}
+        {...props}
+        selectable={false}
+        rowSelection={"single"}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        rowData={rowData}
+        sizeColumns={"fit"}
+        theme={"ag-theme-step-view-list-default"}
+        contextMenuSelectRow={false}
+        suppressCellFocus={true}
+      />
+    </GridWrapper>
+  );
+};
+export const ListViewGrid = GridReadOnlyTemplate.bind({});

package/src/styles/GridTheme.scss

@@ -20,6 +20,14 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
         header-height: 40px,
         font-size: calc($grid-base-font-size),
       ),
+      'step-view-list-default.theme-specific': (
+        extend-theme: alpine,
+        row-height: 60px,
+        header-height: 40px,
+        font-size: calc($grid-base-font-size),
+        header-background-color: lui.$iceberg,
+        cell-horizontal-border: none,
+      ),
     ),
 
     input-focus-border-color: lui.$sea,
@@ -52,28 +60,12 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
 
 .ag-theme-step-default.theme-specific,
 .ag-theme-step-compact.theme-specific {
-  .ag-text-area-input:focus {
-    border-color: lui.$sea;
-  }
-
-  .ag-cell[col-id="selection"] {
-    display: flex; // Fix that when you click below checkbox it doesn't process a click
-  }
 
   // fix alignment of cell content when grabber is present
   .ag-header-cell-comp-wrapper {
     justify-content: end;
   }
 
-  // Fix that when you click below checkbox it doesn't process a click
-  .ag-cell-wrapper > *:not(.ag-cell-value, .ag-group-value) {
-    height: auto;
-  }
-
-  .ag-row:last-of-type {
-    border-bottom: 1px solid lui.$dew;
-  }
-
   .ag-header-cell {
     font-size: 14px;
     font-weight: 600;
@@ -86,6 +78,28 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     }
   }
 
+  .ag-header .ag-header-cell[aria-colindex="1"] {
+    padding-left: 17px;
+    padding-right: 15px;
+  }
+
+  .ag-text-area-input:focus {
+    border-color: lui.$sea;
+  }
+
+  .ag-cell[col-id="selection"] {
+    display: flex; // Fix that when you click below checkbox it doesn't process a click
+  }
+
+  // Fix that when you click below checkbox it doesn't process a click
+  .ag-cell-wrapper > *:not(.ag-cell-value, .ag-group-value) {
+    height: auto;
+  }
+
+  .ag-row:last-of-type {
+    border-bottom: 1px solid lui.$dew;
+  }
+
   .ag-cell-label-container {
     padding: 8px 0;
 
@@ -93,10 +107,6 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     height: fit-content;
   }
 
-  .ag-header .ag-header-cell[aria-colindex="1"] {
-    padding-left: 17px;
-    padding-right: 15px;
-  }
 
   .ag-cell[aria-colindex="1"] {
     padding-left: lui.$unit-rg;
@@ -200,14 +210,14 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     height: 2px;
     background-color: transparent;
   }
-  
+
   .ag-row-highlight-above::after {
     top:-3px; // moves the top highlight to the position of the bottom highlight
     border-top: 2px dashed lui.$andrea;
   }
 
   .ag-row-highlight-above:first-of-type::after {
-    top:0px; // the first row highlight needs to in the normal position otherwise it is cut off by the top of the table
+    top:0; // the first row highlight needs to in the normal position otherwise it is cut off by the top of the table
   }
 
   .ag-row-highlight-below::after {
@@ -225,7 +235,7 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   //   box-shadow: -4px 0px 15px -4px rgba(0, 0, 0, 0.1);
   //   right: -4px;
   // }
-  
+
   // div:after {
   //   box-shadow: 15px 0 15px -15px inset;
   //   right: -15px;
@@ -249,3 +259,36 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     clip-path: polygon(-20% 0%, 100% 0%, 100% 100%, -20% 100%);
   }
 }
+
+.ag-theme-step-view-list-default.theme-specific {
+
+  .ag-header-cell {
+    font-size: 14px;
+    font-weight: 600;
+
+    // fix: Display descender line
+    padding: 0 12px;
+
+    .LuiIcon {
+      fill: lui.$surfie;
+    }
+  }
+
+  .ag-header .ag-header-cell[aria-colindex="1"] {
+    padding-left: 32px;
+    padding-right: 12px;
+  }
+
+  .ag-header-group-cell {
+    font-weight: normal;
+    font-size: 22px;
+  }
+
+  .ag-header-cell {
+    font-size: 14px;
+  }
+
+  .ag-row .ag-cell[aria-colindex="1"] {
+    padding-left: 32px;
+  }
+}