Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 | 59x 162x 162x 162x 162x 84x 162x 162x 162x 162x 147x 162x 162x 30x 162x 162x 162x 11x 162x | import React from "react"; import classNames from "classnames"; import { Tooltip } from "../tooltip"; import { Icon } from "../icon"; import { StyledProps, Combine, Omit } from "../_type"; import { forwardRefWithStatics } from "../_util/forward-ref-with-statics"; import { useConfig } from "../_util/config-context"; /** * Button 组件支持的属性。 * * 除表格中列出的属性外,支持透传原生 `<button>` 标签支持的属性。 */ export interface ButtonProps extends Combine< StyledProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> > { /** * 按钮类型 * * - `primary` 蓝色主要按钮 * - `weak` 白色按钮,默认 * - `pay` 橙色按钮,用于支付类操作 * - `text` 文本按钮,显示为普通文本效果 * - `link` 连接按钮,显示为超链接效果 * - `icon` 图标按钮,显示为单个图标 * * @default "weak" */ type?: "primary" | "weak" | "pay" | "text" | "link" | "icon"; /** * 原生 `<button>` 标签的 `type` 属性 */ htmlType?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"]; /** * 显示为图标按钮,传入的 `icon` 表示图标类型 * * __注意__:如果已经传入 `icon`,则会忽略 `children` 属性 */ icon?: string; /** * 设置按钮为禁用状态 * * 禁用状态下,不会响应 `onClick` 回调 * */ disabled?: boolean; /** * 设置按钮为加载状态 */ loading?: boolean; /** * 点击回调函数 */ onClick?: (e?: React.MouseEvent) => void; /** * 为按钮添加 Tooltip 说明,详细用法请参考 [Tooltip](/component/tooltip) 组件 */ tooltip?: React.ReactNode; } export const Button = forwardRefWithStatics( (props: ButtonProps, ref: React.Ref<HTMLButtonElement>) => { const { disabled, loading: _loading, icon: _icon, type: _type, className, style, onClick, children, tooltip, htmlType, ...buttonProps } = props; const { classPrefix } = useConfig(); let [loading, icon, type] = [_loading, _icon, _type]; // 指定了图标的话, if (!type) { type = icon ? "icon" : "weak"; } // 只有下面三种类型的按钮支持 loading Iif ( ["primary", "weak", "pay"].indexOf(type) === -1 && typeof loading !== "undefined" ) { loading = false; } // 计算类名 const btnClassName = `${classPrefix}-btn`; const classList: (string | object)[] = [`${classPrefix}-btn`]; // 类型类名 if (type !== "primary") { classList.push(`${btnClassName}--${type}`); } // 状态类名 classList.push({ "is-disabled": disabled, "is-loading": loading, }); // 用户自定义类名 if (className) { classList.push(className); } // loading 态的按钮,规范是只有一个 loading 图标 Iif (loading) { icon = "loading"; } /* eslint-disable react/button-has-type */ let button: JSX.Element = ( <button ref={ref} className={classNames(...classList)} onClick={(!disabled && !loading && onClick) || null} style={style || {}} type={htmlType} disabled={disabled} {...buttonProps} > {icon ? <Icon type={icon} /> : children} </button> ); /* eslint-enable react/button-has-type */ if (tooltip) { button = <Tooltip title={tooltip}>{button}</Tooltip>; } return button; }, { defaultLabelAlign: "middle", } ); |