doly
Version:
doly ui components
311 lines (248 loc) • 10.2 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _common = require("../_style/common");
var _createTag = _interopRequireDefault(require("../_utils/createTag"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _rmcFeedback = _interopRequireDefault(require("rmc-feedback"));
function _templateObject9() {
var data = (0, _taggedTemplateLiteral2.default)(["\n margin-top: 9px;\n padding:0 10px;\n color: #000;\n text-align: center;\n word-break: break-all;\n word-wrap: break-word;\n \n font-size: ", ";\n"]);
_templateObject9 = function _templateObject9() {
return data;
};
return data;
}
function _templateObject8() {
var data = (0, _taggedTemplateLiteral2.default)(["\n img{\n max-width: 100%;\n width: 28% !important;\n }\n"]);
_templateObject8 = function _templateObject8() {
return data;
};
return data;
}
function _templateObject7() {
var data = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100%;\n"]);
_templateObject7 = function _templateObject7() {
return data;
};
return data;
}
function _templateObject6() {
var data = (0, _taggedTemplateLiteral2.default)(["\n box-sizing: border-box;\n padding: 15px 0;\n width: 100%;\n height: 100%;\n text-align: center;\n\n ", "\n"]);
_templateObject6 = function _templateObject6() {
return data;
};
return data;
}
function _templateObject5() {
var data = (0, _taggedTemplateLiteral2.default)(["\n box-sizing: border-box;\n position: relative;\n flex-basis: ", "%;\n\n ", "\n\n ", "\n"]);
_templateObject5 = function _templateObject5() {
return data;
};
return data;
}
function _templateObject4() {
var data = (0, _taggedTemplateLiteral2.default)(["\n box-sizing: border-box;\n display: flex;\n width: 100%;\n position: relative;\n\n ", "\n"]);
_templateObject4 = function _templateObject4() {
return data;
};
return data;
}
function _templateObject3() {
var data = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n background: #fff;\n\n ", "\n"]);
_templateObject3 = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2() {
var data = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n"]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = (0, _taggedTemplateLiteral2.default)(["\n &::before{\n content:\"\";\n display: block;\n padding-bottom: 100%;\n }\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
var divTag = (0, _createTag.default)({
tag: 'div',
propsToOmit: ['data', 'hasLine', 'renderItem', 'square', 'columnNum', 'activeStyle', 'activeClassName', 'itemStyle', 'lineColor', 'wrapperStyle']
});
var squareCol = (0, _styledComponents.css)(_templateObject());
var squareContent = (0, _styledComponents.css)(_templateObject2());
var StyledGrid = (0, _styledComponents.default)(divTag)(_templateObject3(), function (props) {
return props.hasLine ? (0, _common.hairline)('right', props.lineColor) + (0, _common.hairline)('top', props.lineColor) : '';
});
var StyledRow = (0, _styledComponents.default)(divTag)(_templateObject4(), function (props) {
return props.hasLine ? (0, _common.hairline)('left', props.lineColor) + (0, _common.hairline)('bottom', props.lineColor) : '';
});
var StyledCol = (0, _styledComponents.default)(divTag)(_templateObject5(), function (props) {
return (100 / props.columnNum).toFixed(2);
}, function (props) {
return props.square ? squareCol : '';
}, function (props) {
return props.hasLine ? (0, _common.hairline)('right', props.lineColor) : '';
});
var StyledContent = (0, _styledComponents.default)(divTag)(_templateObject6(), function (props) {
return props.square ? squareContent : '';
});
var StyledContentInner = (0, _styledComponents.default)(divTag)(_templateObject7());
var StyledIcon = (0, _styledComponents.default)(divTag)(_templateObject8());
var StyledText = (0, _styledComponents.default)(divTag)(_templateObject9(), function (props) {
return props.columnNum <= 3 ? '16px' : '12px';
});
var noop = function noop() {};
var unqueId = 0;
var getUnqueId = function getUnqueId() {
return ++unqueId;
};
var Grid =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2.default)(Grid, _React$Component);
function Grid(props) {
var _this;
(0, _classCallCheck2.default)(this, Grid);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Grid).call(this, props));
_this.id = getUnqueId();
_this.columnNum = props.columnNum;
return _this;
}
(0, _createClass2.default)(Grid, [{
key: "renderItem",
value: function renderItem(item, index) {
var renderItem = this.props.renderItem;
if (renderItem) {
return renderItem(item, index);
} else {
return _react.default.createElement(StyledContentInner, null, _react.default.createElement(StyledIcon, null, _react.default.isValidElement(item.icon) ? item.icon : _react.default.createElement("img", {
src: item.icon
})), _react.default.createElement(StyledText, {
columnNum: this.columnNum
}, item.text));
}
}
/**
* 数据处理，变成二维数组
* @return {[type]} [description]
*/
}, {
key: "processData",
value: function processData(columnNum) {
var data = this.props.data;
var arr = [];
data.forEach(function (item, i) {
var rowIndex = Math.floor(i / columnNum);
if (!arr[rowIndex]) {
arr[rowIndex] = [];
}
arr[rowIndex].push(item);
});
return arr;
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
data = _this$props.data,
_onClick = _this$props.onClick,
hasLine = _this$props.hasLine,
lineColor = _this$props.lineColor,
renderItem = _this$props.renderItem,
square = _this$props.square,
columnNum = _this$props.columnNum,
activeStyle = _this$props.activeStyle,
activeClassName = _this$props.activeClassName,
itemStyle = _this$props.itemStyle,
wrapperStyle = _this$props.wrapperStyle;
if (data.length <= 0) {
return null;
}
if (columnNum < 1) {
this.columnNum = 4;
}
var dataArr = this.processData(this.columnNum);
var defaultActiveStyle = {
backgroundColor: '#ddd'
};
var _activeStyle = activeStyle;
if (activeStyle !== false) {
_activeStyle = (0, _objectSpread2.default)({}, defaultActiveStyle, activeStyle);
}
return _react.default.createElement(StyledGrid, {
hasLine: hasLine,
lineColor: lineColor,
style: wrapperStyle
}, _react.default.createElement(_common.GlobalStyle, null), dataArr.map(function (rowItem, rowIndex) {
return _react.default.createElement(StyledRow, {
key: "".concat(_this2.id + rowIndex),
hasLine: hasLine,
lineColor: lineColor
}, rowItem.map(function (colItem, colIndex) {
return _react.default.createElement(_rmcFeedback.default, {
key: "".concat(_this2.id + rowIndex + colIndex),
activeClassName: activeClassName,
activeStyle: _activeStyle
}, _react.default.createElement(StyledCol, {
style: itemStyle,
square: square,
hasLine: hasLine,
lineColor: lineColor,
columnNum: _this2.columnNum,
onClick: function onClick() {
_onClick && _onClick(colItem, rowIndex * _this2.columnNum + colIndex);
}
}, _react.default.createElement(StyledContent, {
square: square
}, _this2.renderItem(colItem, rowIndex * _this2.columnNum + colIndex))));
}));
}));
}
}]);
return Grid;
}(_react.default.Component);
exports.default = Grid;
(0, _defineProperty2.default)(Grid, "propTypes", {
data: _propTypes.default.array.isRequired,
onClick: _propTypes.default.func,
hasLine: _propTypes.default.bool,
lineColor: _propTypes.default.string,
renderItem: _propTypes.default.func,
square: _propTypes.default.bool,
columnNum: _propTypes.default.number,
activeStyle: _propTypes.default.object,
activeClassName: _propTypes.default.string,
itemStyle: _propTypes.default.object,
wrapperStyle: _propTypes.default.object
});
(0, _defineProperty2.default)(Grid, "defaultProps", {
data: [],
onClick: noop,
hasLine: true,
lineColor: '#ddd',
square: true,
columnNum: 4,
activeStyle: {},
activeClassName: '',
itemStyle: {},
wrapperStyle: {}
});