react-component / css-transition-group Goto Github PK

import $ from 'jquery';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactTransitions from 'react-addons-css-transition-group';

...

render() {
  let url = this.state.picList[this.state.focus];

  return (
    <div className='gb-slider'>
      <ReactTransitions
        transitionName='anim'
        transitionEnterTimeout={300}
        transitionLeaveTimeout={500}
      >
        <div className='viewer' key={ url } style={{ backgroundImage: 'url(' + url + ')' }} />
      </ReactTransitions>          
    </div>
  );
}

Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('example-enter-active example-enter-active ') contains HTML space characters, which are not valid in tokens.
at addClass (webpack:///./~/preact-css-transition-group/dist/preact-css-transition-group.js?:83:18)
    at CSSTransitionGroupChild._this.flushClassNameQueue (webpack:///./~/preact-css-transition-group/dist/preact-css-transition-group.js?:225:5)

.example-enter{
  opacity: 0.01;
}

.example-enter.example-enter-active{
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave{
  opacity: 1;
}

.example-leave.example-leave-active{
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

class MainOfferContainerInfiniteScroller extends Component {
  constructor(props){
    super(props)

    const eventIds = this.props.eventIds;
    const captions = this.props.captions;
    const _captions = captions ? captions: {};
    const _eventIds = eventIds? eventIds: [];
    this.state = {
      isLoading: false,
      eventIds:_eventIds,
      captions: _captions,
      data: [],
      currentData: [],
      countLimit:150
    }
    this._loadMoreInfiniteContent = this._loadMoreInfiniteContent.bind(this);
    this._renderWayPoint = this._renderWayPoint.bind(this)
    this._renderContent = this._renderContent.bind(this)
    this._handlePositionChange = this._handlePositionChange.bind(this)
  }
  _handlePositionChange(){
    console.info('position changed. ..');
  }
  _loadMoreInfiniteContent(){
    if(nextStart > this.state.countLimit){
      console.info('countLimit exceeded, return...');
      return;
    }
    //else fetch more
    this.setState({
      isLoading: true
    })
    let nextUrl = get_nextReqUrl();
    fetch(nextUrl)
      .then((response) => {
      return response.json();
    }).then((responseData) => {
      const _data = responseData.genericOfferItems;
      let _nextData = this.state.data;
      _nextData = [...this.state.data, ..._data]
      this.setState({
        data: _nextData,
        isLoading: false
      })
      
    }).catch((err) => {
      console.log('fetch error', err);
    });
  }
  _renderWayPoint(){
    if(!this.state.isLoading){
      return (<Waypoint
        bottomOffset='-500px'
        onEnter={this._loadMoreInfiniteContent}
        onPositionChange={this._handlePositionChange}/>)
    }
  }
  _renderContent(){
    console.log('running _renderContent. . .WTF');
    const OfferList = this.state.data.filter(offer=>(
      offer.eventId === 'DealofDayOffers'))
      .map((thisOffer, i) => (<OfferUnitLi item={thisOffer} i={i}/>))

      //return (OfferList)
    return (<PreactCSSTransitionGroup
              transitionName="example"
              transitionEnterTimeout={500}
              transitionLeaveTimeout={300}>
              {OfferList}
            </PreactCSSTransitionGroup>)

  }
  componentDidMount(){
      // +++++ fetchStart +++++ //
    fetch(firstReqUrl)
      .then((response) => {
      return response.json();
    }).then((responseData) => {
      const _data = responseData.genericOfferItems;
      //console.log('consume data: ', _data);
      this.setState({data: _data});
      //console.log('updatedState: ', this.state);
    }).catch((err) => {
      //console.log('fetch error', err);
    });
    // +++++ /fetchStart +++++ //
  }
  render(){
    setTimeout(function(){
      const blazy = new Blazy({
        loadInvisible: true
      });
    }, 100);
    const {eventIds, captions} = this.props;
    const {data} = this.state;

    return (<div id="mainWrapperX_newX999" className="inHouseDevs_pageWrapper">
        <BtcContainer>
          <div className='infiniteLoadCount'>
            Items Loaded: {this.state.data.length}
          </div>
            <div className="OfferContainer">
            {eventIds.map(eventId=>{
              if(eventId.indexOf('BannerX99') > -1){
                return (
                  <SectionX id={eventId}>
                    <InnerCard_sectionXWrap>
                      <ul className="offers_WrapperX99 footerBannerX99_Wrapper">
                        {data.filter(offer=>(
                          offer.eventId === eventId))
                          .map((thisOffer, i) => (<OfferUnitListBannerX item={thisOffer} i={i}/>))
                        }
                      </ul>
                    </InnerCard_sectionXWrap>
                  </SectionX>
                )
              }
              if(eventId.indexOf('superDod') > -1){
                return (
                  <SectionX id={eventId}>
                    <InnerCard_sectionXWrap>
                    <CaptionWrapper caption={captions[eventId]} eventId={eventId} stylingClass="gradient_orangeToRed"/>
                    <OfferContainerWrapperDoD>
                      <ul className="offers_WrapperX99 relFontSize_util ">
                        {data.filter(offer=>(
                          offer.eventId === eventId))
                          .map((thisOffer, i) => (<OfferUnitLi item={thisOffer} i={i}/>))
                        }
                      </ul>
                    </OfferContainerWrapperDoD>
                    </InnerCard_sectionXWrap>
                  </SectionX>
                )
              }
              else {
                return (
                  <SectionX id="DealofDayOffers" eventId="DealofDayOffers">
                    <CaptionWrapper caption={captions[eventId]} eventId={eventId} stylingClass="gradient_greenToBlue"/>
                    <InnerCard_sectionXWrap>
                      <OfferContainerWrapperNormal>
                        <div className='infiniteContent_Container' style={{"overflow": "scroll-y"}} >
                          <ul className="offers_WrapperX99 relFontSize_util " >
                            {this._renderContent()}
                          </ul>
                          <div className='infiniteContent_waypoint'>
                            {this._renderWayPoint()}
                          </div>
                          Loading more items. . .
                        </div>
                      </OfferContainerWrapperNormal>
                    </InnerCard_sectionXWrap>
                  </SectionX>
                )
              }
            }

              )}
        </div>
        </BtcContainer>
      </div>)
  }

}


export default MainOfferContainerInfiniteScroller;