Skip to content

Commit

Permalink
Merge pull request #86 from richmeij/grid-support
Browse files Browse the repository at this point in the history 
Feature: Grid support (addresses #4)
  • Loading branch information
Claudéric Demers authored Nov 27, 2016
2 parents 7339c78 + 890a57a commit 61c4b9c
Show file tree
Hide file tree
Showing 4 changed files with 279 additions and 80 deletions.
21 changes: 12 additions & 9 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Features
* **Drag handle, auto-scrolling, locked axis, events, and more!**
* **Suuuper smooth animations** – Chasing the 60FPS dream 🌈
* **Works with React Virtualized, React-Infinite, etc.**
* **Horizontal or vertical lists** ↔ ↕
* **Horizontal lists, vertical lists, or a grid** ↔ ↕ ⤡
* **Touch support** 👌

Installation
Expand Down Expand Up @@ -100,7 +100,7 @@ In root folder:
#### SortableContainer HOC
| Property | Type | Default | Description |
|:---------------------------|:------------------|:-----------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| axis | String | `y` | The axis you want to sort on, either 'x' or 'y' |
| axis | String | `y` | Items can be sorted horizontally, vertically or in a grid. Possible values: `x`, `y` or `xy` |
| lockAxis | String | | If you'd like, you can lock movement to an axis while sorting. This is not something that is possible with HTML5 Drag & Drop |
| helperClass | String | | You can provide a class you'd like to add to the sortable helper to add some styles to it |
| transitionDuration | Number | `300` | The duration of the transition when elements shift positions. Set this to `0` if you'd like to disable transitions |
Expand Down Expand Up @@ -132,6 +132,16 @@ Why should I use this?
--------------------
There are already a number of great Drag & Drop libraries out there (for instance, [react-dnd](https://github.com/gaearon/react-dnd/) is fantastic). If those libraries fit your needs, you should definitely give them a try first. However, most of those libraries rely on the HTML5 Drag & Drop API, which has some severe limitations. For instance, things rapidly become tricky if you need to support touch devices, if you need to lock dragging to an axis, or want to animate the nodes as they're being sorted. React Sortable HOC aims to provide a simple set of higher-order components to fill those gaps. If you're looking for a dead-simple, mobile-friendly way to add sortable functionality to your lists, then you're in the right place.

FAQ
---------------
### Grid support
Need to sort items in a grid? We've got you covered! Just set the `axis` prop to `xy`. Grid support is currently limited to a setup where all the cells in the grid have the same width and height, though we're working hard to get variable width support in the near future.

### Item disappearing when sorting / CSS issues

Upon sorting, `react-sortable-hoc` creates a clone of the element you are sorting (the _sortable-helper_) and appends it to the end of the `<body>` tag. The original element will still be in-place to preserve its position in the DOM until the end of the drag (with inline-styling to make it invisible). If the _sortable-helper_ gets messed up from a CSS standpoint, consider that maybe your selectors to the draggable item are dependent on a parent element which isn't present anymore (again, since the _sortable-helper_ is at the end of the `<body>`).


Dependencies
------------
React Sortable List has very few dependencies. It depends on `invariant` and a handful of `lodash` helpers. It has the following peerDependencies: `react`, `react-dom`
Expand All @@ -144,13 +154,6 @@ Asking for help
----------------
Please do not use the issue tracker for personal support requests. Instead, use [Gitter](https://gitter.im/clauderic/react-sortable-hoc) or StackOverflow.

Common Pitfalls
---------------

### CSS messing up on drag?

Upon sorting, `react-sortable-hoc` creates a clone of the element you are sorting (the _sortable-helper_) and appends it to the end of the `<body>` tag. The original element will still be in-place to preserve its position in the DOM until the end of the drag (with inline-styling to make it invisible). If the _sortable-helper_ gets messed up from a CSS standpoint, consider that maybe your selectors to the draggable item are dependent on a parent element which isn't present anymore (again, since the _sortable-helper_ is at the end of the `<body>`).

Contributions
------------
Yes please! Feature requests / pull requests are welcome.
Expand Down
45 changes: 45 additions & 0 deletions src/.stories/Storybook.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,41 @@
border-bottom: 0;
}

// Grid
.grid {
display: block;
width: 130 * 4px;
height: 350px;
white-space: nowrap;
border: 0;
background-color: transparent;
}

.gridItem {
float: left;
width: 130px;
padding: 8px;
background: transparent;
border: 0;

.wrapper {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
height: 100%;
background: #FFF;
border: 1px solid #EFEFEF;

font-size: 28px;

span {
display: none;
}
}
}

// Divider
.divider {
padding: 10px 20px;
Expand All @@ -100,6 +135,16 @@
&.horizontalItem {
cursor: col-resize;
}
&.gridItem {
background-color: transparent;
white-space: nowrap;
box-shadow: none;

.wrapper {
background-color: rgba(255,255,255,0.8);
box-shadow: 0 0 7px rgba(0,0,0,0.15)
}
}
}

.shrinkedHelper {
Expand Down
34 changes: 31 additions & 3 deletions src/.stories/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,10 @@ const Item = SortableElement((props) => {
<div className={props.className} style={{
height: props.height
}}>
{props.useDragHandle && <Handle/>}
Item {props.value}
<div className={style.wrapper}>
{props.useDragHandle && <Handle/>}
<span>Item</span> {props.value}
</div>
</div>
)
});
Expand All @@ -46,6 +48,7 @@ class ListWrapper extends Component {
itemClass: PropTypes.string,
width: PropTypes.number,
height: PropTypes.number,
onSortStart: PropTypes.func,
onSortEnd: PropTypes.func,
component: PropTypes.func
}
Expand Down Expand Up @@ -89,6 +92,15 @@ class ListWrapper extends Component {

// Function components cannot have refs, so we'll be using a class for React Virtualized
class VirtualList extends Component {
static propTypes = {
items: PropTypes.array,
className: PropTypes.string,
itemClass: PropTypes.string,
width: PropTypes.number,
height: PropTypes.number,
itemHeight: PropTypes.number,
sortingIndex: PropTypes.number
}
render() {
let {className, items, height, width, itemHeight, itemClass, sortingIndex} = this.props;
return (
Expand All @@ -114,6 +126,16 @@ const SortableFlexTable = SortableContainer(FlexTable, {withRef: true});
const SortableRowRenderer = SortableElement(defaultFlexTableRowRenderer);

class FlexTableWrapper extends Component {
static propTypes = {
items: PropTypes.array,
className: PropTypes.string,
helperClass: PropTypes.string,
itemClass: PropTypes.string,
width: PropTypes.number,
height: PropTypes.number,
itemHeight: PropTypes.number,
onSortEnd: PropTypes.func
}
render () {
const {
className,
Expand Down Expand Up @@ -214,7 +236,6 @@ const ShrinkingSortableList = SortableContainer(({className, isSorting, items, i
);
});


storiesOf('Basic Configuration', module)
.add('Basic usage', () => {
return (
Expand Down Expand Up @@ -252,6 +273,13 @@ storiesOf('Basic Configuration', module)
</div>
);
})
.add('Grid', () => {
return (
<div className={style.root}>
<ListWrapper component={SortableList} axis={'xy'} items={getItems(10, 110)} helperClass={style.stylizedHelper} className={classNames(style.list, style.stylizedList, style.grid)} itemClass={classNames(style.stylizedItem, style.gridItem)}/>
</div>
);
})

storiesOf('Advanced', module)
.add('Press delay (200ms)', () => {
Expand Down
Loading

0 comments on commit 61c4b9c

Please sign in to comment.