rafal-r / airr-react Goto Github PK

View Code? Open in Web Editor NEW

58.0 58.0 3.0 4.12 MB

Animated views navigation and more for your Desktop and Mobile ReactJS app

License: MIT License

JavaScript 3.51% CSS 4.96% TypeScript 91.53%

navigation react react-components single-page-app

airr-react's People

Contributors

Stargazers

Watchers

Forkers

tylermcginnis ferhatelmas

airr-react's Issues

Sidepanel issue

Sidepanel opened programmatically (setting prop isShown: true) without animation (animateShown: false) can't be closed with drag and upon outside tap.
Events listeners might not be added.

Consider changing naming convension

SceneWrapper to Scene
Scene to SceneItem - consider removal from global export as is inner component

Fade animation does not work properly

Can be tested in storybook

Consider migrating to react's hooks

With custom hooks implementation for custom life cycle methods

Create desktop demo app

With theme, styles taken from mobile demo

Create new components documentation

Include complex types like shapes for views, sidepanel, mayers etc

Add new story in storybook for Sidepanel

Performance review

Check code for unnecessary objects,arrays,functions literals as props.
Introduce Pure Components,

SceneWrapper is missing 'stackMode' prop in default props (propType info also)

Introduce animations external interface

To allow users to create own animations with clear interface to play with.

atomize __doViewsAnimations into seperate anima functions

Introduce own Router implementation

This way the lib will have full control over views animation and routing mechanism

Add new story in storybook for Mayers

Can't select text

remove guilty css prop: "webkit-user-select: none;"

Add new story in storybook for Tabs

Document about

super.componentDidMount() in classes extending SceneWrappers

Another layer of abstraction

Try to add another layer of abstraction that will allow such code usage:

            <Viewport>
                {({ openSidepanel, changeView, addMayer, closeMayer }) => {
                    return (
                        <>
                            <ViewSlot>
                                <FooView openSidepanel={openSidepanel} />
                            </ViewSlot>
                            <ViewSlot>
                                <BarView changeView={changeView} />
                            </ViewSlot>
                            <ViewSlot>
                                <BazView
                                    addMayer={addMayer}
                                    closeMayer={closeMayer}
                                />
                            </ViewSlot>
                            <ViewSlot>
                                <SecondScene>
                                    {({ views }) => {
                                        return (
                                            <>
                                                <ViewSlot>
                                                    <div>
                                                        another view. List views
                                                        names:
                                                    </div>
                                                    <div>
                                                        {views.map(
                                                            view =>
                                                                view.props.name
                                                        )}
                                                    </div>
                                                </ViewSlot>
                                            </>
                                        );
                                    }}
                                </SecondScene>
                            </ViewSlot>
                            <SidepanelSlot>
                                <MySidepanel />
                            </SidepanelSlot>

                            <NavbarMenuSlot>
                                <div>
                                    <span
                                        onClick={() => changeView("foo-view")}
                                    >
                                        item 1
                                    </span>
                                    <span>item 2</span>
                                </div>
                            </NavbarMenuSlot>
                            <ChildrenSlot>
                                <SomeCustomWidget />
                            </ChildrenSlot>
                        </>
                    );
                }}
            </Viewport>

Static type checker

Introduce Flow or TypeScript

Animation style props

Shouldn't the animaton style props be cleared after end of animation ?
Some for sure must stay like transform ...but transtion ?