Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Grid support #86

Merged
merged 12 commits into from
Nov 27, 2016
Merged

Grid support #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7cb7234
Enabled simultaneous x and y axis support. First pass
richmeij Nov 8, 2016
b00728a
Fixed animations for going up/left
richmeij Nov 11, 2016
796d0b7
merged master
richmeij Nov 11, 2016
72e0ece
Fixed bug in lockaxis
richmeij Nov 11, 2016
555e647
Added grid animation and grid story
richmeij Nov 11, 2016
be2cda6
added comments and did some cleanup
richmeij Nov 11, 2016
65baa07
changed lockOffset validation
richmeij Nov 11, 2016
c3ae90f
Added margins to translates in grid
richmeij Nov 14, 2016
7e251ec
Merge branch 'master' into grid-support
richmeij Nov 26, 2016
28fc435
Added comments and updated readme with grid support
richmeij Nov 26, 2016
ed128f6
Minor tweaks to README
Nov 27, 2016
890a57a
Update grid storybook
Nov 27, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 12 additions & 9 deletions README.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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