@antv/f2/es/components/tooltip/withTooltip.js

import { __assign, __extends } from "tslib";
import { jsx, Component, isEqual } from '@antv/f-engine';
import { isArray, isFunction, find } from '@antv/util';
export default (function (View) {
  return /** @class */function (_super) {
    __extends(Tooltip, _super);
    function Tooltip(props) {
      var _this = _super.call(this, props) || this;
      _this._triggerOn = function (ev) {
        var x = ev.x,
          y = ev.y;
        _this.show({
          x: x,
          y: y
        }, ev);
      };
      _this._triggerOff = function () {
        var _a = _this.props.alwaysShow,
          alwaysShow = _a === void 0 ? false : _a;
        if (!alwaysShow) {
          _this.hide();
        }
      };
      _this.state = {
        records: null
      };
      return _this;
    }
    Tooltip.prototype.updateCoord = function () {
      var _a = this,
        props = _a.props,
        context = _a.context;
      var _b = props.padding,
        padding = _b === void 0 ? '10px' : _b,
        chart = props.chart;
      chart.updateCoordFor(this, {
        position: 'top',
        width: 0,
        height: context.px2hd(padding)
      });
    };
    Tooltip.prototype.willMount = function () {
      this.updateCoord();
    };
    Tooltip.prototype.didMount = function () {
      this._initShow();
      this._initEvent();
    };
    Tooltip.prototype._initEvent = function () {
      var _a = this.props,
        chart = _a.chart,
        _b = _a.triggerOn,
        triggerOn = _b === void 0 ? 'press' : _b,
        _c = _a.triggerOff,
        triggerOff = _c === void 0 ? 'pressend' : _c;
      chart.on(triggerOn, this._triggerOn);
      chart.on(triggerOff, this._triggerOff);
    };
    Tooltip.prototype.willReceiveProps = function (nextProps) {
      var nextDefaultItem = nextProps.defaultItem,
        nextCoord = nextProps.coord;
      var _a = this.props,
        lastDefaultItem = _a.defaultItem,
        lastCoord = _a.coord;
      // 默认元素或坐标有变动，均需重新渲染
      if (!isEqual(nextDefaultItem, lastDefaultItem) || !isEqual(nextCoord, lastCoord)) {
        this._showByData(nextDefaultItem);
      }
    };
    Tooltip.prototype._initShow = function () {
      var props = this.props;
      var defaultItem = props.defaultItem;
      this._showByData(defaultItem);
    };
    Tooltip.prototype._showByData = function (dataItem) {
      var _this = this;
      if (!dataItem) return;
      var props = this.props;
      var chart = props.chart;
      // 因为 tooltip 有可能在 geometry 之前，所以需要等 geometry render 完后再执行
      setTimeout(function () {
        var snapRecords = chart.getRecords(dataItem, 'xfield');
        _this.showSnapRecords(snapRecords);
      }, 0);
    };
    Tooltip.prototype.show = function (point, _ev) {
      var props = this.props;
      var chart = props.chart;
      var snapRecords = chart.getSnapRecords(point, true); // 超出边界会自动调整
      if (!snapRecords || !snapRecords.length) return;
      this.showSnapRecords(snapRecords);
    };
    Tooltip.prototype.showSnapRecords = function (snapRecords) {
      var _a = this.props,
        chart = _a.chart,
        onChange = _a.onChange;
      var legendItems = chart.getLegendItems();
      var _b = snapRecords[0],
        xField = _b.xField,
        yField = _b.yField;
      var xScale = chart.getScale(xField);
      var yScale = chart.getScale(yField);
      var records = snapRecords.map(function (record) {
        var origin = record.origin,
          xField = record.xField,
          yField = record.yField;
        var value = isArray(origin[yField]) ? origin[yField].map(function (v) {
          return yScale.getText(v);
        }) : yScale.getText(origin[yField]);
        // 默认取 alias 的配置
        var name = yScale.alias;
        if (!name) {
          name = xScale.getText(origin[xField]);
          if (legendItems && legendItems.length) {
            var item = find(legendItems, function (item) {
              var field = item.field,
                tickValue = item.tickValue;
              return origin[field] === tickValue;
            });
            if (item && item.name) {
              name = item.name;
            }
          }
        }
        return __assign(__assign({}, record), {
          name: name,
          value: "".concat(value)
        });
      });
      if (!isArray(records) || !records.length) {
        return;
      }
      this.setState({
        records: records
      });
      if (isFunction(onChange)) {
        onChange(records);
      }
    };
    Tooltip.prototype.hide = function () {
      this.setState({
        records: null
      });
    };
    Tooltip.prototype.render = function () {
      var _a = this,
        props = _a.props,
        state = _a.state;
      var visible = props.visible;
      if (visible === false) {
        return null;
      }
      var records = state.records;
      return records && records.length && jsx(View, __assign({}, props, {
        records: records
      }));
    };
    return Tooltip;
  }(Component);
});