zarm-web/es/tag/CheckableTag.js

基于 React 的桌面端UI库

import React, { Component } from 'react';
import classnames from 'classnames';

class CheckableTag extends Component {
  constructor(...args) {
    super(...args);

    this.onClick = () => {
      const {
        checked,
        onChange
      } = this.props;
      typeof onChange === 'function' && onChange(!checked);
    };
  }

  render() {
    const {
      prefixCls,
      size,
      shape,
      checked,
      className,
      disabled,
      children,
      style
    } = this.props;
    const classes = classnames(prefixCls, className, `${prefixCls}--checkable`, {
      [`${prefixCls}--${size}`]: size,
      [`${prefixCls}--${shape}`]: shape,
      [`${prefixCls}--checked`]: checked,
      [`${prefixCls}--disabled`]: disabled
    });
    return React.createElement("div", {
      className: classes,
      style: style,
      onClick: () => {
        !disabled && this.onClick();
      }
    }, children);
  }

}

CheckableTag.defaultProps = {
  prefixCls: 'zw-tag'
};
export default CheckableTag;