@toptal/picasso-tree-view 3.0.21 → 3.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-package/src/TreeView/PointLink/PointLink.d.ts.map +1 -1
- package/dist-package/src/TreeView/PointLink/PointLink.js +1 -5
- package/dist-package/src/TreeView/PointLink/PointLink.js.map +1 -1
- package/dist-package/src/TreeView/PointNode/TreeNodeAvatar.d.ts.map +1 -1
- package/dist-package/src/TreeView/PointNode/TreeNodeAvatar.js +4 -6
- package/dist-package/src/TreeView/PointNode/TreeNodeAvatar.js.map +1 -1
- package/dist-package/src/TreeView/TreeView.d.ts.map +1 -1
- package/dist-package/src/TreeView/TreeView.js +2 -6
- package/dist-package/src/TreeView/TreeView.js.map +1 -1
- package/package.json +1 -2
- package/src/TreeView/PointLink/PointLink.tsx +1 -7
- package/src/TreeView/PointNode/TreeNodeAvatar.tsx +5 -9
- package/src/TreeView/TreeView.tsx +2 -8
- package/dist-package/src/TreeView/PointLink/styles.d.ts +0 -4
- package/dist-package/src/TreeView/PointLink/styles.d.ts.map +0 -1
- package/dist-package/src/TreeView/PointLink/styles.js +0 -8
- package/dist-package/src/TreeView/PointLink/styles.js.map +0 -1
- package/dist-package/src/TreeView/PointNode/styles.d.ts +0 -4
- package/dist-package/src/TreeView/PointNode/styles.d.ts.map +0 -1
- package/dist-package/src/TreeView/PointNode/styles.js +0 -16
- package/dist-package/src/TreeView/PointNode/styles.js.map +0 -1
- package/dist-package/src/TreeView/styles.d.ts +0 -3
- package/dist-package/src/TreeView/styles.d.ts.map +0 -1
- package/dist-package/src/TreeView/styles.js +0 -12
- package/dist-package/src/TreeView/styles.js.map +0 -1
- package/src/TreeView/PointLink/styles.ts +0 -10
- package/src/TreeView/PointNode/styles.ts +0 -17
- package/src/TreeView/styles.ts +0 -13
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PointLink.d.ts","sourceRoot":"","sources":["../../../../src/TreeView/PointLink/PointLink.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"PointLink.d.ts","sourceRoot":"","sources":["../../../../src/TreeView/PointLink/PointLink.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAEhE,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,gBAAgB,CAAA;IACtB,SAAS,EAAE,cAAc,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;IACtB,gBAAgB,EAAE,MAAM,CAAA;CACzB;AAED,eAAO,MAAM,SAAS;YAAW,KAAK;;CA8BrC,CAAA;AAID,eAAe,SAAS,CAAA"}
|
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
import React, { useMemo } from 'react';
|
|
2
|
-
import { makeStyles } from '@material-ui/core/styles';
|
|
3
|
-
import styles from './styles';
|
|
4
|
-
const useStyles = makeStyles(styles, { name: 'PicassoPointLink' });
|
|
5
2
|
export const PointLink = (props) => {
|
|
6
3
|
const { link, direction, verticalMargin, horizontalMargin } = props;
|
|
7
|
-
const classes = useStyles();
|
|
8
4
|
const path = useMemo(() => {
|
|
9
5
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
10
6
|
const { source, target } = link;
|
|
@@ -30,7 +26,7 @@ export const PointLink = (props) => {
|
|
|
30
26
|
};
|
|
31
27
|
return svgPaths[direction];
|
|
32
28
|
}, [link, direction, verticalMargin, horizontalMargin]);
|
|
33
|
-
return React.createElement("path", { d: path, className:
|
|
29
|
+
return React.createElement("path", { d: path, className: 'fill-none stroke-gray-400' });
|
|
34
30
|
};
|
|
35
31
|
PointLink.displayName = 'PointLink';
|
|
36
32
|
export default PointLink;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PointLink.js","sourceRoot":"","sources":["../../../../src/TreeView/PointLink/PointLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"PointLink.js","sourceRoot":"","sources":["../../../../src/TreeView/PointLink/PointLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAWtC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAY,EAAE,EAAE;IACxC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAA;IACnE,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE;;QACxB,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;QAC/B,MAAM,aAAa,GAAG;YACpB,UAAU,EAAE,CAAA,MAAA,MAAM,CAAC,IAAI,0CAAE,MAAM,IAAG,CAAC,IAAI,CAAC;YACxC,QAAQ,EAAE,CAAA,MAAA,MAAM,CAAC,IAAI,0CAAE,MAAM,KAAI,CAAC;SACnC,CAAA;QACD,MAAM,aAAa,GAAG;YACpB,UAAU,EAAE,CAAA,MAAA,MAAM,CAAC,IAAI,0CAAE,KAAK,KAAI,CAAC;YACnC,QAAQ,EAAE,CAAA,MAAA,MAAM,CAAC,IAAI,0CAAE,KAAK,IAAG,CAAC,IAAI,CAAC;SACtC,CAAA;QACD,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,GAAG,aAAa,CAAC,SAAS,CAAC,CAAA;QACnD,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,GAAG,aAAa,CAAC,SAAS,CAAC,CAAA;QAEnD,MAAM,QAAQ,GAAG;YACf,UAAU,EAAE,IAAI,OAAO,KAAK,OAAO;WAC9B,OAAO,GAAG,gBAAgB,GAAG,CAAC;WAC9B,MAAM,CAAC,CAAC,GAAG,CAAC,MAAA,MAAA,MAAM,CAAC,IAAI,0CAAE,MAAM,mCAAI,CAAC,CAAC,GAAG,CAAC;WACzC,MAAM,CAAC,CAAC,EAAE;YACf,QAAQ,EAAE,IAAI,OAAO,KAAK,OAAO;WAC5B,OAAO,GAAG,cAAc,GAAG,CAAC;WAC5B,MAAM,CAAC,CAAC,GAAG,CAAC,MAAA,MAAA,MAAM,CAAC,IAAI,0CAAE,KAAK,mCAAI,CAAC,CAAC,GAAG,CAAC;WACxC,MAAM,CAAC,CAAC,EAAE;SAChB,CAAA;QAED,OAAO,QAAQ,CAAC,SAAS,CAAC,CAAA;IAC5B,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAEvD,OAAO,8BAAM,CAAC,EAAE,IAAI,EAAE,SAAS,EAAC,2BAA2B,GAAG,CAAA;AAChE,CAAC,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,eAAe,SAAS,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeNodeAvatar.d.ts","sourceRoot":"","sources":["../../../../src/TreeView/PointNode/TreeNodeAvatar.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"TreeNodeAvatar.d.ts","sourceRoot":"","sources":["../../../../src/TreeView/PointNode/TreeNodeAvatar.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAGrE,MAAM,WAAW,KAAM,SAAQ,aAAa;IAC1C,uDAAuD;IACvD,IAAI,EAAE,MAAM,CAAA;IACZ,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wCAAwC;IACxC,IAAI,CAAC,EAAE,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IACpE,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAChC;AAkCD,eAAO,MAAM,cAAc;YAAW,KAAK;;;;;;CA6B1C,CAAA"}
|
|
@@ -10,12 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import React from 'react';
|
|
13
|
-
import { makeStyles } from '@material-ui/core/styles';
|
|
14
13
|
import { getNameInitials } from '@toptal/picasso-utils';
|
|
15
|
-
import styles from './styles';
|
|
16
|
-
const useStyles = makeStyles(styles, {
|
|
17
|
-
name: 'PicassoTreeNodeAvatar',
|
|
18
|
-
});
|
|
19
14
|
const renderInitials = ({ src, name, classes }) => {
|
|
20
15
|
if (src || !name) {
|
|
21
16
|
return null;
|
|
@@ -33,8 +28,11 @@ const sizeValues = {
|
|
|
33
28
|
medium: '120',
|
|
34
29
|
large: '160',
|
|
35
30
|
};
|
|
31
|
+
const classes = {
|
|
32
|
+
shape: 'fill-gray-500',
|
|
33
|
+
text: 'text-[1em] uppercase fill-white [dominant-baseline:middle] [text-anchor:middle]',
|
|
34
|
+
};
|
|
36
35
|
export const TreeNodeAvatar = (props) => {
|
|
37
|
-
const classes = useStyles();
|
|
38
36
|
const { name, src, size = 'xxsmall', objectFit = 'contain' } = props, rest = __rest(props, ["name", "src", "size", "objectFit"]);
|
|
39
37
|
const sizeValue = sizeValues[size];
|
|
40
38
|
return (React.createElement("svg", Object.assign({ width: sizeValue, height: sizeValue, viewBox: '0 0 40 40' }, rest),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeNodeAvatar.js","sourceRoot":"","sources":["../../../../src/TreeView/PointNode/TreeNodeAvatar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"TreeNodeAvatar.js","sourceRoot":"","sources":["../../../../src/TreeView/PointNode/TreeNodeAvatar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAavD,MAAM,cAAc,GAAG,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAkB,EAAE,EAAE;IAChE,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;QAChB,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,CAAA;IAEtC,OAAO,CACL;QACE,2BAAG,IAAI,EAAC,aAAa,EAAC,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK;YAC7C,8BAAM,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,CACzC;QACJ,8BAAM,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAC,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,IAC3C,QAAQ,CACJ,CACL,CACL,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,OAAO,EAAE,IAAI;IACb,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,KAAK;IACb,KAAK,EAAE,KAAK;CACb,CAAA;AAED,MAAM,OAAO,GAAG;IACd,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,iFAAiF;CACxF,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAY,EAAE,EAAE;IAC7C,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,GAAG,SAAS,EAAE,SAAS,GAAG,SAAS,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAvE,oCAA+D,CAAQ,CAAA;IAC7E,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;IAElC,OAAO,CACL,2CAAK,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAC,WAAW,IAAK,IAAI;QACpE;YACG,GAAG,IAAI,CACN,+BACE,IAAI,EAAE,GAAG,EACT,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,MAAM,EAAC,IAAI,EACX,KAAK,EAAC,IAAI,EACV,IAAI,EAAC,aAAa,EAClB,mBAAmB,EACjB,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,GAEtD,CACH;YACA,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CACrC;QACJ,8BAAM,EAAE,EAAC,OAAO;YACd,2BAAG,IAAI,EAAC,OAAO;gBACb,iCAAS,MAAM,EAAC,0BAA0B,GAAG,CAC3C,CACC,CACH,CACP,CAAA;AACH,CAAC,CAAA;AAED,cAAc,CAAC,YAAY,GAAG;IAC5B,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,SAAS;CACrB,CAAA;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../../src/TreeView/TreeView.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../../src/TreeView/TreeView.tsx"],"names":[],"mappings":";AAkBA,OAAO,KAAK,EAAE,iBAAiB,EAAW,MAAM,SAAS,CAAA;AAIzD,MAAM,WAAW,KAAM,SAAQ,iBAAiB;IAC9C,8JAA8J;IAC9J,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC9B,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,eAAO,MAAM,QAAQ;YAAW,KAAK;;;;;;;;;;;;;;CA0FpC,CAAA;AAYD,eAAe,QAAQ,CAAA"}
|
|
@@ -1,19 +1,15 @@
|
|
|
1
1
|
import React, { createRef, useContext, useEffect, useState, useMemo, } from 'react';
|
|
2
|
-
import { makeStyles } from '@material-ui/core/styles';
|
|
3
2
|
import { TreeViewContext } from './TreeViewContainer';
|
|
4
3
|
import { useTree } from './use-tree';
|
|
5
4
|
import Zoom from './Zoom';
|
|
6
|
-
import styles from './styles';
|
|
7
5
|
import { useZoom } from './use-zoom';
|
|
8
6
|
import { DEFAULT_SCALE_EXTENT, DEFAULT_TRANSITION_DURATION, ZERO_VECTOR2, TreeViewPropsDefaults, } from './variables';
|
|
9
7
|
import { TreeViewSvg } from './TreeViewSvg';
|
|
10
8
|
import { useFinalMargins } from './use-final-margins';
|
|
11
|
-
const useStyles = makeStyles(styles, { name: 'PicassoTreeView' });
|
|
12
9
|
export const TreeView = (props) => {
|
|
13
10
|
var _a, _b, _c;
|
|
14
11
|
const { data, renderNode, nodeWidth = TreeView.defaultProps.nodeWidth, nodeHeight = TreeView.defaultProps.nodeHeight, scaleExtent = TreeView.defaultProps.scaleExtent, initialScale = TreeView.defaultProps.initialScale, scaleCoefficient = TreeView.defaultProps.scaleCoefficient, showZoom = TreeView.defaultProps.showZoom, } = props;
|
|
15
12
|
const { direction = TreeView.defaultProps.directionProps.direction, variant = TreeView.defaultProps.directionProps.variant, } = (_a = props.directionProps) !== null && _a !== void 0 ? _a : TreeView.defaultProps.directionProps;
|
|
16
|
-
const classes = useStyles();
|
|
17
13
|
const rootRef = createRef();
|
|
18
14
|
const [verticalMargin, horizontalMargin] = useFinalMargins(direction, (_b = props.directionProps) === null || _b === void 0 ? void 0 : _b.verticalMargin, (_c = props.directionProps) === null || _c === void 0 ? void 0 : _c.horizontalMargin);
|
|
19
15
|
const { nodes, links, selectedNode } = useTree({
|
|
@@ -58,9 +54,9 @@ export const TreeView = (props) => {
|
|
|
58
54
|
});
|
|
59
55
|
setInitialized(true);
|
|
60
56
|
}, [rootRef, initialized, zoom, updateState]);
|
|
61
|
-
return (React.createElement("div", { className:
|
|
57
|
+
return (React.createElement("div", { className: 'w-full h-full' },
|
|
62
58
|
showZoom && (React.createElement(Zoom, { handleZoom: handleZoom, scaleCoefficient: scaleCoefficient })),
|
|
63
|
-
React.createElement(TreeViewSvg, { ref: rootRef, nodes: nodes, links: links, direction: direction, verticalMargin: verticalMargin, horizontalMargin: horizontalMargin, renderNode: renderNode, svgProps: { className:
|
|
59
|
+
React.createElement(TreeViewSvg, { ref: rootRef, nodes: nodes, links: links, direction: direction, verticalMargin: verticalMargin, horizontalMargin: horizontalMargin, renderNode: renderNode, svgProps: { className: 'w-full h-full' } })));
|
|
64
60
|
};
|
|
65
61
|
TreeView.defaultProps = Object.assign(Object.assign({}, TreeViewPropsDefaults), { scaleExtent: DEFAULT_SCALE_EXTENT, initialScale: 1, scaleCoefficient: 0.5, showZoom: true });
|
|
66
62
|
TreeView.displayName = 'TreeView';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeView.js","sourceRoot":"","sources":["../../../src/TreeView/TreeView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EACT,UAAU,EACV,SAAS,EACT,QAAQ,EACR,OAAO,GACR,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"TreeView.js","sourceRoot":"","sources":["../../../src/TreeView/TreeView.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-tree-view",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.22",
|
|
4
4
|
"description": "Toptal UI components library - TreeView",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -32,7 +32,6 @@
|
|
|
32
32
|
"**/styles.js"
|
|
33
33
|
],
|
|
34
34
|
"peerDependencies": {
|
|
35
|
-
"@material-ui/core": "4.12.4",
|
|
36
35
|
"@toptal/picasso-tailwind": ">=2.7",
|
|
37
36
|
"react": ">=16.12.0 < 19.0.0"
|
|
38
37
|
},
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import React, { useMemo } from 'react'
|
|
2
|
-
import type { Theme } from '@material-ui/core/styles'
|
|
3
|
-
import { makeStyles } from '@material-ui/core/styles'
|
|
4
2
|
|
|
5
3
|
import type { DirectionsType, DynamicPointLink } from '../types'
|
|
6
|
-
import styles from './styles'
|
|
7
4
|
|
|
8
5
|
export interface Props {
|
|
9
6
|
link: DynamicPointLink
|
|
@@ -12,11 +9,8 @@ export interface Props {
|
|
|
12
9
|
horizontalMargin: number
|
|
13
10
|
}
|
|
14
11
|
|
|
15
|
-
const useStyles = makeStyles<Theme>(styles, { name: 'PicassoPointLink' })
|
|
16
|
-
|
|
17
12
|
export const PointLink = (props: Props) => {
|
|
18
13
|
const { link, direction, verticalMargin, horizontalMargin } = props
|
|
19
|
-
const classes = useStyles()
|
|
20
14
|
const path = useMemo(() => {
|
|
21
15
|
const { source, target } = link
|
|
22
16
|
const sourceYDeltas = {
|
|
@@ -44,7 +38,7 @@ export const PointLink = (props: Props) => {
|
|
|
44
38
|
return svgPaths[direction]
|
|
45
39
|
}, [link, direction, verticalMargin, horizontalMargin])
|
|
46
40
|
|
|
47
|
-
return <path d={path} className=
|
|
41
|
+
return <path d={path} className='fill-none stroke-gray-400' />
|
|
48
42
|
}
|
|
49
43
|
|
|
50
44
|
PointLink.displayName = 'PointLink'
|
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import type { Theme } from '@material-ui/core/styles'
|
|
3
|
-
import { makeStyles } from '@material-ui/core/styles'
|
|
4
2
|
import type { StandardProps, SizeType } from '@toptal/picasso-shared'
|
|
5
3
|
import { getNameInitials } from '@toptal/picasso-utils'
|
|
6
4
|
|
|
7
|
-
import styles from './styles'
|
|
8
|
-
|
|
9
5
|
export interface Props extends StandardProps {
|
|
10
6
|
/** User full name to display initials on the avatar */
|
|
11
7
|
name: string
|
|
@@ -17,10 +13,6 @@ export interface Props extends StandardProps {
|
|
|
17
13
|
objectFit?: 'cover' | 'contain'
|
|
18
14
|
}
|
|
19
15
|
|
|
20
|
-
const useStyles = makeStyles<Theme>(styles, {
|
|
21
|
-
name: 'PicassoTreeNodeAvatar',
|
|
22
|
-
})
|
|
23
|
-
|
|
24
16
|
const renderInitials = ({ src, name, classes }: Partial<Props>) => {
|
|
25
17
|
if (src || !name) {
|
|
26
18
|
return null
|
|
@@ -48,8 +40,12 @@ const sizeValues = {
|
|
|
48
40
|
large: '160',
|
|
49
41
|
}
|
|
50
42
|
|
|
43
|
+
const classes = {
|
|
44
|
+
shape: 'fill-gray-500',
|
|
45
|
+
text: 'text-[1em] uppercase fill-white [dominant-baseline:middle] [text-anchor:middle]',
|
|
46
|
+
}
|
|
47
|
+
|
|
51
48
|
export const TreeNodeAvatar = (props: Props) => {
|
|
52
|
-
const classes = useStyles()
|
|
53
49
|
const { name, src, size = 'xxsmall', objectFit = 'contain', ...rest } = props
|
|
54
50
|
const sizeValue = sizeValues[size]
|
|
55
51
|
|
|
@@ -5,13 +5,10 @@ import React, {
|
|
|
5
5
|
useState,
|
|
6
6
|
useMemo,
|
|
7
7
|
} from 'react'
|
|
8
|
-
import type { Theme } from '@material-ui/core/styles'
|
|
9
|
-
import { makeStyles } from '@material-ui/core/styles'
|
|
10
8
|
|
|
11
9
|
import { TreeViewContext } from './TreeViewContainer'
|
|
12
10
|
import { useTree } from './use-tree'
|
|
13
11
|
import Zoom from './Zoom'
|
|
14
|
-
import styles from './styles'
|
|
15
12
|
import { useZoom } from './use-zoom'
|
|
16
13
|
import {
|
|
17
14
|
DEFAULT_SCALE_EXTENT,
|
|
@@ -34,8 +31,6 @@ export interface Props extends TreeViewPropsBase {
|
|
|
34
31
|
scaleCoefficient?: number
|
|
35
32
|
}
|
|
36
33
|
|
|
37
|
-
const useStyles = makeStyles<Theme>(styles, { name: 'PicassoTreeView' })
|
|
38
|
-
|
|
39
34
|
export const TreeView = (props: Props) => {
|
|
40
35
|
const {
|
|
41
36
|
data,
|
|
@@ -53,7 +48,6 @@ export const TreeView = (props: Props) => {
|
|
|
53
48
|
variant = TreeView.defaultProps.directionProps.variant,
|
|
54
49
|
} = props.directionProps ?? TreeView.defaultProps.directionProps
|
|
55
50
|
|
|
56
|
-
const classes = useStyles()
|
|
57
51
|
const rootRef = createRef<SVGSVGElement>()
|
|
58
52
|
|
|
59
53
|
const [verticalMargin, horizontalMargin] = useFinalMargins(
|
|
@@ -111,7 +105,7 @@ export const TreeView = (props: Props) => {
|
|
|
111
105
|
}, [rootRef, initialized, zoom, updateState])
|
|
112
106
|
|
|
113
107
|
return (
|
|
114
|
-
<div className=
|
|
108
|
+
<div className='w-full h-full'>
|
|
115
109
|
{showZoom && (
|
|
116
110
|
<Zoom handleZoom={handleZoom} scaleCoefficient={scaleCoefficient} />
|
|
117
111
|
)}
|
|
@@ -123,7 +117,7 @@ export const TreeView = (props: Props) => {
|
|
|
123
117
|
verticalMargin={verticalMargin}
|
|
124
118
|
horizontalMargin={horizontalMargin}
|
|
125
119
|
renderNode={renderNode}
|
|
126
|
-
svgProps={{ className:
|
|
120
|
+
svgProps={{ className: 'w-full h-full' }}
|
|
127
121
|
/>
|
|
128
122
|
</div>
|
|
129
123
|
)
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/TreeView/PointLink/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAGxB,KAAK;AAAlC,wBAMI"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/TreeView/PointLink/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,SAAS,EAAE;QACT,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;KAC5B;CACF,CAAC,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/TreeView/PointNode/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAGxB,KAAK;AAAlC,wBAaC"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { createStyles } from '@material-ui/core/styles';
|
|
2
|
-
export default ({ palette }) => {
|
|
3
|
-
return createStyles({
|
|
4
|
-
shape: {
|
|
5
|
-
fill: palette.grey.main,
|
|
6
|
-
},
|
|
7
|
-
text: {
|
|
8
|
-
fontSize: '1em',
|
|
9
|
-
textTransform: 'uppercase',
|
|
10
|
-
fill: palette.common.white,
|
|
11
|
-
dominantBaseline: 'middle',
|
|
12
|
-
textAnchor: 'middle',
|
|
13
|
-
},
|
|
14
|
-
});
|
|
15
|
-
};
|
|
16
|
-
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/TreeView/PointNode/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE;IACpC,OAAO,YAAY,CAAC;QAClB,KAAK,EAAE;YACL,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;SACxB;QACD,IAAI,EAAE;YACJ,QAAQ,EAAE,KAAK;YACf,aAAa,EAAE,WAAW;YAC1B,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;YAC1B,gBAAgB,EAAE,QAAQ;YAC1B,UAAU,EAAE,QAAQ;SACrB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/TreeView/styles.ts"],"names":[],"mappings":";AAEA,wBAUI"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/TreeView/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;IACD,GAAG,EAAE;QACH,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;CACF,CAAC,CAAA"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import type { Theme } from '@material-ui/core/styles'
|
|
2
|
-
import { createStyles } from '@material-ui/core/styles'
|
|
3
|
-
|
|
4
|
-
export default ({ palette }: Theme) => {
|
|
5
|
-
return createStyles({
|
|
6
|
-
shape: {
|
|
7
|
-
fill: palette.grey.main,
|
|
8
|
-
},
|
|
9
|
-
text: {
|
|
10
|
-
fontSize: '1em',
|
|
11
|
-
textTransform: 'uppercase',
|
|
12
|
-
fill: palette.common.white,
|
|
13
|
-
dominantBaseline: 'middle',
|
|
14
|
-
textAnchor: 'middle',
|
|
15
|
-
},
|
|
16
|
-
})
|
|
17
|
-
}
|