mohebifar/react-native-copilot

Enhancement request: allow passing of custom props to currentStep from CopilotStep.

Aberta

#78 aberto em 25 de set. de 2018

 (2 comentários) (0 reação) (0 responsável)TypeScript (430 forks)batch import
enhancementhelp wanted

Métricas do repositório

Stars
 (2.434 estrelas)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 30d)

Description

Hey ya'll

I'd like to suggest an enhancement to the currentStep object/prop that gets passed to custom components like tooltipComponent and stepNumberComponent.

It would be great if we could allow passing in custom props from CopilotStep. A situation where this would be useful is when you have a customizable custom tooltip component like so:

const CustomToolTipComponent = ({
  isFirstStep,
  isLastStep,
  handleNext,
  handlePrev,
  handleStop,
  currentStep,
}) => (
  // ...
  <Button>{currentStep.toolTipButtonText}</Button>
);
// ...
copilot({
  tooltipComponent: TooltipComponent
})(RootComponent)
<CopilotStep
  order={1}
  name="hello"
  text="Custom button text"
  toolTipButtonText="Cool btn txt right"
>
...
</CopilotStep>

Looking at the source, I think a simple update to ConnectedCopilotStep when registering steps could allow a enhancement like this. Perphaps passing along the rest of the props like this would be a bad idea:

this.props._copilot.registerStep({
  name: this.props.name,
  text: this.props.text,
  order: this.props.order,
  target: this,
  wrapper: this.wrapper,
  ...this.props,
});

We could add a dedicated prop to CopilotStep named something like options woul d do the trick:

<CopilotStep
  order={1}
  name="hello"
  text="Custom button text"
  options={{ toolTipButtonText: "Cool btn txt" }}
>
this.props._copilot.registerStep({
  name: this.props.name,
  text: this.props.text,
  order: this.props.order,
  target: this,
  wrapper: this.wrapper,
  options: this.props.options,
});

Let me know what ya'll think and if ya'll are 👍 on this I'd be glad to put a PR together.

Guia do colaborador