@uidu/board - npm Package Compare versions

Comparing version 0.2.21 to 0.2.22

CHANGELOG.md

 # @uidu/board
 
+## 0.2.22
+
+### Patch Changes
+
+- ce58773: Try bump all packages
+- Updated dependencies [ce58773]
+  - @uidu/theme@0.4.3
+
 ## 0.2.21
@@ -7,4 +15,5 @@
 
-- 0c395cf: Tried preconstruct all forms elements
-- Updated dependencies [0c395cf]
+- e4db094: Tried preconstruct all forms elements
+- Updated dependencies [e4db094]
+- Updated dependencies [e4db094]
   - @uidu/theme@0.4.2
@@ -11,0 +20,0 @@

components/Board.js

@@ -1,2 +0,1 @@
-import { __assign, __extends, __read, __spread } from "tslib";
 import React, { Component } from 'react';
@@ -7,3 +6,3 @@ import { DragDropContext, Droppable, } from 'react-beautiful-dnd';
 import Column from './Column';
-var defaultComponents = {
+const defaultComponents = {
     container: Container,
@@ -21,24 +20,25 @@ parent: ParentContainer,
 };
-var Board = /** @class */ (function (_super) {
-    __extends(Board, _super);
-    function Board() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            columns: _this.props.initial,
-            ordered: Object.keys(_this.props.initial),
+export default class Board extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            columns: this.props.initial,
+            ordered: Object.keys(this.props.initial),
         };
-        _this.onDragEnd = function (result) {
-            var _a;
+        this.onDragEnd = (result) => {
             if (result.combine) {
                 if (result.type === 'COLUMN') {
-                    var shallow = __spread(_this.state.ordered);
+                    const shallow = [...this.state.ordered];
                     shallow.splice(result.source.index, 1);
-                    _this.setState({ ordered: shallow });
+                    this.setState({ ordered: shallow });
                     return;
                 }
-                var column = _this.state.columns[result.source.droppableId];
-                var withItemRemoved = __spread(column);
+                const column = this.state.columns[result.source.droppableId];
+                const withItemRemoved = [...column];
                 withItemRemoved.splice(result.source.index, 1);
-                var columns = __assign(__assign({}, _this.state.columns), (_a = {}, _a[result.source.droppableId] = withItemRemoved, _a));
-                _this.setState({ columns: columns });
+                const columns = {
+                    ...this.state.columns,
+                    [result.source.droppableId]: withItemRemoved,
+                };
+                this.setState({ columns });
                 return;
@@ -50,4 +50,4 @@ }
             }
-            var source = result.source;
-            var destination = result.destination;
+            const source = result.source;
+            const destination = result.destination;
             // did not move anywhere - can bail early
@@ -60,46 +60,40 @@ if (source.droppableId === destination.droppableId &&
             if (result.type === 'COLUMN') {
-                var ordered = reorder(_this.state.ordered, source.index, destination.index);
-                _this.setState({
-                    ordered: ordered,
+                const ordered = reorder(this.state.ordered, source.index, destination.index);
+                this.setState({
+                    ordered,
                 });
                 return;
             }
-            var data = reorderItemMap({
-                itemMap: _this.state.columns,
-                source: source,
-                destination: destination,
+            const data = reorderItemMap({
+                itemMap: this.state.columns,
+                source,
+                destination,
             });
-            _this.setState({
+            this.setState({
                 columns: data.itemMap,
             });
         };
-        return _this;
     }
-    Object.defineProperty(Board.prototype, "components", {
-        get: function () {
-            return __assign(__assign({}, defaultComponents), this.props.components);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Board.prototype.render = function () {
-        var _this = this;
-        var columns = this.state.columns;
-        var ordered = this.state.ordered;
-        var _a = this.props, containerHeight = _a.containerHeight, isCombineEnabled = _a.isCombineEnabled, withScrollableColumns = _a.withScrollableColumns, withDraggableColumns = _a.withDraggableColumns, columnDefs = _a.columnDefs;
-        var _b = this.components, ContainerComponent = _b.container, ParentContainerComponent = _b.parent;
-        var board = (React.createElement(Droppable, { droppableId: "board", type: "COLUMN", direction: "horizontal", ignoreContainerClipping: Boolean(containerHeight), isCombineEnabled: isCombineEnabled }, function (provided) { return (React.createElement(ContainerComponent, __assign({ ref: provided.innerRef }, provided.droppableProps),
-            ordered.map(function (key, index) { return (React.createElement(Column, { components: _this.components, key: key, index: index, title: key, items: columns[key], isScrollable: withScrollableColumns, isCombineEnabled: isCombineEnabled, isDragDisabled: !withDraggableColumns, columnDefs: columnDefs })); }),
-            provided.placeholder)); }));
+    get components() {
+        return {
+            ...defaultComponents,
+            ...this.props.components,
+        };
+    }
+    render() {
+        const columns = this.state.columns;
+        const ordered = this.state.ordered;
+        const { containerHeight, isCombineEnabled, withScrollableColumns, withDraggableColumns, columnDefs, } = this.props;
+        const { container: ContainerComponent, parent: ParentContainerComponent, } = this.components;
+        const board = (React.createElement(Droppable, { droppableId: "board", type: "COLUMN", direction: "horizontal", ignoreContainerClipping: Boolean(containerHeight), isCombineEnabled: isCombineEnabled }, (provided) => (React.createElement(ContainerComponent, Object.assign({ ref: provided.innerRef }, provided.droppableProps),
+            ordered.map((key, index) => (React.createElement(Column, { components: this.components, key: key, index: index, title: key, items: columns[key], isScrollable: withScrollableColumns, isCombineEnabled: isCombineEnabled, isDragDisabled: !withDraggableColumns, columnDefs: columnDefs }))),
+            provided.placeholder))));
         return (React.createElement(React.Fragment, null,
             React.createElement(DragDropContext, { onDragEnd: this.onDragEnd }, containerHeight ? (React.createElement(ParentContainerComponent, { height: containerHeight }, board)) : (board))));
-    };
-    Board.defaultProps = {
-        isCombineEnabled: false,
-        withDraggableColumns: false,
-        components: defaultComponents,
-    };
-    return Board;
-}(Component));
-export default Board;
-//# sourceMappingURL=Board.js.map
+    }
+}
+Board.defaultProps = {
+    isCombineEnabled: false,
+    withDraggableColumns: false,
+    components: defaultComponents,
+};

components/Column.js

@@ -1,2 +0,1 @@
-import { __assign, __extends } from "tslib";
 import { colors } from '@uidu/theme';
@@ -6,19 +5,11 @@ import React, { Component } from 'react';
 import ItemList from './ItemsList';
-var Column = /** @class */ (function (_super) {
-    __extends(Column, _super);
-    function Column() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Column.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, components = _a.components, title = _a.title, items = _a.items, index = _a.index, isDragDisabled = _a.isDragDisabled, columnDefs = _a.columnDefs;
-        var Header = components.columnHeader, Container = components.columnContainer, Footer = components.columnFooter;
-        return (React.createElement(Draggable, { draggableId: title, index: index, isDragDisabled: isDragDisabled }, function (provided, snapshot) { return (React.createElement(Container, __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps),
+export default class Column extends Component {
+    render() {
+        const { components, title, items, index, isDragDisabled, columnDefs, } = this.props;
+        const { columnHeader: Header, columnContainer: Container, columnFooter: Footer, } = components;
+        return (React.createElement(Draggable, { draggableId: title, index: index, isDragDisabled: isDragDisabled }, (provided, snapshot) => (React.createElement(Container, Object.assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps),
             React.createElement(ItemList, { components: components, listId: title, listType: "QUOTE", style: {
                     backgroundColor: snapshot.isDragging ? colors.G50 : null,
-                }, items: items, internalScroll: _this.props.isScrollable, isCombineEnabled: Boolean(_this.props.isCombineEnabled), columnDefs: columnDefs, header: React.createElement(Header, { isDragging: snapshot.isDragging, items: items, title: title }), footer: Footer && (React.createElement(Footer, { isDragging: snapshot.isDragging, items: items, title: title })) }))); }));
-    };
-    return Column;
-}(Component));
-export default Column;
-//# sourceMappingURL=Column.js.map
+                }, items: items, internalScroll: this.props.isScrollable, isCombineEnabled: Boolean(this.props.isCombineEnabled), columnDefs: columnDefs, header: React.createElement(Header, { isDragging: snapshot.isDragging, items: items, title: title }), footer: Footer && (React.createElement(Footer, { isDragging: snapshot.isDragging, items: items, title: title })) })))));
+    }
+}

components/Item.js

@@ -1,2 +0,1 @@
-import { __assign } from "tslib";
 import React from 'react';
@@ -11,7 +10,6 @@ // Previously this extended React.Component
 function ItemItem(props) {
-    var item = props.item, components = props.components, isDragging = props.isDragging, isGroupedOver = props.isGroupedOver, provided = props.provided, columnDefs = props.columnDefs;
-    var Item = components.item;
-    return (React.createElement(Item, __assign({ item: item, provided: provided, isDragging: isDragging, isGroupedOver: isGroupedOver, ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { columnDefs: columnDefs }), item.content));
+    const { item, components, isDragging, isGroupedOver, provided, columnDefs, } = props;
+    const { item: Item } = components;
+    return (React.createElement(Item, Object.assign({ item: item, provided: provided, isDragging: isDragging, isGroupedOver: isGroupedOver, ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { columnDefs: columnDefs }), item.content));
 }
 export default React.memo(ItemItem);
-//# sourceMappingURL=Item.js.map

components/ItemsList.js

@@ -1,20 +0,14 @@
-import { __assign, __extends } from "tslib";
 import React, { Component } from 'react';
 import { Draggable, Droppable, } from 'react-beautiful-dnd';
 import Item from './Item';
-var InnerItemListComponent = /** @class */ (function (_super) {
-    __extends(InnerItemListComponent, _super);
-    function InnerItemListComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
+class InnerItemListComponent extends Component {
+    render() {
+        const { items, components, columnDefs } = this.props;
+        return items.map((item, index) => (React.createElement(Draggable, { key: item.id, draggableId: item.id, index: index }, (dragProvided, dragSnapshot) => (React.createElement(Item, { key: item.id, item: item, components: components, isDragging: dragSnapshot.isDragging, isGroupedOver: Boolean(dragSnapshot.combineTargetFor), provided: dragProvided, columnDefs: columnDefs })))));
     }
-    InnerItemListComponent.prototype.render = function () {
-        var _a = this.props, items = _a.items, components = _a.components, columnDefs = _a.columnDefs;
-        return items.map(function (item, index) { return (React.createElement(Draggable, { key: item.id, draggableId: item.id, index: index }, function (dragProvided, dragSnapshot) { return (React.createElement(Item, { key: item.id, item: item, components: components, isDragging: dragSnapshot.isDragging, isGroupedOver: Boolean(dragSnapshot.combineTargetFor), provided: dragProvided, columnDefs: columnDefs })); })); });
-    };
-    return InnerItemListComponent;
-}(Component));
-var InnerItemList = React.memo(InnerItemListComponent);
+}
+const InnerItemList = React.memo(InnerItemListComponent);
 function InnerList(props) {
-    var items = props.items, dropProvided = props.dropProvided, components = props.components, columnDefs = props.columnDefs;
-    var Container = components.innerListContainer, DropZone = components.innerListDropzone;
+    const { items, dropProvided, components, columnDefs } = props;
+    const { innerListContainer: Container, innerListDropzone: DropZone, } = components;
     return (React.createElement(Container, null,
@@ -26,10 +20,9 @@ React.createElement(DropZone, { ref: dropProvided.innerRef },
 export default function ItemList(props) {
-    var components = props.components, ignoreContainerClipping = props.ignoreContainerClipping, internalScroll = props.internalScroll, scrollContainerStyle = props.scrollContainerStyle, isDropDisabled = props.isDropDisabled, isCombineEnabled = props.isCombineEnabled, _a = props.listId, listId = _a === void 0 ? 'LIST' : _a, listType = props.listType, style = props.style, items = props.items, header = props.header, footer = props.footer, columnDefs = props.columnDefs;
-    var ItemsListWrapper = components.itemsListWrapper, ItemsListScrollContainer = components.itemsListScrollContainer;
-    return (React.createElement(Droppable, { droppableId: listId, type: listType, ignoreContainerClipping: ignoreContainerClipping, isDropDisabled: isDropDisabled, isCombineEnabled: isCombineEnabled }, function (dropProvided, dropSnapshot) { return (React.createElement(ItemsListWrapper, __assign({ style: style, isDraggingOver: dropSnapshot.isDraggingOver, isDropDisabled: isDropDisabled, isDraggingFrom: Boolean(dropSnapshot.draggingFromThisWith) }, dropProvided.droppableProps),
+    const { components, ignoreContainerClipping, internalScroll, scrollContainerStyle, isDropDisabled, isCombineEnabled, listId = 'LIST', listType, style, items, header, footer, columnDefs, } = props;
+    const { itemsListWrapper: ItemsListWrapper, itemsListScrollContainer: ItemsListScrollContainer, } = components;
+    return (React.createElement(Droppable, { droppableId: listId, type: listType, ignoreContainerClipping: ignoreContainerClipping, isDropDisabled: isDropDisabled, isCombineEnabled: isCombineEnabled }, (dropProvided, dropSnapshot) => (React.createElement(ItemsListWrapper, Object.assign({ style: style, isDraggingOver: dropSnapshot.isDraggingOver, isDropDisabled: isDropDisabled, isDraggingFrom: Boolean(dropSnapshot.draggingFromThisWith) }, dropProvided.droppableProps),
         header,
         internalScroll ? (React.createElement(ItemsListScrollContainer, { style: scrollContainerStyle },
             React.createElement(InnerList, { items: items, components: components, dropProvided: dropProvided, columnDefs: columnDefs }))) : (React.createElement(InnerList, { items: items, components: components, dropProvided: dropProvided, columnDefs: columnDefs })),
-        footer)); }));
+        footer))));
 }
-//# sourceMappingURL=ItemsList.js.map

dist/package.json

 {
 	"name": "@uidu/board",
-	"version": "0.2.21"
+	"version": "0.2.22"
 }

index.js

 export { default } from './components/Board';
-//# sourceMappingURL=index.js.map

package.json

 {
   "name": "@uidu/board",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "private": false,
@@ -12,3 +12,3 @@ "description": "Trello-like Kanban boards",
   "dependencies": {
-    "@uidu/theme": "^0.4.2",
+    "@uidu/theme": "^0.4.3",
     "react-beautiful-dnd": "^13.0.0",
@@ -20,5 +20,5 @@ "react-feather": "^2.0.8",
   "devDependencies": {
-    "@uidu/badge": "^0.3.2",
-    "@uidu/docs": "^0.2.2",
-    "@uidu/shell": "^1.0.5",
+    "@uidu/badge": "^0.3.3",
+    "@uidu/docs": "^0.2.3",
+    "@uidu/shell": "^1.0.6",
     "faker": "^5.1.0"
@@ -25,0 +25,0 @@ },

styled/index.js

@@ -1,18 +0,46 @@
-import { __makeTemplateObject } from "tslib";
 import { colors } from '@uidu/theme';
 import styled from 'styled-components';
 import { borderRadius, grid } from '../utils';
-export var ParentContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  overflow-x: auto;\n  overflow-y: auto;\n"], ["\n  height: ", ";\n  overflow-x: auto;\n  overflow-y: auto;\n"])), function (_a) {
-    var height = _a.height;
-    return height;
-});
-export var Container = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  /* min-height: 100vh; */\n  /* like display:flex but will allow bleeding over the window width */\n  min-width: 100%;\n  min-height: 100%;\n  display: inline-flex;\n"], ["\n  /* min-height: 100vh; */\n  /* like display:flex but will allow bleeding over the window width */\n  min-width: 100%;\n  min-height: 100%;\n  display: inline-flex;\n"])));
-export var ColumnContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-right: ", "px;\n  display: flex;\n  flex-direction: column;\n"], ["\n  margin-right: ", "px;\n  display: flex;\n  flex-direction: column;\n"])), grid * 2);
-export var ColumnHeader = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-top-left-radius: ", "px;\n  border-top-right-radius: ", "px;\n  background-color: ", ";\n  transition: background-color 0.2s ease;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-top-left-radius: ", "px;\n  border-top-right-radius: ", "px;\n  background-color: ",
-    ";\n  transition: background-color 0.2s ease;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), borderRadius, borderRadius, function (_a) {
-    var isDragging = _a.isDragging;
-    return isDragging ? colors.G50 : colors.N30;
-}, colors.G50);
-export var ColumnTitle = styled.h4(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: ", "px;\n  transition: background-color ease 0.2s;\n  flex-grow: 1;\n  user-select: none;\n  position: relative;\n  &:focus {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"], ["\n  padding: ", "px;\n  transition: background-color ease 0.2s;\n  flex-grow: 1;\n  user-select: none;\n  position: relative;\n  &:focus {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"])), grid, colors.P100);
-var getBackgroundColor = function (isDraggingOver, isDraggingFrom) {
+export const ParentContainer = styled.div `
+  height: ${({ height }) => height};
+  overflow-x: auto;
+  overflow-y: auto;
+`;
+export const Container = styled.div `
+  /* min-height: 100vh; */
+  /* like display:flex but will allow bleeding over the window width */
+  min-width: 100%;
+  min-height: 100%;
+  display: inline-flex;
+`;
+export const ColumnContainer = styled.div `
+  margin-right: ${grid * 2}px;
+  display: flex;
+  flex-direction: column;
+`;
+export const ColumnHeader = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top-left-radius: ${borderRadius}px;
+  border-top-right-radius: ${borderRadius}px;
+  background-color: ${({ isDragging }) => isDragging ? colors.G50 : colors.N30};
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: ${colors.G50};
+  }
+`;
+export const ColumnTitle = styled.h4 `
+  padding: ${grid}px;
+  transition: background-color ease 0.2s;
+  flex-grow: 1;
+  user-select: none;
+  position: relative;
+  &:focus {
+    outline: 2px solid ${colors.P100};
+    outline-offset: 2px;
+  }
+`;
+const getBackgroundColor = (isDraggingOver, isDraggingFrom) => {
     if (isDraggingOver) {
@@ -26,16 +54,39 @@ return colors.R50;
 };
-export var ItemsListWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  opacity: ", ";\n  padding: 0 1rem;\n  border: 1rem;\n  padding-bottom: 0;\n  transition: background-color 0.2s ease, opacity 0.1s ease;\n  user-select: none;\n  width: 22rem;\n  min-width: 0;\n  min-height: 0;\n  /* height: 100%; */\n"], ["\n  background-color: ",
-    ";\n  display: flex;\n  flex-direction: column;\n  opacity: ", ";\n  padding: 0 1rem;\n  border: 1rem;\n  padding-bottom: 0;\n  transition: background-color 0.2s ease, opacity 0.1s ease;\n  user-select: none;\n  width: 22rem;\n  min-width: 0;\n  min-height: 0;\n  /* height: 100%; */\n"])), function (props) {
-    return getBackgroundColor(props.isDraggingOver, props.isDraggingFrom);
-}, function (_a) {
-    var isDropDisabled = _a.isDropDisabled;
-    return (isDropDisabled ? 0.5 : 'inherit');
-});
-var scrollContainerHeight = 64;
-export var ItemsListDropZone = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  /* stop the list collapsing when empty */\n  min-height: ", "px;\n  /*\n    not relying on the items for a margin-bottom\n    as it will collapse when the list is empty\n  */\n  padding-bottom: ", "px;\n"], ["\n  /* stop the list collapsing when empty */\n  min-height: ", "px;\n  /*\n    not relying on the items for a margin-bottom\n    as it will collapse when the list is empty\n  */\n  padding-bottom: ", "px;\n"])), scrollContainerHeight, grid);
-export var ItemsListScrollContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  /* overflow-x: hidden; */\n  /* overflow-y: auto; */\n  height: 100%;\n  /* max-height: ", "px; */\n"], ["\n  /* overflow-x: hidden; */\n  /* overflow-y: auto; */\n  height: 100%;\n  /* max-height: ", "px; */\n"])), scrollContainerHeight);
+export const ItemsListWrapper = styled.div `
+  background-color: ${props => getBackgroundColor(props.isDraggingOver, props.isDraggingFrom)};
+  display: flex;
+  flex-direction: column;
+  opacity: ${({ isDropDisabled }) => (isDropDisabled ? 0.5 : 'inherit')};
+  padding: 0 1rem;
+  border: 1rem;
+  padding-bottom: 0;
+  transition: background-color 0.2s ease, opacity 0.1s ease;
+  user-select: none;
+  width: 22rem;
+  min-width: 0;
+  min-height: 0;
+  /* height: 100%; */
+`;
+const scrollContainerHeight = 64;
+export const ItemsListDropZone = styled.div `
+  /* stop the list collapsing when empty */
+  min-height: ${scrollContainerHeight}px;
+  /*
+    not relying on the items for a margin-bottom
+    as it will collapse when the list is empty
+  */
+  padding-bottom: ${grid}px;
+`;
+export const ItemsListScrollContainer = styled.div `
+  /* overflow-x: hidden; */
+  /* overflow-y: auto; */
+  height: 100%;
+  /* max-height: ${scrollContainerHeight}px; */
+`;
 /* stylelint-disable block-no-empty */
-export var ItemsListContainer = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
+export const ItemsListContainer = styled.div `
+  height: 100%;
+`;
 /* stylelint-enable */
-var getItemBackgroundColor = function (isDragging, isGroupedOver) {
+const getItemBackgroundColor = (isDragging, isGroupedOver) => {
     if (isDragging) {
@@ -49,14 +100,31 @@ return colors.N10;
 };
-var getBorderColor = function (isDragging, authorColors) {
-    return isDragging ? colors.N10 : 'transparent';
-};
-export var Item = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border-radius: ", "px;\n  border: 2px solid transparent;\n  border-color: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n  padding: ", "px;\n  min-height: 40px;\n  margin-bottom: ", "px;\n  user-select: none;\n\n  /* anchor overrides */\n  color: ", ";\n\n  &:hover,\n  &:active {\n    color: ", ";\n    text-decoration: none;\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n    box-shadow: none;\n  }\n\n  /* flexbox */\n  display: flex;\n"], ["\n  border-radius: ", "px;\n  border: 2px solid transparent;\n  border-color: ", ";\n  background-color: ",
-    ";\n  box-shadow: ",
-    ";\n  padding: ", "px;\n  min-height: 40px;\n  margin-bottom: ", "px;\n  user-select: none;\n\n  /* anchor overrides */\n  color: ", ";\n\n  &:hover,\n  &:active {\n    color: ", ";\n    text-decoration: none;\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n    box-shadow: none;\n  }\n\n  /* flexbox */\n  display: flex;\n"])), borderRadius, function (props) { return getBorderColor(props.isDragging, props.colors); }, function (props) {
-    return getItemBackgroundColor(props.isDragging, props.isGroupedOver);
-}, function (_a) {
-    var isDragging = _a.isDragging;
-    return isDragging ? "2px 2px 1px " + colors.N70 : 'none';
-}, grid, grid, colors.N900, colors.N900, function (props) { return colors.N10; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
-//# sourceMappingURL=index.js.map
+const getBorderColor = (isDragging, authorColors) => isDragging ? colors.N10 : 'transparent';
+export const Item = styled.div `
+  border-radius: ${borderRadius}px;
+  border: 2px solid transparent;
+  border-color: ${props => getBorderColor(props.isDragging, props.colors)};
+  background-color: ${props => getItemBackgroundColor(props.isDragging, props.isGroupedOver)};
+  box-shadow: ${({ isDragging }) => isDragging ? `2px 2px 1px ${colors.N70}` : 'none'};
+  padding: ${grid}px;
+  min-height: 40px;
+  margin-bottom: ${grid}px;
+  user-select: none;
+
+  /* anchor overrides */
+  color: ${colors.N900};
+
+  &:hover,
+  &:active {
+    color: ${colors.N900};
+    text-decoration: none;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: ${props => colors.N10};
+    box-shadow: none;
+  }
+
+  /* flexbox */
+  display: flex;
+`;

types.js

 export {};
-//# sourceMappingURL=types.js.map

utils/index.js

@@ -1,8 +0,7 @@
-import { __assign, __read, __spread } from "tslib";
-export var grid = 8;
-export var borderRadius = 2;
+export const grid = 8;
+export const borderRadius = 2;
 // a little function to help us with reordering the result
-var reorder = function (list, startIndex, endIndex) {
-    var result = Array.from(list);
-    var _a = __read(result.splice(startIndex, 1), 1), removed = _a[0];
+const reorder = (list, startIndex, endIndex) => {
+    const result = Array.from(list);
+    const [removed] = result.splice(startIndex, 1);
     result.splice(endIndex, 0, removed);
@@ -12,14 +11,15 @@ return result;
 export default reorder;
-export var reorderItemMap = function (_a) {
-    var _b, _c;
-    var itemMap = _a.itemMap, source = _a.source, destination = _a.destination;
-    var current = __spread(itemMap[source.droppableId]);
-    var next = __spread(itemMap[destination.droppableId]);
-    var target = current[source.index];
+export const reorderItemMap = ({ itemMap, source, destination, }) => {
+    const current = [...itemMap[source.droppableId]];
+    const next = [...itemMap[destination.droppableId]];
+    const target = current[source.index];
     // moving to same list
     if (source.droppableId === destination.droppableId) {
-        var reordered = reorder(current, source.index, destination.index);
-        var result_1 = __assign(__assign({}, itemMap), (_b = {}, _b[source.droppableId] = reordered, _b));
+        const reordered = reorder(current, source.index, destination.index);
+        const result = {
+            ...itemMap,
+            [source.droppableId]: reordered,
+        };
         return {
-            itemMap: result_1,
+            itemMap: result,
         };
@@ -32,3 +32,7 @@ }
     next.splice(destination.index, 0, target);
-    var result = __assign(__assign({}, itemMap), (_c = {}, _c[source.droppableId] = current, _c[destination.droppableId] = next, _c));
+    const result = {
+        ...itemMap,
+        [source.droppableId]: current,
+        [destination.droppableId]: next,
+    };
     return {
@@ -38,2 +42,1 @@ itemMap: result,
 };
-//# sourceMappingURL=index.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

545

increased by6.45%

Worsened metrics

Total package byte prevSize

26187

decreased by-41.48%

Number of package files

26

decreased by-29.73%

Dependency changes

• Updated@uidu/theme@^0.4.3