@tomino/dynamic-form-semantic-ui/dist/mjs/editor/toolbox/tool_item.js

Semantic UI form renderer based on dynamic form generation

import * as React from 'react';
import { css, names } from '../../common';
import { ToolIcon } from './tool_icon';
import { EditorContext } from '../editor_context';
import { calculateHorizontalPosition } from '../editor_common';
import { clearAll } from '../../layouts/drag_drop';
const bareItem = (theme) => css `
  /* border: 1px solid #deded2;
  background-color: white;*/
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: ${theme.textColor};
  /* border-bottom: dotted 1px #444; */
  padding-bottom: 6px;
  padding-top: 6px;
`;
const style = css `
  cursor: move;
  width: 100%;
  height: 100%;
  display: flex;
`;
export const ToolItem = props => {
    const context = React.useContext(EditorContext);
    const { title, icon, children, thumbnail } = props;
    const onDrag = React.useCallback((ev) => {
        context.dragItem = {
            name: props.control,
            row: props.row,
            column: props.column,
            element: props.formElement,
            id: props.id,
            position: calculateHorizontalPosition(ev),
            props: props.defaultProps,
            defaultChildren: props.defaultChildren
        };
    }, [
        context.dragItem,
        props.column,
        props.control,
        props.defaultChildren,
        props.defaultProps,
        props.formElement,
        props.id,
        props.row
    ]);
    const onDragEnd = React.useCallback(() => clearAll(context), [context]);
    return (React.createElement("div", { draggable: true, className: names(style, { [bareItem(context.theme)]: !children }), "data-id": props.id, onDragStart: onDrag, onDragEnd: onDragEnd }, children ? (children) : (React.createElement(React.Fragment, null,
        React.createElement(ToolIcon, { icon: icon, thumbnail: thumbnail }),
        title))));
};
//# sourceMappingURL=tool_item.js.map