<commit_before>import React, { Component } from 'react'
import { RaisedButton, Slider } from 'material-ui'
import type { Steps } from 'types/step'
import StepsEditor from './steps_editor'
import StepsPreview from './steps_preview'
import Box from './box'
import { icon } from './icon'

type Props = {
  steps: Steps,
  onChange: (steps: Steps) => any,
}

type State = {
  steps: Steps,
}

export const initSteps = (length: number = 4): Steps => {
  const list = []
  for (let i = 0; i < length; i += 1) {
    list.push({
      position: i,
      note: 64,
      velocity: 100,
      duration: 1.0,
    })
  }
  return {
    length,
    list,
  }
}

export default class StepsGenerator extends Component<any, Props, State> {
  static defaultProps = {
    steps: initSteps(0),
    onChange: (steps: Steps) => console.log('Step.onChange', steps),
  }

  state: { showEdit: bool, steps: Steps } = {
    length: 4,
    showEdit: false,
    steps: initSteps(0),
  }

  componentWillReceiveProps(nextProps: Props) {
    const { steps } = nextProps
    if (steps !== this.props.steps) {
      this.props.onChange(steps)
      this.setState({ steps })
    }
  }

  setLength(newLength) {
    console.log('setLength', newLength)
    const newSteps = this.state.steps.slice(0)
    if (newSteps.length > newLength) {
      newSteps.splice(newLength - newSteps.length)
    } else if (newSteps.length < newLength) {
      const num = newLength - newSteps.length
      for (let i = 0; i < num; i += 1) {
        newSteps.push(-1)
      }
    }
    console.log(newSteps)

    this.setState({ length: newLength, steps: newSteps })
    this.props.onChange(newSteps)
  }

  props: Props

  render() {
    const { showEdit, steps } = this.state
    const length = steps.length
    if (length <= 0) {
      return null
    }

    return (<Box theme={{ bgColor: '#80DEEA' }}>
      <div className="control">
        <h2>{icon('generator')}step gen</h2>
        length: {length}
        <Slider
          max={16}
          min={1}
          value={length}
          step={1.0}
          onChange={(e, v) => this.setLength(v)}
        />
        <RaisedButton onClick={() => this.setState({ showEdit: !showEdit })}>Edit</RaisedButton>
        <StepsEditor<commit_msg>set length<commit_after>import React, { Component } from 'react'
import { RaisedButton, Slider } from 'material-ui'
import type { Steps } from 'types/step'
import StepsEditor from './steps_editor'
import StepsPreview from './steps_preview'
import Box from './box'
import { icon } from './icon'

type Props = {
  steps: Steps,
  onChange: (steps: Steps) => any,
}

type State = {
  steps: Steps,
}

export const initSteps = (length: number = 4): Steps => {
  const list = []
  for (let i = 0; i < length; i += 1) {
    list.push({
      position: i,
      note: 64,
      velocity: 100,
      duration: 1.0,
    })
  }
  return {
    length,
    list,
  }
}

export default class StepsGenerator extends Component<any, Props, State> {
  static defaultProps = {
    steps: initSteps(0),
    onChange: (steps: Steps) => console.log('Step.onChange', steps),
  }

  state: { showEdit: bool, steps: Steps } = {
    length: 4,
    showEdit: false,
    steps: initSteps(0),
  }

  componentWillReceiveProps(nextProps: Props) {
    const { steps } = nextProps
    if (steps !== this.props.steps) {
      this.props.onChange(steps)
      this.setState({ steps })
    }
  }

  setLength(newLength) {
    const { steps } = this.state
    const newList = steps.list.filter(s => s.position < newLength)
    const newSteps = { length: newLength, list: newList }
    this.setState({ length: newLength, steps: newSteps })
    this.props.onChange(newSteps)
  }

  props: Props

  render() {
    const { showEdit, steps } = this.state
    const length = steps.length
    if (length <= 0) {
      return null
    }

    return (<Box theme={{ bgColor: '#80DEEA' }}>
      <div className="control">
        <h2>{icon('generator')}step gen</h2>
        length: {length}
        <Slider
          max={16}
          min={1}
          value={length}
          step={1.0}
          onChange={(e, v) => this.setLength(v)}
        />
        <RaisedButton onClick={() => this.setState({ showEdit: !showEdit })}>Edit</RaisedButton>
        <StepsEditor
{'fraction_non_alphanumeric': 0.14486638537271448, 'fraction_numerical': 0.011720581340834505, 'mean_word_length': 2.5707112970711297, 'pattern_counts': {'":': 0, '<': 28, '<?xml version=': 0, '>': 31, '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': '7384485', 'n_tokens_mistral': 1466, 'n_tokens_neox': 1412, 'n_words': 360}