Skip to content

Instantly share code, notes, and snippets.

@dmitryshelomanov

dmitryshelomanov/.jsx

Last active December 20, 2017 11:28
Download ZIP

Revisions

  1. Shelomanov Dmitry revised this gist Dec 20, 2017. 1 changed file with 7 additions and 4 deletions.
    11 changes: 7 additions & 4 deletions .jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -35,17 +35,17 @@ class GifChangeContainer extends Component {
    h: this.image.height,
    })

    uploadBase64 = async (base64) => {
    uploadBase64 = async () => {
    const { carousel, ids } = this.props

    try {
    const image = await api.uploadImageForGif({
    const { data } = await api.uploadImageForGif({
    data: carousel.base64,
    name: ids,
    })

    this.setState({
    image,
    image: data,
    isLoading: false,
    })
    }
    @@ -83,7 +83,10 @@ class GifChangeContainer extends Component {
    }
    {
    !isLoading && (
    image
    <img
    src={`http://localhost:8000/${image.url}`}
    alt="img"
    />
    )
    }
    </FlexWrap>
  2. Shelomanov Dmitry created this gist Dec 20, 2017.
    105 changes: 105 additions & 0 deletions .jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,105 @@
    import React, { Component } from 'react'
    import styled from 'styled-components'
    import PropTypes from 'prop-types'
    import {
    FlexWrap,
    } from '../'
    import { api } from '../../helpers/api'


    class GifChangeContainer extends Component {
    constructor(props) {
    super(props)
    this.state = {
    isLoading: true,
    isError: false,
    defaultWidth: 0,
    defaultHeight: 0,
    image: null,
    }
    this.image = new Image()
    this.image.src = props.carousel.base64
    this.image.onload = () => {
    const { w, h } = this.calculatePreloader()

    this.setState({
    defaultHeight: h,
    defaultWidth: w,
    })
    }
    this.uploadBase64()
    }

    calculatePreloader = () => ({
    w: this.image.width,
    h: this.image.height,
    })

    uploadBase64 = async (base64) => {
    const { carousel, ids } = this.props

    try {
    const image = await api.uploadImageForGif({
    data: carousel.base64,
    name: ids,
    })

    this.setState({
    image,
    isLoading: false,
    })
    }
    catch (error) {
    this.setState({ isError: true })
    }
    }

    render() {
    const { className } = this.props
    const {
    defaultHeight,
    defaultWidth,
    isLoading,
    image,
    isError,
    } = this.state

    return (
    <FlexWrap
    width={`${defaultWidth}px`}
    height={`${defaultHeight}px`}
    className={className}
    ai="center"
    jc="center"
    >
    {
    isLoading && (
    <img
    className="preloader"
    src="https://www.oraclefitness.com/uploads/8/5/5/6/85569856/39_4_orig.gif"
    alt="preloader"
    />
    )
    }
    {
    !isLoading && (
    image
    )
    }
    </FlexWrap>
    )
    }
    }

    GifChangeContainer.propTypes = {
    carousel: PropTypes.shape({
    w: PropTypes.number,
    base64: PropTypes.string,
    }).isRequired,
    className: PropTypes.string.isRequired,
    }

    export const GifItem = styled(GifChangeContainer)`
    margin-right: 15px;
    background-color: #fff0ed;
    `