UNPKG

@grafana/ui

Version:
1 lines 4.04 kB
{"version":3,"file":"ButtonCascader.mjs","sources":["../../../../src/components/ButtonCascader/ButtonCascader.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport RCCascader, { FieldNames } from 'rc-cascader';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { IconName } from '../../types/icon';\nimport { Button, ButtonProps } from '../Button/Button';\nimport { CascaderOption } from '../Cascader/Cascader';\nimport { onChangeCascader, onLoadDataCascader } from '../Cascader/optionMappings';\nimport { getCascaderStyles } from '../Cascader/styles';\nimport { Icon } from '../Icon/Icon';\n\nexport interface ButtonCascaderProps {\n options: CascaderOption[];\n children: string;\n icon?: IconName;\n disabled?: boolean;\n value?: string[];\n fieldNames?: FieldNames<CascaderOption, keyof CascaderOption>;\n loadData?: (selectedOptions: CascaderOption[]) => void;\n onChange?: (value: string[], selectedOptions: CascaderOption[]) => void;\n onPopupVisibleChange?: (visible: boolean) => void;\n className?: string;\n variant?: ButtonProps['variant'];\n buttonProps?: Omit<ButtonProps, 'children'>;\n hideDownIcon?: boolean;\n}\n\n/**\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-buttoncascader--docs\n */\nexport const ButtonCascader = (props: ButtonCascaderProps) => {\n const { onChange, className, loadData, icon, buttonProps, hideDownIcon, variant, disabled, ...rest } = props;\n const styles = useStyles2(getStyles);\n const cascaderStyles = useStyles2(getCascaderStyles);\n\n // Weird way to do this bit it goes around a styling issue in Button where even null/undefined child triggers\n // styling change which messes up the look if there is only single icon content.\n let content: React.ReactNode = props.children;\n if (!hideDownIcon) {\n content = [props.children, <Icon key={'down-icon'} name=\"angle-down\" className={styles.icons.right} />];\n }\n\n return (\n <RCCascader\n onChange={onChangeCascader(onChange)}\n loadData={onLoadDataCascader(loadData)}\n dropdownClassName={cx(cascaderStyles.dropdown, styles.popup)}\n {...rest}\n expandIcon={null}\n >\n <Button icon={icon} disabled={disabled} variant={variant} {...(buttonProps ?? {})}>\n {content}\n </Button>\n </RCCascader>\n );\n};\n\nButtonCascader.displayName = 'ButtonCascader';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n popup: css({\n label: 'popup',\n zIndex: theme.zIndex.dropdown,\n }),\n icons: {\n right: css({\n margin: '1px 0 0 4px',\n }),\n left: css({\n margin: '-1px 4px 0 0',\n }),\n },\n };\n};\n"],"names":[],"mappings":";;;;;;;;;;AAiCO,MAAM,cAAA,GAAiB,CAAC,KAAA,KAA+B;AAC5D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,QAAA,EAAU,IAAA,EAAM,WAAA,EAAa,YAAA,EAAc,OAAA,EAAS,QAAA,EAAU,GAAG,IAAA,EAAK,GAAI,KAAA;AACvG,EAAA,MAAM,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAA,MAAM,cAAA,GAAiB,WAAW,iBAAiB,CAAA;AAInD,EAAA,IAAI,UAA2B,KAAA,CAAM,QAAA;AACrC,EAAA,IAAI,CAAC,YAAA,EAAc;AACjB,IAAA,OAAA,GAAU,CAAC,KAAA,CAAM,QAAA,kBAAU,GAAA,CAAC,IAAA,EAAA,EAAuB,IAAA,EAAK,YAAA,EAAa,SAAA,EAAW,MAAA,CAAO,KAAA,CAAM,KAAA,EAAA,EAAvD,WAA8D,CAAE,CAAA;AAAA,EACxG;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAU,iBAAiB,QAAQ,CAAA;AAAA,MACnC,QAAA,EAAU,mBAAmB,QAAQ,CAAA;AAAA,MACrC,iBAAA,EAAmB,EAAA,CAAG,cAAA,CAAe,QAAA,EAAU,OAAO,KAAK,CAAA;AAAA,MAC1D,GAAG,IAAA;AAAA,MACJ,UAAA,EAAY,IAAA;AAAA,MAEZ,QAAA,kBAAA,GAAA,CAAC,UAAO,IAAA,EAAY,QAAA,EAAoB,SAAmB,GAAI,WAAA,IAAA,IAAA,GAAA,WAAA,GAAe,EAAC,EAC5E,QAAA,EAAA,OAAA,EACH;AAAA;AAAA,GACF;AAEJ;AAEA,cAAA,CAAe,WAAA,GAAc,gBAAA;AAE7B,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,EAAA,OAAO;AAAA,IACL,OAAO,GAAA,CAAI;AAAA,MACT,KAAA,EAAO,OAAA;AAAA,MACP,MAAA,EAAQ,MAAM,MAAA,CAAO;AAAA,KACtB,CAAA;AAAA,IACD,KAAA,EAAO;AAAA,MACL,OAAO,GAAA,CAAI;AAAA,QACT,MAAA,EAAQ;AAAA,OACT,CAAA;AAAA,MACD,MAAM,GAAA,CAAI;AAAA,QACR,MAAA,EAAQ;AAAA,OACT;AAAA;AACH,GACF;AACF,CAAA;;;;"}