elrumordelaluz

elrumordelaluz

Member Since 10 years ago

here

Experience Points
644
follower
Lessons Completed
55
follow
Lessons Completed
1.3k
stars
Best Reply Awards
164
repos

1470 contributions in the last year

Pinned
⚡ CSS classes to move your DOM!
⚡ Tourist Guide into your React Components
⚡ Transform svg files to json notation
⚡ CSShake as a React Functional Component
⚡ A simple tool to generate and customize multiple css3 radial gradients.
⚡ Public endpoint to generate SVG Sprites
Activity
Jan
25
17 hours ago
Activity icon
issue

elrumordelaluz issue elrumordelaluz/reactour

elrumordelaluz
elrumordelaluz

Autoscrolling broken in scrollable HTMLElement

Fix needed in an external library, pr here: https://github.com/Pixeden/scroll-smooth/pull/14 . Once that lands could you please bump the version? Currently, this causes some weird issues when the window is scrolled and the scrollable container isn't. FYI, I am seeing the problem in v1 branch, not sure if this affects or has been resolved in v2.

Activity icon
issue

elrumordelaluz issue comment elrumordelaluz/reactour

elrumordelaluz
elrumordelaluz

Autoscrolling broken in scrollable HTMLElement

Fix needed in an external library, pr here: https://github.com/Pixeden/scroll-smooth/pull/14 . Once that lands could you please bump the version? Currently, this causes some weird issues when the window is scrolled and the scrollable container isn't. FYI, I am seeing the problem in v1 branch, not sure if this affects or has been resolved in v2.

pull request

elrumordelaluz pull request Pixeden/scroll-smooth

elrumordelaluz
elrumordelaluz

Fixed context issue

The context here can be a window, where scrollTop is undefined so this works perfectly. But when the context is HTMLElement and scrollTop is 0, this will incorrectly use window.pageYOffset instead of 0. The "??" should be used instead to make sure this works as expected.

push

elrumordelaluz push Pixeden/scroll-smooth

elrumordelaluz
elrumordelaluz
elrumordelaluz
elrumordelaluz
elrumordelaluz
elrumordelaluz
elrumordelaluz
elrumordelaluz

Merge branch 'PeterKottas-patch-1'

commit sha: 451d4f975d94ead1e5bf122d22de6a5f28266e0a

push time in 9 hours ago
Activity icon
issue

elrumordelaluz issue comment elrumordelaluz/reactour

elrumordelaluz
elrumordelaluz

Autoscrolling broken in scrollable HTMLElement

Fix needed in an external library, pr here: https://github.com/Pixeden/scroll-smooth/pull/14 . Once that lands could you please bump the version? Currently, this causes some weird issues when the window is scrolled and the scrollable container isn't. FYI, I am seeing the problem in v1 branch, not sure if this affects or has been resolved in v2.

elrumordelaluz
elrumordelaluz

Hi @PeterKottas, thanks for open the Issue and for the PR, in v2 is no more needed this lib.

push

elrumordelaluz push elrumordelaluz/reactour

elrumordelaluz
elrumordelaluz
elrumordelaluz
elrumordelaluz

Merge branch 'master' of github.com:elrumordelaluz/reactour

commit sha: 20654bbe8965fbd6ab55673a157d9aac84534c4b

push time in 9 hours ago
Jan
24
1 day ago
Activity icon
issue

elrumordelaluz issue comment elrumordelaluz/reactour

elrumordelaluz
elrumordelaluz

Checkbox not working well

I'm not sure if this is a bug but I have a controlled input that works outside the steps object, however when I have it inside the content of a selector the checkbox only checks in one way. Not sure why this is happening.

elrumordelaluz
elrumordelaluz

You could control steps and all the stuff, using the same TourProvider, isn't that enough? In that case can you please open another issue sharing a sandbox with a reduced reproduction? Thanks!

started
started time in 1 day ago
Jan
22
3 days ago
started
started time in 3 days ago
Activity icon
issue

elrumordelaluz issue comment elrumordelaluz/reactour

elrumordelaluz
elrumordelaluz

Checkbox not working well

I'm not sure if this is a bug but I have a controlled input that works outside the steps object, however when I have it inside the content of a selector the checkbox only checks in one way. Not sure why this is happening.

elrumordelaluz
elrumordelaluz

You need to put the state inside the content. For this you can pass a React function component into content like this:

function content() {
  const [checked, setChecked] = React.useState(false);
  return (
    <div>
      <span>
        <input
          type="checkbox"
          checked={checked}
          onChange={(e) => {
            setChecked(e.currentTarget.checked);
            console.log(e.currentTarget.checked);
          }}
        />
      </span>
    </div>
  );
}


const steps = [
  {
    selector: '[data-tour="step1"]',
    content,
  },
  // ...
]


Here is your example modified.

Jan
21
4 days ago
Activity icon
issue

elrumordelaluz issue elrumordelaluz/reactour

elrumordelaluz
elrumordelaluz

Unable to show the dropdownlist options in the popover

Is there any way we can show the dropdown list options in the popover? Even if I create a div as a parent for the Dropdown element and add it to the selector, I'm unable to view it. Screenshot 2021-11-18 at 4 59 17 PM

Any idea how this can be resolved?

Activity icon
issue

elrumordelaluz issue comment elrumordelaluz/reactour

elrumordelaluz
elrumordelaluz

Unable to show the dropdownlist options in the popover

Is there any way we can show the dropdown list options in the popover? Even if I create a div as a parent for the Dropdown element and add it to the selector, I'm unable to view it. Screenshot 2021-11-18 at 4 59 17 PM

Any idea how this can be resolved?

elrumordelaluz
elrumordelaluz

Due to inactivity I am closing this issue, but feel free to re-open or create a new one in any case.

Activity icon
issue

elrumordelaluz issue elrumordelaluz/reactour

elrumordelaluz
elrumordelaluz

Controlled Tour

If I understand well, the problem shown here is due to not having a way to control the Tour externally.

In this issue I will track those use cases.

Activity icon
issue

elrumordelaluz issue comment elrumordelaluz/reactour

elrumordelaluz
elrumordelaluz

Controlled Tour

If I understand well, the problem shown here is due to not having a way to control the Tour externally.

In this issue I will track those use cases.

elrumordelaluz
elrumordelaluz

Due to inactivity I am closing this issue, but feel free to re-open or create a new one in any case.

Activity icon
issue

elrumordelaluz issue comment elrumordelaluz/reactour

elrumordelaluz
elrumordelaluz

Where is lastStepNextButton?

I come from reactour (v1) but I find nothing on the new version that allows me to do that?

Activity icon
issue

elrumordelaluz issue comment elrumordelaluz/reactour

elrumordelaluz
elrumordelaluz

Delaying while dom loading

Is there a way to wait for an element to appear? I'm moving to another page during the tour but since it goes to the next step before waiting for the page to load it doesn't highlight anything...

started
started time in 4 days ago
Activity icon
issue

elrumordelaluz issue comment elrumordelaluz/reactour

elrumordelaluz
elrumordelaluz

The event onClickMask should receive the current steps

Considering that declaring a TourProvider with specific steps may be modified externally through a hook, for example, the onClickMask handler receive both currentStep and setCurrentStep, but cannot garantee that the steps within that context is the same as when the even is fired.

For example, given my current situation, the tour can only be closed with the mask at the very last step (and will optionally be allowed in other specific cases later on), so I declare my provider like such :

const AppTourProvider = ({ children }) => {
  const defaultSteps = useMemo(() => ([]), []);

  // note: the example specify a 'target` argument, but it is undefined, so I'm using 'document' to fix it
  const handleAfterOpen = useCallback(() => disableBodyScroll(document), []);
  const handleBeforeClose = useCallback(() => enableBodyScroll(document), []);

  const handleClickMask = useCallback(({ setIsOpen, currentStep }) => {
    // defaultSteps is always empty, so this is a useless check
    if (currentStep === defaultSteps.length - 1) {
      setIsOpen(false);      
    }
  }, [defaultSteps]);

  return (
    <TourProvider
      disableInteraction
      disableFocusLock

      steps={ defaultSteps }
      afterOpen={ handleAfterOpen }
      beforeClose={ handleBeforeClose }

      onClickMask={ handleClickMask }
    >
      { children }
    </TourProvider>    
  );
};

In other word, the initial steps is an empty array, and is replaced by various components using the same TourProvider. Unfortunately, once a component calls setSteps somewhere else in the code, the provider is not notified, and I'm not interested to keep a state of this value anyway. Thus, when onClickMask is called, there is an inconsistency between currentStep and defaultSteps.

Therefore, the following line

https://github.com/elrumordelaluz/reactour/blob/c02398146d5648e235cf33035a4552736255b8bf/packages/tour/src/Tour.tsx#L72

Should be changed to

     onClickMask({ setCurrentStep, setIsOpen, currentStep, steps }) 

Point to note, the initial steps should either be optional, or there should be a new prop, called onStepsChanged (for example), added to the available props, which would update the provider's steps once it is changed somewhere else.

elrumordelaluz
elrumordelaluz

lol, I added the ?but missed the

required: true

Each PR is pretty welcome, thanks"

Activity icon
issue

elrumordelaluz issue comment elrumordelaluz/reactour

elrumordelaluz
elrumordelaluz

The event onClickMask should receive the current steps

Considering that declaring a TourProvider with specific steps may be modified externally through a hook, for example, the onClickMask handler receive both currentStep and setCurrentStep, but cannot garantee that the steps within that context is the same as when the even is fired.

For example, given my current situation, the tour can only be closed with the mask at the very last step (and will optionally be allowed in other specific cases later on), so I declare my provider like such :

const AppTourProvider = ({ children }) => {
  const defaultSteps = useMemo(() => ([]), []);

  // note: the example specify a 'target` argument, but it is undefined, so I'm using 'document' to fix it
  const handleAfterOpen = useCallback(() => disableBodyScroll(document), []);
  const handleBeforeClose = useCallback(() => enableBodyScroll(document), []);

  const handleClickMask = useCallback(({ setIsOpen, currentStep }) => {
    // defaultSteps is always empty, so this is a useless check
    if (currentStep === defaultSteps.length - 1) {
      setIsOpen(false);      
    }
  }, [defaultSteps]);

  return (
    <TourProvider
      disableInteraction
      disableFocusLock

      steps={ defaultSteps }
      afterOpen={ handleAfterOpen }
      beforeClose={ handleBeforeClose }

      onClickMask={ handleClickMask }
    >
      { children }
    </TourProvider>    
  );
};

In other word, the initial steps is an empty array, and is replaced by various components using the same TourProvider. Unfortunately, once a component calls setSteps somewhere else in the code, the provider is not notified, and I'm not interested to keep a state of this value anyway. Thus, when onClickMask is called, there is an inconsistency between currentStep and defaultSteps.

Therefore, the following line

https://github.com/elrumordelaluz/reactour/blob/c02398146d5648e235cf33035a4552736255b8bf/packages/tour/src/Tour.tsx#L72

Should be changed to

     onClickMask({ setCurrentStep, setIsOpen, currentStep, steps }) 

Point to note, the initial steps should either be optional, or there should be a new prop, called onStepsChanged (for example), added to the available props, which would update the provider's steps once it is changed somewhere else.

elrumordelaluz
elrumordelaluz

Should be updated here and here. Let me know if you think I am missing something, thanks!

Activity icon
issue

elrumordelaluz issue comment elrumordelaluz/reactour

elrumordelaluz
elrumordelaluz

Where is lastStepNextButton?

I come from reactour (v1) but I find nothing on the new version that allows me to do that?

elrumordelaluz
elrumordelaluz

why not!? 👍🏼

the source is that the v2 wanted, in some way to maintain props from v1. But why not move and clean TourProvider props when new features were added (components is pretty new).

Activity icon
issue

elrumordelaluz issue comment elrumordelaluz/reactour

elrumordelaluz
elrumordelaluz

Delaying while dom loading

Is there a way to wait for an element to appear? I'm moving to another page during the tour but since it goes to the next step before waiting for the page to load it doesn't highlight anything...

elrumordelaluz
elrumordelaluz

are you using useTour? Can you please share a reduced reproduction in a sandbox?

Previous