Skip to content

Commit

Permalink
feat(dnd-list): make items removable when out of bounds, add targetRe…
Browse files Browse the repository at this point in the history
…ct (uber#1508)

* feat(dnd-list): make items removable by move, add targetRect

* feat(dnd-list): add removeByMove prop
  • Loading branch information
tajo authored Jul 2, 2019
1 parent f5241b6 commit dc7ce57
Show file tree
Hide file tree
Showing 7 changed files with 51 additions and 9 deletions.
8 changes: 8 additions & 0 deletions documentation-site/static/examples/dnd-list/removable.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,17 @@ import {StatefulList} from 'baseui/dnd-list';
export default () => (
<StatefulList
removable
removableByMove
initialState={{
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
}}
overrides={{
Root: {
style: {
maxWidth: '300px',
},
},
}}
onChange={console.log}
/>
);
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@
"react-focus-lock": "^1.9.1",
"react-input-mask": "^2.0.4",
"react-is": "^16.8.6",
"react-movable": "^2.0.1",
"react-movable": "^2.2.0",
"react-range": "^1.0.5",
"react-virtualized": "^9.21.1",
"smoothscroll-polyfill": "^0.4.3",
Expand Down
7 changes: 6 additions & 1 deletion src/dnd-list/__tests__/stateful-list-container.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,12 @@ describe('StatefulListContainer', () => {
);

props.stateReducer.mockReturnValueOnce({items: ['Item 2', 'Item 1']});
component.instance().onChange({oldIndex: 0, newIndex: 1});
const targetRect: any = {};
component.instance().onChange({
oldIndex: 0,
newIndex: 1,
targetRect,
});

expect(props.stateReducer).toHaveBeenCalledTimes(1);
expect(props.stateReducer).toHaveBeenLastCalledWith(
Expand Down
13 changes: 12 additions & 1 deletion src/dnd-list/list.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,11 @@ class StatelessList extends React.Component<ListPropsT> {
);
const [Label, labelProps] = getOverrides(LabelOverride, StyledLabel);
const isRemovable = this.props.removable || false;
const isRemovableByMove = this.props.removableByMove || false;
return (
<Root $isRemovable={isRemovable} data-baseweb="dnd-list" {...rootProps}>
<MovableList
removableByMove={isRemovableByMove}
values={items}
onChange={onChange}
renderList={({children, props, isDragged}) => (
Expand All @@ -65,11 +67,20 @@ class StatelessList extends React.Component<ListPropsT> {
{children}
</List>
)}
renderItem={({value, props, isDragged, isSelected, index}) => {
renderItem={({
value,
props,
isDragged,
isSelected,
isOutOfBounds,
index,
}) => {
const sharedProps: SharedStylePropsArgT = {
$isRemovable: isRemovable,
$isRemovableByMove: isRemovableByMove,
$isDragged: isDragged,
$isSelected: isSelected,
$isOutOfBounds: isOutOfBounds,
$value: value,
$index: index,
};
Expand Down
17 changes: 15 additions & 2 deletions src/dnd-list/stateful-list-container.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,25 @@ class StatefulListContainer extends React.Component<
...this.props.initialState,
};

onChange = ({oldIndex, newIndex}: {oldIndex: number, newIndex: number}) => {
onChange = ({
oldIndex,
newIndex,
targetRect,
}: {
oldIndex: number,
newIndex: number,
targetRect: ClientRect,
}) => {
const newItemsState =
newIndex === -1
? arrayRemove(this.state.items, oldIndex)
: arrayMove(this.state.items, oldIndex, newIndex);
this.props.onChange({newState: newItemsState, oldIndex, newIndex});
this.props.onChange({
newState: newItemsState,
oldIndex,
newIndex,
targetRect,
});
this.internalSetState('change', {items: newItemsState});
};

Expand Down
5 changes: 5 additions & 0 deletions src/dnd-list/types.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ type ChildrenT = Array<React.Node>;
export type ListPropsT = {|
/** Set if the list items should be removable */
removable?: boolean,
/** Set if the list items should be removable by dragging them far left or right */
removableByMove?: boolean,
/** Items (labels) to be rendered */
items: Array<React.Node>,
/** Handler for when drag and drop is finished and order changed or item is deleted (newIndex would be -1 in that case) */
Expand All @@ -57,6 +59,7 @@ export type StatefulListPropsT = {|
newState: Array<React.Node>,
oldIndex: number,
newIndex: number,
targetRect: ClientRect,
}) => mixed,
overrides?: OverridesT,
|};
Expand All @@ -74,4 +77,6 @@ export type SharedStylePropsArgT = {
$isDragged: boolean,
$isSelected: boolean,
$isRemovable: boolean,
$isRemovableByMove: boolean,
$isOutOfBounds: boolean,
};
8 changes: 4 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -12518,10 +12518,10 @@ react-motion@^0.5.2:
prop-types "^15.5.8"
raf "^3.1.0"

react-movable@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/react-movable/-/react-movable-2.0.1.tgz#0293bef67854cc22e288d245d813963451476663"
integrity sha512-zOW/K7iXcJyKF0+D54R6fJCHyDfXPRWwk2H9W/N9YCGBrK/Nw/QWxQBn8AynupBikY0J+HMSlqs8cqIwjiZWzQ==
react-movable@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/react-movable/-/react-movable-2.2.0.tgz#08e7de1290b4c0d847fe038debcd3cd0eff750bf"
integrity sha512-hYv+vJ0pMXvemsnMgiDL7TH/muk1dGg9EHXH5tM6fFzdDmXGXlu8ijMErls9zYXzdZen/ghOUHBkBv4zC9EOyQ==

react-node-resolver@^1.0.1:
version "1.0.1"
Expand Down

0 comments on commit dc7ce57

Please sign in to comment.