Changing state re-renders the component in a way that breaks animation about react-styleguidist HOT 19 CLOSED

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?

from react-styleguidist.

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>

from react-styleguidist.

Fixed in #134.

from react-styleguidist.

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.

from react-styleguidist.

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

from react-styleguidist.

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

from react-styleguidist.

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

from react-styleguidist.

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?

from react-styleguidist.

That’s how it works now.

from react-styleguidist.

@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()

from react-styleguidist.

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

from react-styleguidist.

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.

from react-styleguidist.

Seems like related.

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

from react-styleguidist.

@mik01aj @zammer Could you try it?

from react-styleguidist.

Yes, I'll have a look at that.

from react-styleguidist.

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?

from react-styleguidist.

@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

from react-styleguidist.

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

from react-styleguidist.

Sorry didn't understand what to do :/

from react-styleguidist.