Form Download

by evgkch

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<div id="app"></div>

SCSS

$widget-color: rgb(242, 242, 244);
$green-color: rgb(29, 182, 119);
$yellow-color: rgb(255, 191, 31);
$red-color: rgb(214, 0, 0);
$blue-color: #438bc1;
$black-color: rgb(30, 30, 30);
$border-color: #d8d8d8;
$border-color-dark:rgb(30, 30, 30);
$dark-color: rgb(80, 80, 80);
body {
  background-color: rgb(30, 30, 30);
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

.body {
  display: flex;
  justify-content: center;
  align-items: center;
  .static-widget {
    display: flex;
    flex-direction: column;
    width: 450px;
    padding: 10px;
    background-color: white;
    .popover-box {
      display: flex;
      align-items: center;
      margin: 5px 0;
      .title {
        flex: 1;
      }
    }
    .blocked {
      .title, .button, .selectedOption, .close {
        color: $border-color !important;
        cursor: default;
      }
    }
    .buttons {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
      .download-buttons {
        display: flex;
        flex-direction: row;
        .download-button {
          margin-right: 5px;
          cursor: pointer;
        }
      }
      .cancel-button {
        div {
          padding: 13px;
          border: solid 1px $border-color;
          background-color: $widget-color;
          cursor: pointer;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          -webkit-transition: all 0.3s;
          -moz-transition: all 0.3s;
          -ms-transition: all 0.3s;
          -o-transition: all 0.3s;
          transition: all 0.3s;
          &:hover {
            color: $widget-color;
            background-color: $blue-color;
            border-color: $blue-color;
          }
        }
      }
    }
  }
}

.select-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 5px 0;
  font-size: 16px;
 ...

Babel + JSX

const updateApp = () => React.render(
	<div style={{ margin: '50px' }}><App /></div>,
  document.getElementById('app')
);

class App extends React.Component {
	constructor(props) {
  	super(props);
  }
  render() {
  	return (
    	<div className="body">
    	  <StaticWidget />
    	</div>    	
    );
  }
}

const data = '{"selectboxes":[{"id":"sortedBy","title":"Сортировать по:","options":[{"id":1,"title":"По номеру происшествия","selected":true},{"id":2,"title":"По дате ⬆","selected":false},{"id":3,"title":"По дате ⬇","selected":false}]}],"checkboxes":[{"id":"emergencyType", "title": "Тип ЧС","selected":true,"options":[{"id":"emergencyType_1","title":"Option_1","selected":false},{"id":"emergencyType_2","title":"Option_2","selected":false},{"id":"emergencyType_3","title":"Option_3","selected":false}]},{"id":"insident","title":"Происшествие","selected":true,"options":null},{"id":"date","title":"Дата и время ЧС/КСИП","selected":true,"options":null}]}';

class StaticWidget extends React.Component {
	constructor(props) {
  	super(props);
    this.state = JSON.parse(data);
    this.changeSelectboxOptions = this.changeSelectboxOptions.bind(this);
    this.changeCheckbox = this.changeCheckbox.bind(this);
    this.changeCheckboxOptions = this.changeCheckboxOptions.bind(this);
  }
	changeSelectboxOptions(selectboxId, optionId) {
  	this.setState({ selectboxes: this.state.selectboxes.map(item =>
    	item.id === selectboxId ? ({...item, options: item.options.map(el => el.id === optionId ? ({...el, selected: true}) : ({...el, selected: false})) }) : item
    )});
  }
  changeCheckbox(checkboxId) {
  	this.setState({ checkboxes: this.state.checkboxes.map(item =>
    	item.id === checkboxId ? ({...item, selected: !item.selected }) : item
    )});
  }
  changeCheckboxOptions(checkboxId, optionId) {
  	this.setState({ checkboxes: this.state.checkboxes.map(item =>
    	item.id === checkboxId && item.selected ? ({...item, options: item.options.map(el => el.id === optionId ?...