Fix floater behaviour (#94)

foxford · Mar 23, 2021 · 32edee5 · 32edee5
1 parent 6050185
commit 32edee5
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 17 deletions.
diff --git a/packages/drawing-toolbar/package-lock.json b/packages/drawing-toolbar/package-lock.json
diff --git a/packages/drawing-toolbar/package.json b/packages/drawing-toolbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ulms/ui-drawing-toolbar",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "",
   "keywords": [
     "lerna"

diff --git a/packages/drawing-toolbar/src/drawing-toolbar.jsx b/packages/drawing-toolbar/src/drawing-toolbar.jsx
@@ -155,6 +155,7 @@ export class DrawingToolbar extends React.Component {
 
     if (opened === null) return
 
+    // TODO: remove implicit functional based on classnames
     const closestToolbarElement = event.target.closest(`.${css.root}`)
     const closestFloaterElement = event.target.closest(`.${css.floater}`)
 
@@ -250,7 +251,7 @@ export class DrawingToolbar extends React.Component {
 
           { isColorEnabled && (
             <div
-              className={cn(css.button, 'group-color', { [css.active]: opened === 'group-color' })}
+              className={cn(css.button, css.group, 'group-color', { [css.active]: opened === 'group-color' })}
               onClick={this.handleColorClick}
               onKeyDown={this.handleColorClick}
               role='button'
@@ -406,8 +407,8 @@ export class DrawingToolbar extends React.Component {
 
           { isEraserEnabled && (
             <GroupEraser
-              eraserWidth={eraserWidth}
               css={css}
+              eraserWidth={eraserWidth}
               handleChange={handleChange}
               opened={opened}
             />
@@ -419,7 +420,6 @@ export class DrawingToolbar extends React.Component {
               css={css}
               handleChange={handleChange}
               opened={opened}
-              tool={tool}
             />
           )}
 

diff --git a/packages/drawing-toolbar/src/drawing-toolbar.module.css b/packages/drawing-toolbar/src/drawing-toolbar.module.css
@@ -51,7 +51,12 @@
   pointer-events: none;
 }
 
-.button.group::after {
+.group {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.group::after {
   width: 0;
   height: 0;
   position: absolute;
@@ -63,12 +68,7 @@
   right: 3px;
 }
 
-.button.group {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
+/* TODO: get rid of duplicated popover and floater styles */
 .popover {
   padding: 12px;
   position: relative;
@@ -79,7 +79,9 @@
   border-radius: 5px;
   user-select: none;
 }
-.floater {}
+.floater {
+  user-select: none;
+}
 
 .row {
   display: flex;

diff --git a/packages/drawing-toolbar/src/group-eraser.jsx b/packages/drawing-toolbar/src/group-eraser.jsx
@@ -4,8 +4,8 @@ import Floater from 'react-floater'
 import Slider from 'rc-slider/lib/Slider'
 
 export const GroupEraser = ({
-  eraserWidth,
   css,
+  eraserWidth,
   handleChange,
   opened,
 }) => (

diff --git a/packages/drawing-toolbar/src/group-shape.jsx b/packages/drawing-toolbar/src/group-shape.jsx
@@ -52,19 +52,19 @@ export const GroupShape = ({
   <Floater
     component={() => (
       <div
-        className={css.popover}
+        className={cn(css.popover, css.floater)}
         style={{ color: toCSSColor(brushColor) }}
       >
         <div className={css.row}>
           {
             shapeToolModeList.map(({
               icon, mode, solid,
-            }, index) => (
+            }) => (
               <div
                 className={cn(css.button, {
                   [css.active]: shapeMode === mode && tool === toolEnum.SHAPE,
                 })}
-                key={index}
+                key={`${mode}-${solid}`}
                 onClick={() => handleChange({ shapeMode: mode, tool: toolEnum.SHAPE })}
                 role='button'
                 tabIndex='0'