react-matrix-tree - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/cjs/components/App.d.ts

 /// <reference types="react" />
+declare enum Tooltiptype {
+    HTML = 0,
+    TEXT = 1
+}
+type Arrayvalues = {
+    imageSource?: string;
+    title: string;
+    tooltip?: string;
+    tooltiptype?: Tooltiptype;
+    onClick?: Event;
+    data?: Array<Arrayvalues>;
+};
 type Props = {
-    value?: number;
+    data: Array<Arrayvalues>;
+    isMobile: boolean;
 };
-declare const MyCounter: ({ value }: Props) => JSX.Element;
-export default MyCounter;
+declare const Tree: ({ data, isMobile }: Props) => JSX.Element;
+export default Tree;

dist/cjs/components/App.js

@@ -5,19 +5,55 @@ "use strict";
 var react_1 = tslib_1.__importStar(require("react"));
-var MyCounter = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? 0 : _b;
-    var _c = (0, react_1.useState)(value), counter = _c[0], setCounter = _c[1];
-    var onMinus = function () {
-        setCounter(function (prev) { return prev - 1; });
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+//
+var BottomArrow = (0, styled_components_1.default)('div')({
+    borderBottom: "5px solid ".concat(function (props) { return props.color; }),
+});
+var BottomArrowDownContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex,\n  justify-content: space-between,\n  &:last-child{\n    margin-right: -19px;\n    margin-left: auto;\n  }\n"], ["\n  display: flex,\n  justify-content: space-between,\n  &:last-child{\n    margin-right: -19px;\n    margin-left: auto;\n  }\n"])));
+var TopArrowUpContainer = (0, styled_components_1.default)('div')({
+    display: 'flex',
+    justifyContent: 'center',
+});
+var BottomArrowDown = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  content: '';\n  width: 0;\n  height: 0;\n  margin-left: -19px;\n  border-top: 15px solid #6a0136;\n  border-left: 20px solid transparent;\n  border-right: 20px solid transparent;\n  margin-top: 20px;\n  position: relative;\n  &:before {\n    content: '';\n    width: 4px;\n    height: 25px;\n    background: #6a0136;\n    margin-right: -2px;\n    margin-bottom: 14px;\n    position: absolute;\n    bottom: 100%;\n    right: 50%;\n  }\n"], ["\n  content: '';\n  width: 0;\n  height: 0;\n  margin-left: -19px;\n  border-top: 15px solid #6a0136;\n  border-left: 20px solid transparent;\n  border-right: 20px solid transparent;\n  margin-top: 20px;\n  position: relative;\n  &:before {\n    content: '';\n    width: 4px;\n    height: 25px;\n    background: #6a0136;\n    margin-right: -2px;\n    margin-bottom: 14px;\n    position: absolute;\n    bottom: 100%;\n    right: 50%;\n  }\n"])));
+var TopArrowUp = styled_components_1.default.div(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  content: '';\n  width: 0;\n  height: 0;\n  border-bottom: 15px solid #6a0136;\n  border-left: 20px solid transparent;\n  border-right: 20px solid transparent;\n  margin-bottom: 20px;\n  position: relative;\n  &:before {\n    content: '';\n    width: 4px;\n    height: 25px;\n    background: #6a0136;\n    margin-right: -3px;\n    margin-top: 14px;\n    position: absolute;\n    top: 100%;\n    right: 50%;\n  }\n"], ["\n  content: '';\n  width: 0;\n  height: 0;\n  border-bottom: 15px solid #6a0136;\n  border-left: 20px solid transparent;\n  border-right: 20px solid transparent;\n  margin-bottom: 20px;\n  position: relative;\n  &:before {\n    content: '';\n    width: 4px;\n    height: 25px;\n    background: #6a0136;\n    margin-right: -3px;\n    margin-top: 14px;\n    position: absolute;\n    top: 100%;\n    right: 50%;\n  }\n"])));
+var Tooltiptype;
+(function (Tooltiptype) {
+    Tooltiptype[Tooltiptype["HTML"] = 0] = "HTML";
+    Tooltiptype[Tooltiptype["TEXT"] = 1] = "TEXT";
+})(Tooltiptype || (Tooltiptype = {}));
+var Tree = function (_a) {
+    var data = _a.data, isMobile = _a.isMobile;
+    (0, react_1.useEffect)(function () {
+        if (!data) {
+            throw Error('Data field is undefined, need array value to render a Tree component');
+        }
+    }, [data]);
+    var GetTree = function (_a) {
+        var childrens = _a.childrens, level = _a.level, ismobileview = _a.ismobileview;
+        return (react_1.default.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', textAlign: 'center' } }, childrens.map(function (e, i) {
+            return (react_1.default.createElement("div", { key: i, id: level + e.title, style: { width: "".concat(100 / childrens.length, "%") } },
+                e.imageSource && react_1.default.createElement("img", { src: e.imageSource, style: { height: 40, width: 40 } }),
+                react_1.default.createElement("h5", { title: e.tooltip },
+                    e.title,
+                    " ",
+                    level),
+                ismobileview && childrens.length > 2 ? (react_1.default.createElement(react_1.default.Fragment, null)) : (react_1.default.createElement(react_1.default.Fragment, null, e.data && e.data.length > 0 && level < 4 && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("div", { style: {
+                            width: e.data.length > 0 ? "".concat(100 - 100 / e.data.length, "%") : 0,
+                            marginLeft: 'auto',
+                            marginRight: 'auto',
+                            marginBottom: 10,
+                        } },
+                        react_1.default.createElement(TopArrowUpContainer, null,
+                            react_1.default.createElement(TopArrowUp, null)),
+                        react_1.default.createElement(BottomArrow, { color: '#6a0136' }),
+                        react_1.default.createElement(BottomArrowDownContainer, null, e.data.map(function (e1) {
+                            return react_1.default.createElement(BottomArrowDown, { key: e1.title });
+                        }))),
+                    react_1.default.createElement(GetTree, { childrens: e.data, level: level + 1, ismobileview: ismobileview })))))));
+        })));
     };
-    var onPlus = function () {
-        setCounter(function (prev) { return prev + 1; });
-    };
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("h1", null,
-            "Counter: ",
-            counter),
-        react_1.default.createElement("button", { onClick: onMinus }, "-"),
-        react_1.default.createElement("button", { onClick: onPlus }, "+")));
+    return react_1.default.createElement(GetTree, { childrens: data, level: 1, ismobileview: isMobile !== null && isMobile !== void 0 ? isMobile : false });
 };
-exports.default = MyCounter;
+exports.default = Tree;
+var templateObject_1, templateObject_2, templateObject_3;
 //# sourceMappingURL=App.js.map

dist/cjs/index.d.ts

@@ -1,2 +0,2 @@
-import MyCounter from './components/App';
-export { MyCounter };
+import Tree from './components/App';
+export { Tree };

dist/cjs/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MyCounter = void 0;
+exports.Tree = void 0;
 var tslib_1 = require("tslib");
 var App_1 = tslib_1.__importDefault(require("./components/App"));
-exports.MyCounter = App_1.default;
+exports.Tree = App_1.default;
 //# sourceMappingURL=index.js.map

dist/esm/components/App.d.ts

 /// <reference types="react" />
+declare enum Tooltiptype {
+    HTML = 0,
+    TEXT = 1
+}
+type Arrayvalues = {
+    imageSource?: string;
+    title: string;
+    tooltip?: string;
+    tooltiptype?: Tooltiptype;
+    onClick?: Event;
+    data?: Array<Arrayvalues>;
+};
 type Props = {
-    value?: number;
+    data: Array<Arrayvalues>;
+    isMobile: boolean;
 };
-declare const MyCounter: ({ value }: Props) => JSX.Element;
-export default MyCounter;
+declare const Tree: ({ data, isMobile }: Props) => JSX.Element;
+export default Tree;

dist/esm/components/App.js

@@ -1,19 +0,56 @@
-import React, { useState } from 'react';
-var MyCounter = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? 0 : _b;
-    var _c = useState(value), counter = _c[0], setCounter = _c[1];
-    var onMinus = function () {
-        setCounter(function (prev) { return prev - 1; });
+import { __makeTemplateObject } from "tslib";
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+//
+var BottomArrow = styled('div')({
+    borderBottom: "5px solid ".concat(function (props) { return props.color; }),
+});
+var BottomArrowDownContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex,\n  justify-content: space-between,\n  &:last-child{\n    margin-right: -19px;\n    margin-left: auto;\n  }\n"], ["\n  display: flex,\n  justify-content: space-between,\n  &:last-child{\n    margin-right: -19px;\n    margin-left: auto;\n  }\n"])));
+var TopArrowUpContainer = styled('div')({
+    display: 'flex',
+    justifyContent: 'center',
+});
+var BottomArrowDown = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  content: '';\n  width: 0;\n  height: 0;\n  margin-left: -19px;\n  border-top: 15px solid #6a0136;\n  border-left: 20px solid transparent;\n  border-right: 20px solid transparent;\n  margin-top: 20px;\n  position: relative;\n  &:before {\n    content: '';\n    width: 4px;\n    height: 25px;\n    background: #6a0136;\n    margin-right: -2px;\n    margin-bottom: 14px;\n    position: absolute;\n    bottom: 100%;\n    right: 50%;\n  }\n"], ["\n  content: '';\n  width: 0;\n  height: 0;\n  margin-left: -19px;\n  border-top: 15px solid #6a0136;\n  border-left: 20px solid transparent;\n  border-right: 20px solid transparent;\n  margin-top: 20px;\n  position: relative;\n  &:before {\n    content: '';\n    width: 4px;\n    height: 25px;\n    background: #6a0136;\n    margin-right: -2px;\n    margin-bottom: 14px;\n    position: absolute;\n    bottom: 100%;\n    right: 50%;\n  }\n"])));
+var TopArrowUp = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  content: '';\n  width: 0;\n  height: 0;\n  border-bottom: 15px solid #6a0136;\n  border-left: 20px solid transparent;\n  border-right: 20px solid transparent;\n  margin-bottom: 20px;\n  position: relative;\n  &:before {\n    content: '';\n    width: 4px;\n    height: 25px;\n    background: #6a0136;\n    margin-right: -3px;\n    margin-top: 14px;\n    position: absolute;\n    top: 100%;\n    right: 50%;\n  }\n"], ["\n  content: '';\n  width: 0;\n  height: 0;\n  border-bottom: 15px solid #6a0136;\n  border-left: 20px solid transparent;\n  border-right: 20px solid transparent;\n  margin-bottom: 20px;\n  position: relative;\n  &:before {\n    content: '';\n    width: 4px;\n    height: 25px;\n    background: #6a0136;\n    margin-right: -3px;\n    margin-top: 14px;\n    position: absolute;\n    top: 100%;\n    right: 50%;\n  }\n"])));
+var Tooltiptype;
+(function (Tooltiptype) {
+    Tooltiptype[Tooltiptype["HTML"] = 0] = "HTML";
+    Tooltiptype[Tooltiptype["TEXT"] = 1] = "TEXT";
+})(Tooltiptype || (Tooltiptype = {}));
+var Tree = function (_a) {
+    var data = _a.data, isMobile = _a.isMobile;
+    useEffect(function () {
+        if (!data) {
+            throw Error('Data field is undefined, need array value to render a Tree component');
+        }
+    }, [data]);
+    var GetTree = function (_a) {
+        var childrens = _a.childrens, level = _a.level, ismobileview = _a.ismobileview;
+        return (React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', textAlign: 'center' } }, childrens.map(function (e, i) {
+            return (React.createElement("div", { key: i, id: level + e.title, style: { width: "".concat(100 / childrens.length, "%") } },
+                e.imageSource && React.createElement("img", { src: e.imageSource, style: { height: 40, width: 40 } }),
+                React.createElement("h5", { title: e.tooltip },
+                    e.title,
+                    " ",
+                    level),
+                ismobileview && childrens.length > 2 ? (React.createElement(React.Fragment, null)) : (React.createElement(React.Fragment, null, e.data && e.data.length > 0 && level < 4 && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { style: {
+                            width: e.data.length > 0 ? "".concat(100 - 100 / e.data.length, "%") : 0,
+                            marginLeft: 'auto',
+                            marginRight: 'auto',
+                            marginBottom: 10,
+                        } },
+                        React.createElement(TopArrowUpContainer, null,
+                            React.createElement(TopArrowUp, null)),
+                        React.createElement(BottomArrow, { color: '#6a0136' }),
+                        React.createElement(BottomArrowDownContainer, null, e.data.map(function (e1) {
+                            return React.createElement(BottomArrowDown, { key: e1.title });
+                        }))),
+                    React.createElement(GetTree, { childrens: e.data, level: level + 1, ismobileview: ismobileview })))))));
+        })));
     };
-    var onPlus = function () {
-        setCounter(function (prev) { return prev + 1; });
-    };
-    return (React.createElement("div", null,
-        React.createElement("h1", null,
-            "Counter: ",
-            counter),
-        React.createElement("button", { onClick: onMinus }, "-"),
-        React.createElement("button", { onClick: onPlus }, "+")));
+    return React.createElement(GetTree, { childrens: data, level: 1, ismobileview: isMobile !== null && isMobile !== void 0 ? isMobile : false });
 };
-export default MyCounter;
+export default Tree;
+var templateObject_1, templateObject_2, templateObject_3;
 //# sourceMappingURL=App.js.map

dist/esm/index.d.ts

@@ -1,2 +0,2 @@
-import MyCounter from './components/App';
-export { MyCounter };
+import Tree from './components/App';
+export { Tree };

dist/esm/index.js

@@ -1,3 +0,3 @@
-import MyCounter from './components/App';
-export { MyCounter };
+import Tree from './components/App';
+export { Tree };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-matrix-tree",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
@@ -35,4 +35,6 @@ "main": "./dist/cjs/index.js",
     "@types/react": "^18.0.37",
+    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
+    "css-loader": "^6.7.3",
     "eslint": "^8.38.0",
@@ -46,2 +48,3 @@ "eslint-config-prettier": "^8.8.0",
     "jest-environment-jsdom": "^29.5.0",
+    "jest-styled-components": "^7.1.1",
     "prettier": "^2.8.7",
@@ -51,3 +54,4 @@ "react": "^18.2.0",
     "ts-jest": "^29.1.0",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "typescript-plugin-css-modules": "^5.0.1"
   },
@@ -54,0 +58,0 @@ "peerDependencies": {

README.md

 # React-Matrix-Tree
 
 React-matrix-tree allows you to create tree view with different types of matrix.
+
+## Installation
+
+```
+$ npm install --save react-matrix-tree
+$ yarn add react-matrix-tree
+```
+
+## Features
+
+- Easy to set up for real, you can make it work in less than 1minute!
+- Super easy to customize
+- Can choose matrix type
+- Can display a html content as tooltip
+- Has `onClick` hooks. Can pass onclick event when user interact
+- Display information using `tooltip` When user hovers on.
+- You can display dynamic image using `imageSource`.
+- For Responsive design you have to pass a prop `isMobile`.
+- And much more !
+
+## The gist
+
+```jsx
+import React from 'react'
+
+import { Tree } from 'react-matrix-tree'
+
+function App() {
+  const [data, setData] = useState([{ title: 'Too Easy' }])
+
+  return (
+    <div>
+      <Tree data={data} isMobile={false} />
+    </div>
+  )
+}
+```
+
+## Demo
+
+[A demo is worth a thousand words](https://venkatmcajj.github.io/react-matrix-tree/example)
+
+## Contribute
+
+Show your ❤️ and support by giving a ⭐. Any suggestions are welcome!
+
+## License
+
+Licensed under MIT

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21340

increased by211.03%

Lines of code

175

increased by177.78%

Number of lines in readme file

53

increased by1225%

Worsened metrics

Dev dependency count

22

increased by22.22%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes