mirror of https://github.com/acid-info/lsd.git
fix: rename cellOverflowEllipsis to truncateContent
This commit is contained in:
parent
17efd6f74a
commit
f8827a9eee
|
@ -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,
|
||||||
}
|
}
|
||||||
|
|
|
@ -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`,
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Reference in New Issue