Nodlik / react-pageflip

Simple React.js wrapper for StPageFlip library, for creating realistic and beautiful page turning effect
https://nodlik.github.io/react-pageflip/
MIT License
478 stars 91 forks source link

not support remove or add page dynamic? #2

Open ghost opened 4 years ago

ghost commented 4 years ago
WeChat34bf2ce572ef9884340d1d13e1defc64 WeChatf94732d6139a01346c0d7cb7f4906631
Nodlik commented 4 years ago

Yes it is partially supported. But the children must be of the same type. Like here:

Снимок экрана 2020-06-19 в 15 20 42

Also, please update StPageFlip to the latest version (0.4.3)

xenonhammer commented 3 years ago

If you put a button next to it that will perform setPages and insert the original array (for example), then there will be the same error as the author of the question

musaticsgilbert commented 3 years ago

I dug around in the code and it's caused by the library wrapping the pages into several other inner elements. React thinks the pages are the children of the div rendered in the HTMLFlipbook component but actually they are under the stf_wrapper and stf_block elements.

Unfortunately this is how far I've gotten. I don't know how to delete pages from the book though it would be important for some use cases. I might just move to vanilla JS though I started with React in the hope of easier DOM management.

Nodlik commented 3 years ago

Try using the latest version. I hope I fixed it

musaticsgilbert commented 3 years ago

It looks like it's working now, I can add&remove pages without errors (though I am new to both React and Hooks and didn't know if I could make the changed HTMLFlipBook work in my class component so I spent a whole afternoon migrating to Hooks).

Thanks for the quick reply!

sensone commented 3 years ago

Hi.

I also catch this error in version 2.0.3, but my scenario slightly harder. I can remove and add pages without any problems, but when I try to remove and add pages at the same time the problem reproduced. It needed when the book has restrictions with blanc pages at the start and the end of the book. For example, I have restrictions:

If I understand correctly it happened, because the count of pages doesn't change https://github.com/Nodlik/react-pageflip/blob/master/src/html-flip-book/index.tsx#L65 and method refreshOnPageDelete() doesn't call.

Do you have any ideas How I/We can fix it? I have only 2 ideas: 1) Automatical handling. The library will check is the count of pages is odd and is it add the blank page before back cover 2) Add property renderForcePagesChange or something like this

// something like this
if (!props.renderOnlyPageLengthChange || props.renderForcePagesChange || pages.length !== childList.length) {                    
  if (childList.length < pages.length || props.renderForcePagesChange) {                        
    refreshOnPageDelete();                    
  }
  setPages(childList);                
}

@Nodlik What do you think about it? I can prepare the pull request.

Thanks