jc-biz-components/components/expand-item/index.js

jc component library based on Antd

import React from 'react'
import { Icon } from 'antd'
import './style'

class ExpandItem extends React.Component {
  state = {
    expand: false
  }
  handleToggleExpand = () => {
    this.setState({ expand: !this.state.expand })
  }
  render() {
    const { text } = this.props
    const { expand } = this.state

    const renderAction = () => {
      if (expand) {
        return (
          <span style={{ color: '#FD5729' }}>
            收起 <Icon type='up' />
          </span>
        )
      } else {
        return (
          <span style={{ color: '#FD5729' }}>
            展开 <Icon type='down' />
          </span>
        )
      }
    }

    return (
      <span>
        {text && text.length > 80 ? (
          <div style={{ wordBreak: 'break-all' }}>
            {expand ? text : text.substring(0, 80) + '...'}
            <div style={{ cursor: 'pointer', fontSize: 12 }} onClick={this.handleToggleExpand}>
              {renderAction()}
            </div>
          </div>
        ) : (
          text
        )}
      </span>
    )
  }
}

export default ExpandItem