@atlaskit/form

Version:
A form allows people to input information.
108 lines (107 loc) • 4.91 kB
JavaScript
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MessageWrapper = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _exitingPersistence = _interopRequireDefault(require("@atlaskit/motion/exiting-persistence"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _formSubmitContext = require("./form-submit-context");
var _messageContext = require("./message-context");
var _messageGroup = _interopRequireDefault(require("./message-group"));
var _messageMotionCapability = _interopRequireDefault(require("./message-motion-capability"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
 * __Message wrapper __
 *
 * A message wrapper is used to allow assistive technologies, like screen readers, to announce error or
 * valid messages. This must be loaded into the DOM before the
 * ErrorMessage, ValidMessage is loaded. Otherwise, assistive technologies
 * may not render the message.
 *
 */
var MessageWrapper = exports.MessageWrapper = function MessageWrapper(_ref) {
  var children = _ref.children;
  var contextValue = {
    isWrapper: true,
    hasMotionBoundary: false,
    transition: 'row'
  };
  var shouldProvideMotionBoundary = (0, _fg.fg)('platform-dst-motion-uplift-input') && _react.Children.toArray(children).every(_messageMotionCapability.default.isCapable);
  return /*#__PURE__*/_react.default.createElement(_messageContext.MessageWrapperContext.Provider, {
    value: contextValue
  }, /*#__PURE__*/_react.default.createElement("div", {
    "aria-live": "polite",
    "data-testid": "message-wrapper"
  }, shouldProvideMotionBoundary ? /*#__PURE__*/_react.default.createElement(MotionMessages, null, children) : children));
};
var getChildKeys = function getChildKeys(children) {
  return _react.Children.toArray(children).filter(_react.isValidElement).map(function (child) {
    return child.key;
  }).filter(function (key) {
    return key !== null;
  });
};
var getTransition = function getTransition(previousKeys, currentKeys) {
  var previous = new Set(previousKeys);
  var current = new Set(currentKeys);
  var removedCount = previousKeys.filter(function (key) {
    return !current.has(key);
  }).length;
  var addedCount = currentKeys.filter(function (key) {
    return !previous.has(key);
  }).length;
  if (removedCount > 0 && addedCount > 0) {
    return 'instant';
  }
  if (previousKeys.length === 0 && addedCount > 1) {
    return 'groupEnter';
  }
  if (currentKeys.length === 0 && removedCount > 1) {
    return 'groupExit';
  }
  return 'row';
};
var MotionMessages = function MotionMessages(_ref2) {
  var children = _ref2.children;
  var currentKeys = getChildKeys(children);
  var submitCount = (0, _react.useContext)(_formSubmitContext.FormSubmitContext);
  var _useState = (0, _react.useState)(function () {
      return {
        keys: currentKeys,
        mode: 'row',
        submitCount: submitCount
      };
    }),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    transition = _useState2[0],
    setTransition = _useState2[1];
  var hasKeyChange = currentKeys.length !== transition.keys.length || currentKeys.some(function (key, index) {
    return key !== transition.keys[index];
  });
  var isSubmitUpdate = submitCount !== transition.submitCount;
  if (hasKeyChange || isSubmitUpdate) {
    setTransition({
      keys: currentKeys,
      mode: !hasKeyChange ? transition.mode : isSubmitUpdate ? 'instant' : getTransition(transition.keys, currentKeys),
      submitCount: submitCount
    });
  }
  var motionContextValue = (0, _react.useMemo)(function () {
    return {
      isWrapper: true,
      hasMotionBoundary: true,
      transition: transition.mode
    };
  }, [transition.mode]);
  return /*#__PURE__*/_react.default.createElement(_messageContext.MessageWrapperContext.Provider, {
    value: motionContextValue
  }, /*#__PURE__*/_react.default.createElement(_messageGroup.default, {
    transition: transition.mode
  }, /*#__PURE__*/_react.default.createElement(_exitingPersistence.default, {
    appear: true
  }, children)));
};