From fde561e0b730dc7f7a664a48277b117e841c613a Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 8 Feb 2022 10:48:28 +0100 Subject: [PATCH 1/2] fix: object-assign errors --- .gitignore | 3 +- src/react-sortable.tsx | 287 ++++++++++++++++++++--------------------- 2 files changed, 145 insertions(+), 145 deletions(-) diff --git a/.gitignore b/.gitignore index f70e855..c906835 100644 --- a/.gitignore +++ b/.gitignore @@ -7,4 +7,5 @@ temp dist # todo - get story book only when releasing. storybook-static -yarn.lock \ No newline at end of file +yarn.lock +package-lock.json \ No newline at end of file diff --git a/src/react-sortable.tsx b/src/react-sortable.tsx index 9d1e033..c020dd0 100644 --- a/src/react-sortable.tsx +++ b/src/react-sortable.tsx @@ -1,4 +1,4 @@ -import classNames from "classnames"; +import classNames from "classnames" import { Children, cloneElement, @@ -7,9 +7,9 @@ import { createRef, ReactElement, RefObject, -} from "react"; -import Sortable, { MoveEvent, Options, SortableEvent } from "sortablejs"; -import invariant from "tiny-invariant"; +} from "react" +import Sortable, { MoveEvent, Options, SortableEvent } from "sortablejs" +import invariant from "tiny-invariant" import { AllMethodsExceptMove, HandledMethodNames, @@ -17,7 +17,7 @@ import { ReactSortableProps, Store, UnHandledMethodNames, -} from "./types"; +} from "./types" import { createCustoms, destructurePropsForOptions, @@ -28,11 +28,11 @@ import { insertNodes, removeNode, removeNodes, -} from "./util"; +} from "./util" /** Holds a global reference for which react element is being dragged */ // @todo - use context to manage this. How does one use 2 different providers? -const store: Store = { dragging: null }; +const store: Store = { dragging: null } export class ReactSortable extends Component< ReactSortableProps @@ -40,25 +40,23 @@ export class ReactSortable extends Component< /* eslint-disable-next-line */ static defaultProps: Partial> = { clone: (item) => item, - }; + } - private ref: RefObject; + private ref: RefObject constructor(props: ReactSortableProps) { - super(props); + super(props) // @todo forward ref this component - this.ref = createRef(); + this.ref = createRef() // make all state false because we can't change sortable unless a mouse gesture is made. - const newList = [...props.list]; - - newList.forEach((item: T) => { + const newList = [...props.list].map((item) => Object.assign(item, { chosen: false, selected: false, - }); - }) + }) + ) - props.setList(newList, this.sortable, store); + props.setList(newList, this.sortable, store) invariant( //@ts-expect-error: Doesn't exist. Will deprecate soon. !props.plugins, @@ -67,27 +65,27 @@ Plugins prop is no longer supported. Instead, mount it with "Sortable.mount(new MultiDrag())" Please read the updated README.md at https://github.com/SortableJS/react-sortablejs. ` - ); + ) } componentDidMount(): void { - if (this.ref.current === null) return; - const newOptions = this.makeOptions(); - Sortable.create(this.ref.current, newOptions); + if (this.ref.current === null) return + const newOptions = this.makeOptions() + Sortable.create(this.ref.current, newOptions) } componentDidUpdate(prevProps: ReactSortableProps): void { if (prevProps.disabled !== this.props.disabled && this.sortable) { - this.sortable.option("disabled", this.props.disabled); + this.sortable.option("disabled", this.props.disabled) } } render(): JSX.Element { - const { tag, style, className, id } = this.props; - const classicProps = { style, className, id }; + const { tag, style, className, id } = this.props + const classicProps = { style, className, id } // if no tag, default to a `div` element. - const newTag = !tag || tag === null ? "div" : tag; + const newTag = !tag || tag === null ? "div" : tag return createElement( newTag, { @@ -96,7 +94,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl ...classicProps, }, this.getChildren() - ); + ) } private getChildren() { @@ -113,22 +111,22 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl /* eslint-enable */ filter = "sortable-filter", list, - } = this.props; + } = this.props // if no children, don't do anything. - if (!children || children == null) return null; - const dataid = dataIdAttr || "data-id"; + if (!children || children == null) return null + const dataid = dataIdAttr || "data-id" /* eslint-disable-next-line */ return Children.map(children as ReactElement[], (child, index) => { if (child === undefined) return undefined - - const item = list[index] || {}; - const { className: prevClassName } = child.props; + + const item = list[index] || {} + const { className: prevClassName } = child.props // @todo - handle the function if avalable. I don't think anyone will be doing this soon. const filtered = typeof filter === "string" && { [filter.replace(".", "")]: !!item.filtered, - }; + } const className = classNames(prevClassName, { [selectedClass]: item.selected, @@ -138,23 +136,23 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl // [fallbackClass]: true, // [ghostClass]: true, // [swapClass]: true - }); + }) return cloneElement(child, { [dataid]: child.key, className, - }); - }); + }) + }) } /** Appends the `sortable` property to this component */ private get sortable(): Sortable | null { - const el = this.ref.current; - if (el === null) return null; - const key = Object.keys(el).find((k) => k.includes("Sortable")); - if (!key) return null; + const el = this.ref.current + if (el === null) return null + const key = Object.keys(el).find((k) => k.includes("Sortable")) + if (!key) return null //@ts-expect-error: fix me. - return el[key] as Sortable; + return el[key] as Sortable } /** Converts all the props from `ReactSortable` into the `options` object that `Sortable.create(el, [options])` can use. */ @@ -170,35 +168,35 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl "onStart", "onUnchoose", "onUpdate", - ]; + ] const NonDOMHandlers: UnHandledMethodNames[] = [ "onChange", "onClone", "onFilter", "onSort", - ]; - const newOptions: Options = destructurePropsForOptions(this.props); + ] + const newOptions: Options = destructurePropsForOptions(this.props) DOMHandlers.forEach( (name) => (newOptions[name] = this.prepareOnHandlerPropAndDOM(name)) - ); + ) NonDOMHandlers.forEach( (name) => (newOptions[name] = this.prepareOnHandlerProp(name)) - ); + ) /** onMove has 2 arguments and needs to be handled seperately. */ const onMove = (evt: MoveEvent, originalEvt: Event) => { - const { onMove } = this.props; - const defaultValue = evt.willInsertAfter || -1; - if (!onMove) return defaultValue; - const result = onMove(evt, originalEvt, this.sortable, store); - if (typeof result === "undefined") return false; - return result; - }; + const { onMove } = this.props + const defaultValue = evt.willInsertAfter || -1 + if (!onMove) return defaultValue + const result = onMove(evt, originalEvt, this.sortable, store) + if (typeof result === "undefined") return false + return result + } return { ...newOptions, onMove, - }; + } } /** Prepares a method that will be used in the sortable options to call an `on[Handler]` prop & an `on[Handler]` ReactSortable method. */ @@ -207,11 +205,11 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl ): (evt: SortableEvent) => void { return (evt) => { // call the component prop - this.callOnHandlerProp(evt, evtName); + this.callOnHandlerProp(evt, evtName) // calls state change //@ts-expect-error: until @types multidrag item is in - this[evtName](evt); - }; + this[evtName](evt) + } } /** Prepares a method that will be used in the sortable options to call an `on[Handler]` prop */ @@ -220,188 +218,189 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl ): (evt: SortableEvent) => void { return (evt) => { // call the component prop - this.callOnHandlerProp(evt, evtName); - }; + this.callOnHandlerProp(evt, evtName) + } } /** Calls the `props.on[Handler]` function */ callOnHandlerProp(evt: SortableEvent, evtName: AllMethodsExceptMove): void { - const propEvent = this.props[evtName]; - if (propEvent) propEvent(evt, this.sortable, store); + const propEvent = this.props[evtName] + if (propEvent) propEvent(evt, this.sortable, store) } // SORTABLE DOM HANDLING onAdd(evt: MultiDragEvent): void { - const { list, setList, clone } = this.props; + const { list, setList, clone } = this.props /* eslint-disable-next-line */ - const otherList = [...store.dragging!.props.list]; - const customs = createCustoms(evt, otherList); - removeNodes(customs); - - const newList = handleStateAdd(customs, list, evt, clone) + const otherList = [...store.dragging!.props.list] + const customs = createCustoms(evt, otherList) + removeNodes(customs) - newList.forEach((item) => { + const newList = handleStateAdd(customs, list, evt, clone).map((item) => Object.assign(item, { selected: false, - }); - }); - setList(newList, this.sortable, store); + }) + ) + + setList(newList, this.sortable, store) } onRemove(evt: MultiDragEvent): void { - const { list, setList } = this.props; - const mode = getMode(evt); - const customs = createCustoms(evt, list); - insertNodes(customs); + const { list, setList } = this.props + const mode = getMode(evt) + const customs = createCustoms(evt, list) + insertNodes(customs) - let newList = [...list]; + let newList = [...list] // remove state if not in clone mode. otherwise, keep. - if (evt.pullMode !== "clone") newList = handleStateRemove(customs, newList); + if (evt.pullMode !== "clone") newList = handleStateRemove(customs, newList) // if clone, it doesn't really remove. instead it clones in place. // @todo - else { // switch used to get the clone - let customClones = customs; + let customClones = customs switch (mode) { case "multidrag": customClones = customs.map((item, index) => ({ ...item, element: evt.clones[index], - })); - break; + })) + break case "normal": customClones = customs.map((item) => ({ ...item, element: evt.clone, - })); - break; + })) + break case "swap": default: { invariant( true, `mode "${mode}" cannot clone. Please remove "props.clone" from when using the "${mode}" plugin` - ); + ) } } - removeNodes(customClones); + removeNodes(customClones) // replace selected items with cloned items customs.forEach((curr) => { - const index = curr.oldIndex; + const index = curr.oldIndex /* eslint-disable-next-line */ - const newItem = this.props.clone!(curr.item, evt); - newList.splice(index, 1, newItem); - }); + const newItem = this.props.clone!(curr.item, evt) + newList.splice(index, 1, newItem) + }) } // remove item.selected from list - newList.forEach((item: T) => { + newList = newList.map((item: T) => Object.assign(item, { selected: false, - }); - }) - setList(newList, this.sortable, store); + }) + ) + + setList(newList, this.sortable, store) } onUpdate(evt: MultiDragEvent): void { - const { list, setList } = this.props; - const customs = createCustoms(evt, list); - removeNodes(customs); - insertNodes(customs); - const newList = handleStateChanges(customs, list); - return setList(newList, this.sortable, store); + const { list, setList } = this.props + const customs = createCustoms(evt, list) + removeNodes(customs) + insertNodes(customs) + const newList = handleStateChanges(customs, list) + return setList(newList, this.sortable, store) } onStart(): void { - store.dragging = this; + store.dragging = this } onEnd(): void { - store.dragging = null; + store.dragging = null } onChoose(evt: SortableEvent): void { - const { list, setList } = this.props; + const { list, setList } = this.props const newList = list.map((item, index) => { + let newItem = item if (index === evt.oldIndex) { - Object.assign(item, { + newItem = Object.assign(item, { chosen: true, - }); + }) } - return item; - }); - setList(newList, this.sortable, store); + return newItem + }) + setList(newList, this.sortable, store) } onUnchoose(evt: SortableEvent): void { - const { list, setList } = this.props; + const { list, setList } = this.props const newList = list.map((item, index) => { + let newItem = item if (index === evt.oldIndex) { - Object.assign(item, { + newItem = Object.assign(newItem, { chosen: false, - }); + }) } - return item; - }); - setList(newList, this.sortable, store); + return newItem + }) + setList(newList, this.sortable, store) } onSpill(evt: SortableEvent): void { - const { removeOnSpill, revertOnSpill } = this.props; - if (removeOnSpill && !revertOnSpill) removeNode(evt.item); + const { removeOnSpill, revertOnSpill } = this.props + if (removeOnSpill && !revertOnSpill) removeNode(evt.item) } onSelect(evt: MultiDragEvent): void { - const { list, setList } = this.props; - const newList = [...list]; - newList.forEach((item) => { + const { list, setList } = this.props + const newList = list.map((item) => Object.assign(item, { - chosen: false, - }); - }); + selected: false, + }) + ) + evt.newIndicies.forEach((curr) => { - const index = curr.index; + const index = curr.index if (index === -1) { console.log( `"${evt.type}" had indice of "${curr.index}", which is probably -1 and doesn't usually happen here.` - ); - console.log(evt); - return; + ) + console.log(evt) + return } - newList[index].selected = true; - }); - setList(newList, this.sortable, store); + newList[index].selected = true + }) + setList(newList, this.sortable, store) } onDeselect(evt: MultiDragEvent): void { - const { list, setList } = this.props; - const newList = [...list]; - newList.forEach((item) => { + const { list, setList } = this.props + const newList = list.map((item) => Object.assign(item, { - chosen: false, - }); - }); + selected: false, + }) + ) evt.newIndicies.forEach((curr) => { - const index = curr.index; - if (index === -1) return; - newList[index].selected = true; - }); - setList(newList, this.sortable, store); + const index = curr.index + if (index === -1) return + newList[index].selected = true + }) + setList(newList, this.sortable, store) } } // everything below this point can be removed // once @types has been merged. PR submited interface MultiIndices { - multiDragElement: HTMLElement; - index: number; + multiDragElement: HTMLElement + index: number } export interface MultiDragEvent extends SortableEvent { // @todo - add this to @types - clones: HTMLElement[]; - oldIndicies: MultiIndices[]; - newIndicies: MultiIndices[]; - swapItem: HTMLElement | null; + clones: HTMLElement[] + oldIndicies: MultiIndices[] + newIndicies: MultiIndices[] + swapItem: HTMLElement | null } From a658d04e53e48f05ebdcbb3a137283899f277a78 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 8 Feb 2022 10:53:32 +0100 Subject: [PATCH 2/2] revert: prettier preserve semicolons --- .prettierrc | 2 +- src/react-sortable.tsx | 252 ++++++++++++++++++++--------------------- 2 files changed, 127 insertions(+), 127 deletions(-) diff --git a/.prettierrc b/.prettierrc index cc46cb8..934d362 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,4 @@ { "arrowParens": "always", - "semi": false + "semi": true } diff --git a/src/react-sortable.tsx b/src/react-sortable.tsx index c020dd0..1a63522 100644 --- a/src/react-sortable.tsx +++ b/src/react-sortable.tsx @@ -1,4 +1,4 @@ -import classNames from "classnames" +import classNames from "classnames"; import { Children, cloneElement, @@ -7,9 +7,9 @@ import { createRef, ReactElement, RefObject, -} from "react" -import Sortable, { MoveEvent, Options, SortableEvent } from "sortablejs" -import invariant from "tiny-invariant" +} from "react"; +import Sortable, { MoveEvent, Options, SortableEvent } from "sortablejs"; +import invariant from "tiny-invariant"; import { AllMethodsExceptMove, HandledMethodNames, @@ -17,7 +17,7 @@ import { ReactSortableProps, Store, UnHandledMethodNames, -} from "./types" +} from "./types"; import { createCustoms, destructurePropsForOptions, @@ -28,11 +28,11 @@ import { insertNodes, removeNode, removeNodes, -} from "./util" +} from "./util"; /** Holds a global reference for which react element is being dragged */ // @todo - use context to manage this. How does one use 2 different providers? -const store: Store = { dragging: null } +const store: Store = { dragging: null }; export class ReactSortable extends Component< ReactSortableProps @@ -40,13 +40,13 @@ export class ReactSortable extends Component< /* eslint-disable-next-line */ static defaultProps: Partial> = { clone: (item) => item, - } + }; - private ref: RefObject + private ref: RefObject; constructor(props: ReactSortableProps) { - super(props) + super(props); // @todo forward ref this component - this.ref = createRef() + this.ref = createRef(); // make all state false because we can't change sortable unless a mouse gesture is made. const newList = [...props.list].map((item) => @@ -54,9 +54,9 @@ export class ReactSortable extends Component< chosen: false, selected: false, }) - ) + ); - props.setList(newList, this.sortable, store) + props.setList(newList, this.sortable, store); invariant( //@ts-expect-error: Doesn't exist. Will deprecate soon. !props.plugins, @@ -65,27 +65,27 @@ Plugins prop is no longer supported. Instead, mount it with "Sortable.mount(new MultiDrag())" Please read the updated README.md at https://github.com/SortableJS/react-sortablejs. ` - ) + ); } componentDidMount(): void { - if (this.ref.current === null) return - const newOptions = this.makeOptions() - Sortable.create(this.ref.current, newOptions) + if (this.ref.current === null) return; + const newOptions = this.makeOptions(); + Sortable.create(this.ref.current, newOptions); } componentDidUpdate(prevProps: ReactSortableProps): void { if (prevProps.disabled !== this.props.disabled && this.sortable) { - this.sortable.option("disabled", this.props.disabled) + this.sortable.option("disabled", this.props.disabled); } } render(): JSX.Element { - const { tag, style, className, id } = this.props - const classicProps = { style, className, id } + const { tag, style, className, id } = this.props; + const classicProps = { style, className, id }; // if no tag, default to a `div` element. - const newTag = !tag || tag === null ? "div" : tag + const newTag = !tag || tag === null ? "div" : tag; return createElement( newTag, { @@ -94,7 +94,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl ...classicProps, }, this.getChildren() - ) + ); } private getChildren() { @@ -111,22 +111,22 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl /* eslint-enable */ filter = "sortable-filter", list, - } = this.props + } = this.props; // if no children, don't do anything. - if (!children || children == null) return null - const dataid = dataIdAttr || "data-id" + if (!children || children == null) return null; + const dataid = dataIdAttr || "data-id"; /* eslint-disable-next-line */ return Children.map(children as ReactElement[], (child, index) => { - if (child === undefined) return undefined + if (child === undefined) return undefined; - const item = list[index] || {} - const { className: prevClassName } = child.props + const item = list[index] || {}; + const { className: prevClassName } = child.props; // @todo - handle the function if avalable. I don't think anyone will be doing this soon. const filtered = typeof filter === "string" && { [filter.replace(".", "")]: !!item.filtered, - } + }; const className = classNames(prevClassName, { [selectedClass]: item.selected, @@ -136,23 +136,23 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl // [fallbackClass]: true, // [ghostClass]: true, // [swapClass]: true - }) + }); return cloneElement(child, { [dataid]: child.key, className, - }) - }) + }); + }); } /** Appends the `sortable` property to this component */ private get sortable(): Sortable | null { - const el = this.ref.current - if (el === null) return null - const key = Object.keys(el).find((k) => k.includes("Sortable")) - if (!key) return null + const el = this.ref.current; + if (el === null) return null; + const key = Object.keys(el).find((k) => k.includes("Sortable")); + if (!key) return null; //@ts-expect-error: fix me. - return el[key] as Sortable + return el[key] as Sortable; } /** Converts all the props from `ReactSortable` into the `options` object that `Sortable.create(el, [options])` can use. */ @@ -168,35 +168,35 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl "onStart", "onUnchoose", "onUpdate", - ] + ]; const NonDOMHandlers: UnHandledMethodNames[] = [ "onChange", "onClone", "onFilter", "onSort", - ] - const newOptions: Options = destructurePropsForOptions(this.props) + ]; + const newOptions: Options = destructurePropsForOptions(this.props); DOMHandlers.forEach( (name) => (newOptions[name] = this.prepareOnHandlerPropAndDOM(name)) - ) + ); NonDOMHandlers.forEach( (name) => (newOptions[name] = this.prepareOnHandlerProp(name)) - ) + ); /** onMove has 2 arguments and needs to be handled seperately. */ const onMove = (evt: MoveEvent, originalEvt: Event) => { - const { onMove } = this.props - const defaultValue = evt.willInsertAfter || -1 - if (!onMove) return defaultValue - const result = onMove(evt, originalEvt, this.sortable, store) - if (typeof result === "undefined") return false - return result - } + const { onMove } = this.props; + const defaultValue = evt.willInsertAfter || -1; + if (!onMove) return defaultValue; + const result = onMove(evt, originalEvt, this.sortable, store); + if (typeof result === "undefined") return false; + return result; + }; return { ...newOptions, onMove, - } + }; } /** Prepares a method that will be used in the sortable options to call an `on[Handler]` prop & an `on[Handler]` ReactSortable method. */ @@ -205,11 +205,11 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl ): (evt: SortableEvent) => void { return (evt) => { // call the component prop - this.callOnHandlerProp(evt, evtName) + this.callOnHandlerProp(evt, evtName); // calls state change //@ts-expect-error: until @types multidrag item is in - this[evtName](evt) - } + this[evtName](evt); + }; } /** Prepares a method that will be used in the sortable options to call an `on[Handler]` prop */ @@ -218,78 +218,78 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl ): (evt: SortableEvent) => void { return (evt) => { // call the component prop - this.callOnHandlerProp(evt, evtName) - } + this.callOnHandlerProp(evt, evtName); + }; } /** Calls the `props.on[Handler]` function */ callOnHandlerProp(evt: SortableEvent, evtName: AllMethodsExceptMove): void { - const propEvent = this.props[evtName] - if (propEvent) propEvent(evt, this.sortable, store) + const propEvent = this.props[evtName]; + if (propEvent) propEvent(evt, this.sortable, store); } // SORTABLE DOM HANDLING onAdd(evt: MultiDragEvent): void { - const { list, setList, clone } = this.props + const { list, setList, clone } = this.props; /* eslint-disable-next-line */ - const otherList = [...store.dragging!.props.list] - const customs = createCustoms(evt, otherList) - removeNodes(customs) + const otherList = [...store.dragging!.props.list]; + const customs = createCustoms(evt, otherList); + removeNodes(customs); const newList = handleStateAdd(customs, list, evt, clone).map((item) => Object.assign(item, { selected: false, }) - ) + ); - setList(newList, this.sortable, store) + setList(newList, this.sortable, store); } onRemove(evt: MultiDragEvent): void { - const { list, setList } = this.props - const mode = getMode(evt) - const customs = createCustoms(evt, list) - insertNodes(customs) + const { list, setList } = this.props; + const mode = getMode(evt); + const customs = createCustoms(evt, list); + insertNodes(customs); - let newList = [...list] + let newList = [...list]; // remove state if not in clone mode. otherwise, keep. - if (evt.pullMode !== "clone") newList = handleStateRemove(customs, newList) + if (evt.pullMode !== "clone") newList = handleStateRemove(customs, newList); // if clone, it doesn't really remove. instead it clones in place. // @todo - else { // switch used to get the clone - let customClones = customs + let customClones = customs; switch (mode) { case "multidrag": customClones = customs.map((item, index) => ({ ...item, element: evt.clones[index], - })) - break + })); + break; case "normal": customClones = customs.map((item) => ({ ...item, element: evt.clone, - })) - break + })); + break; case "swap": default: { invariant( true, `mode "${mode}" cannot clone. Please remove "props.clone" from when using the "${mode}" plugin` - ) + ); } } - removeNodes(customClones) + removeNodes(customClones); // replace selected items with cloned items customs.forEach((curr) => { - const index = curr.oldIndex + const index = curr.oldIndex; /* eslint-disable-next-line */ - const newItem = this.props.clone!(curr.item, evt) - newList.splice(index, 1, newItem) - }) + const newItem = this.props.clone!(curr.item, evt); + newList.splice(index, 1, newItem); + }); } // remove item.selected from list @@ -297,110 +297,110 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl Object.assign(item, { selected: false, }) - ) + ); - setList(newList, this.sortable, store) + setList(newList, this.sortable, store); } onUpdate(evt: MultiDragEvent): void { - const { list, setList } = this.props - const customs = createCustoms(evt, list) - removeNodes(customs) - insertNodes(customs) - const newList = handleStateChanges(customs, list) - return setList(newList, this.sortable, store) + const { list, setList } = this.props; + const customs = createCustoms(evt, list); + removeNodes(customs); + insertNodes(customs); + const newList = handleStateChanges(customs, list); + return setList(newList, this.sortable, store); } onStart(): void { - store.dragging = this + store.dragging = this; } onEnd(): void { - store.dragging = null + store.dragging = null; } onChoose(evt: SortableEvent): void { - const { list, setList } = this.props + const { list, setList } = this.props; const newList = list.map((item, index) => { - let newItem = item + let newItem = item; if (index === evt.oldIndex) { newItem = Object.assign(item, { chosen: true, - }) + }); } - return newItem - }) - setList(newList, this.sortable, store) + return newItem; + }); + setList(newList, this.sortable, store); } onUnchoose(evt: SortableEvent): void { - const { list, setList } = this.props + const { list, setList } = this.props; const newList = list.map((item, index) => { - let newItem = item + let newItem = item; if (index === evt.oldIndex) { newItem = Object.assign(newItem, { chosen: false, - }) + }); } - return newItem - }) - setList(newList, this.sortable, store) + return newItem; + }); + setList(newList, this.sortable, store); } onSpill(evt: SortableEvent): void { - const { removeOnSpill, revertOnSpill } = this.props - if (removeOnSpill && !revertOnSpill) removeNode(evt.item) + const { removeOnSpill, revertOnSpill } = this.props; + if (removeOnSpill && !revertOnSpill) removeNode(evt.item); } onSelect(evt: MultiDragEvent): void { - const { list, setList } = this.props + const { list, setList } = this.props; const newList = list.map((item) => Object.assign(item, { selected: false, }) - ) + ); evt.newIndicies.forEach((curr) => { - const index = curr.index + const index = curr.index; if (index === -1) { console.log( `"${evt.type}" had indice of "${curr.index}", which is probably -1 and doesn't usually happen here.` - ) - console.log(evt) - return + ); + console.log(evt); + return; } - newList[index].selected = true - }) - setList(newList, this.sortable, store) + newList[index].selected = true; + }); + setList(newList, this.sortable, store); } onDeselect(evt: MultiDragEvent): void { - const { list, setList } = this.props + const { list, setList } = this.props; const newList = list.map((item) => Object.assign(item, { selected: false, }) - ) + ); evt.newIndicies.forEach((curr) => { - const index = curr.index - if (index === -1) return - newList[index].selected = true - }) - setList(newList, this.sortable, store) + const index = curr.index; + if (index === -1) return; + newList[index].selected = true; + }); + setList(newList, this.sortable, store); } } // everything below this point can be removed // once @types has been merged. PR submited interface MultiIndices { - multiDragElement: HTMLElement - index: number + multiDragElement: HTMLElement; + index: number; } export interface MultiDragEvent extends SortableEvent { // @todo - add this to @types - clones: HTMLElement[] - oldIndicies: MultiIndices[] - newIndicies: MultiIndices[] - swapItem: HTMLElement | null + clones: HTMLElement[]; + oldIndicies: MultiIndices[]; + newIndicies: MultiIndices[]; + swapItem: HTMLElement | null; }