fix: rename cellOverflowEllipsis to truncateContent

This commit is contained in:
jongomez 2023-10-03 23:49:49 +01:00
parent 17efd6f74a
commit f8827a9eee
4 changed files with 23 additions and 23 deletions

View File

@ -65,7 +65,7 @@ type SingleTableRowProps = {
checked?: boolean checked?: boolean
itemContentArray: string[] itemContentArray: string[]
onSelectChange?: () => void onSelectChange?: () => void
cellOverflowEllipsis: boolean truncateContent: boolean
} }
const SingleTableRow = ({ const SingleTableRow = ({
@ -73,13 +73,13 @@ const SingleTableRow = ({
checked, checked,
itemContentArray, itemContentArray,
onSelectChange, onSelectChange,
cellOverflowEllipsis, truncateContent,
}: SingleTableRowProps) => ( }: SingleTableRowProps) => (
<TableRow checked={checked} onSelectChange={onSelectChange} key={rowIndex}> <TableRow checked={checked} onSelectChange={onSelectChange} key={rowIndex}>
{itemContentArray.map((itemContent, itemIndex) => ( {itemContentArray.map((itemContent, itemIndex) => (
<TableItem <TableItem
key={`${rowIndex}-${itemIndex}`} key={`${rowIndex}-${itemIndex}`}
cellOverflowEllipsis={cellOverflowEllipsis} truncateContent={truncateContent}
> >
{itemContent} {itemContent}
</TableItem> </TableItem>
@ -90,13 +90,13 @@ const SingleTableRow = ({
type DefaultTypeRowsProps = { type DefaultTypeRowsProps = {
rows: number rows: number
itemContentArray: string[] itemContentArray: string[]
cellOverflowEllipsis: boolean truncateContent: boolean
} }
const DefaultTypeRows = ({ const DefaultTypeRows = ({
rows, rows,
itemContentArray, itemContentArray,
cellOverflowEllipsis, truncateContent,
}: DefaultTypeRowsProps) => ( }: DefaultTypeRowsProps) => (
<> <>
{Array(rows) {Array(rows)
@ -106,7 +106,7 @@ const DefaultTypeRows = ({
rowIndex={rowIndex} rowIndex={rowIndex}
itemContentArray={itemContentArray} itemContentArray={itemContentArray}
key={rowIndex} key={rowIndex}
cellOverflowEllipsis={cellOverflowEllipsis} truncateContent={truncateContent}
/> />
))} ))}
</> </>
@ -117,7 +117,7 @@ type CheckboxTypeRowsProps = {
itemContentArray: string[] itemContentArray: string[]
rowsChecked: boolean[] rowsChecked: boolean[]
handleRowCheckboxChange: (index: number) => void handleRowCheckboxChange: (index: number) => void
cellOverflowEllipsis: boolean truncateContent: boolean
} }
const CheckboxTypeRows = ({ const CheckboxTypeRows = ({
@ -125,7 +125,7 @@ const CheckboxTypeRows = ({
rowsChecked, rowsChecked,
itemContentArray, itemContentArray,
handleRowCheckboxChange, handleRowCheckboxChange,
cellOverflowEllipsis, truncateContent,
}: CheckboxTypeRowsProps) => ( }: CheckboxTypeRowsProps) => (
<> <>
{Array(rows) {Array(rows)
@ -137,7 +137,7 @@ const CheckboxTypeRows = ({
itemContentArray={itemContentArray} itemContentArray={itemContentArray}
onSelectChange={() => handleRowCheckboxChange(rowIndex)} onSelectChange={() => handleRowCheckboxChange(rowIndex)}
key={rowIndex} key={rowIndex}
cellOverflowEllipsis={cellOverflowEllipsis} truncateContent={truncateContent}
/> />
))} ))}
</> </>
@ -148,7 +148,7 @@ type RadioTypeRowsProps = {
selectedRowIndex: number | null selectedRowIndex: number | null
itemContentArray: string[] itemContentArray: string[]
handleRowCheckboxChange: (index: number) => void handleRowCheckboxChange: (index: number) => void
cellOverflowEllipsis: boolean truncateContent: boolean
} }
const RadioTypeRows = ({ const RadioTypeRows = ({
@ -156,7 +156,7 @@ const RadioTypeRows = ({
selectedRowIndex, selectedRowIndex,
itemContentArray, itemContentArray,
handleRowCheckboxChange, handleRowCheckboxChange,
cellOverflowEllipsis, truncateContent,
}: RadioTypeRowsProps) => ( }: RadioTypeRowsProps) => (
<> <>
{Array(rows) {Array(rows)
@ -168,16 +168,16 @@ const RadioTypeRows = ({
itemContentArray={itemContentArray} itemContentArray={itemContentArray}
onSelectChange={() => handleRowCheckboxChange(rowIndex)} onSelectChange={() => handleRowCheckboxChange(rowIndex)}
key={rowIndex} key={rowIndex}
cellOverflowEllipsis={cellOverflowEllipsis} truncateContent={truncateContent}
/> />
))} ))}
</> </>
) )
export const Root: Story<TableProps & { cellOverflowEllipsis: boolean }> = ({ export const Root: Story<TableProps & { truncateContent: boolean }> = ({
type, type,
pages, pages,
cellOverflowEllipsis, truncateContent,
...args ...args
}) => { }) => {
const [rows, setRows] = useState(1) const [rows, setRows] = useState(1)
@ -294,7 +294,7 @@ export const Root: Story<TableProps & { cellOverflowEllipsis: boolean }> = ({
rowsChecked={rowsChecked} rowsChecked={rowsChecked}
itemContentArray={itemContentArray} itemContentArray={itemContentArray}
handleRowCheckboxChange={handleRowCheckboxChange} handleRowCheckboxChange={handleRowCheckboxChange}
cellOverflowEllipsis={cellOverflowEllipsis} truncateContent={truncateContent}
/> />
) : type === 'radio' ? ( ) : type === 'radio' ? (
<RadioTypeRows <RadioTypeRows
@ -302,13 +302,13 @@ export const Root: Story<TableProps & { cellOverflowEllipsis: boolean }> = ({
selectedRowIndex={selectedRowIndex} selectedRowIndex={selectedRowIndex}
itemContentArray={itemContentArray} itemContentArray={itemContentArray}
handleRowCheckboxChange={handleRowCheckboxChange} handleRowCheckboxChange={handleRowCheckboxChange}
cellOverflowEllipsis={cellOverflowEllipsis} truncateContent={truncateContent}
/> />
) : ( ) : (
<DefaultTypeRows <DefaultTypeRows
rows={rows} rows={rows}
itemContentArray={itemContentArray} itemContentArray={itemContentArray}
cellOverflowEllipsis={cellOverflowEllipsis} truncateContent={truncateContent}
/> />
)} )}
</Table> </Table>
@ -320,6 +320,6 @@ Root.args = {
size: 'large', size: 'large',
type: 'default', type: 'default',
hasFooter: true, hasFooter: true,
cellOverflowEllipsis: false, truncateContent: false,
pages: 10, pages: 10,
} }

View File

@ -1,7 +1,7 @@
export const tableItemClasses = { export const tableItemClasses = {
root: `lsd-table-item`, root: `lsd-table-item`,
cellOverflowEllipsis: `lsd-table-item--cell-overflow-ellipsis`, truncateContent: `lsd-table-item--truncate-content`,
large: `lsd-table-item--large`, large: `lsd-table-item--large`,
medium: `lsd-table-item--medium`, medium: `lsd-table-item--medium`,

View File

@ -6,7 +6,7 @@ export const TableItemStyles = css`
border: 1px solid rgb(var(--lsd-border-primary)); border: 1px solid rgb(var(--lsd-border-primary));
} }
.${tableItemClasses.cellOverflowEllipsis} { .${tableItemClasses.truncateContent} {
word-wrap: break-word; word-wrap: break-word;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;

View File

@ -11,14 +11,14 @@ import { tableItemClasses } from './TableItem.classes'
export type TableItemProps = CommonProps & export type TableItemProps = CommonProps &
React.HTMLAttributes<HTMLDivElement> & { React.HTMLAttributes<HTMLDivElement> & {
size?: 'large' | 'medium' | 'small' size?: 'large' | 'medium' | 'small'
cellOverflowEllipsis?: boolean truncateContent?: boolean
} }
export const TableItem: React.FC<TableItemProps> & { export const TableItem: React.FC<TableItemProps> & {
classes: typeof tableItemClasses classes: typeof tableItemClasses
} = ({ } = ({
size: _size = 'large', size: _size = 'large',
cellOverflowEllipsis = false, truncateContent = false,
children, children,
...props ...props
}) => { }) => {
@ -34,7 +34,7 @@ export const TableItem: React.FC<TableItemProps> & {
props.className, props.className,
tableItemClasses.root, tableItemClasses.root,
tableItemClasses[size], tableItemClasses[size],
cellOverflowEllipsis && tableItemClasses.cellOverflowEllipsis, truncateContent && tableItemClasses.truncateContent,
)} )}
> >
{children} {children}