superdesk-ui-framework 3.0.1-beta.6 → 3.0.1-beta.8

package/react/components/Lists/TableList.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { DropResult } from "react-beautiful-dnd";
+import { IMenuItem, ISubmenu, IMenuGroup } from '../Dropdown';
+export interface IProps {
+    children?: React.ReactNode;
+    array: Array<IPropsArrayItem>;
+    addItem?: boolean;
+    dragAndDrop?: boolean;
+    itemsDropdown?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
+    className?: string;
+    onDrag?(start: number, end: number): void;
+}
+export interface IPropsArrayItem {
+    start?: React.ReactNode;
+    center?: React.ReactNode;
+    end?: React.ReactNode;
+    action?: React.ReactNode;
+    onClick?(): void;
+}
+declare class TableList extends React.PureComponent<IProps, {
+    items: Array<IPropsArrayItem>;
+}> {
+    constructor(props: Readonly<IProps>);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<IProps>): void;
+    onDragEnd(result: DropResult): void | null;
+    render(): false | "" | 0 | JSX.Element | null | undefined;
+}
+export interface IPropsItem {
+    start?: React.ReactNode;
+    center?: React.ReactNode;
+    end?: React.ReactNode;
+    action?: React.ReactNode;
+    addItem?: boolean;
+    itemsDropdown?: any;
+    dragAndDrop?: boolean;
+    onClick?(): void;
+}
+declare class TableListItem extends React.PureComponent<IPropsItem> {
+    render(): JSX.Element;
+}
+export { TableList, TableListItem };

package/react/components/Lists/TableList.js

@@ -0,0 +1,145 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableListItem = exports.TableList = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var react_beautiful_dnd_1 = require("react-beautiful-dnd");
+var Tooltip_1 = require("../Tooltip");
+var Button_1 = require("../Button");
+var Dropdown_1 = require("../Dropdown");
+var reorder = function (list, startIndex, endIndex) {
+    var result = Array.from(list);
+    var removed = result.splice(startIndex, 1)[0];
+    result.splice(endIndex, 0, removed);
+    return result;
+};
+var TableList = /** @class */ (function (_super) {
+    __extends(TableList, _super);
+    function TableList(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            items: [],
+        };
+        _this.onDragEnd = _this.onDragEnd.bind(_this);
+        return _this;
+    }
+    TableList.prototype.componentDidMount = function () {
+        this.setState({ items: this.props.array });
+    };
+    TableList.prototype.componentDidUpdate = function (prevProps) {
+        if (prevProps.array !== this.props.array) {
+            this.setState({
+                items: this.props.array,
+            });
+        }
+    };
+    TableList.prototype.onDragEnd = function (result) {
+        if (!result.destination) {
+            return;
+        }
+        var items = reorder(this.state.items, result.source.index, result.destination.index);
+        this.setState({
+            items: items,
+        });
+        return this.props.onDrag ?
+            this.props.onDrag(result.source.index, result.destination.index) : null;
+    };
+    TableList.prototype.render = function () {
+        var _a;
+        var _this = this;
+        var classes = (0, classnames_1.default)((_a = {
+                'table-list': !this.props.addItem
+            },
+            _a["".concat(this.props.className)] = this.props.className,
+            _a));
+        return (this.props.array ?
+            this.props.dragAndDrop ?
+                React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
+                    React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("ul", __assign({ className: classes, ref: provided.innerRef }, provided.droppableProps),
+                        _this.state.items.map(function (item, index) { return (React.createElement(react_beautiful_dnd_1.Draggable, { key: index, draggableId: "".concat(index), index: index }, function (provided2, _snapshot2) { return (React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
+                            React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown }))); })); }),
+                        provided.placeholder)); }))
+                : React.createElement("ul", { className: classes }, this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown })); }))
+            : this.props.children &&
+                React.createElement("ul", { className: classes }, this.props.children));
+    };
+    return TableList;
+}(React.PureComponent));
+exports.TableList = TableList;
+var TableListItem = /** @class */ (function (_super) {
+    __extends(TableListItem, _super);
+    function TableListItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TableListItem.prototype.render = function () {
+        return (this.props.addItem ?
+            React.createElement("li", { className: 'table-list__item-container' },
+                React.createElement("div", { onClick: this.props.onClick, className: "table-list__item ".concat(this.props.onClick && 'table-list__item--clickable', " ").concat(this.props.dragAndDrop && 'table-list__item--draggable') },
+                    React.createElement("div", { className: 'table-list__item-content' },
+                        React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
+                        React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
+                        React.createElement("div", { className: 'table-list__item-content-block' }, this.props.end && this.props.end)),
+                    this.props.action && React.createElement("div", { className: 'table-list__slide-in-actions' }, this.props.action)),
+                React.createElement("div", { className: 'table-list__add-bar-container' },
+                    React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
+                        React.createElement("div", { className: 'table-list__add-bar' },
+                            React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown },
+                                React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
+            : React.createElement("li", { className: "table-list__item ".concat(this.props.onClick && 'table-list__item--clickable', " ").concat(this.props.dragAndDrop && 'table-list__item--draggable', " table-list__item--margin"), onClick: this.props.onClick },
+                React.createElement("div", { className: 'table-list__item-content' },
+                    React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
+                    React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
+                    React.createElement("div", { className: 'table-list__item-content-block' }, this.props.end && this.props.end)),
+                this.props.action && React.createElement("div", { className: 'table-list__slide-in-actions' }, this.props.action)));
+    };
+    return TableListItem;
+}(React.PureComponent));
+exports.TableListItem = TableListItem;

package/react/components/SearchBar.d.ts

@@ -5,13 +5,14 @@ interface IProps {
     placeholder: string;
     focused?: boolean;
     boxed?: boolean;
-    onSubmit?(): void;
+    onSubmit?(value: string | number): void;
 }
 interface IState {
     inputValue: any;
     type: string;
     focused: boolean;
     boxed?: boolean;
+    keyDown?: boolean;
 }
 export declare class SearchBar extends React.PureComponent<IProps, IState> {
     private inputRef;

package/react/components/SearchBar.js

@@ -57,6 +57,7 @@ var SearchBar = /** @class */ (function (_super) {
             focused: _this.props.focused ? _this.props.focused : false,
             type: _this.props.type ? _this.props.type : 'expanded',
             boxed: _this.props.boxed ? _this.props.boxed : false,
+            keyDown: false,
         };
         _this.inputRef = React.createRef();
         return _this;
@@ -77,11 +78,26 @@ var SearchBar = /** @class */ (function (_super) {
             _a));
         return (React.createElement("div", { className: classes, ref: this.inputRef },
             React.createElement("label", { className: "sd-searchbar__icon" }),
-            React.createElement("input", { id: "search-input", ref: function (input) { return (input && _this.props.focused) && input.focus(); }, className: "sd-searchbar__input", type: "text", placeholder: this.props.placeholder, value: this.state.inputValue, onChange: function (e) { return _this.setState({ inputValue: e.target.value }); }, onFocus: function () { return _this.setState({ focused: true }); } }),
+            React.createElement("input", { id: "search-input", ref: function (input) { return (input && _this.props.focused) && input.focus(); }, className: "sd-searchbar__input", type: "text", placeholder: this.props.placeholder, value: this.state.inputValue, onKeyPress: function (event) {
+                    if (event.key === 'Enter') {
+                        if (_this.props.onSubmit) {
+                            _this.props.onSubmit(_this.state.inputValue);
+                        }
+                        _this.setState({ keyDown: true });
+                    }
+                }, onKeyUp: function (event) {
+                    if (event.key === 'Enter') {
+                        _this.setState({ keyDown: false });
+                    }
+                }, onChange: function (event) { return _this.setState({ inputValue: event.target.value }); }, onFocus: function () { return _this.setState({ focused: true }); } }),
             this.state.inputValue &&
                 React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () { return _this.setState({ inputValue: '' }); } },
                     React.createElement(Icon_1.Icon, { name: 'remove-sign' })),
-            React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn", onSubmit: function () { return _this.props.onSubmit; } },
+            React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn ".concat(this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''), onClick: function () {
+                    if (_this.props.onSubmit) {
+                        _this.props.onSubmit(_this.state.inputValue);
+                    }
+                } },
                 React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' }))));
     };
     return SearchBar;

package/react/components/TimePicker.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 interface IProps {
     value: string;
     onChange(valueNext: string): void;
+    allowSeconds?: boolean;
     disabled?: boolean;
     inlineLabel?: boolean;
     required?: boolean;

package/react/components/TimePicker.js

@@ -55,7 +55,7 @@ var TimePicker = /** @class */ (function (_super) {
     TimePicker.prototype.render = function () {
         var _this = this;
         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("input", { id: this.htmlId, "aria-labelledby": this.htmlId + 'label', type: "time", className: "sd-input__input", value: this.props.value, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
+            React.createElement("input", { id: this.htmlId, "aria-labelledby": this.htmlId + 'label', type: "time", step: this.props.allowSeconds ? 1 : undefined, className: "sd-input__input", value: this.props.value, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
                     _this.props.onChange(event.target.value);
                 } })));
     };

package/react/index.d.ts

@@ -80,6 +80,7 @@ export { Time } from './components/Text/Time';
 export { Heading } from './components/Text/Heading';
 export { BottomNav } from './components/Navigation/BottomNav';
 export { TreeSelect } from './components/TreeSelect';
+export { TableList, TableListItem } from './components/Lists/TableList';
 export { ContentListItem } from './components/Lists/ContentList';
 export declare const ToggleBoxNext: any;
 export declare const reactToAngular1: any;

package/react/index.js

@@ -13,7 +13,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownLabel = exports.DropdownItem = exports.DropdownFirst = exports.HeadingText = exports.ContentDivider = exports.Divider = exports.Icon = exports.Prop = exports.PropsList = exports.StrechBar = exports.SlidingToolbar = exports.SubNavDivider = exports.SubNav = exports.LeftMenu = exports.TabList = exports.Tab = exports.NavButton = exports.CheckButtonGroup = exports.CheckGroup = exports.CheckboxButton = exports.RadioButtonGroup = exports.Checkbox = exports.RadioGroup = exports.Loader = exports.ButtonGroup = exports.SwitchGroup = exports.Switch = exports.FormLabel = exports.TimePicker = exports.DatePickerISO = exports.DatePicker = exports.getDurationString = exports.DurationInput = exports.Tooltip = exports.IconLabel = exports.IconButton = exports.AvatarGroup = exports.AvatarContentImage = exports.AvatarContentText = exports.AvatarWrapper = exports.Alert = exports.Badge = exports.Label = exports.Popover = exports.SelectWithTemplate = exports.Option = exports.Select = exports.Input = exports.Button = exports.HelloWorld = void 0;
-exports.ContentListItem = exports.TreeSelect = exports.BottomNav = exports.Heading = exports.Time = exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader = exports.Skeleton = exports.WithSizeObserver = exports.SearchBar = exports.CreateButton = exports.DropZone = exports.ThemeSelector = exports.IconPicker = exports.SelectGrid = exports.ToggleBox = exports.Menu = exports.toasted = exports.GridItemCheckWrapper = exports.GridItemTopActions = exports.GridItemFooterActions = exports.GridItemFooterBlock = exports.GridItemSlug = exports.GridItemText = exports.GridItemTitle = exports.GridItemTime = exports.GridItemContentBlock = exports.GridItemFooter = exports.GridItemMedia = exports.GridItemContent = exports.GridItem = exports.GridList = exports.TagInputTest = exports.TagInput = exports.Modal = exports.Carousel = exports.DonutChart = exports.Autocomplete = exports.EmptyState = exports.Tabs = exports.TabContent = exports.TabPanel = exports.TabLabel = exports.Tag = exports.Dropdown = exports.DropdownDivider = void 0;
+exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeSelect = exports.BottomNav = exports.Heading = exports.Time = exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader = exports.Skeleton = exports.WithSizeObserver = exports.SearchBar = exports.CreateButton = exports.DropZone = exports.ThemeSelector = exports.IconPicker = exports.SelectGrid = exports.ToggleBox = exports.Menu = exports.toasted = exports.GridItemCheckWrapper = exports.GridItemTopActions = exports.GridItemFooterActions = exports.GridItemFooterBlock = exports.GridItemSlug = exports.GridItemText = exports.GridItemTitle = exports.GridItemTime = exports.GridItemContentBlock = exports.GridItemFooter = exports.GridItemMedia = exports.GridItemContent = exports.GridItem = exports.GridList = exports.TagInputTest = exports.TagInput = exports.Modal = exports.Carousel = exports.DonutChart = exports.Autocomplete = exports.EmptyState = exports.Tabs = exports.TabContent = exports.TabPanel = exports.TabLabel = exports.Tag = exports.Dropdown = exports.DropdownDivider = void 0;
 var HelloWorld_1 = require("./components/HelloWorld");
 Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
 var Button_1 = require("./components/Button");
@@ -192,5 +192,8 @@ var BottomNav_1 = require("./components/Navigation/BottomNav");
 Object.defineProperty(exports, "BottomNav", { enumerable: true, get: function () { return BottomNav_1.BottomNav; } });
 var TreeSelect_1 = require("./components/TreeSelect");
 Object.defineProperty(exports, "TreeSelect", { enumerable: true, get: function () { return TreeSelect_1.TreeSelect; } });
+var TableList_1 = require("./components/Lists/TableList");
+Object.defineProperty(exports, "TableList", { enumerable: true, get: function () { return TableList_1.TableList; } });
+Object.defineProperty(exports, "TableListItem", { enumerable: true, get: function () { return TableList_1.TableListItem; } });
 var ContentList_1 = require("./components/Lists/ContentList");
 Object.defineProperty(exports, "ContentListItem", { enumerable: true, get: function () { return ContentList_1.ContentListItem; } });