@grafana/ui/dist/cjs/components/Forms/Legacy/Switch/Switch.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var ThemeContext = require('../../../../themes/ThemeContext.cjs');
var uniqueId = require('../../../../utils/uniqueId.cjs');
var Icon = require('../../../Icon/Icon.cjs');
var Tooltip = require('../../../Tooltip/Tooltip.cjs');

"use strict";
class UnthemedSwitch extends React.PureComponent {
  constructor() {
    super(...arguments);
    this.state = {
      id: uniqueId.uniqueId()
    };
    this.internalOnChange = (event) => {
      event.stopPropagation();
      this.props.onChange(event);
    };
  }
  render() {
    const {
      labelClass = "",
      switchClass = "",
      label,
      checked,
      disabled,
      transparent,
      className,
      theme,
      tooltip,
      tooltipPlacement
    } = this.props;
    const styles = getStyles(theme);
    const labelId = this.state.id;
    const labelClassName = `gf-form-label ${labelClass} ${transparent ? "gf-form-label--transparent" : ""} pointer`;
    const switchClassName = css.cx(styles.switch, switchClass, {
      [styles.switchTransparent]: transparent
    });
    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.container, children: /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: labelId, className: css.cx("gf-form", styles.labelContainer, className), children: [
      label && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: labelClassName, children: [
        label,
        tooltip && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { placement: tooltipPlacement ? tooltipPlacement : "auto", content: tooltip, theme: "info", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "info-circle", size: "sm", style: { marginLeft: "10px" } }) })
      ] }),
      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: switchClassName, children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          "input",
          {
            disabled,
            id: labelId,
            type: "checkbox",
            checked,
            onChange: this.internalOnChange
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.slider })
      ] })
    ] }) });
  }
}
const Switch = ThemeContext.withTheme2(UnthemedSwitch);
const getStyles = (theme) => {
  const slider = css.css({
    background: theme.v1.palette.gray1,
    borderRadius: theme.shape.radius.pill,
    height: "16px",
    width: "32px",
    display: "block",
    position: "relative",
    "&::before": {
      position: "absolute",
      content: "''",
      height: "12px",
      width: "12px",
      left: "2px",
      top: "2px",
      background: theme.components.input.background,
      [theme.transitions.handleMotion("no-preference")]: {
        transition: "0.4s"
      },
      borderRadius: theme.shape.radius.circle,
      boxShadow: theme.shadows.z1
    }
  });
  return {
    container: css.css({
      display: "flex",
      flexShrink: 0
    }),
    labelContainer: css.css({
      display: "flex",
      cursor: "pointer",
      marginRight: theme.spacing(0.5)
    }),
    switch: css.css({
      display: "flex",
      position: "relative",
      width: "56px",
      height: theme.spacing(4),
      background: theme.components.input.background,
      border: `1px solid ${theme.components.input.borderColor}`,
      borderRadius: theme.shape.radius.default,
      alignItems: "center",
      justifyContent: "center",
      input: {
        opacity: 0,
        width: 0,
        height: 0
      },
      [`input:checked + .${slider}`]: {
        background: theme.colors.primary.main
      },
      [`input:checked + .${slider}::before`]: {
        transform: "translateX(16px)"
      }
    }),
    switchTransparent: css.css({
      background: "transparent",
      border: 0,
      width: "40px"
    }),
    slider
  };
};

exports.Switch = Switch;
//# sourceMappingURL=Switch.cjs.map