react-object-table-viewer - npm Package Compare versions

Comparing version 1.0.2 to 1.0.4

LICENSE

+The MIT License (MIT)
+
+ Copyright (c) 2021 jinkwon.lee
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.

CHANGELOG.md

@@ -1,3 +0,4 @@
-# v1.0.2
-- added layoutType
+# v1.0.3
+- added layout type
+- added keyStyle, valueStyle
 
@@ -4,0 +5,0 @@ # v1.0.1

out/cjs/ReactObjectTableViewer.d.ts

@@ -1,6 +0,12 @@
-import { FC } from 'react';
-interface PropTypes {
+import { CSSProperties, FC } from 'react';
+export declare type TableViewerLayoutType = 'vertical' | 'horizontal';
+export interface PropTypes {
     data?: Record<string, unknown>;
+    style?: CSSProperties;
+    keyStyle?: CSSProperties;
+    valueStyle?: CSSProperties;
+    className?: string;
+    layout?: TableViewerLayoutType;
 }
 declare const ReactObjectTableViewer: FC<PropTypes>;
 export default ReactObjectTableViewer;

out/cjs/ReactObjectTableViewer.js

 "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) {
@@ -8,20 +19,14 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 var ReactObjectTableViewer = function (props) {
-    return (react_1.default.createElement("table", { className: '' },
-        react_1.default.createElement("tbody", { style: {
-                userSelect: 'text',
-                cursor: 'text',
-            } }, Object.keys((props === null || props === void 0 ? void 0 : props.data) || {}).map(function (k, key) { return (react_1.default.createElement("tr", { key: key },
-            react_1.default.createElement("td", { style: {
-                    fontWeight: 'bold',
-                    marginRight: 10,
-                } }, k),
-            react_1.default.createElement("td", { style: {
-                    minWidth: '90px',
-                    paddingLeft: '10px',
-                    maxWidth: '150px',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap'
-                } }, "" + (props === null || props === void 0 ? void 0 : props.data[k])))); }))));
+    var opt = __assign({ layout: 'vertical' }, props);
+    var data = opt.data;
+    var keys = Object.keys(data || {}) || [];
+    return (react_1.default.createElement("table", { className: opt.className, style: __assign({}, opt.style) },
+        react_1.default.createElement("tbody", null,
+            opt.layout === 'vertical' && keys.map(function (k, key) { return (react_1.default.createElement("tr", { key: key },
+                react_1.default.createElement("td", { style: __assign({ fontWeight: 'bold', marginRight: 10 }, opt.keyStyle) }, k),
+                react_1.default.createElement("td", { style: __assign({ whiteSpace: 'nowrap' }, opt.valueStyle) }, "" + data[k]))); }),
+            opt.layout === 'horizontal' && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("tr", null, keys.map(function (k, key) { return (react_1.default.createElement("td", { key: key, style: __assign({ fontWeight: 'bold', marginRight: 10 }, opt.keyStyle) }, k)); })),
+                react_1.default.createElement("tr", null, keys.map(function (k, key) { return (react_1.default.createElement("td", { key: key, style: __assign({ whiteSpace: 'nowrap' }, opt.valueStyle) }, "" + data[k])); })))))));
 };
 exports.default = ReactObjectTableViewer;

out/esm/ReactObjectTableViewer.d.ts

@@ -1,6 +0,12 @@
-import { FC } from 'react';
-interface PropTypes {
+import { CSSProperties, FC } from 'react';
+export declare type TableViewerLayoutType = 'vertical' | 'horizontal';
+export interface PropTypes {
     data?: Record<string, unknown>;
+    style?: CSSProperties;
+    keyStyle?: CSSProperties;
+    valueStyle?: CSSProperties;
+    className?: string;
+    layout?: TableViewerLayoutType;
 }
 declare const ReactObjectTableViewer: FC<PropTypes>;
 export default ReactObjectTableViewer;

out/esm/ReactObjectTableViewer.js

@@ -0,21 +1,26 @@
+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);
+};
 import React from 'react';
 var ReactObjectTableViewer = function (props) {
-    return (React.createElement("table", { className: '' },
-        React.createElement("tbody", { style: {
-                userSelect: 'text',
-                cursor: 'text',
-            } }, Object.keys((props === null || props === void 0 ? void 0 : props.data) || {}).map(function (k, key) { return (React.createElement("tr", { key: key },
-            React.createElement("td", { style: {
-                    fontWeight: 'bold',
-                    marginRight: 10,
-                } }, k),
-            React.createElement("td", { style: {
-                    minWidth: '90px',
-                    paddingLeft: '10px',
-                    maxWidth: '150px',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap'
-                } }, "" + (props === null || props === void 0 ? void 0 : props.data[k])))); }))));
+    var opt = __assign({ layout: 'vertical' }, props);
+    var data = opt.data;
+    var keys = Object.keys(data || {}) || [];
+    return (React.createElement("table", { className: opt.className, style: __assign({}, opt.style) },
+        React.createElement("tbody", null,
+            opt.layout === 'vertical' && keys.map(function (k, key) { return (React.createElement("tr", { key: key },
+                React.createElement("td", { style: __assign({ fontWeight: 'bold', marginRight: 10 }, opt.keyStyle) }, k),
+                React.createElement("td", { style: __assign({ whiteSpace: 'nowrap' }, opt.valueStyle) }, "" + data[k]))); }),
+            opt.layout === 'horizontal' && (React.createElement(React.Fragment, null,
+                React.createElement("tr", null, keys.map(function (k, key) { return (React.createElement("td", { key: key, style: __assign({ fontWeight: 'bold', marginRight: 10 }, opt.keyStyle) }, k)); })),
+                React.createElement("tr", null, keys.map(function (k, key) { return (React.createElement("td", { key: key, style: __assign({ whiteSpace: 'nowrap' }, opt.valueStyle) }, "" + data[k])); })))))));
 };
 export default ReactObjectTableViewer;

package.json

 {
   "name": "react-object-table-viewer",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "react object table ui",
@@ -14,3 +14,3 @@ "main": "out/cjs",
     "build:esm": "tsc -b tsconfig.esm.json",
-    "build": "yarn run build:cjs && yarn run build:esm",
+    "build": "rm -rf out && yarn run build:cjs && yarn run build:esm",
     "deploy": "yarn run build && yarn run build:pages && gh-pages -d gh-pages",
@@ -24,4 +24,4 @@ "dev": "next",
   },
-  "author": "",
-  "license": "ISC",
+  "author": "jinkwon.lee",
+  "license": "MIT",
   "bugs": {
@@ -28,0 +28,0 @@ "url": "https://github.com/Jinkwon/react-object-table-viewer/issues"

tsconfig.cjs.json

@@ -7,3 +7,3 @@ {
     "target": "es5",
-    "outDir": "out/cjs",
+    "outDir": "./out/cjs",
     "jsx": "react",
@@ -10,0 +10,0 @@ "resolveJsonModule": false

tsconfig.json

@@ -17,3 +17,3 @@ {
     "moduleResolution": "node",
-    "outDir": "./out",
+    "outDir": ".next",
     "lib": [
@@ -20,0 +20,0 @@ "dom",

tsconfig.module.json

@@ -12,3 +12,3 @@ {
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react",
     "target": "es6",
@@ -18,15 +18,9 @@ "resolveJsonModule": true,
     "moduleResolution": "node",
-    "outDir": ".next",
-    "lib": [
-      "dom",
-      "esnext"
-    ],
-    "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true
+    "baseUrl": "./src",
+    "outDir": "./out",
+    "lib": ["dom", "esnext"]
   },
   "include": [
-    "**/*.ts",
-    "**/*.tsx"
+    "src/**/*.ts",
+    "src/**/*.tsx"
   ],
@@ -33,0 +27,0 @@ "exclude": [

Fixed alerts

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Improved metrics

Total package byte prevSize

15748

22.26%

Number of package files

26

4%

Lines of code

250

6.84%

Number of low maintenance alerts

0

-100%

No dependency changes