superdesk-ui-framework 3.0.1-beta.26 → 3.0.1-beta.27

package/react/components/TreeSelect.js

@@ -55,7 +55,6 @@ var debounce_1 = __importDefault(require("lodash/debounce"));
 var Form_1 = require("./Form");
 var core_1 = require("@popperjs/core");
 var lodash_1 = require("lodash");
-var Label_1 = require("./Label");
 var TreeSelect = /** @class */ (function (_super) {
     __extends(TreeSelect, _super);
     function TreeSelect(props) {
@@ -323,15 +322,10 @@ var TreeSelect = /** @class */ (function (_super) {
                             event.stopPropagation();
                             _this.handleTree(event, option);
                         } },
-                        _this.props.getBorderColor
-                            && React.createElement("div", { className: "item-border", style: { backgroundColor: _this.props.getBorderColor(option.value) } }),
-                        React.createElement("span", { style: _this.props.getBackgroundColor
-                                ? { backgroundColor: _this.props.getBackgroundColor(option.value),
-                                    color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)) }
-                                : undefined, className: 'suggestion-item--bgcolor'
-                                + (selectedItem ? ' suggestion-item--disabled' : '') }, _this.props.optionTemplate
+                        _this.props.optionTemplate
                             ? _this.props.optionTemplate(option.value)
-                            : _this.props.getLabel(option.value)),
+                            : React.createElement("span", { className: selectedItem
+                                    ? 'suggestion-item--disabled' : undefined }, _this.props.getLabel(option.value)),
                         option.children && React.createElement("span", { className: "suggestion-item__icon" },
                             React.createElement(Icon_1.Icon, { name: "chevron-right-thin" })));
                 });
@@ -396,29 +390,20 @@ var TreeSelect = /** @class */ (function (_super) {
                             || React.createElement("button", { ref: this.openDropdownRef, className: "tags-input__add-button", onClick: function () { return _this.setState({ openDropdown: !_this.state.openDropdown }); } },
                                 React.createElement("i", { className: "icon-plus-large" })),
                         React.createElement("ul", { className: "tags-input__tag-list" }, this.state.value.map(function (item, i) {
-                            var Wrapper = function (_a) {
-                                var backgroundColor = _a.backgroundColor, children = _a.children;
-                                return (React.createElement("li", { className: "tags-input__tag-item tags-input__tag-item--multi-select"
-                                        + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return !_this.props.readOnly && _this.removeClick(i); }, style: _this.props.valueTemplate
-                                        ? { backgroundColor: backgroundColor }
-                                        : _this.props.getBackgroundColor
-                                            && { backgroundColor: _this.props.getBackgroundColor(item) } },
-                                    React.createElement("span", { style: { color: backgroundColor
-                                                ? (0, Label_1.getTextColor)(backgroundColor)
-                                                : _this.props.getBackgroundColor
-                                                    && (0, Label_1.getTextColor)(_this.props.getBackgroundColor(item)) }, className: "tags-input__helper-box" },
-                                        children,
-                                        !_this.props.readOnly && React.createElement("span", { className: "tags-input__remove-button" },
-                                            React.createElement(Icon_1.Icon, { name: "close-small" })))));
-                            };
-                            return (React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
-                                ? _this.props.valueTemplate(item, Wrapper)
-                                : React.createElement(Wrapper, null,
-                                    React.createElement("span", null, _this.props.getLabel(item)))));
+                            return React.createElement(React.Fragment, { key: i },
+                                React.createElement("li", { className: "tags-input__tag-item tags-input__tag-item--multi-select"
+                                        + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return _this.props.readOnly || _this.removeClick(i); } },
+                                    React.createElement("span", { className: "tags-input__helper-box" },
+                                        _this.props.valueTemplate
+                                            ? _this.props.valueTemplate(item)
+                                            : React.createElement("span", null, _this.props.getLabel(item)),
+                                        _this.props.readOnly
+                                            || React.createElement("span", { className: "tags-input__remove-button" },
+                                                React.createElement(Icon_1.Icon, { name: "close-small" })))));
                         })),
                         this.state.value.length > 0
                             ? this.props.readOnly
-                                || React.createElement("button", { className: "tags-input__remove-value", style: { position: 'relative', bottom: '2px' }, onClick: function () { return _this.setState({ value: [] }); } },
+                                || React.createElement("button", { className: "tags-input__remove-value", onClick: function () { return _this.setState({ value: [] }); } },
                                     React.createElement(Icon_1.Icon, { name: 'remove-sign' })) : null)
                     : React.createElement("div", { className: "tags-input__tags" },
                         this.props.readOnly
@@ -427,24 +412,16 @@ var TreeSelect = /** @class */ (function (_super) {
                                 + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '') },
                             React.createElement("span", { className: "tags-input__placeholder" }, this.props.placeholder)),
                         this.state.value.map(function (item, i) {
-                            var Wrapper = function (_a) {
-                                var backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children;
-                                return (React.createElement("span", { className: 'tags-input__single-item'
+                            return React.createElement(React.Fragment, { key: i },
+                                React.createElement("span", { className: 'tags-input__single-item'
                                         + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return _this.props.readOnly || _this.removeClick(i); } },
-                                    _this.props.getBorderColor
-                                        && React.createElement("div", { className: "item-border item-border-selected", style: borderColor
-                                                ? { backgroundColor: borderColor }
-                                                : { backgroundColor: _this.props.getBorderColor(item) } }),
-                                    React.createElement("span", { style: { color: backgroundColor && (0, Label_1.getTextColor)(backgroundColor) }, className: "tags-input__helper-box" },
-                                        React.createElement("span", { className: backgroundColor && "tags-input__tag-item", style: { backgroundColor: backgroundColor, margin: 0 } }, children),
+                                    React.createElement("span", { className: "tags-input__helper-box" },
+                                        _this.props.valueTemplate
+                                            ? _this.props.valueTemplate(item)
+                                            : React.createElement("span", null, _this.props.getLabel(item)),
                                         _this.props.readOnly
                                             || React.createElement("span", { className: "tags-input__remove-button" },
                                                 React.createElement(Icon_1.Icon, { name: 'remove-sign' })))));
-                            };
-                            return React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
-                                ? _this.props.valueTemplate(item, Wrapper)
-                                : React.createElement(Wrapper, null,
-                                    React.createElement("span", null, _this.props.getLabel(item))));
                         })),
                 this.state.openDropdown
                     && React.createElement("div", { className: "autocomplete autocomplete--multi-select" + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), ref: this.dropdownRef },
@@ -502,14 +479,10 @@ var TreeSelect = /** @class */ (function (_super) {
                                                 event.stopPropagation();
                                                 _this.handleTree(event, option);
                                             } },
-                                            (_this.props.getBorderColor && !_this.props.allowMultiple) && React.createElement("div", { className: "item-border", style: { backgroundColor: _this.props.getBorderColor(option.value) } }),
-                                            React.createElement("span", { style: (_this.props.getBackgroundColor && option.value)
-                                                    ? { backgroundColor: _this.props.getBackgroundColor(option.value),
-                                                        color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)) }
-                                                    : undefined, className: 'suggestion-item--bgcolor'
-                                                    + (selectedItem ? ' suggestion-item--disabled' : '') }, _this.props.optionTemplate
+                                            _this.props.optionTemplate
                                                 ? _this.props.optionTemplate(option.value)
-                                                : _this.props.getLabel(option.value)),
+                                                : React.createElement("span", { className: selectedItem
+                                                        ? 'suggestion-item--disabled' : undefined }, _this.props.getLabel(option.value)),
                                             option.children && React.createElement("span", { className: "suggestion-item__icon" },
                                                 React.createElement(Icon_1.Icon, { name: "chevron-right-thin" }))));
                                     })) : null

package/yarn-error.log

@@ -0,0 +1,111 @@
+Arguments: 
+  /usr/local/bin/node /usr/local/bin/yarn install
+
+PATH: 
+  /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
+
+Yarn version: 
+  1.21.1
+
+Node version: 
+  12.14.1
+
+Platform: 
+  linux x64
+
+Trace: 
+  Error: getaddrinfo EAI_AGAIN registry.yarnpkg.com
+      at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:60:26)
+
+npm manifest: 
+  {
+    "name": "superdesk-ui-framework",
+    "version": "2.1.11",
+    "license": "AGPL-3.0",
+    "repository": {
+      "type": "git",
+      "url": "https://github.com/superdesk/superdesk-ui-framework.git"
+    },
+    "main": "dist/superdesk-ui.bundle.js",
+    "types": "app-typescript/dist/index.d.ts",
+    "contributors": [
+      "Nemanja Pavlovic",
+      "Vladimir Stefanovic",
+      "Darko Tomic",
+      "Aleksandar Jelicic",
+      "Tomas Kikutis"
+    ],
+    "scripts": {
+      "start": "webpack-dev-server --config tasks/webpack.dev.js",
+      "server": "webpack --watch",
+      "build": "webpack && npm run lint && tsc",
+      "lint": "eslint app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
+      "prepublishOnly": "npm run build",
+      "prepublish": "patch-package"
+    },
+    "devDependencies": {
+      "@types/classnames": "^2.2.9",
+      "@types/lodash": "4.14.149",
+      "@types/react": "16.8.23",
+      "@types/react-dom": "16.8.0",
+      "@types/react-router-dom": "^5.1.2",
+      "angular": "^1.7.9",
+      "angular-animate": "^1.7.9",
+      "angular-route": "^1.7.9",
+      "babel-core": "^6.26.0",
+      "babel-loader": "^7.1.2",
+      "babel-plugin-transform-object-rest-spread": "^6.26.0",
+      "babel-preset-es2015": "^6.24.1",
+      "babel-preset-react": "^6.24.1",
+      "classnames": "^2.2.5",
+      "clean-webpack-plugin": "^1.0.0",
+      "code-prettify": "^0.1.0",
+      "copy-webpack-plugin": "^4.6.0",
+      "css-loader": "^2.1.1",
+      "eslint": "^4.6.1",
+      "eslint-loader": "^1.9.0",
+      "eslint-plugin-angular": "^3.1.1",
+      "eslint-plugin-react": "^7.3.0",
+      "extract-text-webpack-plugin": "^3.0.2",
+      "file-loader": "^0.11.2",
+      "html-loader": "^0.5.1",
+      "html-webpack-plugin": "^2.30.1",
+      "jquery": "^3.1.1",
+      "jquery-ui": "^1.12.1",
+      "lodash": "4.17.15",
+      "node-sass": "^4.5.3",
+      "patch-package": "6.2.0",
+      "prismjs": "^1.17.1",
+      "prop-types": "^15.6.0",
+      "react": "16.8.6",
+      "react-bootstrap": "^0.31.2",
+      "react-dom": "16.8.6",
+      "react-redux": "^5.0.6",
+      "react-router-dom": "^5.1.2",
+      "redux": "^3.7.2",
+      "redux-form": "^7.0.4",
+      "sass-loader": "^6.0.6",
+      "style-loader": "^0.18.2",
+      "superdesk-code-style": "^1.1.2",
+      "ts-loader": "^6.0.2",
+      "tslint": "^5.18.0",
+      "typescript": "^3.5.1",
+      "url-loader": "^1.1.2",
+      "webpack": "^3.5.5",
+      "webpack-cli": "3.3.10",
+      "webpack-dev-server": "2.11.1",
+      "webpack-merge": "^4.2.1"
+    },
+    "dependencies": {
+      "date-fns": "2.7.0",
+      "popper.js": "1.14.4",
+      "primeicons": "2.0.0",
+      "primereact": "3.3.2"
+    }
+  }
+
+yarn manifest: 
+  No manifest
+
+Lockfile: 
+  No lockfile

package/dist/playgrounds/react-playgrounds/Multiedit.tsx

@@ -1,321 +0,0 @@
-import * as React from 'react';
-import * as Components from './components/Index';
-import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Divider, Tooltip, Select, Option, Switch, Icon, AvatarWrapper, AvatarContentImage, AvatarContentText, Text, EmptyState, Alert, SlidingToolbar, TabLabel, Tabs, Heading, Modal } from '../../../../app-typescript/index';
-import * as Layout from '../../../../app-typescript/components/Layouts';
-import * as Form from '../../../../app-typescript/components/Form';
-import * as Nav from '../../../../app-typescript/components/Navigation';
-import { BoxedList, BoxedListItem, BoxedListContentRow } from '../../../../app-typescript/components/Lists';
-import { Spacer } from '../../../../app-typescript/components/Spacer';
-
-interface IProps {
-    children?: React.ReactNode;
-}
-
-interface IState {
-    theme: 'dark' | 'light' | string;
-    itemType: string;
-    dropDownState: string;
-    itemSelected1: boolean;
-    itemSelected2: boolean;
-    itemSelected3: boolean;
-    value1: boolean;
-    value2: boolean;
-    value3: boolean;
-    leftPanelOpen: boolean;
-    rightPanelOpen: boolean;
-    rightPanelPinned: boolean;
-    sideOverlayOpen: boolean;
-    sideBarOpen: boolean;
-    arr: any;
-}
-
-export class Multiedit extends React.Component<IProps, IState> {
-    constructor(props: IProps) {
-        super(props);
-        this.state = {
-            theme: 'light',
-            itemType: 'itemtype01',
-            dropDownState: '',
-            itemSelected1: false,
-            itemSelected2: false,
-            itemSelected3: false,
-            value1: false,
-            value2: false,
-            value3: false,
-            leftPanelOpen: false,
-            rightPanelOpen: false,
-            rightPanelPinned: false,
-            sideOverlayOpen: false,
-            sideBarOpen: false,
-            arr: [<Editor />, <Editor />]
-            
-        }
-        this.handleTheme = this.handleTheme.bind(this);
-    }
-
-    handleTheme(newTheme: string) {
-        this.setState({
-            theme: newTheme
-        })
-    }
-
-    changeStatus(item: any, status: string) {
-        if (item.status.includes(status)) {
-            item.status.splice(item.status.indexOf(status), 1);
-        } else {
-            item.status.push(status);
-        }
-    }
-
-    render() {
-        return (    
-            <Modal
-            className='p-dialog-flex'
-            onHide={() => false}
-            maximized={true} contentPadding={"none"}
-            headerTemplate="Multiedit"
-            visible={true} >
-                <Spacer children={this.state.arr} gap={'0'}></Spacer>
-                <div style={{
-                    padding: '0 20px',
-                    display: 'flex',
-                    alignItems: 'center'
-                }}>
-                    <Dropdown
-                    append
-                    items={[
-                            { label: 'Action 1', onSelect: () => this.setState({arr: [...this.state.arr, <Editor />]}) },
-                    ]}>
-                        <Button type="primary" icon="plus-large" text="Add article" style="filled" size="large" shape="round" iconOnly={true} onClick={()=> false} />
-                    </Dropdown>
-                </div>
-            </Modal> 
-        );
-    }
-}
-
-interface IEditor {
-    sideBarOpen?: boolean;
-}
-
-export class Editor extends React.Component<IEditor, IEditor> {
-    constructor(props: IEditor) {
-        super(props);
-        this.state = {
-            sideBarOpen: false,
-            
-        }
-    }
-
-    render() {
-    return <div style={{borderRight: '4px solid grey'}}>
-        <Layout.AuthoringFrame
-        header={(
-            <SubNav zIndex={2}>
-                <ButtonGroup align='end'>
-                    <ButtonGroup subgroup={true} spaces="no-space">
-                        <Tooltip text='More actions' flow='left'>
-                            <NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
-                        </Tooltip>
-                        <Tooltip text='Send to / Publish' flow='left'>
-                            <NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
-                        </Tooltip>
-                        <Tooltip text='Send to / Publish' flow='left'>
-                            <NavButton type='darker' icon={this.state.sideBarOpen ? 'forward-thin' : 'backward-thin'} text='More actions' onClick={()=> this.setState({sideBarOpen: !this.state.sideBarOpen})} />
-                        </Tooltip>
-                    </ButtonGroup>
-                </ButtonGroup>
-            </SubNav>
-        )}
-        main={(
-            <Layout.AuthoringMain
-            headerPadding='medium'
-            toolBar={(
-                <React.Fragment>
-                    <div className="sd-editor-toolbar__content">
-                        <dl>
-                            <dt>Created</dt>
-                            <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
-                            <dt>by</dt>
-                            <dt>Nareg Asmarian</dt>
-                        </dl>
-                        <dl>
-                            <dt>Modified</dt>
-                            <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
-                        </dl>
-                    </div>
-                    <ButtonGroup align='end'>
-                        <IconButton icon="preview-mode" toolTipAppend={true} ariaValue="Print preview" onClick={()=> false} />
-                        <IconButton icon="adjust" ariaValue="Toogle theme" onClick={()=> false} />
-                        <IconButton icon="switches" ariaValue="Theme settings" onClick={()=> false} />
-                    </ButtonGroup>
-                </React.Fragment>
-            )}
-            authoringHeader ={(
-                <React.Fragment>
-                    <Form.FormGroup inlineLabel={true}>
-                        <Form.FormItem>
-                            <Input
-                                type='text'
-                                label='Slugline'
-                                value='This is some value'
-                                maxLength={30}
-                                error='This is error message'
-                                info='This is some hint message'
-                                required={false}
-                                disabled={false}
-                                invalid={false}
-                                onChange={(value) => {}} />
-                        </Form.FormItem>
-                        <Form.FormItem>
-                            <Input
-                                type='text'
-                                label='Slugline'
-                                value='This is some value'
-                                maxLength={30}
-                                error='This is error message'
-                                info='This is some hint message'
-                                required={false}
-                                disabled={false}
-                                invalid={false}
-                                onChange={(value) => {}} /> 
-                        </Form.FormItem>
-                    </Form.FormGroup>
-                    <Form.FormGroup inlineLabel={true}>
-                        <Form.FormItem>
-                            <Input
-                                type='text'
-                                label='Genre'
-                                value='This is some value'
-                                maxLength={30}
-                                error='This is error message'
-                                info='This is some hint message'
-                                required={false}
-                                disabled={false}
-                                invalid={false}
-                                onChange={(value) => {}} /> 
-                        </Form.FormItem>
-                    </Form.FormGroup>
-                    <Form.FormGroup marginBottom='0' inlineLabel={true}>
-                        <Form.FormItem>
-                            <Input
-                                type='text'
-                                label='Subject'
-                                value='This is some value'
-                                maxLength={30}
-                                error='This is error message'
-                                info='This is some hint message'
-                                required={true}
-                                disabled={false}
-                                invalid={false}
-                                onChange={(value) => {}} /> 
-                        </Form.FormItem>
-                        <Form.FormItem autoWidth={true}>
-                            <Form.FormText>Just testing:</Form.FormText>
-                        </Form.FormItem>
-                        <Form.FormItem>
-                            <Select
-                                label='Categories'
-                                labelHidden={true}
-                                value='This is some value'
-                                error='This is error message'
-                                info='This is some hint message'
-                                required={true}
-                                disabled={false}
-                                invalid={false}
-                                onChange={(value) => {}}>
-                                    <Option>Option 1</Option>
-                                    <Option>Option 2</Option>
-                            </Select>
-                        </Form.FormItem>
-                        <Form.FormItem autoWidth={true}>
-                            <ButtonGroup>
-                                <IconButton ariaValue="Submit" icon="picture" onClick={()=> false} />
-                                <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
-                                <Button text="Submit" onClick={()=> false} type="primary" />
-                            </ButtonGroup>
-                        </Form.FormItem>
-                    </Form.FormGroup>
-                </React.Fragment>
-            )}>
-            </Layout.AuthoringMain>
-        )}
-        sidePanel={(
-            <Layout.Panel side='right' background='grey' open={false} size='x-small'>
-                <Layout.PanelHeader title='Pinned content' onClose={() => false}>
-                </Layout.PanelHeader>
-                <Layout.PanelContent>
-                    <Layout.PanelContentBlock>
-                        <BoxedList density='comfortable'>
-                            <BoxedListItem 
-                                type="success"
-                                clickable={true}
-                                media={(
-                                    <Icon name='slideshow'  />
-                                )}
-                                actions={(
-                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
-                                )}
-                            >
-                                <BoxedListContentRow>
-                                    Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
-                                </BoxedListContentRow>
-                                <BoxedListContentRow>
-                                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. 
-                                </BoxedListContentRow>
-                            </BoxedListItem>
-                            <BoxedListItem 
-                                type="warning"
-                                media={(
-                                    <AvatarWrapper
-                                        size="medium"
-                                        >
-                                        <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
-                                    </AvatarWrapper>
-                                )}
-                                footer={(
-                                    <ButtonGroup align="end">
-                                        <Button text="cancel" size="small" style="hollow" onClick={()=> false} />
-                                        <Button text="yes" size="small" style="hollow" type="primary" onClick={()=> false} />
-                                    </ButtonGroup>
-                                )}
-                                actions={(
-                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
-                                )}
-                            >
-                                <BoxedListContentRow>
-                                    Maecenas sed diam eget risus varius blandit sit amet magna.
-                                </BoxedListContentRow>
-                            </BoxedListItem>
-                            <BoxedListItem 
-                                selected={true}
-                                actions={(
-                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
-                                )}
-                            >
-                                <BoxedListContentRow>
-                                    Maecenas sed diam eget risus varius blandit sit amet magna. Vestibulum id ligula porta felis euismod semper.
-                                </BoxedListContentRow>
-                            </BoxedListItem>
-                        </BoxedList>
-                    </Layout.PanelContentBlock>
-                </Layout.PanelContent>
-            </Layout.Panel>
-        )}
-        
-        sideBarClosed={this.state.sideBarOpen}
-        sideBar={(
-            <Nav.SideBarTabs
-            items={[
-                { icon: 'info', size: 'big', tooltip: 'Info', onClick: () => false },
-                { icon: 'chat', size: 'big', tooltip: 'Comments', onClick: () => false },
-                { icon: 'history', size: 'big', tooltip: 'History', onClick: () => false },
-                { icon: 'package', size: 'big', tooltip: 'Packages', onClick: () => false },
-                { icon: 'attachment', size: 'big', tooltip: 'Attachments', onClick: () => false },
-                { icon: 'comments', size: 'big', tooltip: 'Inline Comments', onClick: () => false },
-                { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', onClick: () => false }]} />
-        )}
-    />
-    </div>
-    }
-}