wbreeze / poui Goto Github PK

In the Parto component view implemented by the Poui component, provide a right-aligned area for additional content.

One example would be information about the preference graph, such as counts of outgoing and incoming directed links.

Another example is the button groups asked for by the interaction wrapper of issue #11

Given a parto that contains all of the item keys in one group:

console.log src/tests/PartialOrder/PartialOrderEncompass.test.js:39
  PARTO  [ [ 'Z', 'R', 'C', 'T', 'L', 'M', 'P', 'A' ] ]

The return from PartialOrder.encompassItems(items, parto); contains an extra, empty item group:

console.log src/tests/PartialOrder/PartialOrderEncompass.test.js:41
  ORDER  [ [ 'Z', 'R', 'C', 'T', 'L', 'M', 'P', 'A' ], [] ]

It should return the parto unchanged.

Dragging an item all of the way below the bottom and releasing it causes the item to disappear.

On mobile browsers the drag and drop does not work so well. It's also essentially a hidden feature on desktop browsers that might not be intuitively discovered. (The second is a UI issue that might benefit from some intearction hint.) To provide something visible, and which works on mobile, add buttons to the items that move them up and/or down in the order.

There are two types of up/down. One moves the item into a group with the item or group following it. The other moves the item below the item or group following it. Thus:

• On an individual item somewhere in the middle there are four buttons:

  • up above item preceding
  • up into group with item preceding
  • down into group with item following
  • down below item following

• If there is no item following (as in the last item) the last two listed buttons ought to appear disabled (not disappear entirely) so as to maintain alignment with the buttons in other items.

• Likewise if there is no item preceding (as in the first item) the first two listed buttons ought to appear disabled.

• For an item already in a group, which group is somewhere in the middle, there are four buttons: (These might have different appearance; however that is not a requirement.)

  • up into group with item preceding the group
  • up above the group
  • down below the group
  • down into group with item following

• The first or last of these ought likewise to be disabled for a group which is first or last in the partial order.

Just this minute, App.js has the styling from App.css. However rendering App as a consumer gives default item list and an <h1>

Rendering PartoWithSelection gives a raw looking list without the styling. It functions, but is very much sub-optimal.

The original sketch-in of usage needs expansion, perhaps with a source code example.

The drag and drop ought not allow reordering within a group. By allowing it, it makes it seem as if the items are changing place of preference when in fact they are not.

Further, it shouldn't allow drop at a particular place in the group, only on the group itself. Fixing this half fixes the first provided an item picked from a group and then dropped in the group causes no change to the sequence of items in the group.

I'm having trouble using the npm published package in another project:

$ parcel watch src/index.js --out-dir app/assets/javascript/parceled
🚨  /Users/dcl/Documents/p.rails/socelect/node_modules/poui/src/index.js:4:16: Unexpected token (4:16)
  2 | import ReactDOM from "react-dom";
  3 | import App from "./App.js";
> 4 | ReactDOM.render(<App />, document.getElementById("root"));

Make a adjustments to get that straightened out, if needed here.

The PartoWithSelection component doesn't provide means to access the partial ordering. Provide a callback that enables a client to get ordering updates when the ordering changes.

Provide means to present an optional hover "tooltip" that contains additional information about the item. The tooltip ought not to appear (empty) if there is no additional information present.

PR #16 removed drag and drop entirely.

Find an implementation of drag and drop that works well and I can integrate. One possibility that works on mobile https://github.com/clauderic/react-sortable-hoc