Merge pull request #1601 from SenseNet/fix/2004/grid-view-displayname…

…-in-one-line Grid view Displayname in one line
SenseNet · Mar 14, 2024 · 016679e · 016679e
2 parents ca7e501 + 7fd5b83
commit 016679e
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 15 deletions.
diff --git a/apps/sensenet/src/components/content-list/display-name-field.tsx b/apps/sensenet/src/components/content-list/display-name-field.tsx
@@ -1,4 +1,4 @@
-import { TableCell } from '@material-ui/core'
+import { createStyles, makeStyles, TableCell, Tooltip } from '@material-ui/core'
 import { GenericContent } from '@sensenet/default-content-types'
 import { clsx } from 'clsx'
 import React from 'react'
@@ -11,24 +11,52 @@ type DisplayNameProps = {
   isActive: boolean
 }
 
+const CHARACHTER_SPLIT = 10
+
+const useStyles = makeStyles(() => {
+  return createStyles({
+    displayContainer: {
+      position: 'relative',
+      top: '1px',
+      width: 'inherit',
+      '& > span': {
+        display: 'inline-block',
+        whiteSpace: 'nowrap',
+        verticalAlign: 'middle',
+      },
+      '& .first': {
+        maxWidth: `calc(100% - ${CHARACHTER_SPLIT + 1}ch)`,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      },
+    },
+  })
+})
+
 export const DisplayNameComponent: React.FunctionComponent<DisplayNameProps> = ({ content }) => {
   const globalClasses = useGlobalStyles()
 
+  const contentValue = content.DisplayName || content.Name
+
+  const splitedValue = [contentValue.slice(0, CHARACHTER_SPLIT * -1), contentValue.slice(CHARACHTER_SPLIT * -1)]
+
+  const classes = useStyles()
+
   return (
     <TableCell
       component="div"
       classes={{
         root: clsx(globalClasses.centeredLeft, globalClasses.virtualizedCellStyle),
       }}
       style={{ justifyContent: 'left' }}>
-      <div
-        className={globalClasses.centeredVertical}
-        data-test={`table-cell-${content.DisplayName?.replace(/\s+/g, '-').toLowerCase()}`}
-        style={{
-          justifyContent: 'space-between',
-        }}>
-        {content.DisplayName || content.Name}
-      </div>
+      <Tooltip title={contentValue} placement="bottom">
+        <div
+          className={classes.displayContainer}
+          data-test={`table-cell-${content.DisplayName?.replace(/\s+/g, '-').toLowerCase()}`}>
+          <span className="first"> {splitedValue[0]} </span>
+          <span className="second"> {splitedValue[1]} </span>
+        </div>
+      </Tooltip>
     </TableCell>
   )
 }
diff --git a/apps/sensenet/src/components/tree/tree.tsx b/apps/sensenet/src/components/tree/tree.tsx
@@ -29,8 +29,8 @@ type TreeProps = {
 }
 
 const CHARACHTER_SPLIT = 10
-const getStringParts = (str: string) => {
-  return [str.slice(0, CHARACHTER_SPLIT * -1), str.slice(CHARACHTER_SPLIT * -1)]
+export const getStringParts = (str: string, characterSplit = 10) => {
+  return [str.slice(0, characterSplit * -1), str.slice(characterSplit * -1)]
 }
 
 const useStyles = makeStyles(() => {

diff --git a/packages/sn-pickers-react/src/components/tree-picker/copy-move-tree-picker.tsx b/packages/sn-pickers-react/src/components/tree-picker/copy-move-tree-picker.tsx
@@ -53,7 +53,7 @@ export function CopyMoveTreePicker<T extends GenericContentWithIsParent = Generi
         if (!node.isParent) {
           const newSelection = []
 
-          if (newSelection.length === selection.length || selection[0].Id !== node.Id) {
+          if (newSelection.length === selection.length || selection[0]?.Id !== node.Id) {
             newSelection.push(node)
             props.setDestination?.(node.DisplayName)
           }

diff --git a/packages/sn-pickers-react/tests/picker.test.tsx b/packages/sn-pickers-react/tests/picker.test.tsx
@@ -178,16 +178,16 @@ describe('Picker component', () => {
       wrapper = mount(
         <Picker
           repository={repository(genericContentItems) as any}
-          currentParent={{ Id: 1, Name: 'Test', Path: 'Content/Workspace', Type: 'Folder', DisplayName: 'test' }}
+          currentParent={{ Id: 1, Name: 'Test', Path: 'Content/Workspace', Type: 'Folder', DisplayName: 'Test' }}
           setDestination={setDestination}
           treePickerMode={PickerModes.COPY_MOVE_TREE}
         />,
       )
     })
 
-    await act(async () => wrapper.update().find(ListItem).at(0).simulate('click'))
+    await act(async () => wrapper.update().find(ListItem).at(1).simulate('click'))
 
-    expect(setDestination).toBeCalledWith(genericContentItems[0].DisplayName)
+    expect(setDestination).toBeCalledWith(genericContentItems[1].DisplayName)
   })
 
   it('copy-move tree should render an error message when error', async () => {