From fec135d178f7d6700df21503d2bbea906983c626 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Mon, 13 Nov 2023 12:44:41 +0100 Subject: [PATCH] docs(PhoneNumber): remove unsupported props --- .../forms/data-value-readwrite-properties.mdx | 11 ++++++++ .../feature-fields/PhoneNumber/properties.mdx | 11 +++++++- .../src/shared/tags/Table.tsx | 25 +++++++++++++++++++ 3 files changed, 46 insertions(+), 1 deletion(-) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/data-value-readwrite-properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/data-value-readwrite-properties.mdx index f1086541971..1988e8b5d65 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/data-value-readwrite-properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/data-value-readwrite-properties.mdx @@ -1,5 +1,9 @@ +import { OmitTableProperties } from 'dnb-design-system-portal/src/shared/tags/Table' + ### Standard data value component props + + | Property | Type | Description | | ---------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `className` | `string` | _(optional)_ Outer DOM element class name. | @@ -27,3 +31,10 @@ | `onBlurValidator` | `function` | _(optional)_ Custom validator function that will be called when the user leaves the field (blurring a text input, closing a dropdown etc). Can be asynchronous or synchronous. | | `toInput` | `function` | _(optional)_ Derivate called when the received / active value is sent to the input. Can be used for casting, changing syntax etc. | | `fromInput` | `function` | _(optional)_ Derivate called when changes is made by the user, to cast or change syntax back to the original (opposite of `toInput`). | + + + +export default function Layout({ omit = null, children }) { + globalThis.omitTableProperties = omit + return <>{children} +} diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx index 13f1d59b83c..83611ff99e1 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx @@ -19,4 +19,13 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. | `width` | `string` or `false` | _(optional)_ `large` for predefined standard width, `stretch` for fill available width. | | [Space](/uilib/layout/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | - + diff --git a/packages/dnb-design-system-portal/src/shared/tags/Table.tsx b/packages/dnb-design-system-portal/src/shared/tags/Table.tsx index fff5588d983..f375885c738 100644 --- a/packages/dnb-design-system-portal/src/shared/tags/Table.tsx +++ b/packages/dnb-design-system-portal/src/shared/tags/Table.tsx @@ -14,6 +14,27 @@ const StyledTable = styled(TableElement)` } ` +export function OmitTableProperties({ children, ...rest }) { + const omitProperties = globalThis.omitTableProperties || [] + + return recursiveMap(children, (child: React.ReactElement) => { + if (child.type === 'tr') { + const firstTd = getFirstChild(child) + + if (firstTd.type === 'td') { + const tdContent = getFirstChild(firstTd) + const name = getFirstChild(tdContent) + + if (omitProperties.includes(name)) { + return null + } + } + } + + return child + }) +} + export default function Table({ children }) { // make sure we get the table children children = @@ -56,6 +77,10 @@ export default function Table({ children }) { ) } +function getFirstChild(children: ChildrenWithChildren) { + return children.props.children.at(0) +} + function getChildren(children: ChildrenWithChildren) { return recursiveMap(children.props.children, (child) => child) }