import React, { Component } from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'
import classNames from 'classnames' import {
CloseButton,
} from '@dby-h5-clients/pc-1vn-components' import './index.less' class NormalTab extends Component {
static propTypes = {
style: PropTypes.object,
tagIcon: PropTypes.element,
name: PropTypes.string,
onClick: PropTypes.func,
closable: PropTypes.bool,
onClose: PropTypes.func,
isActive: PropTypes.bool,
} static defaultProps = {
style: {},
tagIcon: null,
name: 'normal-tab',
onClick: _.noop,
closable: true,
onClose: _.noop,
isActive: false,
} state = {
tabInfoWrapWidth: 100,
} componentDidMount() {
const tabInfoWrapElem = this.normalTabWrapElemRef.current
this.tabInfoWrapElem = tabInfoWrapElem this.resizeObserver = new ResizeObserver(_.throttle(() => {
if (tabInfoWrapElem !== undefined) {
this.setState({
tabInfoWrapWidth: tabInfoWrapElem.clientWidth,
})
}
}, 200)) this.resizeObserver.observe(tabInfoWrapElem)
} componentWillUnmount() {
this.resizeObserver.unobserve(this.tabInfoWrapElem)
} resizeObserver normalTabWrapElemRef = React.createRef() tabInfoWrapElem render() {
const closeBtnStyle = {
height: '20px',
width: '20px',
flex: 'none',
margin: 8,
} const tabInfoWrapStyle = {
// 当显示区域足够大或当前标签被选中的时候显示完整关闭按钮
flex: (this.state.tabInfoWrapWidth > 84 || this.props.isActive === true) ? 1 : 'none',
} return (
<span
className={classNames({
'normal-tab-component-wrap': true,
selected: this.props.isActive === true,
})}
ref={this.normalTabWrapElemRef}
style={this.props.style}
title={this.props.name}
>
<span
className="normal-tab-info-wrap"
tabIndex={0}
role="button"
style={tabInfoWrapStyle}
onClick={this.props.onClick}
>
{this.props.tagIcon}
{this.props.name}
</span>
{
this.props.closable === true && (
<CloseButton
style={closeBtnStyle}
onClick={this.props.onClose}
/>
)
}
</span>
)
}
} export default NormalTab
.normal-tab-component-wrap {
min-width: 36px;
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
border-radius: 4px;
background-color: rgba(54, 65, 82, 0.1);;
margin-right: 1px;
overflow: hidden; &:last-child {
margin-right: 0px;
} &:hover {
background-color: #fff;
} &.selected {
background-color: #fff;
min-width: 64px; .normal-tab-info-wrap {
flex:;
}
} .normal-tab-info-wrap {
height: 100%;
max-width: 180px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex: none;
font-size: 12px;
color: #616e80;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
outline: none;
}
}

react封装通用tab组件的更多相关文章

  1. ReactJS实现的通用分页组件

    大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果 ...

  2. 使用react context实现一个支持组件组合和嵌套的React Tab组件

    纵观react的tab组件中,即使是github上star数多的tab组件,实现原理都非常冗余. 例如Github上star数超四百星的react-tab,其在render的时候都会动态计算哪个tab ...

  3. 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。

    react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...

  4. 如何基于 React 封装一个组件

    如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary , ...

  5. react hooks 如何自定义组件(react函数组件的封装)

    前言 这里写一下如何封装可复用组件.首先技术栈 react hooks + props-type + jsx封装纯函数组件.类组件和typeScript在这不做讨论,大家别白跑一趟. 接下来会说一下封 ...

  6. react实战系列 —— react 的第一个组件

    react 的第一个组件 写了 react 有一个半月,现在又有半个月没写了,感觉对其仍旧比较陌生. 本文分两部分,首先聊一下 react 的相关概念,然后不使用任何语法糖(包括 jsx)或可能隐藏底 ...

  7. JGUI源码:Tab组件实现(9)

    程序界面效果如下 Tab组件由多个TabItem组成,超出部分隐藏,可以通过左右按钮滑动显示出来 1.封装 // 初始化内容 $(function () { J.JTab($(".jgui- ...

  8. 继续封装个 Volley 组件

    本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 前面已经封装了很多常用.基础的组件了:base-module, 包括了: crash 处理 常用工具类 apk 升级处理 log 组 ...

  9. [转]angular2封装material2对话框组件

    本文转自:https://www.jianshu.com/p/da9978e25566 1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍.这里提供一个方案用 ...

随机推荐

  1. Nexus 3搭建及备份恢复

    Nexus 3搭建 官网下载相应的软件版本:Nexus官网 配置仓库存放地址 # tar xf xxxx # more bin/nexus.vmoptions -Xms500M -Xmx500M -X ...

  2. git clone 报“The project you were looking for could not be found.”

    因为自己的项目不止一个 又有自动保存git密码的功能,当clone第二个项目的时候就报了如下错误 之前一直是找到钥匙串删除,发现有时候并没有效果.今天在网上搜了一下 发现了一个新的解决办法 在项目前面 ...

  3. IntelliJ IDEA中构建spring-boot项目

    1. 打开 IDEA ,新建项目 2. 选择Spring Initializr 并在 Choose Initializr Service URL 填入 https://start.spring.io ...

  4. ASP程序中调用Now()总显示“上午”和“下午”,如何解决?

    ASP程序中调用Now()总显示这样的格式:“2007-4-20 下午 06:06:38”,我要的正确格式为“2007-4-20 18:06:38”,我已经通过控制面板==>区域和语言选项==& ...

  5. VisualStudio版本号

    VisualStudio的工程文件,后面的数字对应的VS的版本号, 71表示的VS2003, 80表示VS2005, 90表示VS2008, 10表示VS2010等.

  6. osg 在场景中绘制坐标轴(xyz)

    //x y z font_size osg::Geode* makeCoordinate(float a_x,float a_y,float a_z,float font_size) { osg::r ...

  7. PAT 甲级 1040 Longest Symmetric String (25 分)(字符串最长对称字串,遍历)

    1040 Longest Symmetric String (25 分)   Given a string, you are supposed to output the length of the ...

  8. vmware安装密钥

    VMware虚拟机已升级至14版本,之前的12版本的秘钥已经无法使用,在此分享一下VMware Workstation 14永久激活密钥: CG54H-D8D0H-H8DHY-C6X7X-N2KG6 ...

  9. 【Leetcode_easy】717. 1-bit and 2-bit Characters

    problem 717. 1-bit and 2-bit Characters 题意:solution1: class Solution { public: bool isOneBitCharacte ...

  10. ELK之在CentOS7.5上使用rpm包安装配置ELK7版本

    一,安装环境查看 二,软件版本选用 jdk 1.8.0_171 elasticsearch 7.1.1 kibana 7.1.1 logstash 7.1.1 三,安装配置 1,安装JDK 过程不详述 ...