react封装通用tab组件
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组件的更多相关文章
- ReactJS实现的通用分页组件
大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果 ...
- 使用react context实现一个支持组件组合和嵌套的React Tab组件
纵观react的tab组件中,即使是github上star数多的tab组件,实现原理都非常冗余. 例如Github上star数超四百星的react-tab,其在render的时候都会动态计算哪个tab ...
- 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。
react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...
- 如何基于 React 封装一个组件
如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary , ...
- react hooks 如何自定义组件(react函数组件的封装)
前言 这里写一下如何封装可复用组件.首先技术栈 react hooks + props-type + jsx封装纯函数组件.类组件和typeScript在这不做讨论,大家别白跑一趟. 接下来会说一下封 ...
- react实战系列 —— react 的第一个组件
react 的第一个组件 写了 react 有一个半月,现在又有半个月没写了,感觉对其仍旧比较陌生. 本文分两部分,首先聊一下 react 的相关概念,然后不使用任何语法糖(包括 jsx)或可能隐藏底 ...
- JGUI源码:Tab组件实现(9)
程序界面效果如下 Tab组件由多个TabItem组成,超出部分隐藏,可以通过左右按钮滑动显示出来 1.封装 // 初始化内容 $(function () { J.JTab($(".jgui- ...
- 继续封装个 Volley 组件
本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 前面已经封装了很多常用.基础的组件了:base-module, 包括了: crash 处理 常用工具类 apk 升级处理 log 组 ...
- [转]angular2封装material2对话框组件
本文转自:https://www.jianshu.com/p/da9978e25566 1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍.这里提供一个方案用 ...
随机推荐
- Apache Flink - 内存管理
JVM: JAVA本身提供了垃圾回收机制来实现内存管理 现今的GC(如Java和.NET)使用分代收集(generation collection),依照对象存活时间的长短使用不同的垃圾收集算法,以达 ...
- 【java反射】
反射之中包含了一个「反」字,所以想要解释反射就必须先从「正」开始解释. 一般情况下,我们使用某个类时必定知道它是什么类,是用来做什么的.于是我们直接对这个类进行实例化,之后使用这个类对象进行操作. A ...
- 深入理解JVM虚拟机1:JVM内存的结构与永久代的消失
所有的Java开发人员可能会遇到这样的困惑?我该为堆内存设置多大空间呢?OutOfMemoryError的异常到底涉及到运行时数据的哪块区域?该怎么解决呢?其实如果你经常解决服务器性能问题,那么这些问 ...
- 2018-2019-2 《网络对抗技术》 Exp6 信息搜集与漏洞扫描 20165222
1.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 2.实践内容 (1)各种搜索技巧的应用 https://www.exploit-db.com/收集各种应用软件的漏洞,如tomcat服务器 ...
- 如何计算一个C/C++程序运行时间
前两天要计算一个用C++实现的算法运行时间,就用了clock()这个函数.程序大体上如下: clock_t start,end; start = clock(); /*my code*/ end = ...
- Linux系统中rm删除命令
rm命令 1.可以删除一个目录中的一个或多个文件或目录 2.可以将某个目录及其下属的所有文件及其子目录均删除掉 3.对于链接文件,只是删除整个链接文件,而原有文件保持不变 语法 rm (选项)(参数) ...
- 【Python】分析自己的博客 https://www.cnblogs.com/xiandedanteng/p/?page=XX,看每个月发帖量是多少
要执行下面程序,需要安装Beautiful Soup和requests,具体安装方法请见:https://www.cnblogs.com/xiandedanteng/p/8668492.html # ...
- java 接口和抽象类的一个最大的区别
写在前面,下面是在百度百科上看到的,之前就看过,这次再看感觉有更深的体会,真的是这样,每一个脚印都会留下痕迹 java接口和java抽象类有太多相似的地方,又有太多特别的地方,这里说下两者之间的一个最 ...
- [插件式开发][C#]
Demo 下载 参考文章:https://www.cnblogs.com/hippieZhou/p/9398354.html 技术方面要使用到 依赖注入,可以参考此示例逐步学习:https://git ...
- SVG-概述/容器与通用属性
参考: SVG 图像入门教程 MDN SVG SVG教程 SVG入门-踏得 工具: svg在线编辑 概述 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector ...