@progress/kendo-react-layout/splitter/Splitter.mjs

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @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 u from "react";
import { SplitterPane as T } from "./SplitterPane.mjs";
import { SplitterBar as w } from "./SplitterBar.mjs";
import { validatePackage as b, classNames as k, WatermarkOverlay as B } from "@progress/kendo-react-common";
import { packageMetadata as N } from "../package-metadata.mjs";
import { splitBarLabel as O, messages as R } from "./messages/index.mjs";
import { provideLocalizationService as L } from "@progress/kendo-react-intl";
const _ = {
  collapsible: !1,
  collapsed: !1,
  resizable: !0,
  scrollable: !0
}, K = 150, D = class D extends u.Component {
  /**
   * @hidden
   */
  constructor(n) {
    super(n), this.showLicenseWatermark = !1, this._container = null, this.validatePanes = (t) => {
      if (!t.filter((i) => i.size === void 0).length)
        throw new Error("The Splitter should have at least one pane without a set size.");
    }, this.mapPaneOptions = (t, e) => {
      const i = this.orientation, { dragIndex: r, isDragging: a } = this.state, l = [];
      for (let s = 0; s < e.length; s++) {
        let o = !1;
        const p = e[s];
        u.isValidElement(p) && (o = p.type.displayName === "Splitter");
        let h = !1;
        a && r !== void 0 && (h = r === s || r + 1 === s), l.push({
          ..._,
          orientation: i,
          containsSplitter: o,
          overlay: h,
          ...(t || [])[s]
        });
      }
      return l;
    }, this.mapSplitterPanes = (t, e) => {
      const i = L(this).toLanguageString(O, R[O]);
      return t.map((r, a) => {
        let l;
        const s = a * 2, o = s + 1;
        if (a + 1 < t.length) {
          const h = t[a + 1];
          l = /* @__PURE__ */ u.createElement(
            w,
            {
              key: o,
              index: a,
              orientation: r.orientation,
              prev: r,
              next: h,
              ariaLabel: i,
              onDrag: this.onBarDragResize,
              onToggle: this.onBarToggle,
              onKeyboardResize: this.onBarKeyboardResize,
              isRtl: this.isRtl
            }
          );
        }
        return [/* @__PURE__ */ u.createElement(T, { key: s, ...r }, e[a]), l];
      });
    }, this.onBarToggle = (t, e) => {
      const r = this.panesOptions(this.panesContent).map((a, l) => {
        const s = this.getPaneProps(a);
        return l === t ? {
          ...s,
          collapsed: !a.collapsed
        } : {
          ...s
        };
      });
      this.props.onChange && this.props.onChange({
        newState: r,
        isLast: !0,
        nativeEvent: e
      });
    }, this.onBarDragResize = (t, e, i, r, a) => {
      const l = (/* @__PURE__ */ new Date()).getTime(), { pageX: s, pageY: o } = t, { prevElement: p, nextElement: h } = this.surroudingPanes(e);
      if (!p || !h)
        return;
      if (r) {
        this.setState({
          isDragging: !0,
          dragIndex: i,
          startTime: l,
          originalX: s,
          originalY: o,
          originalPrevSize: this.elementSize(p),
          originalNextSize: this.elementSize(h)
        });
        return;
      }
      const { originalPrevSize: d, originalNextSize: c, startTime: v, originalX: f, originalY: S } = this.state;
      if (!r && l - v < K) {
        a && this.resetDragState();
        return;
      }
      let g;
      this.orientation === "vertical" ? g = o - S : this.isRtl ? g = f - s : g = s - f, this.resize(i, i + 1, d, c, g, a, t), a && this.resetDragState();
    }, this.onBarKeyboardResize = (t, e, i, r) => {
      const { prevElement: a, nextElement: l } = this.surroudingPanes(t), s = this.elementSize(a), o = this.elementSize(l);
      this.resize(e, e + 1, s, o, i, !0, r);
    }, this.containerSize = () => this._container ? this.elementSize(this._container, !0) : 0, this.panesOptions = (t) => this.mapPaneOptions(this.panes, t), this.elementSize = (t, e) => {
      const i = e ? "client" : "offset";
      return this.orientation === "vertical" ? t[`${i}Height`] : t[`${i}Width`];
    }, this.clamp = (t, e, i) => Math.min(e, Math.max(t, i)), this.fixedSize = (t) => t && t.length > 0, this.showLicenseWatermark = !b(N, { component: "Splitter" }), this.state = {
      isDragging: !1,
      dragIndex: void 0,
      startTime: 0,
      originalX: 0,
      originalY: 0,
      originalPrevSize: 0,
      originalNextSize: 0,
      panes: n.defaultPanes || []
    };
  }
  get isControlledState() {
    return this.props.panes !== void 0;
  }
  get panes() {
    return this.panesDuringOnChange !== void 0 ? this.panesDuringOnChange : this.isControlledState ? this.props.panes : this.state.panes;
  }
  get orientation() {
    return this.props.orientation || "horizontal";
  }
  get isRtl() {
    return this._container && getComputedStyle(this._container).direction === "rtl" || !1;
  }
  get panesContent() {
    return u.Children.toArray(this.props.children).filter((n) => n);
  }
  /**
   * @hidden
   */
  render() {
    const n = this.panesContent, t = this.panesOptions(n), e = k(
      "k-splitter",
      "k-splitter-flex",
      `k-splitter-${this.orientation}`,
      this.props.className
    );
    return this.validatePanes(t), /* @__PURE__ */ u.createElement(
      "div",
      {
        id: this.props.id,
        style: this.props.style,
        ref: (i) => {
          this._container = i;
        },
        className: e
      },
      this.mapSplitterPanes(t, n),
      this.showLicenseWatermark && /* @__PURE__ */ u.createElement(B, null)
    );
  }
  surroudingPanes(n) {
    return {
      prevElement: n.previousElementSibling,
      nextElement: n.nextElementSibling
    };
  }
  isPercent(n) {
    return /%$/.test(n);
  }
  toPixels(n, t) {
    let e = parseInt(n, 10);
    return this.isPercent(n) && (e = t * e / 100), e;
  }
  resetDragState() {
    this.setState({
      isDragging: !1,
      dragIndex: void 0,
      startTime: 0,
      originalX: 0,
      originalY: 0,
      originalPrevSize: 0,
      originalNextSize: 0
    });
  }
  resize(n, t, e, i, r, a, l) {
    const s = this.panesOptions(this.panesContent), o = s[n], p = s[t], h = e + i, d = this.containerSize(), c = (m) => this.toPixels(m, d), v = {
      index: n,
      initialSize: e,
      min: c(o.min) || h - c(p.max) || 0,
      max: c(o.max) || h - c(p.min) || h
    }, f = {
      index: t,
      initialSize: i,
      min: c(p.min) || h - c(o.max) || 0,
      max: c(p.max) || h - c(o.min) || h
    }, S = (m, P) => {
      const z = s[m.index], E = this.clamp(m.min, m.max, m.initialSize + P);
      return this.isPercent(z.size || "") ? 100 * E / d + "%" : E + "px";
    };
    let g, x;
    this.fixedSize(o.size) && this.fixedSize(p.size) ? (g = S(v, r), x = S(f, -r)) : p.collapsible || this.fixedSize(p.size) ? x = S(f, -r) : g = S(v, r);
    const C = s.map((m, P) => {
      const z = this.getPaneProps(m);
      return P === n ? {
        ...z,
        size: g
      } : P === t ? {
        ...z,
        size: x
      } : {
        ...z
      };
    });
    this.panesDuringOnChange = C, this.isControlledState || this.setState({
      panes: C
    }), this.props.onChange && this.props.onChange({
      newState: C,
      isLast: a,
      nativeEvent: l
    }), this.panesDuringOnChange = void 0;
  }
  getPaneProps(n) {
    const { orientation: t, overlay: e, containsSplitter: i, ...r } = n;
    return r;
  }
};
D.displayName = "Splitter";
let y = D;
export {
  y as Splitter
};