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

package/examples/pages/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/examples/pages/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/examples/pages/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>
+        );
+    }
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.1-beta.3",
+  "version": "3.0.1-beta.4",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",
@@ -89,6 +89,7 @@
     "@types/node": "^14.10.2",
     "chart.js": "^2.9.3",
     "date-fns": "2.7.0",
+    "moment": "^2.29.3",
     "popper.js": "1.14.4",
     "primeicons": "2.0.0",
     "react-beautiful-dnd": "^13.0.0",

package/react/components/Badge.d.ts

@@ -5,6 +5,7 @@ interface IProps {
     color?: string;
     shape?: 'round' | 'square';
     children?: React.ReactNode;
+    hexColor?: string;
     'data-test-id'?: string;
 }
 export declare class Badge extends React.PureComponent<IProps> {

package/react/components/Badge.js

@@ -55,10 +55,10 @@ var Badge = /** @class */ (function (_super) {
         if (this.props.children) {
             return (React.createElement("div", { className: 'element-with-badge', "data-test-id": this.props['data-test-id'] },
                 this.props.children,
-                React.createElement("span", { className: classes, "data-test-id": "badge-content" }, this.props.text)));
+                React.createElement("span", { className: classes, style: { backgroundColor: this.props.hexColor }, "data-test-id": "badge-content" }, this.props.text)));
         }
         else {
-            return React.createElement("span", { className: classes, "data-test-id": this.props['data-test-id'] }, this.props.text);
+            return React.createElement("span", { className: classes, style: { backgroundColor: this.props.hexColor }, "data-test-id": this.props['data-test-id'] }, this.props.text);
         }
     };
     return Badge;

package/react/components/DatePicker.d.ts

@@ -31,6 +31,7 @@ interface IState {
 export declare class DatePicker extends React.PureComponent<IDatePicker, IState> {
     private instance;
     hidePopupOnScroll: () => void;
+    private htmlId;
     constructor(props: IDatePicker);
     componentDidMount(): void;
     componentWillUnmount(): void;

package/react/components/DatePicker.js

@@ -54,8 +54,9 @@ var addDays_1 = __importDefault(require("date-fns/addDays"));
 var format_1 = __importDefault(require("date-fns/format"));
 var calendar_1 = require("@superdesk/primereact/calendar");
 var lodash_1 = require("lodash");
-var classnames_1 = __importDefault(require("classnames"));
+// import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
+var Form_1 = require("./Form");
 var internalPrimereactClassnames = {
     overlayVisible: 'p-input-overlay-visible',
 };
@@ -83,6 +84,7 @@ var DatePicker = /** @class */ (function (_super) {
     function DatePicker(props) {
         var _a;
         var _this = _super.call(this, props) || this;
+        _this.htmlId = (0, react_id_generator_1.default)();
         _this.state = {
             value: parseToPrimeReactCalendarFormat(_this.props.value),
             valid: true,
@@ -124,20 +126,8 @@ var DatePicker = /** @class */ (function (_super) {
         if (this.props.locale != null) {
             locale = __assign(__assign({}, this.props.locale), { today: 'today', clear: 'clear' });
         }
-        var classes = (0, classnames_1.default)('sd-input', {
-            'sd-input--inline-label': this.props.inlineLabel,
-            'sd-input--required': this.props.required,
-            'sd-input--disabled': this.props.disabled,
-            'sd-input--full-width': this.props.fullWidth,
-            'sd-input--invalid': this.props.invalid || this.state.invalid,
-        });
-        var labelClasses = (0, classnames_1.default)('sd-input__label', {
-            'a11y-only': this.props.labelHidden,
-        });
-        var htmlId = (0, react_id_generator_1.default)();
-        return (React.createElement("div", { className: classes },
-            React.createElement("label", { className: labelClasses, htmlFor: htmlId, id: htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
-            React.createElement(calendar_1.Calendar, { ref: function (ref) {
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+            React.createElement(calendar_1.Calendar, { inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', ref: function (ref) {
                     _this.instance = ref;
                 }, value: this.state.value === null ? undefined : this.state.value, onChange: function (event) {
                     var result = parseFromPrimeReactCalendarFormat(event.value);
@@ -167,13 +157,7 @@ var DatePicker = /** @class */ (function (_super) {
                         // restoring internal state to current props value
                         _this.setState({ valid: true, value: parseToPrimeReactCalendarFormat(_this.props.value) });
                     }
-                } }),
-            React.createElement("div", { className: 'sd-input__message-box' },
-                this.props.info && !this.props.invalid && !this.state.invalid ?
-                    React.createElement("div", { className: 'sd-input__hint' }, this.props.info) : null,
-                this.props.invalid || this.state.invalid ?
-                    React.createElement("div", { className: 'sd-input__message' }, this.props.error)
-                    : null)));
+                } })));
     };
     return DatePicker;
 }(React.PureComponent));

package/react/components/DurationInput.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+interface IProps {
+    hours?: number;
+    minutes?: number;
+    seconds?: number;
+    disabled?: boolean;
+    inlineLabel?: boolean;
+    required?: boolean;
+    fullWidth?: boolean;
+    invalid?: boolean;
+    labelHidden?: boolean;
+    tabindex?: number;
+    label?: string;
+    info?: string;
+    error?: string;
+    onChange(e: number): void;
+}
+interface IState {
+    hours?: any;
+    minutes?: any;
+    seconds?: any;
+    invalid?: any;
+}
+export declare class DurationInput extends React.PureComponent<IProps, IState> {
+    hourRef: React.RefObject<HTMLInputElement>;
+    minuteRef: React.RefObject<HTMLInputElement>;
+    secondRef: React.RefObject<HTMLInputElement>;
+    constructor(props: IProps);
+    componentDidUpdate(_: any, prevState: IState): void;
+    handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void;
+    handleKeyValue(event: React.KeyboardEvent<HTMLInputElement>, state: 'hours' | 'minutes' | 'seconds'): void;
+    zerPad(value: number | string): string | number;
+    handleChange(event: React.ChangeEvent<HTMLInputElement>, state: 'hours' | 'minutes' | 'seconds'): void;
+    handleFocus(ref: HTMLInputElement | null, state: 'hours' | 'minutes' | 'seconds'): void;
+    handleFocusOnKeyUp(event: React.KeyboardEvent<HTMLInputElement>, ref: HTMLInputElement | null): void;
+    render(): JSX.Element;
+}
+export {};