superdesk-ui-framework 4.0.52 → 4.0.54

package/examples/pages/components/TableList.tsx

@@ -1,315 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../js/react';
-import {
-    BoxedList,
-    BoxedListItem,
-    BoxedListContentRow,
-    Prop,
-    PropsList,
-    Icon,
-    IconButton,
-    AvatarWrapper,
-    AvatarContentText,
-    ButtonGroup,
-    Button,
-    Heading,
-    Text,
-    Label,
-    Container,
-    IconLabel,
-    SelectGrid,
-    Dropdown,
-    Tooltip,
-} from '../../../app-typescript';
-import {TableList, TableListItem} from '../../../app-typescript/components/Lists/TableList';
-
-interface IState {
-    array: any;
-}
-
-interface IProps {
-    array: any;
-}
-
-export default class TableListDoc extends React.Component<IProps, IState> {
-    constructor(props: IState) {
-        super(props);
-        this.state = {
-            array: [
-                {
-                    start: (
-                        <>
-                            <Label style="translucent" text="aacc" />
-                            <Label style="translucent" type="primary" text="prlg" />
-                        </>
-                    ),
-                    center: <span>Item 1</span>,
-                    end: <IconLabel style="translucent" text="Label success" type="success" icon="time" />,
-                    action: (
-                        <Dropdown
-                            items={[
-                                {label: <Label style="translucent" type="primary" text="aacc" />, onSelect: () => 1},
-                                {label: <Label style="translucent" text="prlg" />, onSelect: () => 1},
-                                {label: <Label style="translucent" type="primary" text="prlg" />, onSelect: () => 1},
-                            ]}
-                        >
-                            <IconButton
-                                icon="dots-vertical"
-                                size="small"
-                                ariaValue="More actions"
-                                onClick={(e) => e.stopPropagation()}
-                            />
-                        </Dropdown>
-                    ),
-                    onClick: () => console.log('single'),
-                    onDoubleClick: () => console.log('double'),
-                    hexColor: '#ccff00',
-                },
-                {
-                    start: (
-                        <>
-                            <Label style="translucent" text="aacc" />
-                            <Label style="translucent" type="primary" text="prlg" />
-                        </>
-                    ),
-                    center: <span>Item 2</span>,
-                    end: <IconLabel style="translucent" text="Label success" type="success" icon="time" />,
-                    action: (
-                        <IconButton icon="dots-vertical" size="small" ariaValue="More actions" onClick={() => false} />
-                    ),
-                    onClick: () => console.log('single'),
-                    onDoubleClick: () => console.log('double'),
-                },
-                {
-                    start: (
-                        <>
-                            <Label style="translucent" text="aacc" />
-                            <Label style="translucent" type="primary" text="prlg" />
-                        </>
-                    ),
-                    center: <span>Item 3</span>,
-                    end: <IconLabel style="translucent" text="Label success" type="success" icon="time" />,
-                    action: (
-                        <IconButton icon="dots-vertical" size="small" ariaValue="More actions" onClick={() => false} />
-                    ),
-                    onClick: () => console.log('single'),
-                    onDoubleClick: () => console.log('double'),
-                    hexColor: '#ff9808',
-                },
-            ],
-        };
-    }
-
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">TableList</h2>
-
-                <Markup.ReactMarkupCodePreview>
-                    {`
-                    <TableList
-                    dragAndDrop
-                    addItem
-                    array={this.state.array}
-                    itemsDropdown={(index) => [
-                        { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => false },
-                        { label: <Label style='translucent' text='prlg' />, onSelect: () => false },
-                        { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => false },
-                    ]} />
-                `}
-                </Markup.ReactMarkupCodePreview>
-
-                <p className="docs-page__paragraph">
-                    Simple list without drag and drop functionality and without functionality for adding item in list:
-                </p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <TableList array={this.state.array} />
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        <TableList
-                        array={this.state.array}
-                        />
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <p className="docs-page__paragraph">With drag and drop functionality:</p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <TableList
-                            dragAndDrop
-                            append
-                            addItem
-                            array={this.state.array}
-                            itemsDropdown={(index) => [
-                                {
-                                    label: <Label style="translucent" type="primary" text="aacc" />,
-                                    onSelect: () => console.log(index),
-                                },
-                                {label: <Label style="translucent" text="prlg" />, onSelect: () => console.log(index)},
-                                {
-                                    label: <Label style="translucent" type="primary" text="prlg" />,
-                                    onSelect: () => console.log(index),
-                                },
-                            ]}
-                            onDrag={(start, end) => console.log(start, end)}
-                        />
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        <TableList
-                        dragAndDrop
-                        addItem
-                        array={this.state.array}
-                        itemsDropdown={(index) => [
-                                { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => console.log(index) },
-                                { label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },
-                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },
-                            ]
-                        }
-                        onDrag={(start, end) => console.log(start, end)}
-                        />
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Props</h3>
-                <p className="docs-page__paragraph">TableList</p>
-                <PropsList>
-                    <Prop name="array" isRequired={true} type="Array" default="false" description="Array of object." />
-                    <Prop
-                        name="addItem"
-                        isRequired={false}
-                        type="boolean"
-                        default="false"
-                        description="Functionality to add items to the list."
-                    />
-                    <Prop
-                        name="dragAndDrop"
-                        isRequired={false}
-                        type="boolean"
-                        default="false"
-                        description="Drag&Drop functionality."
-                    />
-                    <Prop
-                        name="className"
-                        isRequired={false}
-                        type="string"
-                        default="false"
-                        description="Add class on TableList container."
-                    />
-                    <Prop
-                        name="showDragHandle"
-                        isRequired={false}
-                        type="string"
-                        default="always"
-                        description='"always" | "onHover" | "none".'
-                    />
-                    <Prop
-                        name="readOnly"
-                        isRequired={false}
-                        type="boolean"
-                        default="false"
-                        description="When specified, component changes are not enabled."
-                    />
-                    <Prop
-                        name="append"
-                        isRequired={false}
-                        type="boolean"
-                        default="false"
-                        description="Set append to body on individual item while draging."
-                    />
-                    <Prop
-                        name="onDrag"
-                        isRequired={false}
-                        type="function"
-                        default="false"
-                        description="Returns start and end position of draggable item"
-                    />
-                    <Prop
-                        name="onAddItem"
-                        isRequired={false}
-                        type="function"
-                        default="false"
-                        description="Returns index of draggable item."
-                    />
-                    <Prop
-                        name="itemsDropdown"
-                        isRequired={false}
-                        type="function"
-                        default="false"
-                        description="Dropdown for adding items in the list. Returns index of draggable item."
-                    />
-                </PropsList>
-                <p className="docs-page__paragraph">array:</p>
-                <PropsList>
-                    <Prop
-                        name="start"
-                        isRequired={false}
-                        type="React.ReactNode"
-                        default="false"
-                        description="Column of individual items of list."
-                    />
-                    <Prop
-                        name="center"
-                        isRequired={false}
-                        type="React.ReactNode"
-                        default="false"
-                        description="Column of individual items of list."
-                    />
-                    <Prop
-                        name="end"
-                        isRequired={false}
-                        type="React.ReactNode"
-                        default="false"
-                        description="Column of individual items of list."
-                    />
-                    <Prop
-                        name="action"
-                        isRequired={false}
-                        type="React.ReactNode"
-                        default="false"
-                        description="Column of individual list items that is displayed on hover."
-                    />
-                    <Prop
-                        name="hexColor"
-                        isRequired={false}
-                        type="string"
-                        default="false"
-                        description="Color of left border for item status."
-                    />
-                    <Prop
-                        name="locked"
-                        isRequired={false}
-                        type="function"
-                        default="false"
-                        description="If is true, the individual item of list change state and change style (border)."
-                    />
-                    <Prop
-                        name="positionLocked"
-                        isRequired={false}
-                        type="function"
-                        default="false"
-                        description="Work in progress..."
-                    />
-                    <Prop
-                        name="onClick"
-                        isRequired={false}
-                        type="function"
-                        default="false"
-                        description="onClick functionality."
-                    />
-                    <Prop
-                        name="onDoubleClick"
-                        isRequired={false}
-                        type="function"
-                        default="false"
-                        description="onDoubleClick functionality."
-                    />
-                </PropsList>
-            </section>
-        );
-    }
-}

package/examples/pages/components/Tabs.tsx

@@ -1,276 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../js/react';
-
-import {Tab, TabList, Prop, PropsList} from '../../../app-typescript';
-import {Tabs, TabLabel, TabPanel, TabContent} from '../../../app-typescript';
-
-interface IState {
-    indexValue: number;
-}
-
-export default class TabsDoc extends React.Component<{}, IState> {
-    constructor(props) {
-        super(props);
-        this.state = {
-            indexValue: 0,
-        };
-        this.handleClick = this.handleClick.bind(this);
-    }
-    tabs: TabList;
-
-    componentDidMount() {
-        this.tabs.goTo('Content');
-    }
-
-    handleClick = (number: number) => {
-        this.setState({
-            indexValue: number,
-        });
-    };
-
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Tabs</h2>
-                <Markup.ReactMarkupCodePreview>
-                    {`
-                    <TabList>
-                        <Tab label='Content'>Content here.</Tab>
-                        <Tab label='Metadata'>Metadata here.</Tab>
-                        <Tab label='Duplicates'>Duplicates here.</Tab>
-                    </TabList>
-                `}
-                </Markup.ReactMarkupCodePreview>
-                <h3 className="docs-page__h3">Default tabs</h3>
-                <p className="docs-page__paragraph">
-                    To have a tab-like navigation add the <code>TabList</code> component and multiple <code>Tab</code>{' '}
-                    components inside of it.
-                </p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className="docs-page__content-row">
-                            <TabList
-                                ref={(tabs) => {
-                                    this.tabs = tabs;
-                                }}
-                            >
-                                <Tab label="Content">Content here.</Tab>
-                                <Tab label="Metadata">Metadata here.</Tab>
-                                <Tab label="Duplicates">Duplicates here.</Tab>
-                            </TabList>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        <TabList>
-                            <Tab label='Content'>Content here.</Tab>
-                            <Tab label='Metadata'>Metadata here.</Tab>
-                            <Tab label='Duplicates'>Duplicates here.</Tab>
-                        </TabList>
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Sizes</h3>
-                <p className="docs-page__paragraph">
-                    Tabs come in three different sizes – normal, small and large. Add prop <code>size='large'</code> to
-                    the <code>TabList</code> component to create large tabs or <code>size='small'</code> for small ones.
-                    The default (normal) size doesn't need the <code>size</code> prop to be specified.
-                </p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className="docs-page__content-row">
-                            <p className="docs-page__paragraph">// Normal tabs (default)</p>
-                            <TabList>
-                                <Tab label="Content">Content here.</Tab>
-                                <Tab label="Metadata">Metadata here.</Tab>
-                                <Tab label="Duplicates">Duplicates here.</Tab>
-                            </TabList>
-                        </div>
-                        <div className="docs-page__content-row">
-                            <p className="docs-page__paragraph">// Small tabs</p>
-                            <TabList size="small">
-                                <Tab label="Content">Content here.</Tab>
-                                <Tab label="Metadata">Metadata here.</Tab>
-                                <Tab label="Duplicates">Duplicates here.</Tab>
-                            </TabList>
-                        </div>
-                        <div className="docs-page__content-row">
-                            <p className="docs-page__paragraph">// Large tabs</p>
-                            <TabList size="large">
-                                <Tab label="Content">Content here.</Tab>
-                                <Tab label="Metadata">Metadata here.</Tab>
-                                <Tab label="Duplicates">Duplicates here.</Tab>
-                            </TabList>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        // Normal tabs (default)
-                        <TabList>
-                            <Tab label='Content'>Content here.</Tab>
-                            <Tab label='Metadata'>Metadata here.</Tab>
-                            <Tab label='Duplicates'>Duplicates here.</Tab>
-                        </TabList>
-                        // Large tabs
-                        <TabList size='large'>
-                            <Tab label='Content'>Content here.</Tab>
-                            <Tab label='Metadata'>Metadata here.</Tab>
-                            <Tab label='Duplicates'>Duplicates here.</Tab>
-                        </TabList>
-                        // Small tabs
-                        <TabList size='small'>
-                            <Tab label='Content'>Content here.</Tab>
-                            <Tab label='Metadata'>Metadata here.</Tab>
-                            <Tab label='Duplicates'>Duplicates here.</Tab>
-                        </TabList>
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">
-                    Tabs with two components ( <code>Tabs</code> and <code> TabContent</code> ){' '}
-                </h3>
-                <p className="docs-page__paragraph">
-                    If you want to use on one place list of tabs and on another place content of tabs, wrap all{' '}
-                    <code>TabLabel</code> with <code>Tabs</code> component and all <code>TabPanel</code> components with{' '}
-                    <code>TabContent.</code>
-                </p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className="docs-page__content-row">
-                            <Tabs onClick={this.handleClick}>
-                                <TabLabel label="Content" indexValue={0} />
-                                <TabLabel label="Metadata" indexValue={1} />
-                                <TabLabel label="Duplicates" indexValue={2} />
-                            </Tabs>
-                            <TabContent activePanel={this.state.indexValue}>
-                                <TabPanel indexValue={0}>Content here.</TabPanel>
-                                <TabPanel indexValue={1}>Metadata here.</TabPanel>
-                                <TabPanel indexValue={2}>Duplicates here.</TabPanel>
-                            </TabContent>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                    const [activeIndex, setActiveIndex] = React.useState(0);
-                    const handleClick = (index: number) => {
-                        setActiveIndex(index);
-                    }
-
-                       <Tabs onClick={handleClick}>
-                            <TabLabel label='Content' indexValue={0}/>
-                            <TabLabel label='Metadata' indexValue={1}/>
-                            <TabLabel label='Duplicates' indexValue={2}/>
-                        </Tabs>
-                        <TabContent activePanel={activeIndex}>
-                            <TabPanel indexValue={0}>
-                                Content here.
-                            </TabPanel>
-                            <TabPanel indexValue={1}>
-                                Metadata here.
-                            </TabPanel>
-                            <TabPanel indexValue={2}>
-                                Duplicates here.
-                            </TabPanel>
-                        </TabContent>
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Props</h3>
-                <PropsList>
-                    <Prop
-                        name="tablist size"
-                        isRequired={false}
-                        type="small | normal | large"
-                        default="normal"
-                        description="Specifies a small, normal or large button."
-                    />
-                    <Prop
-                        name="tablist theme"
-                        isRequired={false}
-                        type="light | dark"
-                        default="light"
-                        description="Styles tablist for diffrent background."
-                    />
-                    <Prop
-                        name="tab label"
-                        isRequired={false}
-                        type="string"
-                        default="/"
-                        description="Text value of Tab label"
-                    />
-                </PropsList>
-                <br />
-                <h4 className="docs-page__h4">Tabs Custom</h4>
-                <PropsList>
-                    <Prop
-                        name="tabs size"
-                        isRequired={false}
-                        type="small | normal | large"
-                        default="normal"
-                        description="Specifies a small, normal or large button."
-                    />
-                    <Prop
-                        name="tabs theme"
-                        isRequired={false}
-                        type="light | dark"
-                        default="light"
-                        description="Styles tablist for diffrent background."
-                    />
-                    <Prop
-                        name="tabs ariaLabel"
-                        isRequired={false}
-                        type="string"
-                        default="/"
-                        description="Text value of aria-label"
-                    />
-                    <Prop
-                        name="tabs onClick"
-                        isRequired={true}
-                        type="function"
-                        default="/"
-                        description="Use to return value of clicked label"
-                    />
-                    <Prop
-                        name="tablabel indexValue"
-                        isRequired={true}
-                        type="number"
-                        default="/"
-                        description="Index value of label"
-                    />
-                    <Prop
-                        name="tablabel label"
-                        isRequired={true}
-                        type="string"
-                        default="/"
-                        description="Text value of Tab label"
-                    />
-
-                    <Prop
-                        name="tabcontent theme"
-                        isRequired={false}
-                        type="light | dark"
-                        default="light"
-                        description="Styles tablist for diffrent background."
-                    />
-                    <Prop
-                        name="tabcontent activePanel"
-                        isRequired={true}
-                        type="number"
-                        default="/"
-                        description="Index value of active Tab"
-                    />
-                    <Prop
-                        name="tabpanel indexValue"
-                        isRequired={true}
-                        type="number"
-                        default="/"
-                        description="Index value of Tab Panel"
-                    />
-                </PropsList>
-            </section>
-        );
-    }
-}