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

A themable React component library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _map from "lodash/map";
import _invoke from "lodash/invoke";
import * as customPropTypes from '@fluentui/react-proptypes';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { childrenExist, commonPropTypes, rtlTextContainer, createShorthandFactory } from '../../utils';
import { FormField } from './FormField';
import { useTelemetry, getElementType, useUnhandledProps, useStyles, useFluentContext, useAccessibility } from '@fluentui/react-bindings';
export var formClassName = 'ui-form';
/**
 * A Form is used to collect, oprionally validate, and submit the user input, in a structured way.
 */
export var Form = /*#__PURE__*/function () {
  var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
    var context = useFluentContext();
    var _useTelemetry = useTelemetry(Form.displayName, context.telemetry),
      setStart = _useTelemetry.setStart,
      setEnd = _useTelemetry.setEnd;
    setStart();
    var className = props.className,
      design = props.design,
      styles = props.styles,
      variables = props.variables,
      action = props.action,
      children = props.children,
      accessibility = props.accessibility;
    var ElementType = getElementType(props);
    var unhandledProps = useUnhandledProps(Form.handledProps, props);
    var _useStyles = useStyles(Form.displayName, {
        className: formClassName,
        mapPropsToInlineStyles: function mapPropsToInlineStyles() {
          return {
            className: className,
            design: design,
            styles: styles,
            variables: variables
          };
        },
        rtl: context.rtl
      }),
      classes = _useStyles.classes;
    var getA11yProps = useAccessibility(accessibility, {
      debugName: Form.displayName,
      rtl: context.rtl
    });
    var handleSubmit = function handleSubmit(e) {
      var action = props.action;

      // Heads up! Third party libs can pass own data as first argument, we need to check that it has preventDefault()
      // method.
      if (!action) _invoke(e, 'preventDefault');
      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        args[_key - 1] = arguments[_key];
      }
      _invoke.apply(void 0, [props, 'onSubmit', e, props].concat(args));
    };
    var renderFields = function renderFields() {
      var fields = props.fields;
      return _map(fields, function (field) {
        return FormField.create(field);
      });
    };
    var element = /*#__PURE__*/React.createElement(ElementType, _extends({}, getA11yProps('root', Object.assign({
      className: classes.root,
      ref: ref
    }, rtlTextContainer.getAttributes({
      forElements: [children]
    }), unhandledProps)), {
      action: action,
      onSubmit: handleSubmit
    }), childrenExist(children) ? children : renderFields());
    setEnd();
    return element;
  });
  Form.displayName = 'Form';
  Form.propTypes = Object.assign({}, commonPropTypes.createCommon({
    content: false
  }), {
    action: PropTypes.string,
    fields: customPropTypes.collectionShorthand,
    onSubmit: PropTypes.func
  });
  Form.defaultProps = {
    as: 'form'
  };
  Form.handledProps = Object.keys(Form.propTypes);
  Form.create = createShorthandFactory({
    Component: Form
  });
  return Form;
}();
//# sourceMappingURL=Form.js.map