choerodon-ui/es/tabs/TabPane.js

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

import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "destroyInactiveTabPane", "active", "forceRender", "rootPrefixCls", "style", "children", "placeholder", "disabled", "dataSet", "eventKey"];
import React, { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
import classnames from 'classnames';
import { DataSetEvents } from 'choerodon-ui/dataset/data-set/enum';
import ConfigProvider from '../config-provider';
import { getDataAttr } from './utils';
import TabsContext from './TabsContext';

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 = _objectWithoutProperties(props, _excluded);

  var _useContext = useContext(TabsContext),
      validationMap = _useContext.validationMap;

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

  var _useState = useState(active),
      _useState2 = _slicedToArray(_useState, 2),
      rendered = _useState2[0],
      setRendered = _useState2[1];

  var prefixCls = "".concat(rootPrefixCls, "-tabpane");
  var cls = classnames(prefixCls, active ? "".concat(prefixCls, "-active") : "".concat(prefixCls, "-inactive"), className);
  var handleValidate = useCallback(function (_ref) {
    var dataSet = _ref.dataSet;

    if (!disabled && eventKey) {
      var errors = dataSet.getAllValidationErrors();

      if (errors.dataSet.length || errors.records.length) {
        invalidDataSets.add(dataSet);
      } else {
        invalidDataSets["delete"](dataSet);
      }

      validationMap.set(eventKey, invalidDataSets.size === 0);
    }
  }, [eventKey, disabled, invalidDataSets]);
  useEffect(function () {
    return function () {
      return invalidDataSets.clear();
    };
  }, []);
  useEffect(function () {
    if (!destroyInactiveTabPane && active) {
      setRendered(true);
    }
  }, [destroyInactiveTabPane, active]);
  useEffect(function () {
    if (length && !disabled) {
      dsList.forEach(function (ds) {
        return ds.addEventListener(DataSetEvents.validate, handleValidate).addEventListener(DataSetEvents.validateSelf, handleValidate);
      });
      return function () {
        return dsList.forEach(function (ds) {
          return ds.removeEventListener(DataSetEvents.validate, handleValidate).removeEventListener(DataSetEvents.validateSelf, handleValidate);
        });
      };
    }
  }, [active, disabled, handleValidate, length].concat(_toConsumableArray(dsList)));
  var childrenWithProvider = length ? children : /*#__PURE__*/React.createElement(ConfigProvider, {
    onValidate: handleValidate,
    onValidateSelf: handleValidate
  }, children);
  return /*#__PURE__*/React.createElement("div", _extends({
    style: style,
    role: "tabpanel",
    "aria-hidden": active ? 'false' : 'true',
    className: cls
  }, getDataAttr(restProps)), forceRender || (destroyInactiveTabPane ? active : rendered) ? childrenWithProvider : placeholder);
};

TabPane.displayName = 'TabPane';
var MemoTabPane = /*#__PURE__*/memo(TabPane, function (props, nextProps) {
  return !nextProps.forceRender && !props.active && !nextProps.active;
});
MemoTabPane.defaultProps = {
  overflowCount: 99,
  showCount: true
};
export default MemoTabPane;
//# sourceMappingURL=TabPane.js.map