@progress/kendo-react-sortable 8.1.0-develop.9 → 8.1.1-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/Sortable.js +1 -1
- package/Sortable.mjs +63 -64
- package/dist/cdn/js/kendo-react-sortable.js +1 -1
- package/package-metadata.mjs +1 -1
- package/package.json +3 -3
package/Sortable.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 M=require("react"),d=require("prop-types"),h=require("@progress/kendo-react-common"),N=require("./events/SortableOnDragStartEvent.js"),P=require("./events/SortableOnDragOverEvent.js"),U=require("./events/SortableOnDragEndEvent.js"),B=require("./events/SortableOnNavigateEvent.js"),x=require("@progress/kendo-react-intl"),R=require("./messages/index.js"),f=require("./utils/utils.js"),F=require("./package-metadata.js");function k(v){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(v){for(const t in v)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(v,t);Object.defineProperty(c,t,e.get?e:{enumerable:!0,get:()=>v[t]})}}return c.default=v,Object.freeze(c)}const p=k(M),w=200,S="data-sortable-id",A="data-sortable-component",q={[A]:!0},y=class y extends p.Component{constructor(c){super(c),this.state={clientX:0,clientY:0,isDragging:!1,activeId:"",dragCueWidth:0,dragCueHeight:0},this.isRtl=!1,this.itemRefsMap={},this.oldSizesMap={},this.animatingItemMap={},this.draggableRef=null,this.isUnmounted=!1,this.focusActiveId=!1,this.isKeyboardNavigated=!1,this.isDragPrevented=!1,this.swapItems=(t,e,i)=>{let s=t[e];return t[e]=t[i],t[i]=s,e=i,e},this.generateNewState=(t,e)=>{const{data:i}=this.props,s=[...i];if(t>e)for(let r=t-1;r>=e;r--){const o=i[r];this.isItemDisabled(o)||(t=this.swapItems(s,t,r))}else for(let r=t+1;r<=e;r++){const o=i[r];this.isItemDisabled(o)||(t=this.swapItems(s,t,r))}return s},this.closestSortableItem=t=>{let e=t;for(;e;){const i=e.getAttribute(S);if(i&&this.itemRefsMap[i]===e)return{id:i,element:e};e=e.parentElement}return{id:"",element:null}},this.isSortable=t=>!!t.hasAttribute(A),this.closestSortable=t=>{let e=t;for(;e;){if(this.isSortable(e))return e;e=e.parentElement}return null},this.isSameSortable=t=>this.closestSortable(t)===this.container,this.idComparer=(t,e)=>t+""==e+"",this.findItem=t=>{const{data:e,idField:i}=this.props;if(!(t+""))return;const s=h.getter(i);return f.find(e,a=>this.idComparer(s(a),t))},this.findIndex=t=>{const{data:e,idField:i}=this.props;return t+""?f.findIndex(e,s=>this.idComparer(s[i],t)):-1},this.isItemDisabled=t=>t&&t[this.props.disabledField||""]===!0,this.shouldResetActive=()=>{const t=h.getActiveElement(document);return t instanceof HTMLElement?!this.closestSortableItem(t).element:!1},this.widgetTarget=t=>{const e=f.closest(t,i=>f.hasClasses(i,"k-widget")||this.isSortable(i));return e&&!this.isSortable(e)},this.allowDrag=t=>t.hasAttribute(S)||!(f.isFocusable(t)||this.widgetTarget(t)),this.onDragStart=t=>{const{event:e}=t,{onDragStart:i}=this.props,s=document.elementFromPoint(e.clientX,e.clientY),{id:a,element:r}=this.closestSortableItem(s),o=this.findItem(a);if(!a||o&&this.isItemDisabled(o)||!this.allowDrag(s)||!this.isSameSortable(s)){this.isDragPrevented=!0;return}e.isTouch&&e.originalEvent.preventDefault();const n=new N.SortableOnDragStartEvent(this,this.findIndex(a),s);i&&i.call(void 0,n),this.isDragPrevented=n.isDefaultPrevented(),this.isDragPrevented?e.originalEvent.preventDefault():(this.offsetParent=f.relativeContextElement(this.container),this.setState({activeId:a,dragCueWidth:r&&r.clientWidth||0,dragCueHeight:r&&r.clientHeight||0}))},this.onDragOver=t=>{const{event:e}=t,{onDragOver:i,data:s}=this.props;if(this.isDragPrevented)return;e.originalEvent.preventDefault();const a=this.findIndex(this.state.activeId);if(a===-1){this.resetState();return}const r=document.elementFromPoint(e.clientX,e.clientY),o=this.closestSortableItem(r),n=this.findIndex(o.id),l=s[n];if(i&&n>-1&&a!==n&&!this.isItemDisabled(l)&&!this.animatingItemMap[o.id]&&this.shouldReorder(o.element,e.clientX,e.clientY)){const u=new P.SortableOnDragOverEvent(this,a,n,this.generateNewState(a,n));i.call(void 0,u)}const g=this.parentOffset();this.setState({clientX:e.clientX-g.left,clientY:e.clientY-g.top,isDragging:!0})},this.onDragEnd=t=>{const{event:e}=t,i=this.shouldResetActive();if(this.isDragPrevented)return;const{onDragEnd:s,data:a}=this.props,r=document.elementFromPoint(e.clientX,e.clientY),o=this.closestSortableItem(r);let n=this.findIndex(o.id),l=this.findIndex(this.state.activeId);const g=this.isItemDisabled(a[n]);if((n===-1||g)&&(n=l),s){let u=this.generateNewState(l,n);if(!g){const m=this.thresholdRect(o.element);if(m&&(e.clientX<m.left||e.clientX>m.right||e.clientY<m.top||e.clientY>m.bottom)){const D=l;l=n,n=D,u=this.props.data.slice()}}const I=new U.SortableOnDragEndEvent(this,l,n,u);s.call(void 0,I)}this.resetState(i)},this.shouldReorder=(t,e,i)=>{const s=this.thresholdRect(t);return s&&e>s.left&&e<s.right&&i>s.top&&i<s.bottom},this.thresholdRect=t=>{const e=this.state.activeId,i=this.container,a=(i?Array.from(i.childNodes):[]).find(m=>m instanceof HTMLElement&&m.getAttribute(S)===e);if(!t||!a)return null;const{width:r,height:o}=a.getBoundingClientRect(),n=t.getBoundingClientRect(),l=n.top+n.height/2-o/2,g=n.left+n.width/2-r/2,u=l+o,I=g+r;return{top:l,left:g,bottom:u,right:I}},this.onItemBlur=()=>{window.setTimeout(()=>{this.isUnmounted||this.shouldResetActive()&&!this.state.isDragging&&this.setState({activeId:""})})},this.onItemFocus=t=>{const{id:e,element:i}=this.closestSortableItem(t.currentTarget);!this.idComparer(e,this.state.activeId)&&this.isSameSortable(t.target)&&i===t.target&&this.setState({activeId:e})},this.onKeyDown=t=>{const{data:e,idField:i,onNavigate:s,navigation:a}=this.props,{activeId:r}=this.state;if(!a||!r||!this.isSameSortable(t.target))return;const o=this.isRtl,n=e.filter(b=>!this.isItemDisabled(b)),l=f.findIndex(n,b=>this.idComparer(b[i],r)),g=n.length-1;let u=l;switch(t.keyCode===h.Keys.left&&(o?t.keyCode=h.Keys.down:t.keyCode=h.Keys.up),t.keyCode===h.Keys.right&&(o?t.keyCode=h.Keys.up:t.keyCode=h.Keys.down),t.keyCode){case h.Keys.up:l>0&&(u=l-1);break;case h.Keys.down:l<g&&(u=l+1);break}if(u===l)return;t.stopPropagation(),t.preventDefault();const I=n[u],m=I?I[i]:"",D=n[l],T=D?D[i]:"";if(t.ctrlKey){if(s){const b=this.findIndex(T),C=this.findIndex(m),O=new B.SortableOnNavigateEvent(this,b,C,this.generateNewState(b,C));this.isKeyboardNavigated=!0,s.call(void 0,O)}}else this.focusActiveId=!0,this.setState({activeId:m+""})},this.resetState=t=>{this.isDragPrevented=!1,this.setState({clientX:0,clientY:0,isDragging:!1,dragCueWidth:0,dragCueHeight:0,activeId:t?"":this.state.activeId})},this.renderData=()=>{const{data:t,itemUI:e,idField:i,tabIndex:s}=this.props;return t.map(a=>{const o=h.getter(i)(a),n=this.isItemDisabled(a),l=this.idComparer(this.state.activeId,o);return p.createElement(e,{key:o,forwardRef:g=>this.refAssign(g,o),dataItem:a,isDisabled:n,isActive:l,isDragged:l&&this.state.isDragging,isDragCue:!1,attributes:{[S]:o,"aria-disabled":n,"aria-grabbed":l&&this.state.isDragging&&!this.isDragPrevented,"aria-dropeffect":n?"none":"move",tabIndex:h.getTabIndex(s,n),onFocus:this.onItemFocus,onBlur:this.onItemBlur},style:{cursor:n?"auto":"move",MozUserSelect:"none",msUserSelect:"none",WebkitUserSelect:"none",userSelect:"none"}})})},this.renderNoData=()=>{const{emptyItemUI:t}=this.props,i=x.provideLocalizationService(this).toLanguageString(R.noData,R.messages[R.noData]);if(t)return p.createElement(t,{message:i})},this.renderDragCue=()=>{const{itemUI:t}=this.props,{isDragging:e,activeId:i,clientX:s,clientY:a}=this.state,r=this.findItem(i);if(!(!e||!r))return p.createElement(t,{dataItem:r,isDisabled:!1,isActive:!0,isDragged:!0,isDragCue:!0,style:{position:"fixed",top:a+10,left:s+10,width:this.state.dragCueWidth,height:this.state.dragCueHeight},attributes:{}})},this.refAssign=(t,e)=>{t?this.itemRefsMap[e]=t:delete this.itemRefsMap[e]},this.draggableRefAssign=t=>{this.draggableRef=t},h.validatePackage(F.packageMetadata)}get container(){return this.draggableRef&&this.draggableRef.element}getSnapshotBeforeUpdate(){const{idField:c,animation:t}=this.props;return this.oldSizesMap={},t&&this.props.data.forEach(e=>{const i=e[c],s=this.itemRefsMap[i];s&&(this.oldSizesMap[i]=s.getBoundingClientRect())}),null}componentDidUpdate(c){const{idField:t,animation:e}=this.props;this.focusActiveId&&(this.focusActiveId=!1,this.itemRefsMap[this.state.activeId].focus()),!(!e||!this.state.isDragging&&!this.isKeyboardNavigated)&&(this.isKeyboardNavigated=!1,c.data.forEach(i=>{const s=i[t],a=this.itemRefsMap[s];if(!a)return;const r=a.getBoundingClientRect(),o=this.oldSizesMap[s],n=o.left-r.left,l=o.top-r.top;n===0&&l===0||requestAnimationFrame(()=>{this.animatingItemMap[s]=!0,a.style.transform=`translate(${n}px, ${l}px)`,a.style.transition="transform 0s",requestAnimationFrame(()=>{a.style.transform="",a.style.transition=`transform ${w}ms cubic-bezier(0.2, 0, 0, 1) 0s`,window.setTimeout(()=>this.animatingItemMap[s]=!1,w)})})}))}componentDidMount(){this.isRtl=this.container&&getComputedStyle(this.container).direction==="rtl"||!1}componentWillUnmount(){this.isUnmounted=!0}parentOffset(){const c=this.offsetParent;if(c&&c.ownerDocument&&c!==c.ownerDocument.body){const t=c.getBoundingClientRect();return{left:t.left-c.scrollLeft,top:t.top-c.scrollTop}}return{left:0,top:0}}render(){const{data:c,style:t,className:e,itemsWrapUI:i}=this.props,s=i||"div";return p.createElement(h.Draggable,{onDragStart:this.onDragStart,onDrag:this.onDragOver,onDragEnd:this.onDragEnd,ref:this.draggableRefAssign},p.createElement(s,{...q,className:e,style:{touchAction:"none",...t},onKeyDown:this.onKeyDown},c&&c.length?this.renderData():this.renderNoData(),this.renderDragCue()))}};y.defaultProps={navigation:!0,animation:!0,emptyItemUI:c=>p.createElement("div",null,c.message)},y.propTypes={idField:d.string.isRequired,disabledField:d.string,data:d.array.isRequired,tabIndex:d.number,navigation:d.bool,animation:d.bool,itemsWrapUI:d.any,itemUI:d.func.isRequired,emptyItemUI:d.func,style:d.object,className:d.string,onDragStart:d.func,onDragOver:d.func,onDragEnd:d.func,onNavigate:d.func};let E=y;x.registerForLocalization(E);exports.Sortable=E;
|
package/Sortable.mjs
CHANGED
|
@@ -7,18 +7,17 @@
|
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
9
|
import * as u from "react";
|
|
10
|
-
import * as N from "react-dom";
|
|
11
10
|
import d from "prop-types";
|
|
12
|
-
import { getter as R, getActiveElement as
|
|
11
|
+
import { getter as R, getActiveElement as N, Keys as f, getTabIndex as M, validatePackage as U, Draggable as P } from "@progress/kendo-react-common";
|
|
13
12
|
import { SortableOnDragStartEvent as B } from "./events/SortableOnDragStartEvent.mjs";
|
|
14
13
|
import { SortableOnDragOverEvent as F } from "./events/SortableOnDragOverEvent.mjs";
|
|
15
|
-
import { SortableOnDragEndEvent as
|
|
16
|
-
import { SortableOnNavigateEvent as
|
|
17
|
-
import { provideLocalizationService as
|
|
18
|
-
import { noData as C, messages as
|
|
19
|
-
import { find as
|
|
20
|
-
import { packageMetadata as
|
|
21
|
-
const w = 200, b = "data-sortable-id", x = "data-sortable-component",
|
|
14
|
+
import { SortableOnDragEndEvent as O } from "./events/SortableOnDragEndEvent.mjs";
|
|
15
|
+
import { SortableOnNavigateEvent as k } from "./events/SortableOnNavigateEvent.mjs";
|
|
16
|
+
import { provideLocalizationService as X, registerForLocalization as Y } from "@progress/kendo-react-intl";
|
|
17
|
+
import { noData as C, messages as z } from "./messages/index.mjs";
|
|
18
|
+
import { find as W, findIndex as y, closest as K, isFocusable as L, relativeContextElement as H, hasClasses as q } from "./utils/utils.mjs";
|
|
19
|
+
import { packageMetadata as _ } from "./package-metadata.mjs";
|
|
20
|
+
const w = 200, b = "data-sortable-id", x = "data-sortable-component", G = { [x]: !0 }, D = class D extends u.Component {
|
|
22
21
|
constructor(c) {
|
|
23
22
|
super(c), this.state = {
|
|
24
23
|
clientX: 0,
|
|
@@ -71,30 +70,30 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", $ = { [x]:
|
|
|
71
70
|
if (!(t + ""))
|
|
72
71
|
return;
|
|
73
72
|
const s = R(i);
|
|
74
|
-
return
|
|
73
|
+
return W(e, (a) => this.idComparer(s(a), t));
|
|
75
74
|
}, this.findIndex = (t) => {
|
|
76
75
|
const { data: e, idField: i } = this.props;
|
|
77
76
|
return t + "" ? y(e, (s) => this.idComparer(s[i], t)) : -1;
|
|
78
77
|
}, this.isItemDisabled = (t) => t && t[this.props.disabledField || ""] === !0, this.shouldResetActive = () => {
|
|
79
|
-
const t =
|
|
78
|
+
const t = N(document);
|
|
80
79
|
return t instanceof HTMLElement ? !this.closestSortableItem(t).element : !1;
|
|
81
80
|
}, this.widgetTarget = (t) => {
|
|
82
|
-
const e =
|
|
81
|
+
const e = K(t, (i) => q(i, "k-widget") || this.isSortable(i));
|
|
83
82
|
return e && !this.isSortable(e);
|
|
84
|
-
}, this.allowDrag = (t) => t.hasAttribute(b) || !(
|
|
85
|
-
const { event: e } = t, { onDragStart: i } = this.props, s = document.elementFromPoint(e.clientX, e.clientY), { id:
|
|
86
|
-
if (!
|
|
83
|
+
}, this.allowDrag = (t) => t.hasAttribute(b) || !(L(t) || this.widgetTarget(t)), this.onDragStart = (t) => {
|
|
84
|
+
const { event: e } = t, { onDragStart: i } = this.props, s = document.elementFromPoint(e.clientX, e.clientY), { id: a, element: r } = this.closestSortableItem(s), o = this.findItem(a);
|
|
85
|
+
if (!a || o && this.isItemDisabled(o) || !this.allowDrag(s) || !this.isSameSortable(s)) {
|
|
87
86
|
this.isDragPrevented = !0;
|
|
88
87
|
return;
|
|
89
88
|
}
|
|
90
89
|
e.isTouch && e.originalEvent.preventDefault();
|
|
91
|
-
const
|
|
90
|
+
const n = new B(
|
|
92
91
|
this,
|
|
93
|
-
this.findIndex(
|
|
92
|
+
this.findIndex(a),
|
|
94
93
|
s
|
|
95
94
|
);
|
|
96
|
-
i && i.call(void 0,
|
|
97
|
-
activeId:
|
|
95
|
+
i && i.call(void 0, n), this.isDragPrevented = n.isDefaultPrevented(), this.isDragPrevented ? e.originalEvent.preventDefault() : (this.offsetParent = H(this.container), this.setState({
|
|
96
|
+
activeId: a,
|
|
98
97
|
dragCueWidth: r && r.clientWidth || 0,
|
|
99
98
|
dragCueHeight: r && r.clientHeight || 0
|
|
100
99
|
}));
|
|
@@ -103,18 +102,18 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", $ = { [x]:
|
|
|
103
102
|
if (this.isDragPrevented)
|
|
104
103
|
return;
|
|
105
104
|
e.originalEvent.preventDefault();
|
|
106
|
-
const
|
|
107
|
-
if (
|
|
105
|
+
const a = this.findIndex(this.state.activeId);
|
|
106
|
+
if (a === -1) {
|
|
108
107
|
this.resetState();
|
|
109
108
|
return;
|
|
110
109
|
}
|
|
111
|
-
const r = document.elementFromPoint(e.clientX, e.clientY), o = this.closestSortableItem(r),
|
|
112
|
-
if (i &&
|
|
110
|
+
const r = document.elementFromPoint(e.clientX, e.clientY), o = this.closestSortableItem(r), n = this.findIndex(o.id), l = s[n];
|
|
111
|
+
if (i && n > -1 && a !== n && !this.isItemDisabled(l) && !this.animatingItemMap[o.id] && this.shouldReorder(o.element, e.clientX, e.clientY)) {
|
|
113
112
|
const m = new F(
|
|
114
113
|
this,
|
|
115
|
-
n,
|
|
116
114
|
a,
|
|
117
|
-
|
|
115
|
+
n,
|
|
116
|
+
this.generateNewState(a, n)
|
|
118
117
|
);
|
|
119
118
|
i.call(void 0, m);
|
|
120
119
|
}
|
|
@@ -128,22 +127,22 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", $ = { [x]:
|
|
|
128
127
|
const { event: e } = t, i = this.shouldResetActive();
|
|
129
128
|
if (this.isDragPrevented)
|
|
130
129
|
return;
|
|
131
|
-
const { onDragEnd: s, data:
|
|
132
|
-
let
|
|
133
|
-
const h = this.isItemDisabled(n
|
|
134
|
-
if ((
|
|
135
|
-
let m = this.generateNewState(l,
|
|
130
|
+
const { onDragEnd: s, data: a } = this.props, r = document.elementFromPoint(e.clientX, e.clientY), o = this.closestSortableItem(r);
|
|
131
|
+
let n = this.findIndex(o.id), l = this.findIndex(this.state.activeId);
|
|
132
|
+
const h = this.isItemDisabled(a[n]);
|
|
133
|
+
if ((n === -1 || h) && (n = l), s) {
|
|
134
|
+
let m = this.generateNewState(l, n);
|
|
136
135
|
if (!h) {
|
|
137
136
|
const g = this.thresholdRect(o.element);
|
|
138
137
|
if (g && (e.clientX < g.left || e.clientX > g.right || e.clientY < g.top || e.clientY > g.bottom)) {
|
|
139
138
|
const v = l;
|
|
140
|
-
l =
|
|
139
|
+
l = n, n = v, m = this.props.data.slice();
|
|
141
140
|
}
|
|
142
141
|
}
|
|
143
|
-
const p = new
|
|
142
|
+
const p = new O(
|
|
144
143
|
this,
|
|
145
144
|
l,
|
|
146
|
-
|
|
145
|
+
n,
|
|
147
146
|
m
|
|
148
147
|
);
|
|
149
148
|
s.call(void 0, p);
|
|
@@ -153,12 +152,12 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", $ = { [x]:
|
|
|
153
152
|
const s = this.thresholdRect(t);
|
|
154
153
|
return s && e > s.left && e < s.right && i > s.top && i < s.bottom;
|
|
155
154
|
}, this.thresholdRect = (t) => {
|
|
156
|
-
const e = this.state.activeId, i = this.container,
|
|
155
|
+
const e = this.state.activeId, i = this.container, a = (i ? Array.from(i.childNodes) : []).find(
|
|
157
156
|
(g) => g instanceof HTMLElement && g.getAttribute(b) === e
|
|
158
157
|
);
|
|
159
|
-
if (!t || !
|
|
158
|
+
if (!t || !a)
|
|
160
159
|
return null;
|
|
161
|
-
const { width: r, height: o } =
|
|
160
|
+
const { width: r, height: o } = a.getBoundingClientRect(), n = t.getBoundingClientRect(), l = n.top + n.height / 2 - o / 2, h = n.left + n.width / 2 - r / 2, m = l + o, p = h + r;
|
|
162
161
|
return { top: l, left: h, bottom: m, right: p };
|
|
163
162
|
}, this.onItemBlur = () => {
|
|
164
163
|
window.setTimeout(() => {
|
|
@@ -173,10 +172,10 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", $ = { [x]:
|
|
|
173
172
|
activeId: e
|
|
174
173
|
});
|
|
175
174
|
}, this.onKeyDown = (t) => {
|
|
176
|
-
const { data: e, idField: i, onNavigate: s, navigation:
|
|
177
|
-
if (!
|
|
175
|
+
const { data: e, idField: i, onNavigate: s, navigation: a } = this.props, { activeId: r } = this.state;
|
|
176
|
+
if (!a || !r || !this.isSameSortable(t.target))
|
|
178
177
|
return;
|
|
179
|
-
const o = this.isRtl,
|
|
178
|
+
const o = this.isRtl, n = e.filter((I) => !this.isItemDisabled(I)), l = y(n, (I) => this.idComparer(I[i], r)), h = n.length - 1;
|
|
180
179
|
let m = l;
|
|
181
180
|
switch (t.keyCode === f.left && (o ? t.keyCode = f.down : t.keyCode = f.up), t.keyCode === f.right && (o ? t.keyCode = f.up : t.keyCode = f.down), t.keyCode) {
|
|
182
181
|
case f.up:
|
|
@@ -189,10 +188,10 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", $ = { [x]:
|
|
|
189
188
|
if (m === l)
|
|
190
189
|
return;
|
|
191
190
|
t.stopPropagation(), t.preventDefault();
|
|
192
|
-
const p =
|
|
191
|
+
const p = n[m], g = p ? p[i] : "", v = n[l], A = v ? v[i] : "";
|
|
193
192
|
if (t.ctrlKey) {
|
|
194
193
|
if (s) {
|
|
195
|
-
const I = this.findIndex(A), E = this.findIndex(g), T = new
|
|
194
|
+
const I = this.findIndex(A), E = this.findIndex(g), T = new k(
|
|
196
195
|
this,
|
|
197
196
|
I,
|
|
198
197
|
E,
|
|
@@ -220,29 +219,29 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", $ = { [x]:
|
|
|
220
219
|
idField: i,
|
|
221
220
|
tabIndex: s
|
|
222
221
|
} = this.props;
|
|
223
|
-
return t.map((
|
|
224
|
-
const o = R(i)(
|
|
222
|
+
return t.map((a) => {
|
|
223
|
+
const o = R(i)(a), n = this.isItemDisabled(a), l = this.idComparer(this.state.activeId, o);
|
|
225
224
|
return /* @__PURE__ */ u.createElement(
|
|
226
225
|
e,
|
|
227
226
|
{
|
|
228
227
|
key: o,
|
|
229
228
|
forwardRef: (h) => this.refAssign(h, o),
|
|
230
|
-
dataItem:
|
|
231
|
-
isDisabled:
|
|
229
|
+
dataItem: a,
|
|
230
|
+
isDisabled: n,
|
|
232
231
|
isActive: l,
|
|
233
232
|
isDragged: l && this.state.isDragging,
|
|
234
233
|
isDragCue: !1,
|
|
235
234
|
attributes: {
|
|
236
235
|
[b]: o,
|
|
237
|
-
"aria-disabled":
|
|
236
|
+
"aria-disabled": n,
|
|
238
237
|
"aria-grabbed": l && this.state.isDragging && !this.isDragPrevented,
|
|
239
|
-
"aria-dropeffect":
|
|
240
|
-
tabIndex:
|
|
238
|
+
"aria-dropeffect": n ? "none" : "move",
|
|
239
|
+
tabIndex: M(s, n),
|
|
241
240
|
onFocus: this.onItemFocus,
|
|
242
241
|
onBlur: this.onItemBlur
|
|
243
242
|
},
|
|
244
243
|
style: {
|
|
245
|
-
cursor:
|
|
244
|
+
cursor: n ? "auto" : "move",
|
|
246
245
|
MozUserSelect: "none",
|
|
247
246
|
msUserSelect: "none",
|
|
248
247
|
WebkitUserSelect: "none",
|
|
@@ -252,11 +251,11 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", $ = { [x]:
|
|
|
252
251
|
);
|
|
253
252
|
});
|
|
254
253
|
}, this.renderNoData = () => {
|
|
255
|
-
const { emptyItemUI: t } = this.props, i =
|
|
254
|
+
const { emptyItemUI: t } = this.props, i = X(this).toLanguageString(C, z[C]);
|
|
256
255
|
if (t)
|
|
257
256
|
return /* @__PURE__ */ u.createElement(t, { message: i });
|
|
258
257
|
}, this.renderDragCue = () => {
|
|
259
|
-
const { itemUI: t } = this.props, { isDragging: e, activeId: i, clientX: s, clientY:
|
|
258
|
+
const { itemUI: t } = this.props, { isDragging: e, activeId: i, clientX: s, clientY: a } = this.state, r = this.findItem(i);
|
|
260
259
|
if (!(!e || !r))
|
|
261
260
|
return /* @__PURE__ */ u.createElement(
|
|
262
261
|
t,
|
|
@@ -268,7 +267,7 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", $ = { [x]:
|
|
|
268
267
|
isDragCue: !0,
|
|
269
268
|
style: {
|
|
270
269
|
position: "fixed",
|
|
271
|
-
top:
|
|
270
|
+
top: a + 10,
|
|
272
271
|
left: s + 10,
|
|
273
272
|
width: this.state.dragCueWidth,
|
|
274
273
|
height: this.state.dragCueHeight
|
|
@@ -280,7 +279,7 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", $ = { [x]:
|
|
|
280
279
|
t ? this.itemRefsMap[e] = t : delete this.itemRefsMap[e];
|
|
281
280
|
}, this.draggableRefAssign = (t) => {
|
|
282
281
|
this.draggableRef = t;
|
|
283
|
-
},
|
|
282
|
+
}, U(_);
|
|
284
283
|
}
|
|
285
284
|
get container() {
|
|
286
285
|
return this.draggableRef && this.draggableRef.element;
|
|
@@ -291,8 +290,8 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", $ = { [x]:
|
|
|
291
290
|
getSnapshotBeforeUpdate() {
|
|
292
291
|
const { idField: c, animation: t } = this.props;
|
|
293
292
|
return this.oldSizesMap = {}, t && this.props.data.forEach((e) => {
|
|
294
|
-
const i = e[c], s = this.itemRefsMap[i]
|
|
295
|
-
|
|
293
|
+
const i = e[c], s = this.itemRefsMap[i];
|
|
294
|
+
s && (this.oldSizesMap[i] = s.getBoundingClientRect());
|
|
296
295
|
}), null;
|
|
297
296
|
}
|
|
298
297
|
/**
|
|
@@ -301,13 +300,13 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", $ = { [x]:
|
|
|
301
300
|
componentDidUpdate(c) {
|
|
302
301
|
const { idField: t, animation: e } = this.props;
|
|
303
302
|
this.focusActiveId && (this.focusActiveId = !1, this.itemRefsMap[this.state.activeId].focus()), !(!e || !this.state.isDragging && !this.isKeyboardNavigated) && (this.isKeyboardNavigated = !1, c.data.forEach((i) => {
|
|
304
|
-
const s = i[t],
|
|
305
|
-
if (!
|
|
303
|
+
const s = i[t], a = this.itemRefsMap[s];
|
|
304
|
+
if (!a)
|
|
306
305
|
return;
|
|
307
|
-
const r =
|
|
308
|
-
|
|
309
|
-
this.animatingItemMap[s] = !0,
|
|
310
|
-
|
|
306
|
+
const r = a.getBoundingClientRect(), o = this.oldSizesMap[s], n = o.left - r.left, l = o.top - r.top;
|
|
307
|
+
n === 0 && l === 0 || requestAnimationFrame(() => {
|
|
308
|
+
this.animatingItemMap[s] = !0, a.style.transform = `translate(${n}px, ${l}px)`, a.style.transition = "transform 0s", requestAnimationFrame(() => {
|
|
309
|
+
a.style.transform = "", a.style.transition = `transform ${w}ms cubic-bezier(0.2, 0, 0, 1) 0s`, window.setTimeout(() => this.animatingItemMap[s] = !1, w);
|
|
311
310
|
});
|
|
312
311
|
});
|
|
313
312
|
}));
|
|
@@ -344,7 +343,7 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", $ = { [x]:
|
|
|
344
343
|
render() {
|
|
345
344
|
const { data: c, style: t, className: e, itemsWrapUI: i } = this.props, s = i || "div";
|
|
346
345
|
return /* @__PURE__ */ u.createElement(
|
|
347
|
-
|
|
346
|
+
P,
|
|
348
347
|
{
|
|
349
348
|
onDragStart: this.onDragStart,
|
|
350
349
|
onDrag: this.onDragOver,
|
|
@@ -354,7 +353,7 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", $ = { [x]:
|
|
|
354
353
|
/* @__PURE__ */ u.createElement(
|
|
355
354
|
s,
|
|
356
355
|
{
|
|
357
|
-
|
|
356
|
+
...G,
|
|
358
357
|
className: e,
|
|
359
358
|
style: {
|
|
360
359
|
touchAction: "none",
|
|
@@ -390,7 +389,7 @@ D.defaultProps = {
|
|
|
390
389
|
onNavigate: d.func
|
|
391
390
|
};
|
|
392
391
|
let S = D;
|
|
393
|
-
|
|
392
|
+
Y(S);
|
|
394
393
|
export {
|
|
395
394
|
S as Sortable
|
|
396
395
|
};
|
|
@@ -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
|
-
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("react-dom"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","prop-types","@progress/kendo-react-common","@progress/kendo-react-intl"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactSortable={},t.React,t.ReactDOM,t.PropTypes,t.KendoReactCommon,t.KendoReactIntl)}(this,(function(t,e,i,s,n,r){"use strict";function a(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(i){if("default"!==i){var s=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,s.get?s:{enumerable:!0,get:function(){return t[i]}})}})),e.default=t,Object.freeze(e)}var o=a(e),d=a(i);let l=class{constructor(){this.prevented=!1}preventDefault(){this.prevented=!0}isDefaultPrevented(){return this.prevented}};class h extends l{constructor(t,e,i){super(),this.target=t,this.prevIndex=e,this.element=i}}let c=class{constructor(t,e,i,s){this.target=t,this.prevIndex=e,this.nextIndex=i,this.newState=s}},g=class{constructor(t,e,i,s){this.target=t,this.prevIndex=e,this.nextIndex=i,this.newState=s}};class u{constructor(t,e,i,s){this.target=t,this.prevIndex=e,this.nextIndex=i,this.newState=s}}const m="sortable.noData",p={[m]:"No Data"},f=(t,e)=>{for(let i=0;i<t.length;i++)if(e(t[i]))return i;return-1},v=t=>String(t).trim().split(" "),b=/^(?:a|input|select|option|textarea|button|object)$/i,I=n.hasRelativeStackingContext(),D={name:"@progress/kendo-react-sortable",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},S="data-sortable-id",y="data-sortable-component",w={[y]:!0},R=class extends o.Component{constructor(t){super(t),this.state={clientX:0,clientY:0,isDragging:!1,activeId:"",dragCueWidth:0,dragCueHeight:0},this.isRtl=!1,this.itemRefsMap={},this.oldSizesMap={},this.animatingItemMap={},this.draggableRef=null,this.isUnmounted=!1,this.focusActiveId=!1,this.isKeyboardNavigated=!1,this.isDragPrevented=!1,this.swapItems=(t,e,i)=>{let s=t[e];return t[e]=t[i],t[i]=s,e=i},this.generateNewState=(t,e)=>{const{data:i}=this.props,s=[...i];if(t>e)for(let n=t-1;n>=e;n--){const e=i[n];this.isItemDisabled(e)||(t=this.swapItems(s,t,n))}else for(let n=t+1;n<=e;n++){const e=i[n];this.isItemDisabled(e)||(t=this.swapItems(s,t,n))}return s},this.closestSortableItem=t=>{let e=t;for(;e;){const t=e.getAttribute(S);if(t&&this.itemRefsMap[t]===e)return{id:t,element:e};e=e.parentElement}return{id:"",element:null}},this.isSortable=t=>!!t.hasAttribute(y),this.closestSortable=t=>{let e=t;for(;e;){if(this.isSortable(e))return e;e=e.parentElement}return null},this.isSameSortable=t=>this.closestSortable(t)===this.container,this.idComparer=(t,e)=>t+""==e+"",this.findItem=t=>{const{data:e,idField:i}=this.props;if(!(t+""))return;const s=n.getter(i);return((t,e)=>{for(let i=0;i<t.length;i++)if(e(t[i]))return t[i]})(e,(e=>this.idComparer(s(e),t)))},this.findIndex=t=>{const{data:e,idField:i}=this.props;return t+""?f(e,(e=>this.idComparer(e[i],t))):-1},this.isItemDisabled=t=>t&&!0===t[this.props.disabledField||""],this.shouldResetActive=()=>{const t=n.getActiveElement(document);return t instanceof HTMLElement&&!this.closestSortableItem(t).element},this.widgetTarget=t=>{const e=((t,e)=>{for(;t&&!e(t);)t=t.parentNode;return t})(t,(t=>((t,e)=>{const i=v(e);return!!v(t.className).find((t=>i.indexOf(t)>=0))})(t,"k-widget")||this.isSortable(t)));return e&&!this.isSortable(e)},this.allowDrag=t=>t.hasAttribute(S)||!((t=>{if(t.tagName){const e=t.tagName.toLowerCase(),i=t.getAttribute("tabIndex"),s="-1"===i;let n=null!==i&&!s;return b.test(e)&&(n=!t.disabled&&!s),n}return!1})(t)||this.widgetTarget(t)),this.onDragStart=t=>{const{event:e}=t,{onDragStart:i}=this.props,s=document.elementFromPoint(e.clientX,e.clientY),{id:n,element:r}=this.closestSortableItem(s),a=this.findItem(n);if(!n||a&&this.isItemDisabled(a)||!this.allowDrag(s)||!this.isSameSortable(s))return void(this.isDragPrevented=!0);e.isTouch&&e.originalEvent.preventDefault();const o=new h(this,this.findIndex(n),s);i&&i.call(void 0,o),this.isDragPrevented=o.isDefaultPrevented(),this.isDragPrevented?e.originalEvent.preventDefault():(this.offsetParent=(t=>{if(!t||!I)return null;let e=t.parentElement;for(;e;){if("none"!==window.getComputedStyle(e).transform)return e;e=e.parentElement}})(this.container),this.setState({activeId:n,dragCueWidth:r&&r.clientWidth||0,dragCueHeight:r&&r.clientHeight||0}))},this.onDragOver=t=>{const{event:e}=t,{onDragOver:i,data:s}=this.props;if(this.isDragPrevented)return;e.originalEvent.preventDefault();const n=this.findIndex(this.state.activeId);if(-1===n)return void this.resetState();const r=document.elementFromPoint(e.clientX,e.clientY),a=this.closestSortableItem(r),o=this.findIndex(a.id),d=s[o];if(i&&o>-1&&n!==o&&!this.isItemDisabled(d)&&!this.animatingItemMap[a.id]&&this.shouldReorder(a.element,e.clientX,e.clientY)){const t=new c(this,n,o,this.generateNewState(n,o));i.call(void 0,t)}const l=this.parentOffset();this.setState({clientX:e.clientX-l.left,clientY:e.clientY-l.top,isDragging:!0})},this.onDragEnd=t=>{const{event:e}=t,i=this.shouldResetActive();if(this.isDragPrevented)return;const{onDragEnd:s,data:n}=this.props,r=document.elementFromPoint(e.clientX,e.clientY),a=this.closestSortableItem(r);let o=this.findIndex(a.id),d=this.findIndex(this.state.activeId);const l=this.isItemDisabled(n[o]);if((-1===o||l)&&(o=d),s){let t=this.generateNewState(d,o);if(!l){const i=this.thresholdRect(a.element);if(i&&(e.clientX<i.left||e.clientX>i.right||e.clientY<i.top||e.clientY>i.bottom)){const e=d;d=o,o=e,t=this.props.data.slice()}}const i=new g(this,d,o,t);s.call(void 0,i)}this.resetState(i)},this.shouldReorder=(t,e,i)=>{const s=this.thresholdRect(t);return s&&e>s.left&&e<s.right&&i>s.top&&i<s.bottom},this.thresholdRect=t=>{const e=this.state.activeId,i=this.container,s=(i?Array.from(i.childNodes):[]).find((t=>t instanceof HTMLElement&&t.getAttribute(S)===e));if(!t||!s)return null;const{width:n,height:r}=s.getBoundingClientRect(),a=t.getBoundingClientRect(),o=a.top+a.height/2-r/2,d=a.left+a.width/2-n/2;return{top:o,left:d,bottom:o+r,right:d+n}},this.onItemBlur=()=>{window.setTimeout((()=>{this.isUnmounted||this.shouldResetActive()&&!this.state.isDragging&&this.setState({activeId:""})}))},this.onItemFocus=t=>{const{id:e,element:i}=this.closestSortableItem(t.currentTarget);!this.idComparer(e,this.state.activeId)&&this.isSameSortable(t.target)&&i===t.target&&this.setState({activeId:e})},this.onKeyDown=t=>{const{data:e,idField:i,onNavigate:s,navigation:r}=this.props,{activeId:a}=this.state;if(!r||!a||!this.isSameSortable(t.target))return;const o=this.isRtl,d=e.filter((t=>!this.isItemDisabled(t))),l=f(d,(t=>this.idComparer(t[i],a))),h=d.length-1;let c=l;switch(t.keyCode===n.Keys.left&&(t.keyCode=o?n.Keys.down:n.Keys.up),t.keyCode===n.Keys.right&&(t.keyCode=o?n.Keys.up:n.Keys.down),t.keyCode){case n.Keys.up:l>0&&(c=l-1);break;case n.Keys.down:l<h&&(c=l+1)}if(c===l)return;t.stopPropagation(),t.preventDefault();const g=d[c],m=g?g[i]:"",p=d[l],v=p?p[i]:"";if(t.ctrlKey){if(s){const t=this.findIndex(v),e=this.findIndex(m),i=new u(this,t,e,this.generateNewState(t,e));this.isKeyboardNavigated=!0,s.call(void 0,i)}}else this.focusActiveId=!0,this.setState({activeId:m+""})},this.resetState=t=>{this.isDragPrevented=!1,this.setState({clientX:0,clientY:0,isDragging:!1,dragCueWidth:0,dragCueHeight:0,activeId:t?"":this.state.activeId})},this.renderData=()=>{const{data:t,itemUI:e,idField:i,tabIndex:s}=this.props;return t.map((t=>{const r=n.getter(i)(t),a=this.isItemDisabled(t),d=this.idComparer(this.state.activeId,r);return o.createElement(e,{key:r,forwardRef:t=>this.refAssign(t,r),dataItem:t,isDisabled:a,isActive:d,isDragged:d&&this.state.isDragging,isDragCue:!1,attributes:{[S]:r,"aria-disabled":a,"aria-grabbed":d&&this.state.isDragging&&!this.isDragPrevented,"aria-dropeffect":a?"none":"move",tabIndex:n.getTabIndex(s,a),onFocus:this.onItemFocus,onBlur:this.onItemBlur},style:{cursor:a?"auto":"move",MozUserSelect:"none",msUserSelect:"none",WebkitUserSelect:"none",userSelect:"none"}})}))},this.renderNoData=()=>{const{emptyItemUI:t}=this.props,e=r.provideLocalizationService(this).toLanguageString(m,p[m]);if(t)return o.createElement(t,{message:e})},this.renderDragCue=()=>{const{itemUI:t}=this.props,{isDragging:e,activeId:i,clientX:s,clientY:n}=this.state,r=this.findItem(i);if(e&&r)return o.createElement(t,{dataItem:r,isDisabled:!1,isActive:!0,isDragged:!0,isDragCue:!0,style:{position:"fixed",top:n+10,left:s+10,width:this.state.dragCueWidth,height:this.state.dragCueHeight},attributes:{}})},this.refAssign=(t,e)=>{t?this.itemRefsMap[e]=t:delete this.itemRefsMap[e]},this.draggableRefAssign=t=>{this.draggableRef=t},n.validatePackage(D)}get container(){return this.draggableRef&&this.draggableRef.element}getSnapshotBeforeUpdate(){const{idField:t,animation:e}=this.props;return this.oldSizesMap={},e&&this.props.data.forEach((e=>{const i=e[t],s=this.itemRefsMap[i],n=d.findDOMNode(s);n&&(this.oldSizesMap[i]=n.getBoundingClientRect())})),null}componentDidUpdate(t){const{idField:e,animation:i}=this.props;this.focusActiveId&&(this.focusActiveId=!1,this.itemRefsMap[this.state.activeId].focus()),i&&(this.state.isDragging||this.isKeyboardNavigated)&&(this.isKeyboardNavigated=!1,t.data.forEach((t=>{const i=t[e],s=this.itemRefsMap[i];if(!s)return;const n=s.getBoundingClientRect(),r=this.oldSizesMap[i],a=r.left-n.left,o=r.top-n.top;0===a&&0===o||requestAnimationFrame((()=>{this.animatingItemMap[i]=!0,s.style.transform=`translate(${a}px, ${o}px)`,s.style.transition="transform 0s",requestAnimationFrame((()=>{s.style.transform="",s.style.transition="transform 200ms cubic-bezier(0.2, 0, 0, 1) 0s",window.setTimeout((()=>this.animatingItemMap[i]=!1),200)}))}))})))}componentDidMount(){this.isRtl=this.container&&"rtl"===getComputedStyle(this.container).direction||!1}componentWillUnmount(){this.isUnmounted=!0}parentOffset(){const t=this.offsetParent;if(t&&t.ownerDocument&&t!==t.ownerDocument.body){const e=t.getBoundingClientRect();return{left:e.left-t.scrollLeft,top:e.top-t.scrollTop}}return{left:0,top:0}}render(){const{data:t,style:e,className:i,itemsWrapUI:s}=this.props,r=s||"div";return o.createElement(n.Draggable,{onDragStart:this.onDragStart,onDrag:this.onDragOver,onDragEnd:this.onDragEnd,ref:this.draggableRefAssign},o.createElement(r,{...w,className:i,style:{touchAction:"none",...e},onKeyDown:this.onKeyDown},t&&t.length?this.renderData():this.renderNoData(),this.renderDragCue()))}};R.defaultProps={navigation:!0,animation:!0,emptyItemUI:t=>o.createElement("div",null,t.message)},R.propTypes={idField:s.string.isRequired,disabledField:s.string,data:s.array.isRequired,tabIndex:s.number,navigation:s.bool,animation:s.bool,itemsWrapUI:s.any,itemUI:s.func.isRequired,emptyItemUI:s.func,style:s.object,className:s.string,onDragStart:s.func,onDragOver:s.func,onDragEnd:s.func,onNavigate:s.func};let C=R;r.registerForLocalization(C),t.Sortable=C,t.SortableOnDragEndEvent=g,t.SortableOnDragOverEvent=c,t.SortableOnDragStartEvent=h,t.SortableOnNavigateEvent=u}));
|
|
8
|
+
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-intl"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactSortable={},t.React,t.PropTypes,t.KendoReactCommon,t.KendoReactIntl)}(this,(function(t,e,i,s,n){"use strict";function r(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(i){if("default"!==i){var s=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,s.get?s:{enumerable:!0,get:function(){return t[i]}})}})),e.default=t,Object.freeze(e)}var a=r(e);let o=class{constructor(){this.prevented=!1}preventDefault(){this.prevented=!0}isDefaultPrevented(){return this.prevented}};class l extends o{constructor(t,e,i){super(),this.target=t,this.prevIndex=e,this.element=i}}let d=class{constructor(t,e,i,s){this.target=t,this.prevIndex=e,this.nextIndex=i,this.newState=s}},h=class{constructor(t,e,i,s){this.target=t,this.prevIndex=e,this.nextIndex=i,this.newState=s}};class c{constructor(t,e,i,s){this.target=t,this.prevIndex=e,this.nextIndex=i,this.newState=s}}const g="sortable.noData",u={[g]:"No Data"},m=(t,e)=>{for(let i=0;i<t.length;i++)if(e(t[i]))return i;return-1},p=t=>String(t).trim().split(" "),f=/^(?:a|input|select|option|textarea|button|object)$/i,v=s.hasRelativeStackingContext(),b={name:"@progress/kendo-react-sortable",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},I="data-sortable-id",D="data-sortable-component",S={[D]:!0},y=class extends a.Component{constructor(t){super(t),this.state={clientX:0,clientY:0,isDragging:!1,activeId:"",dragCueWidth:0,dragCueHeight:0},this.isRtl=!1,this.itemRefsMap={},this.oldSizesMap={},this.animatingItemMap={},this.draggableRef=null,this.isUnmounted=!1,this.focusActiveId=!1,this.isKeyboardNavigated=!1,this.isDragPrevented=!1,this.swapItems=(t,e,i)=>{let s=t[e];return t[e]=t[i],t[i]=s,e=i},this.generateNewState=(t,e)=>{const{data:i}=this.props,s=[...i];if(t>e)for(let n=t-1;n>=e;n--){const e=i[n];this.isItemDisabled(e)||(t=this.swapItems(s,t,n))}else for(let n=t+1;n<=e;n++){const e=i[n];this.isItemDisabled(e)||(t=this.swapItems(s,t,n))}return s},this.closestSortableItem=t=>{let e=t;for(;e;){const t=e.getAttribute(I);if(t&&this.itemRefsMap[t]===e)return{id:t,element:e};e=e.parentElement}return{id:"",element:null}},this.isSortable=t=>!!t.hasAttribute(D),this.closestSortable=t=>{let e=t;for(;e;){if(this.isSortable(e))return e;e=e.parentElement}return null},this.isSameSortable=t=>this.closestSortable(t)===this.container,this.idComparer=(t,e)=>t+""==e+"",this.findItem=t=>{const{data:e,idField:i}=this.props;if(!(t+""))return;const n=s.getter(i);return((t,e)=>{for(let i=0;i<t.length;i++)if(e(t[i]))return t[i]})(e,(e=>this.idComparer(n(e),t)))},this.findIndex=t=>{const{data:e,idField:i}=this.props;return t+""?m(e,(e=>this.idComparer(e[i],t))):-1},this.isItemDisabled=t=>t&&!0===t[this.props.disabledField||""],this.shouldResetActive=()=>{const t=s.getActiveElement(document);return t instanceof HTMLElement&&!this.closestSortableItem(t).element},this.widgetTarget=t=>{const e=((t,e)=>{for(;t&&!e(t);)t=t.parentNode;return t})(t,(t=>((t,e)=>{const i=p(e);return!!p(t.className).find((t=>i.indexOf(t)>=0))})(t,"k-widget")||this.isSortable(t)));return e&&!this.isSortable(e)},this.allowDrag=t=>t.hasAttribute(I)||!((t=>{if(t.tagName){const e=t.tagName.toLowerCase(),i=t.getAttribute("tabIndex"),s="-1"===i;let n=null!==i&&!s;return f.test(e)&&(n=!t.disabled&&!s),n}return!1})(t)||this.widgetTarget(t)),this.onDragStart=t=>{const{event:e}=t,{onDragStart:i}=this.props,s=document.elementFromPoint(e.clientX,e.clientY),{id:n,element:r}=this.closestSortableItem(s),a=this.findItem(n);if(!n||a&&this.isItemDisabled(a)||!this.allowDrag(s)||!this.isSameSortable(s))return void(this.isDragPrevented=!0);e.isTouch&&e.originalEvent.preventDefault();const o=new l(this,this.findIndex(n),s);i&&i.call(void 0,o),this.isDragPrevented=o.isDefaultPrevented(),this.isDragPrevented?e.originalEvent.preventDefault():(this.offsetParent=(t=>{if(!t||!v)return null;let e=t.parentElement;for(;e;){if("none"!==window.getComputedStyle(e).transform)return e;e=e.parentElement}})(this.container),this.setState({activeId:n,dragCueWidth:r&&r.clientWidth||0,dragCueHeight:r&&r.clientHeight||0}))},this.onDragOver=t=>{const{event:e}=t,{onDragOver:i,data:s}=this.props;if(this.isDragPrevented)return;e.originalEvent.preventDefault();const n=this.findIndex(this.state.activeId);if(-1===n)return void this.resetState();const r=document.elementFromPoint(e.clientX,e.clientY),a=this.closestSortableItem(r),o=this.findIndex(a.id),l=s[o];if(i&&o>-1&&n!==o&&!this.isItemDisabled(l)&&!this.animatingItemMap[a.id]&&this.shouldReorder(a.element,e.clientX,e.clientY)){const t=new d(this,n,o,this.generateNewState(n,o));i.call(void 0,t)}const h=this.parentOffset();this.setState({clientX:e.clientX-h.left,clientY:e.clientY-h.top,isDragging:!0})},this.onDragEnd=t=>{const{event:e}=t,i=this.shouldResetActive();if(this.isDragPrevented)return;const{onDragEnd:s,data:n}=this.props,r=document.elementFromPoint(e.clientX,e.clientY),a=this.closestSortableItem(r);let o=this.findIndex(a.id),l=this.findIndex(this.state.activeId);const d=this.isItemDisabled(n[o]);if((-1===o||d)&&(o=l),s){let t=this.generateNewState(l,o);if(!d){const i=this.thresholdRect(a.element);if(i&&(e.clientX<i.left||e.clientX>i.right||e.clientY<i.top||e.clientY>i.bottom)){const e=l;l=o,o=e,t=this.props.data.slice()}}const i=new h(this,l,o,t);s.call(void 0,i)}this.resetState(i)},this.shouldReorder=(t,e,i)=>{const s=this.thresholdRect(t);return s&&e>s.left&&e<s.right&&i>s.top&&i<s.bottom},this.thresholdRect=t=>{const e=this.state.activeId,i=this.container,s=(i?Array.from(i.childNodes):[]).find((t=>t instanceof HTMLElement&&t.getAttribute(I)===e));if(!t||!s)return null;const{width:n,height:r}=s.getBoundingClientRect(),a=t.getBoundingClientRect(),o=a.top+a.height/2-r/2,l=a.left+a.width/2-n/2;return{top:o,left:l,bottom:o+r,right:l+n}},this.onItemBlur=()=>{window.setTimeout((()=>{this.isUnmounted||this.shouldResetActive()&&!this.state.isDragging&&this.setState({activeId:""})}))},this.onItemFocus=t=>{const{id:e,element:i}=this.closestSortableItem(t.currentTarget);!this.idComparer(e,this.state.activeId)&&this.isSameSortable(t.target)&&i===t.target&&this.setState({activeId:e})},this.onKeyDown=t=>{const{data:e,idField:i,onNavigate:n,navigation:r}=this.props,{activeId:a}=this.state;if(!r||!a||!this.isSameSortable(t.target))return;const o=this.isRtl,l=e.filter((t=>!this.isItemDisabled(t))),d=m(l,(t=>this.idComparer(t[i],a))),h=l.length-1;let g=d;switch(t.keyCode===s.Keys.left&&(t.keyCode=o?s.Keys.down:s.Keys.up),t.keyCode===s.Keys.right&&(t.keyCode=o?s.Keys.up:s.Keys.down),t.keyCode){case s.Keys.up:d>0&&(g=d-1);break;case s.Keys.down:d<h&&(g=d+1)}if(g===d)return;t.stopPropagation(),t.preventDefault();const u=l[g],p=u?u[i]:"",f=l[d],v=f?f[i]:"";if(t.ctrlKey){if(n){const t=this.findIndex(v),e=this.findIndex(p),i=new c(this,t,e,this.generateNewState(t,e));this.isKeyboardNavigated=!0,n.call(void 0,i)}}else this.focusActiveId=!0,this.setState({activeId:p+""})},this.resetState=t=>{this.isDragPrevented=!1,this.setState({clientX:0,clientY:0,isDragging:!1,dragCueWidth:0,dragCueHeight:0,activeId:t?"":this.state.activeId})},this.renderData=()=>{const{data:t,itemUI:e,idField:i,tabIndex:n}=this.props;return t.map((t=>{const r=s.getter(i)(t),o=this.isItemDisabled(t),l=this.idComparer(this.state.activeId,r);return a.createElement(e,{key:r,forwardRef:t=>this.refAssign(t,r),dataItem:t,isDisabled:o,isActive:l,isDragged:l&&this.state.isDragging,isDragCue:!1,attributes:{[I]:r,"aria-disabled":o,"aria-grabbed":l&&this.state.isDragging&&!this.isDragPrevented,"aria-dropeffect":o?"none":"move",tabIndex:s.getTabIndex(n,o),onFocus:this.onItemFocus,onBlur:this.onItemBlur},style:{cursor:o?"auto":"move",MozUserSelect:"none",msUserSelect:"none",WebkitUserSelect:"none",userSelect:"none"}})}))},this.renderNoData=()=>{const{emptyItemUI:t}=this.props,e=n.provideLocalizationService(this).toLanguageString(g,u[g]);if(t)return a.createElement(t,{message:e})},this.renderDragCue=()=>{const{itemUI:t}=this.props,{isDragging:e,activeId:i,clientX:s,clientY:n}=this.state,r=this.findItem(i);if(e&&r)return a.createElement(t,{dataItem:r,isDisabled:!1,isActive:!0,isDragged:!0,isDragCue:!0,style:{position:"fixed",top:n+10,left:s+10,width:this.state.dragCueWidth,height:this.state.dragCueHeight},attributes:{}})},this.refAssign=(t,e)=>{t?this.itemRefsMap[e]=t:delete this.itemRefsMap[e]},this.draggableRefAssign=t=>{this.draggableRef=t},s.validatePackage(b)}get container(){return this.draggableRef&&this.draggableRef.element}getSnapshotBeforeUpdate(){const{idField:t,animation:e}=this.props;return this.oldSizesMap={},e&&this.props.data.forEach((e=>{const i=e[t],s=this.itemRefsMap[i];s&&(this.oldSizesMap[i]=s.getBoundingClientRect())})),null}componentDidUpdate(t){const{idField:e,animation:i}=this.props;this.focusActiveId&&(this.focusActiveId=!1,this.itemRefsMap[this.state.activeId].focus()),i&&(this.state.isDragging||this.isKeyboardNavigated)&&(this.isKeyboardNavigated=!1,t.data.forEach((t=>{const i=t[e],s=this.itemRefsMap[i];if(!s)return;const n=s.getBoundingClientRect(),r=this.oldSizesMap[i],a=r.left-n.left,o=r.top-n.top;0===a&&0===o||requestAnimationFrame((()=>{this.animatingItemMap[i]=!0,s.style.transform=`translate(${a}px, ${o}px)`,s.style.transition="transform 0s",requestAnimationFrame((()=>{s.style.transform="",s.style.transition="transform 200ms cubic-bezier(0.2, 0, 0, 1) 0s",window.setTimeout((()=>this.animatingItemMap[i]=!1),200)}))}))})))}componentDidMount(){this.isRtl=this.container&&"rtl"===getComputedStyle(this.container).direction||!1}componentWillUnmount(){this.isUnmounted=!0}parentOffset(){const t=this.offsetParent;if(t&&t.ownerDocument&&t!==t.ownerDocument.body){const e=t.getBoundingClientRect();return{left:e.left-t.scrollLeft,top:e.top-t.scrollTop}}return{left:0,top:0}}render(){const{data:t,style:e,className:i,itemsWrapUI:n}=this.props,r=n||"div";return a.createElement(s.Draggable,{onDragStart:this.onDragStart,onDrag:this.onDragOver,onDragEnd:this.onDragEnd,ref:this.draggableRefAssign},a.createElement(r,{...S,className:i,style:{touchAction:"none",...e},onKeyDown:this.onKeyDown},t&&t.length?this.renderData():this.renderNoData(),this.renderDragCue()))}};y.defaultProps={navigation:!0,animation:!0,emptyItemUI:t=>a.createElement("div",null,t.message)},y.propTypes={idField:i.string.isRequired,disabledField:i.string,data:i.array.isRequired,tabIndex:i.number,navigation:i.bool,animation:i.bool,itemsWrapUI:i.any,itemUI:i.func.isRequired,emptyItemUI:i.func,style:i.object,className:i.string,onDragStart:i.func,onDragOver:i.func,onDragEnd:i.func,onNavigate:i.func};let w=y;n.registerForLocalization(w),t.Sortable=w,t.SortableOnDragEndEvent=h,t.SortableOnDragOverEvent=d,t.SortableOnDragStartEvent=l,t.SortableOnNavigateEvent=c}));
|
package/package-metadata.mjs
CHANGED
|
@@ -10,7 +10,7 @@ const e = {
|
|
|
10
10
|
name: "@progress/kendo-react-sortable",
|
|
11
11
|
productName: "KendoReact",
|
|
12
12
|
productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
|
|
13
|
-
publishDate:
|
|
13
|
+
publishDate: 1719494347,
|
|
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-sortable",
|
|
3
|
-
"version": "8.1.
|
|
3
|
+
"version": "8.1.1-develop.1",
|
|
4
4
|
"description": "React Sortable provides a sortable drag-and-drop functionality to elements within a list. KendoReact Sortable package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
"sideEffects": false,
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@progress/kendo-licensing": "^1.3.4",
|
|
26
|
-
"@progress/kendo-react-common": "8.1.
|
|
27
|
-
"@progress/kendo-react-intl": "8.1.
|
|
26
|
+
"@progress/kendo-react-common": "8.1.1-develop.1",
|
|
27
|
+
"@progress/kendo-react-intl": "8.1.1-develop.1",
|
|
28
28
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0",
|
|
29
29
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
|
|
30
30
|
},
|