@steroidsjs/bootstrap 3.0.0-beta.100 → 3.0.0-beta.101

package/index.d.ts

@@ -194,6 +194,9 @@ declare const _default: {
     'list.DiagramColumnView': {
         lazy: () => any;
     };
+    'list.TreeColumnView': {
+        lazy: () => any;
+    };
     'list.ListView': {
         lazy: () => any;
     };

package/index.js

@@ -197,6 +197,9 @@ exports["default"] = {
     'list.DiagramColumnView': {
         lazy: function () { return require('./list/Grid/views/DiagramColumnView/DiagramColumnView')["default"]; }
     },
+    'list.TreeColumnView': {
+        lazy: function () { return require('./list/Grid/views/TreeColumnView/TreeColumnView')["default"]; }
+    },
     'list.ListView': {
         lazy: function () { return require('./list/List/ListView')["default"]; }
     },

package/index.scss

@@ -71,6 +71,7 @@
 @include meta.load-css('list/FlexGrid/FlexGridView');
 @include meta.load-css('list/List/ListView');
 @include meta.load-css('list/Grid/views/ContentColumnView/ContentColumnView');
+@include meta.load-css('list/Grid/views/TreeColumnView/TreeColumnView');
 @include meta.load-css('list/Pagination/PaginationButtonView');
 @include meta.load-css('list/Pagination/PaginationMoreView');
 @include meta.load-css('list/PaginationSize/PaginationSizeView');

package/list/Grid/views/TreeColumnView/TreeColumnView.d.ts

@@ -0,0 +1,2 @@
+import { ITreeColumnViewProps } from '@steroidsjs/core/ui/list/TreeTable/TreeTable';
+export default function TreeColumnView(props: ITreeColumnViewProps): JSX.Element;

package/list/Grid/views/TreeColumnView/TreeColumnView.js

@@ -0,0 +1,41 @@
+"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 Format_1 = __importDefault(require("@steroidsjs/core/ui/format/Format"));
+var content_1 = require("@steroidsjs/core/ui/content");
+var DEFAULT_PADDING_LEFT = 32;
+var PADDING_WITH_ICON = 0;
+var PADDING_WITHOUT_ICON = 24;
+function TreeColumnView(props) {
+    var bem = (0, hooks_1.useBem)('TreeColumnView');
+    var levelPadding = props.levelPadding || DEFAULT_PADDING_LEFT;
+    var paddingBasedOnIcon = props.item.hasItems ? PADDING_WITH_ICON : PADDING_WITHOUT_ICON;
+    var renderFormat = function () { return (react_1["default"].createElement(Format_1["default"], __assign({}, props, (props.formatter || {}), { attribute: props.attribute }))); };
+    var renderValue = function () { return (react_1["default"].createElement("span", { className: bem.element('value') }, renderFormat())); };
+    return (react_1["default"].createElement("div", { className: bem.block(bem.block({
+            size: props.size
+        })) },
+        react_1["default"].createElement("div", { className: bem.element('data'), style: {
+                paddingLeft: "".concat(props.item.level * levelPadding + paddingBasedOnIcon, "px")
+            } },
+            props.item.hasItems && (react_1["default"].createElement(content_1.Icon, { name: 'expand_right', className: bem.element('icon', {
+                    opened: props.item.isOpened
+                }), onClick: function () { return props.item.onTreeItemClick(props.item.uniqueId, props.item); } })),
+            renderValue())));
+}
+exports["default"] = TreeColumnView;

package/list/Grid/views/TreeColumnView/TreeColumnView.scss

@@ -0,0 +1,46 @@
+@use "../../../../scss/variables";
+
+:root {
+  --grid-icon-color: #323232;
+}
+
+html[data-theme="dark"] {
+  --grid-icon-color: #ffffff;
+}
+
+$grid-icon-color: var(--grid-icon-color);
+
+.TreeColumnView {
+  &__data {
+    display: flex;
+    align-items: center;
+
+    .IconView {
+      min-width: 24px;
+      min-height: 24px;
+    }
+  }
+
+  &__value {
+    margin-left: 8px;
+  }
+
+  &__icon {
+    transform: rotate(0);
+    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    &_opened {
+      transform: rotate(90deg);
+    }
+
+    svg {
+      > * {
+        stroke: $grid-icon-color;
+      }
+    }
+  }
+}
+
+.TreeColumnHeader {
+  width: 40%;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.100",
+    "version": "3.0.0-beta.101",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",