1st / reactive-ui Goto Github PK

<List> should be a powerful component (container of components) that will be used widely.

Options:

• scroll - one of vertical (defeult) or horizontal. It allows to scroll data with native-feel on mobile device (with item-by-item scrolling, or by sliding).
• on_load_next - callback. Load more data when scrolled to end of list.
• on_load_prev - callback. Load new updates when scrolled up to the list and pressed button "Load updates".
• items - array. Data that used to show results.
• items_on_page - number. How many records we need to show on one page (the rest of items will be hide).
• item_template - Reactive.Component. Used to render each item into this. By default it's reactive-ui.ListItem

List component should be universal and allow to "load more data" by scrolling to the end of the list (or to the top the list, if its possible to "check new records").

List can contain any number of ListItem components inside it.
ListItem component can contain any information - formatted text, images, movies.

Example:

<!-- Default scrolling used to scroll data from bottom-up-->
<List items=this.state.items on_load_next=this.onLoadNext on_load_prev=this.onLoadPrev>

<!-- Horizontal scrolling can be used to scroll images from left-to-right -->
<List scroll="horizontal" item_template=ImageListItem>

Modal dialog will be used to show different types of content. For example, it will be used on mobile and tablet screens to show SelectBox choices list (on full screen), while on desktop it will be normal select box (without use of Modal dialog).

When <Modal> appears - the main content becomes not scrollable. Only content inside the <Modal> can be scrollable. It's needed to prevent two possible scrolls at the same time that do usage of UI a little bit difficult.

As told before - UI of <Modal> will be:

• on mobile and tablet - will be used full screen width, but not more than MAX_WIDTH property
• on desktop - always used width of MAX_WIDTH property

The MAX_WIDTH property is defined based on the size property that passed to the <Modal>. It can be: small, medium (default), big or huge (like for all other Reactive-UI Components). Based on these four values - we need to find the best MAX_WIDTH values (should be discussed).

Additional info

• What's the difference between a Modal, Popup, Popover and Lightbox?

<Image> is used to show any type of images on a page.

Image can be clickable like a link or button.

Props

• href - If is set then cursor becomes not as a pointer, but as a finger. The image becomes wrapped in a <Link>
• onClick - used to handle click on image
• src - path to an image. We can provide smaller and bigger images to optimize loading time of the entire page (need to think about it, maybe put the preview image in a separate srcPreview property). Bu the way, when we scroll image and it becomes visible to user - at this time we need to load the image - it can optimize load time of the list and avoid lagging.
• effect - which effect to use when mouse is over the image:
  • zoom-in used without change the original size of the image. It looks like image become closer to you, but stays in the same borders as the original image.
  • zoom-out used to enlarge image and it becomes bigger

Button can be used in different contexts (in sidebar, in top bar, or even in dropdown). It can be rendered as a button or as a link that looks like a button (or looks like a normal link).

As always - default size is medium.

Additionally can be created themes that will override button styles (for example, to be like a Bootstrap or a Material).

Add (react-remove-prop-types)[https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types] ONLY for release build version (for development --watch version it should remain these props).