ArchiveUpload.jsx

export class ArchiveUpload extends Component {
  constructor(props) {
    super(props)
    this.state = {
      borderColorPreview: false,
      borderPickerPreview: false,
      borderColor: '#fff',
    }
  }

  render() {
    return (
      <FlexWrap
        fd="column"
        width="50%"
      >
        <Button
          text="Загрузить архив с баннером"
        />
        <FlexWrap
          width="100%"
        >
          <TreeWrap>
            <div className="head">структура архива</div>
            <RenderTreeHoc />
          </TreeWrap>
          <CheckBoxWrap>
            <CheckBox
              id="fix"
              type="radio"
              label="Фиксированный формат"
              name="format"
              onChange={({ target }) => {

              }}
            />
            <CheckBox
              id="rubber"
              type="radio"
              label="Резина"
              name="format"
              onChange={({ target }) => {

              }}
            />
            <CheckBox
              id="border"
              type="checkbox"
              label="Добавить border"
              name="border"
              onChange={({ target }) => {
                this.setState({
                  borderColorPreview: !this.state.borderColorPreview,
                })
              }}
            />
            {this.state.borderColorPreview && <ColorPreview
              color={this.state.borderColor}
              onClick={() => {
                this.setState({ borderPickerPreview: !this.state.borderPickerPreview })
              }}
            />}
            {this.state.borderPickerPreview && this.state.borderColorPreview && <ColorPicker
              onChangeComplete={(({ hex }) => {
                this.setState({ borderColor: hex })
              })}
            />}
          </CheckBoxWrap>
        </FlexWrap>
      </FlexWrap>
    )
  }
}