@dexteel/mesf-core 4.5.2 → 4.5.3

package/CHANGELOG.md

@@ -1,4 +1,6 @@
 # CHANGELOG
+## 4.5.3
+ - Use color picker in trendings
 ## 4.5.0
  - Use inputs in `/trendings`
 ## 4.4.0

package/dist/index.esm.js

@@ -29,6 +29,7 @@ import { Alert as Alert$3, TreeView as TreeView$1, TreeItem as TreeItem$1 } from
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import FolderIcon from '@material-ui/icons/Folder';
 import InsertDriveFileIcon from '@material-ui/icons/InsertDriveFile';
+import Popover from '@material-ui/core/Popover';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
 import PropTypes from 'prop-types';
 import { ResponsiveBar } from '@nivo/bar';
@@ -8291,16 +8292,21 @@ var css$1 = "/* ContextMenu.css */\n.context-menu {\n    position: absolute;\n
 n(css$1,{});
 
 var tagColors = [
-    "#2E4053",
-    "#5D6D7E",
-    "#85929E",
-    "#A93226",
-    "#CD6155",
-    "#2ECC71",
-    "#58D68D",
-    "#239B56",
-    "#7D3C98",
-    "#C39BD3", // Lavanda
+    "#5eaf60",
+    "green",
+    "#62bd9c",
+    "#53a285",
+    "#add8e6",
+    "#3280ba",
+    "blue",
+    "#5293c5",
+    "#3d556f",
+    "#a362bf",
+    "#dab0d8",
+    "black",
+    "#e74b3c",
+    "red",
+    "#bf3b2c", // dark red
 ];
 
 var TagSelectionModal = function (_a) {
@@ -8449,6 +8455,59 @@ var TagSelectionModal = function (_a) {
             React__default.createElement(CircularProgress$1, { size: "2rem" }))) : (React__default.createElement(TreeView$1, { expanded: expanded, onNodeSelect: handleNodeSelect, onNodeToggle: handleNodeToggle }, treeData.map(function (tree) { return renderTree(tree); }))))));
 };
 
+var useTagColorsStyles = makeStyles$1({
+    swatch: {
+        width: '25px',
+        height: '25px',
+        display: 'inline-block',
+        margin: '2px',
+        borderRadius: '4px',
+        cursor: 'pointer'
+    },
+    popover: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        padding: '10px',
+        maxWidth: '165px'
+    }
+});
+
+var Swatch = function (_a) {
+    var color = _a.color, onSelect = _a.onSelect;
+    var classes = useTagColorsStyles();
+    return (React__default.createElement("div", { className: classes.swatch, style: { backgroundColor: color }, onClick: function () { return onSelect(color); } }));
+};
+var ColorPicker = function (_a) {
+    var onChange = _a.onChange, color = _a.color, elementId = _a.elementId;
+    var classes = useTagColorsStyles();
+    var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
+    var handleClick = function (event) {
+        setAnchorEl(event.currentTarget);
+    };
+    var handleClose = function () {
+        setAnchorEl(null);
+    };
+    var open = Boolean(anchorEl);
+    var id = open ? 'simple-popover' : undefined;
+    return (React__default.createElement("div", null,
+        React__default.createElement(Button, { "aria-describedby": id, variant: "outlined", onClick: handleClick, style: {
+                backgroundColor: color,
+                width: '20px',
+                height: '20px',
+                minWidth: '20px',
+                padding: 0,
+                margin: '4px'
+            } }),
+        React__default.createElement(Popover, { id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'left'
+            } },
+            React__default.createElement("div", { className: classes.popover }, tagColors.map(function (color) { return (React__default.createElement(Swatch, { key: color, color: color, onSelect: function (color) {
+                    onChange(elementId, color);
+                    handleClose();
+                } })); })))));
+};
+
 var useTagsTableStyles = makeStyles$1(function (theme) { return ({
     checkbox: {
         '& input[type="checkbox"]': {
@@ -8473,6 +8532,9 @@ var TableComponent = function (_a) {
     var handleAutoScaleChange = function (index, value) {
         setTagList(function (prev) { return prev.map(function (tag, currentIndex) { return currentIndex === index ? __assign(__assign({}, tag), { autoScale: value }) : tag; }); });
     };
+    var handleColorChange = function (tagId, value) {
+        setTagList(function (prev) { return prev.map(function (tag) { return tag.tagId === tagId ? __assign(__assign({}, tag), { color: value }) : tag; }); });
+    };
     var _b = useState(null), selectedRowIndex = _b[0], setSelectedRowIndex = _b[1];
     var _c = useState(false), modalOpen = _c[0], setModalOpen = _c[1];
     var handleOpen = function () { return setModalOpen(true); };
@@ -8572,11 +8634,7 @@ var TableComponent = function (_a) {
                             React__default.createElement(Tooltip, { title: tag.tagName, placement: "top", arrow: true, interactive: true, enterDelay: 500 },
                                 React__default.createElement("div", { style: cellStyles.tagName }, tag.tagName))),
                         React__default.createElement("td", { style: headerStyles.color },
-                            React__default.createElement("div", { style: {
-                                    backgroundColor: tag.color,
-                                    width: '20px',
-                                    height: '20px'
-                                } })),
+                            React__default.createElement(ColorPicker, { onChange: handleColorChange, color: tag.color, elementId: tag.tagId })),
                         React__default.createElement("td", null,
                             React__default.createElement("input", { type: "text", style: { width: '100%' }, value: tag.minScale, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
                                     var value = e.target.value;

package/dist/pages/trendings/components/chart/TableComponent.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { CursorData, TagList } from './Trending';
 import './ContextMenu.css';
+import { CursorData, TagList } from './Trending';
 interface TableComponentProps {
     tagList: TagList;
     setTagList: React.Dispatch<React.SetStateAction<TagList>>;

package/dist/pages/trendings/components/chart/components/ColorPicker.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    onChange: Function;
+    color: string;
+    elementId?: number;
+}
+declare const ColorPicker: ({ onChange, color, elementId }: Props) => React.JSX.Element;
+export default ColorPicker;

package/dist/pages/trendings/components/chart/styles/TagColorsStyles.d.ts

@@ -0,0 +1 @@
+export declare const useTagColorsStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"swatch" | "popover">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dexteel/mesf-core",
-  "version": "4.5.2",
+  "version": "4.5.3",
   "author": "Dexteel Team",
   "module": "dist/index.esm.js",
   "typings": "dist/index.d.ts",