choerodon-ui/lib/tabs/TabPane.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireWildcard(require("react"));

var _mobx = require("mobx");

var _classnames = _interopRequireDefault(require("classnames"));

var _enum = require("choerodon-ui/dataset/data-set/enum");

var _configProvider = _interopRequireDefault(require("../config-provider"));

var _utils = require("./utils");

var _TabsContext = _interopRequireDefault(require("./TabsContext"));

var _excluded = ["className", "destroyInactiveTabPane", "active", "forceRender", "rootPrefixCls", "style", "children", "placeholder", "disabled", "dataSet", "eventKey"];

var TabPane = function TabPane(props) {
  var className = props.className,
      destroyInactiveTabPane = props.destroyInactiveTabPane,
      active = props.active,
      forceRender = props.forceRender,
      rootPrefixCls = props.rootPrefixCls,
      style = props.style,
      children = props.children,
      placeholder = props.placeholder,
      disabled = props.disabled,
      dataSet = props.dataSet,
      eventKey = props.eventKey,
      restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);

  var _useContext = (0, _react.useContext)(_TabsContext["default"]),
      validationMap = _useContext.validationMap;

  var dsList = dataSet ? [].concat(dataSet) : [];
  var invalidComponents = (0, _react.useMemo)(function () {
    return new Set();
  }, []);
  var length = dsList.length;

  var _useState = (0, _react.useState)(active),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      rendered = _useState2[0],
      setRendered = _useState2[1];

  var prefixCls = "".concat(rootPrefixCls, "-tabpane");
  var cls = (0, _classnames["default"])(prefixCls, active ? "".concat(prefixCls, "-active") : "".concat(prefixCls, "-inactive"), className);
  var paneRef = (0, _react.useRef)(null);
  var handleValidationReport = (0, _react.useCallback)((0, _mobx.action)(function (validationProps) {
    // why validationProps is undefined?
    if (validationProps) {
      var showInvalid = validationProps.showInvalid,
          component = validationProps.component;

      if (!disabled && eventKey) {
        if (showInvalid) {
          invalidComponents.add(component);
        } else {
          invalidComponents["delete"](component);
        }

        validationMap.set(eventKey, invalidComponents.size === 0);
      }
    }
  }), [eventKey, disabled, invalidComponents]);
  var handleValidate = (0, _react.useCallback)(function (_ref) {
    var valid = _ref.valid,
        dataSet = _ref.dataSet;
    handleValidationReport({
      showInvalid: !valid,
      component: dataSet
    });
  }, [handleValidationReport]);
  var handleReset = (0, _react.useCallback)(function (_ref2) {
    var dataSet = _ref2.dataSet,
        record = _ref2.record;

    if (record) {
      var errors = dataSet.getAllValidationErrors();
      handleValidationReport({
        showInvalid: errors.dataSet.length > 0 || errors.records.length > 0,
        component: dataSet
      });
    } else {
      handleValidationReport({
        showInvalid: false,
        component: dataSet
      });
    }
  }, []);
  var handleRemove = (0, _react.useCallback)(function (_ref3) {
    var dataSet = _ref3.dataSet,
        records = _ref3.records;

    if (records) {
      var errors = dataSet.getAllValidationErrors();
      handleValidationReport({
        showInvalid: errors.dataSet.length > 0 || errors.records.length > 0,
        component: dataSet
      });
    }
  }, []);
  (0, _react.useEffect)(function () {
    return function () {
      return invalidComponents.clear();
    };
  }, []);
  (0, _react.useEffect)(function () {
    if (!destroyInactiveTabPane && active) {
      setRendered(true);
    }
  }, [destroyInactiveTabPane, active]);
  (0, _react.useEffect)(function () {
    if (length && !disabled) {
      dsList.forEach(function (ds) {
        return ds.addEventListener(_enum.DataSetEvents.validate, handleValidate).addEventListener(_enum.DataSetEvents.validateSelf, handleValidate).addEventListener(_enum.DataSetEvents.remove, handleRemove).addEventListener(_enum.DataSetEvents.reset, handleReset);
      });
      return function () {
        return dsList.forEach(function (ds) {
          return ds.removeEventListener(_enum.DataSetEvents.validate, handleValidate).removeEventListener(_enum.DataSetEvents.validateSelf, handleValidate).removeEventListener(_enum.DataSetEvents.remove, handleRemove).removeEventListener(_enum.DataSetEvents.reset, handleReset);
        });
      };
    }
  }, [active, disabled, handleValidate, handleReset, handleRemove, length].concat((0, _toConsumableArray2["default"])(dsList)));
  var childrenWithProvider = length ? children : /*#__PURE__*/_react["default"].createElement(_configProvider["default"], {
    onComponentValidationReport: handleValidationReport
  }, children);

  var handleFocus = function handleFocus() {
    if (!active && paneRef.current) {
      paneRef.current.focus();
    }
  };

  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
    style: style,
    role: "tabpanel",
    "aria-hidden": active ? 'false' : 'true',
    className: cls,
    tabIndex: -1,
    "data-node-key": eventKey,
    ref: paneRef,
    onFocus: handleFocus
  }, (0, _utils.getDataAttr)(restProps)), forceRender || (destroyInactiveTabPane ? active : rendered) ? childrenWithProvider : placeholder);
};

TabPane.displayName = 'TabPane';
var MemoTabPane = /*#__PURE__*/(0, _react.memo)(TabPane, function (props, nextProps) {
  return !nextProps.forceRender && !props.active && !nextProps.active;
});
MemoTabPane.defaultProps = {
  overflowCount: 99,
  showCount: true,
  hidden: false
};
var _default = MemoTabPane;
exports["default"] = _default;
//# sourceMappingURL=TabPane.js.map