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

Semantic UI form renderer based on dynamic form generation

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const common_1 = require("../../common");
const tool_icon_1 = require("./tool_icon");
const editor_context_1 = require("../editor_context");
const editor_common_1 = require("../editor_common");
const drag_drop_1 = require("../../layouts/drag_drop");
const bareItem = (theme) => common_1.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 = common_1.css `
  cursor: move;
  width: 100%;
  height: 100%;
  display: flex;
`;
exports.ToolItem = props => {
    const context = React.useContext(editor_context_1.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: editor_common_1.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(() => drag_drop_1.clearAll(context), [context]);
    return (React.createElement("div", { draggable: true, className: common_1.names(style, { [bareItem(context.theme)]: !children }), "data-id": props.id, onDragStart: onDrag, onDragEnd: onDragEnd }, children ? (children) : (React.createElement(React.Fragment, null,
        React.createElement(tool_icon_1.ToolIcon, { icon: icon, thumbnail: thumbnail }),
        title))));
};
//# sourceMappingURL=tool_item.js.map