@grafana/ui/dist/esm/components/FormField/FormField.mjs.map

Grafana Components Library

{"version":3,"file":"FormField.mjs","sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { InputHTMLAttributes } from 'react';\nimport * as React from 'react';\n\nimport { InlineFormLabel } from '../FormLabel/FormLabel';\nimport { Field } from '../Forms/Field';\nimport { InlineField } from '../Forms/InlineField';\nimport { PopoverContent } from '../Tooltip/types';\n\nexport interface Props extends InputHTMLAttributes<HTMLInputElement> {\n  label: string;\n  tooltip?: PopoverContent;\n  labelWidth?: number;\n  // If null no width will be specified not even default one\n  inputWidth?: number | null;\n  inputEl?: React.ReactNode;\n  /** Make tooltip interactive */\n  interactive?: boolean;\n}\n\n/**\n * Default form field including label used in Grafana UI. Default input element is simple <input />. You can also pass\n * custom inputEl if required in which case inputWidth and inputProps are ignored.\n *\n * For inline fields, use {@link InlineField}, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-inlinefield--basic See Storybook}.\n * @deprecated Please use the {@link Field} component, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-field--simple See Storybook}.\n */\nexport const FormField = ({\n  label,\n  tooltip,\n  labelWidth = 6,\n  inputWidth = 12,\n  inputEl,\n  className,\n  interactive,\n  ...inputProps\n}: Props) => {\n  const styles = getStyles();\n  return (\n    <div className={cx(styles.formField, className)}>\n      <InlineFormLabel width={labelWidth} tooltip={tooltip} interactive={interactive}>\n        {label}\n      </InlineFormLabel>\n      {inputEl || (\n        <input\n          type=\"text\"\n          className={`gf-form-input ${inputWidth ? `width-${inputWidth}` : ''}`}\n          {...inputProps}\n          disabled={inputProps.disabled}\n        />\n      )}\n    </div>\n  );\n};\n\nFormField.displayName = 'FormField';\n\nconst getStyles = () => {\n  return {\n    formField: css({\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-start',\n      textAlign: 'left',\n      position: 'relative',\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;AA2BO,MAAM,YAAY,CAAC;AAAA,EACxB,KAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAa,GAAA,CAAA;AAAA,EACb,UAAa,GAAA,EAAA;AAAA,EACb,OAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAa,KAAA;AACX,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,4BACG,KAAI,EAAA,EAAA,SAAA,EAAW,GAAG,MAAO,CAAA,SAAA,EAAW,SAAS,CAC5C,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,KAAA,EAAO,UAAY,EAAA,OAAA,EAAkB,aACnD,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,IACC,OACC,oBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,MAAA;AAAA,QACL,WAAW,CAAiB,cAAA,EAAA,UAAA,GAAa,CAAS,MAAA,EAAA,UAAU,KAAK,EAAE,CAAA,CAAA;AAAA,QAClE,GAAG,UAAA;AAAA,QACJ,UAAU,UAAW,CAAA;AAAA;AAAA;AACvB,GAEJ,EAAA,CAAA;AAEJ;AAEA,SAAA,CAAU,WAAc,GAAA,WAAA;AAExB,MAAM,YAAY,MAAM;AACtB,EAAO,OAAA;AAAA,IACL,WAAW,GAAI,CAAA;AAAA,MACb,OAAS,EAAA,MAAA;AAAA,MACT,aAAe,EAAA,KAAA;AAAA,MACf,UAAY,EAAA,YAAA;AAAA,MACZ,SAAW,EAAA,MAAA;AAAA,MACX,QAAU,EAAA;AAAA,KACX;AAAA,GACH;AACF,CAAA;;;;"}