@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      transition: '0.4s',\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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"}