@fluentui/react-northstar/dist/commonjs/components/Form/utils/formFieldBase.js

A themable React component library.

"use strict";

exports.__esModule = true;
exports.formFieldBaseClassName = exports._FormFieldBase = void 0;
var _accessibility = require("@fluentui/accessibility");
var customPropTypes = _interopRequireWildcard(require("@fluentui/react-proptypes"));
var PropTypes = _interopRequireWildcard(require("prop-types"));
var React = _interopRequireWildcard(require("react"));
var _utils = require("../../../utils");
var _Box = require("../../Box/Box");
var _reactBindings = require("@fluentui/react-bindings");
var _FormLabel = require("../FormLabel");
var _FormMessage = require("../FormMessage");
var _formFieldBaseContext = require("./formFieldBaseContext");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var formFieldBaseClassName = 'ui-form__field__base';
exports.formFieldBaseClassName = formFieldBaseClassName;
/**
 * A FormFiedBase represents a Form element containing a label and an input.
 */
var _FormFieldBase = (0, _reactBindings.compose)(function (props, ref, composeOptions) {
  var context = (0, _reactBindings.useFluentContext)();
  var _useTelemetry = (0, _reactBindings.useTelemetry)(composeOptions.displayName, context.telemetry),
    setStart = _useTelemetry.setStart,
    setEnd = _useTelemetry.setEnd;
  setStart();
  var message = props.message,
    inline = props.inline,
    errorMessage = props.errorMessage,
    control = props.control,
    label = props.label,
    className = props.className,
    design = props.design,
    styles = props.styles,
    variables = props.variables;
  var slotProps = composeOptions.resolveSlotProps(props);
  var ElementType = (0, _reactBindings.getElementType)(props);
  var unhandledProps = (0, _reactBindings.useUnhandledProps)(composeOptions.handledProps, props);
  var messageId = React.useRef();
  messageId.current = (0, _utils.getOrGenerateIdFromShorthand)('error-message-', errorMessage || message, messageId.current);
  var labelId = React.useRef();
  labelId.current = (0, _utils.getOrGenerateIdFromShorthand)('form-label-', label, labelId.current);
  var _useStyles = (0, _reactBindings.useStyles)(_FormFieldBase.displayName, {
      className: composeOptions.className,
      composeOptions: composeOptions,
      mapPropsToInlineStyles: function mapPropsToInlineStyles() {
        return {
          className: className,
          design: design,
          styles: styles,
          variables: variables
        };
      },
      rtl: context.rtl,
      unstable_props: props
    }),
    classes = _useStyles.classes;
  var getA11yProps = (0, _reactBindings.useAccessibility)(props.accessibility, {
    debugName: composeOptions.displayName,
    mapPropsToBehavior: function mapPropsToBehavior() {
      return {
        hasErrorMessage: !!errorMessage,
        messageId: messageId.current,
        labelId: labelId.current
      };
    },
    rtl: context.rtl
  });
  var childProps = React.useMemo(function () {
    return {
      labelId: labelId.current
    };
  },
  // TODO: create hooks for id to avoid disbaling esling for accessing the value of refs
  // eslint-disable-next-line
  [labelId.current]);
  var element = /*#__PURE__*/React.createElement(ElementType, getA11yProps('root', {
    className: classes.root
  }), (0, _utils.createShorthand)(composeOptions.slots.label, label, {
    defaultProps: function defaultProps() {
      return getA11yProps('label', Object.assign({
        id: labelId.current,
        inline: inline
      }, slotProps.label));
    }
  }), /*#__PURE__*/React.createElement(_formFieldBaseContext.FormFieldBaseProvider, {
    value: childProps
  }, (0, _utils.createShorthand)(composeOptions.slots.control, control || {}, {
    defaultProps: function defaultProps() {
      return getA11yProps('control', Object.assign({
        error: !!errorMessage || null,
        ref: ref
      }, unhandledProps, slotProps.control));
    }
  })), (0, _utils.createShorthand)(composeOptions.slots.message, errorMessage || message, {
    defaultProps: function defaultProps() {
      return getA11yProps('message', Object.assign({
        id: messageId.current
      }, slotProps.message));
    }
  }));
  setEnd();
  return element;
}, {
  className: formFieldBaseClassName,
  displayName: 'FormFieldBase',
  slots: {
    label: _FormLabel.FormLabel,
    message: _FormMessage.FormMessage,
    control: _Box.Box
  },
  handledProps: ['as', 'accessibility', 'className', 'variables', 'design', 'styles', 'inline', 'errorMessage', 'message'],
  shorthandConfig: {
    mappedProp: 'control'
  }
});
exports._FormFieldBase = _FormFieldBase;
_FormFieldBase.propTypes = Object.assign({}, _utils.commonPropTypes.createCommon({
  children: false
}), {
  inline: PropTypes.bool,
  message: customPropTypes.itemShorthand,
  errorMessage: customPropTypes.itemShorthand
});
_FormFieldBase.defaultProps = {
  accessibility: _accessibility.formFieldBehavior
};
//# sourceMappingURL=formFieldBase.js.map