diff --git a/samples/react-tree-orgchart/package-lock.json b/samples/react-tree-orgchart/package-lock.json index a7c92a460..c00713f27 100644 --- a/samples/react-tree-orgchart/package-lock.json +++ b/samples/react-tree-orgchart/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-tree-orgchart", - "version": "0.0.1", + "version": "1.0.2", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -4125,20 +4125,21 @@ } }, "@pnp/spfx-controls-react": { - "version": "1.11.0", - "resolved": "https://registry.npmjs.org/@pnp/spfx-controls-react/-/spfx-controls-react-1.11.0.tgz", - "integrity": "sha512-7i2g3l95/CXpiugfM8V0m8aEHeyoRFBlTiZfoQiue5LW9O3XC+okDSbf8vOBNgddYTRLnRZKEo/TMKcuNEi3zQ==", + "version": "1.21.1", + "resolved": "https://registry.npmjs.org/@pnp/spfx-controls-react/-/spfx-controls-react-1.21.1.tgz", + "integrity": "sha512-HpBZtrtNfAMn9vySTEZutFovnwiYGg7skptLhf2gZmhSOUIBB0THweBRTDPqT8zBSkxc1ffVHAOArVgaMb+zMQ==", "requires": { "@pnp/common": "1.0.1", "@pnp/logging": "1.0.1", "@pnp/odata": "1.0.1", "@pnp/sp": "1.0.1", - "@pnp/telemetry-js": "1.0.0", + "@pnp/telemetry-js": "2.0.0", "@types/chart.js": "2.7.40", "chart.js": "2.7.3", - "color": "^3.1.0", - "lodash": "4.17.4", - "office-ui-fabric-react": "5.131.0" + "color": "^3.1.2", + "lodash": "4.17.13", + "office-ui-fabric-react": "5.131.0", + "react-quill": "1.3.3" }, "dependencies": { "@pnp/common": { @@ -4173,28 +4174,23 @@ "tslib": "1.8.1" } }, - "color": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/color/-/color-3.1.0.tgz", - "integrity": "sha512-CwyopLkuRYO5ei2EpzpIh6LqJMt6Mt+jZhO5VI5f/wJLZriXQE32/SSqzmrh+QB+AZT81Cj8yv+7zwToW8ahZg==", + "@pnp/telemetry-js": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@pnp/telemetry-js/-/telemetry-js-2.0.0.tgz", + "integrity": "sha512-qFNm3mTerTnxgTR6c/4iMMt8EUKrQn5z0XG/IQtpNlp6m7KXRDFR87mQKeBVtSv2LhxGO0VNFndKJIibBw52zQ==", "requires": { - "color-convert": "^1.9.1", - "color-string": "^1.5.2" - } - }, - "color-string": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz", - "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==", - "requires": { - "color-name": "^1.0.0", - "simple-swizzle": "^0.2.2" + "whatwg-fetch": "2.0.4" } }, "lodash": { - "version": "4.17.4", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz", - "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=" + "version": "4.17.13", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.13.tgz", + "integrity": "sha512-vm3/XWXfWtRua0FkUyEHBZy8kCPjErNBT9fJx8Zvs+U6zjqPbTUOpkaoum3O5uiA8sm+yNMHXfYkTUHFoMxFNA==" + }, + "whatwg-fetch": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz", + "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==" } } }, @@ -4525,6 +4521,14 @@ "integrity": "sha1-aQoUdbhPKohP0HzXl8APXzE1bqg=", "dev": true }, + "@types/quill": { + "version": "1.3.10", + "resolved": "https://registry.npmjs.org/@types/quill/-/quill-1.3.10.tgz", + "integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==", + "requires": { + "parchment": "^1.1.2" + } + }, "@types/ramda": { "version": "0.25.51", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/@types/ramda/-/ramda-0.25.51.tgz", @@ -6791,6 +6795,15 @@ "unset-value": "^1.0.0" } }, + "call-bind": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", + "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", + "requires": { + "function-bind": "^1.1.1", + "get-intrinsic": "^1.0.2" + } + }, "caller-callsite": { "version": "2.0.0", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/caller-callsite/-/caller-callsite-2.0.0.tgz", @@ -6926,25 +6939,18 @@ } }, "chartjs-color": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.2.0.tgz", - "integrity": "sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz", + "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==", "requires": { - "chartjs-color-string": "^0.5.0", - "color-convert": "^0.5.3" - }, - "dependencies": { - "color-convert": { - "version": "0.5.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz", - "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=" - } + "chartjs-color-string": "^0.6.0", + "color-convert": "^1.9.3" } }, "chartjs-color-string": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz", - "integrity": "sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz", + "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==", "requires": { "color-name": "^1.0.0" } @@ -7247,7 +7253,6 @@ "version": "3.1.2", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/color/-/color-3.1.2.tgz", "integrity": "sha1-aBSOf4XUGtdknF+oyBBvCY0inhA=", - "dev": true, "requires": { "color-convert": "^1.9.1", "color-string": "^1.5.2" @@ -7270,7 +7275,6 @@ "version": "1.5.3", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/color-string/-/color-string-1.5.3.tgz", "integrity": "sha1-ybvF8BtYtUkvPWhXRZy2WQziBMw=", - "dev": true, "requires": { "color-name": "^1.0.0", "simple-swizzle": "^0.2.2" @@ -7558,6 +7562,15 @@ "sha.js": "^2.4.8" } }, + "create-react-class": { + "version": "15.7.0", + "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz", + "integrity": "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==", + "requires": { + "loose-envify": "^1.3.1", + "object-assign": "^4.1.1" + } + }, "cross-spawn": { "version": "6.0.5", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/cross-spawn/-/cross-spawn-6.0.5.tgz", @@ -8104,6 +8117,19 @@ "esprima": "4.0.1" } }, + "deep-equal": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz", + "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==", + "requires": { + "is-arguments": "^1.0.4", + "is-date-object": "^1.0.1", + "is-regex": "^1.0.4", + "object-is": "^1.0.1", + "object-keys": "^1.1.1", + "regexp.prototype.flags": "^1.2.0" + } + }, "deep-is": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz", @@ -8166,7 +8192,6 @@ "version": "1.1.3", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/define-properties/-/define-properties-1.1.3.tgz", "integrity": "sha1-z4jabL7ib+bbcJT2HYcMvYTO6fE=", - "dev": true, "requires": { "object-keys": "^1.0.12" } @@ -9214,6 +9239,11 @@ "through": "^2.3.8" } }, + "eventemitter3": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz", + "integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=" + }, "events": { "version": "3.1.0", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/events/-/events-3.1.0.tgz", @@ -9453,8 +9483,7 @@ "extend": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", - "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", - "dev": true + "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==" }, "extend-shallow": { "version": "3.0.2", @@ -9577,6 +9606,11 @@ "integrity": "sha1-VFFFB3xQFJHjOxXsQIwpQ3bpSuQ=", "dev": true }, + "fast-diff": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz", + "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==" + }, "fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", @@ -10111,7 +10145,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -10132,12 +10167,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -10152,17 +10189,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -10279,7 +10319,8 @@ "inherits": { "version": "2.0.4", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -10291,6 +10332,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -10305,6 +10347,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -10312,12 +10355,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.9.0", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -10336,6 +10381,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -10425,7 +10471,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -10437,6 +10484,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -10522,7 +10570,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -10558,6 +10607,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -10577,6 +10627,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -10620,12 +10671,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -10644,8 +10697,7 @@ "function-bind": { "version": "1.1.1", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0=", - "dev": true + "integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0=" }, "functional-red-black-tree": { "version": "1.0.1", @@ -10713,6 +10765,16 @@ "integrity": "sha1-+Xj6TJDR3+f/LWvtoqUV5xO9z0o=", "dev": true }, + "get-intrinsic": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz", + "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==", + "requires": { + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.1" + } + }, "get-stdin": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz", @@ -11331,7 +11393,6 @@ "version": "1.0.3", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/has/-/has-1.0.3.tgz", "integrity": "sha1-ci18v8H2qoJB8W3YFOAR4fQeh5Y=", - "dev": true, "requires": { "function-bind": "^1.1.1" } @@ -11363,8 +11424,7 @@ "has-symbols": { "version": "1.0.1", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/has-symbols/-/has-symbols-1.0.1.tgz", - "integrity": "sha1-n1IUdYpEGWxAbZvXbOv4HsLdMeg=", - "dev": true + "integrity": "sha1-n1IUdYpEGWxAbZvXbOv4HsLdMeg=" }, "has-unicode": { "version": "2.0.1", @@ -12004,6 +12064,14 @@ } } }, + "is-arguments": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.0.tgz", + "integrity": "sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==", + "requires": { + "call-bind": "^1.0.0" + } + }, "is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", @@ -12077,8 +12145,7 @@ "is-date-object": { "version": "1.0.2", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/is-date-object/-/is-date-object-1.0.2.tgz", - "integrity": "sha1-vac28s2P0G0yhE53Q7+nSUw7/X4=", - "dev": true + "integrity": "sha1-vac28s2P0G0yhE53Q7+nSUw7/X4=" }, "is-descriptor": { "version": "0.1.6", @@ -12252,7 +12319,6 @@ "version": "1.0.5", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/is-regex/-/is-regex-1.0.5.tgz", "integrity": "sha1-OdWJo1i/GJZ/cmlnEguPwa7XTq4=", - "dev": true, "requires": { "has": "^1.0.3" } @@ -15381,9 +15447,9 @@ } }, "moment": { - "version": "2.24.0", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", - "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==" + "version": "2.29.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", + "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==" }, "move-concurrently": { "version": "1.0.1", @@ -15950,11 +16016,19 @@ "integrity": "sha1-9Pa9GBrXfwBrXs5gvQtvOY/3Smc=", "dev": true }, + "object-is": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz", + "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==", + "requires": { + "call-bind": "^1.0.2", + "define-properties": "^1.1.3" + } + }, "object-keys": { "version": "1.1.1", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/object-keys/-/object-keys-1.1.1.tgz", - "integrity": "sha1-HEfyct8nfzsdrwYWd9nILiMixg4=", - "dev": true + "integrity": "sha1-HEfyct8nfzsdrwYWd9nILiMixg4=" }, "object-visit": { "version": "1.0.1", @@ -16369,6 +16443,11 @@ "no-case": "^2.2.0" } }, + "parchment": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz", + "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==" + }, "parent-module": { "version": "1.0.1", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/parent-module/-/parent-module-1.0.1.tgz", @@ -17595,6 +17674,36 @@ "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=", "dev": true }, + "quill": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz", + "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==", + "requires": { + "clone": "^2.1.1", + "deep-equal": "^1.0.1", + "eventemitter3": "^2.0.3", + "extend": "^3.0.2", + "parchment": "^1.1.4", + "quill-delta": "^3.6.2" + }, + "dependencies": { + "clone": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", + "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=" + } + } + }, + "quill-delta": { + "version": "3.6.3", + "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz", + "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==", + "requires": { + "deep-equal": "^1.0.1", + "extend": "^3.0.2", + "fast-diff": "1.1.2" + } + }, "raf": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz", @@ -17755,6 +17864,11 @@ "prop-types": "^15.6.0" } }, + "react-dom-factories": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/react-dom-factories/-/react-dom-factories-1.0.2.tgz", + "integrity": "sha1-63cFxNs2+1AbOqOP91lhaqD/luA=" + }, "react-is": { "version": "16.8.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.2.tgz", @@ -17765,6 +17879,27 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-quill": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-1.3.3.tgz", + "integrity": "sha512-T9RubLaWJ8gCfp7sOqmFupjiTiEp/EdGqhCG+PWGKc5UHiK6xIWNKWYsOHHEhQ+sZCKs8u/DPx47gc1VfFmcLg==", + "requires": { + "@types/quill": "1.3.10", + "@types/react": "*", + "create-react-class": "^15.6.0", + "lodash": "^4.17.4", + "prop-types": "^15.5.10", + "quill": "^1.2.6", + "react-dom-factories": "^1.0.0" + }, + "dependencies": { + "lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + } + } + }, "react-sortable-tree": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/react-sortable-tree/-/react-sortable-tree-2.6.0.tgz", @@ -18022,6 +18157,15 @@ "safe-regex": "^1.1.0" } }, + "regexp.prototype.flags": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz", + "integrity": "sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==", + "requires": { + "call-bind": "^1.0.2", + "define-properties": "^1.1.3" + } + }, "regexpp": { "version": "2.0.1", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/regexpp/-/regexpp-2.0.1.tgz", diff --git a/samples/react-tree-orgchart/package.json b/samples/react-tree-orgchart/package.json index d56945163..005b01a66 100644 --- a/samples/react-tree-orgchart/package.json +++ b/samples/react-tree-orgchart/package.json @@ -20,7 +20,7 @@ "@pnp/logging": "^1.2.9", "@pnp/odata": "^1.2.9", "@pnp/sp": "^1.2.9", - "@pnp/spfx-controls-react": "^1.11.0", + "@pnp/spfx-controls-react": "1.21.1", "@pnp/spfx-property-controls": "^1.14.1", "@types/es6-promise": "0.0.33", "@types/react": "16.4.2", diff --git a/samples/react-tree-orgchart/src/webparts/treeOrgChart/TreeOrgChartWebPart.manifest.json b/samples/react-tree-orgchart/src/webparts/treeOrgChart/TreeOrgChartWebPart.manifest.json index e0406269c..5355d46d1 100644 --- a/samples/react-tree-orgchart/src/webparts/treeOrgChart/TreeOrgChartWebPart.manifest.json +++ b/samples/react-tree-orgchart/src/webparts/treeOrgChart/TreeOrgChartWebPart.manifest.json @@ -12,7 +12,7 @@ // Components that allow authors to embed arbitrary script code should set this to true. // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f "requiresCustomScript": false, - +//"viewType": 1, "preconfiguredEntries": [{ "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other "group": { "default": "Other" }, @@ -22,6 +22,7 @@ "properties": { "title": "My Team Organization Chart", "currentUserTeam": true, + "maxLevels": 5 } }] diff --git a/samples/react-tree-orgchart/src/webparts/treeOrgChart/TreeOrgChartWebPart.ts b/samples/react-tree-orgchart/src/webparts/treeOrgChart/TreeOrgChartWebPart.ts index c982a51e2..2d36a60b6 100644 --- a/samples/react-tree-orgchart/src/webparts/treeOrgChart/TreeOrgChartWebPart.ts +++ b/samples/react-tree-orgchart/src/webparts/treeOrgChart/TreeOrgChartWebPart.ts @@ -1,25 +1,27 @@ import * as React from 'react'; import * as ReactDom from 'react-dom'; import { Version } from '@microsoft/sp-core-library'; -import { - BaseClientSideWebPart, - IPropertyPaneConfiguration, - PropertyPaneTextField, - PropertyPaneToggle -} from '@microsoft/sp-webpart-base'; + import * as strings from 'TreeOrgChartWebPartStrings'; -import TreeOrgChart from './components/TreeOrgChart'; +import TreeOrgChart, { TreeOrgChartType } from './components/TreeOrgChart'; import { ITreeOrgChartProps } from './components/ITreeOrgChartProps'; import { PropertyFieldNumber } from '@pnp/spfx-property-controls/lib/PropertyFieldNumber'; import { setup as pnpSetup } from '@pnp/common'; +import { BaseClientSideWebPart, IPropertyPaneConfiguration, PropertyPaneDropdown, PropertyPaneTextField, PropertyPaneToggle } from '@microsoft/sp-webpart-base'; export interface ITreeOrgChartWebPartProps { title: string; currentUserTeam: boolean; + teamLeader: string; maxLevels: number; + viewType: TreeOrgChartType; + filter: string; + excludefilter: boolean; } + + export default class TreeOrgChartWebPart extends BaseClientSideWebPart { public onInit(): Promise { @@ -27,10 +29,18 @@ export default class TreeOrgChartWebPart extends BaseClientSideWebPart = React.createElement( TreeOrgChart, { @@ -39,7 +49,12 @@ export default class TreeOrgChartWebPart extends BaseClientSideWebPart { this.properties.title = value; }, - currentUserTeam: this.properties.currentUserTeam, + viewType: this.properties.viewType, + teamLeader: this.properties.teamLeader, + updateTeamLeader: (loginname: string) => { + this.properties.teamLeader = loginname; + this.render(); + }, maxLevels: this.properties.maxLevels, context: this.context } @@ -70,9 +85,16 @@ export default class TreeOrgChartWebPart extends BaseClientSideWebPart void; + viewType: TreeOrgChartType; + teamLeader?: string; + updateTeamLeader: (loginname: string) => void; context: WebPartContext; } diff --git a/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/TreeOrgChart.tsx b/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/TreeOrgChart.tsx index 346838466..2499300c2 100755 --- a/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/TreeOrgChart.tsx +++ b/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/TreeOrgChart.tsx @@ -22,11 +22,20 @@ import { Spinner, SpinnerSize } from "office-ui-fabric-react/lib/components/Spinner"; +import { DisplayMode } from "@microsoft/sp-core-library"; +import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker"; + +export enum TreeOrgChartType { + MyTeam = 1, + CompanyHierarchy = 2, + ShowOtherTeam = 4 +} + export default class TreeOrgChart extends React.Component< ITreeOrgChartProps, ITreeOrgChartState -> { + > { private treeData: ITreeData[]; private SPService: SPService; @@ -48,9 +57,11 @@ export default class TreeOrgChart extends React.Component< prevProps: ITreeOrgChartProps, prevState: ITreeOrgChartState ) { + debugger; if ( - this.props.currentUserTeam !== prevProps.currentUserTeam || - this.props.maxLevels !== prevProps.maxLevels + this.props.viewType !== prevProps.viewType || + this.props.maxLevels !== prevProps.maxLevels || + this.props.teamLeader !== prevProps.teamLeader ) { await this.loadOrgchart(); } @@ -63,29 +74,55 @@ export default class TreeOrgChart extends React.Component< // Load Organization Chart */ public async loadOrgchart() { + this.setState({ treeData: [], isLoading: true }); const currentUser = `i:0#.f|membership|${this.props.context.pageContext.user.loginName}`; - const currentUserProperties = await this.SPService.getUserProperties( - currentUser - ); + let currentUserProperties = null; this.treeData = []; // Test if show only my Team or All Organization Chart - if (!this.props.currentUserTeam) { - const treeManagers = await this.buildOrganizationChart( - currentUserProperties - ); - if (treeManagers) this.treeData.push(treeManagers); - } else { - const treeManagers = await this.buildMyTeamOrganizationChart( - currentUserProperties - ); - if (treeManagers) - this.treeData.push({ - title: treeManagers.person, - expanded: true, - children: treeManagers.treeChildren - }); + switch (this.props.viewType) { + case TreeOrgChartType.CompanyHierarchy: + currentUserProperties = await this.SPService.getUserProperties( + currentUser + ); + const treeManagers = await this.buildOrganizationChart( + currentUserProperties + ); + if (treeManagers) this.treeData.push(treeManagers); + break; + case TreeOrgChartType.MyTeam: + currentUserProperties = await this.SPService.getUserProperties( + currentUser + ); + const myteam = await this.buildMyTeamOrganizationChart( + currentUserProperties + ); + if (myteam) + this.treeData.push({ + title: myteam.person, + expanded: true, + children: myteam.treeChildren + }); + break; + case TreeOrgChartType.ShowOtherTeam: + debugger; + if (this.props.teamLeader && this.props.teamLeader.length > 0) { + currentUserProperties = await this.SPService.getUserProperties( + this.props.teamLeader + ); + const otherteam = await this.buildTeamLeaderOrganizationChart( + currentUserProperties + ); + if (otherteam) + this.treeData.push({ + title: otherteam.person, + expanded: true, + children: otherteam.treeChildren + }); + } + break; } + this.setState({ treeData: this.treeData, isLoading: false }); } @@ -116,13 +153,13 @@ export default class TreeOrgChart extends React.Component< const managerProperties = await this.SPService.getUserProperties(manager); - let imageInitials: string[] = managerProperties.DisplayName.split(" "); - + let imageInitials: string[] = managerProperties.DisplayName.split(" "); + // Persona Card Properties spUser.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${managerProperties.Email}`; - spUser.imageInitials = imageInitials && imageInitials.length > 0 ? `${imageInitials[0] + spUser.imageInitials = imageInitials && imageInitials.length > 0 ? `${imageInitials[0] .substring(0, 1) - .toUpperCase()}${imageInitials[1] ? imageInitials[1].substring(0, 1).toUpperCase():''}` : ''; + .toUpperCase()}${imageInitials[1] ? imageInitials[1].substring(0, 1).toUpperCase() : ''}` : ''; spUser.text = managerProperties.DisplayName; spUser.tertiaryText = managerProperties.Email; spUser.secondaryText = managerProperties.Title; @@ -160,9 +197,9 @@ export default class TreeOrgChart extends React.Component< const imageInitials: string[] = managerProperties.DisplayName.split(" "); spUser.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${managerProperties.Email}`; - spUser.imageInitials = imageInitials && imageInitials.length > 0 ? `${imageInitials[0] + spUser.imageInitials = imageInitials && imageInitials.length > 0 ? `${imageInitials[0] .substring(0, 1) - .toUpperCase()}${imageInitials[1] ? imageInitials[1].substring(0, 1).toUpperCase(): ''}` : ''; + .toUpperCase()}${imageInitials[1] ? imageInitials[1].substring(0, 1).toUpperCase() : ''}` : ''; spUser.text = managerProperties.DisplayName; spUser.tertiaryText = managerProperties.Email; spUser.secondaryText = managerProperties.Title; @@ -184,6 +221,30 @@ export default class TreeOrgChart extends React.Component< return treeChildren; } + //buildTeamLeaderOrganizationChart + private async buildTeamLeaderOrganizationChart(teamleaderUserProperties: any) { + let teamleader: IPersonaSharedProps = {}; + const tlImageInitials: string[] = teamleaderUserProperties.DisplayName.split( + " " + ); + teamleader.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${teamleaderUserProperties.Email}`; + if (tlImageInitials.length > 1) { + teamleader.imageInitials = `${tlImageInitials[0] + .substring(0, 1) + .toUpperCase()}${tlImageInitials[1] ? tlImageInitials[1].substring(0, 1).toUpperCase() : ''}`; + } + teamleader.text = teamleaderUserProperties.DisplayName; + teamleader.tertiaryText = teamleaderUserProperties.Email; + teamleader.secondaryText = teamleaderUserProperties.Title; + const teamleaderCard = ( + ); + + const usersDirectReports: any[] = await this.getChildren( + teamleaderUserProperties.DirectReports + ); + return { person: teamleaderCard, treeChildren: usersDirectReports }; + + } /* Build My Team Organization Chart @parm: currentUserProperties @@ -210,7 +271,7 @@ export default class TreeOrgChart extends React.Component< // PersonaCard Props manager.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${managerProperties.Email}`; if (imageInitials) - manager.imageInitials = `${imageInitials[0]}${imageInitials[1] ? imageInitials[1]: ''}`.toUpperCase(); + manager.imageInitials = `${imageInitials[0]}${imageInitials[1] ? imageInitials[1] : ''}`.toUpperCase(); manager.text = managerProperties.DisplayName; manager.tertiaryText = managerProperties.Email; manager.secondaryText = managerProperties.Title; @@ -230,9 +291,9 @@ export default class TreeOrgChart extends React.Component< " " ); me.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${currentUserProperties.Email}`; - me.imageInitials = me.imageInitials && me.imageInitials.length > 0 ?`${meImageInitials[0] + me.imageInitials = me.imageInitials && me.imageInitials.length > 0 ? `${meImageInitials[0] .substring(0, 1) - .toUpperCase()}${meImageInitials[1] ? meImageInitials[1].substring(0, 1).toUpperCase():''}` : ''; + .toUpperCase()}${meImageInitials[1] ? meImageInitials[1].substring(0, 1).toUpperCase() : ''}` : ''; me.text = currentUserProperties.DisplayName; me.tertiaryText = currentUserProperties.Email; me.secondaryText = currentUserProperties.Title; @@ -259,9 +320,9 @@ export default class TreeOrgChart extends React.Component< const peerProperties = await this.SPService.getUserProperties(userPeer); imageInitials = peerProperties.DisplayName.split(" "); peer.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${peerProperties.Email}`; - peer.imageInitials = peer.imageInitials && peer.imageInitials.length>0 ? `${imageInitials[0] + peer.imageInitials = peer.imageInitials && peer.imageInitials.length > 0 ? `${imageInitials[0] .substring(0, 1) - .toUpperCase()}${imageInitials[1] ? imageInitials[1].substring(0, 1).toUpperCase():''}` : ''; + .toUpperCase()}${imageInitials[1] ? imageInitials[1].substring(0, 1).toUpperCase() : ''}` : ''; peer.text = peerProperties.DisplayName; peer.tertiaryText = peerProperties.Email; peer.secondaryText = peerProperties.Title; @@ -279,6 +340,12 @@ export default class TreeOrgChart extends React.Component< } // Render public render(): React.ReactElement { + const showEditOther: boolean = this.props.displayMode === DisplayMode.Edit && this.props.viewType === TreeOrgChartType.ShowOtherTeam; + let selectedTeamleader: string | undefined = undefined; + if (showEditOther && this.props.teamLeader && this.props.teamLeader.length > 0 && this.props.teamLeader.split('|').length === 3) { + selectedTeamleader = this.props.teamLeader.split('|')[2]; + } + return (
+ {showEditOther && (
+ { + if (this.props.updateTeamLeader) { + if (items.length > 0) + this.props.updateTeamLeader(items[0].loginName); + else { + this.props.updateTeamLeader(''); + } + } + }} + showHiddenInUI={false} + principalTypes={[PrincipalType.User]} + resolveDelay={1000} /> +
)} {this.state.isLoading ? (