@singularsystems/neo-react 1.0.0-alpha.3 → 1.0.0-beta.1

package/dist/ReactComponents/Grid/StickyTableHeader.js

@@ -0,0 +1,107 @@
+/**
+ * Watches for when a table header scrolls out of view.
+ * When it does, adds a cloned header that is fixed at the top of the scrolling element.
+ */
+var StickyTableHeader = /** @class */ (function () {
+    /**
+     * Creates the instance, and begins listening for scroll events.
+     * @param table The table to add sticky headers to.
+     * @param fixedElement A fixed element at the top of the screen to use as an anchor, rather than the top of the screen itself.
+     */
+    function StickyTableHeader(table, fixedElement) {
+        this.table = table;
+        this.fixedElement = fixedElement;
+        this.headerHeight = 0;
+        if (!table.tHead) {
+            throw Error("Table must have a header section.");
+        }
+        this.header = table.tHead;
+        this.scrollParent = StickyTableHeader.getParentScrollElement(table);
+        this.handleScroll = this.handleScroll.bind(this);
+        this.onPossibleContentChange = this.onPossibleContentChange.bind(this);
+        document.addEventListener("scroll", this.handleScroll);
+        if (this.scrollParent) {
+            this.scrollParent.addEventListener("scroll", this.handleScroll);
+        }
+        table.addEventListener("keydown", this.onPossibleContentChange);
+        table.addEventListener("mouseup", this.onPossibleContentChange);
+    }
+    StickyTableHeader.prototype.handleScroll = function () {
+        // If the grid is in an element with a scrollbar, then the header should stick to the top of that element,
+        //  otherwise if there is a fixed (non scrolling) element at the top of the page, then the headers must appear below that.
+        //  otherwise the headers will stick to the top of the screen.
+        var fixedElement = null;
+        if (!this.scrollParent && this.fixedElement && getComputedStyle(this.fixedElement).position === "fixed") {
+            fixedElement = this.fixedElement;
+        }
+        var topBoundary = this.scrollParent ? this.scrollParent.getBoundingClientRect().top : (fixedElement ? fixedElement.getBoundingClientRect().bottom : 0);
+        var tableBounds = this.table.getBoundingClientRect();
+        var tbodyBounds = this.table.tBodies[this.table.tBodies.length - 1].getBoundingClientRect();
+        if (tableBounds.top < topBoundary && tbodyBounds.bottom - this.headerHeight > topBoundary) {
+            if (!this.headerCopy) {
+                // Clone the header, and re-insert it into the table. The table will then have 2 headers.
+                // The original headers position is set to "fixed" which makes it float.
+                // The column widths of the floating header then need to be synchronised with the header that is still inside the table layout.
+                this.headerHeight = this.header.getBoundingClientRect().height;
+                this.headerCopy = this.header.cloneNode(true);
+                this.table.insertBefore(this.headerCopy, this.header);
+                this.header.classList.add("neo-grid-fixed-header");
+                this.setColumnWidths();
+            }
+            this.header.style.left = tableBounds.left + "px";
+            this.header.style.top = topBoundary + "px";
+        }
+        else {
+            this.setColumnWidths(true);
+            this.removeCopy();
+        }
+    };
+    StickyTableHeader.prototype.removeCopy = function () {
+        if (this.headerCopy) {
+            this.header.classList.remove("neo-grid-fixed-header");
+            this.table.removeChild(this.headerCopy);
+            this.headerCopy = undefined;
+        }
+    };
+    StickyTableHeader.prototype.onPossibleContentChange = function () {
+        var _this = this;
+        setTimeout(function () { return _this.setColumnWidths(); }, 0);
+    };
+    StickyTableHeader.prototype.setColumnWidths = function (isRemoving) {
+        if (isRemoving === void 0) { isRemoving = false; }
+        if (this.headerCopy) {
+            for (var i = 0; i < this.header.rows.length; i++) {
+                var originalRow = this.header.rows[i], copyRow = this.headerCopy.rows[i];
+                for (var j = 0; j < originalRow.cells.length; j++) {
+                    var originalCell = originalRow.cells[j], copyCell = copyRow.cells[j];
+                    originalCell.style.width = isRemoving ? copyCell.style.width : window.getComputedStyle(copyCell).width;
+                }
+            }
+        }
+    };
+    StickyTableHeader.prototype.dispose = function () {
+        document.removeEventListener("scroll", this.handleScroll);
+        if (this.scrollParent) {
+            this.scrollParent.removeEventListener("scroll", this.handleScroll);
+        }
+        this.table.removeEventListener("keydown", this.onPossibleContentChange);
+        this.table.removeEventListener("mouseup", this.onPossibleContentChange);
+        this.removeCopy();
+    };
+    /**
+     * Returns the first parent element that has a scrollbar.
+     */
+    StickyTableHeader.getParentScrollElement = function (element) {
+        var current = element;
+        while (current) {
+            if ((current.style.height || current.style.maxHeight) &&
+                (current.style.overflow === "scroll" || current.style.overflow === "auto" || current.style.overflowY === "scroll" || current.style.overflowY === "auto")) {
+                return current;
+            }
+            current = current.parentElement;
+        }
+        return undefined;
+    };
+    return StickyTableHeader;
+}());
+export { StickyTableHeader };

package/dist/ReactComponents/Grid/_Exports.d.ts

@@ -1,5 +1,5 @@
-import Grid from './Grid';
-import Column from './Column';
-import Row, { RowGroup, ChildRow } from './Row';
-import { ButtonColumn } from './ButtonColumn';
-export { Grid, Column, RowGroup, Row, ChildRow, ButtonColumn };
+import Grid from './Grid';
+import Column from './Column';
+import Row, { RowGroup, ChildRow } from './Row';
+import { ButtonColumn } from './ButtonColumn';
+export { Grid, Column, RowGroup, Row, ChildRow, ButtonColumn };

package/dist/ReactComponents/Grid/_Exports.js

@@ -1,5 +1,5 @@
-import Grid from './Grid';
-import Column from './Column';
-import Row, { RowGroup, ChildRow } from './Row';
-import { ButtonColumn } from './ButtonColumn';
-export { Grid, Column, RowGroup, Row, ChildRow, ButtonColumn };
+import Grid from './Grid';
+import Column from './Column';
+import Row, { RowGroup, ChildRow } from './Row';
+import { ButtonColumn } from './ButtonColumn';
+export { Grid, Column, RowGroup, Row, ChildRow, ButtonColumn };

package/dist/ReactComponents/GridLayout.d.ts

@@ -1,20 +1,20 @@
-import React from 'react';
-import { Components } from '@singularsystems/neo-core';
-interface ILayoutGridProps extends Components.IColumnCountBreakpoints {
-    /** Size of gutters between columns. 1 - 5. */
-    gutterSize?: Components.gutterSize;
-    /** Vertical space to insert between rows. Specify using a css dimension. */
-    verticalSpace?: string;
-    /** Sets verticalSpace to "1rem" for convenience. */
-    withGaps?: boolean;
-    alignItems?: Components.flexItemAlign;
-    formGroupProps?: Components.IColumnWidthBreakpoints;
-}
-export declare class FormGroupLayoutContextParams {
-    formGroupProps?: Components.IColumnWidthBreakpoints;
-}
-export declare const FormGroupLayoutContext: React.Context<FormGroupLayoutContextParams>;
-export default class GridLayout extends React.Component<ILayoutGridProps & React.HTMLProps<HTMLDivElement>> {
-    render(): JSX.Element;
-}
-export {};
+import React from 'react';
+import { Components } from '@singularsystems/neo-core';
+interface ILayoutGridProps extends Components.IColumnCountBreakpoints {
+    /** Size of gutters between columns. 1 - 5. */
+    gutterSize?: Components.gutterSize;
+    /** Vertical space to insert between rows. Specify using a css dimension. */
+    verticalSpace?: string;
+    /** Sets verticalSpace to "1rem" for convenience. */
+    withGaps?: boolean;
+    alignItems?: Components.flexItemAlign;
+    formGroupProps?: Components.IColumnWidthBreakpoints;
+}
+export declare class FormGroupLayoutContextParams {
+    formGroupProps?: Components.IColumnWidthBreakpoints;
+}
+export declare const FormGroupLayoutContext: React.Context<FormGroupLayoutContextParams>;
+export default class GridLayout extends React.Component<ILayoutGridProps & React.HTMLProps<HTMLDivElement>> {
+    render(): JSX.Element;
+}
+export {};

package/dist/ReactComponents/GridLayout.js

@@ -1,38 +1,38 @@
-import { __assign, __extends, __rest } from "tslib";
-import React from 'react';
-import { Utils } from '@singularsystems/neo-core';
-var FormGroupLayoutContextParams = /** @class */ (function () {
-    function FormGroupLayoutContextParams() {
-    }
-    return FormGroupLayoutContextParams;
-}());
-export { FormGroupLayoutContextParams };
-export var FormGroupLayoutContext = React.createContext(new FormGroupLayoutContextParams());
-var GridLayout = /** @class */ (function (_super) {
-    __extends(GridLayout, _super);
-    function GridLayout() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    GridLayout.prototype.render = function () {
-        var _a = this.props, gutterSize = _a.gutterSize, verticalSpace = _a.verticalSpace, withGaps = _a.withGaps, alignItems = _a.alignItems, formGroupProps = _a.formGroupProps, xs = _a.xs, sm = _a.sm, md = _a.md, lg = _a.lg, xl = _a.xl, xxl = _a.xxl, domProps = __rest(_a, ["gutterSize", "verticalSpace", "withGaps", "alignItems", "formGroupProps", "xs", "sm", "md", "lg", "xl", "xxl"]);
-        var columnClassName = Utils.joinWithSpaces(gutterSize && "px-" + gutterSize, xs && "col-" + 12 / xs, sm && "col-sm-" + 12 / sm, md && "col-md-" + 12 / md, lg && "col-lg-" + 12 / lg, xl && "col-xl-" + 12 / xl, xxl && "col-xxl-" + 12 / xxl);
-        if (!(xs || sm || md || lg || xl || xxl)) {
-            columnClassName = Utils.joinWithSpaces(columnClassName, "col-md-6");
-        }
-        var rowClassName = Utils.joinWithSpaces(domProps.className, "row", gutterSize && "mx-n" + this.props.gutterSize, alignItems && "align-items-" + this.props.alignItems);
-        var containerStyle = domProps.style;
-        var columnStyle = undefined;
-        if (withGaps && !verticalSpace) {
-            verticalSpace = "1rem";
-        }
-        if (verticalSpace) {
-            containerStyle = containerStyle || {};
-            containerStyle.marginTop = "-" + verticalSpace;
-            columnStyle = { marginTop: verticalSpace };
-        }
-        return (React.createElement(FormGroupLayoutContext.Provider, { value: { formGroupProps: this.props.formGroupProps } },
-            React.createElement("div", __assign({}, domProps, { className: rowClassName, style: containerStyle }), React.Children.map(this.props.children, function (child) { return (child && React.createElement("div", { className: columnClassName, style: columnStyle }, child)); }))));
-    };
-    return GridLayout;
-}(React.Component));
-export default GridLayout;
+import { __assign, __extends, __rest } from "tslib";
+import React from 'react';
+import { Utils } from '@singularsystems/neo-core';
+var FormGroupLayoutContextParams = /** @class */ (function () {
+    function FormGroupLayoutContextParams() {
+    }
+    return FormGroupLayoutContextParams;
+}());
+export { FormGroupLayoutContextParams };
+export var FormGroupLayoutContext = React.createContext(new FormGroupLayoutContextParams());
+var GridLayout = /** @class */ (function (_super) {
+    __extends(GridLayout, _super);
+    function GridLayout() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    GridLayout.prototype.render = function () {
+        var _a = this.props, gutterSize = _a.gutterSize, verticalSpace = _a.verticalSpace, withGaps = _a.withGaps, alignItems = _a.alignItems, formGroupProps = _a.formGroupProps, xs = _a.xs, sm = _a.sm, md = _a.md, lg = _a.lg, xl = _a.xl, xxl = _a.xxl, domProps = __rest(_a, ["gutterSize", "verticalSpace", "withGaps", "alignItems", "formGroupProps", "xs", "sm", "md", "lg", "xl", "xxl"]);
+        var columnClassName = Utils.joinWithSpaces(gutterSize && "px-" + gutterSize, xs && "col-" + 12 / xs, sm && "col-sm-" + 12 / sm, md && "col-md-" + 12 / md, lg && "col-lg-" + 12 / lg, xl && "col-xl-" + 12 / xl, xxl && "col-xxl-" + 12 / xxl);
+        if (!(xs || sm || md || lg || xl || xxl)) {
+            columnClassName = Utils.joinWithSpaces(columnClassName, "col-md-6");
+        }
+        var rowClassName = Utils.joinWithSpaces(domProps.className, "row", gutterSize && "mx-n" + this.props.gutterSize, alignItems && "align-items-" + this.props.alignItems);
+        var containerStyle = domProps.style;
+        var columnStyle = undefined;
+        if (withGaps && !verticalSpace) {
+            verticalSpace = "1rem";
+        }
+        if (verticalSpace) {
+            containerStyle = containerStyle || {};
+            containerStyle.marginTop = "-" + verticalSpace;
+            columnStyle = { marginTop: verticalSpace };
+        }
+        return (React.createElement(FormGroupLayoutContext.Provider, { value: { formGroupProps: this.props.formGroupProps } },
+            React.createElement("div", __assign({}, domProps, { className: rowClassName, style: containerStyle }), React.Children.map(this.props.children, function (child) { return (child && React.createElement("div", { className: columnClassName, style: columnStyle }, child)); }))));
+    };
+    return GridLayout;
+}(React.Component));
+export default GridLayout;

package/dist/ReactComponents/Icons/FontAwesomeIconFactory.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { IconFactory } from "./IconFactory";
+import { IconStyle } from "./IIconFactory";
+interface IconDefinition {
+    iconName: string;
+}
+interface FontAwesomeIconComponentProps {
+    icon: any;
+    fixedWidth?: boolean;
+    spin?: boolean;
+}
+type FontAwesomeComponent = (props: FontAwesomeIconComponentProps) => JSX.Element;
+/** Icon factory supporting font-awesome string, as well as the font-awesome icon definition and component. */
+export declare class FontAwesomeIconFactory extends IconFactory {
+    private fontAwesomeComponentType;
+    /**
+     * Creates a font awesome factory, allowing the use of IconDefinition on any neo icon prop.
+     * @param fontAwesomeComponentType import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+     */
+    constructor(fontAwesomeComponentType: FontAwesomeComponent);
+    protected createIconComponent(iconComponent: IconDefinition | JSX.Element, iconStyle?: IconStyle): React.ReactNode;
+}
+export {};

package/dist/ReactComponents/Icons/FontAwesomeIconFactory.js

@@ -0,0 +1,43 @@
+import { __assign, __decorate, __extends, __metadata } from "tslib";
+import React from "react";
+import { injectable } from "inversify";
+import { IconFactory } from "./IconFactory";
+/** Icon factory supporting font-awesome string, as well as the font-awesome icon definition and component. */
+export var FontAwesomeIconFactory = /** @class */ (function (_super) {
+    __extends(FontAwesomeIconFactory, _super);
+    /**
+     * Creates a font awesome factory, allowing the use of IconDefinition on any neo icon prop.
+     * @param fontAwesomeComponentType import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+     */
+    function FontAwesomeIconFactory(fontAwesomeComponentType) {
+        var _this = _super.call(this) || this;
+        _this.fontAwesomeComponentType = fontAwesomeComponentType;
+        return _this;
+    }
+    FontAwesomeIconFactory.prototype.createIconComponent = function (iconComponent, iconStyle) {
+        if (iconComponent.iconName) {
+            // Icon was specified using a font-awesome icon descriptor, return the font-awesome icon component.
+            return React.createElement(this.fontAwesomeComponentType, {
+                icon: iconComponent,
+                fixedWidth: iconStyle === null || iconStyle === void 0 ? void 0 : iconStyle.fixedWidth,
+                spin: iconStyle === null || iconStyle === void 0 ? void 0 : iconStyle.spin
+            });
+        }
+        else {
+            // Icon was specified as a font-awesome component. Extract the props, and override using the requested style.
+            var props = __assign({}, iconComponent.props);
+            if (iconStyle === null || iconStyle === void 0 ? void 0 : iconStyle.fixedWidth) {
+                props.fixedWidth = iconStyle.fixedWidth;
+            }
+            if (iconStyle === null || iconStyle === void 0 ? void 0 : iconStyle.spin) {
+                props.spin = iconStyle.spin;
+            }
+            return React.createElement(iconComponent.type, props);
+        }
+    };
+    FontAwesomeIconFactory = __decorate([
+        injectable(),
+        __metadata("design:paramtypes", [Function])
+    ], FontAwesomeIconFactory);
+    return FontAwesomeIconFactory;
+}(IconFactory));

package/dist/ReactComponents/Icons/IIconFactory.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export interface IconStyle {
+    fixedWidth?: boolean;
+    spin?: boolean;
+}
+export interface IIconFactory {
+    /**
+     * Returns a component that renders an icon.
+     * @param iconOrName If this is a string, it is treated as an icon name. Otherwise it is treated as the icon component.
+     *
+     * The default neo icon factory maps icon names to font-awesome icons.
+     */
+    getIconComponent(iconOrName: any, style?: IconStyle): React.ReactNode | undefined;
+    /**
+     * Returns the original text, or an icon for specific prefixes.
+     * @param textOrIcon If textOrIcon starts with a specific prefix, this will return an icon component, otherwise it will return text.
+     *
+     * By default the neo icon factory will return a font-awesome icon if the prefix is fa- or far-
+     */
+    textOrIcon(textOrIcon: string, style?: IconStyle): React.ReactNode | string;
+}

package/dist/ReactComponents/Icons/IIconFactory.js

@@ -0,0 +1 @@
+export {};

package/dist/ReactComponents/Icons/IconFactory.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { IconStyle, IIconFactory } from "./IIconFactory";
+/** Default icon factory supporting font-awesome strings. */
+export declare class IconFactory implements IIconFactory {
+    getIconComponent(iconOrName: any, style?: IconStyle): React.ReactNode;
+    textOrIcon(textOrIcon: string, style?: IconStyle): React.ReactNode;
+    protected mapStringToIcon(iconName: string, style?: IconStyle): React.ReactNode;
+    protected createIconComponent(iconDescriptor: any, style?: IconStyle): React.ReactNode;
+}

package/dist/ReactComponents/Icons/IconFactory.js

@@ -0,0 +1,45 @@
+import { __decorate } from "tslib";
+import { Utils } from "@singularsystems/neo-core";
+import React from "react";
+import { injectable } from 'inversify';
+/** Default icon factory supporting font-awesome strings. */
+export var IconFactory = /** @class */ (function () {
+    function IconFactory() {
+    }
+    IconFactory.prototype.getIconComponent = function (iconOrName, style) {
+        if (iconOrName !== undefined) {
+            if (typeof iconOrName === "string") {
+                return this.mapStringToIcon(iconOrName, style);
+            }
+            else {
+                return this.createIconComponent(iconOrName, style);
+            }
+        }
+        return undefined;
+    };
+    IconFactory.prototype.textOrIcon = function (textOrIcon, style) {
+        if (textOrIcon.indexOf("fa-") === 0 || textOrIcon.indexOf("far-") === 0) {
+            return this.getIconComponent(textOrIcon, style);
+        }
+        else {
+            return textOrIcon;
+        }
+    };
+    IconFactory.prototype.mapStringToIcon = function (iconName, style) {
+        var className = Utils.getFontAwesomeClass(iconName);
+        if (style === null || style === void 0 ? void 0 : style.fixedWidth) {
+            className += " fa-fw";
+        }
+        if (style === null || style === void 0 ? void 0 : style.spin) {
+            className += " fa-spin";
+        }
+        return React.createElement("i", { className: className });
+    };
+    IconFactory.prototype.createIconComponent = function (iconDescriptor, style) {
+        return iconDescriptor;
+    };
+    IconFactory = __decorate([
+        injectable()
+    ], IconFactory);
+    return IconFactory;
+}());

package/dist/ReactComponents/Icons/index.d.ts

@@ -0,0 +1,3 @@
+export { IIconFactory, IconStyle } from './IIconFactory';
+export { IconFactory } from './IconFactory';
+export { FontAwesomeIconFactory } from './FontAwesomeIconFactory';

package/dist/ReactComponents/Icons/index.js

@@ -0,0 +1,2 @@
+export { IconFactory } from './IconFactory';
+export { FontAwesomeIconFactory } from './FontAwesomeIconFactory';

package/dist/ReactComponents/Input.d.ts

@@ -1,45 +1,45 @@
-import * as React from 'react';
-import { IBindableEditorProps } from './PropTypes';
-import { Components } from '@singularsystems/neo-core';
-import ComponentBase from './ComponentBase';
-import { FormContext } from './FormContext';
-declare type InputType = "text" | "password" | "checkbox" | "switch";
-export interface IInputSpecificProps {
-    /** Type of input to use */
-    type?: InputType;
-    /** Converts input into a textarea if the no of rows is above 1. */
-    rows?: number;
-    /** Label for checkbox. */
-    label?: string | JSX.Element;
-    /**
-     * Shows a button which allows the user to view the password characters.
-     * Automatically sets type to 'password'.
-     */
-    showPasswordButton?: boolean | Components.IButtonOptions;
-}
-export interface IInputProps extends IBindableEditorProps<HTMLInputElement> {
-    input?: IInputSpecificProps;
-}
-export default class Input extends ComponentBase<IInputProps> {
-    static contextType: React.Context<import("./FormContext").FormContextParams>;
-    context: React.ContextType<typeof FormContext>;
-    protected baseType?: InputType;
-    private type;
-    private domRef;
-    private showPassword;
-    constructor(props: IInputProps);
-    private determineType;
-    afterRender(): void;
-    private onChanged;
-    render(): JSX.Element;
-}
-export declare class Textbox extends Input {
-    constructor(props: any);
-}
-export declare class Passwordbox extends Input {
-    constructor(props: any);
-}
-export declare class Checkbox extends Input {
-    constructor(props: any);
-}
-export {};
+import * as React from 'react';
+import { IBindableEditorProps } from './PropTypes';
+import { Components } from '@singularsystems/neo-core';
+import ComponentBase from './ComponentBase';
+import { FormContext } from './FormContext';
+type InputType = "text" | "password" | "checkbox" | "switch" | "tel" | "email";
+export interface IInputSpecificProps {
+    /** Type of input to use */
+    type?: InputType;
+    /** Converts input into a textarea if the no of rows is above 1. */
+    rows?: number;
+    /** Label for checkbox. */
+    label?: string | JSX.Element;
+    /**
+     * Shows a button which allows the user to view the password characters.
+     * Automatically sets type to 'password'.
+     */
+    showPasswordButton?: boolean | Components.IButtonOptions;
+}
+export interface IInputProps extends IBindableEditorProps<HTMLInputElement> {
+    input?: IInputSpecificProps;
+}
+export default class Input extends ComponentBase<IInputProps> {
+    static contextType: React.Context<import("./FormContext").FormContextParams>;
+    context: React.ContextType<typeof FormContext>;
+    protected baseType?: InputType;
+    private type;
+    private domRef;
+    private showPassword;
+    constructor(props: IInputProps);
+    private determineType;
+    afterRender(): void;
+    private onChanged;
+    render(): JSX.Element;
+}
+export declare class Textbox extends Input {
+    constructor(props: any);
+}
+export declare class Passwordbox extends Input {
+    constructor(props: any);
+}
+export declare class Checkbox extends Input {
+    constructor(props: any);
+}
+export {};