<commit_before>// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. All it does is render <div>ButtonPrimary</div> at the bottom
// of the page.

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import SiteBanner from 'brave-ui/features/rewards/siteBanner'
import { initLocale } from 'brave-ui'
import locale from 'locale/en'

class BraveRewardsPageForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      title: props.details.title || 'YOUR TITLE',
      description: props.details.description || 'A brief description',
      backgroundImage: props.details.backgroundUrl,
      logo: props.details.logoUrl,
      donationAmounts: props.details.donationAmounts || [1, 5, 10],
      socialLinks: props.details.socialLinks || {'twitter': '@', 'youtube': '@', 'twitch': '@'},
    };

    this.updateDescription = this.updateDescription.bind(this);
    this.updateTwitch = this.updateTwitch.bind(this);
    this.updateYoutube = this.updateYoutube.bind(this);
    this.updateTwitter = this.updateTwitter.bind(this);
    this.handleLogoImageChange = this.handleLogoImageChange.bind(this);
    this.handleBackgroundImageChange = this.handleBackgroundImageChange.bind(this);
    this.handleDonationAmountsChange = this.handleDonationAmountsChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  isNormalInteger(str) {
    return /^\+?(0|[1-9]\d*)$/.test(str);
  }

  convertDonationAmounts(donationAmounts) {
    if (donationAmounts == null) return null;

    return donationAmounts.map(
      amount => ({
        'tokens': amount,
        'converted': this.props.conversionRate * amount,
        'selected': false
      })
    );
  }

  handleDonationAmountsChange(event) {
    this.setState({
      donationAmounts:
        document.getElementById("donation-amounts-input").value.split(',').map(Number)
    });
  }

  handleLogoImageChange(event) {
    this.setState({logo: URL.createObjectURL(event.target.files[0])});
    var logoImageDiv = document.getElementsByClassName("brave-rewards-banner--logo-no-attachment")[0];
    var logoDiv = document.getElementsByClassName("sc-dnqmqq")[0];

    if (this.state.logo != null) {
      logoImageDiv.classList.remove("brave-rewards-banner--logo-no-attachment");
      logoImageDiv.classList.add("brave-rewards-banner--logo-camera");
      logoDiv.classList.add("brave-rewards-banner--logo-parent");
    }
  }

  applyFade() {
    if(this.props.editMode){
      let bgClass = document.getElementsByClassName('sc-EHOje')[0].classList[1];
      let bgElement = document.getElementsByClassName('sc-EHOje ' + bgClass)[0];
      let bgStyle = getComputedStyle(bgElement);
      let bgUrl = bgStyle.background.match(/url\(([^)]+)\)/i)[1];
      let bgFaded = 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(' + bgUrl + ')';

      //Check for default image
      if(!bgUrl.includes('/rewards/siteBanner/assets/')){
        bgElement.style.backgroundImage = bgFaded
      }
    }
  }

  handleBackgroundImageChange(event) {
    this.setState({backgroundImage: URL.createObjectURL(event.target.files[0])});
    this.applyFade();
  }

  setupBackgroundLabel() {
    // Allow uploads
    var backgroundButton = document.createElement("button");
    backgroundButton.id = "background-image-select-button";
    backgroundButton.classList.add("camera-background");

    var backgroundInput = document.createElement("input");
    backgroundInput.id="background-image-select-input";
    backgroundInput.type="file";
    backgroundInput.style.display = "none";
    backgroundInput.onchange = this.handleBackgroundImageChange;

    backgroundButton.addEventListener("click", function (e) {
      if (backgroundInput) {
        backgroundInput.click();
      }
    }, false);

    var label = document.createElement("label");
    label.innerHTML="900 x 176";
    label.classList.add("brave-rewards-banner--background-label");

    var backgroundDiv = document.getElementsByClassName("sc-EHOje")[0];
    var callToActionDiv = document.createElement("div");
    callToActionDiv.classList.add("brave-rewards-banner--background-camera");
    backgroundDiv.append(callToActionDiv);
    callToActionDiv.appendChild(backgroundInput);
    callToActionDiv.appendChild(backgroundButton);
    callToActionDiv.appendChild(label);
  }

  setupLogoLabel() {
    // Allow uploads
    var logoButton = document.createElement("button");
    logoButton.id = "logo-image-select-button";
    logoButton.classList.add("camera-background");

    var logoInput = document.createElement("input");
    logoInput.id="logo-image-select-input";
    logoInput.type="file";
    logoInput.style.display = "none";
    logoInput.onchange = this.handleLogoImageChange;

    logoButton.addEventListener("click", function (e) {
      if (logoInput) {
        logoInput.click();
      }
    }, false);

    var label = document.createElement("label");
    label.innerHTML="148 x 148";
    label.classList.add("brave-rewards-banner--logo-label");

    var logoDiv = document.getElementsByClassName("sc-dnqmqq")[0];
    logoDiv.classList.add("brave-rewards-banner--logo-parent");
    var callToActionDiv = document.createElement("div");
    if (this.state.logo == null) {
      callToActionDiv.classList.add("brave-rewards-banner--logo-no-attachment");
    } else {
      callToActionDiv.classList.add("brave-rewards-banner--logo-camera");
    }
    logoDiv.prepend(callToActionDiv);
    callToActionDiv.appendChild(logoInput);
    callToActionDiv.appendChild(logoButton);
    callToActionDiv.appendChild(label);
  }

  componentDidMount() {

    this.applyFade();
<commit_msg>Disable fade as this prevents new uploads for background image<commit_after>// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. All it does is render <div>ButtonPrimary</div> at the bottom
// of the page.

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import SiteBanner from 'brave-ui/features/rewards/siteBanner'
import { initLocale } from 'brave-ui'
import locale from 'locale/en'

class BraveRewardsPageForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      title: props.details.title || 'YOUR TITLE',
      description: props.details.description || 'A brief description',
      backgroundImage: props.details.backgroundUrl,
      logo: props.details.logoUrl,
      donationAmounts: props.details.donationAmounts || [1, 5, 10],
      socialLinks: props.details.socialLinks || {'twitter': '@', 'youtube': '@', 'twitch': '@'},
    };

    this.updateDescription = this.updateDescription.bind(this);
    this.updateTwitch = this.updateTwitch.bind(this);
    this.updateYoutube = this.updateYoutube.bind(this);
    this.updateTwitter = this.updateTwitter.bind(this);
    this.handleLogoImageChange = this.handleLogoImageChange.bind(this);
    this.handleBackgroundImageChange = this.handleBackgroundImageChange.bind(this);
    this.handleDonationAmountsChange = this.handleDonationAmountsChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  isNormalInteger(str) {
    return /^\+?(0|[1-9]\d*)$/.test(str);
  }

  convertDonationAmounts(donationAmounts) {
    if (donationAmounts == null) return null;

    return donationAmounts.map(
      amount => ({
        'tokens': amount,
        'converted': this.props.conversionRate * amount,
        'selected': false
      })
    );
  }

  handleDonationAmountsChange(event) {
    this.setState({
      donationAmounts:
        document.getElementById("donation-amounts-input").value.split(',').map(Number)
    });
  }

  handleLogoImageChange(event) {
    this.setState({logo: URL.createObjectURL(event.target.files[0])});
    var logoImageDiv = document.getElementsByClassName("brave-rewards-banner--logo-no-attachment")[0];
    var logoDiv = document.getElementsByClassName("sc-dnqmqq")[0];

    if (this.state.logo != null) {
      logoImageDiv.classList.remove("brave-rewards-banner--logo-no-attachment");
      logoImageDiv.classList.add("brave-rewards-banner--logo-camera");
      logoDiv.classList.add("brave-rewards-banner--logo-parent");
    }
  }

  applyFade() {
    if(this.props.editMode){
      let bgClass = document.getElementsByClassName('sc-EHOje')[0].classList[1];
      let bgElement = document.getElementsByClassName('sc-EHOje ' + bgClass)[0];
      let bgStyle = getComputedStyle(bgElement);
      let bgUrl = bgStyle.background.match(/url\(([^)]+)\)/i)[1];
      let bgFaded = 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(' + bgUrl + ')';

      //Check for default image
      if(!bgUrl.includes('/rewards/siteBanner/assets/')){
        bgElement.style.backgroundImage = bgFaded
      }
    }
  }

  handleBackgroundImageChange(event) {
    this.setState({backgroundImage: URL.createObjectURL(event.target.files[0])});
    // (<NAME>): TODO: We'll revisit this later
    //    this.applyFade();
  }

  setupBackgroundLabel() {
    // Allow uploads
    var backgroundButton = document.createElement("button");
    backgroundButton.id = "background-image-select-button";
    backgroundButton.classList.add("camera-background");

    var backgroundInput = document.createElement("input");
    backgroundInput.id="background-image-select-input";
    backgroundInput.type="file";
    backgroundInput.style.display = "none";
    backgroundInput.onchange = this.handleBackgroundImageChange;

    backgroundButton.addEventListener("click", function (e) {
      if (backgroundInput) {
        backgroundInput.click();
      }
    }, false);

    var label = document.createElement("label");
    label.innerHTML="900 x 176";
    label.classList.add("brave-rewards-banner--background-label");

    var backgroundDiv = document.getElementsByClassName("sc-EHOje")[0];
    var callToActionDiv = document.createElement("div");
    callToActionDiv.classList.add("brave-rewards-banner--background-camera");
    backgroundDiv.append(callToActionDiv);
    callToActionDiv.appendChild(backgroundInput);
    callToActionDiv.appendChild(backgroundButton);
    callToActionDiv.appendChild(label);
  }

  setupLogoLabel() {
    // Allow uploads
    var logoButton = document.createElement("button");
    logoButton.id = "logo-image-select-button";
    logoButton.classList.add("camera-background");

    var logoInput = document.createElement("input");
    logoInput.id="logo-image-select-input";
    logoInput.type="file";
    logoInput.style.display = "none";
    logoInput.onchange = this.handleLogoImageChange;

    logoButton.addEventListener("click", function (e) {
      if (logoInput) {
        logoInput.click();
      }
    }, false);

    var label = document.createElement("label");
    label.innerHTML="148 x 148";
    label.classList.add("brave-rewards-banner--logo-label");

    var logoDiv = document.getElementsByClassName("sc-dnqmqq")[0];
    logoDiv.classList.add("brave-rewards-banner--logo-parent");
    var callToActionDiv = document.createElement("div");
    if (this.state.logo == null) {
      callToActionDiv.classList.add("brave-rewards-banner--logo-no-attachment");
    } else {
      callToActionDiv.classList.add("brave-rewards-banner--logo-camera");
    }
    logoDiv.prepend(callToActionDiv);
    callToActionDiv.appendChild(logoInput);
    callToActionDiv.appendChild(logoButton);
    callToActionDiv.appendChild(label);
  }

  componentDidMount() {

//    this.applyFade();

{'fraction_non_alphanumeric': 0.14163310770285323, 'fraction_numerical': 0.006683231942421386, 'mean_word_length': 3.8694201084689195, 'pattern_counts': {'":': 0, '<': 10, '<?xml version=': 0, '>': 12, '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': '5558689', 'n_tokens_mistral': 3615, 'n_tokens_neox': 3532, 'n_words': 553}