button JS篇ant Design of react

摘要： 這篇看ant Desgin of react的button按鈕的js程式碼，js程式碼部分是typescript+react寫的。 button元件裡面引用了哪些元件： import * as React from 'react'; import { findDOMNo...

這篇看ant Desgin of react的button按鈕的js程式碼，js程式碼部分是typescript+react寫的。

button元件裡面引用了哪些元件：

import * as React from 'react';
import { findDOMNode } from 'react-dom';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Icon from '../icon';
import Group from './button-group';

• React 、react-dom 是react要引用的，這裡不多解釋。
• prop-types 是用來檢驗傳給元件props的型別，在props上執行型別檢查，在下面程式碼中用到
• className 是用來新增多個className

先看下整體程式碼：

import * as React from 'react';
import { findDOMNode } from 'react-dom';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Icon from '../icon';
import Group from './button-group';

const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
/**
 * 判斷是否是字串型別
 */
function isString(str: any) {
return typeof str === 'string';
}
/**
 * 多箇中文間插入空格
 * @param {Object} child 元件的子內容
 * @param {Boolean} needInserted 是否插入空格
 * @returns {ReactElement} 
 */
// Insert one space between two chinese characters automatically.
function insertSpace(child: React.ReactChild, needInserted: boolean) {
// Check the child if is undefined or null.
if (child == null) {
return;
}
const SPACE = needInserted ? ' ' : '';
// strictNullChecks oops.
if (typeof child !== 'string' && typeof child !== 'number' &&
isString(child.type) && isTwoCNChar(child.props.children)) {
return React.cloneElement(child, {},
child.props.children.split('').join(SPACE));
}
if (typeof child === 'string') {
if (isTwoCNChar(child)) {
child = child.split('').join(SPACE);
}
return <span>{child}</span>;
}
return child;
}
/**
 * 類型別名,這個型別的只能是對應的值
 */
export type ButtonType = 'default' | 'primary' | 'ghost' | 'dashed' | 'danger';
export type ButtonShape = 'circle' | 'circle-outline';
export type ButtonSize = 'small' | 'default' | 'large';
export type ButtonHTMLType = 'submit' | 'button' | 'reset';
/**
 * 宣告一個介面BaseButtonProps 
 */ 
export interface BaseButtonProps {
type?: ButtonType;
icon?: string;
shape?: ButtonShape;
size?: ButtonSize;
loading?: boolean | { delay?: number };
prefixCls?: string;
className?: string;
ghost?: boolean;
}
/**
 * a標籤的引數組合
 */
export type AnchorButtonProps = {
href: string;
target?: string;
onClick?: React.MouseEventHandler<HTMLAnchorElement>;
} & BaseButtonProps & React.AnchorHTMLAttributes<HTMLAnchorElement>;
/**
 * button標籤的引數組合
 */
export type NativeButtonProps = {
htmlType?: ButtonHTMLType;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
} & BaseButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
/**
 * 類型別名
 */
export type ButtonProps = AnchorButtonProps | NativeButtonProps;
/**
 * button class宣告
 */
export default class Button extends React.Component<ButtonProps, any> {
static Group: typeof Group;
static __ANT_BUTTON = true;
/**
* 設定props預設值
*/
static defaultProps = {
prefixCls: 'ant-btn',
loading: false,
ghost: false,
};
/**
* props型別校驗
*/
static propTypes = {
type: PropTypes.string,
shape: PropTypes.oneOf(['circle', 'circle-outline']),
size: PropTypes.oneOf(['large', 'default', 'small']),
htmlType: PropTypes.oneOf(['submit', 'button', 'reset']),
onClick: PropTypes.func,
loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
className: PropTypes.string,
icon: PropTypes.string,
};

timeout: number;
delayTimeout: number;
/**
* 建構函式
*/
constructor(props: ButtonProps) {
super(props);
this.state = {
loading: props.loading,
clicked: false,
hasTwoCNChar: false,
};
}
/**
* 元件渲染之後呼叫，只調用一次。
*/
componentDidMount() {
this.fixTwoCNChar();
}
/**
* props改變時呼叫觸發，nextProps.loading賦值到setState的loading
* @param nextProps 
*/
componentWillReceiveProps(nextProps: ButtonProps) {
const currentLoading = this.props.loading;
const loading = nextProps.loading;

if (currentLoading) {
clearTimeout(this.delayTimeout);
}

if (typeof loading !== 'boolean' && loading && loading.delay) {
this.delayTimeout = window.setTimeout(() => this.setState({ loading }), loading.delay);
} else {
this.setState({ loading });
}
}
/**
* 元件更新完成後呼叫
*/
componentDidUpdate() {
this.fixTwoCNChar();
}
/**
* 元件將要解除安裝時呼叫,清除定時器
*/
componentWillUnmount() {
if (this.timeout) {
clearTimeout(this.timeout);
}
if (this.delayTimeout) {
clearTimeout(this.delayTimeout);
}
}
/**
* 判斷botton的內容是否有兩個中文字
*/
fixTwoCNChar() {
// Fix for HOC usage like <FormatMessage />
const node = (findDOMNode(this) as HTMLElement);
const buttonText = node.textContent || node.innerText;
if (this.isNeedInserted() && isTwoCNChar(buttonText)) {
if (!this.state.hasTwoCNChar) {
this.setState({
hasTwoCNChar: true,
});
}
} else if (this.state.hasTwoCNChar) {
this.setState({
hasTwoCNChar: false,
});
}
}
/**
* 單擊事件
*/
handleClick: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement> = e => {
// Add click effect
this.setState({ clicked: true });
clearTimeout(this.timeout);
this.timeout = window.setTimeout(() => this.setState({ clicked: false }), 500);
const onClick = this.props.onClick;
if (onClick) {
(onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>)(e);
}
}
/**
* 判斷子節點只有一個和是否圖示
*/
isNeedInserted() {
const { icon, children } = this.props;
return React.Children.count(children) === 1 && !icon;
}
/**
* 元件內容
*/
render() {
const {
type, shape, size, className, children, icon, prefixCls, ghost, loading: _loadingProp, ...rest
} = this.props;

const { loading, clicked, hasTwoCNChar } = this.state;

// large => lg
// small => sm
let sizeCls = '';
switch (size) {
case 'large':
sizeCls = 'lg';
break;
case 'small':
sizeCls = 'sm';
default:
break;
}
/**
* 拼接className
*/
const classes = classNames(prefixCls, className, {
[`${prefixCls}-${type}`]: type,
[`${prefixCls}-${shape}`]: shape,
[`${prefixCls}-${sizeCls}`]: sizeCls,
[`${prefixCls}-icon-only`]: !children && icon,
[`${prefixCls}-loading`]: loading,
[`${prefixCls}-clicked`]: clicked,
[`${prefixCls}-background-ghost`]: ghost,
[`${prefixCls}-two-chinese-chars`]: hasTwoCNChar,
});
/**
* 設定圖示
*/
const iconType = loading ? 'loading' : icon;
const iconNode = iconType ? <Icon type={iconType} /> : null;
const kids = (children || children === 0)
? React.Children.map(children, child => insertSpace(child, this.isNeedInserted())) : null;
/**
* 判斷是a標籤還是button標籤
*/
if ('href' in rest) {
return (
<a
{...rest}
className={classes}
onClick={this.handleClick}
>
{iconNode}{kids}
</a>
);
} else {
// React does not recognize the `htmlType` prop on a DOM element. Here we pick it out of `rest`.
const { htmlType, ...otherProps } = rest;

return (
<button
{...otherProps}
type={htmlType || 'button'}
className={classes}
onClick={this.handleClick}
>
{iconNode}{kids}
</button>
);
}
}
}

因為按鈕的邏輯沒那麼複雜，裡面很多都是對外開放的弄能和樣式的一些對應，所以就在程式碼上加了註釋，能很快理解裡面的程式碼