React-styleguidist: Changing state re-renders the component in a way that breaks animation

[chrisdrackett]

First off I want to say I'm pretty excited about this project. I've been working on my own styleguide based on much of the same tech, so I'm excited to potentially work along side others.

One thing I'm currently doing is letting example files be either markdown or full on react components. This way if I need to store state or similar to show examples of how a component works I can. I'm still digging into your code, so maybe this is currently possible, but if not it might be a nice thing to have if there is a simple way to provide it.

[sapegin]

So you want to be able to use (kind of) Readme.jsx instead of Readme.md for some components? It’s not possible but you can use require() in examples so you can share code between examples, etc.

But it would be nice to be able to store particular examples in files.

[sapegin]

Now examples can have a state. Will it solve your issue?

[mik01aj]

@chrisdrackett any feedback? I'd like to close this ticket.

[chrisdrackett]

I'll work on this today so you guys can close the ticket. Thanks for checking in, and sorry for the delay!

[chrisdrackett]

ok, so I hooked this up on one of my components today. this is a switch component that animates between two states. For some reason in the styleguide the component jumps between its two states without animation. Its almost like its being re-rendered from scratch on state change?

[sapegin]

That’s how it works now.

[mik01aj]

@sapegin, could you explain this further? I see that the example styleguide modal uses state and setState, but the examples loader passes only setState to it.

---

Ah, I got it, it's done in the Preview component... but I don't understand why you reload the component each time instead of creating a new react class for the example and then using the native setState and stuff. I mean making a component class like this:

let PreviewDemo = React.createClass({

    render: function () {
        try {
            return executeCode(this.props.code, this.state, this.setState.bind(this));
        } catch (err) {
            return makeRedBox(err);
        }
    }

})

...and then rendering this one in the nested ReactDOM.render()

[sapegin]

I should try to do it, or you can try if you have time ;-)

[mik01aj]

P.S. I realized one more thing: indepentently of what I've written above, the way you pass state and setState is inconsistent. Imho it's better to either pass both of them as a function argument, or to append them both to the code. Mixing these 2 methods is confusing.

[zammer]

I'm having issues with controlled form components losing focus onChange which means you can only type in one letter at once.

Although this example is using a custom form input the behaviour is the same with native inputs.
It seems like its related to this issue or am I doing something wrong?

[mik01aj]

Seems like related.

@sapegin, so how about using React.createClass like I suggested above?

[sapegin]

@mik01aj @zammer Could you try it?

[zammer]

Yes, I'll have a look at that.

[MoOx]

I am stuck with this issue as well. It's pretty annoying to have a state that break all the rendering :/
Anything I can do to help?
Does anyone have fixed this locally?

[vslinko]

I'm using my own wrapper to store state:

/* tslint:disable:no-any */

import * as React from 'react';

import Debug from '../debug/debug';

export interface IPlaygroundProps extends React.Props<Playground> {
  initialState?: IPlaygroundState;
  showState?: boolean;
  visibleEvents?: number;
  children: (
    state: IPlaygroundState,
    setState: (state: IPlaygroundState) => void,
    log: (type: string, event: any) => void
  ) => JSX.Element;
}

export interface IEvent {
  date: Date;
  value: any;
  type: string;
}

export interface IPublicState {
  [key: string]: any;
}

export interface IPlaygroundState {
  events?: IEvent[];
  publicState?: IPublicState;
}

export default class Playground extends React.Component<IPlaygroundProps, IPlaygroundState> {
  public static defaultProps = {
    visibleEvents: 3,
  };

  public constructor(props: IPlaygroundProps) {
    super(props);
    this.state = {
      events: [],
      publicState: props.initialState || {},
    };
  }

  public render() {
    return (
      <div>
        {this.props.children(
          this.state.publicState,
          (state) => this.handleStateChange(state),
          (type, event) => this.handleLogEvent(type, event)
        )}
        {this.props.showState &&
          <div style={{marginTop: 8}}>
            <Debug force value={this.state.publicState} />
          </div>
        }
        {this.state.events.slice(0, this.props.visibleEvents).map((event) => (
          <div style={{marginTop: 8}}>
            <Debug
              force
              title={`Event '${event.type}', ${event.date.toUTCString()}`}
              value={event.value}
            />
          </div>
        ))}
      </div>
    );
  }

  private handleLogEvent(type: string, value: any) {
    const events = [
      {
        date: new Date(),
        value,
        type,
      },
    ].concat(this.state.events);

    this.setState({
      events,
    });
  }

  private handleStateChange(state: IPublicState) {
    this.setState({
      publicState: Object.assign({}, this.state.publicState, state),
    });
  }
}

(window as any).Playground = Playground;

Usage:

Default:

    <window.Playground initialState={{exampleValue: -0.5}} showState>
      {(state, setState) => (
        <NumberField
          value={state.exampleValue}
          onValueChange={value => setState({exampleValue: value})}
        />
      )}
    </window.Playground>

[MoOx]

@vslinko Thanks for sharing this.

Here is my simpler version (flow)

// @flow
import { Element, Component } from "react"

type Props = {
  initialState?: State,
  children: (
    state: State,
    setState: (state: State) => void,
  ) => Element,
}

type State = {
  [key: string]: any,
}

export default class Playground extends Component<void, Props, State> {

  state: State;

  constructor(props: Props) {
    super(props)
    this.state = (typeof props.initialState === "object")
      ? props.initialState
      : {}
  }

  handleStateChange(state: State) {
    this.setState(state)
  }

  render(): Element {
    return (
      this.props.children(
        this.state,
        (state) => this.handleStateChange(state),
      )
    )
  }
}

(window).Playground = Playground

[sapegin]

@MoOx If you can try what @mik01aj suggests above and send us a pull request that would be awesome.

[MoOx]

Sorry didn't understand what to do :/

[sapegin]

Fixed in #134.