Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Table): refactoring of types, documentation, and accordion file structure #3683

Merged
merged 9 commits into from
Jun 14, 2024
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
Loading