@qsxy/element-plus-react 1.0.0-next.2 → 1.0.0-next.22

package/dist/Button/typings.d.ts

@@ -1,37 +1,69 @@
 import React from 'react';
-import { IconName } from '../Icon';
+import { IconName, IconProps } from '../Icon';
 import { BaseProps, NativeProps, TypeAttributes } from '../types/common';
-export interface ButtonProps extends Omit<React.AllHTMLAttributes<HTMLElement>, 'loading' | 'size' | 'icon' | 'style' | 'children'>, BaseProps, NativeProps {
+export interface ButtonProps extends Omit<React.AllHTMLAttributes<HTMLElement>, 'loading' | 'size' | 'icon' | 'style' | 'children'>, BaseProps, NativeProps<'--el-button-bg-color' | '--el-button-border-style' | '--el-button-text-color' | '--el-button-border-color' | '--el-button-hover-bg-color' | '--el-button-active-border-color' | '--el-button-active-bg-color' | '--el-button-active-color' | '--el-button-hover-text-color' | '--el-button-hover-border-color' | '--el-button-hover-link-text-color' | '--el-button-active-text-color' | '--el-button-disabled-text-color' | '--el-button-disabled-bg-color' | '--el-button-disabled-border-color' | '--el-button-divide-border-color' | '--el-button-outline-color' | '--el-button-border-radius-round'> {
+    /** 尺寸 */
     size?: TypeAttributes.Size;
+    /** 类型 */
     type?: TypeAttributes.Appearance;
+    /** 是否为朴素按钮 */
     plain?: boolean;
+    /** 是否为圆角按钮 */
     round?: boolean;
+    /** 是否为圆形按钮 */
     circle?: boolean;
+    /** 是否为文字按钮 */
     text?: boolean;
+    /** 是否显示文字按钮背景颜色	 */
     bg?: boolean;
+    /** 是否为链接按钮 */
     link?: boolean;
+    /** 是否为虚线按钮 */
     dashed?: boolean;
+    /** 是否为加载中状态 */
     loading?: boolean;
+    /** 自定义加载中图标 */
     loadingIcon?: IconName;
+    /** 自定义加载中图标 */
     loadingSlot?: React.ReactElement;
+    /** 是否为激活状态 */
     active?: boolean;
+    /** 是否为禁用状态 */
     disabled?: boolean;
+    /** dark 模式, 意味着自动设置 color 为 dark 模式的颜色 */
+    dark?: boolean;
+    /** 自定义图标 */
     icon?: IconName | boolean;
-    color?: TypeAttributes.Color;
+    /** 自定义图标设置 */
+    iconProps?: Omit<IconProps, 'name'>;
+    /** 自定义颜色 */
+    color?: string;
+    /** Format button to appear inside a content bloc */
     block?: boolean;
+    /** 自动在两个中文字符之间插入空格 */
     autoInsertSpace?: boolean;
+    /** Providing a `href` will render an `<a>` element, _styled_ as a button */
     href?: string;
+    /** Where to display the linked URL */
     target?: string;
+    /** Defines HTML button type attribute */
     nativeType?: 'button' | 'reset' | 'submit';
 }
 export type ButtonRef = {
+    /** 按钮 html 元素	 */
     ref: React.MutableRefObject<HTMLButtonElement>;
+    /** 按钮尺寸 */
     size: TypeAttributes.Size;
+    /** 类型 */
     type?: TypeAttributes.Appearance;
+    /** 是否为禁用状态 */
     disabled?: boolean;
+    /** 是否在两个字符之间插入空格 */
     shouldAddSpace?: boolean;
 };
 export type ButtonGroupProps = BaseProps & NativeProps & Pick<ButtonProps, 'disabled' | 'size' | 'type'> & {
+    /** 背景色 */
     bgColor?: string;
+    /** 边框颜色 */
     borderColor?: string;
 };

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]);
+}