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, useRef, useState } from 'react';
import { action } from 'mobx';
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 invalidComponents = 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 paneRef = useRef(null);
  var handleValidationReport = useCallback(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 = useCallback(function (_ref) {
    var valid = _ref.valid,
        dataSet = _ref.dataSet;
    handleValidationReport({
      showInvalid: !valid,
      component: dataSet
    });
  }, [handleValidationReport]);
  var handleReset = 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 = 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
      });
    }
  }, []);
  useEffect(function () {
    return function () {
      return invalidComponents.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).addEventListener(DataSetEvents.remove, handleRemove).addEventListener(DataSetEvents.reset, handleReset);
      });
      return function () {
        return dsList.forEach(function (ds) {
          return ds.removeEventListener(DataSetEvents.validate, handleValidate).removeEventListener(DataSetEvents.validateSelf, handleValidate).removeEventListener(DataSetEvents.remove, handleRemove).removeEventListener(DataSetEvents.reset, handleReset);
        });
      };
    }
  }, [active, disabled, handleValidate, handleReset, handleRemove, length].concat(_toConsumableArray(dsList)));
  var childrenWithProvider = length ? children : /*#__PURE__*/React.createElement(ConfigProvider, {
    onComponentValidationReport: handleValidationReport
  }, children);

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

  return /*#__PURE__*/React.createElement("div", _extends({
    style: style,
    role: "tabpanel",
    "aria-hidden": active ? 'false' : 'true',
    className: cls,
    tabIndex: -1,
    "data-node-key": eventKey,
    ref: paneRef,
    onFocus: handleFocus
  }, 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,
  hidden: false
};
export default MemoTabPane;
//# sourceMappingURL=TabPane.js.map