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

A themable React component library.

import { formFieldBehavior } from '@fluentui/accessibility';
import * as customPropTypes from '@fluentui/react-proptypes';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { commonPropTypes, getOrGenerateIdFromShorthand, createShorthand } from '../../../utils';
import { Box } from '../../Box/Box';
import { getElementType, useUnhandledProps, useTelemetry, useAccessibility, useFluentContext, compose, useStyles } from '@fluentui/react-bindings';
import { FormLabel } from '../FormLabel';
import { FormMessage } from '../FormMessage';
import { FormFieldBaseProvider } from './formFieldBaseContext';
export var formFieldBaseClassName = 'ui-form__field__base';
/**
 * A FormFiedBase represents a Form element containing a label and an input.
 */
export var _FormFieldBase = /*#__PURE__*/function () {
  var _FormFieldBase = compose(function (props, ref, composeOptions) {
    var context = useFluentContext();
    var _useTelemetry = 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 = getElementType(props);
    var unhandledProps = useUnhandledProps(composeOptions.handledProps, props);
    var messageId = React.useRef();
    messageId.current = getOrGenerateIdFromShorthand('error-message-', errorMessage || message, messageId.current);
    var labelId = React.useRef();
    labelId.current = getOrGenerateIdFromShorthand('form-label-', label, labelId.current);
    var _useStyles = 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 = 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
    }), createShorthand(composeOptions.slots.label, label, {
      defaultProps: function defaultProps() {
        return getA11yProps('label', Object.assign({
          id: labelId.current,
          inline: inline
        }, slotProps.label));
      }
    }), /*#__PURE__*/React.createElement(FormFieldBaseProvider, {
      value: childProps
    }, createShorthand(composeOptions.slots.control, control || {}, {
      defaultProps: function defaultProps() {
        return getA11yProps('control', Object.assign({
          error: !!errorMessage || null,
          ref: ref
        }, unhandledProps, slotProps.control));
      }
    })), 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,
      message: FormMessage,
      control: Box
    },
    handledProps: ['as', 'accessibility', 'className', 'variables', 'design', 'styles', 'inline', 'errorMessage', 'message'],
    shorthandConfig: {
      mappedProp: 'control'
    }
  });
  _FormFieldBase.propTypes = Object.assign({}, commonPropTypes.createCommon({
    children: false
  }), {
    inline: PropTypes.bool,
    message: customPropTypes.itemShorthand,
    errorMessage: customPropTypes.itemShorthand
  });
  _FormFieldBase.defaultProps = {
    accessibility: formFieldBehavior
  };
  return _FormFieldBase;
}();
//# sourceMappingURL=formFieldBase.js.map