protocol/packages/website/ts/components/ui/switch.tsx

import * as React from 'react';
import styled from 'styled-components';

import { Heading } from 'ts/components/text';
import { colors } from 'ts/style/colors';

interface ToggleProps {
    className?: string;
    name?: string;
    value?: string;
    isChecked?: boolean;
    isDisabled?: boolean;
    onToggle?: (e: React.ChangeEvent) => void;
    width?: string;
    height?: string;
    borderWidth?: string;
    borderColor?: string;
    backgroundColor?: string;
    backgroundColorDisabled?: string;
    radius?: string;
    radiusBackground?: string;
    knobRadius?: string;
    knobWidth?: string;
    knobHeight?: string;
    knobGap?: string;
    knobColor?: string;
}

const ToggleContainer = styled.label``;

const DEFAULT_TOGGLE_STYLES = {
    WIDTH: '48px',
    HEIGHT: '24px',
    KNOB_WIDTH: '12px',
    KNOB_HEIGHT: '12px',
};

export const ToggleBase = styled.span<ToggleProps>`
    position: relative;
    box-sizing: border-box;
    display: inline-grid;
    align-items: center;
    width: ${p => p.width || DEFAULT_TOGGLE_STYLES.WIDTH};
    height: ${p => p.height || DEFAULT_TOGGLE_STYLES.HEIGHT};
    vertical-align: text-top;
    margin: 0 4px;
    input[type='checkbox'] {
        position: absolute;
        margin-left: -9999px;
        visibility: hidden;
        // off state
        & + label {
            display: inline-grid;
            box-sizing: border-box;
            align-items: center;
            outline: none;
            user-select: none;
            width: ${p => p.width || DEFAULT_TOGGLE_STYLES.WIDTH};
            height: ${p => p.height || DEFAULT_TOGGLE_STYLES.HEIGHT};
            background-color: ${p => p.knobColor || '#EAEAEA'};
            border-radius: ${p => p.radius || '256px'};
            cursor: pointer;
            transition: background ease-out 0.3s;
            &:before {
                content: '';
                display: block;
                position: absolute;
                border-radius: ${p => p.radiusBackground || '256px'};
                width: calc(${p => p.width || DEFAULT_TOGGLE_STYLES.WIDTH} - 2 * ${p => p.borderWidth || '2px'});
                height: calc(${p => p.height || DEFAULT_TOGGLE_STYLES.HEIGHT} - 2 * ${p => p.borderWidth || '2px'});
                background-color: ${p => p.backgroundColor || colors.white};
                left: ${p => p.borderWidth || '2px'};
            }
            &:after {
                display: block;
                position: absolute;
                content: '';
                width: ${p => p.knobWidth || DEFAULT_TOGGLE_STYLES.KNOB_WIDTH};
                height: ${p => p.knobHeight || DEFAULT_TOGGLE_STYLES.KNOB_HEIGHT};
                border-radius: ${p => p.knobRadius || '100%'};
                background-color: ${p => p.knobColor || '#EAEAEA'};
                transition: all ease-out 0.4s;
                margin-left: ${p => p.knobGap || '4px'};
            }
        }
        // on state
        &:checked {
            & + label {
                background-color: ${p => p.borderColor || colors.brandLight};
                &:before {
                    background-color: ${p => p.backgroundColor || colors.white};
                }
                &:after {
                    margin-left: calc(
                        100% - ${p => p.knobWidth || DEFAULT_TOGGLE_STYLES.KNOB_WIDTH} - ${p => p.knobGap || '4px'}
                    );
                    transition: all ease-out 0.2s;
                    background-color: ${p => p.knobColor || colors.brandLight};
                }
            }
            &:disabled {
                & + label {
                    background-color: ${p => p.backgroundColorDisabled || '#eee'};
                    &:after {
                        box-shadow: none;
                    }
                }
            }
        }
        // disabled
        &:disabled {
            & + label {
                background-color: ${p => p.backgroundColorDisabled || '#eee'};
                cursor: default;
                &:after {
                    box-shadow: none;
                    background-color: ${p => p.backgroundColorDisabled || '#eee'};
                }
            }
        }
    }
`;

export const Toggle = React.forwardRef((props: ToggleProps, ref: React.Ref<HTMLInputElement>) => {
    const { className, name, isChecked = false, isDisabled = false, value = '', onToggle = () => true } = props;

    return (
        <ToggleBase className={className} {...props}>
            <input
                ref={ref}
                onChange={onToggle}
                type={'checkbox'}
                defaultChecked={isChecked}
                id={name}
                name={name}
                value={value}
                disabled={isDisabled}
            />
            <ToggleContainer htmlFor={name} />
        </ToggleBase>
    );
});

const SwitchWrapper = styled.div`
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
`;

export interface SwitchProps {
    label: string;
    isChecked?: boolean;
    onToggle: (checked: boolean) => void;
}

export class Switch extends React.Component<SwitchProps> {
    public switchRef: React.RefObject<HTMLInputElement> = React.createRef();

    constructor(props: SwitchProps) {
        super(props);
    }

    public render(): React.ReactNode {
        const onToggle = () => {
            this.props.onToggle(this.switchRef.current.checked);
        };
        return (
            <SwitchWrapper>
                <Heading isNoMargin={true} asElement="h3" size={'small'}>
                    {this.props.label}
                </Heading>
                <Toggle
                    ref={this.switchRef}
                    isChecked={this.props.isChecked}
                    onToggle={onToggle}
                    knobGap={'6px'}
                    name={this.props.label}
                />
            </SwitchWrapper>
        );
    }
}