@treelab/kanban - npm Package Compare versions

Comparing version 2.0.0-alpha.26 to 2.0.0-alpha.27

dist/index.d.ts

@@ -1,7 +0,3 @@
-/// <reference types="react" />
-import React from "react";
 import { ReactElement } from "react";
-import { DraggableStateSnapshot } from "treelab-dnd";
-import { DefaultTheme } from "styled-components";
-import { GlobalStyleComponent as IGlobalStyleComponent } from "styled-components";
+import { DraggableStateSnapshot } from "react-beautiful-dnd";
 interface Row {
@@ -20,13 +16,7 @@ id: string;
     row: R;
-    document?: any;
-    window?: any;
 }
-interface ILaneRendererOption {
-    document?: any;
-    window?: any;
-}
 interface IWidgetRenderers<R extends Row = Row> {
     cardRenderer?: (option: ICardRendererOption<R>) => ReactElement;
-    laneHeaderRenderer?: (lane: ILane<R>, option: ILaneRendererOption) => ReactElement;
-    laneFooterRenderer?: (lane: ILane<R>, option: ILaneRendererOption) => ReactElement;
+    laneHeaderRenderer?: (lane: ILane<R>) => ReactElement;
+    laneFooterRenderer?: (lane: ILane<R>) => ReactElement;
     rowHeight?: (row: R) => number;
@@ -54,3 +44,3 @@ extraLaneRenderer?: () => ReactElement;
     width?: number;
-    height: number;
+    height?: number;
     listWidth?: number;
@@ -60,7 +50,4 @@ enableReorderLanes?: boolean;
     appendMode?: boolean;
-    iframeWindow?: Window;
-    iframeDocument?: Document;
-    globalStyleComponent?: IGlobalStyleComponent<Record<string, never>, DefaultTheme>;
 }
-declare const KanbanContainer: React.FC<IKanbanProps>;
-export { KanbanContainer as default };
+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 };

dist/index.js

@@ -1,4 +0,4 @@
-!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,n,r,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(n),c=l(d),f=l(i);var p=o.default.createContext({});const g=s.default.div`
+!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`
   padding: 0 12px 8px;
-`,h=({provided:t,snapshot:n,style:r,index:d,row:a})=>{const{cardRenderer:i,document:l,window:u}=e.useContext(p);return o.default.createElement(g,Object.assign({ref:t.innerRef},t.dragHandleProps,t.draggableProps,{style:Object.assign(Object.assign({},r),t.draggableProps.style)}),null==i?void 0:i({index:d,row:a,snapshot:n,document:l,window:u}))},m=t=>{const{index:n,style:d,row:a}=t,{enableReorderCards:i}=e.useContext(p);return a?o.default.createElement(r.Draggable,{key:a.id,draggableId:a.id,index:n,isDragDisabled:!i},((e,t)=>o.default.createElement(h,{index:n,provided:e,snapshot:t,row:a,style:d}))):null},b=s.default.div`
+`,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`
   ${({width:e=300})=>`\n    width: ${e}px;\n    min-width: ${e}px;\n  `}
@@ -12,11 +12,11 @@ height: 100%;
   flex-direction: column;
-`,x=s.default(a.List)`
+`,b=s.default(r.List)`
   div[role="rowgroup"] {
     min-height: 100%;
   }
-`,w=s.default.div`
+`,h=s.default.div`
   position: relative;
   overflow: hidden;
   flex: 1;
-`,y=s.default.div`
+`,m=s.default.div`
   position: absolute;
@@ -41,12 +41,7 @@ left: 12px;
   color: #83868f;
+`,w=s.default.div`
+  padding: 0 12px;
 `,v=s.default.div`
   padding: 0 12px;
-`,E=s.default.div`
-  padding: 0 12px;
-`,R=t=>{const{lane:n}=t,{rows:d}=t.lane,{laneHeaderRenderer:i,laneFooterRenderer:l,enableReorderLanes:u,appendMode:s,rowHeight:f,document:g,window:R}=e.useContext(p),D=e.useCallback((e=>{const t=d[e.index];return t?o.default.createElement(m,Object.assign({},e,{key:e.key,row:t})):null}),[d]),C=e.useCallback(((e,t,{source:{index:n}})=>o.default.createElement(h,{index:n,provided:e,snapshot:t,row:d[n]})),[d]),I=e.useRef();return e.useLayoutEffect((()=>{var e;null===(e=I.current)||void 0===e||e.recomputeRowHeights()}),[n]),o.default.createElement(r.Draggable,{key:n.id,draggableId:n.id,index:t.index,isDragDisabled:!u},(e=>o.default.createElement(b,Object.assign({ref:e.innerRef},e.draggableProps),o.default.createElement(v,Object.assign({},e.dragHandleProps),null==i?void 0:i(n,{document:g,window:R})),o.default.createElement(w,null,o.default.createElement(r.Droppable,{droppableId:n.id,mode:"virtual",direction:"vertical",renderClone:C},((e,t)=>o.default.createElement(o.default.Fragment,null,o.default.createElement(a.AutoSizer,null,(({width:n,height:r})=>o.default.createElement(x,{width:n,height:r,rowCount:t.isUsingPlaceholder?d.length+1:d.length,rowHeight:({index:e})=>(null==f?void 0:f(d[e]))||0,overscanRowCount:10,rowRenderer:D,ref:t=>{if(t){const n=c.default.findDOMNode(t);n&&(e.innerRef(n),I.current=t)}}}))),s&&t.isDraggingOver&&o.default.createElement(y,null,"拖到这个组"))))),o.default.createElement(E,null,null==l?void 0:l(n,{document:g,window:R})))))},D="kanban";const C=n.createGlobalStyle`
-  body {
-    margin: 0;
-    padding: 0;
-  }
-`,I=s.default.div`
+`,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`
   position: relative;
@@ -57,3 +52,3 @@ display: flex;
   height: ${({height:e})=>e?`${e}px`:"auto"};
-  overflow: visible;
+  overflow-x: auto;
   & * {
@@ -65,3 +60,3 @@ box-sizing: border-box;
   }
-`,O=s.default.div`
+`,D=s.default.div`
   ${({width:e=300})=>`\n    width: ${e}px;\n    min-width: ${e}px;\n  `}
@@ -72,21 +67,2 @@ height: 100%;
   flex-direction: column;
-`;n.createGlobalStyle``;const j=({lanes:t,width:n,height:d,listWidth:a,enableReorderCards:i=!0,enableReorderLanes:l=!0,appendMode:u=!1,onDropCard:s,onDropLane:c,cardRenderer:g,laneHeaderRenderer:h,laneFooterRenderer:m,rowHeight:b,extraLaneRenderer:x,iframeWindow:w,iframeDocument:y,globalStyleComponent:v})=>{const E=function(t,{onDropCard:n,onDropLane:r},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==r||r({listId:i,listIndex:a.index,lists:f.default(t,(t=>{const[n]=t.splice(e.index,1);t.splice(a.index,0,n)}))});else{const r=t.findIndex((t=>t.id===e.droppableId)),l=t.findIndex((e=>e.id===a.droppableId));null==n||n({itemId:i,listId:t[l].id,listIndex:l,rowIndex:a.index,lists:f.default(t,(t=>{if(d&&e.droppableId===a.droppableId)return;const[n]=t[r].rows.splice(e.index,1);d?t[l].rows.push(n):t[l].rows.splice(a.index,0,n)}))})}}),[d,t,n,r])}(t,{onDropCard:s,onDropLane:c},u),j={listWidth:a,enableReorderCards:i,enableReorderLanes:l,appendMode:u,cardRenderer:g,laneHeaderRenderer:h,laneFooterRenderer:m,rowHeight:b,window:w,document:y};return o.default.createElement(p.Provider,{value:j},v&&o.default.createElement(v,null),o.default.createElement(C,null),o.default.createElement(r.DragDropContext,{onDragEnd:E,iframeWindow:w,iframeDocument:y},o.default.createElement(r.Droppable,{droppableId:D,type:"COLUMN",direction:"horizontal"},(e=>o.default.createElement(I,Object.assign({ref:e.innerRef,width:n,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:r,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 n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var d=0;for(r=Object.getOwnPropertySymbols(e);d<r.length;d++)t.indexOf(r[d])<0&&Object.prototype.propertyIsEnumerable.call(e,r[d])&&(n[r[d]]=e[r[d]])}return n}(e,["width","height","listWidth"]);return o.default.createElement($,{width:r,height:d},o.default.createElement(t.FrameContextConsumer,null,(e=>o.default.createElement(n.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}))))))}}));
+`;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())))))))}}));

package.json

 {
   "name": "@treelab/kanban",
-  "version": "2.0.0-alpha.26",
+  "version": "2.0.0-alpha.27",
   "description": "kanban",
@@ -43,10 +43,9 @@ "author": "treelab",
     "@rollup/plugin-typescript": "^8.0.0",
-    "@storybook/addon-actions": "^6.1.16",
-    "@storybook/addon-essentials": "^6.1.16",
-    "@storybook/addon-links": "^6.1.16",
-    "@storybook/react": "^6.1.16",
-    "@treelab/panda": "^3.0.0-beta.69",
+    "@storybook/addon-actions": "^6.1.14",
+    "@storybook/addon-essentials": "^6.1.14",
+    "@storybook/addon-links": "^6.1.14",
+    "@storybook/react": "^6.1.14",
     "@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",
@@ -62,2 +61,3 @@ "@types/styled-components": "^5.1.7",
     "react": "^16.9.0",
+    "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^16.9.0",
@@ -75,10 +75,7 @@ "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

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

Dependency count

6

decreased by-14.29%

Worsened metrics

Total package byte prevSize

9532

decreased by-20.51%

Lines of code

127

decreased by-23.03%

Number of low quality alerts

4

increased by33.33%

Dependency changes

• + Addedreact-beautiful-dnd@13.1.1(transitive)

• - Removedreact-frame-component@^4.1.3

• - Removedtreelab-dnd@^13.0.1-2

• - Removedreact-frame-component@4.1.3(transitive)

• - Removedtreelab-dnd@13.0.1-2(transitive)