wix-style-react
Version:
wix-style-react
42 lines • 1.83 kB
JavaScript
import { dragAndDropDriverFactory, changeItemDepth, } from '../utils/DragAndDrop/dragAndDropDriverFactory';
import { dataAttributes } from '../DragAndDrop/Draggable/constants';
import { dataHooks } from './constants';
const nestableListBaseFactory = ({ element }) => {
const dragAndDropDriver = dragAndDropDriverFactory({
element: element.querySelector(`[data-hook="${dataHooks.provider}"]`),
});
return {
/** checks if exists */
exists: () => !!element,
/** reorder nestable list items */
reorder: ({ dataHookFrom, dataHookTo }) => {
dragAndDropDriver.beginDrag({ dataHook: `${dataHookFrom}` });
dragAndDropDriver.dragOver({ dataHook: `${dataHookTo}` });
dragAndDropDriver.endDrag();
},
/** change nestable list item depth */
changeItemDepth: ({ dataHook, depthLevel, threshold = 30 }) => changeItemDepth({
dragAndDropDriver,
depthLevel,
threshold,
dataHook: `${dataHook}`,
}),
/** get nestable list item position */
getItemPosition: ({ dataHook }) => {
const draggableItems = [
...element.querySelectorAll(`[${dataAttributes.draggableTarget}]`),
];
return draggableItems.findIndex(item => item
.querySelectorAll(`[${dataAttributes.draggableSource}]`)[0]
.getAttribute('data-hook') === `${dataHook}`);
},
/** get nestable list item depth */
getItemDepth: ({ dataHook }) => {
return parseInt(element
.querySelector(`[data-hook=${dataHook}]`)
.getAttribute(dataAttributes.depth));
},
};
};
export default nestableListBaseFactory;
//# sourceMappingURL=NestableListBase.driver.js.map