@treelab/kanban - npm Package Compare versions

Comparing version 2.0.0-alpha.18 to 2.0.0-alpha.19

dist/index.d.ts

@@ -0,3 +1,5 @@
+/// <reference types="react" />
+import React from "react";
 import { ReactElement } from "react";
-import { DraggableStateSnapshot } from "react-beautiful-dnd";
+import { DraggableStateSnapshot } from "treelab-dnd";
 interface Row {
@@ -43,3 +45,3 @@ id: string;
     width?: number;
-    height?: number;
+    height: number;
     listWidth?: number;
@@ -49,4 +51,6 @@ enableReorderLanes?: boolean;
     appendMode?: boolean;
+    iframeWindow?: Window;
+    iframeDocument?: Document;
 }
-declare const Kanban: <R extends Row>({ lanes, width, height, listWidth, enableReorderCards, enableReorderLanes, appendMode, onDropCard, onDropLane, cardRenderer, laneHeaderRenderer, laneFooterRenderer, rowHeight, extraLaneRenderer }: IKanbanProps<R>) => ReactElement;
-export { Kanban as default };
+declare const KanbanContainer: React.FC<IKanbanProps>;
+export { KanbanContainer as default };

dist/index.js

@@ -1,4 +0,4 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("react-beautiful-dnd"),require("react-dom"),require("react-virtualized"),require("styled-components"),require("immer")):"function"==typeof define&&define.amd?define(["react","react-beautiful-dnd","react-dom","react-virtualized","styled-components","immer"],t):(e="undefined"!=typeof globalThis?globalThis:e||self)["dist/index"]=t(e.React,e.reactBeautifulDnd,e.ReactDOM,e.reactVirtualized,e.styled,e.produce)}(this,(function(e,t,d,r,n,a){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=i(e),o=i(d),s=i(n),u=i(a),p=l.default.createContext({});const f=s.default.div`
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("react-frame-component"),require("styled-components"),require("treelab-dnd"),require("react-dom"),require("react-virtualized"),require("immer")):"function"==typeof define&&define.amd?define(["react","react-frame-component","styled-components","treelab-dnd","react-dom","react-virtualized","immer"],t):(e="undefined"!=typeof globalThis?globalThis:e||self)["dist/index"]=t(e.React,e.Frame,e.styled,e.treelabDnd,e.ReactDOM,e.reactVirtualized,e.produce)}(this,(function(e,t,r,n,d,a,i){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=l(e),u=l(t),s=l(r),f=l(d),p=l(i);var c=o.default.createContext({});const g=s.default.div`
   padding: 0 12px 8px;
-`,c=({provided:t,snapshot:d,style:r,index:n,row:a})=>{const{cardRenderer:i}=e.useContext(p);return l.default.createElement(f,Object.assign({ref:t.innerRef},t.dragHandleProps,t.draggableProps,{style:Object.assign(Object.assign({},r),t.draggableProps.style)}),null==i?void 0:i({index:n,row:a,snapshot:d}))},g=d=>{const{index:r,style:n,row:a}=d,{enableReorderCards:i}=e.useContext(p);return a?l.default.createElement(t.Draggable,{key:a.id,draggableId:a.id,index:r,isDragDisabled:!i},((e,t)=>l.default.createElement(c,{index:r,provided:e,snapshot:t,row:a,style:n}))):null},x=s.default.div`
+`,h=({provided:t,snapshot:r,style:n,index:d,row:a})=>{const{cardRenderer:i}=e.useContext(c);return o.default.createElement(g,Object.assign({ref:t.innerRef},t.dragHandleProps,t.draggableProps,{style:Object.assign(Object.assign({},n),t.draggableProps.style)}),null==i?void 0:i({index:d,row:a,snapshot:r}))},b=t=>{const{index:r,style:d,row:a}=t,{enableReorderCards:i}=e.useContext(c);return a?o.default.createElement(n.Draggable,{key:a.id,draggableId:a.id,index:r,isDragDisabled:!i},((e,t)=>o.default.createElement(h,{index:r,provided:e,snapshot:t,row:a,style:d}))):null},m=s.default.div`
   ${({width:e=300})=>`\n    width: ${e}px;\n    min-width: ${e}px;\n  `}
@@ -12,11 +12,11 @@ height: 100%;
   flex-direction: column;
-`,b=s.default(r.List)`
+`,x=s.default(a.List)`
   div[role="rowgroup"] {
     min-height: 100%;
   }
-`,h=s.default.div`
+`,w=s.default.div`
   position: relative;
   overflow: hidden;
   flex: 1;
-`,m=s.default.div`
+`,y=s.default.div`
   position: absolute;
@@ -41,7 +41,12 @@ left: 12px;
   color: #83868f;
-`,w=s.default.div`
-  padding: 0 12px;
 `,v=s.default.div`
   padding: 0 12px;
-`,y=d=>{const{lane:n}=d,{rows:a}=d.lane,{laneHeaderRenderer:i,laneFooterRenderer:s,enableReorderLanes:u,appendMode:f,rowHeight:y}=e.useContext(p),R=e.useCallback((e=>{const t=a[e.index];return t?l.default.createElement(g,Object.assign({},e,{key:e.key,row:t})):null}),[a]),E=e.useCallback(((e,t,{source:{index:d}})=>l.default.createElement(c,{index:d,provided:e,snapshot:t,row:a[d]})),[a]),D=e.useRef();return e.useLayoutEffect((()=>{var e;null===(e=D.current)||void 0===e||e.recomputeRowHeights()}),[n]),l.default.createElement(t.Draggable,{key:n.id,draggableId:n.id,index:d.index,isDragDisabled:!u},(e=>l.default.createElement(x,Object.assign({ref:e.innerRef},e.draggableProps),l.default.createElement(w,Object.assign({},e.dragHandleProps),null==i?void 0:i(n)),l.default.createElement(h,null,l.default.createElement(t.Droppable,{droppableId:n.id,mode:"virtual",direction:"vertical",renderClone:E},((e,t)=>l.default.createElement(l.default.Fragment,null,l.default.createElement(r.AutoSizer,null,(({width:d,height:r})=>l.default.createElement(b,{width:d,height:r,rowCount:t.isUsingPlaceholder?a.length+1:a.length,rowHeight:({index:e})=>(null==y?void 0:y(a[e]))||0,overscanRowCount:10,rowRenderer:R,ref:t=>{if(t){const d=o.default.findDOMNode(t);d instanceof HTMLElement&&(e.innerRef(d),D.current=t)}}}))),f&&t.isDraggingOver&&l.default.createElement(m,null,"拖到这个组"))))),l.default.createElement(v,null,null==s?void 0:s(n)))))},R="kanban";const E=s.default.div`
+`,E=s.default.div`
+  padding: 0 12px;
+`,R=t=>{const{lane:r}=t,{rows:d}=t.lane,{laneHeaderRenderer:i,laneFooterRenderer:l,enableReorderLanes:u,appendMode:s,rowHeight:p}=e.useContext(c),g=e.useCallback((e=>{const t=d[e.index];return t?o.default.createElement(b,Object.assign({},e,{key:e.key,row:t})):null}),[d]),R=e.useCallback(((e,t,{source:{index:r}})=>o.default.createElement(h,{index:r,provided:e,snapshot:t,row:d[r]})),[d]),D=e.useRef();return e.useLayoutEffect((()=>{var e;null===(e=D.current)||void 0===e||e.recomputeRowHeights()}),[r]),o.default.createElement(n.Draggable,{key:r.id,draggableId:r.id,index:t.index,isDragDisabled:!u},(e=>o.default.createElement(m,Object.assign({ref:e.innerRef},e.draggableProps),o.default.createElement(v,Object.assign({},e.dragHandleProps),null==i?void 0:i(r)),o.default.createElement(w,null,o.default.createElement(n.Droppable,{droppableId:r.id,mode:"virtual",direction:"vertical",renderClone:R},((e,t)=>o.default.createElement(o.default.Fragment,null,o.default.createElement(a.AutoSizer,null,(({width:r,height:n})=>o.default.createElement(x,{width:r,height:n,rowCount:t.isUsingPlaceholder?d.length+1:d.length,rowHeight:({index:e})=>(null==p?void 0:p(d[e]))||0,overscanRowCount:10,rowRenderer:g,ref:t=>{if(t){const r=f.default.findDOMNode(t);r&&(e.innerRef(r),D.current=t)}}}))),s&&t.isDraggingOver&&o.default.createElement(y,null,"拖到这个组"))))),o.default.createElement(E,null,null==l?void 0:l(r)))))},D="kanban";const C=r.createGlobalStyle`
+  body {
+    margin: 0;
+    padding: 0;
+  }
+`,I=s.default.div`
   position: relative;
@@ -52,3 +57,3 @@ display: flex;
   height: ${({height:e})=>e?`${e}px`:"auto"};
-  overflow-x: auto;
+  overflow: visible;
   & * {
@@ -60,3 +65,3 @@ box-sizing: border-box;
   }
-`,D=s.default.div`
+`,O=s.default.div`
   ${({width:e=300})=>`\n    width: ${e}px;\n    min-width: ${e}px;\n  `}
@@ -67,2 +72,21 @@ height: 100%;
   flex-direction: column;
-`;return({lanes:d,width:r,height:n,listWidth:a,enableReorderCards:i=!0,enableReorderLanes:o=!0,appendMode:s=!1,onDropCard:f,onDropLane:c,cardRenderer:g,laneHeaderRenderer:x,laneFooterRenderer:b,rowHeight:h,extraLaneRenderer:m})=>{const w=function(t,{onDropCard:d,onDropLane:r},n){return e.useCallback((({source:e,destination:a,draggableId:i})=>{if(a&&(e.droppableId!==a.droppableId||e.index!==a.index))if(e.droppableId===R)null==r||r({listId:i,listIndex:a.index,lists:u.default(t,(t=>{const[d]=t.splice(e.index,1);t.splice(a.index,0,d)}))});else{const r=t.findIndex((t=>t.id===e.droppableId)),l=t.findIndex((e=>e.id===a.droppableId));null==d||d({itemId:i,listId:t[l].id,listIndex:l,rowIndex:a.index,lists:u.default(t,(t=>{if(n&&e.droppableId===a.droppableId)return;const[d]=t[r].rows.splice(e.index,1);n?t[l].rows.push(d):t[l].rows.splice(a.index,0,d)}))})}}),[n,t,d,r])}(d,{onDropCard:f,onDropLane:c},s),v={listWidth:a,enableReorderCards:i,enableReorderLanes:o,appendMode:s,cardRenderer:g,laneHeaderRenderer:x,laneFooterRenderer:b,rowHeight:h};return l.default.createElement(E,{width:r,height:n},l.default.createElement(p.Provider,{value:v},l.default.createElement(t.DragDropContext,{onDragEnd:w},l.default.createElement(t.Droppable,{droppableId:R,type:"COLUMN",direction:"horizontal"},(e=>l.default.createElement(E,Object.assign({ref:e.innerRef},e.droppableProps),d.map(((e,t)=>l.default.createElement(y,{key:e.id,lane:e,index:t}))),e.placeholder,m&&l.default.createElement(D,{width:a},m())))))))}}));
+`,j=({lanes:t,width:r,height:d,listWidth:a,enableReorderCards:i=!0,enableReorderLanes:l=!0,appendMode:u=!1,onDropCard:s,onDropLane:f,cardRenderer:g,laneHeaderRenderer:h,laneFooterRenderer:b,rowHeight:m,extraLaneRenderer:x,iframeWindow:w,iframeDocument:y})=>{const v=function(t,{onDropCard:r,onDropLane:n},d){return e.useCallback((({source:e,destination:a,draggableId:i})=>{if(a&&(e.droppableId!==a.droppableId||e.index!==a.index))if(e.droppableId===D)null==n||n({listId:i,listIndex:a.index,lists:p.default(t,(t=>{const[r]=t.splice(e.index,1);t.splice(a.index,0,r)}))});else{const n=t.findIndex((t=>t.id===e.droppableId)),l=t.findIndex((e=>e.id===a.droppableId));null==r||r({itemId:i,listId:t[l].id,listIndex:l,rowIndex:a.index,lists:p.default(t,(t=>{if(d&&e.droppableId===a.droppableId)return;const[r]=t[n].rows.splice(e.index,1);d?t[l].rows.push(r):t[l].rows.splice(a.index,0,r)}))})}}),[d,t,r,n])}(t,{onDropCard:s,onDropLane:f},u),E={listWidth:a,enableReorderCards:i,enableReorderLanes:l,appendMode:u,cardRenderer:g,laneHeaderRenderer:h,laneFooterRenderer:b,rowHeight:m};return o.default.createElement(c.Provider,{value:E},o.default.createElement(C,null),o.default.createElement(n.DragDropContext,{onDragEnd:v,iframeWindow:w,iframeDocument:y},o.default.createElement(n.Droppable,{droppableId:D,type:"COLUMN",direction:"horizontal"},(e=>o.default.createElement(I,Object.assign({ref:e.innerRef,width:r,height:d},e.droppableProps),t.map(((e,t)=>o.default.createElement(R,{key:e.id,lane:e,index:t}))),e.placeholder,x&&o.default.createElement(O,{width:a},x()))))))},$=s.default(u.default)`
+  border: none;
+  width: ${({width:e})=>e?`${e}px`:"100%"};
+  height: ${({height:e})=>e?`${e}px`:"100%"};
+`;return e=>{var{width:n,height:d,listWidth:a=300}=e,i=
+/*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var d=0;for(n=Object.getOwnPropertySymbols(e);d<n.length;d++)t.indexOf(n[d])<0&&Object.prototype.propertyIsEnumerable.call(e,n[d])&&(r[n[d]]=e[n[d]])}return r}(e,["width","height","listWidth"]);return o.default.createElement($,{width:n,height:d},o.default.createElement(t.FrameContextConsumer,null,(e=>o.default.createElement(r.StyleSheetManager,{target:e.document.head},o.default.createElement(j,Object.assign({},i,{height:d-20,width:(a+16)*i.lanes.length,listWidth:a,iframeWindow:e.window,iframeDocument:e.document}))))))}}));

package.json

 {
   "name": "@treelab/kanban",
-  "version": "2.0.0-alpha.18",
+  "version": "2.0.0-alpha.19",
   "description": "kanban",
@@ -43,9 +43,9 @@ "author": "treelab",
     "@rollup/plugin-typescript": "^8.0.0",
-    "@storybook/addon-actions": "^6.1.14",
-    "@storybook/addon-essentials": "^6.1.14",
-    "@storybook/addon-links": "^6.1.14",
-    "@storybook/react": "^6.1.14",
+    "@storybook/addon-actions": "^6.1.16",
+    "@storybook/addon-essentials": "^6.1.16",
+    "@storybook/addon-links": "^6.1.16",
+    "@storybook/react": "^6.1.16",
     "@types/react": "^17.0.0",
-    "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-frame-component": "^4.1.1",
     "@types/react-virtualized": "^9.21.10",
@@ -61,3 +61,2 @@ "@types/styled-components": "^5.1.7",
     "react": "^16.9.0",
-    "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^16.9.0",
@@ -75,7 +74,10 @@ "react-virtualized": "^9.22.3",
     "react": "^16.9.0",
-    "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^16.9.0",
     "react-virtualized": "^9.22.3",
     "styled-components": "^4.3.2"
+  },
+  "dependencies": {
+    "react-frame-component": "^4.1.3",
+    "treelab-dnd": "^13.0.1-2"
   }
 }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11353

increased by19.1%

Dev dependency count

27

decreased by-3.57%

Lines of code

156

increased by22.83%

Number of low quality alerts

3

decreased by-25%

Worsened metrics

Dependency count

7

increased by16.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact-frame-component@^4.1.3

• + Addedtreelab-dnd@^13.0.1-2

• + Addedreact-frame-component@4.1.3(transitive)

• + Addedtreelab-dnd@13.0.1-2(transitive)

• - Removedreact-beautiful-dnd@13.1.1(transitive)