@grafana/ui
Version:
Grafana Components Library
1 lines • 4.66 kB
Source Map (JSON)
{"version":3,"file":"ValueContainer.mjs","sources":["../../../../src/components/Select/ValueContainer.tsx"],"sourcesContent":["import { cx } from '@emotion/css';\nimport { isEqual } from 'lodash';\nimport { Component, createRef, ReactNode } from 'react';\nimport { ValueContainerProps as BaseValueContainerProps, type GroupBase } from 'react-select';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { withTheme2 } from '../../themes/ThemeContext';\n\nimport { getSelectStyles } from './getSelectStyles';\nimport type { CustomComponentProps } from './types';\n\ntype ValueContainerProps<Option, isMulti extends boolean, Group extends GroupBase<Option>> = BaseValueContainerProps<\n Option,\n isMulti,\n Group\n> &\n CustomComponentProps<Option, isMulti, Group>;\n\nclass UnthemedValueContainer<Option, isMulti extends boolean, Group extends GroupBase<Option>> extends Component<\n ValueContainerProps<Option, isMulti, Group> & { theme: GrafanaTheme2 }\n> {\n private ref = createRef<HTMLDivElement>();\n\n componentDidUpdate(prevProps: ValueContainerProps<Option, isMulti, Group>) {\n if (\n this.ref.current &&\n this.props.selectProps.autoWidth &&\n !isEqual(prevProps.selectProps.value, this.props.selectProps.value)\n ) {\n // Reset in order to measure the new width\n this.ref.current.style.minWidth = '0px';\n\n const width = this.ref.current.offsetWidth;\n\n this.ref.current.style.minWidth = `${width}px`;\n }\n }\n\n render() {\n const { children } = this.props;\n const { selectProps } = this.props;\n\n if (\n selectProps &&\n Array.isArray(children) &&\n Array.isArray(children[0]) &&\n selectProps.maxVisibleValues !== undefined &&\n !(selectProps.showAllSelectedWhenOpen && selectProps.menuIsOpen)\n ) {\n const [valueChildren, ...otherChildren] = children;\n const truncatedValues = valueChildren.slice(0, selectProps.maxVisibleValues);\n\n return this.renderContainer([truncatedValues, ...otherChildren]);\n }\n\n return this.renderContainer(children);\n }\n\n renderContainer(children?: ReactNode) {\n const { isMulti, theme, selectProps } = this.props;\n const noWrap = this.props.selectProps?.noMultiValueWrap && !this.props.selectProps?.menuIsOpen;\n const styles = getSelectStyles(theme);\n const dataTestid = selectProps['data-testid'];\n const className = cx(styles.valueContainer, {\n [styles.valueContainerMulti]: isMulti && !noWrap,\n [styles.valueContainerMultiNoWrap]: isMulti && noWrap,\n });\n\n return (\n <div ref={this.ref} data-testid={dataTestid} className={className}>\n {children}\n </div>\n );\n }\n}\n\nexport const ValueContainer = withTheme2(UnthemedValueContainer);\n"],"names":[],"mappings":";;;;;;;AAmBA,MAAM,+BAAiG,SAErG,CAAA;AAAA,EAFF,WAAA,GAAA;AAAA,IAAA,KAAA,CAAA,GAAA,SAAA,CAAA;AAGE,IAAA,IAAA,CAAQ,MAAM,SAA0B,EAAA;AAAA;AAAA,EAExC,mBAAmB,SAAwD,EAAA;AACzE,IAAA,IACE,KAAK,GAAI,CAAA,OAAA,IACT,IAAK,CAAA,KAAA,CAAM,YAAY,SACvB,IAAA,CAAC,OAAQ,CAAA,SAAA,CAAU,YAAY,KAAO,EAAA,IAAA,CAAK,KAAM,CAAA,WAAA,CAAY,KAAK,CAClE,EAAA;AAEA,MAAK,IAAA,CAAA,GAAA,CAAI,OAAQ,CAAA,KAAA,CAAM,QAAW,GAAA,KAAA;AAElC,MAAM,MAAA,KAAA,GAAQ,IAAK,CAAA,GAAA,CAAI,OAAQ,CAAA,WAAA;AAE/B,MAAA,IAAA,CAAK,GAAI,CAAA,OAAA,CAAQ,KAAM,CAAA,QAAA,GAAW,GAAG,KAAK,CAAA,EAAA,CAAA;AAAA;AAC5C;AACF,EAEA,MAAS,GAAA;AACP,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,IAAK,CAAA,KAAA;AAC1B,IAAM,MAAA,EAAE,WAAY,EAAA,GAAI,IAAK,CAAA,KAAA;AAE7B,IAAA,IACE,eACA,KAAM,CAAA,OAAA,CAAQ,QAAQ,CACtB,IAAA,KAAA,CAAM,QAAQ,QAAS,CAAA,CAAC,CAAC,CAAA,IACzB,YAAY,gBAAqB,KAAA,KAAA,CAAA,IACjC,EAAE,WAAY,CAAA,uBAAA,IAA2B,YAAY,UACrD,CAAA,EAAA;AACA,MAAA,MAAM,CAAC,aAAA,EAAe,GAAG,aAAa,CAAI,GAAA,QAAA;AAC1C,MAAA,MAAM,eAAkB,GAAA,aAAA,CAAc,KAAM,CAAA,CAAA,EAAG,YAAY,gBAAgB,CAAA;AAE3E,MAAA,OAAO,KAAK,eAAgB,CAAA,CAAC,eAAiB,EAAA,GAAG,aAAa,CAAC,CAAA;AAAA;AAGjE,IAAO,OAAA,IAAA,CAAK,gBAAgB,QAAQ,CAAA;AAAA;AACtC,EAEA,gBAAgB,QAAsB,EAAA;AA3DxC,IAAA,IAAA,EAAA,EAAA,EAAA;AA4DI,IAAA,MAAM,EAAE,OAAA,EAAS,KAAO,EAAA,WAAA,KAAgB,IAAK,CAAA,KAAA;AAC7C,IAAM,MAAA,MAAA,GAAA,CAAA,CAAS,EAAK,GAAA,IAAA,CAAA,KAAA,CAAM,WAAX,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAwB,qBAAoB,EAAC,CAAA,EAAA,GAAA,IAAA,CAAK,KAAM,CAAA,WAAA,KAAX,IAAwB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,UAAA,CAAA;AACpF,IAAM,MAAA,MAAA,GAAS,gBAAgB,KAAK,CAAA;AACpC,IAAM,MAAA,UAAA,GAAa,YAAY,aAAa,CAAA;AAC5C,IAAM,MAAA,SAAA,GAAY,EAAG,CAAA,MAAA,CAAO,cAAgB,EAAA;AAAA,MAC1C,CAAC,MAAA,CAAO,mBAAmB,GAAG,WAAW,CAAC,MAAA;AAAA,MAC1C,CAAC,MAAA,CAAO,yBAAyB,GAAG,OAAW,IAAA;AAAA,KAChD,CAAA;AAED,IACE,uBAAA,GAAA,CAAC,SAAI,GAAK,EAAA,IAAA,CAAK,KAAK,aAAa,EAAA,UAAA,EAAY,WAC1C,QACH,EAAA,CAAA;AAAA;AAGN;AAEa,MAAA,cAAA,GAAiB,WAAW,sBAAsB;;;;"}