@smart-react-components/ui - npm Package Compare versions

Comparing version 2.0.0-alpha-118 to 2.0.0-alpha-119

Breadcrumb/BreadcrumbItem.js

@@ -10,9 +10,13 @@ "use strict";
 const react_1 = __importDefault(require("react"));
+const styled_components_1 = require("styled-components");
 const BreadcrumbItemElement_1 = __importDefault(require("../components/Breadcrumb/BreadcrumbItemElement"));
+const wave_effect_1 = require("../util/wave-effect");
 const WaveEffect_1 = __importDefault(require("../WaveEffect"));
 const BreadcrumbItem = (props) => {
+    const theme = (0, styled_components_1.useTheme)();
+    const waveEffectPalette = react_1.default.useMemo(() => (0, wave_effect_1.getWaveEffectPalette)(props, theme.$.vars.isDarkMode), [props.palette, props.isOutline, props.isSoft, props.waveEffectPalette, theme.$.vars.isDarkMode]);
     const AnchorEl = (react_1.default.createElement(A_1.default, Object.assign({}, (0, element_props_1.default)(props, [click_events_1.default]), props.elementProps), props.children));
-    const El = props.hasWaveEffect ? react_1.default.createElement(WaveEffect_1.default, { palette: props.waveEffectPalette }, AnchorEl) : AnchorEl;
+    const El = props.hasWaveEffect ? react_1.default.createElement(WaveEffect_1.default, { palette: waveEffectPalette }, AnchorEl) : AnchorEl;
     return (react_1.default.createElement(BreadcrumbItemElement_1.default, { isActive: props.isActive, isDisabled: props.isDisabled, isOutline: props.isOutline, isSoft: props.isSoft, palette: props.palette, separator: props.separator, shape: props.shape }, El));
 };
 exports.default = BreadcrumbItem;

Breadcrumb/BreadcrumbLink.js

@@ -9,5 +9,9 @@ "use strict";
 const react_1 = __importDefault(require("react"));
+const styled_components_1 = require("styled-components");
 const WaveEffect_1 = __importDefault(require("../WaveEffect"));
 const BreadcrumbItemElement_1 = __importDefault(require("../components/Breadcrumb/BreadcrumbItemElement"));
+const wave_effect_1 = require("../util/wave-effect");
 const BreadcrumbLink = (props) => {
+    const theme = (0, styled_components_1.useTheme)();
+    const waveEffectPalette = react_1.default.useMemo(() => (0, wave_effect_1.getWaveEffectPalette)(props, theme.$.vars.isDarkMode), [props.palette, props.isOutline, props.isSoft, props.waveEffectPalette, theme.$.vars.isDarkMode]);
     const { children, handleOnClick, isActive } = (0, useLink_1.default)({
@@ -22,3 +26,3 @@ children: props.children,
     const AnchorEl = (react_1.default.createElement(A_1.default, Object.assign({}, props.elementProps, { href: props.to, onClick: handleOnClick }), children));
-    const El = props.hasWaveEffect ? react_1.default.createElement(WaveEffect_1.default, { palette: props.waveEffectPalette }, AnchorEl) : AnchorEl;
+    const El = props.hasWaveEffect ? react_1.default.createElement(WaveEffect_1.default, { palette: waveEffectPalette }, AnchorEl) : AnchorEl;
     return (react_1.default.createElement(BreadcrumbItemElement_1.default, { isActive: isActive, isDisabled: props.isDisabled, isOutline: props.isOutline, isSoft: props.isSoft, palette: props.palette, separator: props.separator, shape: props.shape }, El));
@@ -25,0 +29,0 @@ };

Button/index.js

@@ -43,3 +43,3 @@ "use strict";
     });
-    const waveEffectPalette = react_1.default.useMemo(() => (0, wave_effect_1.getWaveEffectPalette)(props, theme.$.vars.isDark), [props.palette, props.isOutline, props.isSoft, props.isLink, props.waveEffectPalette, theme.$.vars.isDarkMode]);
+    const waveEffectPalette = react_1.default.useMemo(() => (0, wave_effect_1.getWaveEffectPalette)(props, theme.$.vars.isDarkMode), [props.palette, props.isOutline, props.isSoft, props.isLink, props.waveEffectPalette, theme.$.vars.isDarkMode]);
     const getLoadingEl = () => {
@@ -46,0 +46,0 @@ var _a;

package.json

 {
   "name": "@smart-react-components/ui",
-  "version": "2.0.0-alpha-118",
+  "version": "2.0.0-alpha-119",
   "license": "MIT",
@@ -5,0 +5,0 @@ "main": "index.js",

util/wave-effect.d.ts

 import { PaletteProp } from '@smart-react-components/core/types';
 /**
- * If waveEffectPalette is given returns it however if not, generates a default palette for the wave effect.
+ * If waveEffectPalette is given, returns it however if not, generates a default palette for the wave effect.
  *
- * If the background is transparent, considered the body element uses the general background color in the color attributes.
- * If palette is light and the dark mode is disabled, both the body background and the effect will be light color
- * so defaults the wave palette to dark.
- * The same goes for vice-versa. If the palette is dark and the dark mode is enabled, both the body background and the effect will be dark color
- * then defaults the wave palette to light.
+ * If the background is transparent, consideres the body element uses the general background color in the color attributes.
+ * That's why the wave effect palette is the opposite of the general background color.
  *
- * If the background is transparent except from the above condition or uses the soft colors, defaults to the palette value to emphasize the palette color during the effect.
+ * If palette is light, defaults the wave palette to dark or vice-versa.
  *
@@ -13,0 +10,0 @@ * If none of the above conditions are met, defaults to light since most of the default palette main colors are harmonious with the light effect color.

util/wave-effect.js

@@ -5,11 +5,8 @@ "use strict";
 /**
- * If waveEffectPalette is given returns it however if not, generates a default palette for the wave effect.
+ * If waveEffectPalette is given, returns it however if not, generates a default palette for the wave effect.
  *
- * If the background is transparent, considered the body element uses the general background color in the color attributes.
- * If palette is light and the dark mode is disabled, both the body background and the effect will be light color
- * so defaults the wave palette to dark.
- * The same goes for vice-versa. If the palette is dark and the dark mode is enabled, both the body background and the effect will be dark color
- * then defaults the wave palette to light.
+ * If the background is transparent, consideres the body element uses the general background color in the color attributes.
+ * That's why the wave effect palette is the opposite of the general background color.
  *
- * If the background is transparent except from the above condition or uses the soft colors, defaults to the palette value to emphasize the palette color during the effect.
+ * If palette is light, defaults the wave palette to dark or vice-versa.
  *
@@ -22,18 +19,17 @@ * If none of the above conditions are met, defaults to light since most of the default palette main colors are harmonious with the light effect color.
     }
-    if ((props.isOutline || props.isLink) && ['dynamic', '!dynamic', 'light', 'dark'].includes(props.palette)) {
+    if (props.isOutline || props.isLink) {
         return isDark ? 'light' : 'dark';
     }
-    switch (props.palette) {
-        case 'dynamic':
-            return '!dynamic';
-        case '!dynamic':
-            return 'dynamic';
-        case 'light':
-            return 'dark';
-        case 'dark':
-            return 'light';
-        default:
-            return (props.isSoft || props.isOutline || props.isLink) ? props.palette : 'light';
+    if (props.palette === 'light'
+        || (props.palette === 'dynamic' && !isDark)
+        || (props.palette === '!dynamic' && isDark)) {
+        return 'dark';
     }
+    if (props.palette === 'dark'
+        || (props.palette === 'dynamic' && isDark)
+        || (props.palette === '!dynamic' && !isDark)) {
+        return 'light';
+    }
+    return 'light';
 };
 exports.getWaveEffectPalette = getWaveEffectPalette;

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

541254

Lines of code

11266

increased by0.01%

No dependency changes