UNPKG

@progress/kendo-react-treeview

Version:

React TreeView displays hierarchical data in a traditional tree structure, supports user interaction. KendoReact TreeView package

58 lines (57 loc) 2.27 kB
/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import * as s from "react"; import { IconWrap as l, classNames as r, toIconName as p } from "@progress/kendo-react-common"; import { plusIcon as c, insertTopIcon as m, insertBottomIcon as d, insertMiddleIcon as h, cancelIcon as u } from "@progress/kendo-svg-icons"; const e = class e extends s.PureComponent { constructor() { super(...arguments), this.state = { visible: !1, top: 0, left: 0, text: "", operationClassName: "cancel" }; } /** * @hidden */ render() { const t = { top: this.state.top + "px", left: this.state.left + "px" }; return this.state.visible && /* @__PURE__ */ s.createElement("div", { className: "k-header k-drag-clue", style: { ...this.props.style, ...t } }, /* @__PURE__ */ s.createElement( l, { className: r("k-drag-status"), name: this.state.operationClassName && p(this.state.operationClassName), icon: this.state.operationClassName === "k-i-plus" ? c : this.state.operationClassName === "k-i-insert-up" ? m : this.state.operationClassName === "k-i-insert-down" ? d : this.state.operationClassName === "k-i-insert-middle" ? h : u } ), this.state.text); } /** * Displays the TreeViewDragClue component. * * @param top - The `top` CSS position of the component. * @param left - The `left` CSS position of the component. * @param text - The text of the component. * @param operationClassName - The CSS class name which is related to the specific drop operation. */ show(t, i, o, n) { this.setState({ visible: !0, top: t, left: i, text: o, operationClassName: n }); } /** * Hides the TreeViewDragClue component. */ hide() { this.setState({ visible: !1 }); } }; e.defaultProps = { style: { display: "block", position: "absolute", zIndex: 2e4, padding: "4px 6px" } }; let a = e; export { a as TreeViewDragClue };