@axeptio/design-system/build/src/Core/Controls/Switch/index.jsx

Design System for Axeptio

import React, { useState } from 'react';
import styled, { useTheme, css } from 'styled-components';
import PropTypes from 'prop-types';
import ReactSwitch from 'react-switch';

const Root = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: red;
`;

const baseSwitchLabel = css`
  font-size: 12px;
  font-family: ${props => props.theme.fonts.text};
  color: ${props => props.theme.colors.secondary};
`;

const SwitchDescription = styled.div`
  ${baseSwitchLabel};
  font-size: 14px;
  font-weight: bold;
`;

const SwitchContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: flex-end;
`;

const OffSwitchLabel = styled.div`
  ${baseSwitchLabel};
  font-weight: ${props => (props.checked ? 'bold' : 'normal')};
  cursor: ${props => (props.checked ? 'default' : 'pointer')};
  text-align: right;
  margin-right: 8px;
`;

const OnSwitchLabel = styled.div`
  ${baseSwitchLabel};
  font-weight: ${props => (props.checked ? 'bold' : 'normal')};
  cursor: ${props => (props.checked ? 'default' : 'pointer')};
  text-align: left;
  margin-left: 8px;
  flex-basis: 55px;
`;

const HandleIcon = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;

  svg {
    width: ${props => (props.large ? 17 : 14)}px;
  }
`;

const Switch = ({ active, large, label, offText, onText, onChange }) => {
  const theme = useTheme();
  const [checked, setChecked] = useState(active);

  const handleChange = checked => {
    setChecked(checked);
    onChange?.(checked);
  };

  return (
    <Root>
      {label && <SwitchDescription>{label}</SwitchDescription>}

      <SwitchContainer>
        {offText && (
          <OffSwitchLabel
            checked={!checked}
            onClick={() => {
              if (checked) handleChange(!checked);
            }}
          >
            {offText}
          </OffSwitchLabel>
        )}
        <ReactSwitch
          onChange={handleChange}
          checked={checked}
          height={large ? 30 : 26}
          width={large ? 54 : 44}
          handleDiameter={large ? 22 : 18}
          offColor={theme.colors.grey.v300}
          onColor={theme.colors.primary}
          offHandleColor="#fff"
          onHandleColor="#fff"
          uncheckedIcon={null}
          checkedIcon={null}
          uncheckedHandleIcon={
            <HandleIcon large={large}>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path
                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
                  fill={theme.colors.grey.v400}
                ></path>
              </svg>
            </HandleIcon>
          }
          checkedHandleIcon={
            <HandleIcon large={large}>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill={theme.colors.primary}></path>
              </svg>
            </HandleIcon>
          }
          boxShadow="0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 3px 4px 0px rgba(0, 0, 0, 0.03), 0px 6px 9px 0px rgba(0, 0, 0, 0.04), 0px 13px 18px 0px rgba(0, 0, 0, 0.05), 0px 36px 49px 0px rgba(0, 0, 0, 0.07);"
          activeBoxShadow={false}
        />

        {onText && (
          <OnSwitchLabel
            checked={checked}
            onClick={() => {
              if (!checked) handleChange(true);
            }}
          >
            {onText}
          </OnSwitchLabel>
        )}
      </SwitchContainer>
    </Root>
  );
};

Switch.propTypes = {
  active: PropTypes.bool,
  large: PropTypes.bool,
  label: PropTypes.string,
  offText: PropTypes.string,
  onText: PropTypes.string,
  onChange: PropTypes.func
};

export default Switch;