@singularsystems/neo-react 1.0.0-alpha.2 → 1.0.0-beta.0

package/dist/ReactComponents/Tabs/Tab.js

@@ -1,72 +1,71 @@
-import { __decorate, __extends, __metadata } from "tslib";
-import React from "react";
-import { observer } from "mobx-react";
-import { TabContext } from "./TabContainer";
-import { Utils } from "@singularsystems/neo-core";
-var Tab = /** @class */ (function (_super) {
-    __extends(Tab, _super);
-    function Tab(props) {
-        var _this = this;
-        var _a;
-        _this = _super.call(this, props) || this;
-        _this.hasRenderedContents = false;
-        _this.onClick = _this.onClick.bind(_this);
-        var tabKey = (_a = _this.props.id) !== null && _a !== void 0 ? _a : _this.props.name;
-        if (!tabKey) {
-            if (typeof _this.props.header === "string") {
-                tabKey = _this.props.header;
-            }
-            else {
-                throw Error("'Name' prop must be specified on tab when it's header is a component.");
-            }
-        }
-        _this.tabKey = tabKey;
-        return _this;
-    }
-    Tab.prototype.componentDidMount = function () {
-        if (this.props.onInitialise) {
-            this.context.tabManager.onTabInitialise(this.tabKey, this.props.onInitialise);
-        }
-        if (this.props.onDisplayed) {
-            this.context.tabManager.onTabDisplayed(this.tabKey, this.props.onDisplayed);
-        }
-        this.context.tabManager.tabMounted(this.tabKey, this.props.onLeave);
-    };
-    Tab.prototype.render = function () {
-        if (this.isHeader === undefined)
-            this.isHeader = this.context.inHeader;
-        var isSelected = this.context.tabManager.selectedTab.toLowerCase() === this.tabKey.toLowerCase();
-        return this.isHeader ? this.renderHeader(isSelected) : this.renderBody(isSelected);
-    };
-    Tab.prototype.onClick = function (e) {
-        e.preventDefault();
-        if (!this.props.disabled) {
-            this.context.tabManager.selectedTab = this.tabKey;
-        }
-    };
-    Tab.prototype.renderHeader = function (isSelected) {
-        var iconClass = "";
-        if (this.props.icon) {
-            iconClass = Utils.getFontAwesomeClass(this.props.icon);
-        }
-        return (React.createElement("li", { className: "nav-item" },
-            React.createElement("a", { className: "nav-link" + (isSelected ? " active" : "") + (this.props.disabled ? " disabled" : ""), href: "#", onClick: this.onClick },
-                iconClass && React.createElement("i", { className: iconClass }),
-                iconClass && " ",
-                this.props.header)));
-    };
-    Tab.prototype.renderBody = function (isSelected) {
-        var forceRender = this.context.keepMounted === true && this.hasRenderedContents;
-        if (isSelected) {
-            this.hasRenderedContents = true;
-        }
-        return ((isSelected || forceRender) && React.createElement("div", { className: "tab-pane" + (isSelected ? " show active" : "") }, this.props.children));
-    };
-    Tab.contextType = TabContext;
-    Tab = __decorate([
-        observer,
-        __metadata("design:paramtypes", [Object])
-    ], Tab);
-    return Tab;
-}(React.Component));
-export default Tab;
+import { __decorate, __extends, __metadata } from "tslib";
+import React from "react";
+import { observer } from "mobx-react";
+import { TabContext } from "./TabContainer";
+import { Misc } from "@singularsystems/neo-core";
+import { NeoReactTypes } from "../../Modules/Types";
+var Tab = /** @class */ (function (_super) {
+    __extends(Tab, _super);
+    function Tab(props) {
+        var _this = this;
+        var _a;
+        _this = _super.call(this, props) || this;
+        _this.hasRenderedContents = false;
+        _this.iconFactory = Misc.Globals.appService.get(NeoReactTypes.Components.IconFactory);
+        _this.onClick = _this.onClick.bind(_this);
+        var tabKey = (_a = _this.props.id) !== null && _a !== void 0 ? _a : _this.props.name;
+        if (!tabKey) {
+            if (typeof _this.props.header === "string") {
+                tabKey = _this.props.header;
+            }
+            else {
+                throw Error("'Name' prop must be specified on tab when it's header is a component.");
+            }
+        }
+        _this.tabKey = tabKey;
+        return _this;
+    }
+    Tab.prototype.componentDidMount = function () {
+        if (this.props.onInitialise) {
+            this.context.tabManager.onTabInitialise(this.tabKey, this.props.onInitialise);
+        }
+        if (this.props.onDisplayed) {
+            this.context.tabManager.onTabDisplayed(this.tabKey, this.props.onDisplayed);
+        }
+        this.context.tabManager.tabMounted(this.tabKey, this.props.onLeave);
+    };
+    Tab.prototype.render = function () {
+        if (this.isHeader === undefined)
+            this.isHeader = this.context.inHeader;
+        var isSelected = this.context.tabManager.selectedTab.toLowerCase() === this.tabKey.toLowerCase();
+        return this.isHeader ? this.renderHeader(isSelected) : this.renderBody(isSelected);
+    };
+    Tab.prototype.onClick = function (e) {
+        e.preventDefault();
+        if (!this.props.disabled) {
+            this.context.tabManager.selectedTab = this.tabKey;
+        }
+    };
+    Tab.prototype.renderHeader = function (isSelected) {
+        var hasIcon = this.props.icon !== undefined;
+        return (React.createElement("li", { className: "nav-item" },
+            React.createElement("a", { className: "nav-link" + (isSelected ? " active" : "") + (this.props.disabled ? " disabled" : ""), href: "#", onClick: this.onClick },
+                hasIcon && this.iconFactory.getIconComponent(this.props.icon),
+                hasIcon && " ",
+                this.props.header)));
+    };
+    Tab.prototype.renderBody = function (isSelected) {
+        var forceRender = this.context.keepMounted === true && this.hasRenderedContents;
+        if (isSelected) {
+            this.hasRenderedContents = true;
+        }
+        return ((isSelected || forceRender) && React.createElement("div", { className: "tab-pane" + (isSelected ? " show active" : "") }, this.props.children));
+    };
+    Tab.contextType = TabContext;
+    Tab = __decorate([
+        observer,
+        __metadata("design:paramtypes", [Object])
+    ], Tab);
+    return Tab;
+}(React.Component));
+export default Tab;

package/dist/ReactComponents/Tabs/TabContainer.d.ts

@@ -1,44 +1,44 @@
-import React from "react";
-import { Components } from "@singularsystems/neo-core";
-import { IObservableValue } from "@singularsystems/neo-core/dist/Model/ObservableValue";
-import { TabManager, ITabManagerInternal } from './TabManager';
-export interface ITabContainerProps {
-    /**
-     * Optional tab manager for managing selected tab / tab change events.
-     */
-    tabManager?: TabManager;
-    /**
-     * Optional selected tab property for binding the selected tab. Leave undefined if tabManager is specified.
-     */
-    selectedTab?: IObservableValue<string>;
-    variant?: "tabs" | "pills" | "none" | "flat";
-    fillMode?: "fill" | "justified";
-    align?: Components.flexItemAlign;
-    /**
-     * Causes the tabs to stack vertically. These sizes define how many columns the tab selectors fill at each screen size. The tab content will fill the remaining columns.
-     */
-    verticalSizes?: Components.IColumnWidthBreakpoints;
-    /**
-     * If set, will cause tabs to remain mounted after they are activated. The tab content will be hidden using css.
-     * Use this if you want ui state e.g. scroll positions to remain on switch of tabs.
-     */
-    keepMounted?: boolean;
-}
-export declare class TabContextParams {
-    tabManager: ITabManagerInternal;
-    /**
-     * True if the tab manager was passed in to the tab container.
-     */
-    isUserTabManager: boolean;
-    inHeader: boolean;
-    keepMounted?: boolean;
-}
-export declare const TabContext: React.Context<TabContextParams>;
-export default class TabContainer extends React.Component<ITabContainerProps & React.HTMLProps<HTMLDivElement>> {
-    private tabContext;
-    private tabManager;
-    constructor(props: ITabContainerProps & React.HTMLProps<HTMLDivElement>);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-}
+import React from "react";
+import { Components } from "@singularsystems/neo-core";
+import { IObservableValue } from "@singularsystems/neo-core/dist/Model/ObservableValue";
+import { TabManager, ITabManagerInternal } from './TabManager';
+export interface ITabContainerProps {
+    /**
+     * Optional tab manager for managing selected tab / tab change events.
+     */
+    tabManager?: TabManager;
+    /**
+     * Optional selected tab property for binding the selected tab. Leave undefined if tabManager is specified.
+     */
+    selectedTab?: IObservableValue<string>;
+    variant?: "tabs" | "pills" | "none" | "flat";
+    fillMode?: "fill" | "justified";
+    align?: Components.flexItemAlign;
+    /**
+     * Causes the tabs to stack vertically. These sizes define how many columns the tab selectors fill at each screen size. The tab content will fill the remaining columns.
+     */
+    verticalSizes?: Components.IColumnWidthBreakpoints;
+    /**
+     * If set, will cause tabs to remain mounted after they are activated. The tab content will be hidden using css.
+     * Use this if you want ui state e.g. scroll positions to remain on switch of tabs.
+     */
+    keepMounted?: boolean;
+}
+export declare class TabContextParams {
+    tabManager: ITabManagerInternal;
+    /**
+     * True if the tab manager was passed in to the tab container.
+     */
+    isUserTabManager: boolean;
+    inHeader: boolean;
+    keepMounted?: boolean;
+}
+export declare const TabContext: React.Context<TabContextParams>;
+export default class TabContainer extends React.Component<ITabContainerProps & React.HTMLProps<HTMLDivElement>> {
+    private tabContext;
+    private tabManager;
+    constructor(props: ITabContainerProps & React.HTMLProps<HTMLDivElement>);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}

package/dist/ReactComponents/Tabs/TabContainer.js

@@ -1,98 +1,98 @@
-import { __assign, __extends, __rest } from "tslib";
-import React from "react";
-import { Components, Utils } from "@singularsystems/neo-core";
-import { ObservableValue } from "@singularsystems/neo-core/dist/Model/ObservableValue";
-import { TabManager } from './TabManager';
-var TabContextParams = /** @class */ (function () {
-    function TabContextParams() {
-        /**
-         * True if the tab manager was passed in to the tab container.
-         */
-        this.isUserTabManager = false;
-        this.inHeader = true;
-    }
-    return TabContextParams;
-}());
-export { TabContextParams };
-export var TabContext = React.createContext(new TabContextParams());
-var TabContainer = /** @class */ (function (_super) {
-    __extends(TabContainer, _super);
-    function TabContainer(props) {
-        var _this = this;
-        var _a;
-        _this = _super.call(this, props) || this;
-        _this.tabContext = new TabContextParams();
-        var tabManager;
-        if (_this.props.tabManager) {
-            tabManager = _this.props.tabManager;
-            _this.tabContext.isUserTabManager = true;
-        }
-        else {
-            tabManager = new TabManager("", true);
-            tabManager.observable = (_a = _this.props.selectedTab) !== null && _a !== void 0 ? _a : new ObservableValue("");
-        }
-        _this.tabManager = tabManager;
-        _this.tabContext.tabManager = _this.tabManager;
-        return _this;
-    }
-    TabContainer.prototype.componentDidMount = function () {
-        this.tabManager.initialise();
-    };
-    TabContainer.prototype.componentWillUnmount = function () {
-        this.tabManager.destroy();
-    };
-    TabContainer.prototype.render = function () {
-        var _a = this.props, tabManager = _a.tabManager, selectedTab = _a.selectedTab, variant = _a.variant, fillMode = _a.fillMode, align = _a.align, verticalSizes = _a.verticalSizes, keepMounted = _a.keepMounted, domProps = __rest(_a, ["tabManager", "selectedTab", "variant", "fillMode", "align", "verticalSizes", "keepMounted"]);
-        this.tabContext.keepMounted = keepMounted;
-        if (!verticalSizes)
-            verticalSizes = {};
-        if (!verticalSizes.xs)
-            verticalSizes.xs = 12;
-        var isCardMode = (variant === "tabs" || !variant);
-        if (variant === "flat") {
-            variant = "tabs";
-        }
-        var _b = Components.BootstrapHelpers.getInverseBreakpointClasses(verticalSizes), cols = _b.cols, inverseCols = _b.inverseCols;
-        domProps.className = Utils.joinWithSpaces(domProps.className, "row neo-tab-container", isCardMode ? "neo-tab-card-mode" : undefined);
-        return (React.createElement(TabContext.Provider, { value: this.tabContext },
-            React.createElement("div", __assign({}, domProps),
-                React.createElement("div", { className: "tabs-header " + cols },
-                    React.createElement(TabSection, { isHeader: true, containerProps: { verticalSizes: verticalSizes, variant: variant, fillMode: fillMode, align: align } }, this.props.children)),
-                React.createElement("div", { className: inverseCols },
-                    React.createElement(TabSection, { isHeader: false }, this.props.children)))));
-    };
-    return TabContainer;
-}(React.Component));
-export default TabContainer;
-var TabSection = /** @class */ (function (_super) {
-    __extends(TabSection, _super);
-    function TabSection() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    TabSection.prototype.render = function () {
-        this.context.inHeader = this.props.isHeader;
-        var headerClassName = "nav ";
-        if (this.props.isHeader) {
-            var containerProps = this.props.containerProps;
-            if (containerProps.verticalSizes) {
-                var breakpoint = Components.BootstrapHelpers.getFirstBreakpoint(containerProps.verticalSizes);
-                if (breakpoint)
-                    headerClassName += " flex-" + breakpoint + "-column";
-            }
-            if (containerProps.variant !== "none") {
-                headerClassName += " nav-" + (containerProps.variant || "tabs");
-            }
-            if (containerProps.fillMode) {
-                headerClassName += " nav-" + containerProps.fillMode;
-            }
-            if (containerProps.align) {
-                headerClassName += " justify-content-" + containerProps.align;
-            }
-        }
-        return (this.props.isHeader ?
-            React.createElement("ul", { className: headerClassName }, this.props.children) :
-            React.createElement("div", { className: "tab-content" }, this.props.children));
-    };
-    TabSection.contextType = TabContext;
-    return TabSection;
-}(React.PureComponent));
+import { __assign, __extends, __rest } from "tslib";
+import React from "react";
+import { Components, Utils } from "@singularsystems/neo-core";
+import { ObservableValue } from "@singularsystems/neo-core/dist/Model/ObservableValue";
+import { TabManager } from './TabManager';
+var TabContextParams = /** @class */ (function () {
+    function TabContextParams() {
+        /**
+         * True if the tab manager was passed in to the tab container.
+         */
+        this.isUserTabManager = false;
+        this.inHeader = true;
+    }
+    return TabContextParams;
+}());
+export { TabContextParams };
+export var TabContext = React.createContext(new TabContextParams());
+var TabContainer = /** @class */ (function (_super) {
+    __extends(TabContainer, _super);
+    function TabContainer(props) {
+        var _this = this;
+        var _a;
+        _this = _super.call(this, props) || this;
+        _this.tabContext = new TabContextParams();
+        var tabManager;
+        if (_this.props.tabManager) {
+            tabManager = _this.props.tabManager;
+            _this.tabContext.isUserTabManager = true;
+        }
+        else {
+            tabManager = new TabManager("", true);
+            tabManager.observable = (_a = _this.props.selectedTab) !== null && _a !== void 0 ? _a : new ObservableValue("");
+        }
+        _this.tabManager = tabManager;
+        _this.tabContext.tabManager = _this.tabManager;
+        return _this;
+    }
+    TabContainer.prototype.componentDidMount = function () {
+        this.tabManager.initialise();
+    };
+    TabContainer.prototype.componentWillUnmount = function () {
+        this.tabManager.destroy();
+    };
+    TabContainer.prototype.render = function () {
+        var _a = this.props, tabManager = _a.tabManager, selectedTab = _a.selectedTab, variant = _a.variant, fillMode = _a.fillMode, align = _a.align, verticalSizes = _a.verticalSizes, keepMounted = _a.keepMounted, domProps = __rest(_a, ["tabManager", "selectedTab", "variant", "fillMode", "align", "verticalSizes", "keepMounted"]);
+        this.tabContext.keepMounted = keepMounted;
+        if (!verticalSizes)
+            verticalSizes = {};
+        if (!verticalSizes.xs)
+            verticalSizes.xs = 12;
+        var isCardMode = (variant === "tabs" || !variant);
+        if (variant === "flat") {
+            variant = "tabs";
+        }
+        var _b = Components.BootstrapHelpers.getInverseBreakpointClasses(verticalSizes), cols = _b.cols, inverseCols = _b.inverseCols;
+        domProps.className = Utils.joinWithSpaces(domProps.className, "row neo-tab-container", isCardMode ? "neo-tab-card-mode" : undefined);
+        return (React.createElement(TabContext.Provider, { value: this.tabContext },
+            React.createElement("div", __assign({}, domProps),
+                React.createElement("div", { className: "tabs-header " + cols },
+                    React.createElement(TabSection, { isHeader: true, containerProps: { verticalSizes: verticalSizes, variant: variant, fillMode: fillMode, align: align } }, this.props.children)),
+                React.createElement("div", { className: inverseCols },
+                    React.createElement(TabSection, { isHeader: false }, this.props.children)))));
+    };
+    return TabContainer;
+}(React.Component));
+export default TabContainer;
+var TabSection = /** @class */ (function (_super) {
+    __extends(TabSection, _super);
+    function TabSection() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TabSection.prototype.render = function () {
+        this.context.inHeader = this.props.isHeader;
+        var headerClassName = "nav ";
+        if (this.props.isHeader) {
+            var containerProps = this.props.containerProps;
+            if (containerProps.verticalSizes) {
+                var breakpoint = Components.BootstrapHelpers.getFirstBreakpoint(containerProps.verticalSizes);
+                if (breakpoint)
+                    headerClassName += " flex-" + breakpoint + "-column";
+            }
+            if (containerProps.variant !== "none") {
+                headerClassName += " nav-" + (containerProps.variant || "tabs");
+            }
+            if (containerProps.fillMode) {
+                headerClassName += " nav-" + containerProps.fillMode;
+            }
+            if (containerProps.align) {
+                headerClassName += " justify-content-" + containerProps.align;
+            }
+        }
+        return (this.props.isHeader ?
+            React.createElement("ul", { className: headerClassName }, this.props.children) :
+            React.createElement("div", { className: "tab-content" }, this.props.children));
+    };
+    TabSection.contextType = TabContext;
+    return TabSection;
+}(React.PureComponent));

package/dist/ReactComponents/Tabs/TabManager.d.ts

@@ -1,62 +1,62 @@
-import { Model } from '@singularsystems/neo-core';
-import { ICancellableEvent } from '../Misc';
-export interface ITabManager {
-    selectedTab: string;
-    /**
-     * Registers a callback to run when the tab is first displayed, or when reset is called with reInitialise=true.
-     */
-    onTabInitialise(tabKey: string, callback: () => void): ITabManager;
-    /**
-     * Registers a callback to run whenever the tab with this tab key is displayed.
-     */
-    onTabDisplayed(tabKey: string, callback: () => void): ITabManager;
-}
-export interface ITabManagerInternal extends ITabManager {
-    initialise(): void;
-    tabMounted(tabKey: string, onLeave?: (e: ICancellableEvent) => void): void;
-    destroy(): void;
-}
-/**
- * Tab manager used to manage a tab component.
- * @param T string union type of tab names.
- */
-export declare class TabManager<T extends string = string> {
-    private autoSelectFirstTab;
-    observable: Model.ObservableValue<T>;
-    /**
-     * Creates a tab manager used to bind to a tab container.
-     * @param selectedTab Initially selected tab.
-     * @param autoSelectFirstTab Set to true if the first child tab should become selected.
-     */
-    constructor(selectedTab?: T, autoSelectFirstTab?: boolean);
-    /** Called by tab container. */
-    private initialise;
-    /** Called by tab container. */
-    private destroy;
-    get selectedTab(): T;
-    set selectedTab(value: T);
-    /**
-     * Registers a callback to run when the tab is first displayed, or when reset is called with reInitialise=true.
-     */
-    onTabInitialise(tabKey: T, callback: () => void): this;
-    /**
-     * Registers a callback to run whenever the tab with this tab key is displayed.
-     */
-    onTabDisplayed(tabKey: T, callback: () => void): this;
-    private tabMounted;
-    private getTab;
-    /**
-     * Marks the tab as 'initial'.
-     * @param reInitialise True if the tabs onInitialise() should be invoked.
-     */
-    reset(tabKey: T, reInitialise?: boolean): void;
-    /** Calls onInitialise() if the tab has not yet initialised. */
-    initialiseTab(tabKey: T): void;
-    /**
-     * Marks all tabs as 'initial', causing onInitialise() to be called the next time each is displayed.
-     * @param reInitialise True if the onInitialise() should be called on the currently displayed tab.
-     */
-    resetAll(reInitialise?: boolean): void;
-    private tabs;
-    private onTabChanged;
-}
+import { Model } from '@singularsystems/neo-core';
+import { ICancellableEvent } from '../Misc';
+export interface ITabManager {
+    selectedTab: string;
+    /**
+     * Registers a callback to run when the tab is first displayed, or when reset is called with reInitialise=true.
+     */
+    onTabInitialise(tabKey: string, callback: () => void): ITabManager;
+    /**
+     * Registers a callback to run whenever the tab with this tab key is displayed.
+     */
+    onTabDisplayed(tabKey: string, callback: () => void): ITabManager;
+}
+export interface ITabManagerInternal extends ITabManager {
+    initialise(): void;
+    tabMounted(tabKey: string, onLeave?: (e: ICancellableEvent) => void): void;
+    destroy(): void;
+}
+/**
+ * Tab manager used to manage a tab component.
+ * @param T string union type of tab names.
+ */
+export declare class TabManager<T extends string = string> {
+    private autoSelectFirstTab;
+    observable: Model.ObservableValue<T>;
+    /**
+     * Creates a tab manager used to bind to a tab container.
+     * @param selectedTab Initially selected tab.
+     * @param autoSelectFirstTab Set to true if the first child tab should become selected.
+     */
+    constructor(selectedTab?: T, autoSelectFirstTab?: boolean);
+    /** Called by tab container. */
+    private initialise;
+    /** Called by tab container. */
+    private destroy;
+    get selectedTab(): T;
+    set selectedTab(value: T);
+    /**
+     * Registers a callback to run when the tab is first displayed, or when reset is called with reInitialise=true.
+     */
+    onTabInitialise(tabKey: T, callback: () => void): this;
+    /**
+     * Registers a callback to run whenever the tab with this tab key is displayed.
+     */
+    onTabDisplayed(tabKey: T, callback: () => void): this;
+    private tabMounted;
+    private getTab;
+    /**
+     * Marks the tab as 'initial'.
+     * @param reInitialise True if the tabs onInitialise() should be invoked.
+     */
+    reset(tabKey: T, reInitialise?: boolean): void;
+    /** Calls onInitialise() if the tab has not yet initialised. */
+    initialiseTab(tabKey: T): void;
+    /**
+     * Marks all tabs as 'initial', causing onInitialise() to be called the next time each is displayed.
+     * @param reInitialise True if the onInitialise() should be called on the currently displayed tab.
+     */
+    resetAll(reInitialise?: boolean): void;
+    private tabs;
+    private onTabChanged;
+}