sourcecode/front/project/www/components/Open/index.js

import React, { Component } from 'react';
import './index.less';
import { Icon } from '../Icon';

export default class Open extends Component {
  constructor(props) {
    super(props);
    this.Text = null;
    this.state = { show: false, more: false };
    this.checkHeight();
  }

  checkHeight() {
    const { height } = this.props;
    if (this.Text != null) {
      if (this.Text.offsetHeight > height) {
        this.setState({ more: true });
      }
    } else {
      setTimeout(() => {
        this.checkHeight();
      }, 1);
    }
  }

  open() {
    const { onOpen } = this.props;
    this.setState({ show: true });
    if (onOpen) onOpen();
  }

  close() {
    const { onClose } = this.props;
    this.setState({ show: false });
    if (onClose) onClose();
  }

  render() {
    const { show, more } = this.state;
    const { up, down, height, className = '', children } = this.props;
    return (
      <div className={`super-open ${className} ${more ? 'more' : ''} ${!show ? 'hide' : ''}`}>
        <div
          className="hide-content"
          ref={ref => {
            this.Text = ref;
          }}
          style={{ height: more && !show ? height : null }}
        >
          {children}
        </div>
        {more && show && <span onClick={() => this.close()}>{up}</span>}
        {more && !show && <span onClick={() => this.open()}>{down}</span>}
      </div>
    );
  }
}
export class OpenText extends Component {
  render() {
    const { children, onOpen, onClose } = this.props;
    return (
      <Open className="super-open-text" height={60} up={<Icon name="small-up" />} down={<Icon name="small-down" />} onOpen={onOpen} onClose={onClose}>
        {children}
      </Open>
    );
  }
}