@linkdesign/screen
Version:
屏组件库，但使用场景又不局限于屏。主要用于BI、大盘和屏
219 lines (215 loc) • 10.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _lodashEs = require("lodash-es");
var _dayjs = _interopRequireDefault(require("dayjs"));
var _next = require("@alifd/next");
var _title = _interopRequireDefault(require("../title"));
var _context = _interopRequireDefault(require("../context"));
var _Utils = require("../Utils");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
/* eslint-disable react/no-danger */
// interface IHeaderOptions extends ITitle {
// /**
// * 行高
// */
// height?: number | string;
// }
/**
* 轮播表格
*
* @class CarouselTable
* @extends {Component<ICarouselTable, IState>}
*/
var CarouselTable = /*#__PURE__*/function (_Component) {
(0, _inheritsLoose2["default"])(CarouselTable, _Component);
function CarouselTable(props) {
var _this;
_this = _Component.call(this, props) || this;
_this.containerRef = void 0;
_this.headerRef = void 0;
_this.titleRef = void 0;
/**
* resize
*
* @memberof CarouselTable
*/
_this.handlerResize = function () {
var containerDom = _this.containerRef.current;
// const titleDom = this.titleRef.current;
if (!containerDom) return;
var containerHeight = containerDom.clientHeight;
// const titleHeight = titleDom ? Dimension(titleDom) : 0;
if (containerHeight !== _this.state.containerHeight) {
_this.setState({
containerHeight: containerHeight
// titleHeight,
});
}
};
_this.state = {
containerHeight: 0
// titleHeight: 0,
};
_this.containerRef = /*#__PURE__*/_react["default"].createRef();
_this.titleRef = /*#__PURE__*/_react["default"].createRef();
_this.headerRef = /*#__PURE__*/_react["default"].createRef();
return _this;
}
var _proto = CarouselTable.prototype;
_proto.componentDidMount = function componentDidMount() {
this.handlerResize();
window.addEventListener('resize', this.handlerResize);
};
_proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
return !(0, _lodashEs.isEqual)(nextProps.dataSource, this.props.dataSource) || !(0, _lodashEs.isEqual)(nextState.containerHeight, this.state.containerHeight);
};
_proto.componentWillUnmount = function componentWillUnmount() {
window.removeEventListener('resize', this.handlerResize);
};
_proto.render = function render() {
var _cssPrefix = this.context._cssPrefix;
var _this$props = this.props,
className = _this$props.className,
title = _this$props.title,
_this$props$dataSourc = _this$props.dataSource,
dataSource = _this$props$dataSourc === void 0 ? [] : _this$props$dataSourc,
universalStyle = _this$props.universalStyle,
global = _this$props.global,
_this$props$sliderOpt = _this$props.sliderOptions,
sliderOptions = _this$props$sliderOpt === void 0 ? {} : _this$props$sliderOpt,
headerOptions = _this$props.headerOptions,
_this$props$titleOpti = _this$props.titleOptions,
titleOptions = _this$props$titleOpti === void 0 ? {
align: 'left',
textStyle: {
marginBottom: 12
}
} : _this$props$titleOpti,
rowOptions = _this$props.rowOptions,
_this$props$column = _this$props.column,
column = _this$props$column === void 0 ? [] : _this$props$column,
_this$props$emptyCont = _this$props.emptyContent,
emptyContent = _this$props$emptyCont === void 0 ? /*#__PURE__*/_react["default"].createElement("div", {
className: _cssPrefix + "carousel-table-empty"
}, /*#__PURE__*/_react["default"].createElement("span", {
className: _cssPrefix + "iconfont-ability",
dangerouslySetInnerHTML: {
__html: ''
}
}), "\u6682\u65E0\u4EFB\u4F55\u6570\u636E") : _this$props$emptyCont;
// const { containerHeight, titleHeight } = this.state;
// const { slidesToShow = 1 } = sliderOptions;
var oddBackgroundColor = (0, _lodashEs.get)(rowOptions, 'oddBackgroundColor', '#112854');
var evenBackgroundColor = (0, _lodashEs.get)(rowOptions, 'evenBackgroundColor', 'transparent');
var width = (0, _lodashEs.get)(universalStyle, 'width', '100%');
// const height = get(universalStyle, 'height', '100%');
// const heightRate = get(headerOptions, 'heightRate', (1 / (slidesToShow + 1)) * 100);
var backgroundColor = (0, _lodashEs.get)(headerOptions, 'universalStyle.backgroundColor', 'transparent');
var headerHeight = (0, _lodashEs.get)(headerOptions, 'universalStyle.height', 40); // (containerHeight - titleHeight) * (heightRate / 100);
var rowHeight = (0, _lodashEs.get)(rowOptions, 'height', 40); // (containerHeight - titleHeight - headerHeight) / slidesToShow;
var slidesToShow = sliderOptions.slidesToShow || 1;
var autoplay = (dataSource || []).length > slidesToShow;
if (!sliderOptions.autoplay && (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) < slidesToShow) {
slidesToShow = dataSource.length;
}
var headerNodes = column.map(function (item, i) {
var key = item.key,
alias = item.alias,
align = item.align,
_item$textStyle = item.textStyle,
textStyle = _item$textStyle === void 0 ? {} : _item$textStyle;
var widthRate = (0, _lodashEs.get)(item, 'widthRate', 100 / column.length);
return /*#__PURE__*/_react["default"].createElement(_title["default"], (0, _extends2["default"])({
key: key + "-" + i,
align: align
}, headerOptions, {
textStyle: (0, _extends2["default"])({}, (0, _lodashEs.get)(global, 'textStyle', {}), textStyle),
className: (0, _classnames["default"])(_cssPrefix + "carousel-table-column", (0, _lodashEs.get)(headerOptions, 'className')),
universalStyle: (0, _extends2["default"])({
width: widthRate + "%"
}, (0, _lodashEs.get)(headerOptions, 'universalStyle', {}))
}), alias);
});
var rowNodes = dataSource.map(function (data, i) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: i,
className: _cssPrefix + "carousel-table-row",
style: {
backgroundColor: i % 2 ? evenBackgroundColor : oddBackgroundColor
}
}, column.map(function (col, j) {
var _ref;
var key = col.key,
type = col.type,
_col$format = col.format,
format = _col$format === void 0 ? 'HH:mm:ss' : _col$format,
widthRate = col.widthRate,
_col$textStyle = col.textStyle,
textStyle = _col$textStyle === void 0 ? {} : _col$textStyle,
align = col.align,
cell = col.cell;
var content;
if (cell) {
content = cell(data[key], i, data) || '-';
} else if (key === '$index') {
content = i + 1;
} else if (type === 'time') {
content = (0, _dayjs["default"])(data[key]).format(format);
} else if (type === 'data') {
content = (0, _lodashEs.isNull)(data[key]) || (0, _lodashEs.isUndefined)(data[key]) ? '-' : (0, _Utils.NWC)(data[key]);
} else {
content = (0, _lodashEs.isNull)(data[key]) || (0, _lodashEs.isUndefined)(data[key]) ? '-' : data[key];
}
return /*#__PURE__*/_react["default"].createElement(_title["default"], {
key: key + "-" + i + "-" + j,
className: (0, _classnames["default"])([_cssPrefix + "carousel-table-item", (_ref = {}, _ref[_cssPrefix + "carousel-table-index"] = key === '$index', _ref[_cssPrefix + "circle"] = key === '$index' && !cell, _ref[_cssPrefix + "data"] = key === '$index' || type === 'data', _ref)]),
textStyle: (0, _extends2["default"])({}, (0, _lodashEs.get)(global, 'textStyle', {}), textStyle),
align: align || (0, _lodashEs.get)(headerOptions, 'align'),
universalStyle: {
width: widthRate + "%",
height: rowHeight + "px"
}
}, content);
}));
});
return /*#__PURE__*/_react["default"].createElement("div", {
ref: this.containerRef,
className: (0, _classnames["default"])(className, _cssPrefix + "carousel-table"),
style: {
width: width,
// height: height,
backgroundColor: (0, _lodashEs.get)(universalStyle, 'backgroundColor')
}
}, title && /*#__PURE__*/_react["default"].createElement(_title["default"], (0, _extends2["default"])({}, titleOptions, {
forwardRef: this.titleRef,
className: (0, _classnames["default"])(_cssPrefix + "carousel-table-title", _cssPrefix + "main-chart-title", (0, _lodashEs.get)(titleOptions, 'className')),
align: (0, _lodashEs.get)(titleOptions, 'align', 'left')
}), title), dataSource.length > 0 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
ref: this.headerRef,
className: _cssPrefix + "carousel-table-header",
style: {
backgroundColor: backgroundColor,
height: headerHeight
}
}, headerNodes), /*#__PURE__*/_react["default"].createElement(_next.Slider, (0, _extends2["default"])({
arrows: false,
dots: false,
draggable: false,
autoplay: autoplay,
slideDirection: "ver"
}, sliderOptions, {
slidesToShow: slidesToShow,
className: _cssPrefix + "carousel-table-body"
}), rowNodes)) : emptyContent);
};
return CarouselTable;
}(_react.Component);
CarouselTable.contextType = _context["default"];
var _default = exports["default"] = CarouselTable;