@ctrl/react-orgchart 1.3.0 → 1.4.0

package/src/chart/renderLines.js

@@ -1,119 +0,0 @@
-import { curveLinear, line } from 'd3-shape';
-
-const margin = 10;
-
-export function renderLines(config) {
-  const {
-    svg,
-    links,
-    nodeWidth,
-    nodeHeight,
-    borderColor,
-    sourceNode,
-    treeData,
-    animationDuration,
-  } = config;
-
-  const parentNode = sourceNode || treeData;
-
-  // Select all the links to render the lines
-  const link = svg.selectAll('path.link').data(links, ({ source, target }) => {
-    return `${source.data.id}-${target.data.id}`;
-  });
-
-  // Define the angled line function
-  const angle = line()
-    .x(d => d.x)
-    .y(d => d.y)
-    .curve(curveLinear);
-
-  // Enter any new links at the parent's previous position.
-  const linkEnter = link
-    .enter()
-    .insert('path', 'g')
-    .attr('class', 'link')
-    .attr('fill', 'none')
-    .attr('stroke', borderColor)
-    .attr('stroke-opacity', 1)
-    .attr('stroke-width', 1.25)
-    .attr('d', d => {
-      const linePoints = [
-        {
-          x: d.source.x + parseInt(nodeWidth / 2, 10),
-          y: d.source.y + margin,
-        },
-        {
-          x: d.source.x + parseInt(nodeWidth / 2, 10),
-          y: d.source.y + margin,
-        },
-        {
-          x: d.source.x + parseInt(nodeWidth / 2, 10),
-          y: d.source.y + margin,
-        },
-        {
-          x: d.source.x + parseInt(nodeWidth / 2, 10),
-          y: d.source.y + margin,
-        },
-      ];
-
-      return angle(linePoints);
-    });
-
-  const linkUpdate = linkEnter.merge(link);
-
-  // Transition links to their new position.
-  linkUpdate
-    .transition()
-    .duration(animationDuration)
-    .attr('d', d => {
-      const linePoints = [
-        {
-          x: d.source.x + parseInt(nodeWidth / 2, 10),
-          y: d.source.y + nodeHeight,
-        },
-        {
-          x: d.source.x + parseInt(nodeWidth / 2, 10),
-          y: d.target.y - margin,
-        },
-        {
-          x: d.target.x + parseInt(nodeWidth / 2, 10),
-          y: d.target.y - margin,
-        },
-        {
-          x: d.target.x + parseInt(nodeWidth / 2, 10),
-          y: d.target.y,
-        },
-      ];
-
-      return angle(linePoints);
-    });
-
-  // Animate the existing links to the parent's new position
-  link
-    .exit()
-    .transition()
-    .duration(animationDuration)
-    .attr('d', () => {
-      const lineNode = config.sourceNode ? config.sourceNode : parentNode;
-      const linePoints = [
-        {
-          x: lineNode.x + parseInt(nodeWidth / 2, 10),
-          y: lineNode.y + nodeHeight + 2,
-        },
-        {
-          x: lineNode.x + parseInt(nodeWidth / 2, 10),
-          y: lineNode.y + nodeHeight + 2,
-        },
-        {
-          x: lineNode.x + parseInt(nodeWidth / 2, 10),
-          y: lineNode.y + nodeHeight + 2,
-        },
-        {
-          x: lineNode.x + parseInt(nodeWidth / 2, 10),
-          y: lineNode.y + nodeHeight + 2,
-        },
-      ];
-
-      return angle(linePoints);
-    });
-}

package/src/index.ts

@@ -1 +0,0 @@
-export * from './orgChart';

package/src/orgChart.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-
-import { init } from './chart/index';
-import { Config, config as defaultConfig } from './chart/config';
-
-const defaultId = 'react-org-chart';
-
-export interface TreeItem {
-  [key: string]: TreeItem[] | any;
-  id?: string | number;
-  parentId?: string | number | null;
-  children?: TreeItem[] | null;
-  entity?: {
-    [key: string]: any;
-    avatar?: string;
-    link?: string;
-    name?: string;
-    title?: string;
-  };
-}
-
-type Props = Partial<Config> & {
-  id?: string;
-  disableCanvasMouseMove?: boolean;
-  disableCanvasMouseWheelZoom?: boolean;
-  tree: TreeItem[] | TreeItem;
-};
-
-export class OrgChart extends React.PureComponent<Props> {
-  anchor = React.createRef();
-  onDestroy!: () => void;
-
-  componentDidMount() {
-    const {
-      id = defaultId,
-      disableCanvasMouseMove = false,
-      disableCanvasMouseWheelZoom = false,
-      tree,
-      ...options
-    } = this.props;
-
-    this.onDestroy = init({
-      ...defaultConfig,
-      id: `#${id}`,
-      elem: this.anchor.current,
-      data: tree,
-      disableCanvasMouseMove,
-      disableCanvasMouseWheelZoom,
-      ...options,
-    });
-  }
-
-  componentWillUnmount() {
-    this.onDestroy();
-  }
-
-  render() {
-    const { id = defaultId } = this.props;
-
-    return React.createElement('div', {
-      id,
-      ref: this.anchor,
-      style: { width: '100%', height: '100%' },
-    });
-  }
-}

package/src/utils/collapse.js

@@ -1,7 +0,0 @@
-export function collapse(d) {
-  // Check if this node has children
-  if (d.children) {
-    d._children = d.children;
-    d.children = null;
-  }
-}

package/src/utils/helpers.js

@@ -1,25 +0,0 @@
-export const getName = data => data.data.entity && data.data.entity.name;
-
-export const getTitle = data => data.data.entity && data.data.entity.title;
-
-export const getCount = data => {
-  const children = (data.children || []).length || (data._children || []).length;
-  if (!children) {
-    return '';
-  }
-
-  return `Team (${children})`;
-};
-
-export const getCursorForNode = data =>
-  data.data.children || data.data._children ? 'pointer' : 'default';
-
-export const customOnClick = (fn, onClick, config) => (event, data) => {
-  if (typeof fn === 'function') {
-    if (fn(data, event)) {
-      onClick(config);
-    } else {
-      event.stopPropagation();
-    }
-  }
-};

package/src/utils/index.js

@@ -1,3 +0,0 @@
-export * from './collapse';
-export * from './wrapText';
-export * from './helpers';

package/src/utils/wrapText.js

@@ -1,73 +0,0 @@
-import { select } from 'd3-selection';
-import truncate from 'lodash.truncate';
-
-const getTruncatedText = (text, maxWordLength) => truncate(text, { length: maxWordLength });
-
-// One way of achieving text-wrapping capability in SVG
-// Text is broken down to words, each word is added to a line and then the lines width is checked
-// If the line width is less than the max we move to the next word, if more we add new line etc
-// until the max number of lines is reached.
-export function wrapText(text, maxLineWidth, maxNumberOfLines = 3, maxWordLength = 17) {
-  if (!text._groups || !text._groups[0] || !text._groups[0].length) {
-    return '';
-  }
-
-  let editedClass = '';
-
-  text._groups[0].forEach(textNode => {
-    const text = select(textNode);
-    const x = text.attr('x');
-    const y = text.attr('y');
-    const dy = parseFloat(text.attr('dy'));
-    const lineHeight = 1.1;
-    const words = text.text().split(/\s+/).reverse();
-
-    let lineNumber = 0;
-    let curLineWidth;
-    let word;
-    let line = [];
-    let tspan = text
-      .text(null)
-      .append('tspan')
-      .style('text-anchor', 'middle')
-      .attr('x', x)
-      .attr('y', y)
-      .attr('dy', `${dy}em`);
-
-    while (lineNumber < maxNumberOfLines && words.length) {
-      word = words.pop();
-      line.push(word);
-      tspan.text(line.join(' '));
-
-      curLineWidth = tspan.node().getComputedTextLength();
-
-      if (curLineWidth > maxLineWidth) {
-        if (lineNumber + 1 === maxNumberOfLines) {
-          tspan.text(getTruncatedText(line.join(' '), maxWordLength));
-          break;
-        } else {
-          line.pop();
-          tspan.text(line.join(' '));
-          line = [word];
-          tspan = text
-            .append('tspan')
-            .style('text-anchor', 'middle')
-            .attr('x', x)
-            .attr('y', y)
-            .attr('dy', ++lineNumber * lineHeight + dy + 'em')
-            .text(getTruncatedText(word, maxWordLength));
-        }
-
-        if (word.length > maxWordLength) {
-          break;
-        }
-      }
-    }
-
-    if (!editedClass) {
-      editedClass = text.attr('class').replace(' unedited', '');
-    }
-
-    text.attr('class', editedClass);
-  });
-}

package/tsconfig.build.json

@@ -1,4 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": ["src/index.ts"]
-}

package/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "allowJs": true,
-    "moduleResolution": "node",
-    "lib": ["es2015", "dom"],
-    "target": "es2015",
-    "module": "esnext",
-    "esModuleInterop": true,
-    "strict": true,
-    "newLine": "lf",
-    "noImplicitAny": false,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "jsx": "react",
-    "noEmitOnError": true,
-    "noUnusedLocals": true,
-    "declaration": true,
-    "sourceMap": true,
-    "outDir": "dist",
-    "skipLibCheck": true
-  }
-}

package/vercel.json

@@ -1,5 +0,0 @@
-{
-  "github": {
-    "silent": true
-  }
-}