@singularsystems/neo-react 0.10.30 → 0.10.31

package/dist/ReactComponents/Card.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Model } from '@singularsystems/neo-core';
 interface ICardProps {
     /** Icon to show next to title in header. */
     icon?: string;
@@ -8,8 +9,15 @@ interface ICardProps {
     headerElements?: JSX.Element;
     /** Use a custom scrollbar instead of the browser scrollbar. */
     useCustomScrollbar?: boolean;
+    /** Causes the card to be collapsible. Adds a collapse icon to the header. */
+    collapsible?: boolean;
+    /** Causes the card to be collapsed on first render. Sets the collapsible prop to true. */
+    initiallyCollapsed?: boolean;
+    /** Allows the collapse state to be set externally. Sets the collapsible prop to true. */
+    isExpanded?: Model.IObservableValue<boolean>;
 }
 export default class Card extends React.Component<ICardProps & React.HTMLProps<HTMLDivElement>> {
+    private expandState;
     render(): JSX.Element;
 }
 export {};

package/dist/ReactComponents/Card.js

@@ -1,25 +1,50 @@
 import { __assign, __decorate, __extends, __rest } from "tslib";
 import React from 'react';
-import { Utils } from '@singularsystems/neo-core';
+import { Model, Utils } from '@singularsystems/neo-core';
 import { observer } from 'mobx-react';
 import Scrollbar from 'react-custom-scrollbars';
+import Collapsable from './Collapsable';
 var Card = /** @class */ (function (_super) {
     __extends(Card, _super);
     function Card() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.expandState = new Model.ObservableValue(_this.props.initiallyCollapsed === undefined ? true : !_this.props.initiallyCollapsed);
+        return _this;
     }
     Card.prototype.render = function () {
-        var _a = this.props, icon = _a.icon, title = _a.title, children = _a.children, headerElements = _a.headerElements, useCustomScrollbar = _a.useCustomScrollbar, domProps = __rest(_a, ["icon", "title", "children", "headerElements", "useCustomScrollbar"]);
+        var _a = this.props, icon = _a.icon, title = _a.title, children = _a.children, headerElements = _a.headerElements, useCustomScrollbar = _a.useCustomScrollbar, collapsible = _a.collapsible, initiallyCollapsed = _a.initiallyCollapsed, isExpanded = _a.isExpanded, domProps = __rest(_a, ["icon", "title", "children", "headerElements", "useCustomScrollbar", "collapsible", "initiallyCollapsed", "isExpanded"]);
         var className = Utils.joinWithSpaces("neo-card card", domProps.className);
+        var isCollapsible = collapsible || isExpanded !== undefined || initiallyCollapsed !== undefined;
+        var expandState = (isExpanded !== null && isExpanded !== void 0 ? isExpanded : this.expandState);
+        if (isCollapsible) {
+            var expandIndicator = React.createElement("i", { onClick: function () { return expandState.value = !expandState.value; }, className: "card-expand-indicator fa fa-fw fa-angle-" + (expandState.value ? "up" : "down") });
+            if (headerElements) {
+                headerElements = React.createElement(React.Fragment, null,
+                    headerElements,
+                    expandIndicator);
+            }
+            else {
+                headerElements = expandIndicator;
+            }
+            if (!expandState.value) {
+                className += " collapsed";
+            }
+        }
+        var body = React.createElement("div", { className: "card-body" },
+            useCustomScrollbar && React.createElement(Scrollbar, null, children),
+            !useCustomScrollbar && children);
+        if (isCollapsible) {
+            body =
+                React.createElement(Collapsable, { show: expandState.value }, body);
+        }
         return (React.createElement("div", __assign({}, domProps, { className: className }),
             (icon || title) &&
                 React.createElement("div", { className: "card-header" },
-                    icon && React.createElement("i", { className: Utils.getFontAwesomeClass(icon) }),
-                    React.createElement("span", null, title),
+                    React.createElement("div", { className: "card-header-title" },
+                        icon && React.createElement("i", { className: Utils.getFontAwesomeClass(icon) }),
+                        React.createElement("span", null, title)),
                     headerElements && React.createElement("div", { className: "card-header-right-section" }, headerElements)),
-            React.createElement("div", { className: "card-body" },
-                useCustomScrollbar && React.createElement(Scrollbar, null, children),
-                !useCustomScrollbar && children)));
+            body));
     };
     Card = __decorate([
         observer

package/dist/ReactComponents/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/ReactComponents/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAiBhD;IAAkC,wBAA6D;IAA/F;;IAwBA,CAAC;IAvBG,qBAAM,GAAN;QACI,IAAM,eAAuF,EAArF,cAAI,EAAE,gBAAK,EAAE,sBAAQ,EAAE,kCAAc,EAAE,0CAAkB,EAAE,4FAA0B,CAAC;QAE9F,IAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;QAE5E,OAAO,CACH,wCAAS,QAAQ,IAAE,SAAS,EAAE,SAAS;YAElC,CAAC,IAAI,IAAI,KAAK,CAAC;gBAChB,6BAAK,SAAS,EAAC,aAAa;oBACvB,IAAI,IAAI,2BAAG,SAAS,EAAE,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,GAAI;oBAC1D,kCAAO,KAAK,CAAQ;oBAEnB,cAAc,IAAI,6BAAK,SAAS,EAAC,2BAA2B,IAAE,cAAc,CAAO,CAClF;YAEN,6BAAK,SAAS,EAAC,WAAW;gBACrB,kBAAkB,IAAI,oBAAC,SAAS,QAAE,QAAQ,CAAa;gBACvD,CAAC,kBAAkB,IAAI,QAAQ,CAC9B,CACJ,CACT,CAAA;IACL,CAAC;IAvBgB,IAAI;QADxB,QAAQ;OACY,IAAI,CAwBxB;IAAD,WAAC;CAAA,AAxBD,CAAkC,KAAK,CAAC,SAAS,GAwBhD;eAxBoB,IAAI"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/ReactComponents/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,WAAW,MAAM,eAAe,CAAC;AA0BxC;IAAkC,wBAA6D;IAA/F;QAAA,qEAsDC;QApDW,iBAAW,GAAG,IAAI,KAAK,CAAC,eAAe,CAAC,KAAI,CAAC,KAAK,CAAC,kBAAkB,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC;;IAoDzI,CAAC;IAlDG,qBAAM,GAAN;QACI,IAAI,eAAoI,EAAlI,cAAI,EAAE,gBAAK,EAAE,sBAAQ,EAAE,kCAAc,EAAE,0CAAkB,EAAE,4BAAW,EAAE,0CAAkB,EAAE,0BAAU,EAAE,+IAA0B,CAAC;QAEzI,IAAI,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;QAE1E,IAAM,aAAa,GAAG,WAAW,IAAI,UAAU,KAAK,SAAS,IAAI,kBAAkB,KAAK,SAAS,CAAC;QAClG,IAAM,WAAW,IAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,IAAI,CAAC,WAAW,CAAA,CAAC;QAEnD,IAAI,aAAa,EAAE;YACf,IAAM,eAAe,GAAG,2BAAG,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,KAAK,GAAG,CAAC,WAAW,CAAC,KAAK,EAAtC,CAAsC,EAAE,SAAS,EAAE,8CAA2C,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAE,GAAI,CAAA;YAC/K,IAAI,cAAc,EAAE;gBAChB,cAAc,GAAG;oBAAG,cAAc;oBAAE,eAAe,CAAI,CAAA;aAC1D;iBAAM;gBACH,cAAc,GAAG,eAAe,CAAC;aACpC;YACD,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE;gBACpB,SAAS,IAAI,YAAY,CAAA;aAC5B;SACJ;QAED,IAAI,IAAI,GACJ,6BAAK,SAAS,EAAC,WAAW;YACrB,kBAAkB,IAAI,oBAAC,SAAS,QAAE,QAAQ,CAAa;YACvD,CAAC,kBAAkB,IAAI,QAAQ,CAC9B,CAAA;QAEV,IAAI,aAAa,EAAE;YACf,IAAI;gBACJ,oBAAC,WAAW,IAAC,IAAI,EAAE,WAAW,CAAC,KAAK,IAC/B,IAAI,CACK,CAAA;SACjB;QAED,OAAO,CACH,wCAAS,QAAQ,IAAE,SAAS,EAAE,SAAS;YAElC,CAAC,IAAI,IAAI,KAAK,CAAC;gBAChB,6BAAK,SAAS,EAAC,aAAa;oBACxB,6BAAK,SAAS,EAAC,mBAAmB;wBAC7B,IAAI,IAAI,2BAAG,SAAS,EAAE,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,GAAI;wBAC1D,kCAAO,KAAK,CAAQ,CAClB;oBAEL,cAAc,IAAI,6BAAK,SAAS,EAAC,2BAA2B,IAAE,cAAc,CAAO,CAClF;YAEL,IAAI,CACH,CACT,CAAA;IACL,CAAC;IArDgB,IAAI;QADxB,QAAQ;OACY,IAAI,CAsDxB;IAAD,WAAC;CAAA,AAtDD,CAAkC,KAAK,CAAC,SAAS,GAsDhD;eAtDoB,IAAI"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "0.10.30",
+  "version": "0.10.31",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/styles/Card.scss

@@ -0,0 +1,24 @@
+.neo-card.card {
+    .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .card-header-title i {
+            margin-right: 10px;
+        }
+
+        .card-header-right-section {
+            display: inline-flex;
+            align-items: center;
+            margin: -10px 0;
+
+            .card-expand-indicator {
+                cursor: pointer;
+                margin-left: 0.5rem;
+                padding-top: 0.5rem;
+                padding-bottom: 0.5rem;
+            }
+        }
+    }
+}

package/styles/Neo.scss

@@ -1,4 +1,5 @@
 @import './Button.scss';
+@import './Card.scss';
 @import './ColorPicker.scss';
 @import './ContextMenu.scss';
 @import './DatePicker.scss';