🐛 Enable contain strict when width and height is provided (#3273)

* 🐛 Enable contain strict when width and height is provided Enables 100% width without requiring any custom code * 🐛 Add px suffix when passing only numbers as size
equinor · Feb 15, 2024 · c1b4d39 · c1b4d39
1 parent 58b0b03
commit c1b4d39
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 10 deletions.
diff --git a/packages/eds-data-grid-react/src/EdsDataGrid.stories.tsx b/packages/eds-data-grid-react/src/EdsDataGrid.stories.tsx
@@ -145,6 +145,10 @@ export const ColumnGrouping: StoryFn<EdsDataGridProps<Photo>> = (args) => {
 ColumnGrouping.args = {
   rows: data,
   columns: groupedColumns,
+  height: 400,
+  width: '100%',
+  enableVirtual: true,
+  scrollbarHorizontal: true,
 }
 
 export const Sortable: StoryFn<EdsDataGridProps<Photo>> = (args) => {

diff --git a/packages/eds-data-grid-react/src/EdsDataGrid.tsx b/packages/eds-data-grid-react/src/EdsDataGrid.tsx
@@ -31,6 +31,8 @@ import { TableHeaderRow } from './components/TableHeaderRow'
 import { TableRow } from './components/TableRow'
 import { TableProvider } from './EdsDataGridContext'
 import { EdsDataGridProps } from './EdsDataGridProps'
+import styled from 'styled-components'
+import { addPxSuffixIfInputHasNoPrefix } from './utils'
 
 export function EdsDataGrid<T>({
   rows,
@@ -156,6 +158,7 @@ export function EdsDataGrid<T>({
     data: rows,
     columns: _columns,
     defaultColumn: {
+      size: 150,
       cell: (context) => {
         return (
           <Typography
@@ -275,14 +278,14 @@ export function EdsDataGrid<T>({
 
   const table = useReactTable(options)
 
-  let parentRefStyle: CSSProperties = {}
+  let tableWrapperStyle: CSSProperties = {}
 
   /**
    * Style the parent container to enable virtualization.
    * By not setting this, the virtual-scroll will always render every row, reducing computational overhead if turned off.
    */
   if (enableVirtual) {
-    parentRefStyle = {
+    tableWrapperStyle = {
       height: height ?? virtualHeight ?? 500,
       overflow: 'auto',
       position: 'relative',
@@ -332,15 +335,13 @@ export function EdsDataGrid<T>({
       enableColumnFiltering={!!enableColumnFiltering}
       stickyHeader={!!stickyHeader}
     >
-      <div
+      <TableWrapper
         className="table-wrapper"
-        style={{
-          height: height ?? 'auto',
-          ...parentRefStyle,
-          width: scrollbarHorizontal ? width ?? '100%' : 'auto',
-          overflow: 'auto',
-        }}
+        style={tableWrapperStyle}
         ref={parentRef}
+        $height={height}
+        $width={width}
+        $scrollbarHorizontal={scrollbarHorizontal}
       >
         <Table
           className={Object.entries(classList)
@@ -434,7 +435,7 @@ export function EdsDataGrid<T>({
                 />
               </div>
             )}
-      </div>
+      </TableWrapper>
       {debug && enableVirtual && (
         <span>
           Visible items: {virtualizer.range.startIndex} -{' '}
@@ -444,3 +445,18 @@ export function EdsDataGrid<T>({
     </TableProvider>
   )
 }
+
+const TableWrapper = styled.div<{
+  $height?: string | number
+  $width?: string | number
+  $scrollbarHorizontal?: boolean
+}>`
+  height: ${({ $height }) => addPxSuffixIfInputHasNoPrefix($height) ?? 'auto'};
+  width: ${({ $scrollbarHorizontal, $width }) =>
+    $scrollbarHorizontal
+      ? addPxSuffixIfInputHasNoPrefix($width) ?? '100%'
+      : 'auto'};
+  overflow: auto;
+  contain: ${({ $height, $width }) =>
+    Boolean($height) && Boolean($width) ? 'strict' : 'unset'};
+`
diff --git a/packages/eds-data-grid-react/src/tests/utils.test.ts b/packages/eds-data-grid-react/src/tests/utils.test.ts
@@ -0,0 +1,22 @@
+import { addPxSuffixIfInputHasNoPrefix, isNumberOnlyString } from '../utils'
+
+test('Should validate number string correctly', () => {
+  expect(isNumberOnlyString('1')).toBe(true)
+
+  expect(isNumberOnlyString('1s')).toBe(false)
+
+  expect(isNumberOnlyString('sa')).toBe(false)
+
+  expect(isNumberOnlyString('1.1')).toBe(true)
+
+  expect(isNumberOnlyString('1,1')).toBe(false)
+
+  expect(isNumberOnlyString('11 ')).toBe(true)
+})
+
+test('Should add px suffix in correct cases', () => {
+  expect(addPxSuffixIfInputHasNoPrefix('1')).toEqual('1px')
+  expect(addPxSuffixIfInputHasNoPrefix('1px')).toEqual('1px')
+  expect(addPxSuffixIfInputHasNoPrefix('1.1')).toEqual('1.1px')
+  expect(addPxSuffixIfInputHasNoPrefix('100%')).toEqual('100%')
+})
diff --git a/packages/eds-data-grid-react/src/utils.ts b/packages/eds-data-grid-react/src/utils.ts
@@ -0,0 +1,27 @@
+/**
+ * Function returning wether a string only contains number. Allows leading or trailing spaces.
+ *
+ * Examples:
+ *
+ * ```
+ * isNumberOnlyString("10") // true
+ * isNumberOnlyString("10.10") // true
+ * isNumberOnlyString("10px") // false
+ * isNumberOnlyString("10%") // false
+ * isNumberOnlyString("10 ") // true
+ * ```
+ *
+ * @param number
+ * @returns
+ */
+export function isNumberOnlyString(number: string) {
+  return !isNaN(Number(number)) && !isNaN(parseFloat(number))
+}
+
+export function addPxSuffixIfInputHasNoPrefix(size: number | string) {
+  if (typeof size === 'number' || isNumberOnlyString(size)) {
+    return `${size}px`
+  }
+
+  return size
+}