@progress/kendo-react-layout 7.4.0 → 7.5.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/breadcrumb/BreadcrumbLink.js +1 -1
- package/breadcrumb/BreadcrumbLink.mjs +22 -22
- package/card/Card.js +1 -1
- package/card/Card.mjs +19 -19
- package/dist/cdn/js/kendo-react-layout.js +1 -1
- package/index.d.mts +1 -1
- package/index.d.ts +1 -1
- package/package-metadata.mjs +1 -1
- package/package.json +6 -6
- package/panelbar/PanelBar.js +1 -1
- package/panelbar/PanelBar.mjs +6 -7
- package/panelbar/PanelBarItem.js +1 -1
- package/panelbar/PanelBarItem.mjs +68 -65
- package/panelbar/util.js +1 -1
- package/panelbar/util.mjs +74 -71
- package/splitter/Splitter.js +1 -1
- package/splitter/Splitter.mjs +6 -7
- package/stepper/Step.js +1 -1
- package/stepper/Step.mjs +48 -48
- package/stepper/Stepper.js +1 -1
- package/stepper/Stepper.mjs +76 -75
- package/timeline/TimelineCard.js +1 -1
- package/timeline/TimelineCard.mjs +15 -20
- package/timeline/TimelineHorizontal.js +1 -1
- package/timeline/TimelineHorizontal.mjs +98 -93
package/package-metadata.mjs
CHANGED
|
@@ -10,7 +10,7 @@ const e = {
|
|
|
10
10
|
name: "@progress/kendo-react-layout",
|
|
11
11
|
productName: "KendoReact",
|
|
12
12
|
productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
|
|
13
|
-
publishDate:
|
|
13
|
+
publishDate: 1712850582,
|
|
14
14
|
version: "",
|
|
15
15
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
16
16
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-layout",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.5.0-develop.1",
|
|
4
4
|
"description": "React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -23,11 +23,11 @@
|
|
|
23
23
|
"sideEffects": false,
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@progress/kendo-licensing": "^1.3.4",
|
|
26
|
-
"@progress/kendo-react-animation": "7.
|
|
27
|
-
"@progress/kendo-react-common": "7.
|
|
28
|
-
"@progress/kendo-react-intl": "7.
|
|
29
|
-
"@progress/kendo-react-popup": "7.
|
|
30
|
-
"@progress/kendo-react-progressbars": "7.
|
|
26
|
+
"@progress/kendo-react-animation": "7.5.0-develop.1",
|
|
27
|
+
"@progress/kendo-react-common": "7.5.0-develop.1",
|
|
28
|
+
"@progress/kendo-react-intl": "7.5.0-develop.1",
|
|
29
|
+
"@progress/kendo-react-popup": "7.5.0-develop.1",
|
|
30
|
+
"@progress/kendo-react-progressbars": "7.5.0-develop.1",
|
|
31
31
|
"@progress/kendo-svg-icons": "^2.1.0",
|
|
32
32
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0",
|
|
33
33
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
|
package/panelbar/PanelBar.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react"),r=require("prop-types"),g=require("./PanelBarItem.js"),d=require("./util.js"),o=require("@progress/kendo-react-common"),y=require("../package-metadata.js"),l=require("./interfaces/NavigationAction.js");function x(p){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const a in p)if(a!=="default"){const e=Object.getOwnPropertyDescriptor(p,a);Object.defineProperty(s,a,e.get?e:{enumerable:!0,get:()=>p[a]})}}return s.default=p,Object.freeze(s)}const u=x(v),h=class h extends u.Component{constructor(s){super(s),this._element=null,this.showLicenseWatermark=!1,this.handleSelect=e=>{this.onSelect(e),this.onFocus(e)},this.onSelect=e=>{const n=d.flatChildren(u.Children.toArray(this.children));let i,t;switch(n.forEach(c=>{c.props.uniquePrivateKey===(e.uniquePrivateKey||this.state.focused)&&(i=c)}),this.expandMode){case"single":t=[...i.props.parentUniquePrivateKey,i.props.uniquePrivateKey],d.isArrayEqual(this.expandedItems,t)&&(i.props.parentUniquePrivateKey?t=[...i.props.parentUniquePrivateKey]:t=[]);break;case"multiple":{t=this.expandedItems.slice();const c=t.indexOf(i.props.uniquePrivateKey);c===-1?t.push(i.props.uniquePrivateKey):t.splice(c,1);break}default:t=this.expandedItems.slice();break}this.setState({selected:i.props.uniquePrivateKey,expanded:t}),this.props.onSelect&&this.props.onSelect.call(void 0,{target:i,expandedItems:t})},this.onFocus=(e,n=0)=>{const i=d.flatVisibleChildren(u.Children.toArray(this.children));let t;i.forEach((c,f)=>{if(c.props.uniquePrivateKey===(e.uniquePrivateKey||this.state.focused)){const k=f+n<0?0:f+n>i.length?i.length-1:f+n;t=i[k]}}),t&&(this.activeDescendant=t.props.id,this.setState({focused:t.props.uniquePrivateKey}))},this.onNavigate=(e,n)=>{let i;switch(n){case l.NavigationAction.Previous:i=-1,this.onFocus(e,i);break;case l.NavigationAction.Next:i=1,this.onFocus(e,i);break;case l.NavigationAction.Toggle:this.onSelect(e);break}},this.handleWrapperFocus=()=>{clearTimeout(this.nextTickId),this.state.wrapperFocused||this.setState({wrapperFocused:!0})},this.handleWrapperBlur=()=>{this.nextTick(()=>{this.setState({wrapperFocused:!1})})},this.handleKeyDown=e=>{const n=this._element&&getComputedStyle(this._element).direction==="rtl"||!1;if(e.target===e.currentTarget){const i=e.keyCode;let t;switch(i){case o.Keys.left:t=n?l.NavigationAction.Next:l.NavigationAction.Previous;break;case o.Keys.up:t=l.NavigationAction.Previous;break;case o.Keys.right:t=n?l.NavigationAction.Previous:l.NavigationAction.Next;break;case o.Keys.down:t=l.NavigationAction.Next;break;case o.Keys.space:case o.Keys.enter:t=l.NavigationAction.Toggle;break;default:t=null;break}t!==null&&(e.preventDefault(),this.onNavigate(e,t))}},o.validatePackage(y.packageMetadata),this.showLicenseWatermark=o.shouldShowValidationUI(y.packageMetadata);const a=d.getInitialState(s,this.expandMode);a.focused||(a.focused=d.getFirstId(s)),this.state=a}get expandMode(){return this.props.expandMode||"multiple"}get selectedItem(){const{selected:s=this.state.selected}=this.props;return s}get expandedItems(){return this.props.isControlled?this.props.expanded||[]:this.state.expanded}get children(){const s={...this.state,selected:this.selectedItem},a={animation:this.props.animation,keepItemsMounted:this.props.keepItemsMounted,state:s,expanded:this.expandedItems,handleSelect:this.handleSelect,children:this.props.children};return d.renderChildren(a)}render(){const s={"aria-activedescendant":this.activeDescendant},a=o.classNames("k-panelbar",
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react"),r=require("prop-types"),g=require("./PanelBarItem.js"),d=require("./util.js"),o=require("@progress/kendo-react-common"),y=require("../package-metadata.js"),l=require("./interfaces/NavigationAction.js");function x(p){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const a in p)if(a!=="default"){const e=Object.getOwnPropertyDescriptor(p,a);Object.defineProperty(s,a,e.get?e:{enumerable:!0,get:()=>p[a]})}}return s.default=p,Object.freeze(s)}const u=x(v),h=class h extends u.Component{constructor(s){super(s),this._element=null,this.showLicenseWatermark=!1,this.handleSelect=e=>{this.onSelect(e),this.onFocus(e)},this.onSelect=e=>{const n=d.flatChildren(u.Children.toArray(this.children));let i,t;switch(n.forEach(c=>{c.props.uniquePrivateKey===(e.uniquePrivateKey||this.state.focused)&&(i=c)}),this.expandMode){case"single":t=[...i.props.parentUniquePrivateKey,i.props.uniquePrivateKey],d.isArrayEqual(this.expandedItems,t)&&(i.props.parentUniquePrivateKey?t=[...i.props.parentUniquePrivateKey]:t=[]);break;case"multiple":{t=this.expandedItems.slice();const c=t.indexOf(i.props.uniquePrivateKey);c===-1?t.push(i.props.uniquePrivateKey):t.splice(c,1);break}default:t=this.expandedItems.slice();break}this.setState({selected:i.props.uniquePrivateKey,expanded:t}),this.props.onSelect&&this.props.onSelect.call(void 0,{target:i,expandedItems:t})},this.onFocus=(e,n=0)=>{const i=d.flatVisibleChildren(u.Children.toArray(this.children));let t;i.forEach((c,f)=>{if(c.props.uniquePrivateKey===(e.uniquePrivateKey||this.state.focused)){const k=f+n<0?0:f+n>i.length?i.length-1:f+n;t=i[k]}}),t&&(this.activeDescendant=t.props.id,this.setState({focused:t.props.uniquePrivateKey}))},this.onNavigate=(e,n)=>{let i;switch(n){case l.NavigationAction.Previous:i=-1,this.onFocus(e,i);break;case l.NavigationAction.Next:i=1,this.onFocus(e,i);break;case l.NavigationAction.Toggle:this.onSelect(e);break}},this.handleWrapperFocus=()=>{clearTimeout(this.nextTickId),this.state.wrapperFocused||this.setState({wrapperFocused:!0})},this.handleWrapperBlur=()=>{this.nextTick(()=>{this.setState({wrapperFocused:!1})})},this.handleKeyDown=e=>{const n=this._element&&getComputedStyle(this._element).direction==="rtl"||!1;if(e.target===e.currentTarget){const i=e.keyCode;let t;switch(i){case o.Keys.left:t=n?l.NavigationAction.Next:l.NavigationAction.Previous;break;case o.Keys.up:t=l.NavigationAction.Previous;break;case o.Keys.right:t=n?l.NavigationAction.Previous:l.NavigationAction.Next;break;case o.Keys.down:t=l.NavigationAction.Next;break;case o.Keys.space:case o.Keys.enter:t=l.NavigationAction.Toggle;break;default:t=null;break}t!==null&&(e.preventDefault(),this.onNavigate(e,t))}},o.validatePackage(y.packageMetadata),this.showLicenseWatermark=o.shouldShowValidationUI(y.packageMetadata);const a=d.getInitialState(s,this.expandMode);a.focused||(a.focused=d.getFirstId(s)),this.state=a}get expandMode(){return this.props.expandMode||"multiple"}get selectedItem(){const{selected:s=this.state.selected}=this.props;return s}get expandedItems(){return this.props.isControlled?this.props.expanded||[]:this.state.expanded}get children(){const s={...this.state,selected:this.selectedItem},a={animation:this.props.animation,keepItemsMounted:this.props.keepItemsMounted,state:s,expanded:this.expandedItems,handleSelect:this.handleSelect,children:this.props.children};return d.renderChildren(a)}render(){const s={"aria-activedescendant":this.activeDescendant},a=o.classNames("k-panelbar",this.props.className);return u.createElement("ul",{ref:e=>{this._element=e},dir:this.props.dir,role:"tree",tabIndex:0,onKeyDown:this.handleKeyDown,onFocus:this.handleWrapperFocus,onBlur:this.handleWrapperBlur,className:a,style:this.props.style,...s},this.children,this.showLicenseWatermark&&u.createElement(o.WatermarkOverlay,null))}nextTick(s){this.nextTickId=window.setTimeout(()=>s())}};h.propTypes={animation:r.bool,children:function(s,a){const e=s[a];if(e){if(Array.isArray(e)){for(const n of e)if(!n.type||n.type!==g.PanelBarItem)return new Error("PanelBar children should be either PanelBarItem or Array of PanelBarItem.")}else if(e.type!==g.PanelBarItem)return new Error("PanelBar child should be either PanelBarItem or Array of PanelBarItem.");return null}return null},dir:r.string,selected:r.string,expanded:r.arrayOf(r.string),focused:r.string,expandMode:r.oneOf(["single","multiple"]),className:r.string,keepItemsMounted:r.bool,onSelect:r.func,style:r.object},h.defaultProps={expandMode:"multiple",animation:!0,keepItemsMounted:!1};let m=h;exports.PanelBar=m;
|
package/panelbar/PanelBar.mjs
CHANGED
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
import * as p from "react";
|
|
10
10
|
import a from "prop-types";
|
|
11
11
|
import { PanelBarItem as u } from "./PanelBarItem.mjs";
|
|
12
|
-
import { flatChildren as x, isArrayEqual as
|
|
13
|
-
import { Keys as d, validatePackage as
|
|
12
|
+
import { flatChildren as x, isArrayEqual as g, flatVisibleChildren as k, getInitialState as P, getFirstId as I, renderChildren as b } from "./util.mjs";
|
|
13
|
+
import { Keys as d, validatePackage as v, shouldShowValidationUI as w, classNames as S, WatermarkOverlay as K } from "@progress/kendo-react-common";
|
|
14
14
|
import { packageMetadata as m } from "../package-metadata.mjs";
|
|
15
15
|
import { NavigationAction as n } from "./interfaces/NavigationAction.mjs";
|
|
16
16
|
const c = class c extends p.Component {
|
|
@@ -24,7 +24,7 @@ const c = class c extends p.Component {
|
|
|
24
24
|
l.props.uniquePrivateKey === (t.uniquePrivateKey || this.state.focused) && (s = l);
|
|
25
25
|
}), this.expandMode) {
|
|
26
26
|
case "single":
|
|
27
|
-
e = [...s.props.parentUniquePrivateKey, s.props.uniquePrivateKey],
|
|
27
|
+
e = [...s.props.parentUniquePrivateKey, s.props.uniquePrivateKey], g(this.expandedItems, e) && (s.props.parentUniquePrivateKey ? e = [...s.props.parentUniquePrivateKey] : e = []);
|
|
28
28
|
break;
|
|
29
29
|
case "multiple": {
|
|
30
30
|
e = this.expandedItems.slice();
|
|
@@ -41,7 +41,7 @@ const c = class c extends p.Component {
|
|
|
41
41
|
expandedItems: e
|
|
42
42
|
});
|
|
43
43
|
}, this.onFocus = (t, r = 0) => {
|
|
44
|
-
const s =
|
|
44
|
+
const s = k(p.Children.toArray(this.children));
|
|
45
45
|
let e;
|
|
46
46
|
s.forEach((l, h) => {
|
|
47
47
|
if (l.props.uniquePrivateKey === (t.uniquePrivateKey || this.state.focused)) {
|
|
@@ -96,7 +96,7 @@ const c = class c extends p.Component {
|
|
|
96
96
|
}
|
|
97
97
|
e !== null && (t.preventDefault(), this.onNavigate(t, e));
|
|
98
98
|
}
|
|
99
|
-
},
|
|
99
|
+
}, v(m), this.showLicenseWatermark = w(m);
|
|
100
100
|
const o = P(i, this.expandMode);
|
|
101
101
|
o.focused || (o.focused = I(i)), this.state = o;
|
|
102
102
|
}
|
|
@@ -119,7 +119,7 @@ const c = class c extends p.Component {
|
|
|
119
119
|
handleSelect: this.handleSelect,
|
|
120
120
|
children: this.props.children
|
|
121
121
|
};
|
|
122
|
-
return
|
|
122
|
+
return b(o);
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* @hidden
|
|
@@ -129,7 +129,6 @@ const c = class c extends p.Component {
|
|
|
129
129
|
"aria-activedescendant": this.activeDescendant
|
|
130
130
|
}, o = S(
|
|
131
131
|
"k-panelbar",
|
|
132
|
-
"k-pos-relative",
|
|
133
132
|
this.props.className
|
|
134
133
|
);
|
|
135
134
|
return /* @__PURE__ */ p.createElement(
|
package/panelbar/PanelBarItem.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react"),t=require("prop-types"),c=require("@progress/kendo-react-common"),y=require("@progress/kendo-svg-icons"),T=require("@progress/kendo-react-animation");function A(i){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const e in i)if(e!=="default"){const r=Object.getOwnPropertyDescriptor(i,e);Object.defineProperty(n,e,r.get?r:{enumerable:!0,get:()=>i[e]})}}return n.default=i,Object.freeze(n)}const a=A(P);function j({imageUrl:i,icon:n,svgIcon:e,iconClass:r}){return i?a.createElement("img",{role:"presentation",className:"k-panelbar-item-icon k-image",src:i}):n||e?a.createElement(c.IconWrap,{className:"k-panelbar-item-icon",name:n,icon:e}):r?a.createElement("span",{role:"presentation",className:"k-panelbar-item-icon "+r}):null}const d=class d extends a.PureComponent{constructor(n){super(n),this.handleItemClick=()=>{const{onSelect:e,disabled:r,id:p}=this.props;e&&!r&&e.call(void 0,{uniquePrivateKey:this.props.uniquePrivateKey,id:p,target:this})},this.childFactory=e=>this.props.keepItemsMounted?a.cloneElement(e,{...e.props,in:this.props.expanded}):e,this.state={show:n.expanded||!1}}render(){const{id:n,children:e,title:r,uniquePrivateKey:p,disabled:s,selected:m,focused:g,expanded:o,className:v,level:h,headerClassName:N,animation:b,keepItemsMounted:l}=this.props,E={role:"treeitem","aria-disabled":s,"aria-hidden":!s&&!o,"aria-selected":!s&&m,"aria-expanded":!s&&o&&!!e},x=c.classNames("k-panelbar-item",{"k-panelbar-header":h===0,"k-expanded":o&&!!e,"k-disabled":s},`k-level-${h}`,v),I=c.classNames("k-link",{"k-selected":!s&&m,"k-focus":!s&&g},N),S={display:"block"},C=j(this.props),O=!s&&e?a.createElement(c.IconWrap,{name:o?"chevron-up":"chevron-down",icon:o?y.chevronUpIcon:y.chevronDownIcon,className:c.classNames("k-panelbar-toggle",o?"k-panelbar-collapse":"k-panelbar-expand")}):null;let k=!1;e&&Array.isArray(e)&&(k=e[0].type===d);const q=k?a.createElement("ul",{role:"group","aria-expanded":o,"aria-hidden":!o,className:"k-panelbar-group",style:{display:l?this.state.show?"block":"none":"block"}},e):e,f=!s&&o||l?q:null,w=(b===void 0||b)&&!s&&e?a.createElement(T.Reveal,{transitionEnterDuration:200,transitionExitDuration:200,key:p+"_animation",style:S,children:f,childFactory:l&&this.childFactory,unmountOnExit:!l,onBeforeEnter:()=>l&&this.setState({show:!0}),onAfterExited:()=>l&&this.setState({show:!1})}):f;return a.createElement("li",{id:n,className:x,...E},a.createElement("span",{className:I,onClick:this.handleItemClick},C,a.createElement("span",{className:"k-panelbar-item-text"},r),O),w)}};d.propTypes={animation:t.bool,children:t.any,className:t.string,icon:t.string,iconClass:t.string,imageUrl:t.string,svgIcon:c.svgIconPropType,expanded:t.bool,disabled:t.bool,onSelect:t.func,selected:t.bool,level:t.number,title:t.oneOfType([t.string,t.element]),id:t.oneOfType([t.string,t.number]),focused:t.bool,keepItemsMounted:t.bool},d.defaultProps={title:"Untitled"};let u=d;exports.PanelBarItem=u;
|
|
@@ -7,27 +7,27 @@
|
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
9
|
import * as n from "react";
|
|
10
|
-
import
|
|
11
|
-
import { svgIconPropType as
|
|
12
|
-
import { chevronUpIcon as
|
|
13
|
-
import { Reveal as
|
|
14
|
-
function
|
|
15
|
-
return d ? /* @__PURE__ */ n.createElement("img", { role: "presentation", className: "k-panelbar-item-icon k-image", src: d }) :
|
|
10
|
+
import t from "prop-types";
|
|
11
|
+
import { svgIconPropType as P, classNames as p, IconWrap as y } from "@progress/kendo-react-common";
|
|
12
|
+
import { chevronUpIcon as q, chevronDownIcon as D } from "@progress/kendo-svg-icons";
|
|
13
|
+
import { Reveal as F } from "@progress/kendo-react-animation";
|
|
14
|
+
function K({ imageUrl: d, icon: r, svgIcon: e, iconClass: o }) {
|
|
15
|
+
return d ? /* @__PURE__ */ n.createElement("img", { role: "presentation", className: "k-panelbar-item-icon k-image", src: d }) : r || e ? /* @__PURE__ */ n.createElement(y, { className: "k-panelbar-item-icon", name: r, icon: e }) : o ? /* @__PURE__ */ n.createElement("span", { role: "presentation", className: "k-panelbar-item-icon " + o }) : null;
|
|
16
16
|
}
|
|
17
17
|
const l = class l extends n.PureComponent {
|
|
18
|
-
constructor(
|
|
19
|
-
super(
|
|
20
|
-
const { onSelect:
|
|
21
|
-
|
|
18
|
+
constructor(r) {
|
|
19
|
+
super(r), this.handleItemClick = () => {
|
|
20
|
+
const { onSelect: e, disabled: o, id: c } = this.props;
|
|
21
|
+
e && !o && e.call(void 0, {
|
|
22
22
|
uniquePrivateKey: this.props.uniquePrivateKey,
|
|
23
23
|
id: c,
|
|
24
24
|
target: this
|
|
25
25
|
});
|
|
26
|
-
}, this.childFactory = (
|
|
27
|
-
...
|
|
26
|
+
}, this.childFactory = (e) => this.props.keepItemsMounted ? n.cloneElement(e, {
|
|
27
|
+
...e.props,
|
|
28
28
|
in: this.props.expanded
|
|
29
|
-
}) :
|
|
30
|
-
show:
|
|
29
|
+
}) : e, this.state = {
|
|
30
|
+
show: r.expanded || !1
|
|
31
31
|
};
|
|
32
32
|
}
|
|
33
33
|
/**
|
|
@@ -35,114 +35,117 @@ const l = class l extends n.PureComponent {
|
|
|
35
35
|
*/
|
|
36
36
|
render() {
|
|
37
37
|
const {
|
|
38
|
-
id:
|
|
39
|
-
children:
|
|
40
|
-
title:
|
|
38
|
+
id: r,
|
|
39
|
+
children: e,
|
|
40
|
+
title: o,
|
|
41
41
|
uniquePrivateKey: c,
|
|
42
42
|
disabled: a,
|
|
43
43
|
selected: m,
|
|
44
|
-
focused:
|
|
44
|
+
focused: E,
|
|
45
45
|
expanded: s,
|
|
46
|
-
className:
|
|
46
|
+
className: g,
|
|
47
47
|
level: u,
|
|
48
|
-
headerClassName:
|
|
48
|
+
headerClassName: v,
|
|
49
49
|
animation: h,
|
|
50
50
|
keepItemsMounted: i
|
|
51
|
-
} = this.props,
|
|
51
|
+
} = this.props, x = {
|
|
52
52
|
role: "treeitem",
|
|
53
53
|
"aria-disabled": a,
|
|
54
54
|
"aria-hidden": !a && !s,
|
|
55
55
|
"aria-selected": !a && m,
|
|
56
|
-
"aria-expanded": !a && s && !!
|
|
57
|
-
},
|
|
56
|
+
"aria-expanded": !a && s && !!e
|
|
57
|
+
}, N = p(
|
|
58
58
|
"k-panelbar-item",
|
|
59
59
|
{
|
|
60
60
|
"k-panelbar-header": u === 0,
|
|
61
|
-
"k-expanded": s && !!
|
|
61
|
+
"k-expanded": s && !!e,
|
|
62
62
|
"k-disabled": a
|
|
63
63
|
},
|
|
64
64
|
`k-level-${u}`,
|
|
65
|
-
|
|
66
|
-
),
|
|
65
|
+
g
|
|
66
|
+
), C = p(
|
|
67
67
|
"k-link",
|
|
68
68
|
{
|
|
69
69
|
"k-selected": !a && m,
|
|
70
|
-
"k-focus": !a &&
|
|
70
|
+
"k-focus": !a && E
|
|
71
71
|
},
|
|
72
|
-
|
|
73
|
-
), I = { display: "block" }, w =
|
|
74
|
-
|
|
72
|
+
v
|
|
73
|
+
), I = { display: "block" }, w = K(this.props), A = !a && e ? /* @__PURE__ */ n.createElement(
|
|
74
|
+
y,
|
|
75
75
|
{
|
|
76
76
|
name: s ? "chevron-up" : "chevron-down",
|
|
77
|
-
icon: s ?
|
|
77
|
+
icon: s ? q : D,
|
|
78
78
|
className: p(
|
|
79
79
|
"k-panelbar-toggle",
|
|
80
80
|
s ? "k-panelbar-collapse" : "k-panelbar-expand"
|
|
81
81
|
)
|
|
82
82
|
}
|
|
83
|
-
) : null
|
|
83
|
+
) : null;
|
|
84
|
+
let k = !1;
|
|
85
|
+
e && Array.isArray(e) && (k = e[0].type === l);
|
|
86
|
+
const S = k ? /* @__PURE__ */ n.createElement(
|
|
84
87
|
"ul",
|
|
85
88
|
{
|
|
86
89
|
role: "group",
|
|
87
90
|
"aria-expanded": s,
|
|
88
91
|
"aria-hidden": !s,
|
|
89
|
-
className: "k-panelbar-group
|
|
92
|
+
className: "k-panelbar-group",
|
|
90
93
|
style: { display: i ? this.state.show ? "block" : "none" : "block" }
|
|
91
94
|
},
|
|
92
|
-
|
|
93
|
-
) :
|
|
94
|
-
|
|
95
|
+
e
|
|
96
|
+
) : e, b = !a && s || i ? S : null, T = (h === void 0 || h) && !a && e ? /* @__PURE__ */ n.createElement(
|
|
97
|
+
F,
|
|
95
98
|
{
|
|
96
99
|
transitionEnterDuration: 200,
|
|
97
100
|
transitionExitDuration: 200,
|
|
98
101
|
key: c + "_animation",
|
|
99
102
|
style: I,
|
|
100
|
-
children:
|
|
103
|
+
children: b,
|
|
101
104
|
childFactory: i && this.childFactory,
|
|
102
105
|
unmountOnExit: !i,
|
|
103
106
|
onBeforeEnter: () => i && this.setState({ show: !0 }),
|
|
104
107
|
onAfterExited: () => i && this.setState({ show: !1 })
|
|
105
108
|
}
|
|
106
|
-
) :
|
|
109
|
+
) : b;
|
|
107
110
|
return /* @__PURE__ */ n.createElement(
|
|
108
111
|
"li",
|
|
109
112
|
{
|
|
110
|
-
id:
|
|
111
|
-
className:
|
|
112
|
-
...
|
|
113
|
+
id: r,
|
|
114
|
+
className: N,
|
|
115
|
+
...x
|
|
113
116
|
},
|
|
114
|
-
/* @__PURE__ */ n.createElement("span", { className:
|
|
115
|
-
|
|
117
|
+
/* @__PURE__ */ n.createElement("span", { className: C, onClick: this.handleItemClick }, w, /* @__PURE__ */ n.createElement("span", { className: "k-panelbar-item-text" }, o), A),
|
|
118
|
+
T
|
|
116
119
|
);
|
|
117
120
|
}
|
|
118
121
|
};
|
|
119
122
|
l.propTypes = {
|
|
120
|
-
animation:
|
|
121
|
-
children:
|
|
122
|
-
className:
|
|
123
|
-
icon:
|
|
124
|
-
iconClass:
|
|
125
|
-
imageUrl:
|
|
126
|
-
svgIcon:
|
|
127
|
-
expanded:
|
|
128
|
-
disabled:
|
|
129
|
-
onSelect:
|
|
130
|
-
selected:
|
|
131
|
-
level:
|
|
132
|
-
title:
|
|
133
|
-
|
|
134
|
-
|
|
123
|
+
animation: t.bool,
|
|
124
|
+
children: t.any,
|
|
125
|
+
className: t.string,
|
|
126
|
+
icon: t.string,
|
|
127
|
+
iconClass: t.string,
|
|
128
|
+
imageUrl: t.string,
|
|
129
|
+
svgIcon: P,
|
|
130
|
+
expanded: t.bool,
|
|
131
|
+
disabled: t.bool,
|
|
132
|
+
onSelect: t.func,
|
|
133
|
+
selected: t.bool,
|
|
134
|
+
level: t.number,
|
|
135
|
+
title: t.oneOfType([
|
|
136
|
+
t.string,
|
|
137
|
+
t.element
|
|
135
138
|
]),
|
|
136
|
-
id:
|
|
137
|
-
|
|
138
|
-
|
|
139
|
+
id: t.oneOfType([
|
|
140
|
+
t.string,
|
|
141
|
+
t.number
|
|
139
142
|
]),
|
|
140
|
-
focused:
|
|
141
|
-
keepItemsMounted:
|
|
143
|
+
focused: t.bool,
|
|
144
|
+
keepItemsMounted: t.bool
|
|
142
145
|
}, l.defaultProps = {
|
|
143
146
|
title: "Untitled"
|
|
144
147
|
};
|
|
145
|
-
let
|
|
148
|
+
let f = l;
|
|
146
149
|
export {
|
|
147
|
-
|
|
150
|
+
f as PanelBarItem
|
|
148
151
|
};
|
package/panelbar/util.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react"),l=require("./PanelBarItem.js");function S(n){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(r,e,t.get?t:{enumerable:!0,get:()=>n[e]})}}return r.default=n,Object.freeze(r)}const p=S(O),j=n=>typeof n!="object"||!("type"in n)||n.type!==l.PanelBarItem,m=({animation:n=!0,keepItemsMounted:r=!1,state:e,expanded:t,handleSelect:i,children:o,parentExpanded:u=!0,level:a=0,parentPrivateKey:d=[]})=>{const b=p.Children.toArray(o).filter(j),E=b.length?b:o;return p.Children.map(E,(s,x)=>{if(s&&s.type===l.PanelBarItem){let g;const f=c(s,d,x);if(s.props.children){const B={animation:n,keepItemsMounted:r,state:e,expanded:t,handleSelect:i,children:s.props.children,parentExpanded:(t||[]).indexOf(f)>-1,level:a+1,parentPrivateKey:[...d,f]};g=m(B)}return p.cloneElement(s,{...s.props,animation:s.props.animation!==void 0?s.props.animation:n,keepItemsMounted:r,id:s.props.id||`k-panelbar-item-default-${f}`,uniquePrivateKey:f,parentUniquePrivateKey:d,parentExpanded:u,level:a,expanded:(t||[]).indexOf(f)>-1,focused:e.focused===f&&e.wrapperFocused,selected:e.selected===f,children:g,onSelect:i})}else return p.createElement("div",{className:"k-panelbar-content"},s)})},q=n=>{const r=p.Children.toArray(n.children)[0];return r?c(r,[],0):""},y=(n,r,e={expanded:n.expanded||[],selected:n.selected||"",focused:n.focused||"",wrapperFocused:!1},t=!0,i=[])=>(p.Children.map(n.children,(o,u)=>{if(o&&o.type===l.PanelBarItem){const a=c(o,i,u);!o.props.disabled&&t&&(o.props.selected&&(e.selected=a),o.props.focused&&(e.focused=a),o.props.expanded&&(r==="multiple"?e.expanded.push(a):r==="single"&&(e.expanded=[a])),o.props.children&&(e=y(o.props,r,e,!!o.props.expanded,[...i,a])))}}),e),c=(n,r,e)=>n&&n.props&&n.props.id?n.props.id:r.length?r[r.length-1]+`.${e}`:`.${e}`;function I(n,r=[]){return(n||[]).forEach(e=>{e.disabled||(r.push(e),e.expanded&&e.children&&I(e.children,r))}),r}function C(n,r=[]){return p.Children.forEach(n,e=>{e&&e.props&&!e.props.disabled&&(r.push(e),e.props.children&&C(e.props.children,r))}),r}function P(n,r=[]){return p.Children.forEach(n,e=>{e&&e.props&&!e.props.disabled&&(e.props.expanded||e.props.parentExpanded)&&(r.push(e),e.props.children&&P(e.props.children,r))}),r}const v=n=>n!=null;exports.PanelBarUtils=void 0;(n=>{function r(e){return e.map((t,i)=>{let o;return t.content&&(o=t.content),t.children&&(o=r(t.children)),p.createElement(l.PanelBarItem,{...t,children:o,key:t.id||i})})}n.mapItemsToComponents=r})(exports.PanelBarUtils||(exports.PanelBarUtils={}));const F=(n,r)=>n.length!==r.length?!1:n.every((e,t)=>e===r[t]);exports.flatChildren=C;exports.flatVisibleChildren=P;exports.flatVisibleItems=I;exports.getFirstId=q;exports.getInitialState=y;exports.isArrayEqual=F;exports.isPresent=v;exports.renderChildren=m;
|
package/panelbar/util.mjs
CHANGED
|
@@ -6,99 +6,102 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
import * as
|
|
10
|
-
import { PanelBarItem as
|
|
11
|
-
const
|
|
9
|
+
import * as t from "react";
|
|
10
|
+
import { PanelBarItem as i } from "./PanelBarItem.mjs";
|
|
11
|
+
const y = (n) => typeof n != "object" || !("type" in n) || n.type !== i, I = ({
|
|
12
12
|
animation: n = !0,
|
|
13
13
|
keepItemsMounted: r = !1,
|
|
14
14
|
state: e,
|
|
15
15
|
expanded: o,
|
|
16
16
|
handleSelect: f,
|
|
17
17
|
children: p,
|
|
18
|
-
parentExpanded:
|
|
19
|
-
level:
|
|
20
|
-
parentPrivateKey:
|
|
21
|
-
}) =>
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
s,
|
|
41
|
-
{
|
|
42
|
-
...s.props,
|
|
43
|
-
animation: s.props.animation !== void 0 ? s.props.animation : n,
|
|
44
|
-
keepItemsMounted: r,
|
|
45
|
-
id: s.props.id || `k-panelbar-item-default-${d}`,
|
|
46
|
-
uniquePrivateKey: d,
|
|
47
|
-
parentUniquePrivateKey: u,
|
|
48
|
-
parentExpanded: i,
|
|
49
|
-
level: t,
|
|
50
|
-
expanded: (o || []).indexOf(d) > -1,
|
|
51
|
-
focused: e.focused === d && e.wrapperFocused,
|
|
52
|
-
selected: e.selected === d,
|
|
53
|
-
children: m,
|
|
54
|
-
onSelect: f
|
|
18
|
+
parentExpanded: u = !0,
|
|
19
|
+
level: a = 0,
|
|
20
|
+
parentPrivateKey: c = []
|
|
21
|
+
}) => {
|
|
22
|
+
const m = t.Children.toArray(p).filter(y), C = m.length ? m : p;
|
|
23
|
+
return t.Children.map(C, (s, E) => {
|
|
24
|
+
if (s && s.type === i) {
|
|
25
|
+
let g;
|
|
26
|
+
const d = l(s, c, E);
|
|
27
|
+
if (s.props.children) {
|
|
28
|
+
const b = {
|
|
29
|
+
animation: n,
|
|
30
|
+
keepItemsMounted: r,
|
|
31
|
+
state: e,
|
|
32
|
+
expanded: o,
|
|
33
|
+
handleSelect: f,
|
|
34
|
+
children: s.props.children,
|
|
35
|
+
parentExpanded: (o || []).indexOf(d) > -1,
|
|
36
|
+
level: a + 1,
|
|
37
|
+
parentPrivateKey: [...c, d]
|
|
38
|
+
};
|
|
39
|
+
g = I(b);
|
|
55
40
|
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
41
|
+
return t.cloneElement(
|
|
42
|
+
s,
|
|
43
|
+
{
|
|
44
|
+
...s.props,
|
|
45
|
+
animation: s.props.animation !== void 0 ? s.props.animation : n,
|
|
46
|
+
keepItemsMounted: r,
|
|
47
|
+
id: s.props.id || `k-panelbar-item-default-${d}`,
|
|
48
|
+
uniquePrivateKey: d,
|
|
49
|
+
parentUniquePrivateKey: c,
|
|
50
|
+
parentExpanded: u,
|
|
51
|
+
level: a,
|
|
52
|
+
expanded: (o || []).indexOf(d) > -1,
|
|
53
|
+
focused: e.focused === d && e.wrapperFocused,
|
|
54
|
+
selected: e.selected === d,
|
|
55
|
+
children: g,
|
|
56
|
+
onSelect: f
|
|
57
|
+
}
|
|
58
|
+
);
|
|
59
|
+
} else
|
|
60
|
+
return /* @__PURE__ */ t.createElement("div", { className: "k-panelbar-content" }, s);
|
|
61
|
+
});
|
|
62
|
+
}, w = (n) => {
|
|
63
|
+
const r = t.Children.toArray(n.children)[0];
|
|
61
64
|
return r ? l(r, [], 0) : "";
|
|
62
|
-
},
|
|
65
|
+
}, v = (n, r, e = {
|
|
63
66
|
expanded: n.expanded || [],
|
|
64
67
|
selected: n.selected || "",
|
|
65
68
|
focused: n.focused || "",
|
|
66
69
|
wrapperFocused: !1
|
|
67
|
-
}, o = !0, f = []) => (
|
|
68
|
-
if (p && p.type ===
|
|
69
|
-
const
|
|
70
|
-
!p.props.disabled && o && (p.props.selected && (e.selected =
|
|
70
|
+
}, o = !0, f = []) => (t.Children.map(n.children, (p, u) => {
|
|
71
|
+
if (p && p.type === i) {
|
|
72
|
+
const a = l(p, f, u);
|
|
73
|
+
!p.props.disabled && o && (p.props.selected && (e.selected = a), p.props.focused && (e.focused = a), p.props.expanded && (r === "multiple" ? e.expanded.push(a) : r === "single" && (e.expanded = [a])), p.props.children && (e = v(
|
|
71
74
|
p.props,
|
|
72
75
|
r,
|
|
73
76
|
e,
|
|
74
77
|
!!p.props.expanded,
|
|
75
|
-
[...f,
|
|
78
|
+
[...f, a]
|
|
76
79
|
)));
|
|
77
80
|
}
|
|
78
81
|
}), e), l = (n, r, e) => n && n.props && n.props.id ? n.props.id : r.length ? r[r.length - 1] + `.${e}` : `.${e}`;
|
|
79
|
-
function
|
|
82
|
+
function q(n, r = []) {
|
|
80
83
|
return (n || []).forEach((e) => {
|
|
81
|
-
e.disabled || (r.push(e), e.expanded && e.children &&
|
|
84
|
+
e.disabled || (r.push(e), e.expanded && e.children && q(e.children, r));
|
|
82
85
|
}), r;
|
|
83
86
|
}
|
|
84
|
-
function
|
|
85
|
-
return
|
|
86
|
-
e && e.props && !e.props.disabled && (r.push(e), e.props.children &&
|
|
87
|
+
function F(n, r = []) {
|
|
88
|
+
return t.Children.forEach(n, (e) => {
|
|
89
|
+
e && e.props && !e.props.disabled && (r.push(e), e.props.children && F(e.props.children, r));
|
|
87
90
|
}), r;
|
|
88
91
|
}
|
|
89
|
-
function
|
|
90
|
-
return
|
|
91
|
-
e && e.props && !e.props.disabled && (e.props.expanded || e.props.parentExpanded) && (r.push(e), e.props.children &&
|
|
92
|
+
function $(n, r = []) {
|
|
93
|
+
return t.Children.forEach(n, (e) => {
|
|
94
|
+
e && e.props && !e.props.disabled && (e.props.expanded || e.props.parentExpanded) && (r.push(e), e.props.children && $(e.props.children, r));
|
|
92
95
|
}), r;
|
|
93
96
|
}
|
|
94
|
-
const
|
|
97
|
+
const A = (n) => n != null;
|
|
95
98
|
var x;
|
|
96
99
|
((n) => {
|
|
97
100
|
function r(e) {
|
|
98
101
|
return e.map((o, f) => {
|
|
99
102
|
let p;
|
|
100
|
-
return o.content && (p = o.content), o.children && (p = r(o.children)), /* @__PURE__ */
|
|
101
|
-
|
|
103
|
+
return o.content && (p = o.content), o.children && (p = r(o.children)), /* @__PURE__ */ t.createElement(
|
|
104
|
+
i,
|
|
102
105
|
{
|
|
103
106
|
...o,
|
|
104
107
|
children: p,
|
|
@@ -109,15 +112,15 @@ var x;
|
|
|
109
112
|
}
|
|
110
113
|
n.mapItemsToComponents = r;
|
|
111
114
|
})(x || (x = {}));
|
|
112
|
-
const
|
|
115
|
+
const B = (n, r) => n.length !== r.length ? !1 : n.every((e, o) => e === r[o]);
|
|
113
116
|
export {
|
|
114
117
|
x as PanelBarUtils,
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
118
|
+
F as flatChildren,
|
|
119
|
+
$ as flatVisibleChildren,
|
|
120
|
+
q as flatVisibleItems,
|
|
121
|
+
w as getFirstId,
|
|
122
|
+
v as getInitialState,
|
|
123
|
+
B as isArrayEqual,
|
|
124
|
+
A as isPresent,
|
|
125
|
+
I as renderChildren
|
|
123
126
|
};
|
package/splitter/Splitter.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react"),
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react"),B=require("./SplitterPane.js"),_=require("./SplitterBar.js"),T=require("@progress/kendo-react-common"),k=require("../package-metadata.js"),C=require("./messages/index.js"),N=require("@progress/kendo-react-intl");function w(d){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>d[e]})}}return i.default=d,Object.freeze(i)}const S=w(R),q={collapsible:!1,collapsed:!1,resizable:!0,scrollable:!0},L=150,b=class b extends S.Component{constructor(i){super(i),this._container=null,this.validatePanes=e=>{if(!e.filter(n=>n.size===void 0).length)throw new Error("The Splitter should have at least one pane without a set size.")},this.mapPaneOptions=(e,t)=>{const n=this.orientation,{dragIndex:r,isDragging:a}=this.state,l=[];for(let s=0;s<t.length;s++){let o=!1;const p=t[s];S.isValidElement(p)&&(o=p.type.displayName==="Splitter");let h=!1;a&&r!==void 0&&(h=r===s||r+1===s),l.push({...q,orientation:n,containsSplitter:o,overlay:h,...(e||[])[s]})}return l},this.mapSplitterPanes=(e,t)=>{const n=N.provideLocalizationService(this).toLanguageString(C.splitBarLabel,C.messages[C.splitBarLabel]);return e.map((r,a)=>{let l;const s=a*2,o=s+1;if(a+1<e.length){const h=e[a+1];l=S.createElement(_.SplitterBar,{key:o,index:a,orientation:r.orientation,prev:r,next:h,ariaLabel:n,onDrag:this.onBarDragResize,onToggle:this.onBarToggle,onKeyboardResize:this.onBarKeyboardResize,isRtl:this.isRtl})}return[S.createElement(B.SplitterPane,{key:s,...r},t[a]),l]})},this.onBarToggle=(e,t)=>{const r=this.panesOptions(this.panesContent).map((a,l)=>{const s=this.getPaneProps(a);return l===e?{...s,collapsed:!a.collapsed}:{...s}});this.props.onChange&&this.props.onChange({newState:r,isLast:!0,nativeEvent:t})},this.onBarDragResize=(e,t,n,r,a)=>{const l=new Date().getTime(),{pageX:s,pageY:o}=e,{prevElement:p,nextElement:h}=this.surroudingPanes(t);if(!p||!h)return;if(r){this.setState({isDragging:!0,dragIndex:n,startTime:l,originalX:s,originalY:o,originalPrevSize:this.elementSize(p),originalNextSize:this.elementSize(h)});return}const{originalPrevSize:P,originalNextSize:c,startTime:v,originalX:f,originalY:m}=this.state;if(!r&&l-v<L){a&&this.resetDragState();return}let g;this.orientation==="vertical"?g=o-m:this.isRtl?g=f-s:g=s-f,this.resize(n,n+1,P,c,g,a,e),a&&this.resetDragState()},this.onBarKeyboardResize=(e,t,n,r)=>{const{prevElement:a,nextElement:l}=this.surroudingPanes(e),s=this.elementSize(a),o=this.elementSize(l);this.resize(t,t+1,s,o,n,!0,r)},this.containerSize=()=>this._container?this.elementSize(this._container,!0):0,this.panesOptions=e=>this.mapPaneOptions(this.panes,e),this.elementSize=(e,t)=>{const n=t?"client":"offset";return this.orientation==="vertical"?e[`${n}Height`]:e[`${n}Width`]},this.clamp=(e,t,n)=>Math.min(t,Math.max(e,n)),this.fixedSize=e=>e&&e.length>0,T.validatePackage(k.packageMetadata),this.state={isDragging:!1,dragIndex:void 0,startTime:0,originalX:0,originalY:0,originalPrevSize:0,originalNextSize:0,panes:i.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 S.Children.toArray(this.props.children).filter(i=>i)}render(){const i=this.panesContent,e=this.panesOptions(i),t=T.classNames("k-splitter","k-splitter-flex",`k-splitter-${this.orientation}`,this.props.className);return this.validatePanes(e),S.createElement("div",{style:this.props.style,ref:n=>this._container=n,className:t},this.mapSplitterPanes(e,i))}surroudingPanes(i){return{prevElement:i.previousElementSibling,nextElement:i.nextElementSibling}}isPercent(i){return/%$/.test(i)}toPixels(i,e){let t=parseInt(i,10);return this.isPercent(i)&&(t=e*t/100),t}resetDragState(){this.setState({isDragging:!1,dragIndex:void 0,startTime:0,originalX:0,originalY:0,originalPrevSize:0,originalNextSize:0})}resize(i,e,t,n,r,a,l){const s=this.panesOptions(this.panesContent),o=s[i],p=s[e],h=t+n,P=this.containerSize(),c=u=>this.toPixels(u,P),v={index:i,initialSize:t,min:c(o.min)||h-c(p.max)||0,max:c(o.max)||h-c(p.min)||h},f={index:e,initialSize:n,min:c(p.min)||h-c(o.max)||0,max:c(p.max)||h-c(o.min)||h},m=(u,x)=>{const z=s[u.index],E=this.clamp(u.min,u.max,u.initialSize+x);return this.isPercent(z.size||"")?100*E/P+"%":E+"px"};let g,O;this.fixedSize(o.size)&&this.fixedSize(p.size)?(g=m(v,r),O=m(f,-r)):p.collapsible||this.fixedSize(p.size)?O=m(f,-r):g=m(v,r);const y=s.map((u,x)=>{const z=this.getPaneProps(u);return x===i?{...z,size:g}:x===e?{...z,size:O}:{...z}});this.panesDuringOnChange=y,this.isControlledState||this.setState({panes:y}),this.props.onChange&&this.props.onChange({newState:y,isLast:a,nativeEvent:l}),this.panesDuringOnChange=void 0}getPaneProps(i){const{orientation:e,overlay:t,containsSplitter:n,...r}=i;return r}};b.displayName="Splitter";let D=b;exports.Splitter=D;
|
package/splitter/Splitter.mjs
CHANGED
|
@@ -9,9 +9,9 @@
|
|
|
9
9
|
import * as S from "react";
|
|
10
10
|
import { SplitterPane as T } from "./SplitterPane.mjs";
|
|
11
11
|
import { SplitterBar as b } from "./SplitterBar.mjs";
|
|
12
|
-
import { validatePackage as
|
|
13
|
-
import { packageMetadata as
|
|
14
|
-
import { splitBarLabel as O, messages as
|
|
12
|
+
import { validatePackage as B, classNames as N } from "@progress/kendo-react-common";
|
|
13
|
+
import { packageMetadata as R } from "../package-metadata.mjs";
|
|
14
|
+
import { splitBarLabel as O, messages as w } from "./messages/index.mjs";
|
|
15
15
|
import { provideLocalizationService as _ } from "@progress/kendo-react-intl";
|
|
16
16
|
const k = {
|
|
17
17
|
collapsible: !1,
|
|
@@ -43,7 +43,7 @@ const k = {
|
|
|
43
43
|
}
|
|
44
44
|
return l;
|
|
45
45
|
}, this.mapSplitterPanes = (t, e) => {
|
|
46
|
-
const i = _(this).toLanguageString(O,
|
|
46
|
+
const i = _(this).toLanguageString(O, w[O]);
|
|
47
47
|
return t.map((r, a) => {
|
|
48
48
|
let l;
|
|
49
49
|
const n = a * 2, o = n + 1;
|
|
@@ -118,7 +118,7 @@ const k = {
|
|
|
118
118
|
}, this.containerSize = () => this._container ? this.elementSize(this._container, !0) : 0, this.panesOptions = (t) => this.mapPaneOptions(this.panes, t), this.elementSize = (t, e) => {
|
|
119
119
|
const i = e ? "client" : "offset";
|
|
120
120
|
return this.orientation === "vertical" ? t[`${i}Height`] : t[`${i}Width`];
|
|
121
|
-
}, this.clamp = (t, e, i) => Math.min(e, Math.max(t, i)), this.fixedSize = (t) => t && t.length > 0,
|
|
121
|
+
}, this.clamp = (t, e, i) => Math.min(e, Math.max(t, i)), this.fixedSize = (t) => t && t.length > 0, B(R), this.state = {
|
|
122
122
|
isDragging: !1,
|
|
123
123
|
dragIndex: void 0,
|
|
124
124
|
startTime: 0,
|
|
@@ -148,8 +148,7 @@ const k = {
|
|
|
148
148
|
* @hidden
|
|
149
149
|
*/
|
|
150
150
|
render() {
|
|
151
|
-
const s = this.panesContent, t = this.panesOptions(s), e =
|
|
152
|
-
"k-widget",
|
|
151
|
+
const s = this.panesContent, t = this.panesOptions(s), e = N(
|
|
153
152
|
"k-splitter",
|
|
154
153
|
"k-splitter-flex",
|
|
155
154
|
`k-splitter-${this.orientation}`,
|