All files / src/components/elements/Toggle Toggle.tsx

0% Statements 0/13
0% Branches 0/10
0% Functions 0/6
0% Lines 0/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52                                                                                                       
import * as React from "react";
import { Flex, Button } from "rimble-ui";
import { colors } from "../../../themes";
 
const SelectedToggle: React.FunctionComponent<any> = (props) => (
  <Button {...props} style={{ ...props.style, pointerEvents: "none" }} fontWeight="normal" size="small" />
);
const UnselectedToggle: React.FunctionComponent<any> = (props) => (
  <Button.Outline
    {...props}
    style={{ ...props.style, borderColor: colors.primary.base }}
    fontWeight="normal"
    size="small"
  />
);
 
export interface ToggleProps {
  options: [string, string];
  onChange(selected: string): void;
  style?: any;
  width?: string;
  defaultSelected?: string;
}
export const Toggle: React.FunctionComponent<ToggleProps> = (props) => {
  const [selected, setSelected] = React.useState(props.defaultSelected || props.options[0]);
  function onChange(selected: string) {
    props.onChange(selected);
    setSelected(selected);
  }
 
  const LeftToggle = selected === props.options[0] ? SelectedToggle : UnselectedToggle;
  const RightToggle = selected === props.options[1] ? SelectedToggle : UnselectedToggle;
  return (
    <Flex width={props.width} style={props.style}>
      <LeftToggle
        borderRadius="4px 0 0 4px"
        style={{ borderRight: 0, width: props.width && "50%" }}
        onClick={() => onChange(props.options[0])}
      >
        {props.options[0]}
      </LeftToggle>
      <RightToggle
        borderRadius="0 4px 4px 0"
        style={{ borderLeft: 0, width: props.width && "50%" }}
        onClick={() => onChange(props.options[1])}
      >
        {props.options[1]}
      </RightToggle>
    </Flex>
  );
};