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

Form layout component in Apptane React UI framework

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["children", "label", "hint", "name", "disabled", "value", "onChange"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import { FieldLabel } from "@apptane/react-ui-input";
import { Pane } from "@apptane/react-ui-pane";
import { useColorMode, useTheme } from "@apptane/react-ui-theme";
import { Paragraph } from "@apptane/react-ui-typography";
import React, { Children, cloneElement, isValidElement, useContext } from "react";
import { FormContext } from "./FormContext.js";
import { FormFieldPropTypes } from "./FormField.types.js";
/**
 * `FormField` component — represents a field in the form layout with an optional label and hint text.
 */

import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";

function FormField(_ref) {
  let {
    children,
    label,
    hint,
    name,
    disabled,
    value,
    onChange
  } = _ref,
      other = _objectWithoutProperties(_ref, _excluded);

  const theme = useTheme();
  const colorMode = useColorMode();
  const visualStyle = theme.components.form.style;
  const visualAppearance = theme.components.form.appearance(theme.palette[colorMode], colorMode, undefined, "none");
  const form = useContext(FormContext);
  disabled = disabled || (form === null || form === void 0 ? void 0 : form.disabled);

  if (Children.count(children) == 0) {
    return null;
  }

  let control = null;
  const child = Children.only(children);

  if ( /*#__PURE__*/isValidElement(child)) {
    control = child;
    control = /*#__PURE__*/cloneElement(control, {
      disabled: disabled || control.props.disabled,
      value: value !== null && value !== void 0 ? value : control.props.value,
      onChange: onChange !== null && onChange !== void 0 ? onChange : control.props.onChange
    });
  }

  return _jsxs(Pane, _objectSpread(_objectSpread({}, other), {}, {
    children: [label && _jsx(FieldLabel, {
      colorMode: colorMode,
      block: true,
      marginBottom: visualStyle.labelSpacing,
      disabled: disabled,
      name: name,
      children: label
    }), control, hint && _jsx(Paragraph, _objectSpread(_objectSpread({
      marginTop: visualStyle.hintSpacing,
      color: visualAppearance.hint
    }, visualStyle.font.hint), {}, {
      children: hint
    }))]
  }));
}

FormField.displayName = "FormField";
FormField.propTypes = FormFieldPropTypes;
export default FormField;
//# sourceMappingURL=FormField.js.map