@mwater/visualization 5.1.0 → 5.3.0

package/lib/richtext/DropdownPaletteItem.js

@@ -0,0 +1,82 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_onclickout_1 = __importDefault(require("react-onclickout"));
+/** Palette item that allows picking from dropdown */
+class DropdownPaletteItem extends react_1.default.Component {
+    static defaultProps = { position: "under" };
+    constructor(props) {
+        super(props);
+        this.state = {
+            open: false,
+            moreOpen: false
+        };
+    }
+    handleMouseDown = (ev) => {
+        // Ignore if clicking on menu
+        if (ev.target.className === "dropdown-palette-menu-item") {
+            return;
+        }
+        // Don't lose focus from editor
+        ev.preventDefault();
+        this.setState({ open: !this.state.open });
+    };
+    handleMoreClick = (ev) => {
+        ev.preventDefault();
+        this.setState({ moreOpen: true });
+    };
+    renderItem(item) {
+        return (react_1.default.createElement("div", { className: "dropdown-palette-menu-item", onMouseDown: (ev) => {
+                ev.preventDefault();
+                this.props.onSelect(item.value);
+                this.setState({ open: false });
+            }, key: item.value }, item.label));
+    }
+    renderItems() {
+        const visibleItems = this.state.moreOpen ? this.props.items : this.props.items.filter(item => !item.more);
+        const halfLength = Math.ceil(visibleItems.length / 2);
+        const leftColumn = visibleItems.slice(0, halfLength);
+        const rightColumn = visibleItems.slice(halfLength);
+        return (react_1.default.createElement("div", { className: "dropdown-palette-menu" },
+            react_1.default.createElement("div", { style: { display: 'flex' } },
+                react_1.default.createElement("div", { style: { flex: 1 } }, leftColumn.map(item => this.renderItem(item))),
+                react_1.default.createElement("div", { style: { flex: 1 } }, rightColumn.map(item => this.renderItem(item)))),
+            this.props.items.some(item => item.more) && !this.state.moreOpen && (react_1.default.createElement("div", { className: "dropdown-palette-menu-item", onMouseDown: this.handleMoreClick }, "More..."))));
+    }
+    render() {
+        const popupPosition = {
+            position: "absolute",
+            left: 0,
+            zIndex: 1000,
+            backgroundColor: "white",
+            border: "solid 1px #AAA",
+            borderRadius: 3
+        };
+        if (this.props.position === "under") {
+            popupPosition.top = 26;
+        }
+        else {
+            popupPosition.bottom = 26;
+        }
+        return (react_1.default.createElement(react_onclickout_1.default, { onClickOut: () => this.setState({ open: false, moreOpen: false }) },
+            react_1.default.createElement("div", { className: "mwater-visualization-text-palette-item", style: { position: "relative" }, onMouseDown: this.handleMouseDown },
+                react_1.default.createElement("style", null, `
+              .dropdown-palette-menu-item {
+                color: black;
+                background-color: white;
+                text-align: left;
+                padding: 5px 15px 5px 15px;
+                cursor: pointer;
+              }
+              .dropdown-palette-menu-item:hover {
+                background-color: #DDD;
+              }
+            `),
+                this.state.open ? react_1.default.createElement("div", { style: popupPosition }, this.renderItems()) : undefined,
+                this.props.label)));
+    }
+}
+exports.default = DropdownPaletteItem;

package/lib/richtext/FontColorPaletteItem.d.ts

@@ -14,10 +14,6 @@ export default class FontColorPaletteItem extends React.Component<FontColorPalet
     };
     constructor(props: any);
     handleMouseDown: (ev: any) => void;
-    render(): React.CElement<{
-        onClickOut: () => void;
-    }, React.Component<{
-        onClickOut: () => void;
-    }, any, any>>;
+    render(): React.JSX.Element;
 }
 export {};

package/lib/richtext/FontColorPaletteItem.js

@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const lodash_1 = __importDefault(require("lodash"));
 const react_onclickout_1 = __importDefault(require("react-onclickout"));
 const color_1 = __importDefault(require("color"));
+const CustomColorsContext_1 = require("../CustomColorsContext");
 // Palette item that allows picking a color
 class FontColorPaletteItem extends react_1.default.Component {
     static defaultProps = { position: "under" };
@@ -37,30 +37,25 @@ class FontColorPaletteItem extends react_1.default.Component {
         else {
             popupPosition["bottom"] = 26;
         }
-        return R(react_onclickout_1.default, { onClickOut: () => this.setState({ open: false }) }, R("div", {
-            className: "mwater-visualization-text-palette-item",
-            onMouseDown: this.handleMouseDown,
-            style: { position: "relative" }
-        }, this.state.open
-            ? R("div", { style: popupPosition }, R(ColorPaletteComponent, {
-                onSetColor: (color) => {
-                    this.props.onSetColor(color);
-                    return this.setState({ open: false });
-                }
-            }))
-            : undefined, R("i", { className: "fa fa-tint" })));
+        return (react_1.default.createElement(react_onclickout_1.default, { onClickOut: () => this.setState({ open: false }) },
+            react_1.default.createElement("div", { className: "mwater-visualization-text-palette-item", onMouseDown: this.handleMouseDown, style: { position: "relative" } },
+                this.state.open ? (react_1.default.createElement("div", { style: popupPosition },
+                    react_1.default.createElement(ColorPaletteComponent, { onSetColor: (color) => {
+                            this.props.onSetColor(color);
+                            return this.setState({ open: false });
+                        } }))) : undefined,
+                react_1.default.createElement("i", { className: "fas fa-palette" }))));
     }
 }
 exports.default = FontColorPaletteItem;
 class ColorPaletteComponent extends react_1.default.Component {
+    static contextType = CustomColorsContext_1.CustomColorsContext;
     renderColor(color) {
-        return R("td", null, R("div", {
-            style: { width: 16, height: 15, backgroundColor: color, margin: 1 },
-            onMouseDown: (ev) => {
-                ev.preventDefault();
-                return this.props.onSetColor(color);
-            }
-        }));
+        return (react_1.default.createElement("td", null,
+            react_1.default.createElement("div", { style: { width: 16, height: 15, backgroundColor: color, margin: 1 }, onMouseDown: (ev) => {
+                    ev.preventDefault();
+                    this.props.onSetColor(color);
+                } })));
     }
     render() {
         const baseColors = [
@@ -73,12 +68,22 @@ class ColorPaletteComponent extends react_1.default.Component {
             "#9900FF",
             "#FF00FF" // magenta
         ];
-        return R("div", { style: { padding: 5 } }, R("table", null, R("tbody", null, 
-        // Grey shades
-        R("tr", null, lodash_1.default.map(lodash_1.default.range(0, 8), (i) => {
-            return this.renderColor((0, color_1.default)({ r: (i * 255) / 7, g: (i * 255) / 7, b: (i * 255) / 7 }).hex());
-        })), R("tr", { style: { height: 5 } }), 
-        // Base colors
-        R("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor(c))), R("tr", { style: { height: 5 } }), R("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor((0, color_1.default)(c).lighten(0.7).hex()))), R("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor((0, color_1.default)(c).lighten(0.5).hex()))), R("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor((0, color_1.default)(c).lighten(0.3).hex()))), R("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor((0, color_1.default)(c).darken(0.3).hex()))), R("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor((0, color_1.default)(c).darken(0.5).hex()))), R("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor((0, color_1.default)(c).darken(0.7).hex()))))));
+        const customColors = this.context?.customColors || [];
+        return (react_1.default.createElement("div", { style: { padding: 5 } },
+            react_1.default.createElement("table", null,
+                react_1.default.createElement("tbody", null,
+                    lodash_1.default.chunk(customColors.filter(color => color != null), 8).map((colorGroup, index) => (react_1.default.createElement("tr", { key: index }, colorGroup.map((color) => this.renderColor(color))))),
+                    react_1.default.createElement("tr", null, lodash_1.default.map(lodash_1.default.range(0, 8), (i) => {
+                        return this.renderColor((0, color_1.default)({ r: (i * 255) / 7, g: (i * 255) / 7, b: (i * 255) / 7 }).hex());
+                    })),
+                    react_1.default.createElement("tr", { style: { height: 5 } }),
+                    react_1.default.createElement("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor(c))),
+                    react_1.default.createElement("tr", { style: { height: 5 } }),
+                    react_1.default.createElement("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor((0, color_1.default)(c).lighten(0.7).hex()))),
+                    react_1.default.createElement("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor((0, color_1.default)(c).lighten(0.5).hex()))),
+                    react_1.default.createElement("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor((0, color_1.default)(c).lighten(0.3).hex()))),
+                    react_1.default.createElement("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor((0, color_1.default)(c).darken(0.3).hex()))),
+                    react_1.default.createElement("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor((0, color_1.default)(c).darken(0.5).hex()))),
+                    react_1.default.createElement("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor((0, color_1.default)(c).darken(0.7).hex())))))));
     }
 }

package/lib/richtext/ItemsHtmlConverter.js

@@ -65,6 +65,9 @@ class ItemsHtmlConverter {
                         if (!allowedStyles[key]) {
                             continue;
                         }
+                        if (value == null || value === "") {
+                            continue;
+                        }
                         if (!first) {
                             attrs += " ";
                         }
@@ -133,13 +136,19 @@ class ItemsHtmlConverter {
                 }
                 const item = { type: "element", tag, items: this.convertElemToItems(node) };
                 // Add style
-                if (node.style != null) {
-                    for (style of node.style) {
+                const nodeElement = node;
+                if (nodeElement.style != null) {
+                    const styleDeclaration = nodeElement.style;
+                    for (const style of styleDeclaration) {
                         if (!allowedStyles[style]) {
                             continue;
                         }
+                        const value = styleDeclaration[style];
+                        if (value == null || value === "") {
+                            continue;
+                        }
                         item.style = item.style || {};
-                        item.style[style] = node.style[style];
+                        item.style[style] = value;
                     }
                 }
                 // Convert align (Firefox)

package/lib/richtext/RichTextComponent.d.ts

@@ -1,14 +1,14 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, CSSProperties, MouseEvent } from "react";
 import { ContentEditableComponent } from "@mwater/expressions-ui";
 import ItemsHtmlConverter, { HtmlItem } from "./ItemsHtmlConverter";
 export interface RichTextComponentProps {
     items?: HtmlItem[];
-    onItemsChange: (items: HtmlItem[]) => void;
+    onItemsChange?: (items: HtmlItem[]) => void;
     onItemClick?: (item: HtmlItem) => void;
     /** Optional className of editor wrapper */
     className?: string;
     /** Optional style of editor wrapper */
-    style?: any;
+    style?: CSSProperties;
     /** Converter to use for editing */
     itemsHtmlConverter?: ItemsHtmlConverter;
     /** True (default) to include heading h1, h2 in palette */
@@ -16,9 +16,10 @@ export interface RichTextComponentProps {
     /** Extra buttons to put in palette */
     extraPaletteButtons?: ReactNode;
 }
-export default class RichTextComponent extends React.Component<RichTextComponentProps, {
+interface RichTextComponentState {
     focused: boolean;
-}> {
+}
+export default class RichTextComponent extends React.Component<RichTextComponentProps, RichTextComponentState> {
     static defaultProps: {
         includeHeadings: boolean;
         items: never[];
@@ -27,58 +28,31 @@ export default class RichTextComponent extends React.Component<RichTextComponent
     entireComponent: HTMLElement | null;
     contentEditable: ContentEditableComponent | null;
     paletteComponent: HTMLElement | null;
-    constructor(props: any);
-    handleClick: (ev: any) => void;
-    pasteHTML(html: any): void;
+    /** Number of changes in progress. Used with beginChanges and endChanges
+     * to prevent onChange being called during a change */
+    changesInProgress: number;
+    constructor(props: RichTextComponentProps);
+    handleClick: (ev: MouseEvent) => void;
+    pasteHTML(html: string): void;
     focus(): void;
+    beginChanges(): void;
+    endChanges(): void;
     handleInsertExpr: (item: any) => void;
-    handleSetFontSize: (size: any) => any;
-    handleSetFontColor: (color: any) => void;
-    handleChange: (elem: any) => void;
+    handleSetFontColor: (color: string) => void;
+    handleSetFontSize: (tag: string, size: string | null) => void;
+    handleChange: (elem: HTMLElement) => void;
     handleFocus: () => void;
     handleBlur: () => void;
-    handleCommand: (command: any, param: any, ev?: any) => boolean;
-    handleCreateLink: (ev: any) => void;
-    handleEditorClick: (ev: any) => void;
+    handleCommand: (command: string, param: any, ev?: MouseEvent) => void;
+    handleCreateLink: (ev: MouseEvent) => void;
+    handleEditorClick: (ev: MouseEvent) => void;
     createHtml(): string;
-    renderPalette(): React.CElement<{
-        style: {
-            zIndex: number | null;
-        };
-        edges: string;
-        align: string;
-        render: (schemeName: any, { edges }: any) => React.DetailedReactHTMLElement<{
-            key: string;
-            className: string;
-            ref: (c: HTMLElement | null) => void;
-        }, HTMLElement>;
-    }, React.Component<{
-        style: {
-            zIndex: number | null;
-        };
+    renderPalette(): React.JSX.Element;
+    renderPaletteContent: (schemeName: string, { edges }: {
         edges: string;
-        align: string;
-        render: (schemeName: any, { edges }: any) => React.DetailedReactHTMLElement<{
-            key: string;
-            className: string;
-            ref: (c: HTMLElement | null) => void;
-        }, HTMLElement>;
-    }, any, any>>;
-    renderPaletteContent: (schemeName: any, { edges }: any) => React.DetailedReactHTMLElement<{
-        key: string;
-        className: string;
-        ref: (c: HTMLElement | null) => void;
-    }, HTMLElement>;
+    }) => React.JSX.Element;
     refContentEditable: (c: ContentEditableComponent | null) => void;
-    renderHtml(): React.DetailedReactHTMLElement<{
-        key: string;
-        style: any;
-        className: string | undefined;
-    }, HTMLElement>;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            position: "relative";
-        };
-        ref: (c: HTMLElement | null) => void;
-    }, HTMLElement>;
+    renderHtml(): React.JSX.Element;
+    render(): React.JSX.Element;
 }
+export {};