Up Counter

Stateful ReactJS Komponente als Scrivito Widget.

0 Jahre Web-Development
0 Kunden In Europa
0 Projekte Drupal & Scrivito

Wenn ein Scrivito Widget stateful sein soll, muss zwingend eine ReactJS Komponente entwickelt werden, die mit Scrivito “kommuniziert“. Nur so ist es möglich, dass auf der einen Seite Scrivito, mit seinen Möglichkeiten zum Bearbeiten von Inhalten und Attributen, funktioniert, und auf der anderen Seite React den State verwalten kann.

In meinem Up Counter Widget, kann ein Redakteur jeden Wert einfach vorgeben, wie das Beispiel unten zeigt. React zählt bis zu der vorgegebenen Zahl hoch. Durch solche Widgets kann das Scrivito CMS mit Interaktionen und Dynamik arbeiten. Technische Kenntnisse sind für Redakteure nicht notwendig. Es müssen keine Module oder Plug-Ins installiert und konfiguriert werden, und keine externen jQuery Plugins in bestimmte Verzeichnisse hochgeladen werden. Es funktioniert einfach mit meinem Scrivito Theme.

Die wichtigsten Unterschiede zwischen einer stateless und einer stateful Komponente sind in der Datei zu finden, die für's Rendern zuständig ist.

import * as React from 'react';
import * as Scrivito from 'scrivito';

class FactCounterComponent extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
    this.widget = this.props.widget;
    
  }

  tick() {
    if(this.state.seconds <  this.val ) {
    this.setState(prevState => ({
      
      seconds: prevState.seconds + 1
      
    }));
  }
  }

  async componentDidMount() {
    this.speed =  this.widget.get('speed');
    
    this.interval =  setInterval(() => this.tick(), parseInt(this.speed));
    this.val =  this.widget.get('value');
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
    
   <FactContent
      widget={ this.widget }
      sec = { this.state.seconds }
    />
    
    );
  }

}

Scrivito.provideComponent('FactCounterWidget', FactCounterComponent);

  const FactContent = Scrivito.connect(({ widget, sec}) => {
  const key = widget.get('key');
  let value = sec;
  const postfix = widget.get('postfix');
  
  return (
    <div className="fact">

        <span className="value">{ value }  { postfix }</span>
        <span className="key"> { key }</span>
        
    </div>
  );
});