@fluentui/react-northstar/dist/es/components/Form/FormField.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 { childrenExist, createShorthandFactory, commonPropTypes, getOrGenerateIdFromShorthand } from '../../utils';
import { Text } from '../Text/Text';
import { Input } from '../Input/Input';
import { Box } from '../Box/Box';
import { getElementType, useUnhandledProps, useFluentContext, useTelemetry, useStyles, useAccessibility } from '@fluentui/react-bindings';
export var formFieldClassName = 'ui-form__field';
export var formFieldMessageClassName = 'ui-form__field__message';
/**
 * A FormField represents a Form element containing a label and an input.
 */
export var FormField = /*#__PURE__*/function () {
  var FormField = /*#__PURE__*/React.forwardRef(function (props, ref) {
    var context = useFluentContext();
    var _useTelemetry = useTelemetry(FormField.displayName, context.telemetry),
      setStart = _useTelemetry.setStart,
      setEnd = _useTelemetry.setEnd;
    setStart();
    var children = props.children,
      control = props.control,
      id = props.id,
      label = props.label,
      message = props.message,
      name = props.name,
      required = props.required,
      type = props.type,
      className = props.className,
      design = props.design,
      styles = props.styles,
      variables = props.variables,
      inline = props.inline,
      errorMessage = props.errorMessage;
    var ElementType = getElementType(props);
    var unhandledProps = useUnhandledProps(FormField.handledProps, props);
    var messageId = React.useRef();
    messageId.current = getOrGenerateIdFromShorthand('error-message-', message || errorMessage, messageId.current);
    var labelId = React.useRef();
    labelId.current = getOrGenerateIdFromShorthand('form-label-', id, labelId.current);
    var getA11yProps = useAccessibility(props.accessibility, {
      debugName: FormField.displayName,
      mapPropsToBehavior: function mapPropsToBehavior() {
        return {
          hasErrorMessage: !!errorMessage,
          messageId: messageId.current,
          labelId: labelId.current
        };
      },
      rtl: context.rtl
    });
    var _useStyles = useStyles(FormField.displayName, {
        className: formFieldClassName,
        mapPropsToStyles: function mapPropsToStyles() {
          return {
            type: type,
            inline: inline,
            required: required,
            hasErrorMessage: !!errorMessage
          };
        },
        mapPropsToInlineStyles: function mapPropsToInlineStyles() {
          return {
            className: className,
            design: design,
            styles: styles,
            variables: variables
          };
        },
        rtl: context.rtl
      }),
      classes = _useStyles.classes,
      resolvedStyles = _useStyles.styles;
    var labelElement = Text.create(label, {
      defaultProps: function defaultProps() {
        return getA11yProps('label', {
          as: 'label',
          htmlFor: id,
          id: labelId.current,
          styles: resolvedStyles.label
        });
      }
    });
    var messageElement = Text.create(errorMessage || message, {
      defaultProps: function defaultProps() {
        return getA11yProps('message', {
          className: formFieldMessageClassName,
          id: messageId.current,
          styles: resolvedStyles.message
        });
      }
    });
    var controlElement = Box.create(control || {}, {
      defaultProps: function defaultProps() {
        return getA11yProps('control', {
          required: required,
          name: name,
          id: id,
          type: type,
          error: !!errorMessage || null,
          styles: resolvedStyles.control
        });
      }
    });
    var shouldControlAppearFirst = function shouldControlAppearFirst() {
      return type && (type === 'checkbox' || type === 'radio');
    };
    var content = /*#__PURE__*/React.createElement(React.Fragment, null, shouldControlAppearFirst() && controlElement, labelElement, !shouldControlAppearFirst() && controlElement, messageElement);
    var element = /*#__PURE__*/React.createElement(ElementType, getA11yProps('root', Object.assign({
      className: classes.root,
      ref: ref
    }, unhandledProps)), childrenExist(children) ? children : content);
    setEnd();
    return element;
  });
  FormField.displayName = 'FormField';
  FormField.propTypes = Object.assign({}, commonPropTypes.createCommon({
    content: false
  }), {
    control: customPropTypes.shorthandAllowingChildren,
    id: PropTypes.string,
    inline: PropTypes.bool,
    label: customPropTypes.itemShorthand,
    message: customPropTypes.itemShorthand,
    name: PropTypes.string,
    required: PropTypes.bool,
    type: PropTypes.string,
    errorMessage: customPropTypes.shorthandAllowingChildren
  });
  FormField.handledProps = Object.keys(FormField.propTypes);
  FormField.defaultProps = {
    accessibility: formFieldBehavior,
    control: {
      as: Input
    }
  };
  FormField.create = createShorthandFactory({
    Component: FormField,
    mappedProp: 'label'
  });
  return FormField;
}();
//# sourceMappingURL=FormField.js.map