lucid-ui/dist/esm/components/DraggableList/DraggableList.stories.js

A UI component library from Xandr.

import React, { useState } from 'react';
import DraggableList from './DraggableList';
import CheckboxLabeled from '../CheckboxLabeled/CheckboxLabeled';
export default {
    title: 'Controls/DraggableList',
    component: DraggableList,
    parameters: {
        docs: {
            description: {
                component: DraggableList.peek.description,
            },
        },
    },
};
/* Basic */
export const Basic = (args) => {
    const [items, setItems] = useState([
        'Item One',
        'Item Two',
        'Item Three',
        'Item Four',
        'Item Five',
    ]);
    const handleDrop = ({ oldIndex, newIndex, }) => {
        const updatedItems = items.filter((column, index) => index !== oldIndex);
        updatedItems.splice(newIndex, 0, items[oldIndex]);
        console.info(updatedItems);
        setItems(updatedItems);
    };
    return (React.createElement(DraggableList, { ...args, onDrop: handleDrop }, items.map((text) => (React.createElement(DraggableList.Item, { key: text }, text)))));
};
/* No Drag Handle */
export const NoDragHandle = (args) => {
    const [items, setItems] = useState([
        'Item One',
        'Item Two',
        'Item Three',
        'Item Four',
        'Item Five',
    ]);
    const handleDrop = ({ oldIndex, newIndex, }) => {
        const updatedItems = items.filter((column, index) => index !== oldIndex);
        updatedItems.splice(newIndex, 0, items[oldIndex]);
        setItems(updatedItems);
    };
    return (React.createElement(DraggableList, { ...args, onDrop: handleDrop, hasDragHandle: false }, items.map((text) => (React.createElement(DraggableList.Item, { key: text }, text)))));
};
/* With Children */
export const WithChildren = (args) => {
    const [items, setItems] = useState([
        'Item One',
        'Item Two',
        'Item Three',
        'Item Four',
        'Item Five',
    ]);
    const handleDrop = ({ oldIndex, newIndex, }) => {
        const updatedItems = items.filter((column, index) => index !== oldIndex);
        updatedItems.splice(newIndex, 0, items[oldIndex]);
        setItems(updatedItems);
    };
    return (React.createElement(DraggableList, { ...args, onDrop: handleDrop, style: { width: 500 } }, items.map((text) => (React.createElement(DraggableList.Item, { key: text },
        React.createElement("div", { style: { display: 'flex', alignItems: 'center', height: 50 } },
            React.createElement(CheckboxLabeled, { Label: text })))))));
};
//# sourceMappingURL=DraggableList.stories.js.map