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

calc oa library

import PropTypes from "prop-types";
import React from "react";
import $calc from "../../utils/common";
import styleObj from "./index.module.scss";
import { Select } from "zent";
// import Select from "zent/lib/select";

export default class CalcSelect extends React.Component {
  // #region 属性 & 构造函数
  static propTypes = {
    lv: PropTypes.number,
    customClass: PropTypes.string,
    width: PropTypes.string,
    height: PropTypes.string,

    showErrorTip: PropTypes.bool,
    errorTip: PropTypes.string,
    // onChangeEvent: PropTypes.func,
  };
  static defaultProps = {
    lv: 7,
    customClass: "custom-calc-select",
    width: "",
    height: "40px",
    showErrorTip: false,
    errorTip: "",
    // onChangeEvent: (e, optObj) => {
    // },
  };

  constructor(props) {
    super(props);
    // console.log(`props`, props);
    this.state = {
      //   popupOpen: false,
    };
  }

  //   get popupOpenClass() {
  //     const _self = this;
  //     let className = _self.state.popupOpen ? "active" : "";
  //     console.log(`popupOpenClass`, className);
  //     return className;
  //   }

  // #endregion

  //#region hooks

  render() {
    const _self = this;
    const {
      lv,
      customClass,
      width,
      height,
      onChangeEvent,
      showErrorTip,
      errorTip,
      ...otherProps
    } = _self.props;

    // console.log(`otherProps`, otherProps);

    return (
      <div className={`${styleObj["calc-select-scoped"]}`}>
        <div
          className={`calc-select ${customClass}`}
          style={_self.getStyleObj()}
        >
          <Select
            popupClassName="calc-select-popup"
            {...otherProps}
            //   onChange={(e, optObj) => {
            //     _self.setState(
            //       {
            //         popupOpen: false,
            //       },
            //       () => {
            //         onChangeEvent && onChangeEvent(e, optObj);
            //       }
            //     );
            //   }}
            //   onOpen={() => {
            //     _self.setState(
            //       {
            //         popupOpen: true,
            //       },
            //       () => {}
            //     );
            //   }}
          ></Select>
          {/* <i className={`calc-select-icon-dropdown icon-btn calc-oa-dropdownarrow ${_self.popupOpenClass}`}></i> */}
          <i
            className={`calc-select-icon-dropdown icon-btn calc-oa-dropdownarrow`}
          ></i>
          {showErrorTip && !$calc.tool.isNullOrEmpty(errorTip) && (
            <div className="error-tip-wrap">
              <span className="tip-text" title={errorTip}>
                {errorTip}
              </span>
            </div>
          )}
        </div>
      </div>
    );
  }

  componentDidMount() {
    // console.log(`calc-select componentDidMount...`);
  }
  shouldComponentUpdate(nextProps, nextState) {
    const _self = this;
    // 若子组件无属性变化及状态更新, 则无需更新组件
    // Immutable验证的效果不好, 用回JSON.stringify来处理, 排除掉循环引用的属性, 如插槽
    const removeProps = ["children"];
    const nextPropsClone = $calc.tool.deepClone(nextProps, removeProps);
    const curPropsClone = $calc.tool.deepClone(_self.props, removeProps);

    const nextStateClone = $calc.tool.deepClone(nextState, removeProps);
    const curnextStateClone = $calc.tool.deepClone(_self.state, removeProps);

    const needRender =
      JSON.stringify(nextPropsClone) != JSON.stringify(curPropsClone) ||
      JSON.stringify(nextStateClone) != JSON.stringify(curnextStateClone);
    // console.log("calc-select shouldComponentUpdate...", needRender);
    if (needRender) {
      return true;
    }

    return false;
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {}
  componentDidUpdate(prevProps, prevState) {}
  componentWillUnmount() {}

  //#endregion

  //#region methods

  // 获取样式对象
  getStyleObj() {
    const _self = this;
    let styleObj = {};

    const { width, height } = _self.props;

    // 设置width
    if (!$calc.tool.isNullOrEmpty(width)) {
      styleObj["width"] = $calc.tool.isNum(width) ? `${width}px` : width;
    }

    // 设置height
    if (!$calc.tool.isNullOrEmpty(height)) {
      styleObj["height"] = $calc.tool.isNum(height)
        ? `${height}px`
        : (styleObj["height"] = height);
    }

    // console.log(`styleObj`, styleObj);

    return styleObj;
  }

  //#endregion
}