@alifd/next
Version:
A configurable component library for web built on React.
385 lines (345 loc) • 13 kB
JavaScript
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
var _class, _temp;
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { polyfill } from 'react-lifecycles-compat';
import { KEYCODE, obj } from '../util';
import TabNav from './tabs/nav';
import TabContent from './tabs/content';
import { toArray } from './tabs/utils';
import zhCN from '../locale/zh-cn';
var noop = function noop() {};
/** Tab */
var Tab = (_temp = _class = function (_Component) {
_inherits(Tab, _Component);
function Tab(props, context) {
_classCallCheck(this, Tab);
var _this = _possibleConstructorReturn(this, _Component.call(this, props, context));
_this.handleTriggerEvent = function (eventType, key) {
var _this$props = _this.props,
triggerType = _this$props.triggerType,
onClick = _this$props.onClick,
onChange = _this$props.onChange;
if (triggerType === eventType) {
onClick(key);
_this.setActiveKey(key);
if (_this.state.activeKey !== key) {
onChange(key);
}
}
};
_this.onNavKeyDown = function (e) {
var keyCode = e.keyCode;
var disableKeyboard = _this.props.disableKeyboard;
if (disableKeyboard) {
return;
}
if (keyCode >= KEYCODE.LEFT && keyCode <= KEYCODE.DOWN) {
e.preventDefault();
}
var newKey = void 0;
if (keyCode === KEYCODE.RIGHT || keyCode === KEYCODE.DOWN) {
newKey = _this.getNextActiveKey(true);
_this.handleTriggerEvent(_this.props.triggerType, newKey);
} else if (keyCode === KEYCODE.LEFT || keyCode === KEYCODE.UP) {
newKey = _this.getNextActiveKey(false);
_this.handleTriggerEvent(_this.props.triggerType, newKey);
}
};
_this.state = {
activeKey: _this.getDefaultActiveKey(props)
};
return _this;
}
Tab.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
if (props.activeKey !== undefined && state.activeKey !== '' + props.activeKey) {
return {
activeKey: '' + props.activeKey
};
}
return {};
};
Tab.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
var preChildLen = prevProps.children && prevProps.children.length || 0;
var curChildLen = this.props.children && this.props.children.length || 0;
if (preChildLen !== 0 && curChildLen !== 0 && !('activeKey' in this.props) & !this.isActiveKeyExist(this.state.activeKey)) {
var activeKey = this.getDefaultActiveKey(this.props);
if (activeKey) {
// eslint-disable-next-line react/no-did-update-set-state
this.setState({
activeKey: activeKey
});
}
}
};
Tab.prototype.getDefaultActiveKey = function getDefaultActiveKey(props) {
var activeKey = props.activeKey === undefined ? props.defaultActiveKey : props.activeKey;
if (activeKey === undefined) {
React.Children.forEach(props.children, function (child, index) {
if (activeKey !== undefined) return;
if (React.isValidElement(child)) {
if (!child.props.disabled) {
activeKey = child.key || index;
}
}
});
}
return activeKey !== undefined ? '' + activeKey : undefined;
};
Tab.prototype.getNextActiveKey = function getNextActiveKey(isNext) {
var _this2 = this;
var children = [];
React.Children.forEach(this.props.children, function (child) {
if (React.isValidElement(child)) {
if (!child.props.disabled) {
if (isNext) {
children.push(child);
} else {
children.unshift(child);
}
}
}
});
var length = children.length;
var key = length && children[0].key;
children.forEach(function (child, i) {
if (child.key === _this2.state.activeKey) {
if (i === length - 1) {
key = children[0].key;
} else {
key = children[i + 1].key;
}
}
});
return key;
};
Tab.prototype.isActiveKeyExist = function isActiveKeyExist(activeKey) {
var exist = false;
React.Children.forEach(this.props.children, function (child, index) {
if (exist) return;
if (React.isValidElement(child)) {
if (!child.props.disabled) {
var key = child.key || index;
if (activeKey === '' + key) {
exist = true;
}
}
}
});
return exist;
};
Tab.prototype.setActiveKey = function setActiveKey(key) {
var activeKey = this.state.activeKey;
// 如果 key 没变，或者受控状态下，则跳过
if (key === activeKey || 'activeKey' in this.props) {
return;
}
this.setState({
activeKey: key
});
};
Tab.prototype.render = function render() {
var _classnames;
var _props = this.props,
prefix = _props.prefix,
animation = _props.animation,
shape = _props.shape,
size = _props.size,
extra = _props.extra,
excessMode = _props.excessMode,
tabPosition = _props.tabPosition,
tabRender = _props.tabRender,
triggerType = _props.triggerType,
lazyLoad = _props.lazyLoad,
unmountInactiveTabs = _props.unmountInactiveTabs,
popupProps = _props.popupProps,
navStyle = _props.navStyle,
navClassName = _props.navClassName,
contentStyle = _props.contentStyle,
contentClassName = _props.contentClassName,
className = _props.className,
onClose = _props.onClose,
children = _props.children,
rtl = _props.rtl,
device = _props.device,
locale = _props.locale,
icons = _props.icons,
others = _objectWithoutProperties(_props, ['prefix', 'animation', 'shape', 'size', 'extra', 'excessMode', 'tabPosition', 'tabRender', 'triggerType', 'lazyLoad', 'unmountInactiveTabs', 'popupProps', 'navStyle', 'navClassName', 'contentStyle', 'contentClassName', 'className', 'onClose', 'children', 'rtl', 'device', 'locale', 'icons']);
var activeKey = this.state.activeKey;
var tabs = toArray(children);
var newPosition = tabPosition;
if (rtl && ['left', 'right'].indexOf(tabPosition) >= 0) {
newPosition = tabPosition === 'left' ? 'right' : 'left';
}
var classNames = classnames((_classnames = {}, _classnames[prefix + 'tabs'] = true, _classnames[prefix + 'tabs-' + shape] = shape, _classnames[prefix + 'tabs-vertical'] = shape === 'wrapped' && ['left', 'right'].indexOf(tabPosition) >= 0, _classnames[prefix + 'tabs-scrollable'] = true, _classnames[prefix + 'tabs-' + newPosition] = shape === 'wrapped', _classnames['' + (prefix + size)] = size, _classnames), className);
var navProps = {
prefix: prefix,
rtl: rtl,
animation: animation,
activeKey: activeKey,
excessMode: excessMode,
extra: extra,
tabs: tabs,
tabPosition: tabPosition,
tabRender: tabRender,
triggerType: triggerType,
popupProps: popupProps,
onClose: onClose,
onTriggerEvent: this.handleTriggerEvent,
onKeyDown: this.onNavKeyDown,
style: navStyle,
className: navClassName,
locale: locale,
icons: icons
};
var contentProps = {
prefix: prefix,
activeKey: activeKey,
lazyLoad: lazyLoad,
unmountInactiveTabs: unmountInactiveTabs,
style: contentStyle,
className: contentClassName
};
var tabChildren = [React.createElement(TabNav, _extends({ key: 'tab-nav' }, navProps)), React.createElement(
TabContent,
_extends({ key: 'tab-content' }, contentProps),
tabs
)];
if (tabPosition === 'bottom') {
tabChildren.reverse();
}
return React.createElement(
'div',
_extends({ dir: rtl ? 'rtl' : undefined, className: classNames }, obj.pickOthers(Tab.propTypes, others)),
tabChildren
);
};
return Tab;
}(Component), _class.propTypes = {
prefix: PropTypes.string,
rtl: PropTypes.bool,
device: PropTypes.oneOf(['tablet', 'desktop', 'phone']),
/**
* 被激活的选项卡的 key, 赋值则tab为受控组件, 用户无法切换
*/
activeKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/**
* 初始化时被激活的选项卡的 key
*/
defaultActiveKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/**
* 外观形态
*/
shape: PropTypes.oneOf(['pure', 'wrapped', 'text', 'capsule']),
/**
* 是否开启动效
*/
animation: PropTypes.bool,
/**
* 选项卡过多时的滑动模式
*/
excessMode: PropTypes.oneOf(['slide', 'dropdown']),
/**
* 导航选项卡的位置，只适用于包裹型（wrapped）选项卡
*/
tabPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
/**
* 尺寸
*/
size: PropTypes.oneOf(['small', 'medium']),
/**
* 激活选项卡的触发方式
*/
triggerType: PropTypes.oneOf(['hover', 'click']),
/**
* 是否延迟加载 TabItem 的内容, 默认开启, 即不提前渲染
*/
lazyLoad: PropTypes.bool,
/**
* 是否自动卸载未处于激活状态的选项卡
*/
unmountInactiveTabs: PropTypes.bool,
/**
* 导航条的自定义样式
*/
navStyle: PropTypes.object,
/**
* 导航条的自定义样式类
*/
navClassName: PropTypes.string,
/**
* 内容区容器的自定义样式
*/
contentStyle: PropTypes.object,
/**
* 内容区容器的自定义样式类
*/
contentClassName: PropTypes.string,
/**
* 导航栏附加内容
*/
extra: PropTypes.node,
/**
* 禁止键盘事件，设置后无法通过键盘的上下左右按键，切换当前选中的tab
*/
disableKeyboard: PropTypes.bool,
/**
* 点击单个选项卡时触发的回调
*/
onClick: PropTypes.func,
/**
* 选项卡发生切换时的事件回调
* @param {String|Number} key 改变后的 key
*/
onChange: PropTypes.func,
/**
* 选项卡被关闭时的事件回调
* @param {String|Number} key 关闭的选项卡的 key
*/
onClose: PropTypes.func,
/**
* 自定义选项卡模板渲染函数
* @param {String} key 当前 Tab.Item 的 key 值
* @param {Object} props 传给 Tab.Item 的所有属性键值对
* @return {ReactNode} 返回自定义组件
*/
tabRender: PropTypes.func,
/**
* 弹层属性透传, 只有当 excessMode 为 dropdown 时生效
*/
popupProps: PropTypes.object,
children: PropTypes.any,
className: PropTypes.string,
locale: PropTypes.object,
/**
* 自定义组件内 icon
*/
icons: PropTypes.shape({
prev: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
next: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
dropdown: PropTypes.oneOfType([PropTypes.node, PropTypes.string])
})
}, _class.defaultProps = {
prefix: 'next-',
shape: 'pure',
size: 'medium',
animation: true,
tabPosition: 'top',
excessMode: 'slide',
triggerType: 'click',
lazyLoad: true,
unmountInactiveTabs: false,
disableKeyboard: false,
onClick: noop,
onChange: noop,
onClose: noop,
locale: zhCN.Tab,
icons: {}
}, _temp);
Tab.displayName = 'Tab';
export default polyfill(Tab);