feat: 上传版本1.0.0

.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

.fatherrc.ts

@@ -0,0 +1,4 @@
+export default {
+  esm: 'rollup',
+  cjs: 'rollup',
+};

.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/npm-debug.log*
+/yarn-error.log
+/yarn.lock
+/package-lock.json
+
+# production
+/dist
+/docs-dist
+
+# misc
+.DS_Store
+
+# umi
+.umi
+.umi-production
+.umi-test
+.env.local
+
+# ide
+/.vscode
+/.idea

.prettierignore

@@ -0,0 +1,7 @@
+**/*.svg
+**/*.ejs
+**/*.html
+package.json
+.umi
+.umi-production
+.umi-test

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    }
+  ]
+}

.umirc.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'dumi';
+
+export default defineConfig({
+  title: 'react-org-chart',
+  favicon: '/images/logo.svg',
+  logo: '/images/logo.svg',
+  outputPath: 'docs-dist',
+  base: '/react-org-chart',
+  publicPath: '/',
+  // more config: https://d.umijs.org/config
+});

README.md

@@ -0,0 +1,61 @@
+# react-org-chart - 组织结构图
+
+## 使用
+
+```typescript
+import React from 'react';
+import OrgChart, { NodeDataType } from '@twp0217/react-org-chart';
+
+export default () => {
+  const data: NodeDataType = {
+    key: 0,
+    label: '科技有限公司',
+    children: [
+      {
+        key: 1,
+        label: '研发部',
+        children: [
+          { key: 11, label: '开发-前端' },
+          { key: 12, label: '开发-后端' },
+          { key: 13, label: 'UI设计' },
+          { key: 14, label: '产品经理' },
+        ],
+      },
+      {
+        key: 2,
+        label: '销售部',
+        children: [
+          { key: 21, label: '销售一部' },
+          { key: 22, label: '销售二部' },
+        ],
+      },
+      { key: 3, label: '财务部' },
+      { key: 4, label: '人事部' },
+    ],
+  };
+
+  return <OrgChart data={data} />;
+};
+```
+
+## API
+
+### NodeDataType
+
+| 名称      | 类型                | 默认值 | 说明       |
+| --------- | ------------------- | ------ | ---------- |
+| key       | string \| number    | -      | key        |
+| label     | number              | -      | label      |
+| children  | NodeDataType[]      | -      | 子节点集合 |
+| className | string              | -      | 类名       |
+| style     | React.CSSProperties | -      | 样式       |
+
+### OrgChartProps
+
+| 名称       | 类型                                                                  | 默认值 | 说明           |
+| ---------- | --------------------------------------------------------------------- | ------ | -------------- |
+| data       | NodeDataType                                                          | -      | 数据           |
+| className  | string                                                                | -      | 类名           |
+| style      | React.CSSProperties                                                   | -      | 样式           |
+| renderNode | (node: NodeDataType, originNode: React.ReactNode) => React.ReactNode; | -      | 自定义渲染节点 |
+| onClick    | (node: NodeDataType) => void                                          | -      | 点击事件       |

docs/changelog.md

@@ -0,0 +1 @@
+<embed src="../CHANGELOG.md"></embed>

docs/demo/basic.md

@@ -0,0 +1,3 @@
+## basic
+
+<code src="../examples/basic.tsx" />

docs/demo/event.md

@@ -0,0 +1,3 @@
+## event
+
+<code src="../examples/event.tsx" />

docs/examples/basic.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import OrgChart, { NodeDataType } from '@twp0217/react-org-chart';
+
+export default () => {
+  const data: NodeDataType = {
+    key: 0,
+    label: '科技有限公司',
+    children: [
+      {
+        key: 1,
+        label: '研发部',
+        children: [
+          { key: 11, label: '开发-前端' },
+          { key: 12, label: '开发-后端' },
+          { key: 13, label: 'UI设计' },
+          { key: 14, label: '产品经理' },
+        ],
+      },
+      {
+        key: 2,
+        label: '销售部',
+        children: [
+          { key: 21, label: '销售一部' },
+          { key: 22, label: '销售二部' },
+        ],
+      },
+      { key: 3, label: '财务部' },
+      { key: 4, label: '人事部' },
+    ],
+  };
+
+  return <OrgChart data={data} />;
+};

docs/examples/data.json

@@ -0,0 +1,26 @@
+{
+  "key": 0,
+  "label": "科技有限公司",
+  "children": [
+    {
+      "key": 1,
+      "label": "研发部",
+      "children": [
+        { "key": 11, "label": "开发-前端" },
+        { "key": 12, "label": "开发-后端" },
+        { "key": 13, "label": "UI设计" },
+        { "key": 14, "label": "产品经理" }
+      ]
+    },
+    {
+      "key": 2,
+      "label": "销售部",
+      "children": [
+        { "key": 21, "label": "销售一部" },
+        { "key": 22, "label": "销售二部" }
+      ]
+    },
+    { "key": 3, "label": "财务部" },
+    { "key": 4, "label": "人事部" }
+  ]
+}

docs/examples/event.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import OrgChart, { NodeDataType } from '@twp0217/react-org-chart';
+
+export default () => {
+  const data = require('./data.json');
+
+  const onClick = (node: NodeDataType) => {
+    console.log('onClick', node);
+  };
+
+  return (
+    <div
+      style={{
+        overflow: 'auto',
+        textAlign: 'center',
+      }}
+    >
+      <OrgChart data={data} onClick={onClick} />
+    </div>
+  );
+};

docs/index.md

@@ -0,0 +1,5 @@
+---
+title: react-org-chart
+---
+
+<embed src="../README.md"></embed>

package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@twp0217/react-org-chart",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "dumi dev",
+    "docs:build": "dumi build",
+    "docs:deploy": "gh-pages -d docs-dist",
+    "build": "father-build",
+    "deploy": "npm run docs:build && npm run docs:deploy",
+    "release": "npm run build && npm publish --access public",
+    "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
+    "test": "umi-test",
+    "test:coverage": "umi-test --coverage",
+    "commit": "git-cz",
+    "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts",
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,less,md,json}": [
+      "prettier --write"
+    ],
+    "*.ts?(x)": [
+      "prettier --parser=typescript --write"
+    ]
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "dependencies": {
+    "classnames": "^2.3.1"
+  },
+  "devDependencies": {
+    "@umijs/test": "^3.0.5",
+    "commitizen": "^4.2.4",
+    "conventional-changelog-cli": "^2.1.1",
+    "cz-conventional-changelog": "^3.3.0",
+    "dumi": "^1.0.16",
+    "father-build": "^1.17.2",
+    "gh-pages": "^3.0.0",
+    "lint-staged": "^10.0.7",
+    "prettier": "^2.2.1",
+    "yorkie": "^2.0.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  }
+}

src/OrgChart.module.less

@@ -0,0 +1,54 @@
+@node-color: #1890ff;
+@line-width: 1px;
+@line-color: @node-color;
+
+.orgChartContainer {
+  display: inline-block;
+
+  :global {
+    table {
+      border-collapse: separate;
+      border-spacing: 0;
+      line-height: 1.5715;
+
+      tr {
+        &.lines td {
+          height: 20px;
+
+          .vertical {
+            width: @line-width;
+            height: 100%;
+            background-color: @line-color;
+            display: inline-block;
+          }
+
+          &.left {
+            border-right: @line-width solid @line-color;
+          }
+
+          &.right {
+            border-left: @line-width solid transparent;
+          }
+
+          &.top {
+            border-top: @line-width solid @line-color;
+          }
+        }
+      }
+
+      td {
+        text-align: center;
+        padding: 0;
+        vertical-align: top;
+
+        .node {
+          display: inline-block;
+          border: 1px solid @node-color;
+          padding: 0 0.5rem;
+          margin: 0 5px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}

src/OrgChart.tsx

@@ -0,0 +1,20 @@
+import classNames from 'classnames';
+import React from 'react';
+import DefaultOrgChart from './components/DefaultOrgChart';
+import { OrgChartProps } from './interface';
+import styles from './OrgChart.module.less';
+
+const OrgChart = (props: OrgChartProps) => {
+  const { data, className, style, renderNode, onClick } = props;
+
+  return !!data ? (
+    <div
+      className={classNames(styles.orgChartContainer, className)}
+      style={style}
+    >
+      <DefaultOrgChart data={data} renderNode={renderNode} onClick={onClick} />
+    </div>
+  ) : null;
+};
+
+export default OrgChart;