@qsxy/element-plus-react 1.0.0-next.10 → 1.0.0-next.12

package/dist/Button/typings.js

@@ -1,17 +1 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/Button/typings.ts
-var typings_exports = {};
-module.exports = __toCommonJS(typings_exports);
+export {};

package/dist/Button/useButtonCustomStyle.d.ts

@@ -0,0 +1,4 @@
+import { TinyColor } from '@ctrl/tinycolor';
+import { ButtonProps } from './typings';
+export declare function darken(color: TinyColor, amount?: number): string;
+export declare function useButtonCustomStyle(props: ButtonProps, cssVarBlock: any, cssVarName: any, cssVarBlockName: any): Record<string, string>;

package/dist/Button/useButtonCustomStyle.js

@@ -0,0 +1,65 @@
+import { TinyColor } from '@ctrl/tinycolor';
+import { useMemo } from 'react';
+export function darken(color) {
+  var amount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 20;
+  return color.mix('#141414', amount).toString();
+}
+export function useButtonCustomStyle(props, cssVarBlock, cssVarName, cssVarBlockName) {
+  var disabled = props.disabled,
+    color = props.color,
+    dark = props.dark,
+    plain = props.plain;
+
+  // calculate hover & active color by custom color
+  // only work when custom color
+  return useMemo(function () {
+    var styles = {};
+    var buttonColor = color;
+    if (buttonColor) {
+      var match = buttonColor.match(/var\((.*?)\)/);
+      if (match) {
+        buttonColor = window.getComputedStyle(window.document.documentElement).getPropertyValue(match[1]);
+      }
+      var tinyColor = new TinyColor(buttonColor);
+      var activeBgColor = dark ? tinyColor.tint(20).toString() : darken(tinyColor, 20);
+      if (plain) {
+        styles = cssVarBlock({
+          'bg-color': dark ? darken(tinyColor, 90) : tinyColor.tint(90).toString(),
+          'text-color': buttonColor,
+          'border-color': dark ? darken(tinyColor, 50) : tinyColor.tint(50).toString(),
+          'hover-text-color': "var(".concat(cssVarName('color-white'), ")"),
+          'hover-bg-color': buttonColor,
+          'hover-border-color': buttonColor,
+          'active-bg-color': activeBgColor,
+          'active-text-color': "var(".concat(cssVarName('color-white'), ")"),
+          'active-border-color': activeBgColor
+        });
+        if (disabled) {
+          styles[cssVarBlockName('disabled-bg-color')] = dark ? darken(tinyColor, 90) : tinyColor.tint(90).toString();
+          styles[cssVarBlockName('disabled-text-color')] = dark ? darken(tinyColor, 50) : tinyColor.tint(50).toString();
+          styles[cssVarBlockName('disabled-border-color')] = dark ? darken(tinyColor, 80) : tinyColor.tint(80).toString();
+        }
+      } else {
+        var hoverBgColor = dark ? darken(tinyColor, 30) : tinyColor.tint(30).toString();
+        var textColor = tinyColor.isDark() ? "var(".concat(cssVarName('color-white'), ")") : "var(".concat(cssVarName('color-black'), ")");
+        styles = cssVarBlock({
+          'bg-color': buttonColor,
+          'text-color': textColor,
+          'border-color': buttonColor,
+          'hover-bg-color': hoverBgColor,
+          'hover-text-color': textColor,
+          'hover-border-color': hoverBgColor,
+          'active-bg-color': activeBgColor,
+          'active-border-color': activeBgColor
+        });
+        if (disabled) {
+          var disabledButtonColor = dark ? darken(tinyColor, 50) : tinyColor.tint(50).toString();
+          styles[cssVarBlockName('disabled-bg-color')] = disabledButtonColor;
+          styles[cssVarBlockName('disabled-text-color')] = dark ? 'rgba(255, 255, 255, 0.5)' : "var(".concat(cssVarName('color-white'), ")");
+          styles[cssVarBlockName('disabled-border-color')] = disabledButtonColor;
+        }
+      }
+    }
+    return styles;
+  }, [color, cssVarBlock, cssVarBlockName, cssVarName, dark, disabled, plain]);
+}