superdesk-ui-framework 4.0.52 → 4.0.53

package/examples/pages/components/WithSizeObserver.tsx

@@ -1,44 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../js/react';
-import {WithSizeObserver} from '../../../app-typescript/components/WithSizeObserver';
-
-export class WithSizeObserverDocs extends React.Component {
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">WithSizeObserver</h2>
-
-                <p>Higher order component for dynamically retrieving dimensions of any element.</p>
-
-                <p>It uses `ResizeObserver` to listen for updates and re-render children efficiently.</p>
-
-                <p className="docs-page__paragraph"></p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className="docs-page__content-row docs-page__content-row--no-margin">
-                            <div className="form__row">
-                                <div style={{resize: 'both', overflow: 'auto', height: 40, outline: '1px solid red'}}>
-                                    <WithSizeObserver>
-                                        {({width, height}) => (
-                                            <div>
-                                                width: {width}px ; height: {height}px
-                                            </div>
-                                        )}
-                                    </WithSizeObserver>
-                                </div>
-                            </div>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-
-                    <Markup.ReactMarkupCode>{`
-                        <WithSizeObserver>
-                            {({width, height}) => (
-                                <div>width: {width}px ; height: {height}px</div>
-                            )}
-                        </WithSizeObserver>
-                    `}</Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-            </section>
-        );
-    }
-}

package/examples/pages/components/tree-select/TreeSelect.tsx

@@ -1,322 +0,0 @@
-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/examples/pages/components/tree-select/example-1.tsx

@@ -1,67 +0,0 @@
-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/examples/pages/components/tree-select/example-2.tsx

@@ -1,56 +0,0 @@
-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>
-        );
-    }
-}

package/examples/pages/components/utilities/BorderRadiusUtilities.tsx

@@ -1,71 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../../js/react';
-
-class BorderRadiusUtilitiesDoc extends React.Component {
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Border Radius</h2>
-                <p className="docs-page__paragraph">Utility classes for controlling the border radius of an element.</p>
-                <div className="docs-page__container-block--position">
-                    <div className="utilities-table__container">
-                        <table className="table utilities-table">
-                            <thead>
-                                <tr>
-                                    <th>Class</th>
-                                    <th>Properties</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>radius-xs</td>
-                                    <td>
-                                        {'border-radius: var(--b-radius--x-small);'}{' '}
-                                        <span className="doc-text--highlight">/* 2px */</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>radius-sm</td>
-                                    <td>
-                                        {'border-radius: var(--b-radius--small);'}{' '}
-                                        <span className="doc-text--highlight">/* 3px */</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>radius-md</td>
-                                    <td>
-                                        {'border-radius: var(--b-radius--medium);'}{' '}
-                                        <span className="doc-text--highlight">/* 4px */</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>radius-lg</td>
-                                    <td>
-                                        {'border-radius: var(--b-radius--large);'}{' '}
-                                        <span className="doc-text--highlight">/* 6px */</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>radius-xl</td>
-                                    <td>
-                                        {'border-radius: var(--b-radius--x-large);'}{' '}
-                                        <span className="doc-text--highlight">/* 8px */</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>radius-full</td>
-                                    <td>
-                                        {'border-radius: var(--b-radius--full);'}{' '}
-                                        <span className="doc-text--highlight">/* 9999px */</span>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </section>
-        );
-    }
-}
-
-export {BorderRadiusUtilitiesDoc};