@grafana/ui
Version:
Grafana Components Library
1 lines • 4.04 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\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":";;;;;;;;;AAsBO,SAAS,OAAW,CAAA;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,SAAY,GAAA,KAAA;AAAA,EACZ,GAAG;AACL,CAAiD,EAAA;AAC/C,EAAM,MAAA,CAAC,OAAO,UAAY,EAAA,QAAA,EAAU,WAAW,CAAI,GAAA,kBAAA,CAAmB,WAAW,gBAAgB,CAAA;AACjG,EAAA,MAAM,QAAQ,aAAgB,GAAA,IAAA,CAAK,GAAI,CAAA,aAAA,EAAe,UAAU,CAAI,GAAA,UAAA;AACpE,EAAM,MAAA,MAAA,GAAS,WAAW,gBAAgB,CAAA;AAE1C,EAAA,IAAI,CAAC,QAAU,EAAA;AACb,IAAA,MAAM,KAAQ,GAAA,QAAA,CAAS,KAAK,CAAA,GAAI,MAAM,KAAQ,GAAA,KAAA;AAC9C,IAAA,MAAM,aAAgB,GAAA,KAAA,IAAS,IAAO,GAAA,MAAA,CAAO,KAAK,CAAI,GAAA,KAAA,CAAA;AAEtD,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,WACE,SACE,oBAAA,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,EAAA;AAAA,cACT,MAAO,CAAA,OAAA;AAAA,cACP;AAAA,gBACE,CAAC,MAAO,CAAA,gBAAgB,GAAG,WAAA,KAAgB,UAAa,CAAC,KAAA;AAAA,gBACzD,CAAC,MAAO,CAAA,QAAQ,GAAG;AAAA,eACrB;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAiB,EAAA,aAAA,IAAA;AAAA;AAAA;AACpB;AAAA,KAGN;AAAA;AAIJ,EACE,uBAAA,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,KAAA,EAAO,SAAS,CAAC,QAAA,CAAS,KAAK,CAAI,GAAA,EAAE,OAAU,GAAA,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,IAAS,KAAA;AAClB,QAAA,WAAA,CAAY,KAAK,CAAA;AACjB,QAAA,QAAA,CAAS,IAAI,CAAA;AAAA;AACf;AAAA,GACF;AAEJ;;;;"}