diff --git a/packages/react-renderer-demo/src/app/pages/others/miq-components.md b/packages/react-renderer-demo/src/app/pages/others/miq-components.md deleted file mode 100644 index 7719ce6e5..000000000 --- a/packages/react-renderer-demo/src/app/pages/others/miq-components.md +++ /dev/null @@ -1,101 +0,0 @@ -import Grid from '@material-ui/core/Grid' -import ListOfContents from '../../src/helpers/list-of-contents'; - - - - -## ManageIQ components - -### Duallist select - -**Props** - -| Props | Type | Default | Decription | -| ------------- | ------------- | ------------- | ------------- | -| leftId | string | undefined | ID passed to left select | -| rightId | string | undefined | ID passed to right select | -| leftTitle | string | undefined | Title above left select | -| rightTitle | string | undefined | Title above right select | -| rightTitle | string | undefined | Title above right select | -| size | number | 15 | Size of the selects (in lines) | -| allToRight | bool | true | Should show moveAllToRight button | -| allToLeft | bool | false | Should show moveAllToLeft button | -| moveLeftTitle | string | __('Move selected to left') | Title of moveToLeft button | -| moveRightTitle | string | __('Move selected to right') | Title of moveToRight button | -| moveAllRightTitle | string | __('Move all to right') | Title of moveAllToRight button | -| moveAllLeftTitle | string | __('Move all to left') | Title of moveAllToLeft button | -| options | array | [ ] | All options of the select | -| input: { value } | array | [ ] | Selected options **(subset of options)** | - -**Options/Value format** - -```jsx -[ - {key: 'key', label: 'label'}, - {key: 'key1', label: 'label1'}, - {key: 'key2', label: 'label2'}, - ... -] -``` - -The component will split values from options to left/right select lists according to value. (All values in value are going to right, others to left) - -**How to use it in Data-driven form schema (example)** - -```jsx -{ - component: 'dual-list-select', - name: 'duallist', - options: [ - { key: 'key', label: 'label' }, ... - ], - rightId: 'child_vms', - leftId: 'available_vms', - rightTitle: __('Child VMs:'), - leftTitle: __('Availables VMs'), - moveLeftTitle: __('Move selected VMs to left'), - moveRightTitle: __('Move selected VMs to right'), - moveAllRightTitle: __('Move all VMs to right'), -} -``` - -**How to use it in Data-driven form** - -By default, the value contains all options from the right side select. However, if you need left values or just added values (probably in most cases), you can use helpers in `/dual-list-select/helpers` to extract needed information: - -
- -**1** In constructor/componentDidMount/elsewhere (where you fetch data) save these values into state: -`originalOptions: options` -`originalRightValues: value` - -
- -**2** In your submit method (values => (...)) you can use helper methods: - -
- -**`filterOptions(originalOptions, values.duallist)`** to get all values on left -**`filterOptions(values.duallist, originalOptions)`** to get added values to left select -**`filterOptions(values.duallist, originalRightValues)`** to get added values to right select -**`getKeys(values)`** to get keys of values - -
- -**3** Then you can send values to endpoints/API! - -### Horizontal rule - -Just a `hr` component for using in forms. - -```jsx -{ - component: 'hr', - name: 'name', // every component has to have an unique name! -} -``` -
- - - -
\ No newline at end of file diff --git a/packages/react-renderer-demo/src/app/src/components/navigation/examples-definitions.js b/packages/react-renderer-demo/src/app/src/components/navigation/examples-definitions.js index 34e6e7ceb..bed8b02c8 100644 --- a/packages/react-renderer-demo/src/app/src/components/navigation/examples-definitions.js +++ b/packages/react-renderer-demo/src/app/src/components/navigation/examples-definitions.js @@ -436,8 +436,8 @@ Vestibulum vulputate inceptos himenaeos.`, }, variants: [], next: { - link: '/others/miq-components', - label: 'ManageIQ components', + link: '/releases', + label: 'Releases', }, prev: { link: '/component-example/time-picker', diff --git a/packages/react-renderer-demo/src/app/src/components/navigation/other-pages/index.js b/packages/react-renderer-demo/src/app/src/components/navigation/other-pages/index.js deleted file mode 100644 index 1e1943ddd..000000000 --- a/packages/react-renderer-demo/src/app/src/components/navigation/other-pages/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export default [{ - component: 'miq-components', - linkText: 'ManageIQ components', - prev: { - link: '/component-example/wizard', - label: 'Wizard', - }, -}]; diff --git a/packages/react-renderer-demo/src/app/src/components/navigation/schema.js b/packages/react-renderer-demo/src/app/src/components/navigation/schema.js index 1bab2edd3..abc14d4d2 100644 --- a/packages/react-renderer-demo/src/app/src/components/navigation/schema.js +++ b/packages/react-renderer-demo/src/app/src/components/navigation/schema.js @@ -1,5 +1,4 @@ import { baseExamples } from './examples-definitions'; -import otherExamples from './other-pages/'; import { docs } from './documentation-pages'; import flatMap from 'lodash/flatMap'; @@ -22,14 +21,6 @@ const schema = [ fields: [ ...baseExamples.sort((a, b) => a.linkText.localeCompare(b.linkText)), ], - }, - { - title: 'Others', - link: 'others', - noRoute: true, - fields: [ - ...otherExamples, - ], }, { linkText: 'Releases', link: 'releases',