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

Grafana Components Library

{"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?: ButtonProps;\n  hideDownIcon?: boolean;\n}\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":";;;;;;;;;AA8Ba,MAAA,cAAA,GAAiB,CAAC,KAA+B,KAAA;AAC5D,EAAM,MAAA,EAAE,QAAU,EAAA,SAAA,EAAW,QAAU,EAAA,IAAA,EAAM,WAAa,EAAA,YAAA,EAAc,OAAS,EAAA,QAAA,EAAU,GAAG,IAAA,EAAS,GAAA,KAAA;AACvG,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAM,MAAA,cAAA,GAAiB,WAAW,iBAAiB,CAAA;AAInD,EAAA,IAAI,UAA2B,KAAM,CAAA,QAAA;AACrC,EAAA,IAAI,CAAC,YAAc,EAAA;AACjB,IAAA,OAAA,GAAU,CAAC,KAAA,CAAM,QAAU,kBAAA,GAAA,CAAC,IAAuB,EAAA,EAAA,IAAA,EAAK,YAAa,EAAA,SAAA,EAAW,MAAO,CAAA,KAAA,CAAM,KAAvD,EAAA,EAAA,WAA8D,CAAE,CAAA;AAAA;AAGxG,EACE,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAU,iBAAiB,QAAQ,CAAA;AAAA,MACnC,QAAA,EAAU,mBAAmB,QAAQ,CAAA;AAAA,MACrC,iBAAmB,EAAA,EAAA,CAAG,cAAe,CAAA,QAAA,EAAU,OAAO,KAAK,CAAA;AAAA,MAC1D,GAAG,IAAA;AAAA,MACJ,UAAY,EAAA,IAAA;AAAA,MAEZ,QAAA,kBAAA,GAAA,CAAC,UAAO,IAAY,EAAA,QAAA,EAAoB,SAAmB,GAAI,WAAA,IAAA,IAAA,GAAA,WAAA,GAAe,EAAC,EAC5E,QACH,EAAA,OAAA,EAAA;AAAA;AAAA,GACF;AAEJ;AAEA,cAAA,CAAe,WAAc,GAAA,gBAAA;AAE7B,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,OAAO,GAAI,CAAA;AAAA,MACT,KAAO,EAAA,OAAA;AAAA,MACP,MAAA,EAAQ,MAAM,MAAO,CAAA;AAAA,KACtB,CAAA;AAAA,IACD,KAAO,EAAA;AAAA,MACL,OAAO,GAAI,CAAA;AAAA,QACT,MAAQ,EAAA;AAAA,OACT,CAAA;AAAA,MACD,MAAM,GAAI,CAAA;AAAA,QACR,MAAQ,EAAA;AAAA,OACT;AAAA;AACH,GACF;AACF,CAAA;;;;"}