@finsemble/finsemble-ui 1.0.0-beta-6 → 1.0.0-beta-9

package/react/components/common/FinsembleToggleButtonBar.js

@@ -0,0 +1,40 @@
+import React, { useRef } from "react";
+import "./css/FinsembleToggle.css";
+export const FinsembleToggleButtonBar = ({ selected, options, onChange, enabled = true, }) => {
+    const buttonList = useRef(null);
+    const changeButton = (fromKey, direction) => {
+        var _a, _b;
+        const buttons = (_a = buttonList.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[role='radio']");
+        if (buttons === undefined) {
+            return;
+        }
+        if (fromKey === buttons.length) {
+            return;
+        }
+        (_b = buttons[fromKey + direction]) === null || _b === void 0 ? void 0 : _b.focus();
+    };
+    return (React.createElement("span", { className: "finsembleToggleButtonBar" },
+        React.createElement("span", { className: "toggle-text-label-wrapper", role: "radiogroup", ref: buttonList }, options.map((option, key) => {
+            const valid = enabled && !option.disabled;
+            return (React.createElement("span", { "aria-label": option.ariaLabel, key: key, className: `toggle-text-label ${valid ? "" : "disabled"} toggle-${key}`, role: "radio", "aria-checked": selected === option.value, tabIndex: selected === option.value && valid ? 0 : -1, onClick: () => {
+                    valid && onChange(option.value);
+                }, onKeyDown: (e) => {
+                    switch (e.key) {
+                        case "ArrowLeft": {
+                            changeButton(key, -1);
+                            break;
+                        }
+                        case "ArrowRight": {
+                            changeButton(key, 1);
+                            break;
+                        }
+                        case "Enter": {
+                            enabled && onChange(option.value);
+                        }
+                        default: {
+                        }
+                    }
+                } }, option.label));
+        }))));
+};
+//# sourceMappingURL=FinsembleToggleButtonBar.js.map

package/react/components/common/FinsembleToggleButtonBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FinsembleToggleButtonBar.js","sourceRoot":"","sources":["../../../../../src/ui/components/common/FinsembleToggleButtonBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,2BAA2B,CAAC;AAenC,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EACxC,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,GAAG,IAAI,GACiB,EAAE,EAAE;IACnC,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,YAAY,GAAG,CAAC,OAAe,EAAE,SAAiB,EAAE,EAAE;;QAC3D,MAAM,OAAO,GAAG,MAAA,UAAU,CAAC,OAAO,0CAAE,gBAAgB,CAAC,gBAAgB,CAAwC,CAAC;QAC9G,IAAI,OAAO,KAAK,SAAS,EAAE;YAC1B,OAAO;SACP;QAED,IAAI,OAAO,KAAK,OAAO,CAAC,MAAM,EAAE;YAC/B,OAAO;SACP;QAED,MAAA,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC,0CAAE,KAAK,EAAE,CAAC;IACvC,CAAC,CAAC;IAEF,OAAO,CACN,8BAAM,SAAS,EAAC,0BAA0B;QACzC,8BAAM,SAAS,EAAC,2BAA2B,EAAC,IAAI,EAAC,YAAY,EAAC,GAAG,EAAE,UAAU,IAC3E,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE;YAC5B,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;YAC1C,OAAO,CACN,4CACa,MAAM,CAAC,SAAS,EAC5B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,qBAAqB,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,WAAW,GAAG,EAAE,EACvE,IAAI,EAAC,OAAO,kBACE,QAAQ,KAAK,MAAM,CAAC,KAAK,EACvC,QAAQ,EAAE,QAAQ,KAAK,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACrD,OAAO,EAAE,GAAG,EAAE;oBACb,KAAK,IAAI,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACjC,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;oBAChB,QAAQ,CAAC,CAAC,GAAG,EAAE;wBACd,KAAK,WAAW,CAAC,CAAC;4BACjB,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC;4BACtB,MAAM;yBACN;wBACD,KAAK,YAAY,CAAC,CAAC;4BAClB,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;4BACrB,MAAM;yBACN;wBACD,KAAK,OAAO,CAAC,CAAC;4BACb,OAAO,IAAI,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;yBAClC;wBACD,OAAO,CAAC,CAAC;yBACR;qBACD;gBACF,CAAC,IAEA,MAAM,CAAC,KAAK,CACP,CACP,CAAC;QACH,CAAC,CAAC,CACI,CACD,CACP,CAAC;AACH,CAAC,CAAC"}

package/react/components/common/Header.d.ts

@@ -0,0 +1,13 @@
+/*!
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import React from "react";
+import "./css/header.css";
+export interface HeaderProps {
+    children: string;
+    backFunction?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    helpFunction?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const Header: (props: HeaderProps) => JSX.Element;
+//# sourceMappingURL=Header.d.ts.map

package/react/components/common/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/common/Header.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,WAAW;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,eAAO,MAAM,MAAM,UAAW,WAAW,gBAsBxC,CAAC"}

package/react/components/common/Header.js

@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import React from "react";
+import { Button } from "./Button";
+import { ButtonIcon } from "./ButtonIcon";
+import "./css/header.css";
+export const Header = (props) => (React.createElement("div", { className: "view-header" },
+    React.createElement("h1", { className: "view-title" },
+        React.createElement("div", { className: "leftSide" },
+            props.backFunction && (React.createElement(Button, { fashion: "primary", iconBefore: "chevron-left", text: "Back", onClick: (e) => {
+                    if (props.backFunction) {
+                        props.backFunction(e);
+                    }
+                } })),
+            props.children),
+        props.helpFunction && React.createElement(ButtonIcon, { icon: "documentation", text: "Documentation", onClick: props.helpFunction }))));
+//# sourceMappingURL=Header.js.map

package/react/components/common/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../../src/ui/components/common/Header.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAQ1B,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,CAC7C,6BAAK,SAAS,EAAC,aAAa;IAC3B,4BAAI,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,UAAU;YACvB,KAAK,CAAC,YAAY,IAAI,CACtB,oBAAC,MAAM,IACN,OAAO,EAAC,SAAS,EACjB,UAAU,EAAC,cAAc,EACzB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,CAAC,CAAsC,EAAE,EAAE;oBACnD,IAAI,KAAK,CAAC,YAAY,EAAE;wBACvB,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;qBACtB;gBACF,CAAC,GACA,CACF;YAEA,KAAK,CAAC,QAAQ,CACV;QACL,KAAK,CAAC,YAAY,IAAI,oBAAC,UAAU,IAAC,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,eAAe,EAAC,OAAO,EAAE,KAAK,CAAC,YAAY,GAAI,CACxG,CACA,CACN,CAAC"}

package/react/components/common/TimeSelect.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import "./css/time-select.css";
+export interface TimeSelectProps {
+    label?: string;
+    initialTime?: TimeSelectTime;
+    onChange?: (time: TimeSelectTime) => void;
+    enabled?: boolean;
+    className?: string;
+    minuteInterval?: number;
+}
+export declare type TimeSelectTime = {
+    hour: number;
+    minute: number;
+    meridiem?: string;
+};
+export declare const TimeSelect: React.FunctionComponent<TimeSelectProps>;
+//# sourceMappingURL=TimeSelect.d.ts.map

package/react/components/common/TimeSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeSelect.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/common/TimeSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,uBAAuB,CAAC;AAG/B,MAAM,WAAW,eAAe;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,oBAAY,cAAc,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAQF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAsN/D,CAAC"}

package/react/components/common/TimeSelect.js

@@ -0,0 +1,174 @@
+import React, { useEffect, useState } from "react";
+import "./css/time-select.css";
+import DefaultDropdownButton from "../shared/DefaultDropdownButton";
+const DEFAULT_VALUE = {
+    hour: 4,
+    minute: 0,
+    meridiem: "AM",
+};
+export const TimeSelect = ({ initialTime, enabled = true, label = "Time:", onChange, className = "", minuteInterval = 15, }) => {
+    /**
+     * Prevents change event from triggering on initial setup
+     */
+    const [changed, setChanged] = useState(false);
+    const [time, setTime] = useState(initialTime !== null && initialTime !== void 0 ? initialTime : DEFAULT_VALUE);
+    let wrapClasses = `time-select ${className}`;
+    if (!enabled) {
+        wrapClasses = `${wrapClasses} disabled-time-select`;
+    }
+    // Create an array 1-12.
+    let HOURS = [];
+    for (let i = 1; i < 13; i++) {
+        HOURS.push(i);
+    }
+    let MINUTES = ["00"];
+    for (let i = 1; i < 60; i++) {
+        if (i % minuteInterval == 0) {
+            MINUTES.push(i);
+        }
+    }
+    /**
+     * This method will transform 8 PM into 20:00. It also handles when the user changes the meridiem.
+     * e.g., 8PM (20) => 8AM (8).
+     * Set the minute, then set the 'finsemble.scheduledRestart' preference via the method on the Actions object.
+     * @param {event} e
+     */
+    const setHour = (e) => {
+        let hour = Number(e);
+        if (hour < 12 && time.meridiem === "PM") {
+            hour = hour + 12;
+        }
+        else if (hour > 12 && time.meridiem === "AM") {
+            hour = hour - 12;
+        }
+        else if (time.meridiem === "AM" && hour === 12) {
+            hour = 0;
+        }
+        setTime(Object.assign(Object.assign({}, time), { hour }));
+    };
+    /**
+     * Set the minute, then set the 'finsemble.scheduledRestart' preference via the method on the Actions object.
+     * @param {event} e
+     */
+    const setMinute = (e) => {
+        const minute = Number(e);
+        time.minute = minute;
+        setTime(Object.assign(Object.assign({}, time), { minute }));
+    };
+    /**
+     * Sets the meridiem for the time (AM or PM). This will trigger setHour to be called in a hook
+     * @param {event} e
+     */
+    const setMeridiem = (e) => {
+        const meridiem = e;
+        setTime(Object.assign(Object.assign({}, time), { meridiem }));
+    };
+    const correctMeridiem = () => {
+        if (!time.meridiem) {
+            let localMeridiem = "AM";
+            if (time.hour > 12 || (time.hour == 0 && time.minute == 0)) {
+                localMeridiem = "PM";
+            }
+            setMeridiem(localMeridiem);
+        }
+    };
+    /**
+     * The meridiem has changed, update the hour
+     */
+    useEffect(() => {
+        setHour(time.hour);
+    }, [time.meridiem]);
+    /**
+     * Call on change when the hour and minute values have changed
+     */
+    useEffect(() => {
+        correctMeridiem();
+        if (enabled && onChange && changed) {
+            onChange(time);
+        }
+    }, [time.hour, time.minute]);
+    const hourOptions = HOURS.map((hour) => {
+        return {
+            optionLabel: hour,
+            optionValue: hour,
+            clickHandler: () => {
+                setChanged(true);
+                setHour(hour);
+            },
+        };
+    });
+    const minuteOptions = MINUTES.map((minute) => {
+        return {
+            optionLabel: minute,
+            optionValue: minute,
+            clickHandler: () => {
+                setChanged(true);
+                setMinute(minute);
+            },
+        };
+    });
+    const getDisplayHour = () => {
+        if (time.meridiem === "AM" && time.hour === 0) {
+            return 12;
+        }
+        else if (time.meridiem === "PM" && time.hour > 12) {
+            return time.hour - 12;
+        }
+        else {
+            return time.hour;
+        }
+    };
+    const getDisplayMinute = () => {
+        if (time.minute === 0)
+            return "00";
+        else {
+            return String(time.minute).length === 1 ? `0${time.minute}` : time.minute;
+        }
+    };
+    return (React.createElement("div", { className: wrapClasses, style: { display: "flex" } },
+        React.createElement("span", { className: "time-select-label" }, label),
+        React.createElement("div", { className: "row-section", style: { width: "10px", marginRight: "40px" } },
+            React.createElement(DefaultDropdownButton, { classNames: "push-right", allowEmpty: false, caretLocation: "right", buttonOptions: hourOptions, buttonLabel: `Hour, ${getDisplayHour().toString()}`, defaultSelection: {
+                    optionLabel: getDisplayHour().toString(),
+                    optionValue: getDisplayHour(),
+                    clickHandler: () => {
+                        setHour(getDisplayHour());
+                    },
+                }, enabled: enabled })),
+        React.createElement("div", { className: "row-section", style: { marginLeft: 30, marginRight: 10, marginTop: 5 } }, "\u00A0:\u00A0"),
+        React.createElement("div", { style: { width: "10px", marginRight: "65px" } },
+            React.createElement(DefaultDropdownButton, { classNames: "push-right", allowEmpty: false, caretLocation: "right", buttonOptions: minuteOptions, buttonLabel: `Minute, ${getDisplayMinute()}`, defaultSelection: {
+                    optionLabel: getDisplayMinute(),
+                    optionValue: time.minute,
+                    clickHandler: () => {
+                        setMinute(time.minute);
+                    },
+                }, enabled: enabled })),
+        "\u00A0",
+        React.createElement("div", { className: "row-section", style: { width: "10px" } },
+            React.createElement(DefaultDropdownButton, { classNames: "push-right", allowEmpty: false, caretLocation: "right", buttonOptions: [
+                    {
+                        optionLabel: "AM",
+                        optionValue: "AM",
+                        clickHandler: () => {
+                            setChanged(true);
+                            setMeridiem("AM");
+                        },
+                    },
+                    {
+                        optionLabel: "PM",
+                        optionValue: "PM",
+                        clickHandler: () => {
+                            setChanged(true);
+                            setMeridiem("PM");
+                        },
+                    },
+                ], defaultSelection: {
+                    optionLabel: time.meridiem,
+                    optionValue: time.meridiem,
+                    clickHandler: () => {
+                        setHour(time.meridiem);
+                    },
+                }, enabled: enabled }))));
+};
+//# sourceMappingURL=TimeSelect.js.map

package/react/components/common/TimeSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeSelect.js","sourceRoot":"","sources":["../../../../../src/ui/components/common/TimeSelect.tsx"],"names":[],"mappings":"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"}

package/react/components/common/css/FinsembleToggle.css

@@ -0,0 +1,36 @@
+.finsembleToggleButtonBar {
+	padding: 4px;
+	border-radius: 5px;
+	cursor: pointer;
+}
+
+.finsembleToggleButtonBar .toggle-text-label-wrapper {
+	display: flex;
+	max-width: 330px;
+	border: var(--core-primary) 2px solid;
+	border-radius: 7px;
+	background: var(--core-primary);
+}
+
+.finsembleToggleButtonBar .toggle-text-label.disabled {
+	opacity: 0.5;
+}
+
+.finsembleToggleButtonBar .toggle-text-label {
+	border-radius: 5px;
+	background: var(--core-primary);
+	padding: 2px 10px;
+}
+
+.finsembleToggleButtonBar .toggle-text-label[aria-checked="true"] {
+	background-color: var(--accent-primary-1);
+}
+
+.finsembleToggleButtonBar .toggle-text-label[aria-checked="false"]:not(.disabled):focus,
+.finsembleToggleButtonBar .toggle-text-label[aria-checked="false"]:not(.disabled):hover {
+	background-color: var(--core-primary-3);
+}
+
+.finsembleToggleButtonBar .toggle-text-label:not(.disabled) {
+	cursor: pointer;
+}

package/react/components/common/css/accordion.css

@@ -0,0 +1,100 @@
+.accordion {
+	width: 100%;
+}
+
+.accordion-cb {
+	display: none;
+}
+
+.accordion.medium > button {
+	font-size: 1.2em;
+}
+
+.accordion.small .finsemble-icon-caret {
+	font-size: 0.8em;
+}
+
+.accordion button {
+	width: 100%;
+	display: flex;
+	justify-content: left;
+	padding: 0.5em 0;
+}
+
+.accordion button:hover {
+	background: #373b43;
+}
+
+.accordion > .accordion-summary {
+	margin: 0 24px 0.5em;
+}
+
+.accordion > .accordion-content {
+	margin: 0.5em 22px 0;
+	padding-bottom: 0;
+}
+
+.accordion > button .accordion-caret {
+	transform: rotate(-90deg) translate(0.1em);
+	flex-basis: 1.5em;
+}
+
+.accordion input:checked + button .accordion-caret {
+	transform: rotate(0) translate(0, 0.2em);
+}
+
+.accordion input:not(:checked) ~ .accordion-content {
+	display: none;
+}
+
+input:checked ~ .accordion-content {
+	display: block;
+}
+
+/** Animations */
+.accordion.enter-active > button .accordion-caret {
+	animation-duration: 200ms;
+	animation-name: rotate-icon;
+}
+
+.accordion.exit-active > button .accordion-caret {
+	animation-duration: 200ms;
+	animation-name: rotate-icon;
+	animation-direction: reverse;
+}
+
+.accordion.enter-active > .accordion-content {
+	overflow: hidden;
+	animation-duration: 500ms;
+	animation-name: open-content;
+}
+
+.accordion.exit-active > .accordion-content {
+	/* stylelint-disable-next-line declaration-no-important */
+	display: block !important;
+	overflow: hidden;
+	animation-duration: 500ms;
+	animation-name: open-content;
+	animation-direction: reverse;
+	max-height: 0;
+}
+
+@keyframes rotate-icon {
+	from {
+		transform: rotate(-90deg) translate(0.1em);
+	}
+
+	to {
+		transform: rotate(0) translate(0, 0.2em);
+	}
+}
+
+@keyframes open-content {
+	from {
+		max-height: 1px;
+	}
+
+	to {
+		max-height: 2000px;
+	}
+}