Skip to content

Use generic to strongly type the records. #14

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

Open
pcorpet wants to merge 1 commit into
base: master
Choose a base branch
from
+28 −27
Open

Use generic to strongly type the records. #14

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
55 changes: 28 additions & 27 deletions src/DraggableList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,21 @@ import * as React from 'react';
import classNames from 'classnames';
import Sortable from 'sortablejs';

export interface IDraggableListProps {
export interface IDraggableListProps<T = Object> {
/** 数据数组 */
dataSource: Object[];
dataSource: T[];
/** 数据数组 key 值 */
rowKey: string;
/** 数据项 */
row: (record: Object, index: number) => React.ReactElement<any>;
row: (record: T, index: number) => React.ReactElement<any>;
/** 是否禁用拖拽 */
disabled?: boolean;
/** 是否显示拖拽指示点 */
handles?: boolean;
/** 列表项重排时移动的动画时间 */
animation?: number;
/** 列表排序改变的回调 */
onUpdate?: (event: Object, dataSource: Object[]) => void;
onUpdate?: (event: Object, dataSource: T[]) => void;

/** className */
className?: string;
Expand All @@ -33,40 +33,41 @@ export interface IDraggableListProps {
prefixCls?: string;
}

export default class DraggableList extends React.Component<IDraggableListProps, any> {
export default class DraggableList<T=Object> extends React.Component<IDraggableListProps<T>, any> {
static defaultProps = {
disabled: false,
handles: true,
animation: 150,
prefixCls: 'rc-draggable-list',
};

_current = [] as Object[];
_current: T[] = [];

_sortableGroupDecorator = (componentBackingInstance) => {
// check if backing instance not null
if (componentBackingInstance) {
const { animation, onUpdate, prefixCls, ghostClass, chosenClass, dragClass, disabled } = this.props;
// const ghostClass = ;
const options = {
disabled,
animation,
draggable: `.${prefixCls}-draggableRow`, // Specifies which items inside the element should be sortable
// group: "shared",
ghostClass: ghostClass || `${prefixCls}-ghost`, // Class name for the drop placeholder
chosenClass: chosenClass || `${prefixCls}-chosen`, // Class name for the chosen item
dragClass: dragClass || `${prefixCls}-drag`, // Class name for the dragging item
onUpdate: (evt) => {
const { newIndex, oldIndex } = evt;
let updated = this._current;
let rowData = updated.splice(oldIndex, 1);
updated.splice(newIndex, 0, rowData[0]);
this._current = updated;
onUpdate && onUpdate(evt, updated); // tslint:disable-line
},
};
Sortable.create(componentBackingInstance, options);
if (!componentBackingInstance) {
return;
}
const { animation, onUpdate, prefixCls, ghostClass, chosenClass, dragClass, disabled } = this.props;
// const ghostClass = ;
const options = {
disabled,
animation,
draggable: `.${prefixCls}-draggableRow`, // Specifies which items inside the element should be sortable
// group: "shared",
ghostClass: ghostClass || `${prefixCls}-ghost`, // Class name for the drop placeholder
chosenClass: chosenClass || `${prefixCls}-chosen`, // Class name for the chosen item
dragClass: dragClass || `${prefixCls}-drag`, // Class name for the dragging item
onUpdate: (evt) => {
const { newIndex, oldIndex } = evt;
let updated = this._current;
let rowData = updated.splice(oldIndex, 1);
updated.splice(newIndex, 0, rowData[0]);
this._current = updated;
onUpdate && onUpdate(evt, updated); // tslint:disable-line
},
};
Sortable.create(componentBackingInstance, options);
}

render() {
Expand Down