superdesk-ui-framework 3.0.1-beta.1 → 3.0.1-beta.4

package/dist/react/tree-select/TreeSelect.tsx

@@ -0,0 +1,273 @@
+import * as React from 'react';
+import * as Markup from '../../../js/react';
+import { PropsList, Prop } from '../../../../app-typescript';
+import { MultiSelect } from '../../../../app-typescript/components/MultiSelect';
+import { TreeSelect } from '../../../../app-typescript/components/TreeSelect';
+import {Example1} from './example-1';
+import {Example2} from './example-2';
+
+interface IState {
+    value: any;
+    value2: any;
+    options: any;
+    options2: any;
+    inputValue: string;
+}
+
+let itemArr = [
+    {
+        value: 'Item1',
+        children: [
+            {
+                value: 'Item4',
+                children: [
+                    {value: 'Item10'}
+                ]
+            },
+            {
+                value: 'Item5',
+                children: [
+                    {value: 'Item11'}
+                ]
+            }
+        ]
+    },
+    {
+        value: 'Item2',
+        children: [
+            {
+                value: 'Item6'
+            },
+            {
+                value: 'Item7'
+            }
+        ]
+    },
+    {
+        value: 'Item3',
+        children: [
+            {
+                value: 'Item8'
+            },
+            {
+                value: 'Item9'
+            }
+        ]
+    },
+]
+
+let itemArr2 = [
+    {
+        value: {name: 'name'},
+        children: [
+            {
+                value: {name: 'name'},
+                children: [
+                    {value: { name: 'name' }
+                }
+                ]
+            },
+            {
+                value: {name: 'name'},
+                children: [
+                    {value: {name: 'name'}
+                    }
+                ]
+            }
+        ]
+    }
+]
+
+
+export class TreeSelectDocs extends React.Component<{}, IState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: [],
+            value2: [],
+            options: itemArr,
+            options2: itemArr,
+            inputValue: ''
+        }
+
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(e, option) {
+
+        if(option.item) {
+            e.stopPropagation();
+            e.preventDefault();
+
+            this.setState({
+                options: option.item
+            })
+        }
+    }
+
+    render() {
+        return (
+            <section className='docs-page__container'>
+                {/* <h2 className='docs-page__h2'>Example 1</h2>
+
+                <Example1 />
+
+                <h2 className='docs-page__h2'>Example 2</h2>
+
+                <Example2 /> */}
+
+                <h2 className='docs-page__h2'>TreeSelect</h2>
+
+                <Markup.ReactMarkupCodePreview>{`
+                    <TreeSelect
+                        options={this.state.options2}
+                        getLabel={'label'}
+                        getMultilevelArray={'items'}
+                        selectBranchWithChildren={true}
+                        onChange={() => false}
+                    />
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <TreeSelect
+                                    getOptions={() => {
+                                        return itemArr
+                                    }}
+                                    selectBranchWithChildren={true}
+                                    onChange={(e) => console.log(e)}
+                                    allowMultiple
+                                    kind={'synchronous'}
+                                    fullWidth
+                                    info={'Info Message'}
+                                    error={'Error Message'}
+                                    required
+                                    label={'TreeSelect Label'}
+                                />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <TreeSelect
+                            getOptions={() => {
+                                return itemArr
+                            }}
+                            selectBranchWithChildren={true}
+                            onChange={() => false}
+                            allowMultiple
+                            kind={'synchronous'}
+                        />
+                    `}</Markup.ReactMarkupCode>
+
+                </Markup.ReactMarkup>
+
+                <p className='docs-page__paragraph'>Asynchronous mode in TreeSelect component.</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <TreeSelect
+                                    getOptions={() => {
+                                        return itemArr
+                                    }}
+                                    selectBranchWithChildren={true}
+                                    onChange={() => false}
+                                    allowMultiple
+                                    kind={'asynchronous'}
+                                    searchOptions={(term, callback) => {
+                                        let newArr = itemArr.filter((item) => {
+                                            if (item.value
+                                                .toLowerCase().includes(term.toLowerCase())) {
+                                                    return item;
+                                                }
+                                        })
+                                        return callback(newArr)
+                                    }}
+
+                                />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <TreeSelect
+                            getOptions={() => {
+                                return itemArr
+                            }}
+                            selectBranchWithChildren={true}
+                            onChange={() => false}
+                            allowMultiple
+                            kind={'asynchronous'}
+                            searchOptions={(term, callback) => {
+                                let newArr = itemArr.filter((item) => {
+                                    if (item.value
+                                        .toLowerCase().includes(term.toLowerCase())) {
+                                            return item;
+                                        }
+                                })
+                                return callback(newArr)
+                            }}
+                        />
+                    `}</Markup.ReactMarkupCode>
+
+                </Markup.ReactMarkup>
+
+                <p className='docs-page__paragraph'>TreeSelect with custom template.</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <TreeSelect
+                                    getOptions={() => this.state.options}
+                                    kind={'synchronous'}
+                                    onChange={() => false}
+                                    optionTemplate={(item: any) => {
+                                        return <div>Label: {item}</div>
+                                    }}
+                                    valueTemplate={(item: any) => {
+                                        return <span>Label: {item}</span>
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <TreeSelect
+                            getOptions={() => this.state.options}
+                            kind={'synchronous'}
+                            onChange={() => false}
+                            optionTemplate={(item: any) => {
+                                return <div>Label: {item}</div>
+                            }}
+                            valueTemplate={(item: any) => {
+                                return <span>Label: {item}</span>
+                            }}
+                        />
+                    `}</Markup.ReactMarkupCode>
+
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='value' isRequired={false} type='Array<T>' default='/' description='Value of the component.'/>
+                    <Prop name='getOptions' isRequired={false} type='Function' default='/' description='An array of selectitems to display as the available options.'/>
+                    <Prop name='kind' isRequired={true} type='synchronous | asynchronous' default='/' description='Type of TreeSelect component.'/>
+                    <Prop name='width' isRequired={false} type='medium | full-width (100%)' default='100%' description='Dropdown width.'/>
+                    <Prop name='selectBranchWithChildren' isRequired={false} type='boolean' default='false' description='When specified, select branch with children is enabled.'/>
+                    <Prop name='readonly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.'/>
+                    <Prop name='loading' isRequired={false} type='boolean' default='false' description='Adds a loading indicator in dropdown.'/>
+                    <Prop name='valueTemplate' isRequired={false} type='function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
+                    <Prop name='optionTemplate' isRequired={false} type='function' default='/' description='Function that gets the option and returns the content for it.'/>
+                    <Prop name='searchOptions' isRequired={false} type='function' default='/' description='The function will be called when a search is initiated from UI in asynchronous mode.'/>
+                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Callback to invoke when value changes.'/>
+                </PropsList>
+
+            </section>
+        )
+    }
+}

package/dist/react/tree-select/example-1.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import {TreeSelect} from 'superdesk-ui-framework/react';
+import {ITreeNode} from 'superdesk-ui-framework/react/components/TreeSelect';
+
+type IProps = {};
+
+interface IVocabularyItem {
+    qcode: string;
+    name: string;
+}
+
+interface IState {
+    value: Array<IVocabularyItem>;
+}
+
+const source = [
+    {
+        'name': 'Article (news)',
+        'qcode': 'Article',
+    },
+    {
+        'name': 'Sidebar',
+        'qcode': 'Sidebar',
+    },
+    {
+        'name': 'Factbox',
+        'qcode': 'Factbox',
+    },
+];
+
+function searchOptions(
+    term: string,
+    callback: (res: Array<ITreeNode<{name: string; qcode: string;}>>) => void,
+): void {
+    setTimeout(() => {
+        callback(
+            source
+                .filter((item) => item.name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
+                .map((item) => ({value: item})),
+        );
+    }, 1000);
+}
+
+
+export class MultiSelectDemo extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            value: [],
+        };
+    }
+
+    render() {
+        return (
+            <TreeSelect
+                kind="asynchronous"
+                searchOptions={searchOptions}
+                value={this.state.value}
+                onChange={(val) => {
+                    this.setState({value: val});
+                }}
+                getLabel={({name}) => name}
+                getId={({qcode}) => qcode}
+                selectBranchWithChildren={false}
+                optionTemplate={(item) => <span style={{color: 'blue'}}>{item.name}</span>}
+                allowMultiple={true}
+            />
+        );
+    }
+}

package/dist/react/tree-select/example-2.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import {TreeSelect} from '../../../../app-typescript/components/TreeSelect';
+
+interface IVocabularyItem {
+    name: string;
+    qcode: string;
+}
+
+const authorRoles: Array<IVocabularyItem> = [
+    {qcode: 'writer', name: 'Writer'},
+    {qcode: 'photographer', name: 'Photographer'},
+    {qcode: 'editor', name: 'Editor'},
+];
+
+type IProps = {};
+
+interface IState {
+    selectedRoles: Array<IVocabularyItem>;
+}
+
+/**
+ * Same as example-1, only without option/value templates.
+ * Issues: initial value is shown as empty, crashes when opening dropdown
+ */
+export class Example2 extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            selectedRoles: [
+                {qcode: 'writer', name: 'Writer'},
+            ],
+        };
+    }
+
+    render() {
+        const {selectedRoles} = this.state;
+
+        return (
+            <div>
+                <TreeSelect
+                    kind="synchronous"
+                    getOptions={() => authorRoles.map((value) => ({value}))}
+                    value={selectedRoles}
+                    onChange={(val) => {
+                        this.setState({selectedRoles: val.map((node) => node.value)});
+
+                        // accessing qcodes should not cause TypeScript errors
+                        val.forEach((node) => {
+                            console.log(node.qcode);
+                        })
+                    }}
+                    allowMultiple={true}
+                />
+            </div>
+        );
+    }
+}
+