@finsemble/finsemble-ui 7.3.1 → 8.0.0-alpha-3

package/react/components/appCatalog/components/Tag.js

@@ -1,23 +0,0 @@
-/*!
- * Copyright 2017 by ChartIQ, Inc.
- * All rights reserved.
- */
-import React from "react";
-/**
- * A display component for tag name. Contains a stylized label
- * @param {object} props Component props
- * @param {string} props.name The name of the tag
- * @param {func} props.removeTag Parent function to remove a tag from active filters
- */
-const Tag = (props) => {
-    const remove = () => {
-        props.removeTag(props.name);
-    };
-    return (React.createElement("div", { className: "app-tag" },
-        React.createElement("div", { className: "tag-content" },
-            React.createElement("div", { className: "tag-name" }, props.name),
-            "\u00A0\u00A0",
-            React.createElement("i", { className: "ff-close tag-delete", onClick: remove }))));
-};
-export default Tag;
-//# sourceMappingURL=Tag.js.map

package/react/components/appCatalog/components/Tag.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../../src/components/appCatalog/components/Tag.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B;;;;;GAKG;AACH,MAAM,GAAG,GAAG,CAAC,KAAY,EAAE,EAAE;IAC5B,MAAM,MAAM,GAAG,GAAG,EAAE;QACnB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,OAAO,CACN,6BAAK,SAAS,EAAC,SAAS;QACvB,6BAAK,SAAS,EAAC,aAAa;YAC3B,6BAAK,SAAS,EAAC,UAAU,IAAE,KAAK,CAAC,IAAI,CAAO;;YAC5C,2BAAG,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAE,MAAM,GAAM,CACnD,CACD,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,GAAG,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport React from \"react\";\n\ninterface Props {\n\tname: string;\n\tremoveTag: (tag: string) => void;\n}\n\n/**\n * A display component for tag name. Contains a stylized label\n * @param {object} props Component props\n * @param {string} props.name The name of the tag\n * @param {func} props.removeTag Parent function to remove a tag from active filters\n */\nconst Tag = (props: Props) => {\n\tconst remove = () => {\n\t\tprops.removeTag(props.name);\n\t};\n\n\treturn (\n\t\t<div className=\"app-tag\">\n\t\t\t<div className=\"tag-content\">\n\t\t\t\t<div className=\"tag-name\">{props.name}</div>&nbsp;&nbsp;\n\t\t\t\t<i className=\"ff-close tag-delete\" onClick={remove}></i>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default Tag;\n"]}

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

@@ -1,11 +0,0 @@
-import React, { ReactElement } from "react";
-import "./css/accordion.css";
-export interface AccordionProps {
-    id: string;
-    label: string;
-    summary?: ReactElement | string;
-    startOpen?: boolean;
-    className?: string;
-    size?: "normal" | "medium";
-}
-export declare const Accordion: React.FunctionComponent<AccordionProps>;

package/react/components/common/Accordion.js

@@ -1,20 +0,0 @@
-import React, { useState } from "react";
-import "./css/accordion.css";
-import { FinsembleIcon } from "./FinsembleIcon";
-import { CSSTransition } from "react-transition-group";
-export const Accordion = ({ id, label, summary, startOpen = false, className = "", children, size = "small", }) => {
-    const [isOpen, setIsOpen] = useState(startOpen);
-    const toggle = () => {
-        setIsOpen(!isOpen);
-    };
-    const containerClassName = ["accordion", size, className].join(" ");
-    return (React.createElement(CSSTransition, { in: isOpen, timeout: 500, className: containerClassName },
-        React.createElement("div", null,
-            React.createElement("input", { type: "checkbox", id: `accordion-cb-${id}`, checked: isOpen, readOnly: true, "aria-hidden": "true", className: "accordion-cb" }),
-            React.createElement("button", { onClick: toggle, "aria-controls": `content-${id}`, "aria-expanded": isOpen ? "true" : "false", id: `accordion-control-${id}` },
-                React.createElement(FinsembleIcon, { className: "accordion-caret", icon: "caret" }),
-                React.createElement("span", { className: "label" }, label)),
-            summary && (React.createElement("div", { className: "accordion-summary", id: `summary-${id}` }, summary)),
-            React.createElement("div", { id: `content-${id}`, role: "region", "aria-labelledby": `accordion-control-${id}`, "aria-hidden": isOpen ? "false" : "true", "aria-describedby": summary && `summary-${id}`, className: "accordion-content" }, children))));
-};
-//# sourceMappingURL=Accordion.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/components/common/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAWvD,MAAM,CAAC,MAAM,SAAS,GAA4C,CAAC,EAClE,EAAE,EACF,KAAK,EACL,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,IAAI,GAAG,OAAO,GACd,EAAE,EAAE;IACJ,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,SAAS,CAAC,CAAC;IAEzD,MAAM,MAAM,GAAG,GAAG,EAAE;QACnB,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,WAAW,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACpE,OAAO,CACN,oBAAC,aAAa,IAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,kBAAkB;QACrE;YACC,+BACC,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,gBAAgB,EAAE,EAAE,EACxB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,IAAI,iBACF,MAAM,EAClB,SAAS,EAAC,cAAc,GACvB;YACF,gCACC,OAAO,EAAE,MAAM,mBACA,WAAW,EAAE,EAAE,mBACf,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EACxC,EAAE,EAAE,qBAAqB,EAAE,EAAE;gBAE7B,oBAAC,aAAa,IAAC,SAAS,EAAC,iBAAiB,EAAC,IAAI,EAAE,OAAO,GAAI;gBAC5D,8BAAM,SAAS,EAAC,OAAO,IAAE,KAAK,CAAQ,CAC9B;YACR,OAAO,IAAI,CACX,6BAAK,SAAS,EAAC,mBAAmB,EAAC,EAAE,EAAE,WAAW,EAAE,EAAE,IACpD,OAAO,CACH,CACN;YACD,6BACC,EAAE,EAAE,WAAW,EAAE,EAAE,EACnB,IAAI,EAAC,QAAQ,qBACI,qBAAqB,EAAE,EAAE,iBAC7B,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,sBACpB,OAAO,IAAI,WAAW,EAAE,EAAE,EAC5C,SAAS,EAAC,mBAAmB,IAE5B,QAAQ,CACJ,CACD,CACS,CAChB,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { ReactElement, useState } from \"react\";\nimport \"./css/accordion.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\nimport { CSSTransition } from \"react-transition-group\";\n\nexport interface AccordionProps {\n\tid: string;\n\tlabel: string;\n\tsummary?: ReactElement | string;\n\tstartOpen?: boolean;\n\tclassName?: string;\n\tsize?: \"normal\" | \"medium\";\n}\n\nexport const Accordion: React.FunctionComponent<AccordionProps> = ({\n\tid,\n\tlabel,\n\tsummary,\n\tstartOpen = false,\n\tclassName = \"\",\n\tchildren,\n\tsize = \"small\",\n}) => {\n\tconst [isOpen, setIsOpen] = useState<boolean>(startOpen);\n\n\tconst toggle = () => {\n\t\tsetIsOpen(!isOpen);\n\t};\n\n\tconst containerClassName = [\"accordion\", size, className].join(\" \");\n\treturn (\n\t\t<CSSTransition in={isOpen} timeout={500} className={containerClassName}>\n\t\t\t<div>\n\t\t\t\t<input\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tid={`accordion-cb-${id}`}\n\t\t\t\t\tchecked={isOpen}\n\t\t\t\t\treadOnly={true}\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName=\"accordion-cb\"\n\t\t\t\t/>\n\t\t\t\t<button\n\t\t\t\t\tonClick={toggle}\n\t\t\t\t\taria-controls={`content-${id}`}\n\t\t\t\t\taria-expanded={isOpen ? \"true\" : \"false\"}\n\t\t\t\t\tid={`accordion-control-${id}`}\n\t\t\t\t>\n\t\t\t\t\t<FinsembleIcon className=\"accordion-caret\" icon={\"caret\"} />\n\t\t\t\t\t<span className=\"label\">{label}</span>\n\t\t\t\t</button>\n\t\t\t\t{summary && (\n\t\t\t\t\t<div className=\"accordion-summary\" id={`summary-${id}`}>\n\t\t\t\t\t\t{summary}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tid={`content-${id}`}\n\t\t\t\t\trole=\"region\"\n\t\t\t\t\taria-labelledby={`accordion-control-${id}`}\n\t\t\t\t\taria-hidden={isOpen ? \"false\" : \"true\"}\n\t\t\t\t\taria-describedby={summary && `summary-${id}`}\n\t\t\t\t\tclassName=\"accordion-content\"\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</CSSTransition>\n\t);\n};\n"]}

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

@@ -1,4 +0,0 @@
-import React from "react";
-import { AdvancedButtonProps } from "./Button";
-import "./css/button.css";
-export declare const ButtonTile: React.FC<AdvancedButtonProps>;

package/react/components/common/ButtonTile.js

@@ -1,12 +0,0 @@
-import React from "react";
-import { fashion_class_lookup } from "./Button";
-import "./css/button.css";
-import { FinsembleIcon } from "./FinsembleIcon";
-export const ButtonTile = ({ text = "", icon, disabled = false, onClick = () => { }, className = "", }) => {
-    const containerClassName = fashion_class_lookup.tile;
-    return (React.createElement("div", { className: `${containerClassName} ${className}` },
-        React.createElement("button", { onClick: onClick, disabled: disabled },
-            icon && React.createElement(FinsembleIcon, { className: `${fashion_class_lookup.tile}-icon`, icon: icon }),
-            React.createElement("div", null, text))));
-};
-//# sourceMappingURL=ButtonTile.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonTile.js","sourceRoot":"","sources":["../../../src/components/common/ButtonTile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,oBAAoB,EAAE,MAAM,UAAU,CAAC;AACrE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,CAAC,MAAM,UAAU,GAAkC,CAAC,EACzD,IAAI,GAAG,EAAE,EACT,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAClB,SAAS,GAAG,EAAE,GACd,EAAE,EAAE;IACJ,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,IAAI,CAAC;IAErD,OAAO,CACN,6BAAK,SAAS,EAAE,GAAG,kBAAkB,IAAI,SAAS,EAAE;QACnD,gCAAQ,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ;YAC1C,IAAI,IAAI,oBAAC,aAAa,IAAC,SAAS,EAAE,GAAG,oBAAoB,CAAC,IAAI,OAAO,EAAE,IAAI,EAAE,IAAI,GAAkB;YAEpG,iCAAM,IAAI,CAAO,CACT,CACJ,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from \"react\";\nimport { AdvancedButtonProps, fashion_class_lookup } from \"./Button\";\nimport \"./css/button.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\n\nexport const ButtonTile: React.FC<AdvancedButtonProps> = ({\n\ttext = \"\",\n\ticon,\n\tdisabled = false,\n\tonClick = () => {},\n\tclassName = \"\",\n}) => {\n\tconst containerClassName = fashion_class_lookup.tile;\n\n\treturn (\n\t\t<div className={`${containerClassName} ${className}`}>\n\t\t\t<button onClick={onClick} disabled={disabled}>\n\t\t\t\t{icon && <FinsembleIcon className={`${fashion_class_lookup.tile}-icon`} icon={icon}></FinsembleIcon>}\n\n\t\t\t\t<div>{text}</div>\n\t\t\t</button>\n\t\t</div>\n\t);\n};\n"]}

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

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-import "./css/color-picker.css";
-export declare enum RGBA_CHANNEL {
-    RED = 0,
-    GREEN = 1,
-    BLUE = 2,
-    ALPHA = 3
-}
-export declare function colorToRGBA(color: string): Uint8ClampedArray;
-export interface ColorPickerProps {
-    startColor: string;
-    updateColor: (newColor: string) => void;
-    id?: string;
-}
-/**
- * ColorPicker component to update theme variables.  Displays a browser color input alongside a text version for hex color values.
- *
- * @param {{ [id]: string, startColor: string; updateColor: function }} { id, startColor, callback }
- */
-export declare const ColorPicker: ({ id, startColor, updateColor }: ColorPickerProps) => JSX.Element;

package/react/components/common/ColorPicker.js

@@ -1,92 +0,0 @@
-import React, { useState } from "react";
-import "./css/color-picker.css";
-const RE_HEX_COLOR = /^#[0-9a-f]{6}$/i;
-export var RGBA_CHANNEL;
-(function (RGBA_CHANNEL) {
-    RGBA_CHANNEL[RGBA_CHANNEL["RED"] = 0] = "RED";
-    RGBA_CHANNEL[RGBA_CHANNEL["GREEN"] = 1] = "GREEN";
-    RGBA_CHANNEL[RGBA_CHANNEL["BLUE"] = 2] = "BLUE";
-    RGBA_CHANNEL[RGBA_CHANNEL["ALPHA"] = 3] = "ALPHA";
-})(RGBA_CHANNEL || (RGBA_CHANNEL = {}));
-// From https://stackoverflow.com/a/24390910
-export function colorToRGBA(color) {
-    // Returns the color as an array of [r, g, b, a] -- all range from 0 - 255
-    // color must be a valid canvas fillStyle. This will cover most anything
-    // you'd want to use.
-    // Examples:
-    // colorToRGBA('red')  # [255, 0, 0, 255]
-    // colorToRGBA('#f00') # [255, 0, 0, 255]
-    const cvs = document.createElement("canvas");
-    cvs.height = 1;
-    cvs.width = 1;
-    const ctx = cvs.getContext("2d");
-    ctx.fillStyle = color;
-    ctx.fillRect(0, 0, 1, 1);
-    return ctx.getImageData(0, 0, 1, 1).data;
-}
-function byteToHex(num) {
-    // Turns a number (0-255) into a 2-character hex number (00-ff)
-    return `0${num.toString(16)}`.slice(-2);
-}
-function colorToHex(color) {
-    // Convert any CSS color to a hex representation
-    // Examples:
-    // colorToHex('red')            # '#ff0000'
-    // colorToHex('rgb(255, 0, 0)') # '#ff0000'
-    // colorToHex('#ff0000') # '#ff0000'
-    if (color.match(RE_HEX_COLOR) !== null) {
-        return color;
-    }
-    const rgba = colorToRGBA(color);
-    const hex = [0, 1, 2].map((idx) => byteToHex(rgba[idx])).join("");
-    return `#${hex}`;
-}
-/**
- * ColorPicker component to update theme variables.  Displays a browser color input alongside a text version for hex color values.
- *
- * @param {{ [id]: string, startColor: string; updateColor: function }} { id, startColor, callback }
- */
-export const ColorPicker = ({ id, startColor, updateColor }) => {
-    /**
-     * There is a delicate ballet here between the color picket and the input box. This is because this color picker
-     * has state (when the end user is in the midst of picking a color by editing the input field) and also
-     * receives state (via props). When prop startColor is received, it overrides the input box. But when the user is editing,
-     * the input box overrides the prop.
-     */
-    const [priorColor, setPriorColor] = useState(startColor);
-    /**
-     * inputValue state is set _whenever the user is editing the input box_. Only at this time, the value in the input
-     * box reflects the user's editing. If at any point the editing yields a valid color then it is immediately
-     * passed up as an action, which updates the screen and resets the startColor prop. Whenever an invalid color has
-     * been entered, the value is flagged invalid which causes the input box to be underlined red.
-     */
-    const [inputValue, setInputValue] = useState(null);
-    /**
-     * If the value of the startColor prop changes then we reset the input to the new color. This occurs for instance
-     * when the user presses the light or dark themes on the theme page. At that point, the parent sends new values
-     * down to all color pickers as a new prop.
-     */
-    if (priorColor !== startColor) {
-        setPriorColor(startColor);
-        setInputValue(null);
-    }
-    // If the value in the input box isn't valid then give UI feedback
-    const isValid = inputValue === null || inputValue.match(RE_HEX_COLOR) !== null;
-    // The swatch always displays the current color from prop. This won't change
-    // until a valid alternative color is picked.
-    const color = colorToHex(startColor);
-    const onColorChanged = ({ target }) => {
-        const maybeNewColor = target.value;
-        // Update the value in the input box
-        setInputValue(maybeNewColor);
-        // If the color is valid then send an update
-        const isNewValueValid = maybeNewColor.match(RE_HEX_COLOR) !== null;
-        if (isNewValueValid) {
-            updateColor(maybeNewColor);
-        }
-    };
-    return (React.createElement("div", { className: "color-picker" },
-        React.createElement("input", { className: "theme-color-picker", type: "color", value: color, onChange: onColorChanged, "aria-hidden": "true" }),
-        React.createElement("input", Object.assign({ className: "theme-color-picker-text", type: "text", "aria-invalid": !isValid, value: inputValue !== null && inputValue !== void 0 ? inputValue : color, onChange: onColorChanged }, { id }))));
-};
-//# sourceMappingURL=ColorPicker.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/common/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport \"./css/color-picker.css\";\n\nconst RE_HEX_COLOR = /^#[0-9a-f]{6}$/i;\n\nexport enum RGBA_CHANNEL {\n\tRED = 0,\n\tGREEN = 1,\n\tBLUE = 2,\n\tALPHA = 3,\n}\n\n// From https://stackoverflow.com/a/24390910\nexport function colorToRGBA(color: string) {\n\t// Returns the color as an array of [r, g, b, a] -- all range from 0 - 255\n\t// color must be a valid canvas fillStyle. This will cover most anything\n\t// you'd want to use.\n\t// Examples:\n\t// colorToRGBA('red')  # [255, 0, 0, 255]\n\t// colorToRGBA('#f00') # [255, 0, 0, 255]\n\tconst cvs = document.createElement(\"canvas\");\n\tcvs.height = 1;\n\tcvs.width = 1;\n\n\tconst ctx = cvs.getContext(\"2d\")!;\n\tctx.fillStyle = color;\n\tctx.fillRect(0, 0, 1, 1);\n\treturn ctx.getImageData(0, 0, 1, 1).data;\n}\n\nfunction byteToHex(num: number) {\n\t// Turns a number (0-255) into a 2-character hex number (00-ff)\n\treturn `0${num.toString(16)}`.slice(-2);\n}\n\nfunction colorToHex(color: string) {\n\t// Convert any CSS color to a hex representation\n\t// Examples:\n\t// colorToHex('red')            # '#ff0000'\n\t// colorToHex('rgb(255, 0, 0)') # '#ff0000'\n\t// colorToHex('#ff0000') # '#ff0000'\n\tif (color.match(RE_HEX_COLOR) !== null) {\n\t\treturn color;\n\t}\n\tconst rgba = colorToRGBA(color);\n\tconst hex = [0, 1, 2].map((idx) => byteToHex(rgba[idx])).join(\"\");\n\treturn `#${hex}`;\n}\n\nexport interface ColorPickerProps {\n\tstartColor: string;\n\tupdateColor: (newColor: string) => void;\n\tid?: string;\n}\n\n/**\n * ColorPicker component to update theme variables.  Displays a browser color input alongside a text version for hex color values.\n *\n * @param {{ [id]: string, startColor: string; updateColor: function }} { id, startColor, callback }\n */\nexport const ColorPicker = ({ id, startColor, updateColor }: ColorPickerProps) => {\n\t/**\n\t * There is a delicate ballet here between the color picket and the input box. This is because this color picker\n\t * has state (when the end user is in the midst of picking a color by editing the input field) and also\n\t * receives state (via props). When prop startColor is received, it overrides the input box. But when the user is editing,\n\t * the input box overrides the prop.\n\t */\n\tconst [priorColor, setPriorColor] = useState(startColor);\n\t/**\n\t * inputValue state is set _whenever the user is editing the input box_. Only at this time, the value in the input\n\t * box reflects the user's editing. If at any point the editing yields a valid color then it is immediately\n\t * passed up as an action, which updates the screen and resets the startColor prop. Whenever an invalid color has\n\t * been entered, the value is flagged invalid which causes the input box to be underlined red.\n\t */\n\tconst [inputValue, setInputValue] = useState<string | null>(null);\n\n\t/**\n\t * If the value of the startColor prop changes then we reset the input to the new color. This occurs for instance\n\t * when the user presses the light or dark themes on the theme page. At that point, the parent sends new values\n\t * down to all color pickers as a new prop.\n\t */\n\tif (priorColor !== startColor) {\n\t\tsetPriorColor(startColor);\n\t\tsetInputValue(null);\n\t}\n\n\t// If the value in the input box isn't valid then give UI feedback\n\tconst isValid = inputValue === null || inputValue.match(RE_HEX_COLOR) !== null;\n\n\t// The swatch always displays the current color from prop. This won't change\n\t// until a valid alternative color is picked.\n\tconst color = colorToHex(startColor);\n\n\tconst onColorChanged = ({ target }: { target: HTMLInputElement }) => {\n\t\tconst maybeNewColor = target.value;\n\t\t// Update the value in the input box\n\t\tsetInputValue(maybeNewColor);\n\t\t// If the color is valid then send an update\n\t\tconst isNewValueValid = maybeNewColor.match(RE_HEX_COLOR) !== null;\n\t\tif (isNewValueValid) {\n\t\t\tupdateColor(maybeNewColor);\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className=\"color-picker\">\n\t\t\t<input\n\t\t\t\tclassName=\"theme-color-picker\"\n\t\t\t\ttype=\"color\"\n\t\t\t\tvalue={color}\n\t\t\t\tonChange={onColorChanged}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t></input>\n\t\t\t<input\n\t\t\t\tclassName=\"theme-color-picker-text\"\n\t\t\t\ttype=\"text\"\n\t\t\t\taria-invalid={!isValid}\n\t\t\t\tvalue={inputValue ?? color}\n\t\t\t\tonChange={onColorChanged}\n\t\t\t\t{...{ id }}\n\t\t\t></input>\n\t\t</div>\n\t);\n};\n"]}

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

@@ -1,22 +0,0 @@
-import React from "react";
-import "./css/drop-zone.css";
-export declare type FileWithPath = File & {
-    path?: string;
-};
-export declare type DropZoneProps = {
-    children: React.ReactNode;
-    processFile: (fileObj: FileWithPath, index: number) => void;
-    suppress?: boolean;
-};
-/***
- * Component that serves as a drop zone. It also keeps track of visual concerns and event handlers for
- * drag-and-drop.
- *
- * The DropZone component is intended to be a container element for other elements, such as text, lists,
- * images, input elements, etc.
- *
- * @callback processFile - This function will be called for each file that is dropped in the dropzone.
- * @param {ReactNode} children - React will fill this in.
- * @param {boolean} suppress=false - If the dropzone-ness should be suppressed, which would turn this container into just a div
- */
-export declare const DropZone: ({ processFile, children, suppress }: DropZoneProps) => JSX.Element;

package/react/components/common/DropZone.js

@@ -1,65 +0,0 @@
-import React, { useState } from "react";
-import "./css/drop-zone.css";
-/***
- * Component that serves as a drop zone. It also keeps track of visual concerns and event handlers for
- * drag-and-drop.
- *
- * The DropZone component is intended to be a container element for other elements, such as text, lists,
- * images, input elements, etc.
- *
- * @callback processFile - This function will be called for each file that is dropped in the dropzone.
- * @param {ReactNode} children - React will fill this in.
- * @param {boolean} suppress=false - If the dropzone-ness should be suppressed, which would turn this container into just a div
- */
-export const DropZone = ({ processFile, children, suppress = false }) => {
-    const [isDragging, setIsDragging] = useState(false);
-    const [potential, setPotential] = useState(false);
-    const [singleton, setSingleton] = useState(true);
-    const preventDefaults = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-    };
-    // Check if something is being dragged somewhere on the page
-    // If dragging is happening on the page, there will be a visual indication for potential drop zone
-    if (singleton) {
-        // "dragenter" and "dragleave" events are fired off of every single child element, and counting them isn't reliable
-        // so, when "dragover" events are fired, we know dragging is happening.
-        // we will wait 100ms after the last "dragover" event is fired, and then turn off the potential zone.
-        let timeout = null;
-        document.addEventListener("dragover", (e) => {
-            preventDefaults(e);
-            setPotential(true);
-            // If timeout was previously set, clear it
-            if (timeout !== null) {
-                clearTimeout(timeout);
-            }
-            // Set a new timeout, now that we've gotten a new dragover event
-            timeout = setTimeout(() => {
-                // If it's been 100ms and no dragover event has been fired, assume the user isn't dragging anymore.
-                setPotential(false);
-            }, 100); // 100ms was chosen by trial and error.
-            // 10ms was too little time, and caused flicker. 100ms doesn't have a flicker, and turns off potential without a noticeable delay
-        });
-        setSingleton(false);
-    }
-    const isPotentialStr = potential ? "isPotential" : "";
-    const isDraggingStr = isDragging ? "isDragging" : isPotentialStr;
-    return suppress ? (React.createElement(React.Fragment, null, children)) : (React.createElement("div", { className: `dropZone ${isDraggingStr}`, onDragEnter: (e) => {
-            preventDefaults(e);
-            setIsDragging(true);
-        }, onDragLeave: (e) => {
-            preventDefaults(e);
-            setIsDragging(false);
-        }, onDrop: (e) => {
-            setIsDragging(false);
-            const { files } = e.dataTransfer;
-            for (let i = 0; i < files.length; i++) {
-                if (files[i] === null) {
-                    continue;
-                }
-                processFile(files[i], i);
-            }
-            preventDefaults(e);
-        } }, children));
-};
-//# sourceMappingURL=DropZone.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DropZone.js","sourceRoot":"","sources":["../../../src/components/common/DropZone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,qBAAqB,CAAC;AAW7B;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAiB,EAAE,EAAE;IACtF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,CAAC,CAA0D,EAAE,EAAE;QACtF,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IACrB,CAAC,CAAC;IAEF,4DAA4D;IAC5D,kGAAkG;IAClG,IAAI,SAAS,EAAE;QACd,mHAAmH;QACnH,uEAAuE;QACvE,qGAAqG;QACrG,IAAI,OAAO,GAA0B,IAAI,CAAC;QAC1C,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE;YAC3C,eAAe,CAAC,CAAC,CAAC,CAAC;YACnB,YAAY,CAAC,IAAI,CAAC,CAAC;YAEnB,0CAA0C;YAC1C,IAAI,OAAO,KAAK,IAAI,EAAE;gBACrB,YAAY,CAAC,OAAO,CAAC,CAAC;aACtB;YAED,gEAAgE;YAChE,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACzB,mGAAmG;gBACnG,YAAY,CAAC,KAAK,CAAC,CAAC;YACrB,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,uCAAuC;YAChD,iIAAiI;QAClI,CAAC,CAAC,CAAC;QACH,YAAY,CAAC,KAAK,CAAC,CAAC;KACpB;IAED,MAAM,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IACtD,MAAM,aAAa,GAAG,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC;IAEjE,OAAO,QAAQ,CAAC,CAAC,CAAC,CACjB,0CAAG,QAAQ,CAAI,CACf,CAAC,CAAC,CAAC,CACH,6BACC,SAAS,EAAE,YAAY,aAAa,EAAE,EACtC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YAClB,eAAe,CAAC,CAAC,CAAC,CAAC;YACnB,aAAa,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC,EACD,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YAClB,eAAe,CAAC,CAAC,CAAC,CAAC;YACnB,aAAa,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,EACD,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,aAAa,CAAC,KAAK,CAAC,CAAC;YAErB,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,YAAY,CAAC;YACjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACtC,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE;oBACtB,SAAS;iBACT;gBACD,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;aACzB;YAED,eAAe,CAAC,CAAC,CAAC,CAAC;QACpB,CAAC,IAEA,QAAQ,CACJ,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useState } from \"react\";\nimport \"./css/drop-zone.css\";\n\n// Electron adds File.path\nexport type FileWithPath = File & { path?: string };\n\nexport type DropZoneProps = {\n\tchildren: React.ReactNode;\n\tprocessFile: (fileObj: FileWithPath, index: number) => void;\n\tsuppress?: boolean;\n};\n\n/***\n * Component that serves as a drop zone. It also keeps track of visual concerns and event handlers for\n * drag-and-drop.\n *\n * The DropZone component is intended to be a container element for other elements, such as text, lists,\n * images, input elements, etc.\n *\n * @callback processFile - This function will be called for each file that is dropped in the dropzone.\n * @param {ReactNode} children - React will fill this in.\n * @param {boolean} suppress=false - If the dropzone-ness should be suppressed, which would turn this container into just a div\n */\nexport const DropZone = ({ processFile, children, suppress = false }: DropZoneProps) => {\n\tconst [isDragging, setIsDragging] = useState(false);\n\tconst [potential, setPotential] = useState(false);\n\tconst [singleton, setSingleton] = useState(true);\n\n\tconst preventDefaults = (e: { preventDefault: Function; stopPropagation: Function }) => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t};\n\n\t// Check if something is being dragged somewhere on the page\n\t// If dragging is happening on the page, there will be a visual indication for potential drop zone\n\tif (singleton) {\n\t\t// \"dragenter\" and \"dragleave\" events are fired off of every single child element, and counting them isn't reliable\n\t\t// so, when \"dragover\" events are fired, we know dragging is happening.\n\t\t// we will wait 100ms after the last \"dragover\" event is fired, and then turn off the potential zone.\n\t\tlet timeout: NodeJS.Timeout | null = null;\n\t\tdocument.addEventListener(\"dragover\", (e) => {\n\t\t\tpreventDefaults(e);\n\t\t\tsetPotential(true);\n\n\t\t\t// If timeout was previously set, clear it\n\t\t\tif (timeout !== null) {\n\t\t\t\tclearTimeout(timeout);\n\t\t\t}\n\n\t\t\t// Set a new timeout, now that we've gotten a new dragover event\n\t\t\ttimeout = setTimeout(() => {\n\t\t\t\t// If it's been 100ms and no dragover event has been fired, assume the user isn't dragging anymore.\n\t\t\t\tsetPotential(false);\n\t\t\t}, 100); // 100ms was chosen by trial and error.\n\t\t\t// 10ms was too little time, and caused flicker. 100ms doesn't have a flicker, and turns off potential without a noticeable delay\n\t\t});\n\t\tsetSingleton(false);\n\t}\n\n\tconst isPotentialStr = potential ? \"isPotential\" : \"\";\n\tconst isDraggingStr = isDragging ? \"isDragging\" : isPotentialStr;\n\n\treturn suppress ? (\n\t\t<>{children}</>\n\t) : (\n\t\t<div\n\t\t\tclassName={`dropZone ${isDraggingStr}`}\n\t\t\tonDragEnter={(e) => {\n\t\t\t\tpreventDefaults(e);\n\t\t\t\tsetIsDragging(true);\n\t\t\t}}\n\t\t\tonDragLeave={(e) => {\n\t\t\t\tpreventDefaults(e);\n\t\t\t\tsetIsDragging(false);\n\t\t\t}}\n\t\t\tonDrop={(e) => {\n\t\t\t\tsetIsDragging(false);\n\n\t\t\t\tconst { files } = e.dataTransfer;\n\t\t\t\tfor (let i = 0; i < files.length; i++) {\n\t\t\t\t\tif (files[i] === null) {\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\t\t\t\t\tprocessFile(files[i], i);\n\t\t\t\t}\n\n\t\t\t\tpreventDefaults(e);\n\t\t\t}}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n"]}

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

@@ -1,30 +0,0 @@
-/*!
- * Copyright 2017 - 2020 by ChartIQ, Inc.
- * All rights reserved.
- */
-/// <reference types="react" />
-import "./css/file-input.css";
-export declare type FileInputUploadCb = (fileObject: File, cb?: (progress: number) => void) => Promise<{
-    err: string | null;
-    path: string;
-}>;
-export declare type FileInputProps = {
-    acceptTypes: string[];
-    value: string;
-    id?: string;
-    shouldUpload?: boolean;
-    onSetValue?: (value: string) => void;
-    uploadFunction?: FileInputUploadCb;
-    presetFile?: null | File;
-    suppressDropzone?: boolean;
-    disabled?: boolean;
-    allowClearing?: boolean;
-    textEditable?: boolean;
-};
-/**
- * A Browse button with a hidden file input to allow for a file select dialog and extraction of a path
- *
- * @param {FileInputProps} { acceptTypes, value, onSetValue, shouldUpload=true, uploadFunction = defaultUploadFunction}
- * @return {*}
- */
-export declare const FileInput: ({ acceptTypes, value, onSetValue, id, shouldUpload, uploadFunction, presetFile, suppressDropzone, disabled, allowClearing, textEditable, }: FileInputProps) => JSX.Element;

package/react/components/common/FileInput.js

@@ -1,123 +0,0 @@
-/*!
- * Copyright 2017 - 2020 by ChartIQ, Inc.
- * All rights reserved.
- */
-import React, { useState, useRef, useEffect } from "react";
-import { SmartDesktopDesignerActions } from "../../actions/smartDesktopDesignerActions";
-import { useDispatch } from "../../store";
-import { Button } from "./Button";
-import { ButtonIcon } from "./ButtonIcon";
-import "./css/file-input.css";
-import { DropZone } from "./DropZone";
-import { validateFilename } from "./file_helpers";
-const INVALID_FILE_TYPE_ERROR = {
-    viewId: "themes",
-    message: "Your uploaded file is not in the correct format",
-};
-const defaultUploadFunction = async () => {
-    return { err: null, path: "" };
-};
-/**
- * A Browse button with a hidden file input to allow for a file select dialog and extraction of a path
- *
- * @param {FileInputProps} { acceptTypes, value, onSetValue, shouldUpload=true, uploadFunction = defaultUploadFunction}
- * @return {*}
- */
-export const FileInput = ({ acceptTypes, value, onSetValue, id, shouldUpload = true, uploadFunction = defaultUploadFunction, presetFile = null, suppressDropzone = false, disabled = false, allowClearing = true, textEditable = false, }) => {
-    const dispatch = useDispatch();
-    const fileInputElement = useRef({});
-    const [isUploading, setIsUploading] = useState(false);
-    const [uploadProgress, setUploadProgress] = useState(0);
-    const [fileInput, setFileInput] = useState({}); // cast to correct type so typescript doesn't complain
-    const [path, setPath] = useState(value || "");
-    const [errorMessage, setErrorMessage] = useState(null);
-    const [handedFile, setHandedFile] = useState(presetFile);
-    const isInvalid = validateFilename(acceptTypes, path);
-    const uploadSuccess = ({ err, path: successPath }) => {
-        if (err) {
-            dispatch(SmartDesktopDesignerActions.set_project_error(INVALID_FILE_TYPE_ERROR));
-            setErrorMessage(err);
-            setPath("");
-        }
-        else {
-            dispatch(SmartDesktopDesignerActions.delete_project_error(INVALID_FILE_TYPE_ERROR));
-            setErrorMessage(null);
-            setPath(successPath);
-            onSetValue === null || onSetValue === void 0 ? void 0 : onSetValue(successPath);
-            fileInput.value = "";
-        }
-    };
-    const uploadError = (err) => {
-        setErrorMessage(err);
-    };
-    const uploadFile = (fileObj) => {
-        // If it's not a file, we can't do anything with it
-        if (!(fileObj instanceof File)) {
-            return;
-        }
-        setIsUploading(true);
-        uploadFunction === null || uploadFunction === void 0 ? void 0 : uploadFunction(fileObj, (progress) => {
-            setUploadProgress(progress);
-        }).then(uploadSuccess).catch(uploadError).finally(() => {
-            setIsUploading(false);
-            setUploadProgress(0);
-        });
-    };
-    const processFile = (fileObj) => {
-        if (shouldUpload) {
-            uploadFile(fileObj);
-        }
-        else if (fileObj === null || fileObj === void 0 ? void 0 : fileObj.path) {
-            // If the consumer doesn't want the file actually uploaded, just return the file name
-            uploadSuccess({
-                err: null,
-                path: fileObj.path,
-            });
-        }
-        setIsUploading(false);
-        setUploadProgress(0);
-        setErrorMessage(null);
-    };
-    useEffect(() => {
-        setPath(value || "");
-    }, [value]);
-    const onFileChange = (e) => {
-        var _a;
-        const fileObj = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (fileObj !== undefined) {
-            processFile(fileObj);
-        }
-        setFileInput(e.target);
-    };
-    // Check if props updated
-    if (handedFile !== presetFile) {
-        setHandedFile(presetFile);
-        if (presetFile !== null) {
-            uploadFile(presetFile);
-        }
-    }
-    return (React.createElement(DropZone, { processFile: processFile, suppress: suppressDropzone },
-        React.createElement("div", { className: "file-input-container" },
-            React.createElement("div", { className: "file-input-actions" },
-                React.createElement("input", { ref: fileInputElement, disabled: disabled, type: "file", onChange: onFileChange, accept: acceptTypes.join(", "), tabIndex: -1, "aria-hidden": "true" }),
-                React.createElement(Button, { fashion: "primary", text: "Select file", disabled: disabled, onClick: () => {
-                        fileInputElement.current.click();
-                    } })),
-            textEditable ? (React.createElement("div", { className: "file-input-field" },
-                React.createElement("input", { type: "text", onChange: (e) => {
-                        if (onSetValue) {
-                            onSetValue === null || onSetValue === void 0 ? void 0 : onSetValue(e.target.value);
-                        }
-                        setPath(e.target.value);
-                    }, "aria-label": "File name", value: path }))) : (React.createElement("div", { className: "file-input-value" },
-                React.createElement("span", Object.assign({ className: `file-input-value-input ${isInvalid && "invalid"}` }, { id }), path),
-                allowClearing && path !== "" && (React.createElement(ButtonIcon, { text: "Cancel", icon: "times", onClick: () => {
-                        setPath("");
-                        onSetValue === null || onSetValue === void 0 ? void 0 : onSetValue("");
-                    } })),
-                errorMessage && React.createElement("div", { className: "file-input-error" }, errorMessage))),
-            React.createElement("div", { className: "file-input-status" }, isUploading ? (React.createElement("div", { className: "file-input-progress-container" },
-                uploadProgress,
-                "% uploaded")) : (!errorMessage && React.createElement(React.Fragment, null))))));
-};
-//# sourceMappingURL=FileInput.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/common/FileInput.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useState, useRef, useEffect } from \"react\";\nimport { SmartDesktopDesignerActions } from \"../../actions/smartDesktopDesignerActions\";\nimport { useDispatch } from \"../../store\";\nimport { ProjectError } from \"../../types/smartDesktopDesignerTypes\";\n\nimport { Button } from \"./Button\";\nimport { ButtonIcon } from \"./ButtonIcon\";\nimport \"./css/file-input.css\";\n\nimport { DropZone, FileWithPath } from \"./DropZone\";\nimport { validateFilename } from \"./file_helpers\";\n\nexport type FileInputUploadCb = (\n\tfileObject: File,\n\tcb?: (progress: number) => void\n) => Promise<{ err: string | null; path: string }>;\n\nexport type FileInputProps = {\n\tacceptTypes: string[];\n\tvalue: string;\n\tid?: string;\n\tshouldUpload?: boolean;\n\tonSetValue?: (value: string) => void;\n\tuploadFunction?: FileInputUploadCb;\n\tpresetFile?: null | File;\n\tsuppressDropzone?: boolean;\n\tdisabled?: boolean;\n\tallowClearing?: boolean;\n\ttextEditable?: boolean;\n};\n\nconst INVALID_FILE_TYPE_ERROR: ProjectError = {\n\tviewId: \"themes\",\n\tmessage: \"Your uploaded file is not in the correct format\",\n};\n\nconst defaultUploadFunction = async () => {\n\treturn { err: null, path: \"\" };\n};\n\n/**\n * A Browse button with a hidden file input to allow for a file select dialog and extraction of a path\n *\n * @param {FileInputProps} { acceptTypes, value, onSetValue, shouldUpload=true, uploadFunction = defaultUploadFunction}\n * @return {*}\n */\nexport const FileInput = ({\n\tacceptTypes,\n\tvalue,\n\tonSetValue,\n\tid,\n\tshouldUpload = true,\n\tuploadFunction = defaultUploadFunction,\n\tpresetFile = null,\n\tsuppressDropzone = false,\n\tdisabled = false,\n\tallowClearing = true,\n\ttextEditable = false,\n}: FileInputProps) => {\n\tconst dispatch = useDispatch();\n\tconst fileInputElement = useRef({} as HTMLInputElement);\n\tconst [isUploading, setIsUploading] = useState(false);\n\tconst [uploadProgress, setUploadProgress] = useState(0);\n\tconst [fileInput, setFileInput] = useState({} as HTMLInputElement); // cast to correct type so typescript doesn't complain\n\tconst [path, setPath] = useState(value || \"\");\n\tconst [errorMessage, setErrorMessage] = useState(null as string | null);\n\tconst [handedFile, setHandedFile] = useState<FileWithPath | null>(presetFile);\n\n\tconst isInvalid = validateFilename(acceptTypes, path);\n\n\tconst uploadSuccess = ({ err, path: successPath }: { err: string | null; path: string }) => {\n\t\tif (err) {\n\t\t\tdispatch(SmartDesktopDesignerActions.set_project_error(INVALID_FILE_TYPE_ERROR));\n\n\t\t\tsetErrorMessage(err);\n\t\t\tsetPath(\"\");\n\t\t} else {\n\t\t\tdispatch(SmartDesktopDesignerActions.delete_project_error(INVALID_FILE_TYPE_ERROR));\n\t\t\tsetErrorMessage(null);\n\t\t\tsetPath(successPath);\n\n\t\t\tonSetValue?.(successPath);\n\n\t\t\tfileInput.value = \"\";\n\t\t}\n\t};\n\n\tconst uploadError = (err: string) => {\n\t\tsetErrorMessage(err);\n\t};\n\n\tconst uploadFile = (fileObj: FileWithPath | undefined) => {\n\t\t// If it's not a file, we can't do anything with it\n\t\tif (!(fileObj instanceof File)) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetIsUploading(true);\n\t\tuploadFunction?.(fileObj, (progress: number) => {\n\t\t\tsetUploadProgress(progress);\n\t\t})\n\t\t\t.then(uploadSuccess)\n\t\t\t.catch(uploadError)\n\t\t\t.finally(() => {\n\t\t\t\tsetIsUploading(false);\n\t\t\t\tsetUploadProgress(0);\n\t\t\t});\n\t};\n\n\tconst processFile = (fileObj: FileWithPath) => {\n\t\tif (shouldUpload) {\n\t\t\tuploadFile(fileObj);\n\t\t} else if (fileObj?.path) {\n\t\t\t// If the consumer doesn't want the file actually uploaded, just return the file name\n\t\t\tuploadSuccess({\n\t\t\t\terr: null,\n\t\t\t\tpath: fileObj.path,\n\t\t\t});\n\t\t}\n\t\tsetIsUploading(false);\n\t\tsetUploadProgress(0);\n\t\tsetErrorMessage(null);\n\t};\n\n\tuseEffect(() => {\n\t\tsetPath(value || \"\");\n\t}, [value]);\n\n\tconst onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\tconst fileObj = e.target.files?.[0] as FileWithPath | undefined;\n\n\t\tif (fileObj !== undefined) {\n\t\t\tprocessFile(fileObj);\n\t\t}\n\n\t\tsetFileInput(e.target);\n\t};\n\n\t// Check if props updated\n\tif (handedFile !== presetFile) {\n\t\tsetHandedFile(presetFile);\n\t\tif (presetFile !== null) {\n\t\t\tuploadFile(presetFile);\n\t\t}\n\t}\n\n\treturn (\n\t\t<DropZone processFile={processFile} suppress={suppressDropzone}>\n\t\t\t<div className=\"file-input-container\">\n\t\t\t\t<div className=\"file-input-actions\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={fileInputElement}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\tonChange={onFileChange}\n\t\t\t\t\t\taccept={acceptTypes.join(\", \")}\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tfashion=\"primary\"\n\t\t\t\t\t\ttext=\"Select file\"\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tfileInputElement.current.click();\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t{textEditable ? (\n\t\t\t\t\t<div className=\"file-input-field\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\t\t\tif (onSetValue) {\n\t\t\t\t\t\t\t\t\tonSetValue?.(e.target.value);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsetPath(e.target.value);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-label=\"File name\"\n\t\t\t\t\t\t\tvalue={path}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<div className=\"file-input-value\">\n\t\t\t\t\t\t<span className={`file-input-value-input ${isInvalid && \"invalid\"}`} {...{ id }}>\n\t\t\t\t\t\t\t{path}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{allowClearing && path !== \"\" && (\n\t\t\t\t\t\t\t<ButtonIcon\n\t\t\t\t\t\t\t\ttext=\"Cancel\"\n\t\t\t\t\t\t\t\ticon=\"times\"\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tsetPath(\"\");\n\t\t\t\t\t\t\t\t\tonSetValue?.(\"\");\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{errorMessage && <div className=\"file-input-error\">{errorMessage}</div>}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div className=\"file-input-status\">\n\t\t\t\t\t{isUploading ? (\n\t\t\t\t\t\t<div className=\"file-input-progress-container\">{uploadProgress}% uploaded</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t!errorMessage && <></>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</DropZone>\n\t);\n};\n"]}

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

@@ -1,6 +0,0 @@
-import React from "react";
-export interface FinsembleLinkProps {
-    url: string;
-    text: string;
-}
-export declare const FinsembleLink: React.FC<FinsembleLinkProps>;

package/react/components/common/FinsembleLink.js

@@ -1,12 +0,0 @@
-import React from "react";
-const openLink = (url) => {
-    FSBL.Clients.LauncherClient.spawn("", {
-        url,
-        addToWorkspace: false,
-    }, () => { });
-};
-export const FinsembleLink = ({ url, text }) => (React.createElement("a", { href: "", onClick: (e) => {
-        e.preventDefault();
-        openLink(url);
-    } }, text));
-//# sourceMappingURL=FinsembleLink.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"FinsembleLink.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,EAAE;IAChC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,CAChC,EAAE,EACF;QACC,GAAG;QACH,cAAc,EAAE,KAAK;KACrB,EACD,GAAG,EAAE,GAAE,CAAC,CACR,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAC7E,2BACC,IAAI,EAAC,EAAE,EACP,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;QACd,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,QAAQ,CAAC,GAAG,CAAC,CAAC;IACf,CAAC,IAEA,IAAI,CACF,CACJ,CAAC","sourcesContent":["import React from \"react\";\n\nexport interface FinsembleLinkProps {\n\turl: string;\n\ttext: string;\n}\n\nconst openLink = (url: string) => {\n\tFSBL.Clients.LauncherClient.spawn(\n\t\t\"\",\n\t\t{\n\t\t\turl,\n\t\t\taddToWorkspace: false,\n\t\t},\n\t\t() => {}\n\t);\n};\n\nexport const FinsembleLink: React.FC<FinsembleLinkProps> = ({ url, text }) => (\n\t<a\n\t\thref=\"\"\n\t\tonClick={(e) => {\n\t\t\te.preventDefault();\n\t\t\topenLink(url);\n\t\t}}\n\t>\n\t\t{text}\n\t</a>\n);\n"]}

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

@@ -1,21 +0,0 @@
-/*!
- * Copyright 2017 - 2020 by ChartIQ, Inc.
- * All rights reserved.
- */
-/// <reference types="react" />
-import { FileInputUploadCb } from "./FileInput";
-import "./css/image-preview.css";
-export declare enum ImagePreviewSize {
-    SMALL = "small",
-    LARGE = "large"
-}
-export declare type ImagePreviewProps = {
-    id?: string;
-    value: string;
-    baseURL: string;
-    onSetValue?: (value: string) => void;
-    uploadFunction: FileInputUploadCb;
-    acceptTypes: string[];
-    previewSize?: ImagePreviewSize;
-};
-export declare const ImagePreview: (props: ImagePreviewProps) => JSX.Element;

package/react/components/common/ImagePreview.js

@@ -1,43 +0,0 @@
-/*!
- * Copyright 2017 - 2020 by ChartIQ, Inc.
- * All rights reserved.
- */
-import React, { useState, useEffect } from "react";
-import { FileInput } from "./FileInput";
-import "./css/image-preview.css";
-import { DropZone } from "./DropZone";
-export var ImagePreviewSize;
-(function (ImagePreviewSize) {
-    ImagePreviewSize["SMALL"] = "small";
-    ImagePreviewSize["LARGE"] = "large";
-})(ImagePreviewSize || (ImagePreviewSize = {}));
-let globalCacheIndex = 0;
-const cleanPath = (path, baseURL) => path
-    .replace(new RegExp(`^${baseURL}`), "")
-    .replace(/\/{1,}/g, "/")
-    .replace(/^\//, "");
-export const ImagePreview = (props) => {
-    const [cacheIndex, setCacheIndex] = useState(++globalCacheIndex);
-    const previewSize = props.previewSize || ImagePreviewSize.SMALL;
-    const [droppedFile, setDroppedFile] = useState(null);
-    const [imagePath, setImagePath] = useState(cleanPath(props.value, props.baseURL));
-    useEffect(() => {
-        if (props.onSetValue) {
-            props.onSetValue(imagePath);
-        }
-    }, [imagePath]);
-    useEffect(() => {
-        setImagePath(cleanPath(props.value, props.baseURL));
-    }, [props]);
-    return (React.createElement(DropZone, { processFile: (file) => {
-            setDroppedFile(file);
-        } },
-        React.createElement("div", { className: ["image-preview-container", `image-preview-size-${previewSize}`].join(" ") },
-            React.createElement(FileInput, Object.assign({ value: imagePath, uploadFunction: props.uploadFunction, onSetValue: (value) => {
-                    setImagePath(value);
-                    setCacheIndex(++globalCacheIndex);
-                }, acceptTypes: props.acceptTypes, presetFile: droppedFile, suppressDropzone: true, allowClearing: false }, (props.id ? { id: props.id } : {}))),
-            !imagePath ? (React.createElement("div", { className: "empty-preview" })) : (React.createElement("div", { className: "filled-preview" },
-                React.createElement("img", { src: `${props.baseURL}/${imagePath}?${cacheIndex}` }))))));
-};
-//# sourceMappingURL=ImagePreview.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ImagePreview.js","sourceRoot":"","sources":["../../../src/components/common/ImagePreview.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAqB,MAAM,aAAa,CAAC;AAC3D,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAgB,MAAM,YAAY,CAAC;AAEpD,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IAC3B,mCAAe,CAAA;IACf,mCAAe,CAAA;AAChB,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B;AAYD,IAAI,gBAAgB,GAAG,CAAC,CAAC;AAEzB,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,OAAe,EAAE,EAAE,CACnD,IAAI;KACF,OAAO,CAAC,IAAI,MAAM,CAAC,IAAI,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC;KACtC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC;KACvB,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AAEtB,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IACxD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,gBAAgB,CAAC,CAAC;IACjE,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,gBAAgB,CAAC,KAAK,CAAC;IAChE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAsB,IAAI,CAAC,CAAC;IAE1E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAElF,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,KAAK,CAAC,UAAU,EAAE;YACrB,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;SAC5B;IACF,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,SAAS,CAAC,GAAG,EAAE;QACd,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACrD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACN,oBAAC,QAAQ,IACR,WAAW,EAAE,CAAC,IAAU,EAAE,EAAE;YAC3B,cAAc,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;QAED,6BAAK,SAAS,EAAE,CAAC,yBAAyB,EAAE,sBAAsB,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YACzF,oBAAC,SAAS,kBACT,KAAK,EAAE,SAAS,EAChB,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,UAAU,EAAE,CAAC,KAAa,EAAE,EAAE;oBAC7B,YAAY,CAAC,KAAK,CAAC,CAAC;oBACpB,aAAa,CAAC,EAAE,gBAAgB,CAAC,CAAC;gBACnC,CAAC,EACD,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,UAAU,EAAE,WAAW,EACvB,gBAAgB,EAAE,IAAI,EACtB,aAAa,EAAE,KAAK,IAChB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC1B;YAEZ,CAAC,SAAS,CAAC,CAAC,CAAC,CACb,6BAAK,SAAS,EAAC,eAAe,GAAO,CACrC,CAAC,CAAC,CAAC,CACH,6BAAK,SAAS,EAAC,gBAAgB;gBAC9B,6BAAK,GAAG,EAAE,GAAG,KAAK,CAAC,OAAO,IAAI,SAAS,IAAI,UAAU,EAAE,GAAI,CACtD,CACN,CACI,CACI,CACX,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useState, useEffect } from \"react\";\n\nimport { FileInput, FileInputUploadCb } from \"./FileInput\";\nimport \"./css/image-preview.css\";\nimport { DropZone, FileWithPath } from \"./DropZone\";\n\nexport enum ImagePreviewSize {\n\tSMALL = \"small\",\n\tLARGE = \"large\",\n}\n\nexport type ImagePreviewProps = {\n\tid?: string;\n\tvalue: string;\n\tbaseURL: string;\n\tonSetValue?: (value: string) => void;\n\tuploadFunction: FileInputUploadCb;\n\tacceptTypes: string[];\n\tpreviewSize?: ImagePreviewSize;\n};\n\nlet globalCacheIndex = 0;\n\nconst cleanPath = (path: string, baseURL: string) =>\n\tpath\n\t\t.replace(new RegExp(`^${baseURL}`), \"\")\n\t\t.replace(/\\/{1,}/g, \"/\")\n\t\t.replace(/^\\//, \"\");\n\nexport const ImagePreview = (props: ImagePreviewProps) => {\n\tconst [cacheIndex, setCacheIndex] = useState(++globalCacheIndex);\n\tconst previewSize = props.previewSize || ImagePreviewSize.SMALL;\n\tconst [droppedFile, setDroppedFile] = useState<FileWithPath | null>(null);\n\n\tconst [imagePath, setImagePath] = useState(cleanPath(props.value, props.baseURL));\n\n\tuseEffect(() => {\n\t\tif (props.onSetValue) {\n\t\t\tprops.onSetValue(imagePath);\n\t\t}\n\t}, [imagePath]);\n\n\tuseEffect(() => {\n\t\tsetImagePath(cleanPath(props.value, props.baseURL));\n\t}, [props]);\n\n\treturn (\n\t\t<DropZone\n\t\t\tprocessFile={(file: File) => {\n\t\t\t\tsetDroppedFile(file);\n\t\t\t}}\n\t\t>\n\t\t\t<div className={[\"image-preview-container\", `image-preview-size-${previewSize}`].join(\" \")}>\n\t\t\t\t<FileInput\n\t\t\t\t\tvalue={imagePath}\n\t\t\t\t\tuploadFunction={props.uploadFunction}\n\t\t\t\t\tonSetValue={(value: string) => {\n\t\t\t\t\t\tsetImagePath(value);\n\t\t\t\t\t\tsetCacheIndex(++globalCacheIndex);\n\t\t\t\t\t}}\n\t\t\t\t\tacceptTypes={props.acceptTypes}\n\t\t\t\t\tpresetFile={droppedFile}\n\t\t\t\t\tsuppressDropzone={true}\n\t\t\t\t\tallowClearing={false}\n\t\t\t\t\t{...(props.id ? { id: props.id } : {})}\n\t\t\t\t></FileInput>\n\n\t\t\t\t{!imagePath ? (\n\t\t\t\t\t<div className=\"empty-preview\"></div>\n\t\t\t\t) : (\n\t\t\t\t\t<div className=\"filled-preview\">\n\t\t\t\t\t\t<img src={`${props.baseURL}/${imagePath}?${cacheIndex}`} />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</DropZone>\n\t);\n};\n"]}