UI-Schema Documentation
+
diff --git a/packages/docs/src/component/Markdown.js b/packages/docs/src/component/Markdown.js
index 49df6669..2a3b9ea2 100644
--- a/packages/docs/src/component/Markdown.js
+++ b/packages/docs/src/component/Markdown.js
@@ -28,13 +28,18 @@ renderers.p = p => inline ? : ;
const MarkdownH = ({level, ...p}) =>
renderers.h1 = renderers.h2 = renderers.h3 = renderers.h4 = renderers.h5 = renderers.h6 = MarkdownH
-renderers.li = p => {p.children};
+renderers.li = p =>
+ {p.children}
+;
renderers.a = LinkInternalLocale;
const renderersContent = baseRenderers(false);
renderersContent.code = ({inline, ...p}) => inline ? : ;
renderersContent.h1 = renderersContent.h2 = renderersContent.h3 = renderersContent.h4 = renderersContent.h5 = renderersContent.h6 = LinkableHeadline;
renderersContent.a = LinkInternalLocale;
+renderersContent.li = p =>
+ {p.children}
+;
const rehypePlugins = [rehypeRaw]
const remarkPlugins = [remarkGfm]
diff --git a/packages/docs/src/content/docs.js b/packages/docs/src/content/docs.js
index 6fe0ba29..6c1e29e2 100644
--- a/packages/docs/src/content/docs.js
+++ b/packages/docs/src/content/docs.js
@@ -136,6 +136,7 @@ export const routesFurtherDesignSystem = [
},
routes: [
createDoc('ds-material/Table', 'Table', ''),
+ createDoc('ds-material/GenericList', 'GenericList', ''),
],
},
],
diff --git a/packages/docs/src/content/docs/ds-material/GenericList.md b/packages/docs/src/content/docs/ds-material/GenericList.md
new file mode 100644
index 00000000..c10ad616
--- /dev/null
+++ b/packages/docs/src/content/docs/ds-material/GenericList.md
@@ -0,0 +1,129 @@
+# DS Material GenericList
+
+Base components for the `GenericList` widget, to easily configure and re-wire the widget parts, see also the [widget docs here](/docs/widgets/GenericList).
+
+```typescript jsx
+import React from 'react'
+import { List } from 'immutable'
+import { memo } from '@ui-schema/ui-schema/Utils/memo'
+import { WidgetProps } from '@ui-schema/ui-schema/Widget'
+import { useUIStore, WithOnChange } from '@ui-schema/ui-schema/UIStore'
+import {
+ GenericListContent, GenericListFooter,
+ GenericListItem,
+ GenericListItemMore, GenericListItemPos,
+} from '@ui-schema/ds-material/BaseComponents/GenericList'
+import { MuiWidgetBinding } from '@ui-schema/ds-material/widgetsBinding'
+
+// it is important to use `memo` from `@ui-schema/ui-schema` for the content component,
+// as the generic list will re-render on each change of anything in the store,
+// with passing down `listSize` and not other data, the `GenericListContent` will only re-render when the `listSize` changes
+export const GenericListContentMemo = memo(GenericListContent)
+
+export const GenericList = (props: WidgetProps & WithOnChange): React.ReactElement => {
+ const {store} = useUIStore()
+ // info: `store?.extractValues` is new since `0.3.0-alpha.11` and can be used instead of the `extractValue` HOC
+ const {value} = store?.extractValues>(props.storeKeys) || {}
+ // extracting and calculating the list size here, not passing down the actual list for performance reasons
+ // https://github.com/ui-schema/ui-schema/issues/133
+ return
+}
+```
+
+Easily define own schema keywords, for options which are only supported by `props`:
+
+```typescript jsx
+export const GenericList = (props: WidgetProps & WithOnChange): React.ReactElement => {
+ const {store} = useUIStore()
+ const {value} = store?.extractValues>(props.storeKeys) || {}
+ // extracting and calculating the list size here, not passing down the actual list for performance reasons
+ // https://github.com/ui-schema/ui-schema/issues/133
+ return
+}
+```
+
+Use the [GenericListContent.tsx](https://github.com/ui-schema/ui-schema/tree/master/packages/ds-material/src/BaseComponents/GenericList/GenericListContent.tsx) as a starting point if you need to further adjust the widget parts.
+
+## Translation / Labels
+
+- `labels.add-item` used by `GenericListFooter` for the add-button, supports named-labels key `add`
+- `labels.remove-item` used by `GenericListItemMore` for the delete-button, supports named-labels key `remove`
+- `labels.move-to-position` used by `GenericListItemPos` to render the up/down buttons, adds the context `nextIndex` to render to-which-position it will be moved
+- `labels.entry` used by `GenericListItemPos` as `sr-only` for the nth-label
+
+**Notices:**
+
+- `sr-only` = `screen-reader-only` text `span` for a11y
+- supports named-label: uses the `context` to pass down `actionLabels` for a not-generic-labelling, the given key is the intended action-key for the label
+
+For `actionLabels` handling, see [dictionary/en/labels](https://github.com/ui-schema/ui-schema/tree/master/packages/dictionary/en/labels.js) as an example.
+
+Example schema structure that activates `actionLabels`, with support for multiple languages and different buttons:
+
+```json
+{
+ "type": "object",
+ "widget": "GenericList",
+ "listActionLabels": {
+ "en": {
+ "add": "New event",
+ "remove": "Remove event"
+ },
+ "de": {
+ "add": "Neue Veranstaltung",
+ "remove": "Lösche Veranstaltung"
+ }
+ }
+}
+```
+
+## Components
+
+### GenericListContent
+
+The list renderer component, uses the components passed down per `props` to build the needed list out of the `listSize` - it does not receive any data from the list.
+
+`GenericListContentProps`:
+
+- `btnAddShowLabel`: `boolean`, for the add-item button, when `true` displays a normal button and not only an icon-button
+- `btnAddStyle`: `React.CSSProperties`, for the add-item button, custom react styles
+- `ComponentItemPos`: `React.ComponentType`, will be rendered in `ComponentItem`, contains the position and up/down buttons
+- `ComponentItemMore`: `React.ComponentType`, will be rendered in `ComponentItem`, contains the delete button
+- `ComponentItem`: `React.ComponentType`, is rendered per item in the list, responsible to further render nested schema, also uses component props
+- `ComponentFooter`: `React.ComponentType`, will be rendered in `GenericListContent`, contains the add-button
+- `listSize`: `number`, the size of the list
+- `schemaKeys`: `StoreKeys`, experimental [#104](https://github.com/ui-schema/ui-schema/issues/104)
+- `listSpacing`: `GridSpacing`, used as the spacing for the item-list
+
+### GenericListItem
+
+For props check typings.
+
+### GenericListItemPos
+
+For props check typings.
+
+### GenericListItemMore
+
+For props check typings.
+
+### GenericListFooter
+
+For props check typings.
diff --git a/packages/docs/src/content/docs/ds-material/Table.md b/packages/docs/src/content/docs/ds-material/Table.md
index f7739d12..71161d02 100644
--- a/packages/docs/src/content/docs/ds-material/Table.md
+++ b/packages/docs/src/content/docs/ds-material/Table.md
@@ -1,4 +1,4 @@
-# DS Material
+# DS Material Table
Base components for the `Table` widget, to build custom table widgets, check the [widget docs here](/docs/widgets/Table).
diff --git a/packages/docs/src/content/docs/widgets/GenericList.md b/packages/docs/src/content/docs/widgets/GenericList.md
index 9483bf5f..a17bd5ba 100644
--- a/packages/docs/src/content/docs/widgets/GenericList.md
+++ b/packages/docs/src/content/docs/widgets/GenericList.md
@@ -19,6 +19,8 @@ Widgets for complex structures in arrays.
### Material-UI
+> see the [GenericList base components](https://ui-schema.bemit.codes/docs/ds-material/GenericList) for further customization and details about label translation
+
```js
import {GenericList} from "@ui-schema/ds-material/Widgets/GenericList";
@@ -32,8 +34,13 @@ const widgets = {
**Supports extra keywords:**
- `view`
- - `btnSize` either `small` (default) or `medium`
+ - `btnSize` either `small` (default) or `medium`, used for the add-button
+ - `deleteBtnSize` either `small` (default) or `medium`, used for the delete-button
+ - `btnVariant` either `text | outlined | contained`, used for the add-button
+ - `btnVariant` either `text | outlined | contained`, used for the add-button
+ - `btnColor` either `inherit | primary | secondary | default`, used for the add-button
- `hideTitle` when `true` doesn't show any title
+- `listActionLabels` used for [named-label translation](https://ui-schema.bemit.codes/docs/ds-material/GenericList#translation--labels)
- `notDeletable` when `true` doesn't allow deletion of items
- `notAddable` when `true` doesn't allow adding items
- `notSortable` when `true` doesn't allow sorting of items
diff --git a/packages/docs/src/content/docs/widgets/Table.md b/packages/docs/src/content/docs/widgets/Table.md
index 5531e690..5af9b2fc 100644
--- a/packages/docs/src/content/docs/widgets/Table.md
+++ b/packages/docs/src/content/docs/widgets/Table.md
@@ -4,13 +4,12 @@ Widget for data tables.
[![Component Examples](https://img.shields.io/badge/Examples-green?labelColor=1d3d39&color=1a6754&logoColor=ffffff&style=flat-square&logo=plex)](#demo-ui-generator) [![supports Material-UI Binding](https://img.shields.io/badge/Material-green?labelColor=1a237e&color=0d47a1&logoColor=ffffff&style=flat-square&logo=material-ui)](#material-ui)
-- type: `array(array | object)`,
+- type: `array(array | object)`
- widget keywords:
- `Table` **(usable, beta)**
- `TableAdvanced` **(in-dev)**
- view
- - does not support grid keywords in direct nested schemas, disables grid for own stack, but supports for nested `object`
-
+ - does not support grid keywords in direct nested schemas, disables grid for own stack, but supported inside nested `object`
- [Array Type Properties](/docs/schema#type-array)
- [Object Type Properties](/docs/schema#type-object)
@@ -26,6 +25,8 @@ Widget for data tables.
Special `Table` component for complex, always validated, lists. Using custom widgets without labels. Hidden rows from pagination are still validated, using `isVirtual` prop.
+> see the [table base components](https://ui-schema.bemit.codes/docs/ds-material/Table) for further customization
+
**Supports extra keywords:**
- `view`
@@ -85,8 +86,6 @@ customWidgets.custom = {
Currently included cell components are based on the `TextField` components and support the same features - except label/title related options. The title related schema keywords are used by `Table` for the `TableHeader` cell contents.
-> todo: more code sharing through utils
-
- `TextRendererCell` supports multi-line text
- **extra keywords:**
- `view`
diff --git a/packages/ds-material/src/BaseComponents/GenericList/GenericListContent.tsx b/packages/ds-material/src/BaseComponents/GenericList/GenericListContent.tsx
new file mode 100644
index 00000000..e8eea26a
--- /dev/null
+++ b/packages/ds-material/src/BaseComponents/GenericList/GenericListContent.tsx
@@ -0,0 +1,104 @@
+import React from 'react'
+import FormControl from '@material-ui/core/FormControl'
+import Grid from '@material-ui/core/Grid'
+import FormLabel from '@material-ui/core/FormLabel'
+import { TransTitle, StoreKeys, WidgetProps, WithOnChange } from '@ui-schema/ui-schema'
+import { ListButtonOverwrites } from '@ui-schema/ds-material/Component/ListButton'
+import { MuiWidgetBinding } from '@ui-schema/ds-material/widgetsBinding'
+import { GenericListFooterProps, GenericListItemProps, GenericListItemSharedProps } from '@ui-schema/ds-material/BaseComponents'
+import Box from '@material-ui/core/Box'
+import { GridSpacing } from '@material-ui/core/Grid/Grid'
+
+export interface GenericListContentProps extends ListButtonOverwrites {
+ btnAddShowLabel?: boolean
+ btnAddStyle?: React.CSSProperties
+ ComponentItemPos?: React.ComponentType
+ ComponentItemMore?: React.ComponentType
+ ComponentItem: React.ComponentType
+ ComponentFooter?: React.ComponentType
+ listSize: number
+ schemaKeys?: StoreKeys
+ listSpacing?: GridSpacing
+}
+
+export const GenericListContent =