@antv/s2-react
Version:
use S2 with react
61 lines • 4.59 kB
JavaScript
import { getEmptyPlaceholder, i18n, isUnchangedValue, isUpDataValue, getStrategySheetTooltipClsName as tooltipCls, } from '@antv/s2';
import cls from 'classnames';
import { first, get, isEmpty, isFunction, isNil } from 'lodash';
import React from 'react';
import './index.less';
export const StrategySheetDataCellTooltip = React.memo((props) => {
var _a, _b;
const { cell, label, showOriginalValue: showOriginalValueFromTooltip = false, renderDerivedValue, } = props;
const meta = cell.getMeta();
const { spreadsheet } = meta;
const metaFieldValue = meta === null || meta === void 0 ? void 0 : meta.fieldValue;
const rowDescription = spreadsheet.dataSet.getCustomFieldDescription(cell);
const defaultRowName = spreadsheet.dataSet.getCustomRowFieldName(cell);
const customLabel = isFunction(label) ? label(cell, defaultRowName) : label;
const rowName = customLabel !== null && customLabel !== void 0 ? customLabel : defaultRowName;
const colLeafNode = spreadsheet.facet.getColLeafNodeByIndex(meta.colIndex);
const [, ...derivedLabels] = React.useMemo(() => {
try {
return JSON.parse(colLeafNode === null || colLeafNode === void 0 ? void 0 : colLeafNode.value);
}
catch (_a) {
return [];
}
}, [colLeafNode === null || colLeafNode === void 0 ? void 0 : colLeafNode.value]);
const { placeholder, style } = spreadsheet.options;
const valuesCfg = (_a = style === null || style === void 0 ? void 0 : style.dataCell) === null || _a === void 0 ? void 0 : _a.valuesCfg;
const [value, ...derivedValues] = first(metaFieldValue === null || metaFieldValue === void 0 ? void 0 : metaFieldValue.values) || [
metaFieldValue,
];
const [originalValue, ...derivedOriginalValues] = first(get(metaFieldValue, valuesCfg === null || valuesCfg === void 0 ? void 0 : valuesCfg.originalValueField)) || [value];
const emptyPlaceholder = getEmptyPlaceholder(meta, placeholder);
const showOriginalValue = (valuesCfg === null || valuesCfg === void 0 ? void 0 : valuesCfg.showOriginalValue) || showOriginalValueFromTooltip;
return (React.createElement("div", { className: cls(tooltipCls(), tooltipCls('data')) },
React.createElement("div", { className: tooltipCls('header') },
React.createElement("span", { className: 'header-label' }, rowName),
React.createElement("span", null, (_b = value) !== null && _b !== void 0 ? _b : emptyPlaceholder)),
showOriginalValue && (React.createElement("div", { className: tooltipCls('original-value') }, isNil(originalValue)
? emptyPlaceholder
: originalValue)),
!isEmpty(derivedValues) && (React.createElement(React.Fragment, null,
React.createElement("div", { className: tooltipCls('divider') }),
React.createElement("ul", { className: tooltipCls('derived-values') }, derivedValues.map((derivedValue, i) => {
var _a;
const isUnchanged = isUnchangedValue(derivedValue, value);
const isUp = !isUnchanged && isUpDataValue(derivedValue);
const isDown = !isUnchanged && !isUp;
const originalDerivedValue = derivedOriginalValues[i];
return (React.createElement("li", { className: "derived-value-item", key: i },
React.createElement("span", { className: "derived-value-label" }, derivedLabels[i]),
React.createElement("span", { className: cls('derived-value-group', {
'derived-value-trend-up': isUp,
'derived-value-trend-down': isDown,
}) },
!isUnchanged && (React.createElement("span", { className: "derived-value-trend-icon" })), (_a = renderDerivedValue === null || renderDerivedValue === void 0 ? void 0 : renderDerivedValue(derivedValue, originalDerivedValue, cell)) !== null && _a !== void 0 ? _a : (React.createElement("span", { className: "derived-value-content" }, derivedValue !== null && derivedValue !== void 0 ? derivedValue : emptyPlaceholder)))));
})))),
rowDescription && (React.createElement("div", { className: tooltipCls('description') },
React.createElement("span", { className: tooltipCls('description-label') }, i18n('说明')),
React.createElement("span", { className: tooltipCls('description-text') }, rowDescription)))));
});
StrategySheetDataCellTooltip.displayName = 'StrategySheetDataCellTooltip';
//# sourceMappingURL=data-cell-tooltip.js.map