mwater / react-library

Library of useful react components. Require-able one-by-one

react-library

To get started, npm install and bower install

Then run gulp demo. (you might need to npm install gulp-cli -g)

Open demo.html in demo/ folder.

React components

There is a new way to build react components!

Includes:

ui = require 'react-library/lib/bootstrap'
update = require 'react-library/lib/update'

Define update function:

  update: => update(@props.value, @props.onChange, arguments)

Create ui components:

  R ui.FormGroup, key: "styling", label: "Styling",
    R ui.Check, key: "bold", inline: true, value: @props.value.bold, onChange: @update("bold"), "Bold"
    R ui.Check, key: "italic", inline: true, value: @props.value.italic, onChange: @update("italic"), "Italic"

Can also be used to update multiple values (properties of value):

  @update({ bold: true, italic: false })

Can also be used to update deep properties

  @update("styling.bold")

react-library's Issues

Modals do not scroll

When the content is long, modals are not allowing scrolling down. This breaks the response viewing in the portal which is very bad.

Crash in AutoSizeComponent

Uncaught Error: Invariant Violation: findDOMNode was called on an unmounted component.\nhttp://portal.mwater.co/js/libs.js:44:19321\nr()@http://portal.mwater.co/js/libs.js:44:19243\nObject.r()@http://portal.mwater.co/js/libs.js:44:1269\nAutoSizeComponent.module.exports.AutoSizeComponent.updateSize()@http://portal.mwater.co/js/index.js:60:28733\nHTMLDivElement.<anonymous>()@http://portal.mwater.co/js/index.js:60:27660\n{anonymous}()@http://portal.mwater.co/js/index.js:11:4734\nArray.forEach()@(native)\n{anonymous}()@http://portal.mwater.co/js/index.js:11:4710",
  "url": "http://portal.mwater.co/#forms/daba05b58f4a435aa32be5408cc91ee3",

Can't drag items within self-scrolling modal

https://github.com/mWater/mwater-app/issues/533

When there is a large list in a modal that scrolls, you can't drag an item in a reorderable list offscreen. The modal scrolls properly when dragging, but you can't drop it on top of items that were offscreen at the time of the drag start.

That is, you have a long list with items 4 & 5 visible. Try to drag item 5 upwards. Items 1,2,3 come into view because of the drag. However, you can't drop on them.

Disappearing hover bug in reorderable

If I drag the second item up over the bottom half of the first item, the second item disappears from the list, leaving a blank space. I expected it to stay there in faded view.

Loses scroll position when modal shown

Opening a modal (e.g. view a response) scrolls back up to the top, losing position in the list

Nested modals do not display correctly

We use ModalPopupComponent but they currently do not nest correctly, nor does Bootstrap support it. Notice that the faded background does not over the outer modal correctly.

See demo (gulp watch from updated master branch).

We should display the parts (modal-backdrop + modal + adding modal-open class to body) manually rather than depend on the jquery code we have now:

      $(@modalNode).children().modal({ 
        show: true, 
        backdrop: "static", 
        keyboard: false 
        })

However it works instead, it should be able to support any number of nested modals and still work fine. Modals need to be rendered right under body tag to prevent clipping, hence the complexity of the ModalPopupComponent code.

Create splitter control

We need a splitter pane control with a draggable splitter, similar to https://github.com/tomkp/react-split-pane but with percentage splitting (and fewer bugs).

It should:

• be able to split vertically or horizontally
• have a percentage passed in that determines the relative sizes of the two panes
• call a prop callback with any changes to the split percentage
• have a nice draggable splitter line in between the parts

It probably should:

• use flexbox for easy layout. We only support modern browsers in mWater

It ideally:

• would have an option to show tiny arrow buttons on the split to completely collapse/uncollapse one pane or the other. But this is just icing on the cake

Call it SplitPaneComponent

All list items and list are recreated when ReorderableList is re-rendered

Something is going wrong that causes the list and all items to be recreated instead of re-rendered when the list is re-rendered.

For example, when a map layer is changed, it immediately collapses since its state is wiped out. Also, on re-render, the list gets a new uuid, when it should stay the same.

Remove spinner on NumberInput

Modal doesn't resize in some cases

Go to portal.mwater.co/#datagrids

Pick Water Point, flip to filter tab. Then click on the box. It puts a scroll bar instead of making the modal bigger.

Improve AutoSizeComponent

Some components, like maps, need to know their exact height or width. To allow component like this to be used inside a component like the split pane container that can dynamically change size, we use a component called AutoSizeComponent that automatically injects either the height or width or both in pixels into the child React component.

It currently works marvelously when the window is resized, but will not work with more subtle changes such as the ones done by the split pane container.

We need to get this working so that we can use it for its intended purpose as part of the map/list pane in the portal.

A successful solution will allow the AutoSizeComponent embedded in a pane of the split pane container to automatically inject the height or width as it changes when the divider is dragged.

Detecting size changes in components without polling is tricky. There are some potential solutions out there:

http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/
(implemented: https://github.com/KyleAMathews/element-resize-event)

See also: http://marcj.github.io/css-element-queries/

Dragging bug in reorderable

I found a bug in the dragging:

• drag the second item up over top of the first item
• without letting go, drag it back down to its original position
• the item is now invisible and the top space is blank!

Modal popups scroll the entire window back to the top

They should either not do it, or restore the scroll on close.

Make tabbed component reorderable

Allow reordering of tabs by dragging.

Element is not detectable by this strategy error in AutoSizeComponent

"user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 Safari/537.36",

 "desc": "Uncaught Error: Element is not detectable by this strategy.\nhttp://portal.mwater.co/js/index.js:11:7386\nObject.addListener()@http://portal.mwater.co/js/index.js:11:7392\nonElementDetectable()@http://portal.mwater.co/js/index.js:11:24214\nonObjectDocumentReady()@http://portal.mwater.co/js/index.js:11:9423\ngetDocument()@http://portal.mwater.co/js/index.js:11:9293\nHTMLObjectElement.onObjectLoad()@http://portal.mwater.co/js/index.js:11:9350\nmutateDom()@http://portal.mwater.co/js/index.js:11:9713\nprocessBatch()@http://portal.mwater.co/js/index.js:2:30653",
  "url": "http://portal.mwater.co/#forms/dcdcf3b272ee4643b3b0317b959d5a77",

This is thrown by: https://github.com/wnr/element-resize-detector/search?utf8=%E2%9C%93&q=is+not+detectable

Could be that element is null or has been already removed from DOM? Anyway, we need to handle this without crashing.

New item bug in reorderable

Several users reported a serious bug that caused any new questions to appear at the top of the list to which they were added. They should have appeared at the bottom. I believe that this is because your component is storing state without properly handling componentWillReceiveProps.

Could you please add handling for received props that re-creates the state if the list of items has changed?

I have done an emergency disabling of the reordering code in mwater-form-designer for now.