Skip to content

Commit

Permalink
feat(Table): refactoring of types, documentation, and accordion file …
Browse files Browse the repository at this point in the history
…structure (#3683)

### Table, TableTr, TableTd
* added `TableDocs` properties
* removed unused `variant` prop
* fixed some prop types
* added typing to `TableContext`

### Accordion
* moved internal accordion files to separate folder `./table-accordion`
* combined `TableAccordionTd` and `TableAccordionTr` files in to
`TableAccordionContent` to share identical logic
* renamed `TableAccordionTd` to `TableAccordionContentSingle`
* renamed `TableAccordionTr` to `TableAccordionContentRow` 
* added typing to `TableAccordionContext`

### Other
* `PropertiesTable` now treats values `null` the same as `undefined`

---------

Co-authored-by: Tobias Høegh <tobias@tujo.no>
  • Loading branch information
snorrekim and tujoworker committed Jun 14, 2024
1 parent 83b05cf commit 6045e42
Show file tree
Hide file tree
Showing 18 changed files with 480 additions and 284 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,18 @@
showTabs: true
---

import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
import {
TableEventProperties,
TrEventProperties,
} from '@dnb/eufemia/src/components/table/TableDocs'

## Table events

<PropertiesTable props={TableEventProperties} showDefaultValue />

## Table Row `<Tr>` events

Table Row `<Tr>` events are a part of the accordion feature and needs to be enabled with the `accordion` property on the main Table.

| Events | Description |
| ---------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `onClick` | _(optional)_ will emit when user clicks/expands the table row. Returns a native click. |
| `onOpened` | _(optional)_ Will emit when table row is expanded. Returns an object with the table row as the target: `{ target }`. |
| `onClosed` | _(optional)_ Will emit when table row is closed (after it was open). Returns an object with the table row as the target: `{ target }`. |
<PropertiesTable props={TrEventProperties} showDefaultValue />
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,28 @@
showTabs: true
---

import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
import {
TableProperties,
TrProperties,
ThProperties,
TdProperties,
} from '@dnb/eufemia/src/components/table/TableDocs'

## Properties

### `<Table>`

| Properties | Description |
| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `accordion` | _(optional)_ set to `true` if you have one or more rows that contains an accordion content. Defaults to `false`. |
| `collapseAllHandleRef` | _(optional)_ ref handle to collapse all expanded accordion rows. Send in a ref and use `.current()` to collapse all rows. Defaults to `undefined`. |
| `border` | _(optional)_ use `true` to show borders between table data cells. Defaults to `false`. |
| `outline` | _(optional)_ use `true` to show a outline border around the table. Defaults to `false`. |
| `sticky` | _(optional)_ use `true` to enable a sticky Table header. Or use `css-position` to enable the CSS based scroll behavior. Defaults to `false`. |
| `stickyOffset` | _(optional)_ defines the offset (top) in `rem` from where the header should start to stick. You may define your app header height here, if you have a sticky header on your page. Defaults to `0`. |
| `size` | _(optional)_ spacing size inside the table header and data. Options: `small` \| `medium` \| `large` \. Defaults to `large`. |
| `fixed` | _(optional)_ if set to `true`, the table will behave with a fixed table layout, using: `table-layout: fixed;`. Use e.g. CSS `width: 40%` on a table column to define the width. Defaults to `false`. |
| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. |
| ~~`variant`~~ (not implemented yet) | _(coming)_ defines the style variant of the table. Options: `basis` . Defaults to `generic`. |
| [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
<PropertiesTable props={TableProperties} showDefaultValue />

### Table Row `<Tr>`

| Properties | Description |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `variant` | _(optional)_ defines the variant of the current row. If set to either `odd` or `even`, the next row one will continue with the opposite. Defaults to automatic. |
| `noWrap` | _(optional)_ if set to `true`, the inherited header text will not wrap to new lines. Defaults to `false`. |
| `expanded` | _(optional)_ use `true` to render the `<Tr>` initially as expanded. Defaults to `false`. |
| `disabled` | _(optional)_ use `true` to disable the `<Tr>` to be accessible as an interactive element. Defaults to `false`. |
| `noAnimation` | _(optional)_ use `true` to disable the expand/collapse animation. Defaults to `false`. |
<PropertiesTable props={TrProperties} showDefaultValue />

### Table Header `<Th>`

| Properties | Description |
| ---------- | ---------------------------------------------------------------------------------------------------- |
| `sortable` | _(optional)_ defines the table header as sortable if set to `true` (ascending). Defaults to `false`. |
| `active` | _(optional)_ defines the sortable column as the current active (ascending). Defaults to `false`. |
| `reversed` | _(optional)_ defines the sortable column as in reversed order (descending). Defaults to `false`. |
| `noWrap` | _(optional)_ if set to `true`, the header text will not wrap to new lines. Defaults to `false`. |
<PropertiesTable props={ThProperties} showDefaultValue />

### Table Data `<Td>`

| Properties | Description |
| ----------- | ----------------------------------------------------------------------------------------- |
| `noSpacing` | _(optional)_ if set to `true`, no padding will be added. Defaults to `false`. |
| `spacing` | _(optional)_ set to `horizontal` for padding on left and right side. Defaults to `false`. |
<PropertiesTable props={TdProperties} showDefaultValue />
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export const FormattedCode = ({
case 'value': {
style.color = children.startsWith(`'`)
? colorString
: children === 'undefined'
: children === 'undefined' || children === 'null'
? colorUndefined
: colorValue
// falls through
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default class HeightAnimation {
visibility: 'hidden',
opacity: '0', // prevents before/after elements to be visible
height: 'auto',
}
} as const

constructor(opts: HeightAnimationOptions = {}) {
this.isInBrowser = typeof window !== 'undefined'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -151,11 +151,14 @@ export function useHeightAnimation(
* Returns the first paint style, to be used for the initial render,
* to avoid flickering.
*/
const firstPaintStyle = ((open &&
!isVisible &&
!isAnimating &&
instRef.current?.firstPaintStyle) ||
{}) as React.CSSProperties
const firstPaintStyle:
| typeof instRef.current.firstPaintStyle
| Record<string, never> =
(open &&
!isVisible &&
!isAnimating &&
instRef.current?.firstPaintStyle) ||
{}
const isInDOM = open || isVisible

return {
Expand Down
2 changes: 1 addition & 1 deletion packages/dnb-eufemia/src/components/table/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export type TableProps = {
size?: TableSizes

/**
* The style variant of the component.
* The style variant of the component. Currently not implemented.
* Default: generic.
*/
variant?: TableVariants
Expand Down
95 changes: 0 additions & 95 deletions packages/dnb-eufemia/src/components/table/TableAccordionTd.tsx

This file was deleted.

89 changes: 0 additions & 89 deletions packages/dnb-eufemia/src/components/table/TableAccordionTr.tsx

This file was deleted.

13 changes: 11 additions & 2 deletions packages/dnb-eufemia/src/components/table/TableContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,16 @@
*/

import React from 'react'
import type { Translation } from '../../shared/Context'
import type { TableAllProps } from './Table'

export const TableContext = React.createContext(null)
type TableContextProps = {
trCountRef: React.MutableRefObject<{
count: number
}>
rerenderAlias: Record<string, never>
collapseTrCallbacks: React.MutableRefObject<(() => void)[]>
allProps: TableAllProps & Translation['Table']
}

export const TableAccordionContext = React.createContext(null)
export const TableContext = React.createContext<TableContextProps>(null)
Loading

0 comments on commit 6045e42

Please sign in to comment.