calc-oa-lib/src/components/CalcButton/index.jsx

calc oa library

import PropTypes from "prop-types";
import React from "react";
// import "./index.scss";
import styleObj from "./index.module.scss";

export default class CalcButton extends React.Component {
  static propTypes = {
    type: PropTypes.string,
    customClass: PropTypes.string,
    disabled: PropTypes.bool,
    onClick: PropTypes.func,
  };
  static defaultProps = {
    type: "primary",
    customClass: "",
    disabled: false,
    onClick: (e) => {
      console.log("default click...", e);
    },
  };
  constructor(props) {
    super(props);
    this.state = {};
  }
  data = {};
  render() {
    const _self = this;
    const { type, disabled, onClick, customClass, children } = _self.props;
    return (
      // <div className="calc-button-wrap">
      //   <button
      //     className={`calc-button ${customClass} ${type} ${
      //       disabled ? "disabled" : ""
      //     } `}
      //     onClick={(e) => {
      //       !disabled && onClick && onClick(e);
      //     }}
      //   >
      //     {children ?? "测试按钮"}
      //   </button>
      // </div>

      // <div className={`${styleObj["calc-button-wrap"]}`}>
      //   <button
      //     className={`${styleObj["calc-button"]} ${
      //       customClass != "" ? styleObj[customClass] : ""
      //     } ${styleObj[type]} ${disabled ? styleObj["disabled"] : ""}`}
      //     onClick={(e) => {
      //       !disabled && onClick && onClick(e);
      //     }}
      //   >
      //     {children ?? "测试按钮"}
      //   </button>
      // </div>

      // 最佳实现
      <div className={`${styleObj["calc-button-wrap"]}`}>
        <button
          className={`calc-button ${customClass} ${type} ${
            disabled ? "disabled" : ""
          } `}
          onClick={(e) => {
            !disabled && onClick && onClick(e);
          }}
        >
          {children ?? "测试按钮"}
        </button>
      </div>
    );
  }
  componentDidMount() {
    console.log(`calc button componentDidMount...`);
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log(`calc button shouldComponentUpdate...`);
    return true;
  }
  componentDidUpdate(prevProps, prevState) {
    console.log(`calc button componentDidUpdate...`);
  }
  componentWillUnmount() {
    console.log(`calc button componentWillUnmount...`);
  }
}