victorpavlenko

victorpavlenko

UI|UX Frontend React

Member Since 8 years ago

Belarus, Minsk

Experience Points
24
follower
Lessons Completed
0
follow
Lessons Completed
11
stars
Best Reply Awards
6
repos

6 contributions in the last year

Pinned
⚡ :bird: Redux middleware for sending error reports to Sentry through raven-js.
Activity
Oct
24
4 days ago
Oct
22
6 days ago
Activity icon
issue

victorpavlenko issue comment EitanElbaz/ReactGrandTour

victorpavlenko
victorpavlenko

On small screen modal is clipped and does not change position

On small screen like tablet image

It would be great to have this option inside ReactGrandTourStep like position: top, left, right, bottom

Or much better if determines the position automatically

Activity icon
issue

victorpavlenko issue comment EitanElbaz/ReactGrandTour

victorpavlenko
victorpavlenko

Feature Request: On Step Change callback

From @victorpavlenko

I think you misunderstood the problem. Imagine I click on the arrow with the mouse to the right. This calls my function


const nextStep = () => {
    changeStep (stepIndex + 1);
         if (allSteps.length === stepIndex + 1) {
            history.push ({
                pathname: "/ settings / general",
                hash: "#onboarding",
            });
        }
};

But what if I hit the arrow on my keyboard? How do I call this function? No way, this is impossible now.

I think it's worth adding the onNextStep onPrevStep function directly to ReactGrandTour

Then call this function by pressing a button with the mouse, and also by mechanical pressing on the keyboard.

Now the mechanical pressing is uncontrollable

I will look at adding this functionality very soon.

victorpavlenko
victorpavlenko

Nice^ But also good to have total to compare

Oct
21
1 week ago
Activity icon
issue

victorpavlenko issue comment EitanElbaz/ReactGrandTour

victorpavlenko
victorpavlenko

On small screen modal is clipped and does not change position

On small screen like tablet image

It would be great to have this option inside ReactGrandTourStep like position: top, left, right, bottom

Or much better if determines the position automatically

victorpavlenko
victorpavlenko

Are you asking for an option for a preferred of the modal per step? Yes!

No idea why, but I think its because I have scroll intro html. So It is calculated differently

Activity icon
issue

victorpavlenko issue EitanElbaz/ReactGrandTour

victorpavlenko
victorpavlenko

On small screen modal is clipped and does not change position

On small screen like tablet image

It would be great to have this option inside ReactGrandTourStep like position: top, left, right, bottom

Or much better if determines the position automatically

Activity icon
issue

victorpavlenko issue comment EitanElbaz/ReactGrandTour

victorpavlenko
victorpavlenko

Skipping empty selectors

I think if this is difficult to implement, you can at least add selectors to the allSteps array to begin with.

Right here: const allSteps = useMemo (() => steps.map ((_, i) => i), [steps]);

Then, when drawing through dialogWrapper, we can check if some fields exists

victorpavlenko
victorpavlenko

@EitanElbaz u need to remove log with 'aaa' first.

I think you misunderstood the problem. Imagine I click on the arrow with the mouse to the right. This calls my function


const nextStep = () => {
    changeStep (stepIndex + 1);
         if (allSteps.length === stepIndex + 1) {
            history.push ({
                pathname: "/ settings / general",
                hash: "#onboarding",
            });
        }
};

But what if I hit the arrow on my keyboard? How do I call this function? No way, this is impossible now.

I think it's worth adding the onNextStep onPrevStep function directly to ReactGrandTour

Then call this function by pressing a button with the mouse, and also by mechanical pressing on the keyboard.

Now the mechanical pressing is uncontrollable

Oct
20
1 week ago
Activity icon
issue

victorpavlenko issue comment EitanElbaz/ReactGrandTour

victorpavlenko
victorpavlenko

Skipping empty selectors

I think if this is difficult to implement, you can at least add selectors to the allSteps array to begin with.

Right here: const allSteps = useMemo (() => steps.map ((_, i) => i), [steps]);

Then, when drawing through dialogWrapper, we can check if some fields exists

victorpavlenko
victorpavlenko

image

I try to use this but I caught a few problems. First, if you are returning a total and the current, they are not equal. 21 and 22 like on screen. Have to add + 1.

Secondly, doesn't matter if I did it in dialogWrapper or if I used nextStepButton. If I press right arrow on my keyboard, I want to perform the same function as if I clicked on the right arrow.

(I personally need this to change location with each step)

Activity icon
issue

victorpavlenko issue comment EitanElbaz/ReactGrandTour

victorpavlenko
victorpavlenko

Skipping empty selectors

I think if this is difficult to implement, you can at least add selectors to the allSteps array to begin with.

Right here: const allSteps = useMemo (() => steps.map ((_, i) => i), [steps]);

Then, when drawing through dialogWrapper, we can check if some fields exists

victorpavlenko
victorpavlenko

If this also work for keyboard arrow its nice

Activity icon
issue

victorpavlenko issue comment EitanElbaz/ReactGrandTour

victorpavlenko
victorpavlenko

Skipping empty selectors

I think if this is difficult to implement, you can at least add selectors to the allSteps array to begin with.

Right here: const allSteps = useMemo (() => steps.map ((_, i) => i), [steps]);

Then, when drawing through dialogWrapper, we can check if some fields exists

victorpavlenko
victorpavlenko

I would also like to get control of the right/left arrows. For example, when I put together my own dialogWrapper I can control with changeStep function. But the arrows still have a simple toggle function. So I need to change this somehow

Oct
19
1 week ago
Activity icon
issue

victorpavlenko issue comment EitanElbaz/ReactGrandTour

victorpavlenko
victorpavlenko

Ability to take control of the change

It was just as great to get control of step changes: onStepChange

For example, if I want to change the page after a certain step, using react-router history. Is not possible now

victorpavlenko
victorpavlenko

Also if its possible to skip for mobile or specific media width ?

Activity icon
issue

victorpavlenko issue EitanElbaz/ReactGrandTour

victorpavlenko
victorpavlenko

Ability to take control of the change

It was just as great to get control of step changes: onStepChange

For example, if I want to change the page after a certain step, using react-router history. Is not possible now

Activity icon
issue

victorpavlenko issue comment EitanElbaz/ReactGrandTour

victorpavlenko
victorpavlenko

Skipping empty selectors

I think if this is difficult to implement, you can at least add selectors to the allSteps array to begin with.

Right here: const allSteps = useMemo (() => steps.map ((_, i) => i), [steps]);

Then, when drawing through dialogWrapper, we can check if some fields exists

victorpavlenko
victorpavlenko

Yes, I did just that. I filtered the steps in advance. The more customization options the better.

But also in order not to complicate the code of the library itself

Activity icon
issue

victorpavlenko issue EitanElbaz/ReactGrandTour

victorpavlenko
victorpavlenko

Skipping empty selectors

I think if this is difficult to implement, you can at least add selectors to the allSteps array to begin with.

Right here: const allSteps = useMemo (() => steps.map ((_, i) => i), [steps]);

Then, when drawing through dialogWrapper, we can check if some fields exists

Oct
18
1 week ago
Activity icon
issue

victorpavlenko issue comment EitanElbaz/ReactGrandTour

victorpavlenko
victorpavlenko

Remove Safari check

Library requests a navigator object that is not on the server and everything crashes.

victorpavlenko
victorpavlenko

Definitely very fast. It is necessary to be engaged in development of the project. I checked many existing ones, no survivors.

I'm experimenting with it now, it would also be great to get a feature that you can skip a step.

To do this, it would be good to get the next step as a selector. This can be done by passing steps to dialogWrapper maybe inside allSteps so I can check by myself.

For example, I want to skip a step if a selector is not found.

But better you can make a bool: something like skipEmptySelectors Then they will not be calculated in the total number of steps

I would just add two bool disableEscapeClose And disableOverlayClose

This will be easier to use for other users. But this is my personal opinion. So, do it as you see fit. Or just dont do it, also good

Activity icon
issue

victorpavlenko issue comment EitanElbaz/ReactGrandTour

victorpavlenko
victorpavlenko

Remove Safari check

Library requests a navigator object that is not on the server and everything crashes.

victorpavlenko
victorpavlenko

It will also be great if u add the ability to skip close the tour when I click on black zone. I'm a dictator and I want the user not to be able to leave the tour so easily.

Activity icon
issue

victorpavlenko issue comment EitanElbaz/ReactGrandTour

victorpavlenko
victorpavlenko

Remove Safari check

Library requests a navigator object that is not on the server and everything crashes.

victorpavlenko
victorpavlenko

@EitanElbaz I use just simple express server and react together with loadable-components

Activity icon
fork

victorpavlenko forked EitanElbaz/ReactGrandTour

victorpavlenko MIT License Updated
fork time in 1 week ago
Activity icon
issue

victorpavlenko issue EitanElbaz/ReactGrandTour

victorpavlenko
victorpavlenko

Remove Safari check

Library requests a navigator object that is not on the server and everything crashes.

Sep
12
1 month ago