@cimpress/react-components/dist/esm/docs/components/draganddrop/index.js

React components to support the MCP styleguide

import React from 'react';
import { CodeExample } from '@cimpress/react-components';
import ComponentDoc from '../../shared/TabbedComponentDoc';
import DragAndDropCode from '!raw-loader!./draganddrop.jsx';
import DragAndDropDemo from './draganddrop.jsx';
const DragAndDropDocs = () => {
    /* DragAndDrop props */
    const dragAndDropPropInfos = [
        {
            name: 'onDragEnd',
            type: 'function (required)',
            default: '',
            description: 'The function triggered when dragging a Draggable completes',
        },
        {
            name: 'additionalProps',
            default: '',
            type: '',
            description: (React.createElement("span", null,
                "See the",
                React.createElement("a", { href: "https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/drag-drop-context.md#props" }, "react-beautiful-dnd DragDropContext documentation"),
                "for more available props")),
        },
    ];
    /* Droppable props */
    const droppablePropInfos = [
        {
            name: 'droppableId',
            type: 'string (required)',
            default: '',
            description: 'The unique id for the droppable area',
        },
        {
            name: 'isEmpty',
            type: 'boolean',
            default: 'false',
            description: `Indicates that the droppable does not have any draggable elements inside.
      If provided, this will render the 'emptyPlaceholder' when the droppable is empty`,
        },
        {
            name: 'emptyPlaceholder',
            type: 'node',
            default: '',
            description: 'The React element rendered when the droppable is empty',
        },
        {
            name: 'children',
            type: 'node',
            default: '',
            description: (React.createElement("span", null,
                "The inner contents of the component. Children should be draggable via ",
                React.createElement("code", null, "withDraggable"))),
        },
    ];
    /* withDraggable props */
    const withDraggablePropInfos = [
        {
            name: 'draggableId',
            type: 'string (required)',
            default: '',
            description: 'A unique id for the draggable element',
        },
        {
            name: 'index',
            type: 'number (required)',
            default: '',
            description: 'A unique number generated sequentially, usually from Array.prototype.map',
        },
        {
            name: 'icon',
            type: 'node (required)',
            default: '',
            description: 'The draggable grip icon, usually IconDragDrop',
        },
        {
            name: 'isDragDisabled',
            type: 'boolean',
            default: 'false',
            description: 'Controls whether or not the Draggable is permitted to drag',
        },
        {
            name: 'showPlaceholderWhileDragging',
            type: 'boolean',
            default: 'false',
            description: 'Controls whether or not a placeholder element is left behind while the dragging the Draggable',
        },
        {
            name: 'style',
            type: 'object',
            default: '',
            description: 'Additional style properties that can be used to override default react-beautiful-dnd styles',
        },
    ];
    return (React.createElement(React.Fragment, null,
        React.createElement(ComponentDoc, { name: "DragAndDrop", propInfos: dragAndDropPropInfos }),
        React.createElement(ComponentDoc, { name: "Droppable", includeTabs: false, propInfos: droppablePropInfos }),
        React.createElement(ComponentDoc, { name: "withDraggable", includeTabs: false, propInfos: withDraggablePropInfos },
            React.createElement(DragAndDropDemo, null),
            React.createElement(CodeExample, { code: DragAndDropCode }))));
};
export default DragAndDropDocs;
//# sourceMappingURL=index.js.map