@grafana/ui
Version:
Grafana Components Library
1 lines • 4.15 kB
Source Map (JSON)
{"version":3,"file":"Segment.mjs","sources":["../../../../src/components/Segment/Segment.tsx"],"sourcesContent":["import { cx } from '@emotion/css';\nimport { isObject } from 'lodash';\nimport { HTMLProps } from 'react';\nimport * as React from 'react';\n\nimport { SelectableValue } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { InlineLabel } from '../Forms/InlineLabel';\n\nimport { SegmentSelect } from './SegmentSelect';\nimport { getSegmentStyles } from './styles';\nimport { SegmentProps } from './types';\nimport { useExpandableLabel } from './useExpandableLabel';\n\nexport interface SegmentSyncProps<T> extends SegmentProps, Omit<HTMLProps<HTMLDivElement>, 'value' | 'onChange'> {\n value?: T | SelectableValue<T>;\n onChange: (item: SelectableValue<T>) => void;\n options: Array<SelectableValue<T>>;\n inputMinWidth?: number;\n}\n\n/**\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-segment--docs\n */\nexport function Segment<T>({\n options,\n value,\n onChange,\n Component,\n className,\n allowCustomValue,\n allowEmptyValue,\n placeholder,\n disabled,\n inputMinWidth,\n inputPlaceholder,\n onExpandedChange,\n autofocus = false,\n ...rest\n}: React.PropsWithChildren<SegmentSyncProps<T>>) {\n const [Label, labelWidth, expanded, setExpanded] = useExpandableLabel(autofocus, onExpandedChange);\n const width = inputMinWidth ? Math.max(inputMinWidth, labelWidth) : labelWidth;\n const styles = useStyles2(getSegmentStyles);\n\n if (!expanded) {\n const label = isObject(value) ? value.label : value;\n const labelAsString = label != null ? String(label) : undefined;\n\n return (\n <Label\n disabled={disabled}\n Component={\n Component || (\n <InlineLabel\n className={cx(\n styles.segment,\n {\n [styles.queryPlaceholder]: placeholder !== undefined && !value,\n [styles.disabled]: disabled,\n },\n className\n )}\n >\n {labelAsString || placeholder}\n </InlineLabel>\n )\n }\n />\n );\n }\n\n return (\n <SegmentSelect\n {...rest}\n value={value && !isObject(value) ? { value } : value}\n placeholder={inputPlaceholder}\n options={options}\n width={width}\n onClickOutside={() => setExpanded(false)}\n allowCustomValue={allowCustomValue}\n allowEmptyValue={allowEmptyValue}\n onChange={(item) => {\n setExpanded(false);\n onChange(item);\n }}\n />\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAyBO,SAAS,OAAA,CAAW;AAAA,EACzB,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,gBAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,GAAG;AACL,CAAA,EAAiD;AAC/C,EAAA,MAAM,CAAC,OAAO,UAAA,EAAY,QAAA,EAAU,WAAW,CAAA,GAAI,kBAAA,CAAmB,WAAW,gBAAgB,CAAA;AACjG,EAAA,MAAM,QAAQ,aAAA,GAAgB,IAAA,CAAK,GAAA,CAAI,aAAA,EAAe,UAAU,CAAA,GAAI,UAAA;AACpE,EAAA,MAAM,MAAA,GAAS,WAAW,gBAAgB,CAAA;AAE1C,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,KAAK,CAAA,GAAI,MAAM,KAAA,GAAQ,KAAA;AAC9C,IAAA,MAAM,aAAA,GAAgB,KAAA,IAAS,IAAA,GAAO,MAAA,CAAO,KAAK,CAAA,GAAI,KAAA,CAAA;AAEtD,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,WACE,SAAA,oBACE,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,MAAA,CAAO,OAAA;AAAA,cACP;AAAA,gBACE,CAAC,MAAA,CAAO,gBAAgB,GAAG,WAAA,KAAgB,UAAa,CAAC,KAAA;AAAA,gBACzD,CAAC,MAAA,CAAO,QAAQ,GAAG;AAAA,eACrB;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA,aAAA,IAAiB;AAAA;AAAA;AACpB;AAAA,KAGN;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,KAAA,EAAO,SAAS,CAAC,QAAA,CAAS,KAAK,CAAA,GAAI,EAAE,OAAM,GAAI,KAAA;AAAA,MAC/C,WAAA,EAAa,gBAAA;AAAA,MACb,OAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA,EAAgB,MAAM,WAAA,CAAY,KAAK,CAAA;AAAA,MACvC,gBAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAA,EAAU,CAAC,IAAA,KAAS;AAClB,QAAA,WAAA,CAAY,KAAK,CAAA;AACjB,QAAA,QAAA,CAAS,IAAI,CAAA;AAAA,MACf;AAAA;AAAA,GACF;AAEJ;;;;"}