@finsemble/finsemble-ui 1.0.0-beta-1 → 1.0.0-beta-5

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

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonRow.js","sourceRoot":"","sources":["../../../src/components/common/ButtonRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAexC,MAAM,YAAY,GAAmB;IACpC,KAAK,EAAE,EAAE;IACT,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;IACjB,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,KAAK;IACf,eAAe,EAAE,KAAK;IACtB,SAAS,EAAE,SAAS;CACpB,CAAC;AAEF,MAAM,SAAS,GAA6B,CAAC,EAC5C,KAAK,EACL,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,EACH,eAAe,EACf,SAAS,GACT,EAAE,EAAE;IACJ,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,OAAO,CACN,6BACC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,EACpD,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,GAAG,EAAE;YACb,IAAI,CAAC,QAAQ,EAAE;gBACd,MAAM,IAAI,GAAG,OAAO,CAAC;gBACrB,IAAI,EAAE,CAAC;aACP;QACF,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YAChB,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE;gBACtD,MAAM,IAAI,GAAG,OAAO,CAAC;gBACrB,IAAI,EAAE,CAAC;aACP;QACF,CAAC;QAEA,GAAG,IAAI,CACP,6BACC,GAAG,EAAE,GAAG,EACR,GAAG,EAAC,EAAE,EACN,KAAK,EAAE,eAAe,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAC5F,OAAO,EAAE,GAAG,EAAE;gBACb,WAAW,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC,GACA,CACF;QACA,CAAC,eAAe,IAAI,QAAQ,CAAC,IAAI,2BAAG,SAAS,EAAC,0BAA0B,GAAG;QAC5E,8BAAM,SAAS,EAAC,UAAU,IAAE,KAAK,CAAQ;QACzC,2BAAG,SAAS,EAAE,SAAS,iBAAe,IAAI,GAAI,CACzC,CACN,CAAC;AACH,CAAC,CAAC;AAEF,SAAS,CAAC,YAAY,GAAG,YAAY,CAAC;AACtC,eAAe,SAAS,CAAC","sourcesContent":["import React, { useState } from \"react\";\n\nexport interface ButtonRowProps {\n\tlabel?: string;\n\tonClick: Function;\n\ticonClass?: string;\n\tdisabled?: boolean;\n\timg?: string;\n\tshowDefaultIcon?: boolean;\n\tclassName?: string;\n\trole?: string;\n\ttabIndex?: number;\n\tonKeyDown?: Function;\n}\n\nconst defaultProps: ButtonRowProps = {\n\tlabel: \"\",\n\tonClick: () => {},\n\ticonClass: \"\",\n\tdisabled: false,\n\tshowDefaultIcon: false,\n\tclassName: \"row-btn\",\n};\n\nconst ButtonRow: React.FC<ButtonRowProps> = ({\n\tlabel,\n\tonClick,\n\ticonClass,\n\tdisabled,\n\timg,\n\tshowDefaultIcon,\n\tclassName,\n}) => {\n\tconst [imgError, setImgError] = useState(false);\n\treturn (\n\t\t<div\n\t\t\tclassName={disabled ? \"row-btn-disabled\" : className}\n\t\t\trole=\"button\"\n\t\t\ttabIndex={0}\n\t\t\tonClick={() => {\n\t\t\t\tif (!disabled) {\n\t\t\t\t\tconst func = onClick;\n\t\t\t\t\tfunc();\n\t\t\t\t}\n\t\t\t}}\n\t\t\tonKeyDown={(e) => {\n\t\t\t\tif ((e.key === \"Enter\" || e.key === \" \") && !disabled) {\n\t\t\t\t\tconst func = onClick;\n\t\t\t\t\tfunc();\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t{img && (\n\t\t\t\t<img\n\t\t\t\t\tsrc={img}\n\t\t\t\t\talt=\"\"\n\t\t\t\t\tstyle={showDefaultIcon || imgError ? { display: \"none\" } : { width: \"auto\", height: \"20px\" }}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{(showDefaultIcon || imgError) && <i className=\"ff-finsemble default-img\" />}\n\t\t\t<span className=\"row__lbl\">{label}</span>\n\t\t\t<i className={iconClass} aria-hidden={true} />\n\t\t</div>\n\t);\n};\n\nButtonRow.defaultProps = defaultProps;\nexport default ButtonRow;\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/Checkbox.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-import "./css/checkbox.css";
-export interface CheckboxProps {
-    checked?: boolean;
-    disabled?: boolean;
-    label?: string;
-    showLabel?: boolean;
-    onClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
-}
-export declare const Checkbox: React.FC<CheckboxProps>;

package/react/components/common/Checkbox.js

@@ -1,24 +0,0 @@
-import React from "react";
-import { FinsembleIcon } from "./FinsembleIcon";
-import "./css/checkbox.css";
-export const Checkbox = ({ checked = false, disabled = false, label = "", showLabel = true, onClick = () => { }, }) => {
-    let checkboxClasses = "complex-menu-checkbox";
-    if (checked) {
-        checkboxClasses = `${checkboxClasses} checked`;
-    }
-    let style = {};
-    if (disabled) {
-        style = {
-            cursor: "default",
-            opacity: ".3",
-        };
-    }
-    return (React.createElement("div", { style: style, className: "complex-menu-checkbox-wrapper", role: "checkbox", "aria-checked": checked, "aria-label": label, tabIndex: 0, onClick: disabled ? () => { } : onClick, onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-                !disabled && onClick(e);
-            }
-        } },
-        React.createElement("div", { className: checkboxClasses }, checked && React.createElement(FinsembleIcon, { icon: "check" })),
-        showLabel && React.createElement("div", { className: "complex-menu-checkbox-label" }, label)));
-};
-//# sourceMappingURL=Checkbox.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/common/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,oBAAoB,CAAC;AAU5B,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EACjD,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,IAAI,EAChB,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,GAClB,EAAE,EAAE;IACJ,IAAI,eAAe,GAAG,uBAAuB,CAAC;IAC9C,IAAI,OAAO,EAAE;QACZ,eAAe,GAAG,GAAG,eAAe,UAAU,CAAC;KAC/C;IACD,IAAI,KAAK,GAAG,EAAE,CAAC;IACf,IAAI,QAAQ,EAAE;QACb,KAAK,GAAG;YACP,MAAM,EAAE,SAAS;YACjB,OAAO,EAAE,IAAI;SACb,CAAC;KACF;IACD,OAAO,CACN,6BACC,KAAK,EAAE,KAAK,EACZ,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAC,UAAU,kBACD,OAAO,gBACT,KAAK,EACjB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,CAAC,OAAO,EACtC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YAChB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;gBACvC,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;aACxB;QACF,CAAC;QAED,6BAAK,SAAS,EAAE,eAAe,IAAG,OAAO,IAAI,oBAAC,aAAa,IAAC,IAAI,EAAC,OAAO,GAAG,CAAO;QACjF,SAAS,IAAI,6BAAK,SAAS,EAAC,6BAA6B,IAAE,KAAK,CAAO,CACnE,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from \"react\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\nimport \"./css/checkbox.css\";\n\nexport interface CheckboxProps {\n\tchecked?: boolean;\n\tdisabled?: boolean;\n\tlabel?: string;\n\tshowLabel?: boolean;\n\tonClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\nexport const Checkbox: React.FC<CheckboxProps> = ({\n\tchecked = false,\n\tdisabled = false,\n\tlabel = \"\",\n\tshowLabel = true,\n\tonClick = () => {},\n}) => {\n\tlet checkboxClasses = \"complex-menu-checkbox\";\n\tif (checked) {\n\t\tcheckboxClasses = `${checkboxClasses} checked`;\n\t}\n\tlet style = {};\n\tif (disabled) {\n\t\tstyle = {\n\t\t\tcursor: \"default\",\n\t\t\topacity: \".3\",\n\t\t};\n\t}\n\treturn (\n\t\t<div\n\t\t\tstyle={style}\n\t\t\tclassName=\"complex-menu-checkbox-wrapper\"\n\t\t\trole=\"checkbox\"\n\t\t\taria-checked={checked}\n\t\t\taria-label={label}\n\t\t\ttabIndex={0}\n\t\t\tonClick={disabled ? () => {} : onClick}\n\t\t\tonKeyDown={(e) => {\n\t\t\t\tif (e.key === \"Enter\" || e.key === \" \") {\n\t\t\t\t\t!disabled && onClick(e);\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t<div className={checkboxClasses}>{checked && <FinsembleIcon icon=\"check\" />}</div>\n\t\t\t{showLabel && <div className=\"complex-menu-checkbox-label\">{label}</div>}\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/DropdownButton.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-import "../../assets/css/button.css";
-import { IFinsembleButtonProps } from "../shared/Button";
-export interface IFinsembleDropdownActionButtonProps {
-    buttonLabel: string;
-    buttonOptions: Array<IFinsembleButtonProps>;
-    mainAction: Function;
-}
-/**
- * @TODO: Consolidate this and DefaultDropDownButton and change all usages to use DefaultDropDownButton.
- * @deprecated Use DefaultDropDownButton instead.
- */
-declare const DropdownButton: React.FunctionComponent<IFinsembleDropdownActionButtonProps>;
-export default DropdownButton;

package/react/components/common/DropdownButton.js

@@ -1,37 +0,0 @@
-import React, { useState, useRef } from "react";
-import "../../assets/css/button.css";
-import { useOutsideClickDetector } from "../../hooks/useOutsideClickDetector";
-/**
- * @TODO: Consolidate this and DefaultDropDownButton and change all usages to use DefaultDropDownButton.
- * @deprecated Use DefaultDropDownButton instead.
- */
-const DropdownButton = ({ buttonLabel = "Label", buttonOptions = [], mainAction, }) => {
-    const wrapperRef = useRef(null);
-    const [expanded, setExpanded] = useState(false);
-    useOutsideClickDetector(wrapperRef, () => setExpanded(false));
-    const options = buttonOptions.map((option, index) => (React.createElement("div", { key: index, className: "finsemble-dropdown-action__btn-option", onClick: () => {
-            option.clickHandler();
-            setExpanded(false);
-        } }, option.buttonLabel)));
-    const buttonAction = () => {
-        if (expanded) {
-            setExpanded(false);
-            return;
-        }
-        if (mainAction) {
-            mainAction();
-        }
-        else {
-            () => setExpanded(!expanded);
-        }
-    };
-    return (React.createElement("div", { ref: wrapperRef, className: "finsemble-dropdown-action__btn-container" },
-        React.createElement("div", { className: "finsemble-dropdown-action__btn" },
-            React.createElement("span", { className: "btn-label", onClick: buttonAction }, buttonLabel),
-            React.createElement("span", { className: "separator" }),
-            React.createElement("div", { className: "expand-options", onClick: () => setExpanded(!expanded) },
-                React.createElement("span", { className: "caret" }))),
-        expanded ? React.createElement("div", { className: "finsemble-dropdown-action__btn-options" }, options) : null));
-};
-export default DropdownButton;
-//# sourceMappingURL=DropdownButton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownButton.js","sourceRoot":"","sources":["../../../src/components/common/DropdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,6BAA6B,CAAC;AACrC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAS9E;;;GAGG;AACH,MAAM,cAAc,GAAiE,CAAC,EACrF,WAAW,GAAG,OAAO,EACrB,aAAa,GAAG,EAAE,EAClB,UAAU,GAC2B,EAAE,EAAE;IACzC,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,uBAAuB,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;IAE9D,MAAM,OAAO,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACpD,6BACC,GAAG,EAAE,KAAK,EACV,SAAS,EAAC,uCAAuC,EACjD,OAAO,EAAE,GAAG,EAAE;YACb,MAAM,CAAC,YAAY,EAAE,CAAC;YACtB,WAAW,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,IAEA,MAAM,CAAC,WAAW,CACd,CACN,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,IAAI,QAAQ,EAAE;YACb,WAAW,CAAC,KAAK,CAAC,CAAC;YACnB,OAAO;SACP;QAED,IAAI,UAAU,EAAE;YACf,UAAU,EAAE,CAAC;SACb;aAAM;YACN,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;SAC7B;IACF,CAAC,CAAC;IAEF,OAAO,CACN,6BAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,0CAA0C;QACzE,6BAAK,SAAS,EAAC,gCAAgC;YAC9C,8BAAM,SAAS,EAAC,WAAW,EAAC,OAAO,EAAE,YAAY,IAC/C,WAAW,CACN;YACP,8BAAM,SAAS,EAAC,WAAW,GAAQ;YACnC,6BAAK,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC;gBACpE,8BAAM,SAAS,EAAC,OAAO,GAAQ,CAC1B,CACD;QACL,QAAQ,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAC,wCAAwC,IAAE,OAAO,CAAO,CAAC,CAAC,CAAC,IAAI,CACrF,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import React, { useState, useRef } from \"react\";\nimport \"../../assets/css/button.css\";\nimport { useOutsideClickDetector } from \"../../hooks/useOutsideClickDetector\";\nimport { IFinsembleButtonProps } from \"../shared/Button\";\n\nexport interface IFinsembleDropdownActionButtonProps {\n\tbuttonLabel: string;\n\tbuttonOptions: Array<IFinsembleButtonProps>;\n\tmainAction: Function;\n}\n\n/**\n * @TODO: Consolidate this and DefaultDropDownButton and change all usages to use DefaultDropDownButton.\n * @deprecated Use DefaultDropDownButton instead.\n */\nconst DropdownButton: React.FunctionComponent<IFinsembleDropdownActionButtonProps> = ({\n\tbuttonLabel = \"Label\",\n\tbuttonOptions = [],\n\tmainAction,\n}: IFinsembleDropdownActionButtonProps) => {\n\tconst wrapperRef = useRef<HTMLDivElement>(null);\n\tconst [expanded, setExpanded] = useState(false);\n\n\tuseOutsideClickDetector(wrapperRef, () => setExpanded(false));\n\n\tconst options = buttonOptions.map((option, index) => (\n\t\t<div\n\t\t\tkey={index}\n\t\t\tclassName=\"finsemble-dropdown-action__btn-option\"\n\t\t\tonClick={() => {\n\t\t\t\toption.clickHandler();\n\t\t\t\tsetExpanded(false);\n\t\t\t}}\n\t\t>\n\t\t\t{option.buttonLabel}\n\t\t</div>\n\t));\n\n\tconst buttonAction = () => {\n\t\tif (expanded) {\n\t\t\tsetExpanded(false);\n\t\t\treturn;\n\t\t}\n\n\t\tif (mainAction) {\n\t\t\tmainAction();\n\t\t} else {\n\t\t\t() => setExpanded(!expanded);\n\t\t}\n\t};\n\n\treturn (\n\t\t<div ref={wrapperRef} className=\"finsemble-dropdown-action__btn-container\">\n\t\t\t<div className=\"finsemble-dropdown-action__btn\">\n\t\t\t\t<span className=\"btn-label\" onClick={buttonAction}>\n\t\t\t\t\t{buttonLabel}\n\t\t\t\t</span>\n\t\t\t\t<span className=\"separator\"></span>\n\t\t\t\t<div className=\"expand-options\" onClick={() => setExpanded(!expanded)}>\n\t\t\t\t\t<span className=\"caret\"></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{expanded ? <div className=\"finsemble-dropdown-action__btn-options\">{options}</div> : null}\n\t\t</div>\n\t);\n};\n\nexport default DropdownButton;\n"]}

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

@@ -1,34 +0,0 @@
-import React, { ErrorInfo, ReactNode } from "react";
-declare type ErrorBoundaryProps = {
-    fallBackUI?: ReactNode;
-};
-declare type ErrorBoundaryState = {
-    hasError: boolean;
-};
-/**
- * Something like a try catch in React component form with some exceptions. Catches Errors and logs them to the central
- * logger. Prevents uncaught exceptions on the render of child components from unintentionally breaking the entire UI.
- * Has the added benefit of sending the errors to the Central Logger
- *
- * Note: The exceptions are that it not catch errors in Event handlers and Asynchronous code.
- * Note: This does not catch errors in the current component directly, only child components. See below for example
- *
- * Eg: WON'T WORK
- *
- * const ContainerComponent = ({test}:any) => <ErrorBoundary><div>{test.undefined.length}</div></ErrorBoundary>
- *
- * WILL WORK:
- * const BrokenComponent = ({test}:any) => <div>{test.undefined.length}</div>
- * const ContainerComponent = ({test}:any) => <ErrorBoundary><BrokenComponent test={test}/></ErrorBoundary>
- *
- * @see https://reactjs.org/docs/error-boundaries.html for more information on Error Boundaries
- */
-export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
-    constructor(props: ErrorBoundaryProps);
-    static getDerivedStateFromError(error: Error): {
-        hasError: boolean;
-    };
-    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    render(): React.ReactNode;
-}
-export {};

package/react/components/common/ErrorBoundary.js

@@ -1,43 +0,0 @@
-import React from "react";
-/**
- * Something like a try catch in React component form with some exceptions. Catches Errors and logs them to the central
- * logger. Prevents uncaught exceptions on the render of child components from unintentionally breaking the entire UI.
- * Has the added benefit of sending the errors to the Central Logger
- *
- * Note: The exceptions are that it not catch errors in Event handlers and Asynchronous code.
- * Note: This does not catch errors in the current component directly, only child components. See below for example
- *
- * Eg: WON'T WORK
- *
- * const ContainerComponent = ({test}:any) => <ErrorBoundary><div>{test.undefined.length}</div></ErrorBoundary>
- *
- * WILL WORK:
- * const BrokenComponent = ({test}:any) => <div>{test.undefined.length}</div>
- * const ContainerComponent = ({test}:any) => <ErrorBoundary><BrokenComponent test={test}/></ErrorBoundary>
- *
- * @see https://reactjs.org/docs/error-boundaries.html for more information on Error Boundaries
- */
-export class ErrorBoundary extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { hasError: false };
-    }
-    static getDerivedStateFromError(error) {
-        // Update state so the next render will show the fallback UI.
-        return { hasError: true };
-    }
-    componentDidCatch(error, errorInfo) {
-        // Log the error to the dev tools where developers will expect it but also send it to the central logger
-        console.error(error, errorInfo);
-        FSBL.Clients.Logger.system.error(error, errorInfo);
-    }
-    render() {
-        var _a;
-        if (this.state.hasError) {
-            // Render custom fallback UI or default to nothing
-            return (_a = this.props.fallBackUI) !== null && _a !== void 0 ? _a : React.createElement(React.Fragment, null);
-        }
-        return this.props.children;
-    }
-}
-//# sourceMappingURL=ErrorBoundary.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../../../src/components/common/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AASpD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,SAAiD;IACzF,YAAY,KAAyB;QACpC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClC,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC3C,6DAA6D;QAC7D,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAC3B,CAAC;IAED,iBAAiB,CAAC,KAAY,EAAE,SAAoB;QACnD,wGAAwG;QACxG,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;QAChC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IACpD,CAAC;IAED,MAAM;;QACL,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YACxB,kDAAkD;YAClD,OAAO,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,mCAAI,yCAAK,CAAC;SACtC;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC5B,CAAC;CACD","sourcesContent":["import React, { ErrorInfo, ReactNode } from \"react\";\n\ntype ErrorBoundaryProps = {\n\tfallBackUI?: ReactNode;\n};\ntype ErrorBoundaryState = {\n\thasError: boolean;\n};\n\n/**\n * Something like a try catch in React component form with some exceptions. Catches Errors and logs them to the central\n * logger. Prevents uncaught exceptions on the render of child components from unintentionally breaking the entire UI.\n * Has the added benefit of sending the errors to the Central Logger\n *\n * Note: The exceptions are that it not catch errors in Event handlers and Asynchronous code.\n * Note: This does not catch errors in the current component directly, only child components. See below for example\n *\n * Eg: WON'T WORK\n *\n * const ContainerComponent = ({test}:any) => <ErrorBoundary><div>{test.undefined.length}</div></ErrorBoundary>\n *\n * WILL WORK:\n * const BrokenComponent = ({test}:any) => <div>{test.undefined.length}</div>\n * const ContainerComponent = ({test}:any) => <ErrorBoundary><BrokenComponent test={test}/></ErrorBoundary>\n *\n * @see https://reactjs.org/docs/error-boundaries.html for more information on Error Boundaries\n */\nexport class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n\tconstructor(props: ErrorBoundaryProps) {\n\t\tsuper(props);\n\t\tthis.state = { hasError: false };\n\t}\n\n\tstatic getDerivedStateFromError(error: Error) {\n\t\t// Update state so the next render will show the fallback UI.\n\t\treturn { hasError: true };\n\t}\n\n\tcomponentDidCatch(error: Error, errorInfo: ErrorInfo) {\n\t\t// Log the error to the dev tools where developers will expect it but also send it to the central logger\n\t\tconsole.error(error, errorInfo);\n\t\tFSBL.Clients.Logger.system.error(error, errorInfo);\n\t}\n\n\trender() {\n\t\tif (this.state.hasError) {\n\t\t\t// Render custom fallback UI or default to nothing\n\t\t\treturn this.props.fallBackUI ?? <></>;\n\t\t}\n\n\t\treturn this.props.children;\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