@grafana/ui/dist/esm/components/Forms/Legacy/Switch/Switch.mjs.map

Grafana Components Library

{"version":3,"file":"Switch.mjs","sources":["../../../../../../src/components/Forms/Legacy/Switch/Switch.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { Placement } from '@popperjs/core';\nimport { uniqueId } from 'lodash';\nimport { PureComponent } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { withTheme2 } from '../../../../themes/ThemeContext';\nimport { Themeable2 } from '../../../../types/theme';\nimport { Icon } from '../../../Icon/Icon';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\n\nexport interface Props extends Themeable2 {\n  label: string;\n  checked: boolean;\n  disabled?: boolean;\n  className?: string;\n  labelClass?: string;\n  switchClass?: string;\n  tooltip?: string;\n  tooltipPlacement?: Placement;\n  transparent?: boolean;\n  onChange: (event: React.SyntheticEvent<HTMLInputElement>) => void;\n}\n\nexport interface State {\n  id: string;\n}\n\n/** @deprecated Please use the `Switch` component, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-switch--controlled as seen in Storybook} */\nclass UnthemedSwitch extends PureComponent<Props, State> {\n  state = {\n    id: uniqueId(),\n  };\n\n  internalOnChange = (event: React.FormEvent<HTMLInputElement>) => {\n    event.stopPropagation();\n    this.props.onChange(event);\n  };\n\n  render() {\n    const {\n      labelClass = '',\n      switchClass = '',\n      label,\n      checked,\n      disabled,\n      transparent,\n      className,\n      theme,\n      tooltip,\n      tooltipPlacement,\n    } = this.props;\n    const styles = getStyles(theme);\n\n    const labelId = this.state.id;\n    const labelClassName = `gf-form-label ${labelClass} ${transparent ? 'gf-form-label--transparent' : ''} pointer`;\n    const switchClassName = cx(styles.switch, switchClass, {\n      [styles.switchTransparent]: transparent,\n    });\n\n    return (\n      <div className={styles.container}>\n        <label htmlFor={labelId} className={cx('gf-form', styles.labelContainer, className)}>\n          {label && (\n            <div className={labelClassName}>\n              {label}\n              {tooltip && (\n                <Tooltip placement={tooltipPlacement ? tooltipPlacement : 'auto'} content={tooltip} theme={'info'}>\n                  <Icon name=\"info-circle\" size=\"sm\" style={{ marginLeft: '10px' }} />\n                </Tooltip>\n              )}\n            </div>\n          )}\n          <div className={switchClassName}>\n            <input\n              disabled={disabled}\n              id={labelId}\n              type=\"checkbox\"\n              checked={checked}\n              onChange={this.internalOnChange}\n            />\n            <span className={styles.slider} />\n          </div>\n        </label>\n      </div>\n    );\n  }\n}\n\nexport const Switch = withTheme2(UnthemedSwitch);\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  const slider = css({\n    background: theme.v1.palette.gray1,\n    borderRadius: theme.shape.radius.pill,\n    height: '16px',\n    width: '32px',\n    display: 'block',\n    position: 'relative',\n\n    '&::before': {\n      position: 'absolute',\n      content: \"''\",\n      height: '12px',\n      width: '12px',\n      left: '2px',\n      top: '2px',\n      background: theme.components.input.background,\n      [theme.transitions.handleMotion('no-preference')]: {\n        transition: '0.4s',\n      },\n      borderRadius: theme.shape.radius.circle,\n      boxShadow: theme.shadows.z1,\n    },\n  });\n  return {\n    container: css({\n      display: 'flex',\n      flexShrink: 0,\n    }),\n    labelContainer: css({\n      display: 'flex',\n      cursor: 'pointer',\n      marginRight: theme.spacing(0.5),\n    }),\n    switch: css({\n      display: 'flex',\n      position: 'relative',\n      width: '56px',\n      height: theme.spacing(4),\n      background: theme.components.input.background,\n      border: `1px solid ${theme.components.input.borderColor}`,\n      borderRadius: theme.shape.radius.default,\n      alignItems: 'center',\n      justifyContent: 'center',\n      input: {\n        opacity: 0,\n        width: 0,\n        height: 0,\n      },\n      [`input:checked + .${slider}`]: {\n        background: theme.colors.primary.main,\n      },\n\n      [`input:checked + .${slider}::before`]: {\n        transform: 'translateX(16px)',\n      },\n    }),\n    switchTransparent: css({\n      background: 'transparent',\n      border: 0,\n      width: '40px',\n    }),\n    slider,\n  };\n};\n"],"names":[],"mappings":"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"}