react-best-gradient-color-picker - npm Package Compare versions

Comparing version 3.0.12-beta.3 to 3.0.12-beta.4

dist/cjs/components/index.js

@@ -28,4 +28,10 @@ "use strict";
     var safeValue = (0, utils_js_1.objectToString)(value);
+    var isDarkMode = typeof window === 'undefined' || disableDarkMode
+        ? false
+        : window.matchMedia('(prefers-color-scheme: dark)').matches ||
+            disableLightMode
+            ? true
+            : false;
     // const contRef = useRef<HTMLDivElement>(null)
-    var defaultStyles = (0, styles_js_1.getStyles)(disableDarkMode, disableLightMode);
+    var defaultStyles = (0, styles_js_1.getStyles)(isDarkMode);
     var pickerId = id
@@ -41,4 +47,4 @@ ? id
         className: className, style: __assign(__assign(__assign({}, defaultStyles.body), style), { width: width }) },
-        react_1.default.createElement(context_js_1.default, { value: safeValue, onChange: onChange, squareWidth: width, squareHeight: height, hideOpacity: hideOpacity, defaultStyles: defaultStyles },
+        react_1.default.createElement(context_js_1.default, { value: safeValue, onChange: onChange, squareWidth: width, squareHeight: height, isDarkMode: isDarkMode, hideOpacity: hideOpacity, defaultStyles: defaultStyles },
             react_1.default.createElement(Picker_js_1.default, { pickerId: pickerId, hideControls: hideControls, hideInputs: hideInputs, hidePresets: hidePresets, hideOpacity: hideOpacity, hideHue: hideHue, presets: presets, hideEyeDrop: hideEyeDrop, hideAdvancedSliders: hideAdvancedSliders, hideColorGuide: hideColorGuide, hideInputType: hideInputType, hideColorTypeBtns: hideColorTypeBtns, hideGradientType: hideGradientType, hideGradientAngle: hideGradientAngle, hideGradientStop: hideGradientStop, hideGradientControls: hideGradientControls, hidePickerSquare: hidePickerSquare, locales: locales }))));
 }

dist/cjs/components/Presets.js

@@ -13,3 +13,3 @@ "use strict";
     var _b = _a.presets, presets = _b === void 0 ? [] : _b;
-    var _c = (0, context_js_1.usePicker)(), value = _c.value, onChange = _c.onChange, handleChange = _c.handleChange, squareWidth = _c.squareWidth;
+    var _c = (0, context_js_1.usePicker)(), value = _c.value, onChange = _c.onChange, handleChange = _c.handleChange, squareWidth = _c.squareWidth, isDarkMode = _c.isDarkMode;
     var getPresets = function () {
@@ -32,3 +32,3 @@ if ((presets === null || presets === void 0 ? void 0 : presets.length) > 0) {
     var getBorder = function (p) {
-        if (!p)
+        if (!p || isDarkMode)
             return '';
@@ -35,0 +35,0 @@ var c = p === null || p === void 0 ? void 0 : p.replace(' ', '');

dist/cjs/context.d.ts

 import React, { ReactNode } from 'react';
 import { GradientProps, Styles } from './shared/types.js';
-export default function PickerContextWrapper({ value, children, onChange, squareWidth, hideOpacity, squareHeight, defaultStyles, }: PCWProps): React.JSX.Element;
+export default function PickerContextWrapper({ value, children, onChange, isDarkMode, squareWidth, hideOpacity, squareHeight, defaultStyles, }: PCWProps): React.JSX.Element;
 export declare function usePicker(): PickerContextProps;
@@ -13,2 +13,3 @@ type PCWProps = {
     defaultStyles: Styles;
+    isDarkMode: boolean;
 };
@@ -42,3 +43,4 @@ export type PickerContextProps = {
     };
+    isDarkMode: boolean;
 };
 export {};

dist/cjs/context.js

@@ -57,3 +57,3 @@ "use strict";
 function PickerContextWrapper(_a) {
-    var value = _a.value, children = _a.children, onChange = _a.onChange, squareWidth = _a.squareWidth, hideOpacity = _a.hideOpacity, squareHeight = _a.squareHeight, defaultStyles = _a.defaultStyles;
+    var value = _a.value, children = _a.children, onChange = _a.onChange, isDarkMode = _a.isDarkMode, squareWidth = _a.squareWidth, hideOpacity = _a.hideOpacity, squareHeight = _a.squareHeight, defaultStyles = _a.defaultStyles;
     var colors = (0, formatters_js_1.getColors)(value);
@@ -117,2 +117,3 @@ var _b = (0, utils_js_1.getDetails)(value), degrees = _b.degrees, degreeStr = _b.degreeStr, isGradient = _b.isGradient, gradientType = _b.gradientType;
         tinyColor: tinyColor,
+        isDarkMode: isDarkMode,
         isGradient: isGradient,
@@ -119,0 +120,0 @@ squareWidth: squareWidth,

dist/cjs/styles/styles.d.ts

 import { Styles } from '../shared/types.js';
-export declare const getStyles: (disableDarkMode: boolean, disableLightMode: boolean) => Styles;
+export declare const getStyles: (isDarkMode: boolean) => Styles;
 export declare const colorTypeBtnStyles: (selected: boolean, styles: Styles) => React.CSSProperties;
 export declare const controlBtnStyles: (selected: boolean, styles: Styles) => React.CSSProperties;
 export declare const modalBtnStyles: (selected: boolean, styles: Styles) => React.CSSProperties;

dist/cjs/styles/styles.js

@@ -177,10 +177,11 @@ "use strict";
 };
-var getStyles = function (disableDarkMode, disableLightMode) {
-    if (typeof window === 'undefined' || disableDarkMode)
-        return styles;
-    if (window.matchMedia("(prefers-color-scheme: dark)").matches || disableLightMode) {
+var getStyles = function (isDarkMode) {
+    if (isDarkMode) {
         var mergedStyles = __assign({}, styles);
         for (var key in darkStyles_js_1.darkStyles) {
             if (Object.prototype.hasOwnProperty.call(darkStyles_js_1.darkStyles, key)) {
-                mergedStyles[key] = __assign(__assign({}, (Object.prototype.hasOwnProperty.call(mergedStyles, key) ? mergedStyles[key] : {})), darkStyles_js_1.darkStyles[key]);
+                ;
+                mergedStyles[key] = __assign(__assign({}, (Object.prototype.hasOwnProperty.call(mergedStyles, key)
+                    ? mergedStyles[key]
+                    : {})), darkStyles_js_1.darkStyles[key]);
             }
@@ -187,0 +188,0 @@ }

dist/esm/components/index.js

@@ -22,4 +22,10 @@ 'use client';
     var safeValue = objectToString(value);
+    var isDarkMode = typeof window === 'undefined' || disableDarkMode
+        ? false
+        : window.matchMedia('(prefers-color-scheme: dark)').matches ||
+            disableLightMode
+            ? true
+            : false;
     // const contRef = useRef<HTMLDivElement>(null)
-    var defaultStyles = getStyles(disableDarkMode, disableLightMode);
+    var defaultStyles = getStyles(isDarkMode);
     var pickerId = id
@@ -35,4 +41,4 @@ ? id
         className: className, style: __assign(__assign(__assign({}, defaultStyles.body), style), { width: width }) },
-        React.createElement(PickerContextWrapper, { value: safeValue, onChange: onChange, squareWidth: width, squareHeight: height, hideOpacity: hideOpacity, defaultStyles: defaultStyles },
+        React.createElement(PickerContextWrapper, { value: safeValue, onChange: onChange, squareWidth: width, squareHeight: height, isDarkMode: isDarkMode, hideOpacity: hideOpacity, defaultStyles: defaultStyles },
             React.createElement(Picker, { pickerId: pickerId, hideControls: hideControls, hideInputs: hideInputs, hidePresets: hidePresets, hideOpacity: hideOpacity, hideHue: hideHue, presets: presets, hideEyeDrop: hideEyeDrop, hideAdvancedSliders: hideAdvancedSliders, hideColorGuide: hideColorGuide, hideInputType: hideInputType, hideColorTypeBtns: hideColorTypeBtns, hideGradientType: hideGradientType, hideGradientAngle: hideGradientAngle, hideGradientStop: hideGradientStop, hideGradientControls: hideGradientControls, hidePickerSquare: hidePickerSquare, locales: locales }))));
 }

dist/esm/components/Presets.js

@@ -8,3 +8,3 @@ /* eslint-disable react/no-array-index-key */
     var _b = _a.presets, presets = _b === void 0 ? [] : _b;
-    var _c = usePicker(), value = _c.value, onChange = _c.onChange, handleChange = _c.handleChange, squareWidth = _c.squareWidth;
+    var _c = usePicker(), value = _c.value, onChange = _c.onChange, handleChange = _c.handleChange, squareWidth = _c.squareWidth, isDarkMode = _c.isDarkMode;
     var getPresets = function () {
@@ -27,3 +27,3 @@ if ((presets === null || presets === void 0 ? void 0 : presets.length) > 0) {
     var getBorder = function (p) {
-        if (!p)
+        if (!p || isDarkMode)
             return '';
@@ -30,0 +30,0 @@ var c = p === null || p === void 0 ? void 0 : p.replace(' ', '');

dist/esm/context.d.ts

 import React, { ReactNode } from 'react';
 import { GradientProps, Styles } from './shared/types.js';
-export default function PickerContextWrapper({ value, children, onChange, squareWidth, hideOpacity, squareHeight, defaultStyles, }: PCWProps): React.JSX.Element;
+export default function PickerContextWrapper({ value, children, onChange, isDarkMode, squareWidth, hideOpacity, squareHeight, defaultStyles, }: PCWProps): React.JSX.Element;
 export declare function usePicker(): PickerContextProps;
@@ -13,2 +13,3 @@ type PCWProps = {
     defaultStyles: Styles;
+    isDarkMode: boolean;
 };
@@ -42,3 +43,4 @@ export type PickerContextProps = {
     };
+    isDarkMode: boolean;
 };
 export {};

dist/esm/context.js

@@ -27,3 +27,3 @@ var __assign = (this && this.__assign) || function () {
 export default function PickerContextWrapper(_a) {
-    var value = _a.value, children = _a.children, onChange = _a.onChange, squareWidth = _a.squareWidth, hideOpacity = _a.hideOpacity, squareHeight = _a.squareHeight, defaultStyles = _a.defaultStyles;
+    var value = _a.value, children = _a.children, onChange = _a.onChange, isDarkMode = _a.isDarkMode, squareWidth = _a.squareWidth, hideOpacity = _a.hideOpacity, squareHeight = _a.squareHeight, defaultStyles = _a.defaultStyles;
     var colors = getColors(value);
@@ -87,2 +87,3 @@ var _b = getDetails(value), degrees = _b.degrees, degreeStr = _b.degreeStr, isGradient = _b.isGradient, gradientType = _b.gradientType;
         tinyColor: tinyColor,
+        isDarkMode: isDarkMode,
         isGradient: isGradient,
@@ -89,0 +90,0 @@ squareWidth: squareWidth,

dist/esm/styles/styles.d.ts

 import { Styles } from '../shared/types.js';
-export declare const getStyles: (disableDarkMode: boolean, disableLightMode: boolean) => Styles;
+export declare const getStyles: (isDarkMode: boolean) => Styles;
 export declare const colorTypeBtnStyles: (selected: boolean, styles: Styles) => React.CSSProperties;
 export declare const controlBtnStyles: (selected: boolean, styles: Styles) => React.CSSProperties;
 export declare const modalBtnStyles: (selected: boolean, styles: Styles) => React.CSSProperties;

dist/esm/styles/styles.js

@@ -174,10 +174,11 @@ var __assign = (this && this.__assign) || function () {
 };
-export var getStyles = function (disableDarkMode, disableLightMode) {
-    if (typeof window === 'undefined' || disableDarkMode)
-        return styles;
-    if (window.matchMedia("(prefers-color-scheme: dark)").matches || disableLightMode) {
+export var getStyles = function (isDarkMode) {
+    if (isDarkMode) {
         var mergedStyles = __assign({}, styles);
         for (var key in darkStyles) {
             if (Object.prototype.hasOwnProperty.call(darkStyles, key)) {
-                mergedStyles[key] = __assign(__assign({}, (Object.prototype.hasOwnProperty.call(mergedStyles, key) ? mergedStyles[key] : {})), darkStyles[key]);
+                ;
+                mergedStyles[key] = __assign(__assign({}, (Object.prototype.hasOwnProperty.call(mergedStyles, key)
+                    ? mergedStyles[key]
+                    : {})), darkStyles[key]);
             }
@@ -184,0 +185,0 @@ }

package.json

 {
   "name": "react-best-gradient-color-picker",
-  "version": "3.0.12-beta.3",
+  "version": "3.0.12-beta.4",
   "description": "An easy to use color/gradient picker for React.js",
@@ -5,0 +5,0 @@ "type": "module",

src/styles/styles.ts

@@ -182,19 +182,20 @@ import { darkStyles } from './darkStyles.js';
 
-export const getStyles = (disableDarkMode: boolean, disableLightMode: boolean) => {
-  if (typeof window === 'undefined' || disableDarkMode) return styles;
-  if (window.matchMedia("(prefers-color-scheme: dark)").matches || disableLightMode) {
+export const getStyles = (isDarkMode: boolean) => {
+  if (isDarkMode) {
     const mergedStyles = { ...styles }
     for (const key in darkStyles) {
       if (Object.prototype.hasOwnProperty.call(darkStyles, key)) {
-        (mergedStyles as Record<string, any>)[key] = {
-          ...(Object.prototype.hasOwnProperty.call(mergedStyles, key) ? (mergedStyles as Record<string, any>)[key] : {}),
+        ;(mergedStyles as Record<string, any>)[key] = {
+          ...(Object.prototype.hasOwnProperty.call(mergedStyles, key)
+            ? (mergedStyles as Record<string, any>)[key]
+            : {}),
           ...(darkStyles as Record<string, any>)[key],
-        };
+        }
       }
     }
 
-    return mergedStyles;
-  } 
-  return styles;
-};
+    return mergedStyles
+  }
+  return styles
+}
 
@@ -201,0 +202,0 @@ export const colorTypeBtnStyles = (selected: boolean, styles: Styles): React.CSSProperties => {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

453778

increased by0.15%

Lines of code

10944

increased by0.3%

No dependency changes