@steroidsjs/bootstrap 3.0.0-beta.99 → 3.0.1

package/content/Chat/views/ChatFileItem/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var ChatFileItemView_1 = __importDefault(require("./ChatFileItemView"));
+exports["default"] = ChatFileItemView_1["default"];

package/content/Chat/views/ChatInput/ChatInputView.d.ts

@@ -0,0 +1,3 @@
+import { IChatInputViewProps } from '@steroidsjs/core/ui/content/Chat/Chat';
+import './ChatInputView.scss';
+export default function ChatInputView(props: IChatInputViewProps): JSX.Element;

package/content/Chat/views/ChatInput/ChatInputView.js

@@ -0,0 +1,64 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var form_1 = require("@steroidsjs/core/ui/form");
+var ButtonView_1 = __importDefault(require("../../../../form/Button/ButtonView"));
+var ChatFileItem_1 = __importDefault(require("../ChatFileItem"));
+require("./ChatInputView.scss");
+var HiddenUploadFileButton = (0, react_1.forwardRef)(function (props, ref) { return (react_1["default"].createElement("button", __assign({ type: 'button', ref: ref }, props))); });
+function ChatInputView(props) {
+    var bem = (0, useBem_1["default"])('ChatInputView');
+    var filePickerRef = (0, react_1.useRef)(null);
+    var onBrowseFile = (0, react_1.useCallback)(function (e) {
+        e.preventDefault();
+        filePickerRef.current.click();
+    }, [filePickerRef]);
+    var renderInputActions = (0, react_1.useCallback)(function () { return (react_1["default"].createElement("div", { className: bem.element('actions') },
+        react_1["default"].createElement(ButtonView_1["default"], { className: bem.element('action'), icon: "clip", onClick: onBrowseFile }),
+        react_1["default"].createElement(ButtonView_1["default"], { className: bem.element('action'), icon: "send", type: "submit" }))); }, [bem, onBrowseFile]);
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        react_1["default"].createElement(form_1.Form, { formId: props.chatId, className: bem.element('form'), onSubmit: props.onSendMessage, useRedux: true },
+            react_1["default"].createElement(form_1.InputField, { className: bem.element('input'), attribute: "text", size: "lg", placeholder: props.inputPlaceholder, addonAfter: renderInputActions() }),
+            react_1["default"].createElement(form_1.FileField, __assign({ className: bem.element('files'), attribute: 'filesId', itemView: ChatFileItem_1["default"], buttonView: HiddenUploadFileButton, buttonProps: {
+                    ref: filePickerRef
+                }, multiple: false, showRemove: true, onChange: props.onUploadFiles }, props.fileFieldProps)))));
+}
+exports["default"] = ChatInputView;

package/content/Chat/views/ChatInput/ChatInputView.scss

@@ -0,0 +1,82 @@
+@use "../../../../scss/variables";
+@use "../../../../scss/mixins";
+
+:root {
+  --sidebar-scroll-thumb-color: #cbd5db;
+  --sidebar-scroll-track-color: rgba(0, 0, 0, 0.04);
+}
+
+html[data-theme="dark"] {
+  --sidebar-scroll-thumb-color: #4B4E5E;
+  --sidebar-scroll-track-color: #272A37;
+}
+
+$sidebar-scroll-thumb-color: var(--sidebar-scroll-thumb-color);
+$sidebar-scroll-track-color: var(--sidebar-scroll-track-color);
+
+.ChatInputView {
+  &__actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 24px;
+  }
+
+  &__action {
+    svg > * {
+      stroke: variables.$text-color
+    }
+  }
+
+  &__input {
+    .InputFieldView__addon-after {
+      background-color: inherit;
+    }
+
+    .InputFieldView__input {
+      border: none;
+      padding: 16px 0 16px 16px;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 18px;
+    }
+
+    .ButtonView_button {
+      background-color: inherit;
+      padding: 0;
+    }
+  }
+
+  &__form {
+    >* {
+      margin-bottom: 8px;
+    }
+  }
+
+  .FileFieldView__button {
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+    line-height: 0;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+
+  &__files .FileFieldView__files {
+    flex-flow: row nowrap;
+    overflow: auto;
+    gap: 8px;
+    padding-bottom: 8px;
+    margin-bottom: 0;
+
+    @include mixins.horizontalScrollWrapper(8px, $sidebar-scroll-thumb-color, $sidebar-scroll-track-color);
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+  }
+}

package/content/Chat/views/ChatInput/index.d.ts

@@ -0,0 +1,2 @@
+import ChatInputView from './ChatInputView';
+export default ChatInputView;

package/content/Chat/views/ChatInput/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var ChatInputView_1 = __importDefault(require("./ChatInputView"));
+exports["default"] = ChatInputView_1["default"];

package/content/Dashboard/DashboardItemView.d.ts

@@ -0,0 +1,2 @@
+import { IDashboardItemViewProps } from '@steroidsjs/core/ui/content/Dashboard/Dashboard';
+export default function DashboardItemView(props: IDashboardItemViewProps): JSX.Element;

package/content/Dashboard/DashboardItemView.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var typography_1 = require("@steroidsjs/core/ui/typography");
+var content_1 = require("@steroidsjs/core/ui/content");
+function DashboardItemView(props) {
+    var bem = (0, hooks_1.useBem)('DashboardItemView');
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        react_1["default"].createElement("div", { className: bem.element('header') },
+            props.iconName && react_1["default"].createElement(content_1.Icon, { name: props.iconName }),
+            react_1["default"].createElement(typography_1.Title, { content: props.title, type: 'h3' })),
+        props.children));
+}
+exports["default"] = DashboardItemView;

package/content/Dashboard/DashboardItemView.scss

@@ -0,0 +1,47 @@
+@use "../../scss/variables";
+
+:root {
+  --dashboard-item-background-color: #fff;
+  --title-icon-color: #323232;
+}
+
+html[data-theme="dark"] {
+  --dashboard-item-background-color: #191b1f;
+  --title-icon-color: #fff;
+
+}
+
+$dashboard-item-background-color: var(--dashboard-item-background-color);
+$title-icon-color: var(--title-icon-color);
+
+.DashboardItemView {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 16px;
+  border-radius: 12px;
+  background-color: $dashboard-item-background-color;
+  box-shadow: 0 8px 20px 0 variables.$black-4;
+
+  &__header {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+
+  &__header,
+  .CardView {
+    svg {
+      path,
+      rect,
+      circle {
+        stroke: $title-icon-color;
+      }
+    }
+  }
+
+  .TitleView {
+    margin-bottom: 0;
+  }
+}

package/content/DropDown/DropDownView.js

@@ -26,18 +26,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-var isFunction_1 = __importDefault(require("lodash-es/isFunction"));
 var React = __importStar(require("react"));
-var react_use_1 = require("react-use");
+var isFunction_1 = __importDefault(require("lodash-es/isFunction"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var react_1 = require("react");
 function DropDownView(props) {
-    var _a;
     var bem = (0, hooks_1.useBem)('DropDownView');
     var ui = (0, hooks_1.useComponents)().ui;
-    (0, react_use_1.useMount)(function () {
-        props.calculatePosition(props.forwardedRef.current.getBoundingClientRect());
-    });
+    var arrowRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        props.calculatePosition(props.forwardedRef.current.getBoundingClientRect(), props.hasArrow ? arrowRef.current.getBoundingClientRect() : null);
+    }, [props.calculatePosition]);
     var contentProps = (0, react_1.useMemo)(function () { return ({
         onClose: props.onClose
     }); }, [props.onClose]);
@@ -48,11 +47,12 @@ function DropDownView(props) {
             content = ui.renderView(content, contentProps);
         }
     }
-    return (React.createElement("div", { ref: props.forwardedRef, className: bem(bem.block((_a = {
-                show: props.isComponentVisible
-            },
-            _a["position-".concat(props.position)] = !!props.position,
-            _a.hasArrow = props.hasArrow,
-            _a)), props.className), style: props.style }, content));
+    return (React.createElement("div", { ref: props.forwardedRef, className: bem(bem.block({
+            show: props.isComponentVisible,
+            position: props.position
+        }), props.className), style: props.style },
+        props.hasArrow && (React.createElement("div", { ref: arrowRef, className: bem.element('arrow', { position: props.position }), style: props.arrowPosition })),
+        React.createElement("div", { className: bem.element('content') },
+            React.createElement("span", null, content))));
 }
 exports["default"] = DropDownView;

package/content/DropDown/DropDownView.scss

@@ -1,212 +1,71 @@
+@use 'sass:math';
 @use "../../scss/variables";
+@use '../../scss/mixins';
 
 :root {
-    --dropdown-background: #fff;
-    --dropdown-border: #dbe2e6;
-    --dropdown-triangle-svg: url("data:image/svg+xml,%3Csvg width='21' height='11' viewBox='0 0 21 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.0416 0.5L10.1719 10.2567L1.30215 0.499998L19.0416 0.5Z' fill='white' stroke='%23dbe2e6'/%3E%3C/svg%3E%0A");
+    --dropdown-background-color: #fff;
+    --dropdown-border-color: #dbe2e6;
 }
 
 html[data-theme="dark"] {
-    --dropdown-background: var(--gray-dark);
-    --dropdown-border: transparent;
-    --dropdown-triangle-svg: url("data:image/svg+xml,%3Csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5859 11.222L0.585938 0.222044L20.5859 0.222046L10.5859 11.222Z' fill='%23272A37'/%3E%3C/svg%3E");
+    --dropdown-background-color: var(--gray-dark);
+    --dropdown-border-color: transparent;
 }
 
-$dropdown-background: var(--dropdown-background);
-$dropdown-border: var(--dropdown-border);
-$dropdown-triangle-svg: var(--dropdown-triangle-svg);
+$dropdown-background-color: var(--dropdown-background-color);
+$dropdown-border-color: var(--dropdown-border-color);
 
+$dropdown-arrow-width: 10px;
+$dropdown-arrow-height: 10px;
+$dropdown-arrow-border: math.div($dropdown-arrow-width, 2);
 $gap: 12px;
 
-%triangle {
-    content: "";
-    position: absolute;
-    width: 20px;
-    height: 11px;
-    z-index: 2;
-    background-image: $dropdown-triangle-svg;
-}
-
-%borderShaper {
-    content: "";
-    position: absolute;
-    z-index: 3;
-
-    width: 16px;
-    height: 1px;
-    background-color: $dropdown-background;
-    border-left: 2px solid $dropdown-border;
-    border-right: 2px solid $dropdown-border;
-}
-
-@mixin drop($edge, $padding) {
-    @if ($edge == "top") {
-        &::before {
-            @extend %triangle;
-
-            top: 100%;
-            left: $padding;
-            transform: translateX(-50%);
-        }
-
-        &::after {
-            @extend %borderShaper;
-
-            top: 100%;
-            left: $padding;
-            transform: translateX(-50%);
-        }
-    } @else if ($edge == "bottom") {
-        &::before {
-            @extend %triangle;
-
-            top: 0;
-            left: $padding;
-            top: -11px;
-            transform: translateX(-50%) rotate(180deg);
-        }
-
-        &::after {
-            @extend %borderShaper;
-
-            transform: translateX(-50%);
-            top: -1px;
-            left: $padding;
-        }
-    } @else if($edge == "left") {
-        &::before {
-            @extend %triangle;
-
-            left: 100%;
-            top: $padding;
-            transform: translateX(-22.5%) rotate(-90deg);
-        }
-
-        &::after {
-            @extend %borderShaper;
-
-            left: 100%;
-            top: $padding;
-            transform: rotate(-90deg) translate(-30%, -7.5px);
-        }
-    } @else if($edge == "right") {
-        &::before {
-            @extend %triangle;
-
-            right: 100%;
-            top: $padding;
-            transform: translateX(22.5%) rotate(90deg);
-        }
-
-        &::after {
-            @extend %borderShaper;
-
-            right: 100%;
-            top: $padding;
-            transform: rotate(-90deg) translate(-30%, 7.5px);
-        }
-    }
-}
+$dropdown-arrow-offset-horizontal: 20px;
+$dropdown-arrow-offset-vertical-top: 15px;
+$dropdown-arrow-offset-vertical-bottom: 7px;
 
 .DropDownView {
-    $root: &;
-
-    z-index: 1000;
     position: absolute;
     color: variables.$text-color;
 
     transform: translate(0, 0);
     opacity: 0;
     transition: opacity 0.15s ease-in, transform 0.15s ease-in;
-
     z-index: 4;
+
     min-width: 200px;
     padding: 12px;
     border-radius: variables.$radius-large;
-    background-color: $dropdown-background;
-    border: 1px solid $dropdown-border;
+    background-color: $dropdown-background-color;
+    border: 1px solid $dropdown-border-color;
 
     &_show {
         opacity: 1;
     }
-    &_position-top,
-    &_position-topLeft,
-    &_position-topRight {
-        transform: translateY(-$gap);
-    }
-    &_position-bottom,
-    &_position-bottomLeft,
-    &_position-bottomRight {
-        transform: translateY($gap);
-    }
-    &_position-left,
-    &_position-leftTop,
-    &_position-leftBottom {
-        transform: translateX(-$gap);
-    }
-    &_position-right,
-    &_position-rightTop,
-    &_position-rightBottom {
-        transform: translateX($gap);
-    }
 
-    &_position-top {
-        @include drop("top", 50%);
-    }
+    @include mixins.absolute-position($gap);
 
-    &_position-topLeft {
-        @include drop("top", 15%);
-    }
-
-    &_position-topRight {
-        @include drop("top", 85%);
-    }
-
-    &_position-bottom {
-        @include drop("bottom", 50%);
-    }
-
-    &_position-bottomLeft {
-        @include drop("bottom", 15%);
-    }
-
-    &_position-bottomRight {
-        @include drop("bottom", 85%);
-    }
+    &__arrow {
+        position: absolute;
+        z-index: 1;
+        display: block;
+        pointer-events: none;
+        width: $dropdown-arrow-width;
+        height: $dropdown-arrow-height;
+        overflow: hidden;
+        border: 1px solid $dropdown-border-color;
+        background-color: $dropdown-background-color;
 
-    &_position-left {
-        @include drop("left", 46.5%);
-    }
-
-    &_position-leftTop {
-        @include drop("left", 12.5%);
-    }
-
-    &_position-leftBottom {
-        @include drop("left", 80%);
-    }
-
-    &_position-right {
-        @include drop("right", 46.5%);
-    }
-
-    &_position-rightTop {
-        @include drop("right", 12.5%);
-    }
-
-    &_position-rightBottom {
-        @include drop("right", 80%);
+        @include mixins.arrow-position(
+                        $dropdown-arrow-border,
+                        $dropdown-arrow-offset-horizontal,
+                        $dropdown-arrow-offset-vertical-top,
+                        $dropdown-arrow-offset-vertical-bottom
+        );
     }
 
     &::before,
     &::after {
         opacity: 0;
     }
-
-    &_hasArrow {
-        &::before,
-        &::after {
-            opacity: 1;
-        }
-    }
 }

package/content/Icon/IconView.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -22,15 +33,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var omit_1 = __importDefault(require("lodash-es/omit"));
 function IconView(props) {
     var bem = (0, hooks_1.useBem)('IconView');
+    var omittedProps = (0, omit_1["default"])(props, 'contentEditable', 'icon');
     if (typeof props.icon === 'string' && props.icon.indexOf('<svg') === 0) {
-        return (React.createElement("span", { dangerouslySetInnerHTML: { __html: props.icon } /* eslint-disable-line react/no-danger */, "aria-label": props.title, title: props.title, className: bem(bem.block(), props.className), onClick: props.onClick, onKeyPress: props.onClick, role: 'button', tabIndex: props.tabIndex || 0 }));
+        return (React.createElement("span", __assign({}, omittedProps, { dangerouslySetInnerHTML: { __html: props.icon } /* eslint-disable-line react/no-danger */, "aria-label": props.title, title: props.title, className: bem(bem.block(), props.className), onClick: props.onClick, onKeyPress: props.onClick, role: 'button', tabIndex: props.tabIndex || 0 })));
     }
-    return (React.createElement("span", { onClick: props.onClick, onKeyPress: props.onClick, role: 'button', tabIndex: props.tabIndex || 0 },
+    return (React.createElement("span", __assign({}, omittedProps, { onClick: props.onClick, onKeyPress: props.onClick, role: 'button', tabIndex: props.tabIndex || 0 }),
         React.createElement("img", { alt: props.title, title: props.title, src: props.icon, className: bem(bem.block(), props.className) })));
 }
 exports["default"] = IconView;

package/content/Kanban/KanbanView.d.ts

@@ -0,0 +1,2 @@
+import { IKanbanViewProps } from '@steroidsjs/core/ui/content/Kanban/Kanban';
+export default function KanbanView(props: IKanbanViewProps): JSX.Element;

package/content/Kanban/KanbanView.js

@@ -0,0 +1,29 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+function KanbanView(props) {
+    var bem = (0, hooks_1.useBem)('KanbanView');
+    var Droppable = props.droppableComponent;
+    return (react_1["default"].createElement(Droppable, { droppableId: "all-columns", direction: "horizontal", type: "column" }, function (provided) {
+        var _a;
+        return (react_1["default"].createElement("div", __assign({ className: bem.block(), id: "task-board", ref: provided.innerRef }, provided.droppableProps, { style: props.style }), (_a = props.columns) === null || _a === void 0 ? void 0 :
+            _a.map(function (column, index) { return props.renderColumn(column, index); }),
+            provided.placeholder));
+    }));
+}
+exports["default"] = KanbanView;

package/content/Kanban/KanbanView.scss

@@ -0,0 +1,12 @@
+.KanbanView {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin-top: 10px;
+  white-space: nowrap;
+  padding: 10px 20px;
+  overflow-x: auto;
+}

package/content/Kanban/views/KanbanColumn/KanbanColumnView.d.ts

@@ -0,0 +1,2 @@
+import { IKanbanColumnViewProps } from '@steroidsjs/core/ui/content/Kanban/Kanban';
+export default function KanbanColumnView(props: IKanbanColumnViewProps): JSX.Element;

package/content/Kanban/views/KanbanColumn/KanbanColumnView.js

@@ -0,0 +1,36 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var typography_1 = require("@steroidsjs/core/ui/typography");
+var form_1 = require("@steroidsjs/core/ui/form");
+function KanbanColumnView(props) {
+    var bem = (0, hooks_1.useBem)('KanbanColumnView');
+    var Draggable = props.draggableComponent;
+    var Droppable = props.droppableComponent;
+    var _a = props.column, id = _a.id, title = _a.title, tasks = _a.tasks;
+    return (react_1["default"].createElement(Draggable, { draggableId: id.toString(), index: props.columnIndex }, function (providedDraggable) { return (react_1["default"].createElement("div", __assign({ className: bem.block() }, providedDraggable.draggableProps, { ref: providedDraggable.innerRef }),
+        react_1["default"].createElement("div", __assign({ className: bem.element('header') }, providedDraggable.dragHandleProps),
+            react_1["default"].createElement(typography_1.Title, { className: bem.element('title'), content: title, type: 'h3' },
+                react_1["default"].createElement("span", { className: bem.element('tasks-count') }, tasks.length))),
+        react_1["default"].createElement(Droppable, { droppableId: id.toString(), type: "task" }, function (providedDroppable) { return (react_1["default"].createElement("div", __assign({ className: bem.element('content'), ref: providedDroppable.innerRef }, providedDroppable.droppableProps),
+            tasks.map(function (task, taskIndex) { return (props.renderTask(task, props.column.id, taskIndex)); }),
+            providedDroppable.placeholder)); }),
+        react_1["default"].createElement("div", { className: bem.element('button') },
+            react_1["default"].createElement(form_1.Button, { size: "sm", color: 'basic', icon: "add", onClick: function () { return props.onOpenCreateTaskModal(props.column.id); }, block: true })))); }));
+}
+exports["default"] = KanbanColumnView;