Button組件
團體
- Button組件
- 主假如經由過程轉變state狀況，從而襯着時運用差別className來轉變表面
- 搜檢是不是只要2其中筆墨符，比方 “提交”， 搜檢到則會變動state中的屬性，再次襯着時就會變成 “提 交”
- componentWillReceiveProps中會搜檢是不是須要loading狀況
- 襯着的dom中綁定了click，經由過程setTimeout要領耽誤實行click動畫
注重
- 進修運用classNames和omit
- React.cloneElement的運用
- 運用React.children與運用this.props.children的比較，前者更正確
- 每次render經由過程轉變className來轉變表面和動畫
源碼解釋
import * as React from 'react';
import { findDOMNode } from 'react-dom';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import omit from 'omit.js';
import Icon from '../icon';
import Group from './button-group';
//2其中筆墨符
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
function isString(str: any) {
return typeof str === 'string';
}
// 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.
// child是react的組件而且組件的子元素只要2其中筆墨符
// 假如是<span>點擊</span>,child是一個obj，內里type為"span"
if (typeof child !== 'string' && typeof child !== 'number' &&
isString(child.type) && isTwoCNChar(child.props.children)) {
// 克隆組件(element,[props],[...children])
// 也能夠寫成
// <child.type {...child.props}>{child.props.children.split('').join(SPACE)}</child.type>
return React.cloneElement(child, {},
child.props.children.split('').join(SPACE));
}
// child是字符串
if (typeof child === 'string') {
// child只要2其中筆墨符
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 interface BaseButtonProps {
type?: ButtonType;
htmlType?: string;
icon?: string;
shape?: ButtonShape;
size?: ButtonSize;
loading?: boolean | { delay?: number };
prefixCls?: string;
className?: string;
ghost?: boolean;
}
export type AnchorButtonProps = BaseButtonProps & React.AnchorHTMLAttributes<HTMLAnchorElement>;
export type NativeButtonProps = BaseButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
export type ButtonProps = AnchorButtonProps | NativeButtonProps;
export default class Button extends React.Component<ButtonProps, any> {
static Group: typeof Group;
static __ANT_BUTTON = true;
static defaultProps = {
prefixCls: 'ant-btn',
loading: false,
ghost: false,
};
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() {
//推斷子元素是不是只要2個字符，而且變動state
this.fixTwoCNChar();
}
//每次prop轉變
componentWillReceiveProps(nextProps: ButtonProps) {
const currentLoading = this.props.loading;
const loading = nextProps.loading;
//假如傳了loading
if (currentLoading) {
//先清空之前loading的計時器
clearTimeout(this.delayTimeout);
}
//loading不為布爾值，而且存在delay屬性（自定義loadidng耽誤）
if (typeof loading !== 'boolean' && loading && loading.delay) {
this.delayTimeout = window.setTimeout(() => this.setState({ loading }), loading.delay);
} else {
//未自定義loading耽誤
this.setState({ loading });
}
}
//每次更新render后，搜檢是不是2中筆墨符
componentDidUpdate() {
this.fixTwoCNChar();
}
componentWillUnmount() {
if (this.timeout) {
clearTimeout(this.timeout);
}
if (this.delayTimeout) {
clearTimeout(this.delayTimeout);
}
}
//推斷子元素是不是只要2個字符，而且將推斷效果給state.hasTwoCNChar
fixTwoCNChar() {
// Fix for HOC usage like <FormatMessage />
//返回已裝在的DOM（這裏多是<a>或許<button>)
const node = (findDOMNode(this) as HTMLElement);
//返回button上的值（比方：點擊）
const buttonText = node.textContent || node.innerText;
//只要1個子元素，而且這個子元素是2其中筆墨符
if (this.isNeedInserted() && isTwoCNChar(buttonText)) {
//將state的hasTowCNChar轉變成true
if (!this.state.hasTwoCNChar) {
this.setState({
hasTwoCNChar: true,
});
}
} else if (this.state.hasTwoCNChar) {
//假如不符合前提，而且hasTowCNChar為true（申明這個組件之前是2其中筆墨，厥後update就不是了），變成false
this.setState({
hasTwoCNChar: false,
});
}
}
/**
* 每次click都經由過程轉變state.clicked來變動class，從而轉變視覺效果
*/
handleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
// Add click effect
this.setState({ clicked: true });
clearTimeout(this.timeout);
this.timeout = window.setTimeout(() => this.setState({ clicked: false }), 500);
const onClick = this.props.onClick;
//onClick存在，實行
if (onClick) {
(onClick as (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void)(e);
}
}
//只要1個子元素而且沒有icon
isNeedInserted() {
const { icon, children } = this.props;
return React.Children.count(children) === 1 && !icon;
}
render() {
const {
type, shape, size, className, htmlType, children, icon, prefixCls, ghost, ...others,
} = 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;
}
const ComponentProp = (others as AnchorButtonProps).href ? 'a' : 'button';
//classNames 能夠將以下class變成"xx1 xx2 xx3..."的花樣
//其中值為true，key建立，值為false，key不兼并
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;
//this.props.children存在時，對每個children範例實行推斷(null，react組件，字符串)而且依據推斷實行增加操縱
const kids = (children || children === 0)
? React.Children.map(children, child => insertSpace(child, this.isNeedInserted())) : null;
/**
* omit:從others里刪除loading這個屬性
* type:假如有href屬性（a標籤）設為undefined，假如是button則設置為傳入值或許'button'
*
*/
return (
<ComponentProp
{...omit(others, ['loading'])}
type={(others as AnchorButtonProps).href ? undefined : (htmlType || 'button')}
className={classes}
onClick={this.handleClick}
>
{iconNode}{kids}
</ComponentProp>
);
}
}
