antd-mobile
Version:
基于 React 的移动设计规范实现
257 lines (218 loc) • 10.2 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _flex = require('../flex');
var _flex2 = _interopRequireDefault(_flex);
var _index = require('../carousel/index.web');
var _index2 = _interopRequireDefault(_index);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var __rest = undefined && undefined.__rest || function (s, e) {
var t = {};
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
}if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0) t[p[i]] = s[p[i]];
}return t;
};
/* tslint:disable:jsx-no-multiline-js */
var Grid = function (_React$Component) {
(0, _inherits3['default'])(Grid, _React$Component);
function Grid() {
(0, _classCallCheck3['default'])(this, Grid);
var _this = (0, _possibleConstructorReturn3['default'])(this, (Grid.__proto__ || Object.getPrototypeOf(Grid)).apply(this, arguments));
_this.state = {
initialSlideWidth: 0
};
_this.renderCarousel = function (rowsArr, pageCount, rowCount) {
var prefixCls = _this.props.prefixCls;
var carouselMaxRow = _this.props.carouselMaxRow;
var pagesArr = [];
for (var pageIndex = 0; pageIndex < pageCount; pageIndex++) {
var pageRows = [];
for (var ii = 0; ii < carouselMaxRow; ii++) {
var rowIndex = pageIndex * carouselMaxRow + ii;
if (rowIndex < rowCount) {
pageRows.push(rowsArr[rowIndex]);
} else {
// 空节点为了确保末尾页的最后未到底的行有底线(样式中last-child会没线)
pageRows.push(_react2['default'].createElement('div', { key: 'gridline-' + rowIndex }));
}
}
pagesArr.push(_react2['default'].createElement(
'div',
{ key: 'pageitem-' + pageIndex, className: prefixCls + '-carousel-page' },
pageRows
));
}
return pagesArr;
};
_this.renderItem = function (dataItem, index, columnNum, renderItem) {
var prefixCls = _this.props.prefixCls;
var itemEl = null;
if (renderItem) {
itemEl = renderItem(dataItem, index);
} else {
if (dataItem) {
var icon = dataItem.icon,
text = dataItem.text;
itemEl = _react2['default'].createElement(
'div',
{ className: prefixCls + '-item-inner-content column-num-' + columnNum },
_react2['default'].isValidElement(icon) ? icon : _react2['default'].createElement('img', { className: prefixCls + '-icon', src: icon }),
_react2['default'].createElement(
'div',
{ className: prefixCls + '-text' },
text
)
);
}
}
return _react2['default'].createElement(
'div',
{ className: prefixCls + '-item-content' },
itemEl
);
};
_this.getRows = function (rowCount, dataLength) {
var _this$props = _this.props,
columnNum = _this$props.columnNum,
data = _this$props.data,
renderItem = _this$props.renderItem,
prefixCls = _this$props.prefixCls,
_onClick = _this$props.onClick;
var rowsArr = [];
columnNum = columnNum;
var rowWidth = 100 / columnNum + '%';
var colStyle = {
width: rowWidth
};
for (var i = 0; i < rowCount; i++) {
var rowArr = [];
var _loop = function _loop(j) {
var dataIndex = i * columnNum + j;
var itemEl = void 0;
if (dataIndex < dataLength) {
var el = data && data[dataIndex];
itemEl = _react2['default'].createElement(
_flex2['default'].Item,
{ key: 'griditem-' + dataIndex, className: prefixCls + '-item', onClick: function onClick() {
return _onClick && _onClick(el, dataIndex);
}, style: colStyle },
_this.renderItem(el, dataIndex, columnNum, renderItem)
);
} else {
itemEl = _react2['default'].createElement(
_flex2['default'].Item,
{ key: 'griditem-' + dataIndex, className: prefixCls + '-item', style: colStyle },
_react2['default'].createElement(
'div',
{ className: prefixCls + '-item-content' },
_react2['default'].createElement('div', { className: prefixCls + '-item-inner-content' })
)
);
}
rowArr.push(itemEl);
};
for (var j = 0; j < columnNum; j++) {
_loop(j);
}
rowsArr.push(_react2['default'].createElement(
_flex2['default'],
{ justify: 'center', align: 'stretch', key: 'gridline-' + i },
rowArr
));
}
return rowsArr;
};
return _this;
}
(0, _createClass3['default'])(Grid, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.setState({
initialSlideWidth: document.documentElement.clientWidth
});
}
}, {
key: 'render',
value: function render() {
var _classNames;
var _a = this.props,
prefixCls = _a.prefixCls,
className = _a.className,
data = _a.data,
hasLine = _a.hasLine,
isCarousel = _a.isCarousel,
restProps = __rest(_a, ["prefixCls", "className", "data", "hasLine", "isCarousel"]);
var columnNum = restProps.columnNum,
carouselMaxRow = restProps.carouselMaxRow,
onClick = restProps.onClick,
renderItem = restProps.renderItem,
restPropsForCarousel = __rest(restProps, ["columnNum", "carouselMaxRow", "onClick", "renderItem"]);
var initialSlideWidth = this.state.initialSlideWidth;
columnNum = columnNum;
carouselMaxRow = carouselMaxRow;
var dataLength = data && data.length || 0;
var rowCount = void 0;
var pageCount = 1;
var rowsArr = void 0;
var renderEl = void 0;
if (isCarousel && initialSlideWidth > 0) {
// carousel mode && not server render. because carousel dependes on document
pageCount = Math.ceil(dataLength / (columnNum * carouselMaxRow));
rowCount = pageCount * carouselMaxRow;
rowsArr = this.getRows(rowCount, dataLength);
var carouselProps = {};
if (pageCount <= 1) {
carouselProps = {
dots: false,
dragging: false,
swiping: false
};
}
renderEl = _react2['default'].createElement(
_index2['default'],
(0, _extends3['default'])({ initialSlideWidth: initialSlideWidth }, restPropsForCarousel, carouselProps),
this.renderCarousel(rowsArr, pageCount, rowCount)
);
} else {
rowCount = Math.ceil(dataLength / columnNum);
rowsArr = this.getRows(rowCount, dataLength);
renderEl = rowsArr;
}
return _react2['default'].createElement(
'div',
{ className: (0, _classnames2['default'])((_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls, true), (0, _defineProperty3['default'])(_classNames, prefixCls + '-line', hasLine), (0, _defineProperty3['default'])(_classNames, className, className), _classNames)) },
renderEl
);
}
}]);
return Grid;
}(_react2['default'].Component);
exports['default'] = Grid;
Grid.defaultProps = {
data: [],
hasLine: true,
isCarousel: false,
columnNum: 4,
carouselMaxRow: 2,
prefixCls: 'am-grid'
};
module.exports = exports['default'];