@artistry/react - npm Package Compare versions

Comparing version 0.6.0 to 0.6.1

dist/scripts/components/CardRow.js

@@ -5,11 +5,12 @@ "use strict";
 const Align_1 = require("../util/Align");
+const ClassNames_1 = require("../util/ClassNames");
 class CardRow extends React.Component {
     render() {
         let { id, className, align } = this.props;
-        let classNames = className ? [className] : [];
-        classNames.push('card-row');
+        let classNames = new ClassNames_1.default(className);
+        classNames.add('card-row');
         if (align) {
             Align_1.alignClass(align, classNames);
         }
-        return (React.createElement("div", { className: classNames.join(' '), id: id }, this.props.children));
+        return (React.createElement("div", { className: classNames.toString(), id: id }, this.props.children));
     }
@@ -16,0 +17,0 @@ }

dist/scripts/components/Cell.js

@@ -5,14 +5,15 @@ "use strict";
 const Align_1 = require("../util/Align");
+const ClassNames_1 = require("../util/ClassNames");
 class Cell extends React.Component {
     render() {
         let { id, className, columns, offset, align, width, leftMargin } = this.props;
-        let classNames = className ? [className] : [];
+        let classNames = new ClassNames_1.default(className);
         if (columns) {
-            classNames.push('col-' + columns);
+            classNames.add('col-' + columns);
         }
         else {
-            classNames.push('col');
+            classNames.add('col');
         }
         if (offset) {
-            classNames.push('offset-' + offset);
+            classNames.add('offset-' + offset);
         }
@@ -39,5 +40,5 @@ if (align) {
         if (fixed) {
-            classNames.push('col-fixed');
+            classNames.add('col-fixed');
         }
-        return React.createElement("div", { className: classNames.join(' '), id: id, style: style }, this.props.children);
+        return React.createElement("div", { className: classNames.toString(), id: id, style: style }, this.props.children);
     }
@@ -44,0 +45,0 @@ }

dist/scripts/components/Form.d.ts

@@ -7,2 +7,3 @@ import * as React from 'react';
     locked?: boolean;
+    nonForm?: boolean;
     onEnter?: (event: KeyboardEvent) => any;
@@ -9,0 +10,0 @@ onEscape?: (event: KeyboardEvent) => any;

dist/scripts/components/Form.js

@@ -27,3 +27,3 @@ "use strict";
     render() {
-        let _a = this.props, { id, className, screenSize, lockable, locked, onEnter, onEscape } = _a, props = __rest(_a, ["id", "className", "screenSize", "lockable", "locked", "onEnter", "onEscape"]);
+        let _a = this.props, { id, className, screenSize, lockable, locked, nonForm, onEnter, onEscape } = _a, props = __rest(_a, ["id", "className", "screenSize", "lockable", "locked", "nonForm", "onEnter", "onEscape"]);
         let classNames = className ? [className] : [];
@@ -52,7 +52,16 @@ classNames.push('form');
         let onKeyDown = (onEnter || onEscape) ? this.onKeyDown.bind(this) : undefined;
-        return (React.createElement("form", Object.assign({ className: classNames.join(' '), onKeyDown: onKeyDown }, props),
-            lockable ?
-                React.createElement("div", { className: "form-lock-screen" }) :
-                null,
-            this.props.children));
+        if (nonForm) {
+            return (React.createElement("div", Object.assign({ id: id, className: classNames.join(' '), onKeyDown: onKeyDown }, props),
+                lockable ?
+                    React.createElement("div", { className: "form-lock-screen" }) :
+                    null,
+                this.props.children));
+        }
+        else {
+            return (React.createElement("form", Object.assign({ id: id, className: classNames.join(' '), onKeyDown: onKeyDown }, props),
+                lockable ?
+                    React.createElement("div", { className: "form-lock-screen" }) :
+                    null,
+                this.props.children));
+        }
     }
@@ -59,0 +68,0 @@ }

dist/scripts/components/FormGroup.d.ts

 import * as React from 'react';
+import { AlignType } from '../util/Align';
 import { FormTextTheme } from './FormText';
@@ -8,2 +9,3 @@ export interface IFormGroupProps {
     text?: any;
+    textAlign?: AlignType;
     theme?: FormTextTheme;
@@ -10,0 +12,0 @@ nonLabel?: boolean;

dist/scripts/components/FormGroup.js

@@ -5,3 +5,3 @@ "use strict";
 const ClassNames_1 = require("../util/ClassNames");
-const ArtistryReact_1 = require("../modules/ArtistryReact");
+const FormText_1 = require("./FormText");
 class FormGroup extends React.Component {
@@ -31,3 +31,3 @@ render() {
             this.props.text ?
-                React.createElement(ArtistryReact_1.FormText, { theme: this.props.theme }, this.props.text) :
+                React.createElement(FormText_1.default, { theme: this.props.theme, align: this.props.textAlign }, this.props.text) :
                 null));
@@ -34,0 +34,0 @@ }

dist/scripts/components/FormText.d.ts

 import * as React from 'react';
+import { AlignType } from '../util/Align';
 export declare type FormTextTheme = 'default' | 'success' | 'info' | 'warning' | 'danger';
@@ -8,2 +9,3 @@ export interface IFormTextProps {
     theme?: FormTextTheme;
+    align?: AlignType;
 }
@@ -10,0 +12,0 @@ export default class FormText extends React.Component<IFormTextProps, any> {

dist/scripts/components/FormText.js

@@ -5,5 +5,6 @@ "use strict";
 const ClassNames_1 = require("../util/ClassNames");
+const Align_1 = require("../util/Align");
 class FormText extends React.Component {
     render() {
-        let { id, className, fill, theme } = this.props;
+        let { id, className, fill, theme, align } = this.props;
         let classNames = new ClassNames_1.default(className);
@@ -14,2 +15,5 @@ classNames.add('form-text');
         }
+        if (align) {
+            Align_1.alignClass(align, classNames);
+        }
         let _theme;
@@ -16,0 +20,0 @@ switch (theme) {

dist/scripts/components/Table.d.ts

 import * as React from 'react';
 export interface IColumn<T> {
-    property?: string;
+    property?: keyof T;
     header?: string | (() => any);
@@ -8,2 +8,3 @@ footer?: string | (() => any);
     hidden?: boolean;
+    action?: boolean;
 }
@@ -18,3 +19,8 @@ export interface ITableProps<T> {
     template?: (item: T, index?: number) => any;
+    templateTop?: any | (() => any);
+    templateBottom?: any | (() => any);
     list?: boolean;
+    striped?: boolean;
+    hoverable?: boolean;
+    form?: boolean;
 }
@@ -21,0 +27,0 @@ export default class Table<T> extends React.Component<ITableProps<T>, any> {

dist/scripts/components/Table.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
+const ClassNames_1 = require("../util/ClassNames");
 class Table extends React.Component {
     render() {
-        let { className, id, data, headers, columns, template } = this.props;
-        let classNames = className ? [className] : [];
-        classNames.push('table');
-        let renderedTitles = headers || (columns ?
-            columns.map(column => {
-                if (typeof column.header === 'function') {
-                    return column.header();
-                }
-                else {
-                    return column.header;
-                }
-            }) :
-            undefined);
-        let renderedBody;
-        if (template) {
-            renderedBody = data.map(item => template(item));
+        let { className, id, data, headers, columns, template, templateTop, templateBottom, striped, hoverable, form } = this.props;
+        let classNames = new ClassNames_1.default(className);
+        classNames.add('table');
+        classNames.addTest('table-striped', striped);
+        classNames.addTest('table-hoverable', hoverable);
+        classNames.addTest('table-form', form);
+        let renderedTitles = undefined;
+        if (headers) {
+            renderedTitles = headers.map((header, index) => {
+                return (React.createElement("th", { key: index }, header));
+            });
         }
         else if (columns) {
-            renderedBody = data.map((item, index) => (React.createElement("tr", { key: index }, columns.map((column, index) => {
-                if (column.template) {
-                    return column.template(item);
-                }
-                else if (column.property) {
-                    return React.createElement("td", { key: 'td-' + index }, item[column.property]);
-                }
-                else {
-                    return React.createElement("td", { key: 'td-' + index });
-                }
-            }))));
+            renderedTitles = columns.map((column, index) => {
+                return (React.createElement("th", { key: index, className: column.action ? 'action-column' : undefined }, typeof column.header === 'function' ?
+                    column.header() :
+                    column.header));
+            });
         }
-        else {
-            renderedBody = data.map((item, index) => (React.createElement("tr", { key: index }, Object.values(item).map((value, index) => React.createElement("td", { key: index }, value)))));
+        let renderedBody;
+        if (data) {
+            if (template) {
+                renderedBody = data.map((item, index) => template(item, index));
+            }
+            else if (columns) {
+                renderedBody = data.map((item, index) => (React.createElement("tr", { key: index }, columns.map((column, index) => {
+                    if (column.template) {
+                        return column.template(item);
+                    }
+                    else if (column.property) {
+                        return React.createElement("td", { key: 'td-' + index }, item[column.property]);
+                    }
+                    else {
+                        return React.createElement("td", { key: 'td-' + index });
+                    }
+                }))));
+            }
+            else {
+                renderedBody = data.map((item, index) => (React.createElement("tr", { key: index }, Object.values(item).map((value, index) => React.createElement("td", { key: index }, value)))));
+            }
         }
-        return (React.createElement("table", { className: classNames.join(' '), id: id },
+        return (React.createElement("table", { className: classNames.toString(), id: id },
             renderedTitles ?
                 React.createElement("thead", null,
-                    React.createElement("tr", null, renderedTitles.map((title, index) => React.createElement("th", { key: index }, title))))
+                    React.createElement("tr", null, renderedTitles))
                 : undefined,
-            React.createElement("tbody", { className: this.props.list ? 'list' : '' }, renderedBody),
+            React.createElement("tbody", { className: this.props.list ? 'list' : '' },
+                typeof templateTop === 'function' ? templateTop() : templateTop,
+                renderedBody,
+                typeof templateBottom === 'function' ? templateBottom() : templateBottom),
             React.createElement("tfoot", null,
@@ -46,0 +58,0 @@ React.createElement("tr", null))));

dist/scripts/util/Align.d.ts

@@ -0,2 +1,3 @@
+import { ClassNames } from "../modules/ArtistryReact";
 export declare type AlignType = 'start' | 'end' | 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';
-export declare function alignClass(align: AlignType, classNames: string[]): void;
+export declare function alignClass(align: AlignType, classNames: ClassNames): void;

dist/scripts/util/Align.js

@@ -6,24 +6,24 @@ "use strict";
         case 'start':
-            classNames.push('align-start');
+            classNames.add('align-start');
             break;
         case 'end':
-            classNames.push('align-end');
+            classNames.add('align-end');
             break;
         case 'left':
-            classNames.push('align-left');
+            classNames.add('align-left');
             break;
         case 'right':
-            classNames.push('align-right');
+            classNames.add('align-right');
             break;
         case 'center':
-            classNames.push('align-center');
+            classNames.add('align-center');
             break;
         case 'justify':
-            classNames.push('align-justify');
+            classNames.add('align-justify');
             break;
         case 'initial':
-            classNames.push('align-initial');
+            classNames.add('align-initial');
             break;
         case 'inherit':
-            classNames.push('align-inherit');
+            classNames.add('align-inherit');
             break;
@@ -30,0 +30,0 @@ }

package.json

 {
   "name": "@artistry/react",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "A powerful component library for React",
@@ -28,3 +28,3 @@ "repository": "https://www.github.com/sjohnsonaz/artistry-react.git",
   "peerDependencies": {
-    "artistry": "^0.9.0",
+    "artistry": "^0.9.1",
     "react": "16.11.0",
@@ -40,3 +40,3 @@ "react-dom": "16.11.0"
     "@types/react-dom": "16.9.2",
-    "artistry": "^0.9.0",
+    "artistry": "^0.9.1",
     "autoprefixer": "9.7.4",
@@ -43,0 +43,0 @@ "chai": "4.2.0",

No alert changes

Improved metrics

Total package byte prevSize

246408

increased by0.75%

Lines of code

6111

increased by0.64%

No dependency changes