lm-tab
Version:
* 作者：winber * 邮箱：winberxie@163.com * 版本：**`0.4.0`**
456 lines (391 loc) • 17.8 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Tab = exports.TabBodyItem = exports.TabBody = exports.TabBarItem = exports.TabBar = exports.NavBarItem = exports.NavBar = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _jsxFileName = 'src/index.js';
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
require('./index.scss');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } /**
* Created by winber<winberxie@163.com>.
* ComponentName Tab
* Desc 组件描述内容
* GroupName lm-component
*/
var NavBar = function NavBar(props) {
var className = props.className,
children = props.children,
others = _objectWithoutProperties(props, ['className', 'children']);
var cls = (0, _classnames2.default)({
'lm-nav-bar': true
}, className);
return _react2.default.createElement(
'div',
Object.assign({ className: cls }, others, _defineProperty({
__source: {
fileName: _jsxFileName,
lineNumber: 22
},
__self: undefined
}, '__self', undefined)),
children
);
};
exports.NavBar = NavBar;
var NavBarItem = function NavBarItem(props) {
var className = props.className,
label = props.label,
active = props.active,
children = props.children,
others = _objectWithoutProperties(props, ['className', 'label', 'active', 'children']);
var cls = (0, _classnames2.default)({
'lm-nav-bar-item': true,
'lm-nav-bar-active': active
}, className);
return _react2.default.createElement(
'div',
Object.assign({ className: cls }, others, _defineProperty({
__source: {
fileName: _jsxFileName,
lineNumber: 36
},
__self: undefined
}, '__self', undefined)),
label ? label : children
);
};
exports.NavBarItem = NavBarItem;
NavBarItem.propTypes = {
active: _propTypes2.default.bool,
label: _propTypes2.default.string
};
var TabBar = function TabBar(props) {
var className = props.className,
children = props.children,
others = _objectWithoutProperties(props, ['className', 'children']);
var cls = (0, _classnames2.default)({
'lm-tab-bar': true
}, className);
return _react2.default.createElement(
'div',
Object.assign({ className: cls }, others, _defineProperty({
__source: {
fileName: _jsxFileName,
lineNumber: 56
},
__self: undefined
}, '__self', undefined)),
children
);
};
/**
* TabBarItem 组件
* @param {object} props --属性对象
* @enum {string} desc 文本描述
* @enum {base64} activeIcon 选中时对应的icon
* @enum {base64} icon 未选中时对应的icon
* @enum {boolean} active 当前是否选中 true:选中 false:未选中
* @return {[React.Element]} 组件需要渲染的dom
*/
exports.TabBar = TabBar;
var TabBarItem = function TabBarItem(props) {
var className = props.className,
desc = props.desc,
active = props.active,
activeIcon = props.activeIcon,
icon = props.icon,
others = _objectWithoutProperties(props, ['className', 'desc', 'active', 'activeIcon', 'icon']);
var cls = (0, _classnames2.default)({
'lm-tab-bar-item': true,
'lm-tab-bar-active': active
}, className);
return _react2.default.createElement(
'div',
Object.assign({ className: cls }, others, _defineProperty({
__source: {
fileName: _jsxFileName,
lineNumber: 79
},
__self: undefined
}, '__self', undefined)),
_react2.default.createElement('img', _defineProperty({ alt: '', className: 'lm-tab-bar-icon', src: active ? activeIcon : icon, __source: {
fileName: _jsxFileName,
lineNumber: 80
},
__self: undefined
}, '__self', undefined)),
_react2.default.createElement(
'p',
_defineProperty({
__source: {
fileName: _jsxFileName,
lineNumber: 81
},
__self: undefined
}, '__self', undefined),
desc
)
);
};
exports.TabBarItem = TabBarItem;
TabBarItem.propTypes = {
active: _propTypes2.default.bool,
activeIcon: _propTypes2.default.any.isRequired,
icon: _propTypes2.default.any.isRequired,
desc: _propTypes2.default.string.isRequired
};
var TabBody = function TabBody(props) {
var children = props.children,
others = _objectWithoutProperties(props, ['children']);
return _react2.default.createElement(
'div',
Object.assign({}, others, _defineProperty({
__source: {
fileName: _jsxFileName,
lineNumber: 97
},
__self: undefined
}, '__self', undefined)),
children
);
};
/**
* TabBarItem 组件
* @param {object} props --属性对象
* @enum {boolean} active 当前是否选中 true:选中 false:未选中
* @return {[React.Element]} 组件需要渲染的dom
*/
exports.TabBody = TabBody;
var TabBodyItem = function TabBodyItem(props) {
var children = props.children,
active = props.active,
className = props.className,
others = _objectWithoutProperties(props, ['children', 'active', 'className']);
var cls = (0, _classnames2.default)({
'lm-tab-body-item': true,
'lm-tab-body-item-active': active
}, className);
return _react2.default.createElement(
'div',
Object.assign({ className: cls
}, others, _defineProperty({
__source: {
fileName: _jsxFileName,
lineNumber: 117
},
__self: undefined
}, '__self', undefined)),
children
);
};
exports.TabBodyItem = TabBodyItem;
var Tab = exports.Tab = function (_React$Component) {
_inherits(Tab, _React$Component);
function Tab(props) {
_classCallCheck(this, Tab);
var _this = _possibleConstructorReturn(this, (Tab.__proto__ || Object.getPrototypeOf(Tab)).call(this, props));
_this.handleHeaderClick = function (index) {
var prevIndex = _this.state.index;
_this.setState({ index: index }, function () {
_this.props.onChange && prevIndex !== index && _this.props.onChange(index);
});
};
_this.state = {
/**
* @description - 所选中的tabItem的索引
* @property {number} index 当前所选中的tabItem的索引
*/
index: _this.props.defaultIndex
};
return _this;
}
/**
* 点击tabItem的回调函数
* @param {number} index --当前所选中的tab索引
*/
_createClass(Tab, [{
key: 'parseChild',
/**
* 提取contentItem & navItem & 属性
* @param {React.Element} childrenInput --Tab 组件的childen
* @return {object} --navbar的items & tabBody的items & navbar的props &tabBody的props
*/
value: function parseChild(children) {
var _this2 = this;
//缓存navbar的items
var ChildHeaders = [];
//缓存tabBody的items
var ChildContents = [];
//缓存tabBody & bar的 props
var tBodyProps = void 0,
barProps = void 0;
_react2.default.Children.map(children, function (child) {
if (!child) return;
var children = child.props.children;
if (child.type === TabBarItem || child.type === NavBarItem) {
ChildHeaders.push(child);
if (children) ChildContents.push(_react2.default.createElement(TabBodyItem, _defineProperty({ children: children, __source: {
fileName: _jsxFileName,
lineNumber: 179
},
__self: _this2
}, '__self', _this2)));
}
if (child.type === TabBodyItem) {
ChildContents.push(child);
}
if (child.type === NavBar || child.type === TabBar) {
barProps = child.props;
_react2.default.Children.map(child.props.children, function (item) {
ChildHeaders.push(item);
});
}
if (child.type === TabBody) {
tBodyProps = child.props;
_react2.default.Children.map(child.props.children, function (item) {
ChildContents.push(item);
});
}
});
return { ChildHeaders: ChildHeaders, ChildContents: ChildContents, tBodyProps: tBodyProps, barProps: barProps };
}
}, {
key: 'renderBar',
/**
* Tab需要render的内容
* @param {string} type --Tab组件的类型
* @param {React.Element} children -Tab组件的children
* @param {object} props --Tab组件自定义的样式
* @return {React.Element} --Tab需要render的内容
*/
value: function renderBar(type, children, props) {
var _this3 = this;
var _parseChild = this.parseChild(children),
ChildHeaders = _parseChild.ChildHeaders,
ChildContents = _parseChild.ChildContents,
tBodyProps = _parseChild.tBodyProps,
barProps = _parseChild.barProps;
var _headers = ChildHeaders.map(function (item, idx) {
var _item$props = item.props,
_onClick = _item$props.onClick,
active = _item$props.active,
others = _objectWithoutProperties(_item$props, ['onClick', 'active']);
return _react2.default.cloneElement(item, _extends({
key: idx,
active: _this3.state.index === idx,
onClick: function onClick(e) {
_onClick && _onClick(e);
_this3.handleHeaderClick(idx);
}
}, others));
});
var _contents = ChildContents.map(function (item, idx) {
return _react2.default.cloneElement(item, {
key: idx,
active: _this3.state.index === idx
});
});
if (type === 'tabBar') {
return _react2.default.createElement(
'div',
Object.assign({}, props, _defineProperty({
__source: {
fileName: _jsxFileName,
lineNumber: 233
},
__self: this
}, '__self', this)),
_react2.default.createElement(
TabBody,
Object.assign({}, tBodyProps, _defineProperty({
__source: {
fileName: _jsxFileName,
lineNumber: 234
},
__self: this
}, '__self', this)),
_contents
),
_react2.default.createElement(
TabBar,
Object.assign({}, barProps, _defineProperty({
__source: {
fileName: _jsxFileName,
lineNumber: 237
},
__self: this
}, '__self', this)),
_headers
)
);
}
if (type === 'navBar' || 'normal') {
return _react2.default.createElement(
'div',
Object.assign({}, props, _defineProperty({
__source: {
fileName: _jsxFileName,
lineNumber: 246
},
__self: this
}, '__self', this)),
_react2.default.createElement(
NavBar,
Object.assign({}, barProps, _defineProperty({
__source: {
fileName: _jsxFileName,
lineNumber: 247
},
__self: this
}, '__self', this)),
_headers
),
_react2.default.createElement(
TabBody,
Object.assign({}, tBodyProps, _defineProperty({
__source: {
fileName: _jsxFileName,
lineNumber: 250
},
__self: this
}, '__self', this)),
_contents
)
);
}
return false;
}
}, {
key: 'render',
value: function render() {
var _props = this.props,
children = _props.children,
type = _props.type,
defaultIndex = _props.defaultIndex,
others = _objectWithoutProperties(_props, ['children', 'type', 'defaultIndex']);
return this.renderBar(type, children, others);
}
}]);
return Tab;
}(_react2.default.Component);
Tab.defaultProps = {
type: 'normal',
defaultIndex: 0
};
Tab.propTypes = {
type: _propTypes2.default.string,
onChange: _propTypes2.default.func,
defaultIndex: _propTypes2.default.number
};