react-csv-importer icon indicating copy to clipboard operation
react-csv-importer copied to clipboard

Allow to customise SOURCES_PAGE_SIZE

Open sara-jegorova opened this issue 3 years ago • 1 comments
trafficstars

Currently fields step is not very mobile-friendly, mostly because 5 items is too much for a small screen: Screenshot 2022-03-22 at 14 31 04

It would be great to be able to customise SOURCES_PAGE_SIZE from https://github.com/beamworks/react-csv-importer/blob/master/src/components/fields-step/ColumnDragSourceArea.tsx#L13 , or better yet, change it based on screen width.

sara-jegorova avatar Mar 22 '22 12:03 sara-jegorova

Excellent point - actually I am planning a whole different mobile-friendly UI replacement option for this step. Might get a quick fix for this out first though, thanks!

unframework avatar Mar 22 '22 18:03 unframework

Released a quick fix in v0.8.0: there is now a setting called displayColumnPageSize that controls the above. It is set to 5 by default, smaller values might look better on mobile screens.

Similarly, a new setting called displayFieldRowSize controls the drag-drop destination field row display; the default is 4. I added a storybook example for these.

I still plan to come up with a proper mobile-friendly UI for v1, but for now this will do hopefully. Thanks again for the suggestion!

unframework avatar Dec 29 '22 21:12 unframework