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. vue-cli构建路径加载资源出错问题

    这份文档是对应 @vue/cli 3.x 版本的,官方文档https://cli.vuejs.org/zh/guide/ 项目打包执行npm run build的时候,打开dist目录的index.h ...

  2. Lucene4.2源码解析之fdt和fdx文件的读写——fdx文件存储一个个的Block,每个Block管理着一批Chunk,通过docID读取到document需要完成Segment、Block、Chunk、document四级查询,引入了LZ4算法对fdt的chunk docs进行了实时压缩/解压

    前言 通常在搜索打分完毕后,IndexSearcher会返回一个docID序列,但是仅仅有docID我们是无法看到存储在索引中的document,这时候就需要通过docID来得到完整Document信 ...

  3. oneway modifier MQ 发送请求不接受任何响应

    Apache Thrift - Home http://thrift.apache.org/ /** * This method has a oneway modifier. That means t ...

  4. python 设计模式之中介者模式

    #先啰嗦一下 至少半个多月的样子没写博客了,月初去了趟黄山,赏了美景,自然没时间也没条件敲博客了,一个多星期就这么过去了.返回深圳后,工作积压了一堆,然后白天就马不停蹄的忙工作,晚上回家伺候小娃,又想 ...

  5. java udp通信

    package net.kkxm.kms;  import java.net.DatagramPacket; import java.net.DatagramSocket; import java.n ...

  6. 分享调试SI4432的一些小经验(转)

    分享调试SI4432的一些小经验 最近使用 STM8F103 + SI4432 调无线,遇到问题不少,此处有参考过前辈的经验: 1.硬件把板给到我时USB烧录线带供电(5V),此供电接到LDO输出,就 ...

  7. VMware与宿主机同一网段

    将VMware做为一个物理的虚拟机,设置网段与宿主机在同一子网.

  8. vue页面刷新重定向

    在App.vue中,添加如下代码: created(){ if(this.$router.path !== '/RealTimeMonitoring'){ this.$router.replace(' ...

  9. lua table操作

    求最大值,最小值及长度: function maxn(t) local mn = nil for i, v in pairs(t) do if (mn==nil) then mn=v end if ( ...

  10. mysql排序自段为字符串类型问题解决

    677     000.000.000.000 2018-01-09 22:20:58 编辑 删除 锁定 199 666/777/888套餐标配     000.000.000.000 2018-01 ...