superdesk-ui-framework 4.0.52 → 4.0.53

package/examples/pages/components/SelectGrid.tsx

@@ -1,162 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../js/react';
-import {SelectGrid, Alert, PropsList, Prop} from '../../../app-typescript';
-
-const SelectGridDocs = () => {
-    const letters = [
-        {value: 'A', label: 'A'},
-        {value: 'B', label: 'B'},
-        {value: 'C', label: 'C'},
-        {value: 'D', label: 'D'},
-        {value: 'E', label: 'E'},
-        {value: 'F', label: 'F'},
-        {value: 'G', label: 'G'},
-        {value: 'H', label: 'H'},
-        {value: 'K', label: 'K'},
-        {value: 'L', label: 'L'},
-        {value: 'M', label: 'M'},
-        {value: 'N', label: 'N'},
-        {value: 'O', label: 'O'},
-        {value: 'P', label: 'P'},
-        {value: 'R', label: 'R'},
-        {value: 'S', label: 'S'},
-        {value: 'T', label: 'T'},
-        {value: 'U', label: 'U'},
-    ];
-
-    const [selectedItem, setSelectedItem] = React.useState(letters[0]);
-
-    return (
-        <section className="docs-page__container">
-            <h2 className="docs-page__h2">Select Grid</h2>
-            <p className="docs-page__paragraph">
-                Universal select component with grid display of items. You can define your own trigger and item
-                template.
-            </p>
-            <p className="docs-page__paragraph">IconPicker is built on top of it.</p>
-            <Markup.ReactMarkupCodePreview>
-                {`
-                    <SelectGrid
-                        label="Label"
-                        filterPlaceholder="Search..."
-                        getItems={(searchString) => {
-                            return new Promise((resolve) => {
-                                resolve([{ value: 'value', label: 'Label' }]);
-                            });
-                        }}
-                        onChange={(value) => { }}
-                        itemTemplate={({ item }) => <div />}
-                        triggerTemplate={() => <button />}
-                    />
-                `}
-            </Markup.ReactMarkupCodePreview>
-            <Markup.ReactMarkup>
-                <Markup.ReactMarkupPreview>
-                    <SelectGrid
-                        label="Letter"
-                        filterPlaceholder="Search..."
-                        getItems={(searchString) => {
-                            return new Promise((resolve) => {
-                                if (searchString == null) {
-                                    resolve(letters);
-                                } else {
-                                    resolve(
-                                        letters.filter(({label}) =>
-                                            label.toLocaleLowerCase().includes(searchString.toLocaleLowerCase()),
-                                        ),
-                                    );
-                                }
-                            });
-                        }}
-                        onChange={(value) => {
-                            setSelectedItem(value);
-                        }}
-                        itemTemplate={({item}) => <div style={{fontSize: '20px'}}>{item.label}</div>}
-                        triggerTemplate={({onClick}) => (
-                            <button className="btn" onClick={onClick}>
-                                {selectedItem.label}
-                            </button>
-                        )}
-                    />
-                </Markup.ReactMarkupPreview>
-                <Markup.ReactMarkupCode>{`
-                    const letters = [
-                        { value: 'A', label: 'A' },
-                        { value: 'B', label: 'B' },
-                        { value: 'C', label: 'C' },
-                        ...
-                    ];
-
-                    const [selectedItem, setSelectedItem] = React.useState(letters[0]);
-                    ...
-                    <SelectGrid
-                        label="Letter"
-                        filterPlaceholder="Search..."
-                        getItems={(searchString) => {
-                            return new Promise((resolve) => {
-                                if (searchString == null) {
-                                    resolve(letters);
-                                } else {
-                                    resolve(letters.filter(({ label }) => label.toLocaleLowerCase().includes(searchString.toLocaleLowerCase())));
-                                }
-                            });
-                        }}
-                        onChange={(value) => {
-                            setSelectedItem(value);
-                        }}
-                        itemTemplate={({ item }) => <div style={{ fontSize: '20px' }}>{item.label}</div>}
-                        triggerTemplate={({ onClick }) => <button className="btn" onClick={onClick}>{selectedItem.label}</button>}
-
-                    />
-                `}</Markup.ReactMarkupCode>
-            </Markup.ReactMarkup>
-
-            <h3 className="docs-page__h3">Props</h3>
-            <PropsList>
-                <Prop name="label" isRequired={true} type="string" default="null" description="Select label" />
-                <Prop
-                    name="filterPlaceholder"
-                    isRequired={false}
-                    type="string"
-                    default="Search..."
-                    description="Filter placeholder"
-                />
-                <Prop
-                    name="getItems"
-                    isRequired={true}
-                    type="function"
-                    default="false"
-                    description="Callback function that should return promise which resolves with array of items"
-                />
-                <Prop
-                    name="onChange"
-                    isRequired={true}
-                    type="function"
-                    default="false"
-                    description="Callback on change event"
-                />
-                <Prop
-                    name="itemTemplate"
-                    isRequired={true}
-                    type="Component"
-                    default="null"
-                    description="item renderer"
-                />
-                <Prop
-                    name="triggerTemplate"
-                    isRequired={true}
-                    type="Component"
-                    default="null"
-                    description="trigger button renderer"
-                />
-            </PropsList>
-            <Alert style="hollow" size="normal" type="alert" restoreIcon="info">
-                1. triggerTemplate should include &#x3C;button /&#x3E; with onClick event. Otherwise keyboard controls
-                won't work. <br />
-                2. Item should be an object with at least label and value.
-            </Alert>
-        </section>
-    );
-};
-
-export default SelectGridDocs;

package/examples/pages/components/SelectWithTemplate.tsx

@@ -1,144 +0,0 @@
-import * as React from 'react';
-
-import * as Markup from '../../js/react';
-
-import {SelectWithTemplate} from '../../../app-typescript';
-
-interface IColor {
-    name: string;
-    colorCode: string;
-}
-
-interface IState {
-    value: IColor | null;
-}
-
-const colors: Array<IColor> = [
-    {name: 'Red', colorCode: '#FF0000'},
-    {name: 'Cyan', colorCode: '#00FFFF'},
-    {name: 'Blue', colorCode: '#0000FF'},
-    {name: 'DarkBlue', colorCode: '#0000A0'},
-    {name: 'Purple', colorCode: '#800080'},
-    {name: 'Yellow', colorCode: '#FFFF00'},
-    {name: 'Lime', colorCode: '#00FF00'},
-    {name: 'Magenta', colorCode: '#FF00FF'},
-    {name: 'Silver', colorCode: '#C0C0C0'},
-    {name: 'Gray', colorCode: '#808080'},
-    {name: 'Black', colorCode: '#000000'},
-    {name: 'Orange', colorCode: '#FFA500'},
-    {name: 'Brown', colorCode: '#A52A2A'},
-    {name: 'Maroon', colorCode: '#800000'},
-    {name: 'Green', colorCode: '#008000'},
-    {name: 'Olive', colorCode: '#808000'},
-];
-
-export class SelectWithTemplateDocs extends React.Component<{}, IState> {
-    constructor(props) {
-        super(props);
-        this.state = {
-            value: null,
-        };
-    }
-
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Select with template</h2>
-
-                <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">
-                                <SelectWithTemplate
-                                    value={this.state.value}
-                                    getItems={(searchString) => {
-                                        return new Promise((resolve) => {
-                                            if (searchString == null) {
-                                                resolve(colors);
-                                            } else {
-                                                resolve(
-                                                    colors.filter(({name}) =>
-                                                        name
-                                                            .toLocaleLowerCase()
-                                                            .includes(searchString.toLocaleLowerCase()),
-                                                    ),
-                                                );
-                                            }
-                                        });
-                                    }}
-                                    onChange={(value) => {
-                                        this.setState({value});
-                                    }}
-                                    itemTemplate={({option}) => {
-                                        if (option == null) {
-                                            return <div>Select a color</div>;
-                                        } else {
-                                            return (
-                                                <div style={{display: 'flex', alignItems: 'center'}}>
-                                                    <div
-                                                        style={{
-                                                            width: 10,
-                                                            height: 10,
-                                                            marginInlineEnd: 10,
-                                                            backgroundColor: option.colorCode,
-                                                        }}
-                                                    />
-                                                    <div>{option.name}</div>
-                                                </div>
-                                            );
-                                        }
-                                    }}
-                                    getLabel={(option) => option.name}
-                                    areEqual={(a, b) => a?.colorCode === b?.colorCode}
-                                    filterPlaceholder="Search..."
-                                    noResultsFoundMessage="No results found."
-                                    required
-                                    tabindex={1}
-                                    label={'This is Label'}
-                                    info={'This is info'}
-                                    error={'This is error'}
-                                />
-                            </div>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-
-                    <Markup.ReactMarkupCode>{`
-                        <SelectWithTemplate
-                            value={this.state.value}
-                            getItems={(searchString) => {
-                                return new Promise((resolve) => {
-                                    if (searchString == null) {
-                                        resolve(colors);
-                                    } else {
-                                        resolve(colors.filter(({name}) => name.toLocaleLowerCase().includes(searchString.toLocaleLowerCase())));
-                                    }
-                                });
-                            }}
-                            onChange={(value) => {
-                                this.setState({value});
-                            }}
-                            itemTemplate={({option}) => {
-                                if (option == null) {
-                                    return (
-                                        <div>Select a color</div>
-                                    );
-                                } else {
-                                    return (
-                                        <div style={{display: 'flex', alignItems: 'center'}}>
-                                            <div style={{width: 10, height: 10, marginRight: 10, backgroundColor: option.colorCode}} />
-                                            <div>{option.name}</div>
-                                        </div>
-                                    );
-                                }
-                            }}
-                            getLabel={(option) => option.name}
-                            areEqual={(a, b) => a.colorCode === b.colorCode}
-                            filterPlaceholder="Search..."
-                        />
-                    `}</Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-            </section>
-        );
-    }
-}

package/examples/pages/components/Selects.tsx

@@ -1,175 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../js/react';
-import {Select, Option, CheckGroup, Checkbox, PropsList, Prop} from '../../../app-typescript';
-
-interface IState {
-    inlineLabel: boolean;
-    required: boolean;
-    disabled: boolean;
-    value: string;
-}
-
-export default class InputsDoc extends React.Component<{}, IState> {
-    constructor(props) {
-        super(props);
-        this.state = {
-            inlineLabel: false,
-            required: false,
-            disabled: false,
-            value: 'Option 1',
-        };
-    }
-
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Select</h2>
-                <Markup.ReactMarkupCodePreview>
-                    {`
-                    <Select
-                        value={this.state.value}
-                        onChange={(value) => {
-                            this.setState({
-                                value: value,
-                            })
-                        }}
-                    >
-                        <Option>Option 1</Option>
-                        <Option>Option 2</Option>
-                    </Select>
-                `}
-                </Markup.ReactMarkupCodePreview>
-                <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">
-                                <CheckGroup>
-                                    <Checkbox
-                                        checked={this.state.required}
-                                        label={{text: 'Required input'}}
-                                        onChange={(value) => {
-                                            this.setState({required: value});
-                                        }}
-                                    />
-                                    <Checkbox
-                                        checked={this.state.disabled}
-                                        label={{text: 'Disabled input'}}
-                                        onChange={(value) => {
-                                            this.setState({disabled: value});
-                                        }}
-                                    />
-                                    <Checkbox
-                                        checked={this.state.inlineLabel}
-                                        label={{text: 'Label positioned inline'}}
-                                        onChange={(value) => {
-                                            this.setState({inlineLabel: value});
-                                        }}
-                                    />
-                                </CheckGroup>
-                            </div>
-
-                            <div className="form__row">
-                                <Select
-                                    value={this.state.value}
-                                    label="Select label"
-                                    info="This is some hint message"
-                                    required={this.state.required}
-                                    disabled={this.state.disabled}
-                                    inlineLabel={this.state.inlineLabel}
-                                    onChange={(value) => {
-                                        this.setState({
-                                            value: value,
-                                        });
-                                    }}
-                                >
-                                    <Option>Option 1</Option>
-                                    <Option>Option 2</Option>
-                                </Select>
-                            </div>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
-                        <Select
-                            value={this.state.value}
-                            label='Select label'
-                            info='This is some hint message'
-                            required={this.state.required}
-                            disabled={this.state.disabled}
-                            inlineLabel={this.state.inlineLabel}
-                            onChange={(value) => {
-                                this.setState({
-                                    value: value,
-                                })
-                            }}
-                        >
-                            <Option>Option 1</Option>
-                            <Option>Option 2</Option>
-                        </Select>
-                    `}</Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Props</h3>
-                <PropsList>
-                    <Prop
-                        name="value"
-                        isRequired={false}
-                        type="string"
-                        default="/"
-                        description="Value of the component."
-                    />
-                    <Prop
-                        name="onChange"
-                        isRequired={true}
-                        type="Function"
-                        default="/"
-                        description="Callback to invoke when value changes."
-                    />
-                    <Prop name="label" isRequired={false} type="string" default="/" description="Label of component." />
-                    <Prop
-                        name="inlineLabel"
-                        isRequired={false}
-                        type="boolean"
-                        default="false"
-                        description="Position labels as inline."
-                    />
-                    <Prop
-                        name="tabindex"
-                        isRequired={false}
-                        type="number"
-                        default="/"
-                        description="Indicates an element can be focused on, and determines how that focus is handled."
-                    />
-                    <Prop
-                        name="info"
-                        isRequired={false}
-                        type="string"
-                        default="/"
-                        description="Info message of component."
-                    />
-                    <Prop
-                        name="error"
-                        isRequired={false}
-                        type="string"
-                        default="/"
-                        description="Error message of component."
-                    />
-                    <Prop
-                        name="required"
-                        isRequired={false}
-                        type="boolean"
-                        default="false"
-                        description="Mark field as required."
-                    />
-                    <Prop
-                        name="disabled"
-                        isRequired={false}
-                        type="boolean"
-                        default="false"
-                        description="Mark field as disabled."
-                    />
-                </PropsList>
-            </section>
-        );
-    }
-}