@apptane/react-ui-form/dist/Form.js

Form layout component in Apptane React UI framework

import { StyleMargin } from "@apptane/react-ui-core";
import { FieldLabel } from "@apptane/react-ui-input";
import { useTheme } from "@apptane/react-ui-theme";
import { css, jsx } from "@emotion/react";
import { FormPropTypes } from "./Form.types.js";
import { FormContext } from "./FormContext.js";
import FormField from "./FormField.js";
import FormGroup from "./FormGroup.js";
import { jsx as _jsx } from "@emotion/react/jsx-runtime";

const StyleForm = spacing => /*#__PURE__*/css("box-sizing:border-box;margin:0;padding:0;>*+*{margin-top:", spacing, "px;}" + (process.env.NODE_ENV === "production" ? "" : ";label:StyleForm;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9Gb3JtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTMEMiLCJmaWxlIjoiLi4vc3JjL0Zvcm0udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgU3R5bGVNYXJnaW4gfSBmcm9tIFwiQGFwcHRhbmUvcmVhY3QtdWktY29yZVwiO1xuaW1wb3J0IHsgRmllbGRMYWJlbCB9IGZyb20gXCJAYXBwdGFuZS9yZWFjdC11aS1pbnB1dFwiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiQGFwcHRhbmUvcmVhY3QtdWktdGhlbWVcIjtcbmltcG9ydCB7IGNzcywganN4IH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgeyBGb3JtUHJvcHMsIEZvcm1Qcm9wVHlwZXMgfSBmcm9tIFwiLi9Gb3JtLnR5cGVzLmpzXCI7XG5pbXBvcnQgeyBGb3JtQ29udGV4dCB9IGZyb20gXCIuL0Zvcm1Db250ZXh0LmpzXCI7XG5pbXBvcnQgRm9ybUZpZWxkIGZyb20gXCIuL0Zvcm1GaWVsZC5qc1wiO1xuaW1wb3J0IEZvcm1Hcm91cCBmcm9tIFwiLi9Gb3JtR3JvdXAuanNcIjtcblxuY29uc3QgU3R5bGVGb3JtID0gKHNwYWNpbmc6IG51bWJlcikgPT4gY3NzYFxuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBtYXJnaW46IDA7XG4gIHBhZGRpbmc6IDA7XG4gID4gKiArICoge1xuICAgIG1hcmdpbi10b3A6ICR7c3BhY2luZ31weDtcbiAgfVxuYDtcblxuLyoqXG4gKiBgRm9ybWAgbGF5b3V0LlxuICovXG5mdW5jdGlvbiBGb3JtKHtcbiAgY2hpbGRyZW4sXG4gIHdpZHRoLFxuICBzcGFjaW5nLFxuICBkaXNhYmxlZCxcbiAgc3VibWl0LFxuICBtYXJnaW4sXG4gIG1hcmdpblRvcCxcbiAgbWFyZ2luUmlnaHQsXG4gIG1hcmdpbkJvdHRvbSxcbiAgbWFyZ2luTGVmdCxcbiAgbSxcbiAgbXQsXG4gIG1yLFxuICBtYixcbiAgbWwsXG59OiBGb3JtUHJvcHMpIHtcbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICBzcGFjaW5nID0gc3BhY2luZyA/PyB0aGVtZS5jb21wb25lbnRzLmZvcm0uc3R5bGUuZmllbGRTcGFjaW5nO1xuXG4gIGNvbnN0IG1hcmdpblByb3BzID0geyBtYXJnaW4sIG1hcmdpblRvcCwgbWFyZ2luUmlnaHQsIG1hcmdpbkJvdHRvbSwgbWFyZ2luTGVmdCwgbSwgbXQsIG1yLCBtYiwgbWwgfTtcbiAgY29uc3QgZWxlbWVudCA9IGpzeChcbiAgICB0eXBlb2Ygc3VibWl0ID09PSBcImZ1bmN0aW9uXCIgPyBcImZvcm1cIiA6IFwiZGl2XCIsXG4gICAge1xuICAgICAgY3NzOiBbXG4gICAgICAgIFN0eWxlRm9ybShzcGFjaW5nKSxcbiAgICAgICAgU3R5bGVNYXJnaW4obWFyZ2luUHJvcHMpLFxuICAgICAgICB7XG4gICAgICAgICAgd2lkdGg6IHdpZHRoIHx8IFwiMTAwJVwiLFxuICAgICAgICB9LFxuICAgICAgXSxcbiAgICAgIHJvbGU6IFwiZm9ybVwiLFxuICAgICAgb25TdWJtaXQ6IHN1Ym1pdCxcbiAgICB9LFxuICAgIGNoaWxkcmVuXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8Rm9ybUNvbnRleHQuUHJvdmlkZXJcbiAgICAgIHZhbHVlPXt7XG4gICAgICAgIHNwYWNpbmcsXG4gICAgICAgIGRpc2FibGVkLFxuICAgICAgfX0+XG4gICAgICB7ZWxlbWVudH1cbiAgICA8L0Zvcm1Db250ZXh0LlByb3ZpZGVyPlxuICApO1xufVxuXG5Gb3JtLmRpc3BsYXlOYW1lID0gXCJGb3JtXCI7XG5Gb3JtLnByb3BUeXBlcyA9IEZvcm1Qcm9wVHlwZXM7XG5cbi8qKlxuICogTGFiZWwgaW4gdGhlIGZvcm0gbGF5b3V0LlxuICovXG5Gb3JtLkxhYmVsID0gRmllbGRMYWJlbDtcblxuLyoqXG4gKiBgRm9ybUZpZWxkYCBjb21wb25lbnQg4oCUIHJlcHJlc2VudHMgYSBmaWVsZCBpbiB0aGUgZm9ybSBsYXlvdXQgd2l0aCBhbiBvcHRpb25hbCBsYWJlbCBhbmQgaGludCB0ZXh0LlxuICovXG5Gb3JtLkZpZWxkID0gRm9ybUZpZWxkO1xuXG4vKipcbiAqIGBGb3JtR3JvdXBgIGNvbXBvbmVudCDigJQgcHJvdmlkZXMgZ3JpZCBsYXlvdXQgZm9yIHRoZSBmaWVsZHMuXG4gKi9cbkZvcm0uR3JvdXAgPSBGb3JtR3JvdXA7XG5cbmV4cG9ydCBkZWZhdWx0IEZvcm07XG4iXX0= */");
/**
 * `Form` layout.
 */


function Form(_ref) {
  var _spacing;

  let {
    children,
    width,
    spacing,
    disabled,
    submit,
    margin,
    marginTop,
    marginRight,
    marginBottom,
    marginLeft,
    m,
    mt,
    mr,
    mb,
    ml
  } = _ref;
  const theme = useTheme();
  spacing = (_spacing = spacing) !== null && _spacing !== void 0 ? _spacing : theme.components.form.style.fieldSpacing;
  const marginProps = {
    margin,
    marginTop,
    marginRight,
    marginBottom,
    marginLeft,
    m,
    mt,
    mr,
    mb,
    ml
  };
  const element = jsx(typeof submit === "function" ? "form" : "div", {
    css: [StyleForm(spacing), StyleMargin(marginProps), {
      width: width || "100%"
    }],
    role: "form",
    onSubmit: submit
  }, children);
  return _jsx(FormContext.Provider, {
    value: {
      spacing,
      disabled
    },
    children: element
  });
}

Form.displayName = "Form";
Form.propTypes = FormPropTypes;
/**
 * Label in the form layout.
 */

Form.Label = FieldLabel;
/**
 * `FormField` component — represents a field in the form layout with an optional label and hint text.
 */

Form.Field = FormField;
/**
 * `FormGroup` component — provides grid layout for the fields.
 */

Form.Group = FormGroup;
export default Form;
//# sourceMappingURL=Form.js.map