@grafana/ui
Version:
Grafana Components Library
132 lines (129 loc) • 4.58 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { cx, css } from '@emotion/css';
import * as React from 'react';
import { useId } from 'react';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { getChildId } from '../../utils/reactUtils.mjs';
import { FieldContext } from './FieldContext.mjs';
import { FieldValidationMessage } from './FieldValidationMessage.mjs';
import { getLabelStyles, Label } from './Label.mjs';
import { RadioButtonGroup } from './RadioButtonGroup/RadioButtonGroup.mjs';
"use strict";
const Field = React.forwardRef(
({
label: labelProp,
description,
horizontal,
invalid,
loading,
disabled,
required,
error,
children,
className,
validationMessageHorizontalOverflow,
htmlFor,
noMargin,
useFieldset: useFieldsetProp,
...otherProps
}, ref) => {
var _a;
const styles = useStyles2(getFieldStyles, noMargin);
const labelStyles = useStyles2(getLabelStyles);
const useFieldset = useFieldsetProp != null ? useFieldsetProp : children.type === RadioButtonGroup;
const label = typeof labelProp === "string" ? `${labelProp}${required ? " *" : ""}` : labelProp;
const fieldId = useId();
const errorId = useId();
const inputId = (_a = htmlFor != null ? htmlFor : getChildId(children)) != null ? _a : fieldId;
let labelElement = label;
if (useFieldset) {
if (typeof label === "string") {
labelElement = /* @__PURE__ */ jsxs("legend", { className: labelStyles.label, children: [
/* @__PURE__ */ jsx("div", { className: labelStyles.labelContent, children: label }),
description && /* @__PURE__ */ jsx("span", { className: labelStyles.description, children: description })
] });
} else {
labelElement = /* @__PURE__ */ jsx("legend", { className: labelStyles.label, children: label });
}
} else if (typeof label === "string") {
labelElement = /* @__PURE__ */ jsx(Label, { htmlFor: inputId, description, children: label });
}
const childProps = deleteUndefinedProps({ invalid, disabled, loading });
if (invalid && error) {
childProps["aria-describedby"] = errorId;
}
const Wrapper = useFieldset ? "fieldset" : "div";
return /* @__PURE__ */ jsx(
FieldContext.Provider,
{
value: {
id: inputId,
invalid,
disabled,
loading,
"aria-describedby": invalid && error ? errorId : void 0
},
children: /* @__PURE__ */ jsxs(Wrapper, { className: cx(styles.field, horizontal && styles.fieldHorizontal, className), ...otherProps, children: [
labelElement,
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx("div", { ref, children: React.cloneElement(children, children.type !== React.Fragment ? childProps : void 0) }),
invalid && error && !horizontal && /* @__PURE__ */ jsx(
"div",
{
className: cx(styles.fieldValidationWrapper, {
[styles.validationMessageHorizontalOverflow]: !!validationMessageHorizontalOverflow
}),
children: /* @__PURE__ */ jsx(FieldValidationMessage, { id: errorId, children: error })
}
)
] }),
invalid && error && horizontal && /* @__PURE__ */ jsx(
"div",
{
className: cx(styles.fieldValidationWrapper, styles.fieldValidationWrapperHorizontal, {
[styles.validationMessageHorizontalOverflow]: !!validationMessageHorizontalOverflow
}),
children: /* @__PURE__ */ jsx(FieldValidationMessage, { id: errorId, children: error })
}
)
] })
}
);
}
);
Field.displayName = "Field";
function deleteUndefinedProps(obj) {
for (const key in obj) {
if (obj[key] === void 0) {
delete obj[key];
}
}
return obj;
}
const getFieldStyles = (theme, noMargin) => ({
field: css({
display: "flex",
flexDirection: "column",
marginBottom: theme.spacing(noMargin ? 0 : 2)
}),
fieldHorizontal: css({
flexDirection: "row",
justifyContent: "space-between",
flexWrap: "wrap"
}),
fieldValidationWrapper: css({
marginTop: theme.spacing(0.5)
}),
fieldValidationWrapperHorizontal: css({
flex: "1 1 100%"
}),
validationMessageHorizontalOverflow: css({
width: 0,
overflowX: "visible",
"& > *": {
whiteSpace: "nowrap"
}
})
});
export { Field };
//# sourceMappingURL=Field.mjs.map