react-matrix-tree - npm Package Compare versions

Comparing version 1.0.9 to 1.1.0

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 = {
-    data: Array<Arrayvalues>;
-    isMobile: boolean;
-    color: string;
-};
+import { Props } from '../types';
 declare const Tree: ({ data, isMobile, color }: Props) => JSX.Element;
 export default Tree;

dist/cjs/components/App.js

@@ -5,47 +5,8 @@ "use strict";
 var react_1 = tslib_1.__importDefault(require("react"));
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var BottomArrow = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  border-bottom: 5px solid ", ";\n"], ["\n  border-bottom: 5px solid ", ";\n"])), function (props) { return props.color; });
-var BottomArrowDownContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = 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_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  content: '';\n  width: 0;\n  height: 0;\n  margin-left: -19px;\n  border-top: 15px solid ", ";\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: ", ";\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 ", ";\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: ", ";\n    margin-right: -2px;\n    margin-bottom: 14px;\n    position: absolute;\n    bottom: 100%;\n    right: 50%;\n  }\n"])), function (props) { return props.color; }, function (props) { return props.color; });
-var TopArrowUp = styled_components_1.default.div(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  content: '';\n  width: 0;\n  height: 0;\n  border-bottom: 15px solid ", ";\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: ", ";\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 ", ";\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: ", ";\n    margin-right: -3px;\n    margin-top: 14px;\n    position: absolute;\n    top: 100%;\n    right: 50%;\n  }\n"])), function (props) { return props.color; }, function (props) { return props.color; });
-var Tooltiptype;
-(function (Tooltiptype) {
-    Tooltiptype[Tooltiptype["HTML"] = 0] = "HTML";
-    Tooltiptype[Tooltiptype["TEXT"] = 1] = "TEXT";
-})(Tooltiptype || (Tooltiptype = {}));
+var TreeComponent_1 = require("./TreeComponent");
 var Tree = function (_a) {
     var data = _a.data, isMobile = _a.isMobile, color = _a.color;
-    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, { color: color })),
-                        react_1.default.createElement(BottomArrow, { color: color }),
-                        react_1.default.createElement(BottomArrowDownContainer, null, e.data.map(function (e1) {
-                            return react_1.default.createElement(BottomArrowDown, { color: color, key: e1.title });
-                        }))),
-                    react_1.default.createElement(GetTree, { childrens: e.data, level: level + 1, ismobileview: ismobileview })))))));
-        })));
-    };
-    return react_1.default.createElement(GetTree, { childrens: data, level: 1, ismobileview: isMobile !== null && isMobile !== void 0 ? isMobile : false });
+    return react_1.default.createElement(TreeComponent_1.GetTree, { color: color, childrens: data, level: 1, ismobileview: isMobile !== null && isMobile !== void 0 ? isMobile : false });
 };
 exports.default = Tree;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 //# sourceMappingURL=App.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 = {
-    data: Array<Arrayvalues>;
-    isMobile: boolean;
-    color: string;
-};
+import { Props } from '../types';
 declare const Tree: ({ data, isMobile, color }: Props) => JSX.Element;
 export default Tree;

dist/esm/components/App.js

@@ -1,48 +0,8 @@
-import { __makeTemplateObject } from "tslib";
 import React from 'react';
-import styled from 'styled-components';
-var BottomArrow = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom: 5px solid ", ";\n"], ["\n  border-bottom: 5px solid ", ";\n"])), function (props) { return props.color; });
-var BottomArrowDownContainer = styled.div(templateObject_2 || (templateObject_2 = __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_3 || (templateObject_3 = __makeTemplateObject(["\n  content: '';\n  width: 0;\n  height: 0;\n  margin-left: -19px;\n  border-top: 15px solid ", ";\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: ", ";\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 ", ";\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: ", ";\n    margin-right: -2px;\n    margin-bottom: 14px;\n    position: absolute;\n    bottom: 100%;\n    right: 50%;\n  }\n"])), function (props) { return props.color; }, function (props) { return props.color; });
-var TopArrowUp = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  content: '';\n  width: 0;\n  height: 0;\n  border-bottom: 15px solid ", ";\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: ", ";\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 ", ";\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: ", ";\n    margin-right: -3px;\n    margin-top: 14px;\n    position: absolute;\n    top: 100%;\n    right: 50%;\n  }\n"])), function (props) { return props.color; }, function (props) { return props.color; });
-var Tooltiptype;
-(function (Tooltiptype) {
-    Tooltiptype[Tooltiptype["HTML"] = 0] = "HTML";
-    Tooltiptype[Tooltiptype["TEXT"] = 1] = "TEXT";
-})(Tooltiptype || (Tooltiptype = {}));
+import { GetTree } from './TreeComponent';
 var Tree = function (_a) {
     var data = _a.data, isMobile = _a.isMobile, color = _a.color;
-    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, { color: color })),
-                        React.createElement(BottomArrow, { color: color }),
-                        React.createElement(BottomArrowDownContainer, null, e.data.map(function (e1) {
-                            return React.createElement(BottomArrowDown, { color: color, key: e1.title });
-                        }))),
-                    React.createElement(GetTree, { childrens: e.data, level: level + 1, ismobileview: ismobileview })))))));
-        })));
-    };
-    return React.createElement(GetTree, { childrens: data, level: 1, ismobileview: isMobile !== null && isMobile !== void 0 ? isMobile : false });
+    return React.createElement(GetTree, { color: color, childrens: data, level: 1, ismobileview: isMobile !== null && isMobile !== void 0 ? isMobile : false });
 };
 export default Tree;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 //# sourceMappingURL=App.js.map

package.json

 {
   "name": "react-matrix-tree",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "",
@@ -23,3 +23,6 @@ "main": "./dist/cjs/index.js",
     "binary",
-    "react tree view"
+    "react tree view",
+    "tree",
+    "chart",
+    "matrix tree"
   ],
@@ -33,2 +36,3 @@ "repository": {
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
@@ -35,0 +39,0 @@ "@types/jest": "^29.5.1",

README.md

@@ -42,2 +42,22 @@ # React-Matrix-Tree
 
+## The properties
+
+Properties used to customise the rendering:
+
+| Name     | Type    | Description                       |
+| -------- | ------- | --------------------------------- |
+| color    | String  | Arrow color of parent to child    |
+| data     | Array   | used to renders a tree view       |
+| isMobile | Boolean | Used you to manage responsiveness |
+
+## data Properties
+
+| Name        | Type   | Description                                                                                                                                           |
+| ----------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| title       | String | Tree title                                                                                                                                            |
+| imageSource | String | _optional_ display's a image                                                                                                                          |
+| tooltip     | String | _optional_ Displays a given content when user hovers on title                                                                                         |
+| onClick     | func   | _optional_ Calls the given function when user clicks on title and pass two parameters, first one is click event and second is the object of tree prop |
+| data        | Array  | _optional_ Child's array                                                                                                                              |
+
 ## Demo
@@ -44,0 +64,0 @@

New alerts

AI-detected possible typosquat

Supply chain risk

AI has identified this package as a potential typosquat of a more popular package. This suggests that the package may be intentionally mimicking another package's name, description, or other metadata.

Found 1 instance in 1 package

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

31379

42.72%

Number of package files

39

160%

Lines of code

306

88.89%

Number of lines in readme file

73

37.74%

Worsened metrics

Dev dependency count

23

4.55%

Number of medium supply chain risk alerts

2

Infinity%

No dependency changes