gdp-color-picker 1.1.0 → 1.1.1

package/src/lib/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
+import ReactDOM from "react-dom";
 import ColorBoard from "./ColorBoard";
 import { HueSlider, AlphaSlider } from "./Sliders";
 import ColorInput from "./ColorInput";
@@ -108,18 +109,25 @@ const ColorPicker = ({
   };
 
   useEffect(() => {
-    if (isOpen && containerRef.current && triggerRef.current) {
-      const triggerRect = triggerRef.current.getBoundingClientRect();
-      const containerRect = containerRef.current.getBoundingClientRect();
-      const left = triggerRect.left - containerRect.left;
-      const top = triggerRect.bottom - containerRect.top + 4;
-      setPanelStyle({
-        position: "absolute",
-        top,
-        left,
-        zIndex: 1000,
-      });
+    if (
+      !isOpen ||
+      !triggerRef.current ||
+      typeof window === "undefined" ||
+      typeof document === "undefined"
+    ) {
+      return;
     }
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const top = triggerRect.bottom + 4 + window.scrollY;
+    const left = triggerRect.left + window.scrollX;
+
+    setPanelStyle({
+      position: "absolute",
+      top,
+      left,
+      zIndex: 9999,
+    });
   }, [isOpen]);
 
   const handleEyeDropper = async () => {
@@ -171,10 +179,143 @@ const ColorPicker = ({
 
   const rgb = hsvToRgb(color.h, color.s, color.v);
   const displayColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${color.a})`;
-  const initialLimit = 28;
+  const initialLimit = 14;
   const visiblePresets = isExpanded ? presets : presets.slice(0, initialLimit);
   const showExpand = presets.length > initialLimit;
 
+  const panel = isOpen ? (
+    <div className="color-picker-panel" style={panelStyle}>
+      {showColorBoard && (
+        <div
+          className="color-picker-board-wrapper"
+          style={{
+            marginTop: "10px",
+            paddingTop: "10px",
+            borderTop: "1px solid #eee",
+          }}
+        >
+          <ColorBoard
+            hue={color.h}
+            saturation={color.s}
+            value={color.v}
+            onChange={(s, v) => handleChange({ s, v })}
+          />
+          <HueSlider hue={color.h} onChange={(h) => handleChange({ h })} />
+          <AlphaSlider
+            alpha={color.a}
+            color={rgb}
+            onChange={(a) => handleChange({ a })}
+          />
+          <ColorInput
+            hue={color.h}
+            saturation={color.s}
+            value={color.v}
+            alpha={color.a}
+            onChange={(newHsv) => handleChange(newHsv)}
+          />
+        </div>
+      )}
+      <div className="color-picker-presets">
+        <div className="palette-section-title" style={{ marginTop: 8 }}>
+          <span>Recommended</span>
+          <span
+            className="color-picker-icon-right"
+            onClick={handleEyeDropper}
+            title="屏幕取色"
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <defs>
+                <rect id="path-1" x="0" y="0" width="16" height="16" />
+              </defs>
+              <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                <g transform="translate(-920.000000, -594.000000)">
+                  <g transform="translate(720.000000, 418.000000)">
+                    <g transform="translate(200.000000, 176.000000)">
+                      <mask id="mask-2" fill="white">
+                        <use xlinkHref="#path-1" />
+                      </mask>
+                      <g />
+                      <g
+                        mask="url(#mask-2)"
+                        fill="#000000"
+                        fillOpacity="0.85"
+                        fillRule="nonzero"
+                      >
+                        <g transform="translate(8.106532, 8.106532) rotate(-315.000000) translate(-8.106532, -8.106532) translate(-0.266667, -0.266667)">
+                          <path d="M5.67238576,2.96585378 L6.99478644,4.28811977 L7.03978941,4.24867364 C7.66833128,3.72977631 8.60030981,3.76436946 9.18839345,4.3524531 L9.94264069,5.10670034 C10.1509203,5.31497996 10.1509203,5.65266795 9.94264069,5.86094757 L9.18778644,6.61411977 L13.7138769,11.1406782 C14.4428555,11.8696569 14.4428555,13.0515648 13.7138769,13.7805435 C12.9848982,14.5095222 11.8029902,14.5095222 11.0740115,13.7805435 L6.54778644,9.25411977 L5.7942809,10.0093074 C5.58600128,10.217587 5.24831329,10.217587 5.04003367,10.0093074 L4.28578644,9.25506012 C3.66094757,8.63022125 3.66094757,7.61715729 4.28578644,6.99231842 L4.35178644,6.92511977 L3.03252045,5.6057191 C2.30354177,4.87674042 2.30354177,3.69483246 3.03252045,2.96585378 C3.76149912,2.2368751 4.94340708,2.2368751 5.67238576,2.96585378 Z M8.43414622,7.36944204 L7.86778644,7.93411977 L7.30277537,8.50081289 L11.8282588,13.0262963 C12.1295204,13.3275579 12.6112769,13.3383172 12.925431,13.0585743 L12.9596296,13.0262963 C13.2720491,12.7138769 13.2720491,12.2073449 12.9596296,11.8949254 L8.43414622,7.36944204 Z M7.70907857,5.07958956 L7.67989899,5.10670034 L5.04003367,7.74656565 C4.83175405,7.95484528 4.83175405,8.29253326 5.04003367,8.50081289 L5.41715729,8.8779365 L8.81126984,5.48382395 L8.43414622,5.10670034 C8.23533385,4.90788797 7.91861014,4.89885105 7.70907857,5.07958956 Z M3.82096628,3.68782298 L3.78676768,3.72010101 C3.47434825,4.03252045 3.47434825,4.53905243 3.78676768,4.85147186 L5.10670034,6.17140452 L6.23807119,5.04003367 L4.91813853,3.72010101 C4.61687693,3.41883942 4.13512038,3.40808007 3.82096628,3.68782298 Z" transform="translate(8.373199, 8.373199) rotate(-315.000000) translate(-8.373199, -8.373199)" />
+                        </g>
+                      </g>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </span>
+        </div>
+        <div className={`presets-grid modern`}>
+          {presets.map((preset, idx) => (
+            <div
+              key={idx}
+              className="preset-item preset-item-inner"
+              style={{ backgroundColor: preset }}
+              onClick={() => {
+                const rgbValue = hexToRgb(preset);
+                if (rgbValue) {
+                  const hsv = rgbToHsv(rgbValue.r, rgbValue.g, rgbValue.b);
+                  handleChange({ ...hsv, a: 1 });
+                }
+              }}
+              title={preset}
+            />
+          ))}
+        </div>
+        {/* {showExpand && (
+          <div
+            className="presets-collapse"
+            onClick={() => setIsExpanded(!isExpanded)}
+          >
+            {isExpanded ? "Less" : "More"}
+            <span className={`collapse-arrow ${isExpanded ? "expanded" : ""}`}>
+              ▼
+            </span>
+          </div>
+        )} */}
+
+        {recentColors.length > 0 && (
+          <>
+            <div className="palette-section-title">Recent</div>
+            <div className="presets-grid recent">
+              {recentColors.map((recentColor, idx) => (
+                <div
+                  key={idx}
+                  className="preset-item"
+                  style={{ backgroundColor: recentColor }}
+                  onClick={() => {
+                    const rgbValue = hexToRgb(recentColor);
+                    if (rgbValue) {
+                      const hsv = rgbToHsv(
+                        rgbValue.r,
+                        rgbValue.g,
+                        rgbValue.b
+                      );
+                      handleChange({ ...hsv, a: 1 });
+                    }
+                  }}
+                  title={recentColor}
+                />
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  ) : null;
+
   return (
     <div className="color-picker-container" ref={containerRef}>
       <div className="color-picker-main-row">
@@ -193,12 +334,38 @@ const ColorPicker = ({
             {showArrow && (
               <span className={`color-picker-arrow ${isOpen ? "open" : ""}`}>
                 <svg
-                  viewBox="0 0 1024 1024"
-                  width="12"
-                  height="12"
-                  fill="currentColor"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3 0.1-12.7-6.4-12.7z" />
+                  <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                    <g
+                      transform="translate(-1348.000000, -88.000000)"
+                      fillRule="nonzero"
+                    >
+                      <g transform="translate(0.000000, 60.000000)">
+                        <g transform="translate(584.000000, 20.000000)">
+                          <g transform="translate(728.000000, 4.000000)">
+                            <g transform="translate(44.000000, 12.000000) rotate(-360.000000) translate(-44.000000, -12.000000) translate(36.000000, 4.000000)">
+                              <rect
+                                fill="#000000"
+                                opacity="0"
+                                x="0"
+                                y="0"
+                                width="16"
+                                height="16"
+                              />
+                              <path
+                                d="M13.0750341,5.34788541 C12.9440655,5.21691678 12.7257845,5.21691678 12.5948158,5.34788541 L8.01091405,9.93178717 L3.40518417,5.34788541 C3.27421555,5.21691678 3.05593452,5.21691678 2.92496589,5.34788541 C2.79399727,5.47885403 2.79399727,5.69713506 2.92496589,5.82810369 L7.77080491,10.6521146 C7.90177353,10.7830832 8.12005456,10.7830832 8.25102319,10.6521146 L13.0750341,5.82810369 C13.2060027,5.69713506 13.2060027,5.47885403 13.0750341,5.34788541 Z"
+                                stroke="#FFFFFF"
+                              />
+                            </g>
+                          </g>
+                        </g>
+                      </g>
+                    </g>
+                  </g>
                 </svg>
               </span>
             )}
@@ -219,122 +386,21 @@ const ColorPicker = ({
                 className="input-clear-icon"
                 onClick={() => setInputValue("")}
               >
-                ×
+                <img
+                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAA8klEQVQ4T51SwVHDQAzcdQOETugAqISkg/Cw9CRf2Q+gAkwlJB1QimnAYnRz57m55AG5l2+9K632RFw44zg+ALiPX+5+FJFTS2MNmNme5AuATUOcARxE5L3gq9DMJpJPlxxU2CQiu7gnYe70mq19tgXcfcXc/VlV34pwJnkTBFXdDsOwBfCRO+1EZKoczSJyywjC3b8qO4mYxai+SyGQfKSZHXIg9XhJHEDTPXHC7vXCq63mVP8cjrv/qOrm7DkAxGyRan1qLM3/rwUoz7UuQCkdixCrFW9atwt7JPcl6TNhIUdgy7Lcxb3ruu++74/tKv4CNXed5xhXezYAAAAASUVORK5CYII="
+                  alt=""
+                  width="12"
+                  height="12"
+                />
               </span>
             )}
           </div>
         )}
       </div>
 
-      {isOpen && (
-        <div
-          className="color-picker-panel"
-          style={panelStyle}
-        >
-          {showColorBoard && (
-            <div
-              className="color-picker-board-wrapper"
-              style={{
-                marginTop: "10px",
-                paddingTop: "10px",
-                borderTop: "1px solid #eee",
-              }}
-            >
-              <ColorBoard
-                hue={color.h}
-                saturation={color.s}
-                value={color.v}
-                onChange={(s, v) => handleChange({ s, v })}
-              />
-              <HueSlider hue={color.h} onChange={(h) => handleChange({ h })} />
-              <AlphaSlider
-                alpha={color.a}
-                color={rgb}
-                onChange={(a) => handleChange({ a })}
-              />
-              <ColorInput
-                hue={color.h}
-                saturation={color.s}
-                value={color.v}
-                alpha={color.a}
-                onChange={(newHsv) => handleChange(newHsv)}
-              />
-            </div>
-          )}
-          <div className="color-picker-presets">
-            <div className="palette-section-title" style={{ marginTop: 8 }}>
-              <span>Recommended</span>
-              <span
-                className="color-picker-icon-right"
-                onClick={handleEyeDropper}
-                title="屏幕取色"
-              >
-                <svg
-                  viewBox="0 0 1024 1024"
-                  width="12"
-                  height="12"
-                  fill="currentColor"
-                >
-                  <path d="M512 192C320 192 170.7 320 96 512c74.7 192 224 320 416 320s341.3-128 416-320C853.3 320 704 192 512 192zm0 512c-105.9 0-192-86.1-192-192s86.1-192 192-192 192 86.1 192 192-86.1 192-192 192zm0-320a128 128 0 100 256 128 128 0 000-256z" />
-                </svg>
-              </span>
-            </div>
-            <div className={`presets-grid modern`}>
-              {visiblePresets.map((preset, idx) => (
-                <div
-                  key={idx}
-                  className="preset-item"
-                  style={{ backgroundColor: preset }}
-                  onClick={() => {
-                    const rgb = hexToRgb(preset);
-                    if (rgb) {
-                      const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
-                      handleChange({ ...hsv, a: 1 });
-                    }
-                  }}
-                  title={preset}
-                />
-              ))}
-            </div>
-            {showExpand && (
-              <div
-                className="presets-collapse"
-                onClick={() => setIsExpanded(!isExpanded)}
-              >
-                {isExpanded ? "Less" : "More"}
-                <span
-                  className={`collapse-arrow ${isExpanded ? "expanded" : ""}`}
-                >
-                  ▼
-                </span>
-              </div>
-            )}
+      {typeof document !== "undefined" &&
+        ReactDOM.createPortal(panel, document.body)}
 
-            {recentColors.length > 0 && (
-              <>
-                <div className="palette-section-title">Recent</div>
-                <div className="presets-grid recent">
-                  {recentColors.map((color, idx) => (
-                    <div
-                      key={idx}
-                      className="preset-item"
-                      style={{ backgroundColor: color }}
-                      onClick={() => {
-                        const rgb = hexToRgb(color);
-                        if (rgb) {
-                          const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
-                          handleChange({ ...hsv, a: 1 });
-                        }
-                      }}
-                      title={color}
-                    />
-                  ))}
-                </div>
-              </>
-            )}
-          </div>
-        </div>
-      )}
       <div>
         <div className={`presets-grid modern`}>
           {visiblePresets.map((preset, idx) => (