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

Form layout component in Apptane React UI framework

import { useTheme } from "@apptane/react-ui-theme";
import { css } from "@emotion/react";
import { Fragment, useContext } from "react";
import { FormContext } from "./FormContext.js";
import { FormGroupPropTypes } from "./FormGroup.types.js";
import { jsx as _jsx } from "@emotion/react/jsx-runtime";

const StyleGroup = (layout, spacing) => /*#__PURE__*/css("display:grid;grid-template-columns:", layout, ";column-gap:", spacing, "px;" + (process.env.NODE_ENV === "production" ? "" : ";label:StyleGroup;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9Gb3JtR3JvdXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU0yRCIsImZpbGUiOiIuLi9zcmMvRm9ybUdyb3VwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSBcIkBhcHB0YW5lL3JlYWN0LXVpLXRoZW1lXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCB7IEZyYWdtZW50LCB1c2VDb250ZXh0IH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBGb3JtQ29udGV4dCB9IGZyb20gXCIuL0Zvcm1Db250ZXh0LmpzXCI7XG5pbXBvcnQgeyBGb3JtR3JvdXBQcm9wcywgRm9ybUdyb3VwUHJvcFR5cGVzIH0gZnJvbSBcIi4vRm9ybUdyb3VwLnR5cGVzLmpzXCI7XG5cbmNvbnN0IFN0eWxlR3JvdXAgPSAobGF5b3V0OiBzdHJpbmcsIHNwYWNpbmc6IG51bWJlcikgPT4gY3NzYFxuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6ICR7bGF5b3V0fTtcbiAgY29sdW1uLWdhcDogJHtzcGFjaW5nfXB4O1xuYDtcblxuLyoqXG4gKiBgRm9ybUdyb3VwYCBjb21wb25lbnQg4oCUIHByb3ZpZGVzIGdyaWQgbGF5b3V0IGZvciB0aGUgZmllbGRzLlxuICovXG5mdW5jdGlvbiBGb3JtR3JvdXAoeyBjaGlsZHJlbiwgbGF5b3V0IH06IEZvcm1Hcm91cFByb3BzKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcbiAgY29uc3QgdmlzdWFsU3R5bGUgPSB0aGVtZS5jb21wb25lbnRzLmZvcm0uc3R5bGU7XG4gIGNvbnN0IGZvcm0gPSB1c2VDb250ZXh0KEZvcm1Db250ZXh0KTtcblxuICByZXR1cm4gbGF5b3V0ID8gKFxuICAgIDxkaXYgY3NzPXtTdHlsZUdyb3VwKGxheW91dCwgZm9ybT8uc3BhY2luZyA/PyB2aXN1YWxTdHlsZS5maWVsZFNwYWNpbmcpfT57Y2hpbGRyZW59PC9kaXY+XG4gICkgOiAoXG4gICAgPEZyYWdtZW50PntjaGlsZHJlbn08L0ZyYWdtZW50PlxuICApO1xufVxuXG5Gb3JtR3JvdXAuZGlzcGxheU5hbWUgPSBcIkZvcm1Hcm91cFwiO1xuRm9ybUdyb3VwLnByb3BUeXBlcyA9IEZvcm1Hcm91cFByb3BUeXBlcztcblxuZXhwb3J0IGRlZmF1bHQgRm9ybUdyb3VwO1xuIl19 */");
/**
 * `FormGroup` component — provides grid layout for the fields.
 */


function FormGroup(_ref) {
  var _form$spacing;

  let {
    children,
    layout
  } = _ref;
  const theme = useTheme();
  const visualStyle = theme.components.form.style;
  const form = useContext(FormContext);
  return layout ? _jsx("div", {
    css: StyleGroup(layout, (_form$spacing = form === null || form === void 0 ? void 0 : form.spacing) !== null && _form$spacing !== void 0 ? _form$spacing : visualStyle.fieldSpacing),
    children: children
  }) : _jsx(Fragment, {
    children: children
  });
}

FormGroup.displayName = "FormGroup";
FormGroup.propTypes = FormGroupPropTypes;
export default FormGroup;
//# sourceMappingURL=FormGroup.js.map