superdesk-ui-framework 3.0.8 → 3.0.10

package/examples/pages/react/Selects.tsx

@@ -9,6 +9,8 @@ interface IState {
     required: boolean;
     disabled: boolean;
     invalid: boolean;
+    value: string;
+    value2: string;
 }
 
 export default class InputsDoc extends React.Component<{}, IState> {
@@ -18,7 +20,9 @@ export default class InputsDoc extends React.Component<{}, IState> {
             inlineLabel: false,
             required: true,
             disabled: false,
-            invalid: false
+            invalid: false,
+            value: '',
+            value2: '',
         }
     }
 
@@ -28,7 +32,14 @@ export default class InputsDoc extends React.Component<{}, IState> {
 
                 <h2 className='docs-page__h2'>Select</h2>
                 <Markup.ReactMarkupCodePreview>{`
-                    <Select value={value} required={true}>
+                    <Select
+                        value={this.state.value}
+                        onChange={(value) => {
+                            this.setState({
+                                value: value,
+                            })
+                        }}
+                    >
                         <Option>Option 1</Option>
                         <Option>Option 2</Option>
                     </Select>
@@ -48,8 +59,9 @@ export default class InputsDoc extends React.Component<{}, IState> {
                             </div>
 
                             <div className='form__row'>
-                                <Select label='Select label'
-                                    value='Option 2'
+                                <Select
+                                    value={this.state.value}
+                                    label='Select label'
                                     error='This is error message'
                                     info='This is some hint message'
                                     inlineLabel={this.state.inlineLabel}
@@ -57,7 +69,12 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     disabled={this.state.disabled}
                                     invalid={this.state.invalid}
                                     tabindex={0}
-                                    onChange={(value) => { console.log(value) }}>
+                                    onChange={(value) => {
+                                        this.setState({
+                                            value: value,
+                                        })
+                                    }}
+                                >
                                     <Option>Option 1</Option>
                                     <Option>Option 2</Option>
                                 </Select>
@@ -65,73 +82,45 @@ export default class InputsDoc extends React.Component<{}, IState> {
 
                             <p className="docs-page__paragraph">// Boxed with hidden label</p>
                             <div className='form__row'>
-                                <Select label='Select label'
-                                    value='Option 2'
-                                    boxedStyle
+                                <Select
+                                    value={this.state.value2}
+                                    label='Select label'
                                     labelHidden
                                     error='This is error message'
                                     info='This is some hint message'
-                                    inlineLabel={this.state.inlineLabel}
-                                    required={this.state.required}
-                                    disabled={this.state.disabled}
-                                    invalid={this.state.invalid}
                                     tabindex={0}
-                                    onChange={(value) => { console.log(value) }}>
-                                    <Option>Option 1</Option>
-                                    <Option>Option 2</Option>
+                                    onChange={(value) => {
+                                        this.setState({
+                                            value2: value,
+                                        })
+                                    }}
+                                >
+                                        <Option>Option 1</Option>
+                                        <Option>Option 2</Option>
                                 </Select>
-                            </div>
-                            <div className='form__row'>
-                                <Select label='Select label'
-                                    value='Option 2'
-                                    boxedStyle
-                                    labelHidden
-                                    size='large'
-                                    error='This is error message'
-                                    info='This is some hint message'
-                                    inlineLabel={this.state.inlineLabel}
-                                    required={this.state.required}
-                                    disabled={this.state.disabled}
-                                    invalid={this.state.invalid}
-                                    tabindex={0}
-                                    onChange={(value) => { console.log(value) }}>
-                                    <Option>Option 1</Option>
-                                    <Option>Option 2</Option>
-                                </Select>
-                            </div>
-                            <div className='form__row'>
-                                <Select label='Select label'
-                                    value='Option 2'
-                                    boxedStyle
-                                    labelHidden
-                                    size='x-large'
-                                    error='This is error message'
-                                    info='This is some hint message'
-                                    inlineLabel={this.state.inlineLabel}
-                                    required={this.state.required}
-                                    disabled={this.state.disabled}
-                                    invalid={this.state.invalid}
-                                    tabindex={0}
-                                    onChange={(value) => { console.log(value) }}>
-                                    <Option>Option 1</Option>
-                                    <Option>Option 2</Option>
-                                </Select>
-                            </div>
+                            </div>  
                         </div>
 
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <Select label='Select label'
-                            value='Option 2'
+                        <Select
+                            value={this.state.value}
+                            label='Select label'
                             error='This is error message'
                             info='This is some hint message'
-                            inlineLabel={false}
-                            required={true}
-                            disabled={false}
-                            invalid={false}
-                            onChange={(value) => {}}>
-                            <Option value="option-1">Option 1</option>
-                            <Option value="option-2">Option 2</option>
+                            inlineLabel={this.state.inlineLabel}
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {
+                                this.setState({
+                                    value: value,
+                                })
+                            }}
+                        >
+                            <Option>Option 1</Option>
+                            <Option>Option 2</Option>
                         </Select>
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -139,14 +128,15 @@ export default class InputsDoc extends React.Component<{}, IState> {
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
                     <Prop name='value' isRequired={false} type='string' default='/' description='Item value' />
-                    <Prop name='label' isRequired={false} type='string' default='/' description='Input label' />
-                    <Prop name='info' isRequired={false} type='string' default='/' description='Hint text' />
-                    <Prop name='error' isRequired={false} type='string' default='/' description='Error text' />
+                    <Prop name='label' isRequired={false} type='string' default='/' description='Label of component' />
+                    <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='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline' />
                     <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' />
                     <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid' />
                     <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='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
                 </PropsList>
             </section>
         )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.8",
+  "version": "3.0.10",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/Layouts/AuthoringInnerBody.js

@@ -46,7 +46,9 @@ var AuthoringInnerBody = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     AuthoringInnerBody.prototype.render = function () {
-        return (React.createElement("article", { className: (0, classnames_1.default)('sd-editor-content__authoring-body', { 'sd-editor-content__authoring-body-padding': this.props.noPadding === false }) }, this.props.children));
+        return (React.createElement("article", { className: (0, classnames_1.default)('sd-editor-content__authoring-body', {
+                'sd-editor-content__authoring-body-padding': !this.props.noPadding,
+            }) }, this.props.children));
     };
     return AuthoringInnerBody;
 }(React.PureComponent));

package/react/components/Select.d.ts

@@ -12,13 +12,8 @@ interface ISelect {
     tabindex?: number;
     fullWidth?: boolean;
     onChange(newValue: string): void;
-    boxedStyle?: boolean;
-    boxedLable?: boolean;
-    placeholder?: string;
-    size?: 'medium' | 'large' | 'x-large';
 }
 interface IState {
-    value: string;
     invalid: boolean;
 }
 declare class Select extends React.Component<ISelect, IState> {

package/react/components/Select.js

@@ -39,29 +39,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Option = exports.Select = void 0;
 var React = __importStar(require("react"));
-// import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
 var Form_1 = require("./Form");
 var Select = /** @class */ (function (_super) {
     __extends(Select, _super);
     function Select(props) {
-        var _a, _b;
+        var _a;
         var _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)();
         _this.state = {
-            value: (_a = _this.props.value) !== null && _a !== void 0 ? _a : '',
-            invalid: (_b = _this.props.invalid) !== null && _b !== void 0 ? _b : false,
+            invalid: (_a = _this.props.invalid) !== null && _a !== void 0 ? _a : false,
         };
         _this.handleChange = _this.handleChange.bind(_this);
         return _this;
     }
     Select.prototype.handleChange = function (event) {
-        this.setState({ value: event.target.value });
         this.props.onChange(event.target.value);
     };
     Select.prototype.render = function () {
         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("select", { className: 'sd-input__select', id: this.htmlId, value: this.state.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children)));
+            React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children)));
     };
     return Select;
 }(React.Component));

package/.vscode/settings.json

@@ -1,5 +0,0 @@
-{
-    "cSpell.words": [
-        "qcode"
-    ]
-}

package/app-typescript/dist/components/Alert.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    type?: 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
-    style?: 'filled' | 'hollow';
-    size?: 'normal' | 'small';
-    restoreIcon?: 'info' | 'help';
-}
-interface IState {
-    open: boolean;
-}
-export declare class Alert extends React.PureComponent<IProps, IState> {
-    constructor(props: IProps);
-    onToggle(): void;
-    render(): JSX.Element;
-}
-export {};

package/app-typescript/dist/components/Autocomplete.d.ts

@@ -1,48 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    items: Array<any>;
-    keyValue?: string;
-    minLength?: number;
-    value?: string | object;
-    label?: string;
-    placeholder?: string;
-    info?: string;
-    error?: string;
-    required?: boolean;
-    disabled?: boolean;
-    invalid?: boolean;
-    inlineLabel?: boolean;
-    isSearchField?: boolean;
-    listItemTemplate?(value: any): any;
-    search?(searhString: string, callback: (result: Array<any>) => void): {
-        cancel: () => void;
-    };
-    onChange(newValue: string): void;
-    onSelect?(suggestion: string): void;
-}
-interface IState {
-    selectedItem: any;
-    filteredItems: any;
-    invalid: boolean;
-    focused: boolean;
-}
-export declare class Autocomplete extends React.Component<IProps, IState> {
-    latestCall?: {
-        cancel: () => void;
-    };
-    constructor(props: IProps);
-    htmlId: string;
-    search(term: string): void;
-    searchItem(event: any): void;
-    handleChange(event: {
-        originalEvent: Event;
-        value: any;
-    }): void;
-    handleSelect(event: {
-        originalEvent: Event;
-        value: any;
-    }): void;
-    handleInputClear(): void;
-    render(): JSX.Element;
-}
-export {};

package/app-typescript/dist/components/Avatar.d.ts

@@ -1,33 +0,0 @@
-import * as React from 'react';
-interface IBase {
-    tooltipText?: string;
-}
-interface IImageAvatar extends IBase {
-    imageUrl?: string;
-}
-interface ITextAvatar extends IBase {
-    text: string;
-}
-export declare class AvatarContentText extends React.PureComponent<ITextAvatar> {
-    render(): JSX.Element;
-}
-export declare class AvatarContentImage extends React.PureComponent<IImageAvatar> {
-    render(): JSX.Element;
-}
-interface IPropsAvatarWrapper {
-    size?: 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
-    statusIndicator?: {
-        status: 'online' | 'offline';
-        tooltipText?: string;
-    };
-    administratorIndicator?: {
-        enabled: boolean;
-        tooltipText?: string;
-    };
-    children: React.ReactNode;
-    'data-test-id'?: string;
-}
-export declare class AvatarWrapper extends React.PureComponent<IPropsAvatarWrapper> {
-    render(): JSX.Element;
-}
-export {};

package/app-typescript/dist/components/Badge.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    text?: string;
-    type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'light';
-    color?: string;
-    shape?: 'round' | 'square';
-    children?: React.ReactNode;
-    'data-test-id'?: string;
-}
-export declare class Badge extends React.PureComponent<IProps> {
-    render(): JSX.Element;
-}
-export {};

package/app-typescript/dist/components/Button.d.ts

@@ -1,23 +0,0 @@
-import * as React from 'react';
-interface IButtonBase {
-    id?: string;
-    theme?: 'light' | 'dark';
-    type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
-    size?: 'small' | 'normal' | 'large';
-    children?: never;
-    icon?: string;
-    disabled?: boolean;
-    iconOnly?: boolean;
-    onClick(): void;
-    'data-test-id'?: string;
-}
-interface IPropsButton extends IButtonBase {
-    text: string;
-    expand?: boolean;
-    style?: 'filled' | 'hollow' | 'text-only';
-    shape?: 'square' | 'round';
-}
-export declare class Button extends React.PureComponent<IPropsButton> {
-    render(): JSX.Element;
-}
-export {};

package/app-typescript/dist/components/ButtonGroup.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    orientation?: 'horizontal' | 'vertical';
-    spaces?: 'comfort' | 'compact';
-    align?: 'left' | 'right' | 'center' | 'inline';
-    padded?: boolean;
-    children: React.ReactNode;
-}
-export declare class ButtonGroup extends React.PureComponent<IProps> {
-    render(): JSX.Element;
-}
-export {};

package/app-typescript/dist/components/CheckButtonGroup.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    orientation?: 'horizontal' | 'vertical';
-    grid?: boolean;
-    align?: 'left' | 'right' | 'center' | 'inline';
-    padded?: boolean;
-}
-export declare class CheckButtonGroup extends React.PureComponent<IProps> {
-    render(): JSX.Element;
-}
-export {};

package/app-typescript/dist/components/CheckGroup.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    orientation?: 'horizontal' | 'vertical';
-    children: React.ReactNode;
-}
-export declare class CheckGroup extends React.PureComponent<IProps> {
-    render(): JSX.Element;
-}
-export {};

package/app-typescript/dist/components/Checkbox.d.ts

@@ -1,19 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    label: {
-        text: string;
-        side?: 'left' | 'right';
-        hidden?: boolean;
-    };
-    checked?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    onChange(nextValue: boolean): void;
-}
-export declare class Checkbox extends React.Component<IProps> {
-    htmlId: string;
-    constructor(props: IProps);
-    handleChange(event: React.ChangeEvent<HTMLInputElement>): void;
-    render(): JSX.Element;
-}
-export {};

package/app-typescript/dist/components/CheckboxButton.d.ts

@@ -1,19 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    label: {
-        text: string;
-        icon?: string;
-        hidden?: boolean;
-    };
-    checked?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    onChange(nextValue: boolean): void;
-}
-export declare class CheckboxButton extends React.Component<IProps> {
-    htmlId: string;
-    constructor(props: IProps);
-    handleChange(event: React.ChangeEvent<HTMLInputElement>): void;
-    render(): JSX.Element;
-}
-export {};

package/app-typescript/dist/components/DatePicker.d.ts

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { LocaleSettings, CalendarProps } from '@superdesk/primereact/calendar';
-export declare type DatePickerLocaleSettings = Omit<LocaleSettings, 'today' | 'clear'>;
-interface IDatePickerBase {
-    disabled?: boolean;
-    dateFormat: string;
-    shortcuts?: Array<{
-        days: number;
-        label: string;
-    }>;
-    locale?: DatePickerLocaleSettings;
-}
-interface IDatePicker extends IDatePickerBase {
-    value: Date | null;
-    onChange(valueNext: Date | null): void;
-}
-interface IState {
-    value: CalendarProps['value'];
-    valid: boolean;
-}
-export declare class DatePicker extends React.PureComponent<IDatePicker, IState> {
-    private instance;
-    hidePopupOnScroll: () => void;
-    constructor(props: IDatePicker);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    componentDidUpdate(prevProps: IDatePicker): void;
-    render(): JSX.Element;
-}
-interface IDatePickerISO extends IDatePickerBase {
-    value: string;
-    onChange(value: string): void;
-}
-export declare class DatePickerISO extends React.PureComponent<IDatePickerISO> {
-    render(): JSX.Element;
-}
-export {};

package/app-typescript/dist/components/Divider.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    size?: 'mini' | 'small' | 'medium' | 'large';
-    border?: boolean;
-}
-export declare class Divider extends React.PureComponent<IProps> {
-    render(): JSX.Element;
-}
-export {};

package/app-typescript/dist/components/DonutChart.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { ChartData, ChartOptions } from 'chart.js';
-interface IProps {
-    data: ChartData;
-    options: ChartOptions;
-    width: string;
-    height: string;
-}
-export declare class DonutChart extends React.Component<IProps, {}> {
-    render(): JSX.Element;
-}
-export {};

package/app-typescript/dist/components/Dropdown.d.ts

@@ -1,28 +0,0 @@
-import * as React from 'react';
-export interface IMenuItem {
-    label: string;
-    icon?: string;
-    onSelect(): void;
-}
-export interface ISubmenu {
-    type: 'submenu';
-    label: string;
-    icon?: string;
-    items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
-}
-export interface IMenuGroup {
-    type: 'group';
-    label?: string;
-    items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
-}
-interface IMenu {
-    label?: string;
-    align?: 'left' | 'right';
-    items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
-    header?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
-    footer?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
-    append?: boolean;
-    children: React.ReactNode;
-}
-export declare const Dropdown: ({ items, header, footer, children, append, align, }: IMenu) => JSX.Element;
-export {};

package/app-typescript/dist/components/DropdownFirst.d.ts

@@ -1,42 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    name: string;
-    align?: 'left' | 'right';
-    side?: 'left' | 'right';
-    icon?: string;
-    navDropdown?: boolean;
-    level?: boolean;
-    headerFooter?: boolean;
-    children: React.ReactNode;
-}
-interface IPropsItem {
-    text: string;
-    noLink?: boolean;
-    icon?: string;
-    onSelect(): void;
-    children?: never;
-}
-interface IPropsLabel {
-    text: string;
-    children?: never;
-}
-interface IPropsMenu {
-    title: string;
-    children: React.ReactNode;
-}
-export declare const DropdownFirst: {
-    ({ name, align, side, level, icon, headerFooter, navDropdown, children, }: IProps): JSX.Element;
-    Item: ({ text, icon, noLink, onSelect, }: IPropsItem) => JSX.Element;
-    Divider: ({}: {}) => JSX.Element;
-    Label: ({ text, }: IPropsLabel) => JSX.Element;
-    Header: ({ title, children, }: IPropsMenu) => JSX.Element;
-    Body: ({ title, children, }: IPropsMenu) => JSX.Element;
-    Footer: ({ title, children, }: IPropsMenu) => JSX.Element;
-};
-export declare const DropdownItem: ({ text, icon, noLink, onSelect, }: IPropsItem) => JSX.Element;
-export declare const DropdownDivider: ({}: {}) => JSX.Element;
-export declare const DropdownLabel: ({ text, }: IPropsLabel) => JSX.Element;
-export declare const DropdownHeader: ({ title, children, }: IPropsMenu) => JSX.Element;
-export declare const DropdownBody: ({ title, children, }: IPropsMenu) => JSX.Element;
-export declare const DropdownFooter: ({ title, children, }: IPropsMenu) => JSX.Element;
-export {};

package/app-typescript/dist/components/EmptyState.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    illustration?: string;
-    size?: 'small' | 'large';
-    title: string;
-    description?: string;
-}
-export declare class EmptyState extends React.PureComponent<IProps> {
-    render(): JSX.Element;
-}
-export {};

package/app-typescript/dist/components/FormLabel.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    text: string;
-    style?: 'normal' | 'light';
-}
-export declare class FormLabel extends React.PureComponent<IProps> {
-    render(): JSX.Element;
-}
-export {};

package/app-typescript/dist/components/Genie.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-interface IProps<T> {
-    val: T;
-}
-export declare class Genie<T extends string> extends React.PureComponent<IProps<T>> {
-    render(): JSX.Element;
-}
-export {};
-
-
-interface Id {
-    prop<T>: Genie<T>;
-}