<commit_before>// @flow
import { connect } from 'react-redux';
import { Divider, Slider, TextField, Toggle } from 'material-ui';
import { MAX_TEXT_LENGTH } from '../variables';
import { t } from 'i18next';
import { updateAnimation } from 'Actions/animations';
import Radium from 'radium';
import React from 'react';
import TextPreview from './TextPreview';
import font from 'font';
import type { Animation } from 'Reducer';

type Props = {
  animation: Animation,
  currentText?: ?string,
  updateAnimationAction: typeof updateAnimation,
};

type State = {
  livePreview: boolean,
};

const style = {
  noShrink: {
    flexShrink: 0,
  },
  wrapper: {
    display: 'inline-flex',
    flex: '1 1 0',
    flexDirection: 'column',
    overflowX: 'auto',
    overflowY: 'auto',
    padding: 20,
  },
  sliderContainer: {
    display: 'flex',
    alignItems: 'center',
    marginTop: 15,
  },
  slider: {
    marginTop: 0,
    marginBottom: -10,
    flex: '1 1 75%',
    marginRight: 15,
  },
  sliderLabel: {
    marginTop: -10,
    marginBottom: 0,
    flex: '1 1 25%',
    marginRight: 10,
    fontFamily: 'Roboto, sans-serif',
  },
};

@Radium
class TextEditor extends React.Component<Props, State> {
  state: State = {
    livePreview: true,
  };
  handleChange(prop: string, e: SyntheticEvent<any>) {
    const { animation } = this.props;

	e.target.value = deUmlaut(e.target.value);
	e.target.value = e.target.value.split('').filter(c => font[c]).join('');
    // $FlowFixMe
    if (e.target.value.length > MAX_TEXT_LENGTH) {
      return;
    }
    this.props.updateAnimationAction(
      Object.assign({}, animation, {
        // $FlowFixMe
        [prop]: e.target.value,
      })
    );
	
	function deUmlaut(value){
	  value = value.toLowerCase();
	  value = value.replace(/ä/g, 'ae');
	  value = value.replace(/ö/g, 'oe');
	  value = value.replace(/ü/g, 'ue');
	  value = value.replace(/Ä/g, 'Ae');
	  value = value.replace(/Ö/g, 'Oe');
	  value = value.replace(/Ü/g, 'Ue');
	  value = value.replace(/ß/g, 'ss');
	  return value;
	}
  }
  handleSpeedChange = (e: SyntheticEvent<*>, value: number) => {
    const { animation } = this.props;

    this.props.updateAnimationAction(
      Object.assign({}, animation, {
        speed: value,
      })
    );
  };
  handleDelayChange = (e: SyntheticEvent<*>, value: number) => {
    const { animation } = this.props;

    this.props.updateAnimationAction(
      Object.assign({}, animation, {
        delay: value,
      })
    );
  };
  handleRepeatChange = (e: SyntheticEvent<*>, value: number) => {
    const { animation } = this.props;

    this.props.updateAnimationAction(
      Object.assign({}, animation, {
        repeat: value,
      })
    );
  };
  handleDirectionChange = (e: SyntheticEvent<*>, toggled: boolean) => {
    const { animation } = this.props;

    this.props.updateAnimationAction(
      Object.assign({}, animation, {
        direction: toggled ? 1 : 0,
      })
    );
  };
  handlePreviewChange = (e: SyntheticEvent<*>, toggled: boolean) => {
    this.setState({
      livePreview: toggled,
    });
  };
  render() {
    const { animation } = this.props;
    const { livePreview } = this.state;

    return (
      <div style={style.wrapper}>
        <TextPreview
          delay={animation.delay}
          repeat={animation.repeat}
          rtl={animation.direction === 1}
          livePreview={livePreview}
          text={animation.text}
          speed={animation.speed}
        />
        <Divider />
        <TextField
          style={style.noShrink}
          id="text"
          value={animation.text || ' '}
          onChange={this.handleChange.bind(this, 'text')}
          floatingLabelText={t('textEditor.textPlaceholder')}
          placeholder={t('textEditor.textPlaceholder')}
          floatingLabelFixed
        />
        <TextField<commit_msg>convert Umlaute (öäü) to 2 character representations, filtering all other illegal characters, improved check for maximum length<commit_after>// @flow
import { connect } from 'react-redux';
import { Divider, Slider, TextField, Toggle } from 'material-ui';
import { MAX_TEXT_LENGTH } from '../variables';
import { t } from 'i18next';
import { updateAnimation } from 'Actions/animations';
import Radium from 'radium';
import React from 'react';
import TextPreview from './TextPreview';
import font from 'font';
import type { Animation } from 'Reducer';

type Props = {
  animation: Animation,
  currentText?: ?string,
  updateAnimationAction: typeof updateAnimation,
};

type State = {
  livePreview: boolean,
};

const style = {
  noShrink: {
    flexShrink: 0,
  },
  wrapper: {
    display: 'inline-flex',
    flex: '1 1 0',
    flexDirection: 'column',
    overflowX: 'auto',
    overflowY: 'auto',
    padding: 20,
  },
  sliderContainer: {
    display: 'flex',
    alignItems: 'center',
    marginTop: 15,
  },
  slider: {
    marginTop: 0,
    marginBottom: -10,
    flex: '1 1 75%',
    marginRight: 15,
  },
  sliderLabel: {
    marginTop: -10,
    marginBottom: 0,
    flex: '1 1 25%',
    marginRight: 10,
    fontFamily: 'Roboto, sans-serif',
  },
};

@Radium
class TextEditor extends React.Component<Props, State> {
  state: State = {
    livePreview: true,
  };
  handleChange(prop: string, e: SyntheticEvent<any>) {
    const { animation } = this.props;

    e.target.value = this.deUmlaut(e.target.value);
    e.target.value = e.target.value.split('').filter(c => font[c.charCodeAt(0)]).join('');
    // $FlowFixMe
    e.target.value = e.target.value.substring(0, MAX_TEXT_LENGTH);
    this.props.updateAnimationAction(
      Object.assign({}, animation, {
        // $FlowFixMe
        [prop]: e.target.value,
      })
    );
  }
  handleSpeedChange = (e: SyntheticEvent<*>, value: number) => {
    const { animation } = this.props;

    this.props.updateAnimationAction(
      Object.assign({}, animation, {
        speed: value,
      })
    );
  };
  handleDelayChange = (e: SyntheticEvent<*>, value: number) => {
    const { animation } = this.props;

    this.props.updateAnimationAction(
      Object.assign({}, animation, {
        delay: value,
      })
    );
  };
  handleRepeatChange = (e: SyntheticEvent<*>, value: number) => {
    const { animation } = this.props;

    this.props.updateAnimationAction(
      Object.assign({}, animation, {
        repeat: value,
      })
    );
  };
  handleDirectionChange = (e: SyntheticEvent<*>, toggled: boolean) => {
    const { animation } = this.props;

    this.props.updateAnimationAction(
      Object.assign({}, animation, {
        direction: toggled ? 1 : 0,
      })
    );
  };
  handlePreviewChange = (e: SyntheticEvent<*>, toggled: boolean) => {
    this.setState({
      livePreview: toggled,
    });
  };
  deUmlaut = (value) => {
    value = value.replace('ä', 'ae');
    value = value.replace('ö', 'oe');
    value = value.replace('ü', 'ue');
    value = value.replace('Ä', 'Ae');
    value = value.replace('Ö', 'Oe');
    value = value.replace('Ü', 'Ue');
    value = value.replace('ß', 'ss');
    return value;
  };
  render() {
    const { animation } = this.props;
    const { livePreview } = this.state;

    return (
      <div style={style.wrapper}>
        <TextPreview
          delay={animation.delay}
          repeat={animation.repeat}
          rtl={animation.direction === 1}
          livePreview={livePreview}
          text={animation.text}
          speed={animation.speed}
        />
        <Divider />
        <TextField
          style={style.noShrink}
          id="text"
          value={animation.text || ' '}
          onChange={this.handleChange.bind(this, 'text')}
          floatingLabelText={t('textEditor.textPlaceholder')}
          placeholder={t('textEditor.textPlaceholder')}
          floatingLabelFixed
        />
        <TextField
{'fraction_non_alphanumeric': 0.15485194205871042, 'fraction_numerical': 0.00833226509421869, 'mean_word_length': 2.6906338694418164, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 39, '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': '6486041', 'n_tokens_mistral': 2557, 'n_tokens_neox': 2474, 'n_words': 536}