@up-group-ui/react-controls
Version:
Up shared react controls
76 lines • 5.13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var React = (0, tslib_1.__importStar)(require("react"));
var SvgIcon_1 = (0, tslib_1.__importDefault)(require("../../Display/SvgIcon"));
var theming_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming"));
var UpTooltip_1 = (0, tslib_1.__importDefault)(require("../../Display/Tooltip/UpTooltip"));
var UpLigne_1 = (0, tslib_1.__importDefault)(require("../../Display/Ligne/UpLigne"));
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var Box_1 = (0, tslib_1.__importDefault)(require("../Box"));
var typestyle_1 = require("typestyle");
var headerCellStyles = (0, typestyle_1.style)({
$nest: {
'& .up-data-grid-header-cell-icons .up-icon-wrapper': {
height: '8px',
},
'& .up-data-grid-header-cell-icons': {
marginLeft: '8px',
},
'& .tooltip-icon': {
marginLeft: '8px',
marginTop: '4px',
},
},
});
var UpDataGridCellHeader = (function (_super) {
(0, tslib_1.__extends)(UpDataGridCellHeader, _super);
function UpDataGridCellHeader(props, context) {
var _this = _super.call(this, props, context) || this;
_this.onCellClick = function (sortDirection) {
if (!sortDirection) {
sortDirection = _this.state.sortDirection === 'ASC' ? 'DESC' : 'ASC';
}
if (_this.props.column.isSortable === true && _this.state.sortDirection != sortDirection) {
_this.setState({ isSorted: true, sortDirection: sortDirection }, function () {
_this.props.onSortChange(_this.props.column, _this.state.sortDirection);
});
}
};
_this.state = {
isSorted: props.column ? props.column.isSorted : false,
sortDirection: props.column ? props.column.sortDir : null,
};
return _this;
}
UpDataGridCellHeader.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.column.isSorted != null && newProps.column.isSorted !== this.state.isSorted) {
this.setState({
isSorted: newProps.column.isSorted,
sortDirection: newProps.column.isSorted ? (this.state.sortDirection == null ? 'DESC' : 'ASC') : null,
});
}
};
UpDataGridCellHeader.prototype.render = function () {
var _this = this;
var sortDescIcon = 'arrow-down';
var sortAscIcon = 'arrow-up';
var arrowColor = theming_1.default.colorMap.primary;
var Tooltip = this.props.column.tooltip && ((0, jsx_runtime_1.jsx)(UpTooltip_1.default, (0, tslib_1.__assign)({ title: this.props.column.tooltip.title, content: this.props.column.tooltip.content, delayHide: 100, delayShow: 100 }, { children: (0, jsx_runtime_1.jsx)(UpLigne_1.default, { children: (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { width: 20, height: 20, iconName: this.props.column.tooltip.icon || 'info', className: "tooltip-icon" }, void 0) }, void 0) }), void 0));
var width = 'auto';
if (this.props.width != null) {
width = this.props.width;
}
return ((0, jsx_runtime_1.jsx)("th", (0, tslib_1.__assign)({ style: width ? { width: width } : {}, className: (0, classnames_1.default)(headerCellStyles, 'up-data-grid-header-cell', this.props.column.isSortable ? 'up-data-grid-sortable' : '', this.props.className) }, { children: (0, jsx_runtime_1.jsxs)(Box_1.default, (0, tslib_1.__assign)({ flexDirection: 'row', justifyContent: this.props.textAlignCells === 'center'
? 'center'
: this.props.textAlignCells === 'left'
? 'flex-start'
: this.props.textAlignCells === 'right'
? 'flex-end'
: 'normal', alignItems: 'center' }, { children: [(0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ onClick: function () { return _this.onCellClick(); }, className: 'up-data-grid-header-cell-label' }, { children: this.props.column.label }), void 0), this.props.column.isSortable && ((0, jsx_runtime_1.jsxs)(Box_1.default, (0, tslib_1.__assign)({ className: 'up-data-grid-header-cell-icons', flexDirection: 'column', style: { width: 'auto' } }, { children: [(0, jsx_runtime_1.jsx)(SvgIcon_1.default, { width: 12, height: 12, iconName: sortAscIcon, color: this.state.isSorted && this.state.sortDirection == 'ASC' ? arrowColor : '#D7D7D7', onClick: function () { return _this.onCellClick('ASC'); } }, void 0), (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { width: 12, height: 12, iconName: sortDescIcon, color: this.state.isSorted && this.state.sortDirection == 'DESC' ? arrowColor : '#D7D7D7', onClick: function () { return _this.onCellClick('DESC'); } }, void 0)] }), void 0)), Tooltip] }), void 0) }), void 0));
};
return UpDataGridCellHeader;
}(React.Component));
exports.default = UpDataGridCellHeader;
//# sourceMappingURL=UpDataGridCellHeader.js.map