@finsemble/finsemble-ui 1.0.0-beta-1

package/react/components/windowTitleBar/components/right/MaximizeButton.js

@@ -0,0 +1,115 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import * as React from "react";
+import { FinsembleHoverDetector } from "../../../legacyControls/FinsembleHoverDetector";
+import { WindowTitleBarContext } from "../../windowTitleBarContext";
+import { getStore, Actions as HeaderActions } from "../../stores/windowTitleBarStore";
+// Re-enable this import once load time for finsemble-core has been eliminated (e.g. tree shaking)
+//import { constants } from "@finsemble/finsemble-api/";
+//const { WINDOWSTATE } = constants;
+export var WINDOWSTATE;
+(function (WINDOWSTATE) {
+    WINDOWSTATE[WINDOWSTATE["NORMAL"] = 0] = "NORMAL";
+    WINDOWSTATE[WINDOWSTATE["MINIMIZED_WAS_NORMAL"] = 1] = "MINIMIZED_WAS_NORMAL";
+    WINDOWSTATE[WINDOWSTATE["MAXIMIZED"] = 2] = "MAXIMIZED";
+    WINDOWSTATE[WINDOWSTATE["MINIMIZED_WAS_MAXIMIZED"] = 3] = "MINIMIZED_WAS_MAXIMIZED";
+    WINDOWSTATE[WINDOWSTATE["TRANSITIONING"] = 4] = "TRANSITIONING";
+})(WINDOWSTATE || (WINDOWSTATE = {}));
+let windowTitleBarStore;
+/**
+ * Maximize button. This button is hidden when the window is maximized. In its place is the restore button.
+ */
+export class MaximizeButton extends React.Component {
+    constructor(props) {
+        super(props);
+        this.bindCorrectContext();
+        /**
+         * We assign in the constructor instead of via a require at the top of the file because the store is initialized asynchronously.
+         */
+        windowTitleBarStore = getStore();
+        const isMaximized = finsembleWindow.windowOptions.windowState === WINDOWSTATE.MAXIMIZED;
+        windowTitleBarStore.setValue({ field: "Maximize.maximized", value: isMaximized });
+        this.state = {
+            maximized: isMaximized,
+            hoverState: "false",
+        };
+    }
+    /**
+     * This is necessary to make sure that the `this` inside of the callback is correct.
+     *
+     * @memberof MaximizeButton
+     */
+    bindCorrectContext() {
+        this.onMaximized = this.onMaximized.bind(this);
+        this.onRestored = this.onRestored.bind(this);
+        this.hoverAction = this.hoverAction.bind(this);
+    }
+    /**
+     * When the state changes, this listener is invoked. There are two states: Not maximized, and maximized. When the window is maximized, the button changes to an icon that denotes "Restore to previous size."
+     *
+     * @param {any} err
+     * @param {any} response
+     * @memberof MaximizeButton
+     */
+    onRestored() {
+        this.setState({ maximized: false });
+    }
+    onMaximized() {
+        this.setState({ maximized: true });
+    }
+    /**
+     * Invoked when the user clicks the button.
+     *
+     * @memberof MaximizeButton
+     */
+    onClick() {
+        HeaderActions.clickMaximize();
+    }
+    /**
+     * Add listeners to the store.
+     *
+     * @memberof MaximizeButton
+     */
+    UNSAFE_componentWillMount() {
+        finsembleWindow === null || finsembleWindow === void 0 ? void 0 : finsembleWindow.addListener("maximized", this.onMaximized);
+        finsembleWindow === null || finsembleWindow === void 0 ? void 0 : finsembleWindow.addListener("restored", this.onRestored);
+    }
+    /**
+     * Remove listeners from the store.
+     *
+     * @memberof MaximizeButton
+     */
+    componentWillUnmount() {
+        finsembleWindow === null || finsembleWindow === void 0 ? void 0 : finsembleWindow.removeListener("maximized", this.onMaximized);
+        finsembleWindow === null || finsembleWindow === void 0 ? void 0 : finsembleWindow.removeListener("restored", this.onRestored);
+    }
+    /**
+     * When your mouse enters/leaves the hoverDetector, this function is invoked.
+     *
+     * @param {any} newHoverState
+     * @memberof LinkerButton
+     */
+    hoverAction(newHoverState) {
+        this.setState({ hoverState: newHoverState });
+    }
+    /**
+     * Render method.
+     *
+     * @returns
+     * @memberof MaximizeButton
+     */
+    render() {
+        const tooltip = this.state.maximized ? "Restore" : "Maximize";
+        // Classes for the maximize button.
+        const iconClasses = this.state.maximized ? "ff-restore" : "ff-maximize";
+        // Classes for the wrap
+        const wrapClasses = `fsbl-icon fsbl-maximize ${this.state.maximized ? "window-restore" : "window-max"}`;
+        return (React.createElement(React.Fragment, null, this.context.showMaximizeButton && (React.createElement("div", { className: wrapClasses, id: "fsbl-window-restore", title: tooltip, "data-hover": this.state.hoverState, onClick: this.onClick },
+            React.createElement(FinsembleHoverDetector, { edge: "top", hoverAction: this.hoverAction }),
+            React.createElement("i", { className: iconClasses })))));
+    }
+}
+MaximizeButton.contextType = WindowTitleBarContext;
+//# sourceMappingURL=MaximizeButton.js.map

package/react/components/windowTitleBar/components/right/MaximizeButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaximizeButton.js","sourceRoot":"","sources":["../../../../../src/components/windowTitleBar/components/right/MaximizeButton.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport * as React from \"react\";\nimport { FinsembleHoverDetector } from \"../../../legacyControls/FinsembleHoverDetector\";\nimport { WindowTitleBarContext } from \"../../windowTitleBarContext\";\nimport { getStore, Actions as HeaderActions } from \"../../stores/windowTitleBarStore\";\nimport StoreModel from \"@finsemble/finsemble-api/types/clients/StoreModel\";\n// Re-enable this import once load time for finsemble-core has been eliminated (e.g. tree shaking)\n//import { constants } from \"@finsemble/finsemble-api/\";\n//const { WINDOWSTATE } = constants;\nexport enum WINDOWSTATE {\n\tNORMAL = 0,\n\tMINIMIZED_WAS_NORMAL = 1,\n\tMAXIMIZED = 2,\n\tMINIMIZED_WAS_MAXIMIZED = 3,\n\tTRANSITIONING = 4,\n}\nlet windowTitleBarStore: StoreModel;\n\ninterface IProps {}\ninterface IState {\n\tmaximized: boolean;\n\thoverState: string;\n}\n\n/**\n * Maximize button. This button is hidden when the window is maximized. In its place is the restore button.\n */\nexport class MaximizeButton extends React.Component<IProps, IState> {\n\tstatic contextType = WindowTitleBarContext;\n\n\tconstructor(props: IProps) {\n\t\tsuper(props);\n\t\tthis.bindCorrectContext();\n\t\t/**\n\t\t * We assign in the constructor instead of via a require at the top of the file because the store is initialized asynchronously.\n\t\t */\n\t\twindowTitleBarStore = getStore();\n\n\t\tconst isMaximized = finsembleWindow.windowOptions.windowState === WINDOWSTATE.MAXIMIZED;\n\t\twindowTitleBarStore.setValue({ field: \"Maximize.maximized\", value: isMaximized });\n\t\tthis.state = {\n\t\t\tmaximized: isMaximized,\n\t\t\thoverState: \"false\",\n\t\t};\n\t}\n\n\t/**\n\t * This is necessary to make sure that the `this` inside of the callback is correct.\n\t *\n\t * @memberof MaximizeButton\n\t */\n\tbindCorrectContext() {\n\t\tthis.onMaximized = this.onMaximized.bind(this);\n\t\tthis.onRestored = this.onRestored.bind(this);\n\t\tthis.hoverAction = this.hoverAction.bind(this);\n\t}\n\n\t/**\n\t * When the state changes, this listener is invoked. There are two states: Not maximized, and maximized. When the window is maximized, the button changes to an icon that denotes \"Restore to previous size.\"\n\t *\n\t * @param {any} err\n\t * @param {any} response\n\t * @memberof MaximizeButton\n\t */\n\tonRestored() {\n\t\tthis.setState({ maximized: false });\n\t}\n\n\tonMaximized() {\n\t\tthis.setState({ maximized: true });\n\t}\n\n\t/**\n\t * Invoked when the user clicks the button.\n\t *\n\t * @memberof MaximizeButton\n\t */\n\tonClick() {\n\t\tHeaderActions.clickMaximize();\n\t}\n\n\t/**\n\t * Add listeners to the store.\n\t *\n\t * @memberof MaximizeButton\n\t */\n\tUNSAFE_componentWillMount() {\n\t\tfinsembleWindow?.addListener(\"maximized\", this.onMaximized);\n\t\tfinsembleWindow?.addListener(\"restored\", this.onRestored);\n\t}\n\n\t/**\n\t * Remove listeners from the store.\n\t *\n\t * @memberof MaximizeButton\n\t */\n\tcomponentWillUnmount() {\n\t\tfinsembleWindow?.removeListener(\"maximized\", this.onMaximized);\n\t\tfinsembleWindow?.removeListener(\"restored\", this.onRestored);\n\t}\n\n\t/**\n\t * When your mouse enters/leaves the hoverDetector, this function is invoked.\n\t *\n\t * @param {any} newHoverState\n\t * @memberof LinkerButton\n\t */\n\thoverAction(newHoverState: string) {\n\t\tthis.setState({ hoverState: newHoverState });\n\t}\n\n\t/**\n\t * Render method.\n\t *\n\t * @returns\n\t * @memberof MaximizeButton\n\t */\n\trender() {\n\t\tconst tooltip = this.state.maximized ? \"Restore\" : \"Maximize\";\n\n\t\t// Classes for the maximize button.\n\t\tconst iconClasses = this.state.maximized ? \"ff-restore\" : \"ff-maximize\";\n\t\t// Classes for the wrap\n\t\tconst wrapClasses = `fsbl-icon fsbl-maximize ${this.state.maximized ? \"window-restore\" : \"window-max\"}`;\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{this.context.showMaximizeButton && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={wrapClasses}\n\t\t\t\t\t\tid=\"fsbl-window-restore\"\n\t\t\t\t\t\ttitle={tooltip}\n\t\t\t\t\t\tdata-hover={this.state.hoverState}\n\t\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\t>\n\t\t\t\t\t\t<FinsembleHoverDetector edge=\"top\" hoverAction={this.hoverAction} />\n\t\t\t\t\t\t<i className={iconClasses}></i>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t}\n}\n"]}

package/react/components/windowTitleBar/components/right/MinimizeButton.d.ts

@@ -0,0 +1,41 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import * as React from "react";
+interface IProps {
+}
+interface IState {
+    hoverState: string;
+}
+export declare class MinimizeButton extends React.Component<IProps, IState> {
+    static contextType: React.Context<import("../../windowTitleBarContext").WindowTitleBarContextType>;
+    constructor(props: IProps);
+    /**
+     * This is necessary to make sure that the `this` inside of the callback is correct.
+     *
+     * @memberof MinimizeButton
+     */
+    bindCorrectContext(): void;
+    /**
+     * Invoked when the user clicks the minimize button.
+     *
+     * @memberof MinimizeButton
+     */
+    onClick(): void;
+    /**
+     * When your mouse enters/leaves the hoverDetector, this function is invoked.
+     *
+     * @param {string} newHoverState
+     * @memberof MinimizeButton
+     */
+    hoverAction(newHoverState: string): void;
+    /**
+     * Render method.
+     *
+     * @returns
+     * @memberof MinimizeButton
+     */
+    render(): JSX.Element;
+}
+export {};

package/react/components/windowTitleBar/components/right/MinimizeButton.js

@@ -0,0 +1,53 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import * as React from "react";
+import { FinsembleHoverDetector } from "../../../legacyControls/FinsembleHoverDetector";
+import { WindowTitleBarContext } from "../../windowTitleBarContext";
+import { Actions as HeaderActions } from "../../stores/windowTitleBarStore";
+export class MinimizeButton extends React.Component {
+    constructor(props) {
+        super(props);
+        this.bindCorrectContext();
+        this.state = { hoverState: "false" };
+    }
+    /**
+     * This is necessary to make sure that the `this` inside of the callback is correct.
+     *
+     * @memberof MinimizeButton
+     */
+    bindCorrectContext() {
+        this.hoverAction = this.hoverAction.bind(this);
+    }
+    /**
+     * Invoked when the user clicks the minimize button.
+     *
+     * @memberof MinimizeButton
+     */
+    onClick() {
+        HeaderActions.clickMinimize();
+    }
+    /**
+     * When your mouse enters/leaves the hoverDetector, this function is invoked.
+     *
+     * @param {string} newHoverState
+     * @memberof MinimizeButton
+     */
+    hoverAction(newHoverState) {
+        this.setState({ hoverState: newHoverState });
+    }
+    /**
+     * Render method.
+     *
+     * @returns
+     * @memberof MinimizeButton
+     */
+    render() {
+        return (React.createElement(React.Fragment, null, this.context.showMinimizeButton && (React.createElement("div", { className: "fsbl-icon fsbl-minimize", id: "fsbl-window-minimize", "data-hover": this.state.hoverState, title: "Minimize", onClick: this.onClick },
+            React.createElement(FinsembleHoverDetector, { edge: "top", hoverAction: this.hoverAction }),
+            React.createElement("i", { className: "ff-minimize" })))));
+    }
+}
+MinimizeButton.contextType = WindowTitleBarContext;
+//# sourceMappingURL=MinimizeButton.js.map

package/react/components/windowTitleBar/components/right/MinimizeButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimizeButton.js","sourceRoot":"","sources":["../../../../../src/components/windowTitleBar/components/right/MinimizeButton.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,gDAAgD,CAAC;AACxF,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAO5E,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,SAAyB;IAGlE,YAAY,KAAa;QACxB,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,KAAK,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC;IACtC,CAAC;IAED;;;;OAIG;IACH,kBAAkB;QACjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,CAAC;IAED;;;;OAIG;IACH,OAAO;QACN,aAAa,CAAC,aAAa,EAAE,CAAC;IAC/B,CAAC;IAED;;;;;OAKG;IACH,WAAW,CAAC,aAAqB;QAChC,IAAI,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC,CAAC;IAC9C,CAAC;IAED;;;;;OAKG;IACH,MAAM;QACL,OAAO,CACN,0CACE,IAAI,CAAC,OAAO,CAAC,kBAAkB,IAAI,CACnC,6BACC,SAAS,EAAC,yBAAyB,EACnC,EAAE,EAAC,sBAAsB,gBACb,IAAI,CAAC,KAAK,CAAC,UAAU,EACjC,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,IAAI,CAAC,OAAO;YAErB,oBAAC,sBAAsB,IAAC,IAAI,EAAC,KAAK,EAAC,WAAW,EAAE,IAAI,CAAC,WAAW,GAAI;YACpE,2BAAG,SAAS,EAAC,aAAa,GAAK,CAC1B,CACN,CACC,CACH,CAAC;IACH,CAAC;;AA3DM,0BAAW,GAAG,qBAAqB,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport * as React from \"react\";\nimport { FinsembleHoverDetector } from \"../../../legacyControls/FinsembleHoverDetector\";\nimport { WindowTitleBarContext } from \"../../windowTitleBarContext\";\nimport { Actions as HeaderActions } from \"../../stores/windowTitleBarStore\";\n\ninterface IProps {}\ninterface IState {\n\thoverState: string;\n}\n\nexport class MinimizeButton extends React.Component<IProps, IState> {\n\tstatic contextType = WindowTitleBarContext;\n\n\tconstructor(props: IProps) {\n\t\tsuper(props);\n\t\tthis.bindCorrectContext();\n\t\tthis.state = { hoverState: \"false\" };\n\t}\n\n\t/**\n\t * This is necessary to make sure that the `this` inside of the callback is correct.\n\t *\n\t * @memberof MinimizeButton\n\t */\n\tbindCorrectContext() {\n\t\tthis.hoverAction = this.hoverAction.bind(this);\n\t}\n\n\t/**\n\t * Invoked when the user clicks the minimize button.\n\t *\n\t * @memberof MinimizeButton\n\t */\n\tonClick() {\n\t\tHeaderActions.clickMinimize();\n\t}\n\n\t/**\n\t * When your mouse enters/leaves the hoverDetector, this function is invoked.\n\t *\n\t * @param {string} newHoverState\n\t * @memberof MinimizeButton\n\t */\n\thoverAction(newHoverState: string) {\n\t\tthis.setState({ hoverState: newHoverState });\n\t}\n\n\t/**\n\t * Render method.\n\t *\n\t * @returns\n\t * @memberof MinimizeButton\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{this.context.showMinimizeButton && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"fsbl-icon fsbl-minimize\"\n\t\t\t\t\t\tid=\"fsbl-window-minimize\"\n\t\t\t\t\t\tdata-hover={this.state.hoverState}\n\t\t\t\t\t\ttitle=\"Minimize\"\n\t\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\t>\n\t\t\t\t\t\t<FinsembleHoverDetector edge=\"top\" hoverAction={this.hoverAction} />\n\t\t\t\t\t\t<i className=\"ff-minimize\"></i>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t}\n}\n"]}

package/react/components/windowTitleBar/components/windowTitle.d.ts

@@ -0,0 +1,66 @@
+import { WindowIdentifier } from "@finsemble/finsemble-api";
+import { ListenerFunction } from "@finsemble/finsemble-api/types/clients/StoreModel";
+import { Component } from "react";
+/**
+ * TAB TITLES: HOW DO THEY WORK?
+ *
+ * Each component, when stacked, will have several tab titles. For each component, there is a window. For each window, there are 2 tab titles per component.
+ *
+ * Whichever component is "active" will render all tabs - exactly one "active" tab and n-1 "inactive" tabs (where n is the number of components in the stack). When
+ * the active component is changed (via a click, for example), then the visible window becomes the window associated with the active component.
+ *
+ * Tab titles may change at any time, and for a number of reasons. For example, the component may execute "document.title='...some title'". Or perhaps the tab title has
+ * been edited by the user. In order to account for all title changes, the following flow is used:
+ *   *something* updates document.title
+ *   The WindowClient for the component will notice the title change and send a router message (via FinsembleWindow.setTitle) with a topic representitive of the windowName
+ *   BaseWindow listens to router changes on the same topic and updates a DistributedStore dedicated to tab names
+ *   The tab components all subscribe to the DistributedStore dedicated to tab names and will update the title accordingly
+ *
+ * This is a "one-way" operation; that is to say that some code will ultimately alter the DistributedStore and the tab title components will read the changes. While this generally
+ * happens with a write to document.title, it can also happen when a user edits the tab title manually. In this case, the component state is altered with a field "persistedTitle"
+ * whose value is the edited title. At render time, the tab title component will use any value in "persistedTitle" as the title, irregardless of any other value.
+ *
+ * NOTE: A tab may be edited only when it is the active component; ergo the call to "setComponentState" is safe.
+ */
+/**
+ * WINDOW TITLES: HOW DO THEY WORK?
+ *
+ * Each application window has a title which is displayed in the operating system taskbar and task switcher. This title comes from the
+ * value of "document.title" in the window title bar component. It is important to understand that when tabs are stacked, the actual window
+ * which holds the window title is the title of the window of the active component. It is therefore important to keep the window title and the
+ * tab titles up to date and synchronized.
+ */
+declare type TitleProps = {
+    windowIdentifier: WindowIdentifier;
+    onUpdate?: Function;
+    titleWidth?: number;
+    onClick?: () => void;
+};
+declare type TitleState = {
+    title: string | undefined;
+    icon: any;
+    windowName?: string;
+};
+export declare class Title extends Component<TitleProps, TitleState> {
+    #private;
+    tabTitleChangedStoreListener: ListenerFunction;
+    _mounted: boolean;
+    constructor(props: TitleProps);
+    /**
+     * Updates the title for both the tab and the window.
+     *
+     * @returns a Promise which resolves nothing
+     */
+    updateTitle(): Promise<void>;
+    /**
+     * React component lifecycle event, triggered once the component has been added to the DOM.
+     */
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    /**
+     * React component lifecycle event, triggered before the component is removed from the DOM.
+     */
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
+export {};