feat: ledpicker longPress 구현

entrylabs · Nov 26, 2024 · b940d15 · b940d15
1 parent 623a5ea
commit b940d15
Showing 1 changed file with 32 additions and 12 deletions.
diff --git a/src/components/ledPicker/ledPicker.jsx b/src/components/ledPicker/ledPicker.jsx
@@ -5,7 +5,9 @@ import { debounce } from 'lodash';
 import root from 'window-or-global';
 import produce from 'immer';
 import Theme from '@utils/Theme';
-import Dropdown from '@components/widget/dropdown';
+
+let timer = null;
+let islongPress = false;
 
 class LedPicker extends Component {
     get PICKER_WIDTH() {
@@ -166,7 +168,7 @@ class LedPicker extends Component {
             },
         };
     }
-    _handleLedStatusChange = ({ x, y, isReset, value }) => {
+    _handleLedStatusChange = ({ x, y, isReset, resetOne }) => {
         const { onChangeLedPicker, withLevel, maxBrightness } = this.props;
         const status = this.state.ledStatus;
         const targetBrightness = maxBrightness || 1;
@@ -178,9 +180,13 @@ class LedPicker extends Component {
             }
         } else {
             if (withLevel) {
-                status[x][y] -= 1;
-                if (status[x][y] < 0) {
-                    status[x][y] = 9;
+                if (resetOne) {
+                    status[x][y] = 0;
+                } else {
+                    status[x][y] -= 1;
+                    if (status[x][y] < 0) {
+                        status[x][y] = 9;
+                    }
                 }
             } else {
                 if (status[x][y] == targetBrightness) {
@@ -201,6 +207,25 @@ class LedPicker extends Component {
         );
     };
 
+    _handleMouseDown = (x, y) => (e) => {
+        timer = setTimeout(() => {
+            this._handleLedStatusChange({ x, y, isReset: false, resetOne: true });
+            islongPress = true;
+        }, 500);
+    };
+
+    _handleMouseUp = (x, y) => (e) => {
+        if (timer) {
+            clearTimeout(timer);
+            timer = null;
+        }
+        if (islongPress) {
+            islongPress = false;
+        } else {
+            this._handleLedStatusChange({ x, y, isReset: false });
+        }
+    };
+
     render() {
         const {
             className,
@@ -253,13 +278,8 @@ class LedPicker extends Component {
                                                 brightness > 0 && this.theme.led_item_selected
                                             } ${targetStyle}`}
                                             key={key}
-                                            onClick={() => {
-                                                this._handleLedStatusChange({
-                                                    x,
-                                                    y,
-                                                    isReset: false,
-                                                });
-                                            }}
+                                            onMouseDown={this._handleMouseDown(x, y)}
+                                            onMouseUp={this._handleMouseUp(x, y)}
                                         >
                                             <div className={`${this.theme.led_item_indicator}`}>
                                                 {brightness}