<commit_before>import React from "react";
import PropTypes from "prop-types";

import Switch from "components/switch";

import { darkBlack, slightlyDarkerBlack } from "theme/variables";
import { labelGreyNormal, labelGreySmall } from "theme/mixins";

const borderRadius = 2;

class PreScaleSwitch extends React.Component {
  static propTypes = {
    onChange: PropTypes.func.isRequired,
    position: PropTypes.number.isRequired,
    offset: PropTypes.number
  };

  render() {
    const { offset = 0, position } = this.props;

    const titlePadding = 5;

    const styles = {
      wrapper: {
        position: "relative",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        right: offset
      },

      title: {
        ...labelGreyNormal,
        marginBottom: titlePadding
      },

      switchWrapper: {
        position: "relative"
      },

      labelWrapper: {
        position: "absolute",
        height: "80%",
        top: "50%",
        right: -15,
        transform: "translateY(-50%)",

        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "space-between"
      },

      label: labelGreySmall,

      inner: {
        backgroundColor: darkBlack,
        borderRadius: borderRadius
      },

      outer: {
        backgroundColor: slightlyDarkerBlack,
        borderRadius: borderRadius
      }
    };

    return (
      <div style={styles.wrapper}>
        <div style={styles.title}>PRE-SCALE</div>
        <div style={styles.switchWrapper}>
          <div style={styles.labelWrapper}>
            <div style={styles.label}>1</div>
            <div style={styles.label}>2</div>
            <div style={styles.label}>3</div>
            <div style={styles.label}>4</div>
          </div>
          <Switch
            onChange={() => {}}
            position={position}
            direction="vertical"
            numPositions={4}
            thickness={25}
            length={80}
            padding={4}
            innerThickness={21}
            outerStyle={styles.outer}
            innerStyle={styles.inner}
          />
        </div>
      </div>
    );
  }
}

export default PreScaleSwitch;<commit_msg>migrate preScaleSwitch to hooks<commit_after>import React from "react";

import Switch from "components/switch";

import { darkBlack, slightlyDarkerBlack } from "theme/variables";
import { labelGreyNormal, labelGreySmall } from "theme/mixins";

const noOp = () => {};

const borderRadius = 2;

const styles = {
  wrapper: {
    position: "relative",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center"
  },
  title: {
    ...labelGreyNormal
  },
  switchWrapper: {
    position: "relative"
  },
  labelWrapper: {
    position: "absolute",
    height: "80%",
    top: "50%",
    right: -15,
    transform: "translateY(-50%)",

    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "space-between"
  },
  label: labelGreySmall,
  inner: {
    backgroundColor: darkBlack,
    borderRadius: borderRadius
  },
  outer: {
    backgroundColor: slightlyDarkerBlack,
    borderRadius: borderRadius
  }
};

const PreScaleSwitch = props => {
  const { offset = 0, position } = props;
  const titlePadding = 5;
  return (
    <div style={{ ...styles.wrapper, right: offset }}>
      <div style={{ ...styles.title, marginBottom: titlePadding }}>
        PRE-SCALE
      </div>
      <div style={styles.switchWrapper}>
        <div style={styles.labelWrapper}>
          <div style={styles.label}>1</div>
          <div style={styles.label}>2</div>
          <div style={styles.label}>3</div>
          <div style={styles.label}>4</div>
        </div>
        <Switch
          onChange={noOp}
          position={position}
          direction="vertical"
          numPositions={4}
          thickness={25}
          length={80}
          padding={4}
          innerThickness={21}
          outerStyle={styles.outer}
          innerStyle={styles.inner}
        />
      </div>
    </div>
  );
};

export default PreScaleSwitch;
{'fraction_non_alphanumeric': 0.13355672570607946, 'fraction_numerical': 0.011010052656773576, 'mean_word_length': 2.2170900692840645, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 40, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1198872', 'n_tokens_mistral': 1224, 'n_tokens_neox': 1204, 'n_words': 260}