How to use the react-cosmos-shared2/fixtureState.extendWithValues function in react-cosmos-shared2

To help you get started, we’ve selected a few react-cosmos-shared2 examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github react-cosmos / react-cosmos / packages / react-cosmos-fixture / src / FixtureCapture / props / extendFixtureProps.ts View on Github external
return setElementAtPath(extendedFixture, elPath, element => {
      if (!fsProps || componentTypeChanged(fsProps.componentName)) {
        return {
          ...element,
          key: getElRenderKey(elPath, DEFAULT_RENDER_KEY)
        };
      }

      // Prevent overriding child elements with outdated "children" prop values
      // stored in fixture state
      // See https://github.com/react-cosmos/react-cosmos/pull/920 for context
      const originalProps = element.props;
      const extendedProps = extendWithValues(originalProps, fsProps.values);

      // HACK alert: Editing React Element by hand
      // This is blasphemy, but there are two reasons why React.cloneElement
      // isn't ideal:
      //   1. Props need to overridden (not merged)
      //   2. element.key has to be set to control whether the prev instance
      //      should be reused on not
      // Still, in case this method causes trouble in the future, both reasons
      // can be overcome in the following ways:
      //   1. Set original props that aren't present in fixture state to
      //      undefined
      //   2. Create a wrapper component or element and to set the key on
      // Useful links:
      //   - https://reactjs.org/docs/react-api.html#cloneelement
      //   - https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L293-L362
      return {
github react-cosmos / react-cosmos / packages / react-cosmos-fixture / src / FixtureCapture / classState / useFixtureState.ts View on Github external
}

        // The child's state can be out of sync with the fixture state for two
        // reasons:
        //   1. The child's state changed internally
        //   2. The fixture state changed
        // Here we're interested in the second scenario. In the first scenario
        // we want to let the component state override the fixture state.
        const prevFsClassState = findFixtureStateClassState(
          prevFixtureState.current,
          elementId
        );
        if (prevFsClassState && !isEqual(prevFsClassState, fsClassState)) {
          return replaceState(
            elRef,
            extendWithValues(elRef.state, fsClassState.values)
          );
        }
      }
    });
  }, [
github react-cosmos / react-cosmos / packages / react-cosmos-fixture / src / FixtureCapture / classState / useFixtureState.ts View on Github external
elementId
    );
    if (!fsClassState) {
      setFixtureState(prevFs => ({
        ...prevFs,
        classState: createFixtureStateClassState({
          fixtureState: prevFs,
          elementId,
          values: createValues(state),
          componentName: getComponentName(
            elRef.constructor as React.ComponentType
          )
        })
      }));
    } else {
      replaceState(elRef, extendWithValues(state, fsClassState.values));
    }
  }
}