From 50cdb5d51a6b110e0c9d1a62e5e59de6f9fe4cf9 Mon Sep 17 00:00:00 2001 From: AJIXuMuK Date: Sun, 13 Sep 2020 16:58:34 -0700 Subject: [PATCH 01/59] FieldRendererHelper import fix in docs --- .../controls/fields/FieldRendererHelper.md | 2 +- package-lock.json | 231 ++++++++++-------- 2 files changed, 129 insertions(+), 104 deletions(-) diff --git a/docs/documentation/docs/controls/fields/FieldRendererHelper.md b/docs/documentation/docs/controls/fields/FieldRendererHelper.md index 10b48e801..503eeea22 100644 --- a/docs/documentation/docs/controls/fields/FieldRendererHelper.md +++ b/docs/documentation/docs/controls/fields/FieldRendererHelper.md @@ -7,7 +7,7 @@ FieldRendererHelper class is used to automatically apply needed Field Control ba - Import the following modules to your component: ```TypeScript -import { FieldRendererHelper } from "@pnp/spfx-controls-react/lib/Utilities/FieldRendererHelper"; +import { FieldRendererHelper } from "@pnp/spfx-controls-react/lib/Utilities"; ``` - Use the `FieldRendererHelper.getFieldRenderer` method to asynchronously request proper React control (As the method returns `Promise` it should be called in one of React component lifecycle methods, for example, `componentWillMount` that will occur before `render`): diff --git a/package-lock.json b/package-lock.json index aea7ecb3f..fdc7e6836 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,9 +31,9 @@ } }, "@fluentui/date-time-utilities": { - "version": "7.7.0", - "resolved": "https://registry.npmjs.org/@fluentui/date-time-utilities/-/date-time-utilities-7.7.0.tgz", - "integrity": "sha512-rgtGX5x1AeYUfilfkgP6ag+ZKx41BJcUs16k6iSxXxd/mt00DAPOGY8ODGikKFpjGKcUwjKfYBssyKkVHDucfA==", + "version": "7.8.0", + "resolved": "https://registry.npmjs.org/@fluentui/date-time-utilities/-/date-time-utilities-7.8.0.tgz", + "integrity": "sha512-qzlTp3t+PghebJsLK9JwZr91qBRZ/fOml8TQCIjdtsEn4mH6/ciCwir7Fj8iOEkwwTC0iKsEr1jfsITtJKWSmA==", "dev": true, "requires": { "@uifabric/set-version": "^7.0.22", @@ -66,9 +66,9 @@ } }, "@fluentui/react-focus": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@fluentui/react-focus/-/react-focus-7.15.0.tgz", - "integrity": "sha512-xbxB0cbyEoUfQZ19pAqBeWCYJ/4IOu1FG4bhVjDimqSD7qKwJbLlJSDNwmHr05SWprdhmqJe23KOwsHMgyvnrw==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@fluentui/react-focus/-/react-focus-7.16.0.tgz", + "integrity": "sha512-TwB4Av7ID70ejisDIGkCZGKOxlquSazr6W+9Jv1JQAvsBLuj5XOspFJH4/Igjniw1LeO9QmAvFZeh/XRShiObw==", "dev": true, "requires": { "@fluentui/keyboard-key": "^0.2.11", @@ -135,7 +135,6 @@ "version": "0.3.0", "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-0.3.0.tgz", "integrity": "sha512-zHeH1PAmoFB3OkgU8f51E3oGHrL/CjuvdPBlb1SGpByUGNihAgH/CwvJohV9z0yPDkq+chfNUmxWA/oDVpbh6Q==", - "dev": true, "requires": { "@uifabric/set-version": "^7.0.22", "tslib": "^1.10.0" @@ -144,8 +143,7 @@ "tslib": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", - "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==", - "dev": true + "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==" } } }, @@ -1238,9 +1236,9 @@ }, "dependencies": { "ajv": { - "version": "6.12.4", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz", - "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==", + "version": "6.12.5", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz", + "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==", "dev": true, "requires": { "fast-deep-equal": "^3.1.1", @@ -1548,9 +1546,9 @@ } }, "@microsoft/load-themed-styles": { - "version": "1.10.82", - "resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.10.82.tgz", - "integrity": "sha512-p92TRErd5xpYkSy7TjNDs+0LmxDBSusmLSgnWCv7xZf9DGXZCW08ZiUVlbsaj3e49kGskOaWQvarMDejm2b+FQ==" + "version": "1.10.90", + "resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.10.90.tgz", + "integrity": "sha512-nJaQ6Yij68+GeaSt5ZgK70l5dn2aNGlc9EeES2B054anZTmmBhfaGpciIoSyPZrOg6PSAJjGWTXwd1ovMKOk1w==" }, "@microsoft/loader-cased-file": { "version": "1.11.0", @@ -2822,9 +2820,9 @@ }, "dependencies": { "@types/node": { - "version": "10.17.29", - "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.29.tgz", - "integrity": "sha512-zLo9rjUeQ5+QVhOufDwrb3XKyso31fJBJnk9wUUQIBDExF/O4LryvpOfozfUaxgqifTnlt7FyqsAPXUq5yFZSA==", + "version": "10.17.32", + "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.32.tgz", + "integrity": "sha512-EUq+cjH/3KCzQHikGnNbWAGe548IFLSm93Vl8xA7EuYEEATiyOVDyEVuGkowL7c9V69FF/RiZSAOCFPApMs/ig==", "dev": true }, "minimist": { @@ -2856,9 +2854,9 @@ }, "dependencies": { "@types/node": { - "version": "10.17.29", - "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.29.tgz", - "integrity": "sha512-zLo9rjUeQ5+QVhOufDwrb3XKyso31fJBJnk9wUUQIBDExF/O4LryvpOfozfUaxgqifTnlt7FyqsAPXUq5yFZSA==", + "version": "10.17.32", + "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.32.tgz", + "integrity": "sha512-EUq+cjH/3KCzQHikGnNbWAGe548IFLSm93Vl8xA7EuYEEATiyOVDyEVuGkowL7c9V69FF/RiZSAOCFPApMs/ig==", "dev": true } } @@ -3463,10 +3461,11 @@ } }, "@uifabric/react-hooks": { - "version": "7.11.0", - "resolved": "https://registry.npmjs.org/@uifabric/react-hooks/-/react-hooks-7.11.0.tgz", - "integrity": "sha512-iU7c+JR+rY5kBTPmrF8F6iJBQw309MX/MvOx6ElhmNceBaa8BqDuqR9+TVfkH+Bxp37bmZnCaQF5w4+QWHZ81g==", + "version": "7.13.0", + "resolved": "https://registry.npmjs.org/@uifabric/react-hooks/-/react-hooks-7.13.0.tgz", + "integrity": "sha512-A7K0YFHHr10hB/txsqpPX6PhNhHEv8U7JpY3O81oqlZwSsHroJklQdd897JkAYJUUR+gWe2kQyXkkcaMDdqXjg==", "requires": { + "@fluentui/react-window-provider": "^0.3.0", "@uifabric/set-version": "^7.0.22", "@uifabric/utilities": "^7.31.0", "tslib": "^1.10.0" @@ -3589,20 +3588,20 @@ } }, "office-ui-fabric-react": { - "version": "7.134.1", - "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-7.134.1.tgz", - "integrity": "sha512-yQhPdt5kQfzI/MQnqQMu9lf2mgdHSogEfVIYgfOjbvfMJoUzqA/hH3X2Z7RbncdJ/ca2H+GXVp5GvSgahCOs6g==", + "version": "7.137.1", + "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-7.137.1.tgz", + "integrity": "sha512-6m1M9m5psaJqhWwroVp1L0G8q66scLMsQRi+gQ/fY3f75ipGSABGeQ86d4P0ilKaYcLVYIzosocPIZKLbBVpnQ==", "dev": true, "requires": { - "@fluentui/date-time-utilities": "^7.7.0", - "@fluentui/react-focus": "^7.15.0", + "@fluentui/date-time-utilities": "^7.8.0", + "@fluentui/react-focus": "^7.16.0", "@fluentui/react-icons": "^0.3.0", "@fluentui/react-window-provider": "^0.3.0", "@microsoft/load-themed-styles": "^1.10.26", "@uifabric/foundation": "^7.9.0", "@uifabric/icons": "^7.5.0", "@uifabric/merge-styles": "^7.18.0", - "@uifabric/react-hooks": "^7.11.0", + "@uifabric/react-hooks": "^7.13.0", "@uifabric/set-version": "^7.0.22", "@uifabric/styling": "^7.16.0", "@uifabric/utilities": "^7.31.0", @@ -4891,9 +4890,9 @@ } }, "bl": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.2.tgz", - "integrity": "sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==", + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.3.tgz", + "integrity": "sha512-pvcNpa0UU69UT341rO6AYy4FVAIkUHuZXRIWbq+zHnsVcRzDDjIAhGuuYoi0d//cwIwtt4pkpKycWEfjdV+vww==", "dev": true, "requires": { "readable-stream": "^2.3.5", @@ -5141,15 +5140,15 @@ } }, "browserslist": { - "version": "4.14.0", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.0.tgz", - "integrity": "sha512-pUsXKAF2lVwhmtpeA3LJrZ76jXuusrNyhduuQs7CDFf9foT4Y38aQOserd2lMe5DSSrjf3fx34oHwryuvxAUgQ==", + "version": "4.14.2", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.2.tgz", + "integrity": "sha512-HI4lPveGKUR0x2StIz+2FXfDk9SfVMrxn6PLh1JeGUwcuoDkdKZebWiyLRJ68iIPDpMI4JLVDf7S7XzslgWOhw==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30001111", - "electron-to-chromium": "^1.3.523", + "caniuse-lite": "^1.0.30001125", + "electron-to-chromium": "^1.3.564", "escalade": "^3.0.2", - "node-releases": "^1.1.60" + "node-releases": "^1.1.61" } }, "bser": { @@ -5424,9 +5423,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001122", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001122.tgz", - "integrity": "sha512-pxjw28CThdrqfz06nJkpAc5SXM404TXB/h5f4UJX+rrXJKE/1bu/KAILc2AY+O6cQIFtRjV9qOR2vaEp9LDGUA==", + "version": "1.0.30001129", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001129.tgz", + "integrity": "sha512-9945fTVKS810DZITpsAbuhQG7Lam0tEfVbZlsBaCFZaszepbryrArS05PWmJSBQ6mta+v9iz0pUIAbW1eBILIg==", "dev": true }, "capture-exit": { @@ -6236,9 +6235,9 @@ }, "dependencies": { "ajv": { - "version": "6.12.4", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz", - "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==", + "version": "6.12.5", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz", + "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==", "dev": true, "requires": { "fast-deep-equal": "^3.1.1", @@ -6623,9 +6622,9 @@ }, "dependencies": { "abab": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.4.tgz", - "integrity": "sha512-Eu9ELJWCz/c1e9gTiCY+FceWxcqzjYEbqMgtndnuSqZSUCOL73TWNK2mHfIj4Cw2E/ongOp+JISVNCmovt2KYQ==", + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz", + "integrity": "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==", "dev": true }, "tr46": { @@ -7080,9 +7079,9 @@ }, "dependencies": { "domelementtype": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz", - "integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.2.tgz", + "integrity": "sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA==", "dev": true } } @@ -7136,9 +7135,9 @@ } }, "dot-prop": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.2.0.tgz", - "integrity": "sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz", + "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==", "dev": true, "requires": { "is-obj": "^2.0.0" @@ -7272,9 +7271,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.3.558", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.558.tgz", - "integrity": "sha512-r6th6b/TU2udqVoUDGWHF/z2ACJVnEei0wvWZf/nt+Qql1Vxh60ZYPhQP46j4D73T/Jou7hl4TqQfxben+qJTg==", + "version": "1.3.567", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.567.tgz", + "integrity": "sha512-1aKkw0Hha1Bw9JA5K5PT5eFXC/TXbkJvUfNSNEciPUMgSIsRJZM1hF2GUEAGZpAbgvd8En21EA+Lv820KOhvqA==", "dev": true }, "elliptic": { @@ -9472,9 +9471,9 @@ }, "dependencies": { "ajv": { - "version": "6.12.4", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz", - "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==", + "version": "6.12.5", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz", + "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==", "dev": true, "requires": { "fast-deep-equal": "^3.1.1", @@ -10434,9 +10433,9 @@ "dev": true }, "is-callable": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.0.tgz", - "integrity": "sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==" + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.1.tgz", + "integrity": "sha512-wliAfSzx6V+6WfMOmus1xy0XvSgf/dlStkvTfq7F0g4bOIW0PSUbnyse3NhDwdyYS1ozfUtAAySqTws3z9Eqgg==" }, "is-ci": { "version": "1.2.1", @@ -10580,6 +10579,11 @@ "integrity": "sha1-aRC8pdqMleeEtXUbl2z1oQ/uNtI=", "dev": true }, + "is-negative-zero": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.0.tgz", + "integrity": "sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=" + }, "is-number": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", @@ -13492,9 +13496,9 @@ } }, "moment": { - "version": "2.27.0", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz", - "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ==" + "version": "2.28.0", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.28.0.tgz", + "integrity": "sha512-Z5KOjYmnHyd/ukynmFd/WwyXHd7L4J9vTI/nn5Ap9AVUgaAE15VvQ9MOGmJJygEUklupqIrFnor/tjTwRU+tQw==" }, "move-concurrently": { "version": "1.0.1", @@ -13758,9 +13762,9 @@ } }, "node-releases": { - "version": "1.1.60", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.60.tgz", - "integrity": "sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==", + "version": "1.1.61", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.61.tgz", + "integrity": "sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g==", "dev": true }, "node-sass": { @@ -14036,14 +14040,35 @@ } }, "object.assign": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz", - "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.1.tgz", + "integrity": "sha512-VT/cxmx5yaoHSOTSyrCygIDFco+RsibY2NM0a4RdEeY/4KgqezwFtK1yr3U67xYhqJSlASm2pKhLVzPj2lr4bA==", "requires": { - "define-properties": "^1.1.2", - "function-bind": "^1.1.1", - "has-symbols": "^1.0.0", - "object-keys": "^1.0.11" + "define-properties": "^1.1.3", + "es-abstract": "^1.18.0-next.0", + "has-symbols": "^1.0.1", + "object-keys": "^1.1.1" + }, + "dependencies": { + "es-abstract": { + "version": "1.18.0-next.0", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.0.tgz", + "integrity": "sha512-elZXTZXKn51hUBdJjSZGYRujuzilgXo8vSPQzjGYXLvSlGiCo8VO8ZGV3kjo9a0WNJJ57hENagwbtlRuHuzkcQ==", + "requires": { + "es-to-primitive": "^1.2.1", + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.1", + "is-callable": "^1.2.0", + "is-negative-zero": "^2.0.0", + "is-regex": "^1.1.1", + "object-inspect": "^1.8.0", + "object-keys": "^1.1.1", + "object.assign": "^4.1.0", + "string.prototype.trimend": "^1.0.1", + "string.prototype.trimstart": "^1.0.1" + } + } } }, "object.defaults": { @@ -15011,9 +15036,9 @@ }, "dependencies": { "ajv": { - "version": "6.12.4", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz", - "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==", + "version": "6.12.5", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz", + "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==", "dev": true, "requires": { "fast-deep-equal": "^3.1.1", @@ -16464,9 +16489,9 @@ } }, "rxjs": { - "version": "6.6.2", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.2.tgz", - "integrity": "sha512-BHdBMVoWC2sL26w//BCu3YzKT4s2jip/WhwsGEDmeKYBhKDZeYezVUnHatYB7L85v5xs0BAQmg6BEYJEKxBabg==", + "version": "6.6.3", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz", + "integrity": "sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==", "dev": true, "requires": { "tslib": "^1.9.0" @@ -16578,9 +16603,9 @@ }, "dependencies": { "ajv": { - "version": "6.12.4", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz", - "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==", + "version": "6.12.5", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz", + "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==", "dev": true, "requires": { "fast-deep-equal": "^3.1.1", @@ -17591,9 +17616,9 @@ "dev": true }, "node-fetch": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz", - "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==", + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", + "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==", "dev": true } } @@ -17656,9 +17681,9 @@ }, "dependencies": { "ajv": { - "version": "6.12.4", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz", - "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==", + "version": "6.12.5", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz", + "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==", "dev": true, "requires": { "fast-deep-equal": "^3.1.1", @@ -18270,14 +18295,14 @@ "dev": true }, "ua-parser-js": { - "version": "0.7.21", - "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.21.tgz", - "integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ==" + "version": "0.7.22", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.22.tgz", + "integrity": "sha512-YUxzMjJ5T71w6a8WWVcMGM6YWOTX27rCoIQgLXiWaxqXSx9D7DNjiGWn1aJIRSQ5qr0xuhra77bSIh6voR/46Q==" }, "uglify-js": { - "version": "3.10.3", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.10.3.tgz", - "integrity": "sha512-Lh00i69Uf6G74mvYpHCI9KVVXLcHW/xu79YTvH7Mkc9zyKUeSPz0owW0dguj0Scavns3ZOh3wY63J0Zb97Za2g==", + "version": "3.10.4", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.10.4.tgz", + "integrity": "sha512-kBFT3U4Dcj4/pJ52vfjCSfyLyvG9VYYuGYPmrPvAxRw/i7xHiT4VvCev+uiEMcEEiu6UNB6KgWmGtSUYIWScbw==", "dev": true, "optional": true }, @@ -18983,9 +19008,9 @@ "dev": true }, "ajv": { - "version": "6.12.4", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz", - "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==", + "version": "6.12.5", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz", + "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==", "dev": true, "requires": { "fast-deep-equal": "^3.1.1", @@ -19120,9 +19145,9 @@ } }, "whatwg-fetch": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.4.0.tgz", - "integrity": "sha512-rsum2ulz2iuZH08mJkT0Yi6JnKhwdw4oeyMjokgxd+mmqYSd9cPpOQf01TIWgjxG/U4+QR+AwKq6lSbXVxkyoQ==" + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.4.1.tgz", + "integrity": "sha512-sofZVzE1wKwO+EYPbWfiwzaKovWiZXf4coEzjGP9b2GBVgQRLQUZ2QcuPpQExGDAW5GItpEm6Tl4OU5mywnAoQ==" }, "whatwg-mimetype": { "version": "2.3.0", From 1093b3807bdfaad3eb59f4b3405d34628514c045 Mon Sep 17 00:00:00 2001 From: AJIXuMuK Date: Mon, 28 Sep 2020 10:27:21 -0500 Subject: [PATCH 02/59] v 2.1.0 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index fdc7e6836..1ac3e9d91 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@pnp/spfx-controls-react", - "version": "2.0.0", + "version": "2.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index b39f91547..be72c6feb 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@pnp/spfx-controls-react", "description": "Reusable React controls for SharePoint Framework solutions", - "version": "2.0.0", + "version": "2.1.0", "engines": { "node": ">=10" }, From 8fbf7a84eba4b1b622b9cd3ff74d8ed560030d24 Mon Sep 17 00:00:00 2001 From: AJIXuMuK Date: Mon, 28 Sep 2020 10:27:54 -0500 Subject: [PATCH 03/59] pre-commit task --- src/common/telemetry/version.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/telemetry/version.ts b/src/common/telemetry/version.ts index ff33a1842..8dd1e757d 100644 --- a/src/common/telemetry/version.ts +++ b/src/common/telemetry/version.ts @@ -1 +1 @@ -export const version: string = "2.0.0"; \ No newline at end of file +export const version: string = "2.1.0"; \ No newline at end of file From eceb6f1bca9bd373a92155b92761fa4d3bc67b64 Mon Sep 17 00:00:00 2001 From: AJIXuMuK Date: Mon, 28 Sep 2020 10:29:57 -0500 Subject: [PATCH 04/59] small docs change --- docs/documentation/docs/index.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/documentation/docs/index.md b/docs/documentation/docs/index.md index 0b25a8499..e69039049 100644 --- a/docs/documentation/docs/index.md +++ b/docs/documentation/docs/index.md @@ -5,7 +5,10 @@ This repository provides developers with a set of reusable React controls that c ![Placeholder example](./assets/placeholder-intro.png) !!! attention - The controls project has a minimal dependency on SharePoint Framework version `1.3.0`. Be aware that the controls might not work in solutions your building for SharePoint 2016 with Feature Pack 2 on-premises. As for SharePoint 2016 with Feature Pack 2 version `1.1.0` of the SharePoint framework is the only version that can be used. SharePoint 2019 on-premises uses SharePoint framework `v1.4.0` and therefore should be fine to use with these controls. + In order to migrate to `v2` it is advicded to follow this guide: [Migrating from V1](./guides/migrate-from-v1). + +!!! attention +`v2` version of the controls project has a minimal dependency on SharePoint Framework version `1.11.0`. `v1` has a minimal dependency on SharePoint Framework version `1.3.0`. Be aware that the controls might not work in solutions your building for SharePoint 2016 with Feature Pack 2 on-premises. As for SharePoint 2016 with Feature Pack 2 version `1.1.0` of the SharePoint framework is the only version that can be used. SharePoint 2019 on-premises uses SharePoint framework `v1.4.0` and therefore should be fine to use with these controls. ## Getting started From 759c6c3a5a124bad0c85103b39c774c5f12afb8d Mon Sep 17 00:00:00 2001 From: AJIXuMuK Date: Wed, 30 Sep 2020 08:43:29 -0500 Subject: [PATCH 05/59] updated docs for PeoplePicker to reference onChange instead of selectedItems --- docs/documentation/docs/controls/PeoplePicker.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/documentation/docs/controls/PeoplePicker.md b/docs/documentation/docs/controls/PeoplePicker.md index 0eae79b8e..783d22931 100644 --- a/docs/documentation/docs/controls/PeoplePicker.md +++ b/docs/documentation/docs/controls/PeoplePicker.md @@ -35,13 +35,13 @@ import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/People showtooltip={true} isRequired={true} disabled={true} - selectedItems={this._getPeoplePickerItems} + onChange={this._getPeoplePickerItems} showHiddenInUI={false} principalTypes={[PrincipalType.User]} resolveDelay={1000} /> ``` -- With the `selectedItems` property you can get the selected People in the Peoplepicker : +- With the `onChange` property you can get the selected People in the `PeoplePicker` : ```typescript private _getPeoplePickerItems(items: any[]) { From 2c098b9f1ddfa6c966313b91a011c908e9edd49a Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Mon, 5 Oct 2020 16:58:43 -0700 Subject: [PATCH 06/59] Ability to display Carousel indicators in a separate block --- docs/documentation/docs/controls/Carousel.md | 11 +- src/controls/carousel/Carousel.module.scss | 515 +++++++++--------- src/controls/carousel/Carousel.tsx | 84 +-- src/controls/carousel/ICarouselProps.ts | 24 + .../controlsTest/components/ControlsTest.tsx | 7 +- 5 files changed, 358 insertions(+), 283 deletions(-) diff --git a/docs/documentation/docs/controls/Carousel.md b/docs/documentation/docs/controls/Carousel.md index 573fd0cd7..88698f988 100644 --- a/docs/documentation/docs/controls/Carousel.md +++ b/docs/documentation/docs/controls/Carousel.md @@ -128,7 +128,9 @@ The Carousel component can be configured with the following properties: | indicatorShape | CarouselIndicatorShape | no | Specifies indicators' shape. If onRenderIndicator is provided - this property is ignored | | indicatorClassName | string | no | Specifies additional class applied to slide position indicators | | indicatorStyle | React.CSSProperties | no | Specifies additional styles applied to slide position indicators | -| onRenderIndicator | (index: number, onClick: (e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>, selectedIndex: number) => void) => JSX.Element | no | Function to render indicator element | +| onRenderIndicator | (index: number, onClick: (e: React.MouseEvent<HTMLElement> \| React.TouchEvent<HTMLElement>, selectedIndex: number) => void) => JSX.Element | no | Function to render indicator element | +| indicatorsDisplay | CarouselIndicatorsDisplay | no | Specifies display mode of the indicators. Default value `overlap`. | +| rootStyles | ICssInput | no | Allows to specify own styles for root element | enum `CarouselButtonsLocation` @@ -160,6 +162,13 @@ Provides options for carousel indicators' shape. | square | Indicators displayed as squares | | rectangle | Indicators displayed as rectangles | +enum `CarouselIndicatorsDisplay` + +Provides options for carousel indicators display mode. +| Value | Description | +| overlap | Indicators are displayed on top of the carousel content | +| block | Reserves space for indicators | + Interface `ICarouselImageProps` Allows to easily render a set of `CarouselImage` components in the carousel diff --git a/src/controls/carousel/Carousel.module.scss b/src/controls/carousel/Carousel.module.scss index 427ed0743..861be2816 100644 --- a/src/controls/carousel/Carousel.module.scss +++ b/src/controls/carousel/Carousel.module.scss @@ -1,259 +1,288 @@ @import "~office-ui-fabric-react/dist/sass/References.scss"; @keyframes slideleft { - 0% { - left: 0; - right: 0; - } - 100% { - left: -100%; - right: 100%; - } + 0% { + left: 0; + right: 0; + } + 100% { + left: -100%; + right: 100%; + } } @keyframes slideright { - 0% { - left: 0; - right: 0; - } - 100% { - left: 100%; - right: -100%; - } + 0% { + left: 0; + right: 0; + } + 100% { + left: 100%; + right: -100%; + } } @keyframes slidefromright { - 0% { - left: 100%; - right: -100%; - } - 100% { - left: 0; - right: 0; - } + 0% { + left: 100%; + right: -100%; + } + 100% { + left: 0; + right: 0; + } } @keyframes slidefromleft { - 0% { - left: -100%; - right: 100%; - } - 100% { - left: 0; - right: 0; - } + 0% { + left: -100%; + right: 100%; + } + 100% { + left: 0; + right: 0; + } +} + +.root { + display: flex; + flex-direction: column; + flex-grow: 2; +} + +.indicatorsContainer { + align-items: center; + + .indicators { + @extend .indicators; + + & > li { + background-color: "[theme: black, default: #000]"; + } + } +} + +.indicators { + z-index: 10; + display: flex; + justify-content: center; + list-style: none; + padding-inline-start: 0; + margin-block-start: 0.5em; + margin-block-end: 0.5em; + + &.rectangle > li { + width: 25px; + height: 5px; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + } + + &.square > li { + width: 10px; + height: 10px; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + } + + &.circle > li { + width: 10px; + height: 10px; + border-radius: 50%; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + } + + & > li { + flex: 0 1 auto; + text-indent: -999px; + cursor: pointer; + opacity: 0.5; + transition: opacity 0.5 ease; + margin: 0 3px; + box-sizing: content-box; + background-clip: padding-box; + + &.active { + opacity: 1; + } + } } .container { - display: flex; - - // Styles for elements container - .contentContainer { - flex-grow: 2; - position: relative; - overflow: hidden; - - .slideWrapper { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - - &.left { - left: -100%; - right: 100%; - } - - &.right { - left: 100%; - right: -100%; - } - - &.slideLeft { - animation: slideleft linear 0.6s; - } - &.slideRight { - animation: slideright linear 0.6s; - } - &.slideFromRight { - animation: slidefromright linear 0.6s; - } - &.slideFromLeft { - animation: slidefromleft linear 0.6s; - } - } - - .carouselImage { - overflow: hidden; - width: 100%; - height: 100%; - position: relative; - - .image { - width: 100%; - height: 100%; - } - - &.staticDetails { - .details { - top: 60%; - } - } - - .details { - background-color: rgba(0, 0, 0, 0.8); - box-sizing: border-box; - color: white; - height: 40%; - left: 0; - padding: 15px; - position: absolute; - right: 0; - top: 100%; - transition: all 0.5s ease; - - .title { - display: block; - @include ms-fontSize-l; - padding-bottom: 5px; - } - } - } - - &:hover { - .carouselImage.dynamicDetails { - .details { - top: 60%; - } - } - } - } - - .indicators { - position: absolute; - right: 0; - bottom: 0; - left: 0; - z-index: 10; - display: flex; - justify-content: center; - list-style: none; - - &.rectangle > li { - width: 25px; - height: 5px; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; - } - - &.square > li { - width: 10px; - height: 10px; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; - } - - &.circle > li { - width: 10px; - height: 10px; - border-radius: 50%; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; - } - - & > li { - flex: 0 1 auto; - text-indent: -999px; - cursor: pointer; - background-color: "[theme:white, default: #fff]"; - opacity: 0.5; - transition: opacity 0.5 ease; - margin: 0 3px; - box-sizing: content-box; - background-clip: padding-box; - - &.active { - opacity: 1; - } - } - } - - .loadingComponent { - margin: auto; - } - - // Bottons containers - .buttonLocations { - cursor: pointer; - flex-direction: column; - } - - .centralButtonsContainer { - @extend .buttonLocations; - justify-content: center; - } - .topButtonsContainer { - @extend .buttonLocations; - justify-content: left; - } - .bottomButtonsContainer { - @extend .buttonLocations; - justify-content: left; - flex-direction: column-reverse; - } - - // ButtonContainer display mode - .buttonsOnlyPrevButton { - position: absolute; - left: 0; - z-index: 1; - } - .buttonsOnlyPrevButton:hover { - cursor: pointer; - } - - // Buttons styles - .buttonsOnlyNextButton { - position: absolute; - left: -32px; - z-index: 1; - } - .buttonsOnlyNextButton:hover { - cursor: pointer; - } - - .buttonsContainer { - display: flex; - align-items: center; - background-color: transparent; - cursor: pointer; - } - .buttonsOnlyContainer { - @extend .buttonsContainer; - position: relative; - width: 0px; - } - - .blockButtonsContainer { - @extend .buttonsContainer; - min-height: 100%; - min-width: 32px; - } - .blockButtonsContainer:hover { - @extend .buttonsContainer; - background-color: #f4f4f4; - opacity: 0.5; - } - - .hiddenButtonsContainer { - @extend .buttonsContainer; - min-height: 100%; - min-width: 32px; - opacity: 0; - } - .hiddenButtonsContainer:hover { - opacity: 0.5; - background-color: #f4f4f4; - } + display: flex; + + // Styles for elements container + .contentContainer { + flex-grow: 2; + position: relative; + overflow: hidden; + + .slideWrapper { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + + &.left { + left: -100%; + right: 100%; + } + + &.right { + left: 100%; + right: -100%; + } + + &.slideLeft { + animation: slideleft linear 0.6s; + } + &.slideRight { + animation: slideright linear 0.6s; + } + &.slideFromRight { + animation: slidefromright linear 0.6s; + } + &.slideFromLeft { + animation: slidefromleft linear 0.6s; + } + } + + .carouselImage { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + + .image { + width: 100%; + height: 100%; + } + + &.staticDetails { + .details { + top: 60%; + } + } + + .details { + background-color: rgba(0, 0, 0, 0.8); + box-sizing: border-box; + color: white; + height: 40%; + left: 0; + padding: 15px; + position: absolute; + right: 0; + top: 100%; + transition: all 0.5s ease; + + .title { + display: block; + @include ms-fontSize-l; + padding-bottom: 5px; + } + } + } + + .indicators { + @extend .indicators; + + position: absolute; + right: 0; + bottom: 0; + left: 0; + + & > li { + background-color: "[theme:white, default: #fff]"; + } + } + + &:hover { + .carouselImage.dynamicDetails { + .details { + top: 60%; + } + } + } + } + + .loadingComponent { + margin: auto; + } + + // Bottons containers + .buttonLocations { + cursor: pointer; + flex-direction: column; + } + + .centralButtonsContainer { + @extend .buttonLocations; + justify-content: center; + } + .topButtonsContainer { + @extend .buttonLocations; + justify-content: left; + } + .bottomButtonsContainer { + @extend .buttonLocations; + justify-content: left; + flex-direction: column-reverse; + } + + // ButtonContainer display mode + .buttonsOnlyPrevButton { + position: absolute; + left: 0; + z-index: 1; + } + .buttonsOnlyPrevButton:hover { + cursor: pointer; + } + + // Buttons styles + .buttonsOnlyNextButton { + position: absolute; + left: -32px; + z-index: 1; + } + .buttonsOnlyNextButton:hover { + cursor: pointer; + } + + .buttonsContainer { + display: flex; + align-items: center; + background-color: transparent; + cursor: pointer; + } + .buttonsOnlyContainer { + @extend .buttonsContainer; + position: relative; + width: 0px; + } + + .blockButtonsContainer { + @extend .buttonsContainer; + min-height: 100%; + min-width: 32px; + } + .blockButtonsContainer:hover { + @extend .buttonsContainer; + background-color: #f4f4f4; + opacity: 0.5; + } + + .hiddenButtonsContainer { + @extend .buttonsContainer; + min-height: 100%; + min-width: 32px; + opacity: 0; + } + .hiddenButtonsContainer:hover { + opacity: 0.5; + background-color: #f4f4f4; + } } diff --git a/src/controls/carousel/Carousel.tsx b/src/controls/carousel/Carousel.tsx index 5c080c593..e9f908ca0 100644 --- a/src/controls/carousel/Carousel.tsx +++ b/src/controls/carousel/Carousel.tsx @@ -12,6 +12,7 @@ import { Spinner } from "office-ui-fabric-react/lib/Spinner"; import { isArray } from "@pnp/common"; import * as telemetry from '../../common/telemetry'; import CarouselImage from "./CarouselImage"; +import { CarouselIndicatorsDisplay } from "./ICarouselProps"; export class Carousel extends React.Component { private _intervalId: number | undefined; @@ -67,7 +68,9 @@ export class Carousel extends React.Component { nextButtonIconName = 'ChevronRight', loadingComponent = , pauseOnHover, - interval + interval, + indicatorsDisplay, + rootStyles } = this.props; const processing = processingState === ProcessingState.processing; @@ -78,43 +81,48 @@ export class Carousel extends React.Component { const element = this.getElementToDisplay(currentIndex); return ( -
-
{ if (!prevButtonDisabled) { this.onCarouselButtonClicked(false); } }} > - { this.onCarouselButtonClicked(false); }} /> -
- -
- { - processing && -
- {loadingComponent} -
- } - - { - !processing && this.renderSlide(element) - } - {this.getIndicatorsElement()} -
- -
{ if (!nextButtonDisabled) { this.onCarouselButtonClicked(true); } }}> - { this.onCarouselButtonClicked(true); }} /> +
+
+
{ if (!prevButtonDisabled) { this.onCarouselButtonClicked(false); } }} > + { this.onCarouselButtonClicked(false); }} /> +
+
+ { + processing && +
+ {loadingComponent} +
+ } + + { + !processing && this.renderSlide(element) + } + {indicatorsDisplay !== CarouselIndicatorsDisplay.block && this.getIndicatorsElement()} +
+ +
{ if (!nextButtonDisabled) { this.onCarouselButtonClicked(true); } }}> + { this.onCarouselButtonClicked(true); }} /> +
+ {indicatorsDisplay === CarouselIndicatorsDisplay.block && +
+ {this.getIndicatorsElement()} +
}
); } @@ -342,7 +350,7 @@ export class Carousel extends React.Component { if (nextButtonClicked && this.props.onMoveNextClicked) { this.props.onMoveNextClicked(nextIndex); } - else if(this.props.onMovePrevClicked) { + else if (this.props.onMovePrevClicked) { this.props.onMovePrevClicked(nextIndex); } } diff --git a/src/controls/carousel/ICarouselProps.ts b/src/controls/carousel/ICarouselProps.ts index 3d06a780d..3e1c57343 100644 --- a/src/controls/carousel/ICarouselProps.ts +++ b/src/controls/carousel/ICarouselProps.ts @@ -46,6 +46,20 @@ export enum CarouselIndicatorShape { rectangle } +/** + * Provides options for carousel indicators display mode + */ +export enum CarouselIndicatorsDisplay { + /** + * Indicators are displayed on top of the carousel content + */ + overlap = 1, + /** + * Reserves space for indicators + */ + block +} + export interface ICarouselProps { /** * Specifies the initial index of the element to be displayed. @@ -183,4 +197,14 @@ export interface ICarouselProps { */ onRenderIndicator?: (index: number, onClick: (e: React.MouseEvent | React.TouchEvent, selectedIndex: number) => void) => JSX.Element; + /** + * Specifies display mode of the indicators + */ + indicatorsDisplay?: CarouselIndicatorsDisplay; + + /** + * Allows to specify own styles for root element. + */ + rootStyles?: ICssInput; + } diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx index 02d6d39dd..7e59e3bd7 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/src/webparts/controlsTest/components/ControlsTest.tsx @@ -33,7 +33,7 @@ import { TermLabelAction, TermActionsDisplayMode } from '../../../controls/taxon import { ListItemAttachments } from '../../../ListItemAttachments'; import { RichText } from '../../../RichText'; import { Link } from 'office-ui-fabric-react/lib/components/Link'; -import { Carousel, CarouselButtonsLocation, CarouselButtonsDisplay, CarouselIndicatorShape } from '../../../controls/carousel'; +import { Carousel, CarouselButtonsLocation, CarouselButtonsDisplay, CarouselIndicatorShape, CarouselIndicatorsDisplay } from '../../../controls/carousel'; import { TimeDisplayControlType } from '../../../controls/dateTimePicker/TimeDisplayControlType'; import { GridLayout } from '../../../GridLayout'; import { ComboBoxListItemPicker } from '../../../controls/listItemPicker/ComboBoxListItemPicker'; @@ -61,6 +61,7 @@ import { Pagination } from '../../../controls/pagination'; import CarouselImage from '../../../controls/carousel/CarouselImage'; import { FieldCollectionData, CustomCollectionFieldType } from '../../../FieldCollectionData'; import { Accordion } from '../../..'; +import { mergeStyles } from 'office-ui-fabric-react/lib/Styling'; /** * The sample data below was randomly generated (except for the title). It is used by the grid layout @@ -1175,6 +1176,7 @@ export default class ControlsTest extends React.Component { console.log(`Next button clicked: ${index}`); }} onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }} + rootStyles={mergeStyles({ + backgroundColor: '#C3C3C3' + })} />
From c79a19b8e253284572a39de4b129dc6193b28175 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Mon, 5 Oct 2020 17:04:02 -0700 Subject: [PATCH 07/59] indicatorsContainerStyles --- docs/documentation/docs/controls/Carousel.md | 1 + src/controls/carousel/Carousel.tsx | 5 +++-- src/controls/carousel/ICarouselProps.ts | 5 +++++ 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/docs/documentation/docs/controls/Carousel.md b/docs/documentation/docs/controls/Carousel.md index 88698f988..9332937da 100644 --- a/docs/documentation/docs/controls/Carousel.md +++ b/docs/documentation/docs/controls/Carousel.md @@ -131,6 +131,7 @@ The Carousel component can be configured with the following properties: | onRenderIndicator | (index: number, onClick: (e: React.MouseEvent<HTMLElement> \| React.TouchEvent<HTMLElement>, selectedIndex: number) => void) => JSX.Element | no | Function to render indicator element | | indicatorsDisplay | CarouselIndicatorsDisplay | no | Specifies display mode of the indicators. Default value `overlap`. | | rootStyles | ICssInput | no | Allows to specify own styles for root element | +| indicatorsContainerStyles | ICssInput | no | Allows to specify own styles for indicators container when indicatorsDisplay is set to "block" | enum `CarouselButtonsLocation` diff --git a/src/controls/carousel/Carousel.tsx b/src/controls/carousel/Carousel.tsx index e9f908ca0..2f5436c61 100644 --- a/src/controls/carousel/Carousel.tsx +++ b/src/controls/carousel/Carousel.tsx @@ -70,7 +70,8 @@ export class Carousel extends React.Component { pauseOnHover, interval, indicatorsDisplay, - rootStyles + rootStyles, + indicatorsContainerStyles } = this.props; const processing = processingState === ProcessingState.processing; @@ -120,7 +121,7 @@ export class Carousel extends React.Component {
{indicatorsDisplay === CarouselIndicatorsDisplay.block && -
+
{this.getIndicatorsElement()}
}
diff --git a/src/controls/carousel/ICarouselProps.ts b/src/controls/carousel/ICarouselProps.ts index 3e1c57343..560721c9b 100644 --- a/src/controls/carousel/ICarouselProps.ts +++ b/src/controls/carousel/ICarouselProps.ts @@ -207,4 +207,9 @@ export interface ICarouselProps { */ rootStyles?: ICssInput; + /** + * Allows to specify own styles for indicators container when indicatorsDisplay is set to "block". + */ + indicatorsContainerStyles?: ICssInput; + } From e3a32442c484dc5278f51cb3d7b16ac2d7608c3d Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Mon, 5 Oct 2020 17:10:32 -0700 Subject: [PATCH 08/59] changelog --- CHANGELOG.JSON | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON index 0378530df..5627a6b2e 100644 --- a/CHANGELOG.JSON +++ b/CHANGELOG.JSON @@ -1,5 +1,16 @@ { "versions": [ + { + "version": "2.1.0", + "changes": { + "new": [], + "enhancements": [ + "`Carousel`: Ability to display indicators in a dedicated block [#681](https://github.com/pnp/sp-dev-fx-controls-react/pull/681)" + ], + "fixes": [] + }, + "contributions": [] + }, { "version": "2.0.0", "changes": { From 4fa08a2c0668cf6959196b3fee50ea644e202899 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Mon, 5 Oct 2020 17:11:00 -0700 Subject: [PATCH 09/59] changelog after-commit --- CHANGELOG.md | 6 ++++++ docs/documentation/docs/about/release-notes.md | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ea7307729..b23bf3f44 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Releases +## 2.1.0 + +### Enhancements + +- `Carousel`: Ability to display indicators in a dedicated block [#681](https://github.com/pnp/sp-dev-fx-controls-react/pull/681) + ## 2.0.0 ### Enhancements diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md index ea7307729..b23bf3f44 100644 --- a/docs/documentation/docs/about/release-notes.md +++ b/docs/documentation/docs/about/release-notes.md @@ -1,5 +1,11 @@ # Releases +## 2.1.0 + +### Enhancements + +- `Carousel`: Ability to display indicators in a dedicated block [#681](https://github.com/pnp/sp-dev-fx-controls-react/pull/681) + ## 2.0.0 ### Enhancements From b2cd367ded8d74d080b7282ab8c0b0dddd760dbd Mon Sep 17 00:00:00 2001 From: aaclage Date: Tue, 6 Oct 2020 12:53:37 +0200 Subject: [PATCH 10/59] This new feature is a extension of ListView with 2 new properties. Properties: dragDropFiles - Specify the drag and drop files area option. Default false. onDrop - Event handler returns files from drag and drop. --- .../docs/assets/ListView-DragDrop.png | Bin 0 -> 17313 bytes docs/documentation/docs/controls/ListView.md | 21 +++- src/controls/listView/IListView.ts | 11 ++ .../listView/ListView.DragDrop.module.scss | 26 ++++ src/controls/listView/ListView.tsx | 114 +++++++++++++++--- .../controlsTest/components/ControlsTest.tsx | 20 ++- 6 files changed, 170 insertions(+), 22 deletions(-) create mode 100644 docs/documentation/docs/assets/ListView-DragDrop.png create mode 100644 src/controls/listView/ListView.DragDrop.module.scss diff --git a/docs/documentation/docs/assets/ListView-DragDrop.png b/docs/documentation/docs/assets/ListView-DragDrop.png new file mode 100644 index 0000000000000000000000000000000000000000..e711b037e199c5c1e712b20b782c511cf2a3f336 GIT binary patch literal 17313 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 + groupByFields={groupByFields} + dragDropFiles={true} + onDrop={this._getDropFiles} /> ``` - The control provides full text filtering through all the columns. If you want to exectue filtering on the specified columns, you can use syntax : ``:``. Use `':'` as a separator between column name and value. Control support both `'fieldName'` and `'name'` properties of IColumn interface. @@ -41,7 +47,6 @@ private _getSelection(items: any[]) { console.log('Selected items:', items); } ``` - - With the `groupByFields` property you can define an array of field objects which will be used for grouping. **Important**: the same order of the fields defines how grouping will be applied. In the snippet the `ListView` control will first group by the `Extension` and after that by the `Author` field. @@ -61,6 +66,16 @@ const groupByFields: IGrouping[] = [ !!! note "Extend ListView with a ContextualMenu" To extend the `ListView` control with a [ContextualMenu](https://developer.microsoft.com/en-us/fabric#/components/contextualmenu) refer to [ListView.ContextualMenu](./ListView.ContextualMenu.md). +- With the `onDrop` handler you can define a method that returns files that where drag and drop by user in the list view: + +```typescript +private _getDropFiles = (files) => { + for (var i = 0; i < files.length; i++) { + console.log(files[i].name); + } + } +``` + ## Implementation The ListView control can be configured with the following properties: @@ -78,6 +93,8 @@ The ListView control can be configured with the following properties: | filterPlaceHolder | string | no | Specify the placeholder for the filter text box. Default 'Search' | | showFilter | boolean | no | Specify if the filter text box should be rendered. | | defaultFilter | string | no | Specify the initial filter to be applied to the list. | +| dragDropFiles | boolean | no | Specify the drag and drop files area option. Default false. | +| onDrop | file | no | Event handler returns files from drag and drop. | The `IViewField` has the following implementation: diff --git a/src/controls/listView/IListView.ts b/src/controls/listView/IListView.ts index 29ba45bd4..8a87e8158 100644 --- a/src/controls/listView/IListView.ts +++ b/src/controls/listView/IListView.ts @@ -9,6 +9,14 @@ export enum GroupOrder { } export interface IListViewProps { + /** + * Specify if drag and drop option is selected. + **/ + dragDropFiles?: boolean; + /** + * Handler to return the files from drag and drop. + **/ + onDrop?: any; /** * Specify the name of the file URL path which will be used to show the file icon. */ @@ -73,6 +81,9 @@ export interface IListViewState { columns?: IColumn[]; groups?: IGroup[]; + + dragStatus?: boolean; + } export interface IGrouping { diff --git a/src/controls/listView/ListView.DragDrop.module.scss b/src/controls/listView/ListView.DragDrop.module.scss new file mode 100644 index 000000000..b5f2a124a --- /dev/null +++ b/src/controls/listView/ListView.DragDrop.module.scss @@ -0,0 +1,26 @@ +.DragDropArea { + display: inline-block; + position: relative; + min-height: 150px; +} + +.DragDropAreaBorder { + border: dashed grey 1px; + background-color: rgba(255,255,255,.6); + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 9999; +} + +.DragDropAreaZone { + position: absolute; + top: 35%; + right: 0; + left: 0; + text-align: center; + color: grey; + font-size: 34px; +} diff --git a/src/controls/listView/ListView.tsx b/src/controls/listView/ListView.tsx index bdad99afb..43a9aa9a0 100644 --- a/src/controls/listView/ListView.tsx +++ b/src/controls/listView/ListView.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import styles from './ListView.DragDrop.module.scss'; import { DetailsList, DetailsListLayoutMode, Selection, SelectionMode, IGroup } from 'office-ui-fabric-react/lib/DetailsList'; import { IListViewProps, IListViewState, IViewField, IGrouping, GroupOrder } from './IListView'; import { IColumn, IGroupRenderProps, IObjectWithKey } from 'office-ui-fabric-react/lib/components/DetailsList'; @@ -7,6 +8,8 @@ import { FileTypeIcon, IconType } from '../fileTypeIcon/index'; import * as strings from 'ControlStrings'; import { IGroupsItems } from './IListView'; import * as telemetry from '../../common/telemetry'; +import { Icon } from 'office-ui-fabric-react/lib/Icon'; +const MyIcon = () => ; import filter from 'lodash/filter'; import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox'; @@ -20,6 +23,8 @@ export class ListView extends React.Component { private originalItems: any[]; private originalGroups: IGroup[]; private originalColumns: IColumn[]; + private dragCounter = 0; + private dropRef = React.createRef(); constructor(props: IListViewProps) { super(props); @@ -35,7 +40,8 @@ export class ListView extends React.Component { // Initialize state this.state = { items: [], - filterValue: this.props.defaultFilter + filterValue: this.props.defaultFilter, + dragStatus: false }; if (this.props.selection) { @@ -54,6 +60,17 @@ export class ListView extends React.Component { this._processProperties(); } + public componentWillUnmount(): void { + const { dragDropFiles } = this.props; + if (dragDropFiles) { + let divDropArea = this.dropRef.current; + divDropArea.removeEventListener('dragenter', this.handleonDragEnter); + divDropArea.removeEventListener('dragleave', this.handleonDragLeave); + divDropArea.removeEventListener('dragover', this.handleonDragOver); + divDropArea.removeEventListener('drop', this.handleonDrop); + } + } + /** * Lifecycle hook when component did update after state or property changes * @param prevProps @@ -175,7 +192,7 @@ export class ListView extends React.Component { * Process all the component properties */ private _processProperties() { - const { items, iconFieldName, viewFields, groupByFields, showFilter } = this.props; + const { dragDropFiles, items, iconFieldName, viewFields, groupByFields, showFilter } = this.props; let tempState: IListViewState = cloneDeep(this.state); let columns: IColumn[] = null; @@ -226,6 +243,15 @@ export class ListView extends React.Component { // Update the current component state with the new values this.setState(tempState); } + + // Add EventListeners for drag zone area + if (dragDropFiles) { + let divDropArea = this.dropRef.current; + divDropArea.addEventListener('dragenter', this.handleonDragEnter); + divDropArea.addEventListener('dragleave', this.handleonDragLeave); + divDropArea.addEventListener('dragover', this.handleonDragOver); + divDropArea.addEventListener('drop', this.handleonDrop); + } } /** @@ -491,6 +517,53 @@ export class ListView extends React.Component { return result; } + /** + * Stop listeners from onDragOver event. + * @param e + */ + private handleonDragOver = (e) => { + e.preventDefault(); + e.stopPropagation(); + } + /** + * Stop listeners from onDragEnter event, enable drag and drop view. + * @param e + */ + private handleonDragEnter = (e) => { + e.preventDefault(); + e.stopPropagation(); + this.dragCounter++; + if (e.dataTransfer.items && e.dataTransfer.items.length > 0) { + this.setState({ dragStatus: true }); + } + } + /** + * Stop listeners from ondragenter event, disable drag and drop view. + * @param e + */ + private handleonDragLeave = (e) => { + e.preventDefault(); + e.stopPropagation(); + this.dragCounter--; + if (this.dragCounter === 0) { + this.setState({ dragStatus: false }); + } + } + /** + * Stop listeners from onDrop event and load files to property onDrop. + * @param e + */ + private handleonDrop = (e) => { + e.preventDefault(); + e.stopPropagation(); + this.setState({ dragStatus: false }); + if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { + this.props.onDrop(e.dataTransfer.files); + e.dataTransfer.clearData(); + this.dragCounter = 0; + } + } + /** * Default React component render method */ @@ -516,18 +589,31 @@ export class ListView extends React.Component { { showFilter && } - + +
+ {(this.state.dragStatus && this.props.dragDropFiles) && +
+
+ +
{strings.UploadFileHeader}
+
+
+ } + +
); } diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx index 7e59e3bd7..30a73b7fd 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/src/webparts/controlsTest/components/ControlsTest.tsx @@ -33,7 +33,7 @@ import { TermLabelAction, TermActionsDisplayMode } from '../../../controls/taxon import { ListItemAttachments } from '../../../ListItemAttachments'; import { RichText } from '../../../RichText'; import { Link } from 'office-ui-fabric-react/lib/components/Link'; -import { Carousel, CarouselButtonsLocation, CarouselButtonsDisplay, CarouselIndicatorShape, CarouselIndicatorsDisplay } from '../../../controls/carousel'; +import { Carousel, CarouselButtonsLocation, CarouselButtonsDisplay, CarouselIndicatorShape } from '../../../controls/carousel'; import { TimeDisplayControlType } from '../../../controls/dateTimePicker/TimeDisplayControlType'; import { GridLayout } from '../../../GridLayout'; import { ComboBoxListItemPicker } from '../../../controls/listItemPicker/ComboBoxListItemPicker'; @@ -61,7 +61,6 @@ import { Pagination } from '../../../controls/pagination'; import CarouselImage from '../../../controls/carousel/CarouselImage'; import { FieldCollectionData, CustomCollectionFieldType } from '../../../FieldCollectionData'; import { Accordion } from '../../..'; -import { mergeStyles } from 'office-ui-fabric-react/lib/Styling'; /** * The sample data below was randomly generated (except for the title). It is used by the grid layout @@ -363,6 +362,16 @@ export default class ControlsTest extends React.Component { + for (var i = 0; i < files.length; i++) { + console.log(files[i].name); + } + } + /** * *Method that retrieves the selected terms from the taxonomy picker and sets state @@ -521,6 +530,7 @@ export default class ControlsTest extends React.Component @@ -1176,7 +1188,6 @@ export default class ControlsTest extends React.Component { console.log(`Next button clicked: ${index}`); }} onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }} - rootStyles={mergeStyles({ - backgroundColor: '#C3C3C3' - })} /> From 05f3d8f16b7401a2406656b41fe4533f26c341e7 Mon Sep 17 00:00:00 2001 From: aaclage Date: Tue, 6 Oct 2020 19:10:46 +0200 Subject: [PATCH 11/59] remove const for icon. --- src/controls/listView/ListView.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/controls/listView/ListView.tsx b/src/controls/listView/ListView.tsx index 43a9aa9a0..1e30fe24a 100644 --- a/src/controls/listView/ListView.tsx +++ b/src/controls/listView/ListView.tsx @@ -9,7 +9,6 @@ import * as strings from 'ControlStrings'; import { IGroupsItems } from './IListView'; import * as telemetry from '../../common/telemetry'; import { Icon } from 'office-ui-fabric-react/lib/Icon'; -const MyIcon = () => ; import filter from 'lodash/filter'; import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox'; @@ -595,7 +594,7 @@ export class ListView extends React.Component { {(this.state.dragStatus && this.props.dragDropFiles) &&
- +
{strings.UploadFileHeader}
From 2f0261f4fe422055f06b095b44ad25cac9191a2a Mon Sep 17 00:00:00 2001 From: Gautam Sheth Date: Wed, 7 Oct 2020 19:37:43 +0530 Subject: [PATCH 12/59] Feature/fix - changed API for orgasset items --- package.json | 1 + src/services/OrgAssetsService.ts | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index be72c6feb..df0f2dd26 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "build": "gulp build", "clean": "gulp clean", "test": "gulp test", + "serve": "gulp serve", "prepublishOnly": "gulp", "versionUpdater": "gulp versionUpdater", "karma": "karma start --circle true", diff --git a/src/services/OrgAssetsService.ts b/src/services/OrgAssetsService.ts index e5e7d4259..1bc9cf1e9 100644 --- a/src/services/OrgAssetsService.ts +++ b/src/services/OrgAssetsService.ts @@ -48,19 +48,19 @@ export class OrgAssetsService extends FileBrowserService { public getSiteMediaLibraries = async (includePageLibraries: boolean = false): Promise => { try { - const restApi = `${this.context.pageContext.web.absoluteUrl}/_api/Microsoft.Online.SharePoint.TenantManagement.Office365Tenant/GetOrgAssets`; + const restApi = `${this.context.pageContext.web.absoluteUrl}/_api/SP.Publishing.SitePageService.FilePickerTabOptions`; const orgAssetsResult = await this.context.spHttpClient.get(restApi, SPHttpClient.configurations.v1); if (!orgAssetsResult || !orgAssetsResult.ok) { throw new Error(`Something went wrong when executing request. Status='${orgAssetsResult.status}'`); } const orgAssetsData = await orgAssetsResult.json(); - if (!orgAssetsData || !orgAssetsData.OrgAssetsLibraries || !orgAssetsData.OrgAssetsLibraries.Items || orgAssetsData.OrgAssetsLibraries.Items.length <= 0) { + if (!orgAssetsData || !orgAssetsData.OrgAssets || !orgAssetsData.OrgAssets.OrgAssetsLibraries || !orgAssetsData.OrgAssets.OrgAssetsLibraries.Items || orgAssetsData.OrgAssets.OrgAssetsLibraries.Items.length <= 0) { return null; } - this._orgAssetsLibraryServerRelativeSiteUrl = orgAssetsData ? orgAssetsData.Url.DecodedUrl : null; - const libs: ILibrary[] = orgAssetsData ? orgAssetsData.OrgAssetsLibraries.Items.map((libItem) => { return this._parseOrgAssetsLibraryItem(libItem); }) : []; + this._orgAssetsLibraryServerRelativeSiteUrl = orgAssetsData ? orgAssetsData.OrgAssets.Url.DecodedUrl : null; + const libs: ILibrary[] = orgAssetsData && orgAssetsData.OrgAssets ? orgAssetsData.OrgAssets.OrgAssetsLibraries.Items.map((libItem) => { return this._parseOrgAssetsLibraryItem(libItem); }) : []; return libs; } catch (error) { console.error(`[OrgAssetsService.getOrganisationAssetsLibraries]: Err='${error.message}'`); From e78e9404b0e9776b727b3ccbbe6ba860a08ca033 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Wed, 7 Oct 2020 15:15:07 -0700 Subject: [PATCH 13/59] changelog --- CHANGELOG.JSON | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON index 5627a6b2e..8b392abbb 100644 --- a/CHANGELOG.JSON +++ b/CHANGELOG.JSON @@ -5,11 +5,14 @@ "changes": { "new": [], "enhancements": [ - "`Carousel`: Ability to display indicators in a dedicated block [#681](https://github.com/pnp/sp-dev-fx-controls-react/pull/681)" + "`Carousel`: Ability to display indicators in a dedicated block [#681](https://github.com/pnp/sp-dev-fx-controls-react/pull/681)", + "`FilePicker`: Org Assets are not displayed for non-admin users [#687](https://github.com/pnp/sp-dev-fx-controls-react/pull/687)" ], "fixes": [] }, - "contributions": [] + "contributions": [ + "[Gautam Sheth](https://github.com/gautamdsheth)" + ] }, { "version": "2.0.0", From 5647f432c6c6754897d9096d9c6ede04569bd4fc Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Wed, 7 Oct 2020 15:15:20 -0700 Subject: [PATCH 14/59] pre-commit --- CHANGELOG.md | 5 +++++ docs/documentation/docs/about/release-notes.md | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b23bf3f44..a32f1beed 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,11 @@ ### Enhancements - `Carousel`: Ability to display indicators in a dedicated block [#681](https://github.com/pnp/sp-dev-fx-controls-react/pull/681) +- `FilePicker`: Org Assets are not displayed for non-admin users [#687](https://github.com/pnp/sp-dev-fx-controls-react/pull/687) + +### Contributors + +Special thanks to our contributor: [Gautam Sheth](https://github.com/gautamdsheth). ## 2.0.0 diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md index b23bf3f44..a32f1beed 100644 --- a/docs/documentation/docs/about/release-notes.md +++ b/docs/documentation/docs/about/release-notes.md @@ -5,6 +5,11 @@ ### Enhancements - `Carousel`: Ability to display indicators in a dedicated block [#681](https://github.com/pnp/sp-dev-fx-controls-react/pull/681) +- `FilePicker`: Org Assets are not displayed for non-admin users [#687](https://github.com/pnp/sp-dev-fx-controls-react/pull/687) + +### Contributors + +Special thanks to our contributor: [Gautam Sheth](https://github.com/gautamdsheth). ## 2.0.0 From f950a26ad30c353df6c4a91ec8e84c1c5c04eec6 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Wed, 7 Oct 2020 16:06:00 -0700 Subject: [PATCH 15/59] changelog --- CHANGELOG.JSON | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON index 8b392abbb..f9fceeded 100644 --- a/CHANGELOG.JSON +++ b/CHANGELOG.JSON @@ -6,11 +6,13 @@ "new": [], "enhancements": [ "`Carousel`: Ability to display indicators in a dedicated block [#681](https://github.com/pnp/sp-dev-fx-controls-react/pull/681)", - "`FilePicker`: Org Assets are not displayed for non-admin users [#687](https://github.com/pnp/sp-dev-fx-controls-react/pull/687)" + "`FilePicker`: Org Assets are not displayed for non-admin users [#687](https://github.com/pnp/sp-dev-fx-controls-react/pull/687)", + "`ListView`: Drag and Drop option [#679](https://github.com/pnp/sp-dev-fx-controls-react/issues/679)" ], "fixes": [] }, "contributions": [ + "[André Lage](https://github.com/aaclage)", "[Gautam Sheth](https://github.com/gautamdsheth)" ] }, From d18fecd5b8270b7115c05ef8d4bd67040facec71 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Wed, 7 Oct 2020 16:06:10 -0700 Subject: [PATCH 16/59] pre-commit --- CHANGELOG.md | 3 ++- docs/documentation/docs/about/release-notes.md | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a32f1beed..681a850bf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,10 +6,11 @@ - `Carousel`: Ability to display indicators in a dedicated block [#681](https://github.com/pnp/sp-dev-fx-controls-react/pull/681) - `FilePicker`: Org Assets are not displayed for non-admin users [#687](https://github.com/pnp/sp-dev-fx-controls-react/pull/687) +- `ListView`: Drag and Drop option [#679](https://github.com/pnp/sp-dev-fx-controls-react/issues/679) ### Contributors -Special thanks to our contributor: [Gautam Sheth](https://github.com/gautamdsheth). +Special thanks to our contributors (in alphabetical order): [André Lage](https://github.com/aaclage), [Gautam Sheth](https://github.com/gautamdsheth). ## 2.0.0 diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md index a32f1beed..681a850bf 100644 --- a/docs/documentation/docs/about/release-notes.md +++ b/docs/documentation/docs/about/release-notes.md @@ -6,10 +6,11 @@ - `Carousel`: Ability to display indicators in a dedicated block [#681](https://github.com/pnp/sp-dev-fx-controls-react/pull/681) - `FilePicker`: Org Assets are not displayed for non-admin users [#687](https://github.com/pnp/sp-dev-fx-controls-react/pull/687) +- `ListView`: Drag and Drop option [#679](https://github.com/pnp/sp-dev-fx-controls-react/issues/679) ### Contributors -Special thanks to our contributor: [Gautam Sheth](https://github.com/gautamdsheth). +Special thanks to our contributors (in alphabetical order): [André Lage](https://github.com/aaclage), [Gautam Sheth](https://github.com/gautamdsheth). ## 2.0.0 From 5ff140aa317a24462038cf24a7eede43af0a321a Mon Sep 17 00:00:00 2001 From: aaclage Date: Thu, 8 Oct 2020 06:40:29 +0200 Subject: [PATCH 17/59] Fix ControlsTest.tsx references --- src/webparts/controlsTest/components/ControlsTest.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx index 30a73b7fd..fa1f8b701 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/src/webparts/controlsTest/components/ControlsTest.tsx @@ -33,7 +33,7 @@ import { TermLabelAction, TermActionsDisplayMode } from '../../../controls/taxon import { ListItemAttachments } from '../../../ListItemAttachments'; import { RichText } from '../../../RichText'; import { Link } from 'office-ui-fabric-react/lib/components/Link'; -import { Carousel, CarouselButtonsLocation, CarouselButtonsDisplay, CarouselIndicatorShape } from '../../../controls/carousel'; +import { Carousel, CarouselButtonsLocation, CarouselButtonsDisplay, CarouselIndicatorShape, CarouselIndicatorsDisplay } from '../../../controls/carousel'; import { TimeDisplayControlType } from '../../../controls/dateTimePicker/TimeDisplayControlType'; import { GridLayout } from '../../../GridLayout'; import { ComboBoxListItemPicker } from '../../../controls/listItemPicker/ComboBoxListItemPicker'; @@ -61,6 +61,7 @@ import { Pagination } from '../../../controls/pagination'; import CarouselImage from '../../../controls/carousel/CarouselImage'; import { FieldCollectionData, CustomCollectionFieldType } from '../../../FieldCollectionData'; import { Accordion } from '../../..'; +import { mergeStyles } from 'office-ui-fabric-react/lib/Styling'; /** * The sample data below was randomly generated (except for the title). It is used by the grid layout @@ -1188,6 +1189,7 @@ export default class ControlsTest extends React.Component { console.log(`Next button clicked: ${index}`); }} onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }} + rootStyles={mergeStyles({ + backgroundColor: '#C3C3C3' + })} /> From fc7d9fb087f6bd094ef63ac1992a875d701be15a Mon Sep 17 00:00:00 2001 From: Gautam Sheth Date: Sat, 10 Oct 2020 17:28:23 +0530 Subject: [PATCH 18/59] Feature/fix - support special chars in folder name --- src/services/FolderExplorerService.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/services/FolderExplorerService.ts b/src/services/FolderExplorerService.ts index 0d5a58ccc..823e1aa01 100644 --- a/src/services/FolderExplorerService.ts +++ b/src/services/FolderExplorerService.ts @@ -72,7 +72,7 @@ export class FolderExplorerService implements IFolderExplorerService { try { const web = Web(webAbsoluteUrl); folderRelativeUrl = folderRelativeUrl.replace(/\'/ig, "''"); - let foldersResult: IFolder[] = await web.getFolderByServerRelativeUrl(folderRelativeUrl).folders.select('Name', 'ServerRelativeUrl').orderBy('Name').get(); + let foldersResult: IFolder[] = await web.getFolderByServerRelativePath(encodeURIComponent(folderRelativeUrl)).folders.select('Name', 'ServerRelativeUrl').orderBy('Name').get(); results = foldersResult.filter(f => f.Name != "Forms"); } catch (error) { console.error('Error loading folders', error); @@ -100,7 +100,8 @@ export class FolderExplorerService implements IFolderExplorerService { let folder: IFolder = null; try { const web = Web(webAbsoluteUrl); - let folderAddResult: IFolderAddResult = await web.getFolderByServerRelativeUrl(folderRelativeUrl).folders.add(name); + folderRelativeUrl = folderRelativeUrl.replace(/\'/ig, "''"); + let folderAddResult: IFolderAddResult = await web.getFolderByServerRelativePath(encodeURIComponent(folderRelativeUrl)).folders.addUsingPath(encodeURIComponent(name)); if (folderAddResult && folderAddResult.data) { folder = { Name: folderAddResult.data.Name, From fa5a9bcff56824093f493c27a41a7ddad4988b18 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Sun, 11 Oct 2020 13:43:56 -0700 Subject: [PATCH 19/59] changelog --- CHANGELOG.JSON | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON index f9fceeded..96238ab94 100644 --- a/CHANGELOG.JSON +++ b/CHANGELOG.JSON @@ -7,7 +7,8 @@ "enhancements": [ "`Carousel`: Ability to display indicators in a dedicated block [#681](https://github.com/pnp/sp-dev-fx-controls-react/pull/681)", "`FilePicker`: Org Assets are not displayed for non-admin users [#687](https://github.com/pnp/sp-dev-fx-controls-react/pull/687)", - "`ListView`: Drag and Drop option [#679](https://github.com/pnp/sp-dev-fx-controls-react/issues/679)" + "`ListView`: Drag and Drop option [#679](https://github.com/pnp/sp-dev-fx-controls-react/issues/679)", + "`FolderExplorerService`: support special characters if folder name [#691](https://github.com/pnp/sp-dev-fx-controls-react/pull/691)" ], "fixes": [] }, From 0d44ee6ba50f41d8f195c96d0c7e97b0d70e3a7a Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Sun, 11 Oct 2020 13:44:06 -0700 Subject: [PATCH 20/59] pre-commit --- CHANGELOG.md | 1 + docs/documentation/docs/about/release-notes.md | 1 + 2 files changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 681a850bf..c3ae7244a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - `Carousel`: Ability to display indicators in a dedicated block [#681](https://github.com/pnp/sp-dev-fx-controls-react/pull/681) - `FilePicker`: Org Assets are not displayed for non-admin users [#687](https://github.com/pnp/sp-dev-fx-controls-react/pull/687) - `ListView`: Drag and Drop option [#679](https://github.com/pnp/sp-dev-fx-controls-react/issues/679) +- `FolderExplorerService`: support special characters if folder name [#691](https://github.com/pnp/sp-dev-fx-controls-react/pull/691) ### Contributors diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md index 681a850bf..c3ae7244a 100644 --- a/docs/documentation/docs/about/release-notes.md +++ b/docs/documentation/docs/about/release-notes.md @@ -7,6 +7,7 @@ - `Carousel`: Ability to display indicators in a dedicated block [#681](https://github.com/pnp/sp-dev-fx-controls-react/pull/681) - `FilePicker`: Org Assets are not displayed for non-admin users [#687](https://github.com/pnp/sp-dev-fx-controls-react/pull/687) - `ListView`: Drag and Drop option [#679](https://github.com/pnp/sp-dev-fx-controls-react/issues/679) +- `FolderExplorerService`: support special characters if folder name [#691](https://github.com/pnp/sp-dev-fx-controls-react/pull/691) ### Contributors From 2b6534ef2969826e183251e07cd96b182aa94073 Mon Sep 17 00:00:00 2001 From: Abderahman88 Date: Mon, 12 Oct 2020 16:57:26 +0100 Subject: [PATCH 21/59] add sticky header --- src/controls/listView/IListView.ts | 5 ++ src/controls/listView/ListView.tsx | 62 ++++++++++++++++++- .../controlsTest/components/ControlsTest.tsx | 5 +- 3 files changed, 67 insertions(+), 5 deletions(-) diff --git a/src/controls/listView/IListView.ts b/src/controls/listView/IListView.ts index 8a87e8158..03941e5d7 100644 --- a/src/controls/listView/IListView.ts +++ b/src/controls/listView/IListView.ts @@ -63,6 +63,11 @@ export interface IListViewProps { * Specify the initial filter to be applied to the list. */ defaultFilter?: string; + /** + * Boolean value to create a fixed/sticky header. + * Set to false by default + */ + stickyHeader?: boolean; } export interface IListViewState { diff --git a/src/controls/listView/ListView.tsx b/src/controls/listView/ListView.tsx index 1e30fe24a..12c7fc9db 100644 --- a/src/controls/listView/ListView.tsx +++ b/src/controls/listView/ListView.tsx @@ -1,19 +1,52 @@ import * as React from 'react'; import styles from './ListView.DragDrop.module.scss'; -import { DetailsList, DetailsListLayoutMode, Selection, SelectionMode, IGroup } from 'office-ui-fabric-react/lib/DetailsList'; +import { DetailsList, DetailsListLayoutMode, Selection, SelectionMode, IGroup, IDetailsHeaderProps } from 'office-ui-fabric-react/lib/DetailsList'; import { IListViewProps, IListViewState, IViewField, IGrouping, GroupOrder } from './IListView'; import { IColumn, IGroupRenderProps, IObjectWithKey } from 'office-ui-fabric-react/lib/components/DetailsList'; +import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/ScrollablePane'; +import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky'; +import { IRenderFunction } from 'office-ui-fabric-react/lib/Utilities'; import { findIndex, has, sortBy, isEqual, cloneDeep } from '@microsoft/sp-lodash-subset'; import { FileTypeIcon, IconType } from '../fileTypeIcon/index'; import * as strings from 'ControlStrings'; import { IGroupsItems } from './IListView'; import * as telemetry from '../../common/telemetry'; import { Icon } from 'office-ui-fabric-react/lib/Icon'; +import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling'; import filter from 'lodash/filter'; import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox'; import { Guid } from '@microsoft/sp-core-library'; +const classNames = mergeStyleSets({ + wrapper: { + height: '50vh', + position: 'relative' + } +}); + +/** +* Wrap the listview in a scrollable pane if sticky header = true +*/ +const ListViewWrapper = ({ stickyHeader, children }) => (stickyHeader ? +
+ + {children} + +
+ : children +); + +/** +* Lock the searchbox when scrolling if sticky header = true +*/ +const SearchBoxWrapper = ({ stickyHeader, children }) => (stickyHeader ? + + {children} + + : children +); + /** * File type icon component */ @@ -27,7 +60,6 @@ export class ListView extends React.Component { constructor(props: IListViewProps) { super(props); - telemetry.track('ReactListView', { viewFields: !!props.viewFields, groupByFields: !!props.groupByFields, @@ -563,6 +595,24 @@ export class ListView extends React.Component { } } + /** + * Custom render of header + * @param props + * @param defaultRender + */ + private _onRenderDetailsHeader: IRenderFunction = (props, defaultRender) => { + if (!props) { + return null; + } + return ( + + {defaultRender!({ + ...props, + })} + + ); + } + /** * Default React component render method */ @@ -584,9 +634,13 @@ export class ListView extends React.Component { } return ( +
{ - showFilter && + showFilter && + + + }
{ compact={this.props.compact} setKey="ListViewControl" groupProps={groupProps} + onRenderDetailsHeader={this._onRenderDetailsHeader} />
+ ); } } diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx index fa1f8b701..429ed7426 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/src/webparts/controlsTest/components/ControlsTest.tsx @@ -835,7 +835,7 @@ export default class ControlsTest extends React.Component console.log("DateTimePicker value:", value)} minDate={new Date("05/01/2019")} - maxDate={new Date("05/01/2020")} /> + maxDate={new Date("05/01/2020")} /> {/* { this.richTextValue = value; return value; }} /> */} { this.setState({ richTextValue: value }); return value; }} /> @@ -975,6 +975,7 @@ export default class ControlsTest extends React.Component @@ -1351,7 +1352,7 @@ export default class ControlsTest extends React.Component - + ); } From 4b17156fc3863325e2055936faf2732fd6c17c00 Mon Sep 17 00:00:00 2001 From: Abderahman88 Date: Mon, 12 Oct 2020 17:22:06 +0100 Subject: [PATCH 22/59] remove whitespace --- src/controls/listView/ListView.tsx | 1 + src/webparts/controlsTest/components/ControlsTest.tsx | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/controls/listView/ListView.tsx b/src/controls/listView/ListView.tsx index 12c7fc9db..391a504cf 100644 --- a/src/controls/listView/ListView.tsx +++ b/src/controls/listView/ListView.tsx @@ -60,6 +60,7 @@ export class ListView extends React.Component { constructor(props: IListViewProps) { super(props); + telemetry.track('ReactListView', { viewFields: !!props.viewFields, groupByFields: !!props.groupByFields, diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx index 429ed7426..7160c49a0 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/src/webparts/controlsTest/components/ControlsTest.tsx @@ -835,7 +835,7 @@ export default class ControlsTest extends React.Component console.log("DateTimePicker value:", value)} minDate={new Date("05/01/2019")} - maxDate={new Date("05/01/2020")} /> + maxDate={new Date("05/01/2020")} /> {/* { this.richTextValue = value; return value; }} /> */} { this.setState({ richTextValue: value }); return value; }} /> @@ -1352,7 +1352,7 @@ export default class ControlsTest extends React.Component - + ); } From eff5eaf99539fed2ae19fab58cdb304d392e9859 Mon Sep 17 00:00:00 2001 From: Abderahman88 Date: Mon, 12 Oct 2020 23:14:45 +0100 Subject: [PATCH 23/59] Hyperlink as first text --- src/controls/richText/RichText.tsx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/controls/richText/RichText.tsx b/src/controls/richText/RichText.tsx index 535540556..458edf7de 100644 --- a/src/controls/richText/RichText.tsx +++ b/src/controls/richText/RichText.tsx @@ -368,7 +368,7 @@ export class RichText extends React.Component { }} /> { if (newValue !== this.state.insertUrl) { this.setState({ @@ -384,7 +384,7 @@ export class RichText extends React.Component { {strings.RemoveLinkLabel} ) } - + @@ -568,7 +568,7 @@ id="DropDownStyles" @@ -689,7 +689,7 @@ id="DropDownStyles" } if (cursorPosition > -1) { - const textToInsert: string = this.state.insertUrlText !== undefined ? this.state.insertUrlText : this.state.insertUrl; + const textToInsert: string = (this.state.insertUrlText !== undefined && this.state.insertUrlText !== "") ? this.state.insertUrlText : this.state.insertUrl; const urlToInsert: string = this.state.insertUrl; quill.insertText(cursorPosition, textToInsert); quill.setSelection(cursorPosition, textToInsert.length); @@ -703,6 +703,17 @@ id="DropDownStyles" }); } + /** + * Disable Save-button if hyperlink is undefined or empty + * This prevents the user of aading an empty hyperlink + */ + private checkLinkUrl = () => { + if (this.state.insertUrl !== undefined && this.state.insertUrl != "") { + return false; + } + return true; + } + /** * Applies a format to the selection * @param name format name From 1b92a8d4dd341663bbf54559b7b266b29292d759 Mon Sep 17 00:00:00 2001 From: Abderahman88 Date: Mon, 12 Oct 2020 23:18:10 +0100 Subject: [PATCH 24/59] Fix typo --- src/controls/richText/RichText.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/controls/richText/RichText.tsx b/src/controls/richText/RichText.tsx index 458edf7de..9b14cd6e0 100644 --- a/src/controls/richText/RichText.tsx +++ b/src/controls/richText/RichText.tsx @@ -705,7 +705,7 @@ id="DropDownStyles" /** * Disable Save-button if hyperlink is undefined or empty - * This prevents the user of aading an empty hyperlink + * This prevents the user of adding an empty hyperlink */ private checkLinkUrl = () => { if (this.state.insertUrl !== undefined && this.state.insertUrl != "") { From c075770e84a7f433645fc491360758f016b7cad1 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Mon, 12 Oct 2020 16:33:48 -0700 Subject: [PATCH 25/59] fixes for drag-n-drop area with sticky header, documentation update --- docs/documentation/docs/controls/ListView.md | 4 +- .../listView/ListView.DragDrop.module.scss | 3 +- src/controls/listView/ListView.tsx | 77 +++++++++---------- 3 files changed, 42 insertions(+), 42 deletions(-) diff --git a/docs/documentation/docs/controls/ListView.md b/docs/documentation/docs/controls/ListView.md index 096b457ef..41e55eefe 100644 --- a/docs/documentation/docs/controls/ListView.md +++ b/docs/documentation/docs/controls/ListView.md @@ -36,7 +36,8 @@ import { ListView, IViewField, SelectionMode, GroupOrder, IGrouping } from "@pnp filterPlaceHolder="Search..." groupByFields={groupByFields} dragDropFiles={true} - onDrop={this._getDropFiles} /> + onDrop={this._getDropFiles} + stickyHeader={true} /> ``` - The control provides full text filtering through all the columns. If you want to exectue filtering on the specified columns, you can use syntax : ``:``. Use `':'` as a separator between column name and value. Control support both `'fieldName'` and `'name'` properties of IColumn interface. @@ -95,6 +96,7 @@ The ListView control can be configured with the following properties: | defaultFilter | string | no | Specify the initial filter to be applied to the list. | | dragDropFiles | boolean | no | Specify the drag and drop files area option. Default false. | | onDrop | file | no | Event handler returns files from drag and drop. | +| stickyHeader | boolean | no | Specifies if the header of the `ListView`, including search box, is sticky | The `IViewField` has the following implementation: diff --git a/src/controls/listView/ListView.DragDrop.module.scss b/src/controls/listView/ListView.DragDrop.module.scss index b5f2a124a..53b79831d 100644 --- a/src/controls/listView/ListView.DragDrop.module.scss +++ b/src/controls/listView/ListView.DragDrop.module.scss @@ -1,5 +1,4 @@ .DragDropArea { - display: inline-block; position: relative; min-height: 150px; } @@ -12,7 +11,7 @@ bottom: 0; left: 0; right: 0; - z-index: 9999; + z-index: 1; } .DragDropAreaZone { diff --git a/src/controls/listView/ListView.tsx b/src/controls/listView/ListView.tsx index 391a504cf..bc51f1b2a 100644 --- a/src/controls/listView/ListView.tsx +++ b/src/controls/listView/ListView.tsx @@ -29,9 +29,9 @@ const classNames = mergeStyleSets({ * Wrap the listview in a scrollable pane if sticky header = true */ const ListViewWrapper = ({ stickyHeader, children }) => (stickyHeader ? -
+
- {children} + {children}
: children @@ -60,7 +60,7 @@ export class ListView extends React.Component { constructor(props: IListViewProps) { super(props); - + telemetry.track('ReactListView', { viewFields: !!props.viewFields, groupByFields: !!props.groupByFields, @@ -620,8 +620,8 @@ export class ListView extends React.Component { public render(): React.ReactElement { let groupProps: IGroupRenderProps = {}; - let { showFilter, filterPlaceHolder } = this.props; - let { filterValue, items } = this.state; + let { showFilter, filterPlaceHolder, dragDropFiles, stickyHeader, selectionMode, compact } = this.props; + let { filterValue, items, dragStatus, columns, groups } = this.state; // Check if selection mode is single selection, // if that is the case, disable the selection on grouping headers @@ -635,42 +635,41 @@ export class ListView extends React.Component { } return ( - -
- { - showFilter && - - - - } - -
- {(this.state.dragStatus && this.props.dragDropFiles) && -
-
- -
{strings.UploadFileHeader}
-
+
+ {(dragStatus && dragDropFiles) && +
+
+ +
{strings.UploadFileHeader}
- } - -
+
+ } + +
+ { + showFilter && + + + + } + +
+
- ); } } From 5777e5305d78b8733aabe7e2d68976ce662e553a Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Mon, 12 Oct 2020 16:39:07 -0700 Subject: [PATCH 26/59] changelog --- CHANGELOG.JSON | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON index 96238ab94..1c3a67b93 100644 --- a/CHANGELOG.JSON +++ b/CHANGELOG.JSON @@ -8,11 +8,13 @@ "`Carousel`: Ability to display indicators in a dedicated block [#681](https://github.com/pnp/sp-dev-fx-controls-react/pull/681)", "`FilePicker`: Org Assets are not displayed for non-admin users [#687](https://github.com/pnp/sp-dev-fx-controls-react/pull/687)", "`ListView`: Drag and Drop option [#679](https://github.com/pnp/sp-dev-fx-controls-react/issues/679)", - "`FolderExplorerService`: support special characters if folder name [#691](https://github.com/pnp/sp-dev-fx-controls-react/pull/691)" + "`FolderExplorerService`: support special characters if folder name [#691](https://github.com/pnp/sp-dev-fx-controls-react/pull/691)", + "`ListView`: Sticky Header [#634](https://github.com/pnp/sp-dev-fx-controls-react/issues/634)" ], "fixes": [] }, "contributions": [ + "[Abderahman88](https://github.com/Abderahman88)", "[André Lage](https://github.com/aaclage)", "[Gautam Sheth](https://github.com/gautamdsheth)" ] From e41db67b20912b13a9ce23c172e916408bba2684 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Mon, 12 Oct 2020 16:39:20 -0700 Subject: [PATCH 27/59] pre-commit --- CHANGELOG.md | 3 ++- docs/documentation/docs/about/release-notes.md | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c3ae7244a..170906fbb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,10 +8,11 @@ - `FilePicker`: Org Assets are not displayed for non-admin users [#687](https://github.com/pnp/sp-dev-fx-controls-react/pull/687) - `ListView`: Drag and Drop option [#679](https://github.com/pnp/sp-dev-fx-controls-react/issues/679) - `FolderExplorerService`: support special characters if folder name [#691](https://github.com/pnp/sp-dev-fx-controls-react/pull/691) +- `ListView`: Sticky Header [#634](https://github.com/pnp/sp-dev-fx-controls-react/issues/634) ### Contributors -Special thanks to our contributors (in alphabetical order): [André Lage](https://github.com/aaclage), [Gautam Sheth](https://github.com/gautamdsheth). +Special thanks to our contributors (in alphabetical order): [Abderahman88](https://github.com/Abderahman88), [André Lage](https://github.com/aaclage), [Gautam Sheth](https://github.com/gautamdsheth). ## 2.0.0 diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md index c3ae7244a..170906fbb 100644 --- a/docs/documentation/docs/about/release-notes.md +++ b/docs/documentation/docs/about/release-notes.md @@ -8,10 +8,11 @@ - `FilePicker`: Org Assets are not displayed for non-admin users [#687](https://github.com/pnp/sp-dev-fx-controls-react/pull/687) - `ListView`: Drag and Drop option [#679](https://github.com/pnp/sp-dev-fx-controls-react/issues/679) - `FolderExplorerService`: support special characters if folder name [#691](https://github.com/pnp/sp-dev-fx-controls-react/pull/691) +- `ListView`: Sticky Header [#634](https://github.com/pnp/sp-dev-fx-controls-react/issues/634) ### Contributors -Special thanks to our contributors (in alphabetical order): [André Lage](https://github.com/aaclage), [Gautam Sheth](https://github.com/gautamdsheth). +Special thanks to our contributors (in alphabetical order): [Abderahman88](https://github.com/Abderahman88), [André Lage](https://github.com/aaclage), [Gautam Sheth](https://github.com/gautamdsheth). ## 2.0.0 From d84b17b6cbed3b33af9e9551b5f3eee949df0255 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Mon, 12 Oct 2020 16:53:57 -0700 Subject: [PATCH 28/59] changelog --- CHANGELOG.JSON | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON index 1c3a67b93..25d0bc6e6 100644 --- a/CHANGELOG.JSON +++ b/CHANGELOG.JSON @@ -11,7 +11,9 @@ "`FolderExplorerService`: support special characters if folder name [#691](https://github.com/pnp/sp-dev-fx-controls-react/pull/691)", "`ListView`: Sticky Header [#634](https://github.com/pnp/sp-dev-fx-controls-react/issues/634)" ], - "fixes": [] + "fixes": [ + "`RichText`: Cannot add link in first line [#672](https://github.com/pnp/sp-dev-fx-controls-react/issues/672)" + ] }, "contributions": [ "[Abderahman88](https://github.com/Abderahman88)", From f7873e589b3f328714183d59709545d678dd56ed Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Mon, 12 Oct 2020 16:54:09 -0700 Subject: [PATCH 29/59] pre-commit --- CHANGELOG.md | 4 ++++ docs/documentation/docs/about/release-notes.md | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 170906fbb..e238f087a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,10 @@ - `FolderExplorerService`: support special characters if folder name [#691](https://github.com/pnp/sp-dev-fx-controls-react/pull/691) - `ListView`: Sticky Header [#634](https://github.com/pnp/sp-dev-fx-controls-react/issues/634) +### Fixes + +- `RichText`: Cannot add link in first line [#672](https://github.com/pnp/sp-dev-fx-controls-react/issues/672) + ### Contributors Special thanks to our contributors (in alphabetical order): [Abderahman88](https://github.com/Abderahman88), [André Lage](https://github.com/aaclage), [Gautam Sheth](https://github.com/gautamdsheth). diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md index 170906fbb..e238f087a 100644 --- a/docs/documentation/docs/about/release-notes.md +++ b/docs/documentation/docs/about/release-notes.md @@ -10,6 +10,10 @@ - `FolderExplorerService`: support special characters if folder name [#691](https://github.com/pnp/sp-dev-fx-controls-react/pull/691) - `ListView`: Sticky Header [#634](https://github.com/pnp/sp-dev-fx-controls-react/issues/634) +### Fixes + +- `RichText`: Cannot add link in first line [#672](https://github.com/pnp/sp-dev-fx-controls-react/issues/672) + ### Contributors Special thanks to our contributors (in alphabetical order): [Abderahman88](https://github.com/Abderahman88), [André Lage](https://github.com/aaclage), [Gautam Sheth](https://github.com/gautamdsheth). From 547f50c0ed07936755b6d3c9f6e6850aeb26949d Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Mon, 12 Oct 2020 17:55:39 -0700 Subject: [PATCH 30/59] IconPicker: get icons from @uifabric/icons --- package-lock.json | 6 +++--- package.json | 1 + src/controls/iconPicker/IconPicker.tsx | 19 ++++++++++++------ src/services/FluentIconsService.ts | 27 ++++++++++++++++++++++++++ tsconfig.json | 1 + 5 files changed, 45 insertions(+), 9 deletions(-) create mode 100644 src/services/FluentIconsService.ts diff --git a/package-lock.json b/package-lock.json index 1ac3e9d91..5bc72f187 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3438,9 +3438,9 @@ }, "dependencies": { "tslib": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", - "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==" + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" } } }, diff --git a/package.json b/package.json index df0f2dd26..5aacc437b 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "@microsoft/sp-webpart-base": "1.11.0", "@pnp/sp": "2.0.6", "@pnp/telemetry-js": "2.0.0", + "@uifabric/icons": "7.3.0", "chart.js": "2.7.3", "color": "3.1.2", "lodash": "4.17.13", diff --git a/src/controls/iconPicker/IconPicker.tsx b/src/controls/iconPicker/IconPicker.tsx index e2e517b8c..67d858470 100644 --- a/src/controls/iconPicker/IconPicker.tsx +++ b/src/controls/iconPicker/IconPicker.tsx @@ -13,10 +13,13 @@ import { IIconPickerState } from './IIconPickerState'; import * as telemetry from '../../common/telemetry'; import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog'; import { initializeIcons } from 'office-ui-fabric-react/lib/Icons'; +import { FluentIconsService } from '../../services/FluentIconsService'; export class IconPicker extends React.Component { private radioIdBase: string = getId("radio"); + private readonly _fluentIconsService: FluentIconsService; + constructor(props: IIconPickerProps) { super(props); @@ -25,8 +28,10 @@ export class IconPicker extends React.Component { this.setState({ isPanelOpen: true, - items: IconNames.Icons + items: this._fluentIconsService.getAll() //IconNames.Icons }); } @@ -126,17 +131,19 @@ export class IconPicker extends React.Component { - this.setState({ items: IconNames.Icons }); + this.setState({ + items: this._fluentIconsService.getAll() //IconNames.Icons + }); } private onChange = (newValue?: string): void => { let items: string[]; if (newValue && newValue.trim().length > 2) { - items = IconNames.Icons.filter(item => { + items = this._fluentIconsService.search(newValue); /*IconNames.Icons.filter(item => { return item.toLocaleLowerCase().indexOf(newValue.toLocaleLowerCase()) !== -1; - }); + });*/ } else { - items = IconNames.Icons; + items = this._fluentIconsService.getAll();//IconNames.Icons; } this.setState({ items: items diff --git a/src/services/FluentIconsService.ts b/src/services/FluentIconsService.ts new file mode 100644 index 000000000..69f4174c5 --- /dev/null +++ b/src/services/FluentIconsService.ts @@ -0,0 +1,27 @@ +import Icons from '@uifabric/icons/lib/data/AllIconNames.json'; + +interface IFluentIcon { + name: string; + unicode: string; +} + +const icons: IFluentIcon[] = Icons.slice(1) as IFluentIcon[]; + +export class FluentIconsService { + private _iconNames: string[]; + + constructor() { + this._iconNames = icons.map(icon => icon.name).sort(); + } + + public getAll = (): string[] => { + return this._iconNames; + } + + public search = (query: string, startsWith?: boolean): string[] => { + const lowerCasedQuery = query.toLowerCase(); + return this._iconNames.filter(name => startsWith === false ? name.toLowerCase().indexOf(lowerCasedQuery) !== -1 : name.toLowerCase().indexOf(query) === 0); + } +} + + diff --git a/tsconfig.json b/tsconfig.json index 257017a7a..87b7798b3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,6 +15,7 @@ "strictNullChecks": false, "noUnusedLocals": false, "allowSyntheticDefaultImports": true, + "resolveJsonModule": true, "typeRoots": [ "./node_modules/@types", "./node_modules/@microsoft" From a4e112f3c84e79c4d792e797545a054fc0ee00b5 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Mon, 12 Oct 2020 17:57:26 -0700 Subject: [PATCH 31/59] changelog --- CHANGELOG.JSON | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON index 25d0bc6e6..dc4979e6c 100644 --- a/CHANGELOG.JSON +++ b/CHANGELOG.JSON @@ -9,7 +9,8 @@ "`FilePicker`: Org Assets are not displayed for non-admin users [#687](https://github.com/pnp/sp-dev-fx-controls-react/pull/687)", "`ListView`: Drag and Drop option [#679](https://github.com/pnp/sp-dev-fx-controls-react/issues/679)", "`FolderExplorerService`: support special characters if folder name [#691](https://github.com/pnp/sp-dev-fx-controls-react/pull/691)", - "`ListView`: Sticky Header [#634](https://github.com/pnp/sp-dev-fx-controls-react/issues/634)" + "`ListView`: Sticky Header [#634](https://github.com/pnp/sp-dev-fx-controls-react/issues/634)", + "`IconPicker`: get icons from `@uifabric/icons/lib/data/AllIconNames.json`" ], "fixes": [ "`RichText`: Cannot add link in first line [#672](https://github.com/pnp/sp-dev-fx-controls-react/issues/672)" From 7dd52a790d7c7a44f4ace47f46894019708367f7 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Mon, 12 Oct 2020 17:57:35 -0700 Subject: [PATCH 32/59] pre-commit --- CHANGELOG.md | 1 + docs/documentation/docs/about/release-notes.md | 1 + 2 files changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e238f087a..aedd7135b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ - `ListView`: Drag and Drop option [#679](https://github.com/pnp/sp-dev-fx-controls-react/issues/679) - `FolderExplorerService`: support special characters if folder name [#691](https://github.com/pnp/sp-dev-fx-controls-react/pull/691) - `ListView`: Sticky Header [#634](https://github.com/pnp/sp-dev-fx-controls-react/issues/634) +- `IconPicker`: get icons from `@uifabric/icons/lib/data/AllIconNames.json` ### Fixes diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md index e238f087a..aedd7135b 100644 --- a/docs/documentation/docs/about/release-notes.md +++ b/docs/documentation/docs/about/release-notes.md @@ -9,6 +9,7 @@ - `ListView`: Drag and Drop option [#679](https://github.com/pnp/sp-dev-fx-controls-react/issues/679) - `FolderExplorerService`: support special characters if folder name [#691](https://github.com/pnp/sp-dev-fx-controls-react/pull/691) - `ListView`: Sticky Header [#634](https://github.com/pnp/sp-dev-fx-controls-react/issues/634) +- `IconPicker`: get icons from `@uifabric/icons/lib/data/AllIconNames.json` ### Fixes From 17fef363eb9f29441c75d35c0dcea07ca66fe98c Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Tue, 13 Oct 2020 12:24:02 -0700 Subject: [PATCH 33/59] fix of #367 --- src/controls/taxonomyPicker/TaxonomyPicker.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/controls/taxonomyPicker/TaxonomyPicker.tsx b/src/controls/taxonomyPicker/TaxonomyPicker.tsx index 31a2c6e5c..7e6503d87 100644 --- a/src/controls/taxonomyPicker/TaxonomyPicker.tsx +++ b/src/controls/taxonomyPicker/TaxonomyPicker.tsx @@ -74,25 +74,26 @@ export class TaxonomyPicker extends React.Component { + public componentWillReceiveProps(nextProps: ITaxonomyPickerProps) { let newState: ITaxonomyPickerState | undefined; // Check if the initial values objects are not equal, if that is the case, data can be refreshed - if (!isEqual(this.props.initialValues, prevProps.initialValues)) { + if (!isEqual(this.props.initialValues, nextProps.initialValues)) { newState = { - activeNodes: this.props.initialValues || [] + activeNodes: nextProps.initialValues || [] }; } - if (this.props.errorMessage) { + if (nextProps.errorMessage) { if (!newState) { newState = {}; } newState.errorMessage = this.props.errorMessage; } + + if (newState) { + this.setState(newState); + } } /** From cbe42ac5781aa5e8b3f695ba05d3e5a02302d942 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Tue, 13 Oct 2020 12:24:57 -0700 Subject: [PATCH 34/59] changelog --- CHANGELOG.JSON | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON index dc4979e6c..e779ae148 100644 --- a/CHANGELOG.JSON +++ b/CHANGELOG.JSON @@ -13,7 +13,8 @@ "`IconPicker`: get icons from `@uifabric/icons/lib/data/AllIconNames.json`" ], "fixes": [ - "`RichText`: Cannot add link in first line [#672](https://github.com/pnp/sp-dev-fx-controls-react/issues/672)" + "`RichText`: Cannot add link in first line [#672](https://github.com/pnp/sp-dev-fx-controls-react/issues/672)", + "`TaxonomyPicker`: Ability to reset the TaxonomyPicker (Remove all selected Terms) [#367](https://github.com/pnp/sp-dev-fx-controls-react/issues/367)" ] }, "contributions": [ From b50c8497a9268eb144ce838a038b5513db9371b1 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Tue, 13 Oct 2020 12:25:11 -0700 Subject: [PATCH 35/59] pre-commit --- CHANGELOG.md | 1 + docs/documentation/docs/about/release-notes.md | 1 + 2 files changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index aedd7135b..77ba7e1ea 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ ### Fixes - `RichText`: Cannot add link in first line [#672](https://github.com/pnp/sp-dev-fx-controls-react/issues/672) +- `TaxonomyPicker`: Ability to reset the TaxonomyPicker (Remove all selected Terms) [#367](https://github.com/pnp/sp-dev-fx-controls-react/issues/367) ### Contributors diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md index aedd7135b..77ba7e1ea 100644 --- a/docs/documentation/docs/about/release-notes.md +++ b/docs/documentation/docs/about/release-notes.md @@ -14,6 +14,7 @@ ### Fixes - `RichText`: Cannot add link in first line [#672](https://github.com/pnp/sp-dev-fx-controls-react/issues/672) +- `TaxonomyPicker`: Ability to reset the TaxonomyPicker (Remove all selected Terms) [#367](https://github.com/pnp/sp-dev-fx-controls-react/issues/367) ### Contributors From 87fe8af377068370f820ed4c66e65f9e99fb6881 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Tue, 13 Oct 2020 12:36:51 -0700 Subject: [PATCH 36/59] lost fix --- src/controls/taxonomyPicker/TaxonomyPicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/controls/taxonomyPicker/TaxonomyPicker.tsx b/src/controls/taxonomyPicker/TaxonomyPicker.tsx index 7e6503d87..c7fa6aade 100644 --- a/src/controls/taxonomyPicker/TaxonomyPicker.tsx +++ b/src/controls/taxonomyPicker/TaxonomyPicker.tsx @@ -88,7 +88,7 @@ export class TaxonomyPicker extends React.Component Date: Tue, 13 Oct 2020 15:37:57 -0400 Subject: [PATCH 37/59] Update TaxonomyPicker.md the disabled property is boolean, not string --- docs/documentation/docs/controls/TaxonomyPicker.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/documentation/docs/controls/TaxonomyPicker.md b/docs/documentation/docs/controls/TaxonomyPicker.md index 037f8a131..6be321343 100644 --- a/docs/documentation/docs/controls/TaxonomyPicker.md +++ b/docs/documentation/docs/controls/TaxonomyPicker.md @@ -152,7 +152,7 @@ The TaxonomyPicker control can be configured with the following properties: | ---- | ---- | ---- | ---- | | panelTitle | string | yes | TermSet Picker Panel title. | | label | string | yes | Text displayed above the Taxonomy Picker. | -| disabled | string | no | Specify if the control needs to be disabled. | +| disabled | boolean | no | Specify if the control needs to be disabled. | | context | WebPartContext \| ExtensionContext | yes | Context of the current web part or extension. | | initialValues | IPickerTerms | no | Defines the selected by default term sets. | | allowMultipleSelections | boolean | no | Defines if the user can select only one or many term sets. Default value is false. | From ad402bdad555cdc87eeed1ed0ea31cf54917a20b Mon Sep 17 00:00:00 2001 From: aaclage Date: Tue, 13 Oct 2020 23:13:57 +0200 Subject: [PATCH 38/59] Fix stickyHeaderStyles with a Classname. --- .../listView/ListView.stickyHeader.css | 5 ++ src/controls/listView/ListView.tsx | 64 +++---------------- 2 files changed, 15 insertions(+), 54 deletions(-) create mode 100644 src/controls/listView/ListView.stickyHeader.css diff --git a/src/controls/listView/ListView.stickyHeader.css b/src/controls/listView/ListView.stickyHeader.css new file mode 100644 index 000000000..dc43687cf --- /dev/null +++ b/src/controls/listView/ListView.stickyHeader.css @@ -0,0 +1,5 @@ +.StickyHeader .ms-DetailsList-contentWrapper { + max-height: 40vh; + overflow-y: auto; + overflow-x: hidden; +} diff --git a/src/controls/listView/ListView.tsx b/src/controls/listView/ListView.tsx index bc51f1b2a..664c054c1 100644 --- a/src/controls/listView/ListView.tsx +++ b/src/controls/listView/ListView.tsx @@ -3,49 +3,18 @@ import styles from './ListView.DragDrop.module.scss'; import { DetailsList, DetailsListLayoutMode, Selection, SelectionMode, IGroup, IDetailsHeaderProps } from 'office-ui-fabric-react/lib/DetailsList'; import { IListViewProps, IListViewState, IViewField, IGrouping, GroupOrder } from './IListView'; import { IColumn, IGroupRenderProps, IObjectWithKey } from 'office-ui-fabric-react/lib/components/DetailsList'; -import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/ScrollablePane'; -import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky'; -import { IRenderFunction } from 'office-ui-fabric-react/lib/Utilities'; import { findIndex, has, sortBy, isEqual, cloneDeep } from '@microsoft/sp-lodash-subset'; import { FileTypeIcon, IconType } from '../fileTypeIcon/index'; import * as strings from 'ControlStrings'; import { IGroupsItems } from './IListView'; import * as telemetry from '../../common/telemetry'; import { Icon } from 'office-ui-fabric-react/lib/Icon'; -import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling'; +import './ListView.stickyHeader.css'; import filter from 'lodash/filter'; import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox'; import { Guid } from '@microsoft/sp-core-library'; -const classNames = mergeStyleSets({ - wrapper: { - height: '50vh', - position: 'relative' - } -}); - -/** -* Wrap the listview in a scrollable pane if sticky header = true -*/ -const ListViewWrapper = ({ stickyHeader, children }) => (stickyHeader ? -
- - {children} - -
- : children -); - -/** -* Lock the searchbox when scrolling if sticky header = true -*/ -const SearchBoxWrapper = ({ stickyHeader, children }) => (stickyHeader ? - - {children} - - : children -); /** * File type icon component @@ -596,22 +565,15 @@ export class ListView extends React.Component { } } - /** - * Custom render of header - * @param props - * @param defaultRender - */ - private _onRenderDetailsHeader: IRenderFunction = (props, defaultRender) => { - if (!props) { - return null; +/** +* Return Classname with StickyHeader +*/ + private _getClassName() { + if (this.props.stickyHeader) { + return "StickyHeader"; + } else { + return ""; } - return ( - - {defaultRender!({ - ...props, - })} - - ); } /** @@ -645,13 +607,9 @@ export class ListView extends React.Component {
} - -
{ showFilter && - - } { compact={compact} setKey="ListViewControl" groupProps={groupProps} - onRenderDetailsHeader={this._onRenderDetailsHeader} + className={this._getClassName()} /> -
-
); } From e891c90a816b4c3f08f4a09066282a5521fc59be Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Tue, 13 Oct 2020 15:14:14 -0700 Subject: [PATCH 39/59] changelog --- CHANGELOG.JSON | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON index e779ae148..2b531749b 100644 --- a/CHANGELOG.JSON +++ b/CHANGELOG.JSON @@ -10,7 +10,8 @@ "`ListView`: Drag and Drop option [#679](https://github.com/pnp/sp-dev-fx-controls-react/issues/679)", "`FolderExplorerService`: support special characters if folder name [#691](https://github.com/pnp/sp-dev-fx-controls-react/pull/691)", "`ListView`: Sticky Header [#634](https://github.com/pnp/sp-dev-fx-controls-react/issues/634)", - "`IconPicker`: get icons from `@uifabric/icons/lib/data/AllIconNames.json`" + "`IconPicker`: get icons from `@uifabric/icons/lib/data/AllIconNames.json`", + "`ListView`: Sticky header with `className` instead of additional components [#696](https://github.com/pnp/sp-dev-fx-controls-react/pull/696)" ], "fixes": [ "`RichText`: Cannot add link in first line [#672](https://github.com/pnp/sp-dev-fx-controls-react/issues/672)", From c9a27cfb06d0a36a89c8c6e99baca03ff53d2db1 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Tue, 13 Oct 2020 15:14:23 -0700 Subject: [PATCH 40/59] pre-commit --- CHANGELOG.md | 1 + docs/documentation/docs/about/release-notes.md | 1 + 2 files changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 77ba7e1ea..76125bb22 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ - `FolderExplorerService`: support special characters if folder name [#691](https://github.com/pnp/sp-dev-fx-controls-react/pull/691) - `ListView`: Sticky Header [#634](https://github.com/pnp/sp-dev-fx-controls-react/issues/634) - `IconPicker`: get icons from `@uifabric/icons/lib/data/AllIconNames.json` +- `ListView`: Sticky header with `className` instead of additional components [#696](https://github.com/pnp/sp-dev-fx-controls-react/pull/696) ### Fixes diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md index 77ba7e1ea..76125bb22 100644 --- a/docs/documentation/docs/about/release-notes.md +++ b/docs/documentation/docs/about/release-notes.md @@ -10,6 +10,7 @@ - `FolderExplorerService`: support special characters if folder name [#691](https://github.com/pnp/sp-dev-fx-controls-react/pull/691) - `ListView`: Sticky Header [#634](https://github.com/pnp/sp-dev-fx-controls-react/issues/634) - `IconPicker`: get icons from `@uifabric/icons/lib/data/AllIconNames.json` +- `ListView`: Sticky header with `className` instead of additional components [#696](https://github.com/pnp/sp-dev-fx-controls-react/pull/696) ### Fixes From 573874af85efaa341e564983001c86b18670b224 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Tue, 13 Oct 2020 17:18:40 -0700 Subject: [PATCH 41/59] reversed back some changes --- docs/documentation/docs/index.md | 3 --- package.json | 7 ++++++- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/documentation/docs/index.md b/docs/documentation/docs/index.md index 76f8c3693..e69039049 100644 --- a/docs/documentation/docs/index.md +++ b/docs/documentation/docs/index.md @@ -2,9 +2,6 @@ This repository provides developers with a set of reusable React controls that can be used in SharePoint Framework (SPFx) solutions. The project provides controls for building web parts and extensions. -!!! attention - In order to migrate to `v2` it is advicded to follow this guide: [Migrating from V1](./guides/migrate-from-v1). - ![Placeholder example](./assets/placeholder-intro.png) !!! attention diff --git a/package.json b/package.json index 5ef3cd4f8..5aacc437b 100644 --- a/package.json +++ b/package.json @@ -94,5 +94,10 @@ "Rodrigues, Joel <>", "Struyf, Elio ", "Terentiev, Alex " - ] + ], + "husky": { + "hooks": { + "pre-commit": "npm run changelog" + } + } } From d09cfaa259a94f565709e1806ce0108d5b6ca8ad Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Tue, 13 Oct 2020 17:20:33 -0700 Subject: [PATCH 42/59] changelog --- CHANGELOG.JSON | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON index 2b531749b..6bdd59c3a 100644 --- a/CHANGELOG.JSON +++ b/CHANGELOG.JSON @@ -15,7 +15,8 @@ ], "fixes": [ "`RichText`: Cannot add link in first line [#672](https://github.com/pnp/sp-dev-fx-controls-react/issues/672)", - "`TaxonomyPicker`: Ability to reset the TaxonomyPicker (Remove all selected Terms) [#367](https://github.com/pnp/sp-dev-fx-controls-react/issues/367)" + "`TaxonomyPicker`: Ability to reset the TaxonomyPicker (Remove all selected Terms) [#367](https://github.com/pnp/sp-dev-fx-controls-react/issues/367)", + "Documentation fix for `TaxonomyPicker`: the `disabled` property is a `boolean` and not a `string` as currently specified [#695](https://github.com/pnp/sp-dev-fx-controls-react/pull/695)" ] }, "contributions": [ From 6cf2e0614c2176a8b9ad8db9b95c8adeeb15673e Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Tue, 13 Oct 2020 17:20:42 -0700 Subject: [PATCH 43/59] pre-commit --- CHANGELOG.md | 1 + docs/documentation/docs/about/release-notes.md | 1 + 2 files changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 76125bb22..08cfa1448 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ - `RichText`: Cannot add link in first line [#672](https://github.com/pnp/sp-dev-fx-controls-react/issues/672) - `TaxonomyPicker`: Ability to reset the TaxonomyPicker (Remove all selected Terms) [#367](https://github.com/pnp/sp-dev-fx-controls-react/issues/367) +- Documentation fix for `TaxonomyPicker`: the `disabled` property is a `boolean` and not a `string` as currently specified [#695](https://github.com/pnp/sp-dev-fx-controls-react/pull/695) ### Contributors diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md index 76125bb22..08cfa1448 100644 --- a/docs/documentation/docs/about/release-notes.md +++ b/docs/documentation/docs/about/release-notes.md @@ -16,6 +16,7 @@ - `RichText`: Cannot add link in first line [#672](https://github.com/pnp/sp-dev-fx-controls-react/issues/672) - `TaxonomyPicker`: Ability to reset the TaxonomyPicker (Remove all selected Terms) [#367](https://github.com/pnp/sp-dev-fx-controls-react/issues/367) +- Documentation fix for `TaxonomyPicker`: the `disabled` property is a `boolean` and not a `string` as currently specified [#695](https://github.com/pnp/sp-dev-fx-controls-react/pull/695) ### Contributors From a4c0a920482dfae768711c99a406182585c9fdcc Mon Sep 17 00:00:00 2001 From: aaclage Date: Wed, 14 Oct 2020 12:11:11 +0200 Subject: [PATCH 44/59] Removal of bad pratices (css files and functions with embedded strings) and replace with scss and variables --- .../listView/ListView.stickyHeader.css | 5 ----- .../ListView.stickyHeader.module.scss | 8 ++++++++ src/controls/listView/ListView.tsx | 19 +++++-------------- 3 files changed, 13 insertions(+), 19 deletions(-) delete mode 100644 src/controls/listView/ListView.stickyHeader.css create mode 100644 src/controls/listView/ListView.stickyHeader.module.scss diff --git a/src/controls/listView/ListView.stickyHeader.css b/src/controls/listView/ListView.stickyHeader.css deleted file mode 100644 index dc43687cf..000000000 --- a/src/controls/listView/ListView.stickyHeader.css +++ /dev/null @@ -1,5 +0,0 @@ -.StickyHeader .ms-DetailsList-contentWrapper { - max-height: 40vh; - overflow-y: auto; - overflow-x: hidden; -} diff --git a/src/controls/listView/ListView.stickyHeader.module.scss b/src/controls/listView/ListView.stickyHeader.module.scss new file mode 100644 index 000000000..4bd7b3989 --- /dev/null +++ b/src/controls/listView/ListView.stickyHeader.module.scss @@ -0,0 +1,8 @@ +.StickyHeader { + : global(.ms-DetailsList-contentWrapper) + { + max-height: 40vh; + overflow-y: auto; + overflow-x: hidden; + } +} diff --git a/src/controls/listView/ListView.tsx b/src/controls/listView/ListView.tsx index 664c054c1..b32e36562 100644 --- a/src/controls/listView/ListView.tsx +++ b/src/controls/listView/ListView.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import styles from './ListView.DragDrop.module.scss'; +import stickyHeaderstyles from './ListView.stickyHeader.module.scss'; import { DetailsList, DetailsListLayoutMode, Selection, SelectionMode, IGroup, IDetailsHeaderProps } from 'office-ui-fabric-react/lib/DetailsList'; import { IListViewProps, IListViewState, IViewField, IGrouping, GroupOrder } from './IListView'; import { IColumn, IGroupRenderProps, IObjectWithKey } from 'office-ui-fabric-react/lib/components/DetailsList'; @@ -9,7 +10,6 @@ import * as strings from 'ControlStrings'; import { IGroupsItems } from './IListView'; import * as telemetry from '../../common/telemetry'; import { Icon } from 'office-ui-fabric-react/lib/Icon'; -import './ListView.stickyHeader.css'; import filter from 'lodash/filter'; import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox'; @@ -564,18 +564,6 @@ export class ListView extends React.Component { this.dragCounter = 0; } } - -/** -* Return Classname with StickyHeader -*/ - private _getClassName() { - if (this.props.stickyHeader) { - return "StickyHeader"; - } else { - return ""; - } - } - /** * Default React component render method */ @@ -623,7 +611,10 @@ export class ListView extends React.Component { compact={compact} setKey="ListViewControl" groupProps={groupProps} - className={this._getClassName()} + className={ + stickyHeader && + stickyHeaderstyles.StickyHeader + } /> ); From fb80efc867c2fcc6f6095276d9fb3a80db10587b Mon Sep 17 00:00:00 2001 From: aaclage Date: Wed, 14 Oct 2020 12:24:18 +0200 Subject: [PATCH 45/59] Clean reference --- .../listView/ListView.stickyHeader.module.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/controls/listView/ListView.stickyHeader.module.scss b/src/controls/listView/ListView.stickyHeader.module.scss index 4bd7b3989..efd714b2e 100644 --- a/src/controls/listView/ListView.stickyHeader.module.scss +++ b/src/controls/listView/ListView.stickyHeader.module.scss @@ -1,8 +1,8 @@ .StickyHeader { - : global(.ms-DetailsList-contentWrapper) - { - max-height: 40vh; - overflow-y: auto; - overflow-x: hidden; - } + :global(.ms-DetailsList-contentWrapper) +{ + max-height: 40vh; + overflow-y: auto; + overflow-x: hidden; +} } From 41f55b50772befaf16ca6defe86b84cc4de810af Mon Sep 17 00:00:00 2001 From: aaclage Date: Thu, 15 Oct 2020 00:03:17 +0200 Subject: [PATCH 46/59] Issue with Multiple Columns bigger then default width, fixed. --- .../listView/ListView.stickyHeader.module.scss | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/controls/listView/ListView.stickyHeader.module.scss b/src/controls/listView/ListView.stickyHeader.module.scss index efd714b2e..61a94b9d6 100644 --- a/src/controls/listView/ListView.stickyHeader.module.scss +++ b/src/controls/listView/ListView.stickyHeader.module.scss @@ -1,8 +1,10 @@ .StickyHeader { - :global(.ms-DetailsList-contentWrapper) -{ - max-height: 40vh; - overflow-y: auto; - overflow-x: hidden; -} + :global(.ms-FocusZone) { + max-height: 40vh; + overflow-y: overlay; + overflow-x: hidden; + } + :global(.ms-DetailsHeader) { + overflow-y: hidden; + } } From 3f7e3ddfd60d1ec19615e0e393b0308ffce66f0d Mon Sep 17 00:00:00 2001 From: Abderahman88 Date: Thu, 15 Oct 2020 16:14:00 +0100 Subject: [PATCH 47/59] child nodes expand/collapse --- src/controls/treeView/ITreeViewProps.ts | 5 +++++ src/controls/treeView/TreeItem.tsx | 12 ++++++++++-- src/controls/treeView/TreeView.tsx | 6 ++++-- .../controlsTest/components/ControlsTest.tsx | 15 +++++++++++---- 4 files changed, 30 insertions(+), 8 deletions(-) diff --git a/src/controls/treeView/ITreeViewProps.ts b/src/controls/treeView/ITreeViewProps.ts index 45445fe8a..2e72fae7c 100644 --- a/src/controls/treeView/ITreeViewProps.ts +++ b/src/controls/treeView/ITreeViewProps.ts @@ -67,4 +67,9 @@ export interface ITreeViewProps { * @argument item The tree item. */ onRenderItem?: (item: ITreeItem) => JSX.Element; + /** + * Default expand / collapse behavior for the child nodes. + * By default this is set to true. + */ + defaultExpandedChildren?: boolean; } diff --git a/src/controls/treeView/TreeItem.tsx b/src/controls/treeView/TreeItem.tsx index 87096d83f..55559dec7 100644 --- a/src/controls/treeView/TreeItem.tsx +++ b/src/controls/treeView/TreeItem.tsx @@ -61,6 +61,10 @@ export interface ITreeItemProps { onRenderItem?: (item: ITreeItem) => JSX.Element; nodesToExpand: any[]; + /** + * Specifies whether current tree item's children should be rendered as expanded. + */ + defaultExpandedChildren?: boolean; } @@ -217,14 +221,18 @@ export default class TreeItem extends React.Component { return ( { onRenderItem, showCheckboxes, treeItemActionsDisplayMode, - defaultExpanded + defaultExpanded, + defaultExpandedChildren } = this.props; - return ( + return (
{ items.map((treeNodeItem, index) => ( @@ -215,6 +216,7 @@ export class TreeView extends React.Component { leftOffset={20} isFirstRender={true} defaultExpanded={defaultExpanded} + defaultExpandedChildren={defaultExpandedChildren !== undefined ? defaultExpandedChildren : true} selectionMode={selectionMode} activeItems={this.state.activeItems} parentCallbackExpandCollapse={this.handleTreeExpandCollapse} diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx index 7160c49a0..3f12653bc 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/src/webparts/controlsTest/components/ControlsTest.tsx @@ -271,7 +271,13 @@ export default class ControlsTest extends React.Component -
+

Tree View

@@ -1317,7 +1323,8 @@ export default class ControlsTest extends React.Component @@ -1352,7 +1359,7 @@ export default class ControlsTest extends React.Component -
+ ); } From 592b73dd638691f8bdcd0dd4312522912511f5ea Mon Sep 17 00:00:00 2001 From: Abderahman88 Date: Thu, 15 Oct 2020 16:36:40 +0100 Subject: [PATCH 48/59] clean spaces --- src/controls/treeView/TreeView.tsx | 2 +- src/webparts/controlsTest/components/ControlsTest.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/controls/treeView/TreeView.tsx b/src/controls/treeView/TreeView.tsx index 6afcd25f4..e53db5ed1 100644 --- a/src/controls/treeView/TreeView.tsx +++ b/src/controls/treeView/TreeView.tsx @@ -207,7 +207,7 @@ export class TreeView extends React.Component { defaultExpandedChildren } = this.props; - return ( + return (
{ items.map((treeNodeItem, index) => ( diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx index 3f12653bc..6f8ca32db 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/src/webparts/controlsTest/components/ControlsTest.tsx @@ -1311,7 +1311,7 @@ export default class ControlsTest extends React.Component -
+

Tree View

@@ -1359,7 +1359,7 @@ export default class ControlsTest extends React.Component -
+ ); } From 9f0f4793707df97aef8f55d82aaf7f4e4bdfc4e9 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Sat, 17 Oct 2020 16:42:15 -0700 Subject: [PATCH 49/59] changelog --- CHANGELOG.JSON | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON index 6bdd59c3a..f843ccdfa 100644 --- a/CHANGELOG.JSON +++ b/CHANGELOG.JSON @@ -11,7 +11,8 @@ "`FolderExplorerService`: support special characters if folder name [#691](https://github.com/pnp/sp-dev-fx-controls-react/pull/691)", "`ListView`: Sticky Header [#634](https://github.com/pnp/sp-dev-fx-controls-react/issues/634)", "`IconPicker`: get icons from `@uifabric/icons/lib/data/AllIconNames.json`", - "`ListView`: Sticky header with `className` instead of additional components [#696](https://github.com/pnp/sp-dev-fx-controls-react/pull/696)" + "`ListView`: Sticky header with `className` instead of additional components [#696](https://github.com/pnp/sp-dev-fx-controls-react/pull/696)", + "`ListView`: `StickyHeader` code consistency [#697](https://github.com/pnp/sp-dev-fx-controls-react/pull/697)" ], "fixes": [ "`RichText`: Cannot add link in first line [#672](https://github.com/pnp/sp-dev-fx-controls-react/issues/672)", From 01f0a64863dcb3dda700db7956fa3f9e805076d3 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Sat, 17 Oct 2020 16:47:54 -0700 Subject: [PATCH 50/59] documentations --- docs/documentation/docs/controls/TreeView.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/documentation/docs/controls/TreeView.md b/docs/documentation/docs/controls/TreeView.md index 15d275871..df20dbf0a 100644 --- a/docs/documentation/docs/controls/TreeView.md +++ b/docs/documentation/docs/controls/TreeView.md @@ -39,6 +39,7 @@ import { TreeView, ITreeItem } from "@pnp/spfx-controls-react/lib/TreeView"; treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu} defaultSelectedKeys={['key1', 'key2']}, expandToSelected={true} + defaultExpandedChildren={true} onSelect={this.onTreeItemSelect} onExpandCollapse={this.onTreeItemExpandCollapse} onRenderItem={this.renderCustomTreeItem} /> @@ -88,7 +89,7 @@ The `TreeView` control can be configured with the following properties: | Property | Type | Required | Description | |--------------------------------|----------------------------|----------|------------------------------------------------------------------------------------------------------------------------------------| | items | ITreeItem[] | yes | An array of tree items to display. refer [example](#example-of-array-of-tree-items-used-to-render-control-as-in-first-screenshot). | -| defaultExpanded | boolean | no | Specify if the tree items are displayed as expanded by default (defaults to false). | +| defaultExpanded | boolean | no | Specify if the tree items are displayed as expanded by default (defaults to false. | | selectionMode | enum | no | Specifies the selection mode of tree view (defaults to Single selection). | | selectChildrenIfParentSelected | boolean | no | Specifies if the childrens should be selected when parent item is selected (defaults to false). | | showCheckboxes | boolean | yes | Specify if the checkboxes should be displayed for selection. | @@ -98,6 +99,7 @@ The `TreeView` control can be configured with the following properties: | onExpandCollapse | function | no | Defines a onExpandCollapse function to raise when the tree item has expanded or collapsed. | | onSelect | function | no | Captures the event of when the tree item selection has changed. | | onRenderItem | function | no | Optional callback to provide custom rendering of the item (default is simple text of item label and a checkbox for selection). | +| defaultExpandedChildren | boolean | no | Default expand / collapse behavior for the child nodes. By default this is set to true. | Enum `TreeViewSelectionMode` From b43a1ec269b6b3d5a190b1fabd4ae9bbff914e08 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Sat, 17 Oct 2020 16:49:39 -0700 Subject: [PATCH 51/59] changelog --- CHANGELOG.JSON | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON index f843ccdfa..026bc1737 100644 --- a/CHANGELOG.JSON +++ b/CHANGELOG.JSON @@ -12,7 +12,8 @@ "`ListView`: Sticky Header [#634](https://github.com/pnp/sp-dev-fx-controls-react/issues/634)", "`IconPicker`: get icons from `@uifabric/icons/lib/data/AllIconNames.json`", "`ListView`: Sticky header with `className` instead of additional components [#696](https://github.com/pnp/sp-dev-fx-controls-react/pull/696)", - "`ListView`: `StickyHeader` code consistency [#697](https://github.com/pnp/sp-dev-fx-controls-react/pull/697)" + "`ListView`: `StickyHeader` code consistency [#697](https://github.com/pnp/sp-dev-fx-controls-react/pull/697)", + "`TreeView`: Added (optional) property 'defaultExpandedChildren' that controls the behavior of the expansion of child elements.[#698](https://github.com/pnp/sp-dev-fx-controls-react/pull/698)" ], "fixes": [ "`RichText`: Cannot add link in first line [#672](https://github.com/pnp/sp-dev-fx-controls-react/issues/672)", From 5120961f896fbbc004abf369fc6a9c3899f8c839 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Sat, 17 Oct 2020 16:49:48 -0700 Subject: [PATCH 52/59] pre-commit --- CHANGELOG.md | 2 ++ docs/documentation/docs/about/release-notes.md | 2 ++ 2 files changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 08cfa1448..7e5272778 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,8 @@ - `ListView`: Sticky Header [#634](https://github.com/pnp/sp-dev-fx-controls-react/issues/634) - `IconPicker`: get icons from `@uifabric/icons/lib/data/AllIconNames.json` - `ListView`: Sticky header with `className` instead of additional components [#696](https://github.com/pnp/sp-dev-fx-controls-react/pull/696) +- `ListView`: `StickyHeader` code consistency [#697](https://github.com/pnp/sp-dev-fx-controls-react/pull/697) +- `TreeView`: Added (optional) property 'defaultExpandedChildren' that controls the behavior of the expansion of child elements.[#698](https://github.com/pnp/sp-dev-fx-controls-react/pull/698) ### Fixes diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md index 08cfa1448..7e5272778 100644 --- a/docs/documentation/docs/about/release-notes.md +++ b/docs/documentation/docs/about/release-notes.md @@ -11,6 +11,8 @@ - `ListView`: Sticky Header [#634](https://github.com/pnp/sp-dev-fx-controls-react/issues/634) - `IconPicker`: get icons from `@uifabric/icons/lib/data/AllIconNames.json` - `ListView`: Sticky header with `className` instead of additional components [#696](https://github.com/pnp/sp-dev-fx-controls-react/pull/696) +- `ListView`: `StickyHeader` code consistency [#697](https://github.com/pnp/sp-dev-fx-controls-react/pull/697) +- `TreeView`: Added (optional) property 'defaultExpandedChildren' that controls the behavior of the expansion of child elements.[#698](https://github.com/pnp/sp-dev-fx-controls-react/pull/698) ### Fixes From 47568b5d453196aaaedb38fd1c57a278d67ff78f Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Sat, 17 Oct 2020 17:39:26 -0700 Subject: [PATCH 53/59] fix of #683 --- .../listItemPicker/ComboBoxListItemPicker.tsx | 19 ++++++++++----- .../controlsTest/components/ControlsTest.tsx | 23 +++++++++++++++---- .../ControlsTest_SingleComponent.tsx | 3 ++- .../components/IControlsTestProps.ts | 1 + 4 files changed, 34 insertions(+), 12 deletions(-) diff --git a/src/controls/listItemPicker/ComboBoxListItemPicker.tsx b/src/controls/listItemPicker/ComboBoxListItemPicker.tsx index 44688f39e..059927920 100644 --- a/src/controls/listItemPicker/ComboBoxListItemPicker.tsx +++ b/src/controls/listItemPicker/ComboBoxListItemPicker.tsx @@ -31,10 +31,10 @@ export class ComboBoxListItemPicker extends React.Component { + protected async loadOptions(props: IComboBoxListItemPickerProps, isInitialLoad?: boolean): Promise { const { filter, keyColumnInternalName, @@ -44,7 +44,7 @@ export class ComboBoxListItemPicker extends React.Component { + if (nextProps.listId !== this.props.listId) { + await this.loadOptions(nextProps, false); this.selectedItems = []; } } + /*public componentDidUpdate(prevProps: IComboBoxListItemPickerProps, prevState: IComboBoxListItemPickerState): void { + if (this.props.listId !== prevProps.listId) { + + } + }*/ + /** * Render the field */ diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx index 6f8ca32db..b897f90a4 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/src/webparts/controlsTest/components/ControlsTest.tsx @@ -33,7 +33,7 @@ import { TermLabelAction, TermActionsDisplayMode } from '../../../controls/taxon import { ListItemAttachments } from '../../../ListItemAttachments'; import { RichText } from '../../../RichText'; import { Link } from 'office-ui-fabric-react/lib/components/Link'; -import { Carousel, CarouselButtonsLocation, CarouselButtonsDisplay, CarouselIndicatorShape, CarouselIndicatorsDisplay } from '../../../controls/carousel'; +import { Carousel, CarouselButtonsLocation, CarouselButtonsDisplay, CarouselIndicatorShape, CarouselIndicatorsDisplay } from '../../../controls/carousel'; import { TimeDisplayControlType } from '../../../controls/dateTimePicker/TimeDisplayControlType'; import { GridLayout } from '../../../GridLayout'; import { ComboBoxListItemPicker } from '../../../controls/listItemPicker/ComboBoxListItemPicker'; @@ -309,7 +309,8 @@ export default class ControlsTest extends React.ComponentComboBoxListItemPicker: - + { this.setState({ + comboBoxListItemPickerListId: '71210430-8436-4962-a14d-5525475abd6b' + }); }} /> +
iframe dialog tester: @@ -1128,7 +1133,15 @@ export default class ControlsTest extends React.Component
-
+
- +
+

{strings.RecentDocumentsHeader}

- - +
+
{isLoading ? this._renderSpinner() : results === undefined || results.length < 1 ? this._renderPlaceholder() : this._renderGridList() } - - - +
+
+
this._handleSave()} className={styles.actionButton} >{strings.OpenButtonLabel} this._handleClose()} className={styles.actionButton}>{strings.CancelButtonLabel} - - - +
+
+
); } diff --git a/src/controls/filePicker/StockImagesTab/StockImages.module.scss b/src/controls/filePicker/StockImagesTab/StockImages.module.scss index a705e7dee..57bd178a6 100644 --- a/src/controls/filePicker/StockImagesTab/StockImages.module.scss +++ b/src/controls/filePicker/StockImagesTab/StockImages.module.scss @@ -13,6 +13,6 @@ padding: 0px; overflow: hidden; - margin-top:-30px; - margin-left: -35px; -} \ No newline at end of file + //margin-top:-30px; + //margin-left: -35px; +} diff --git a/src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx b/src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx index b80a11ca9..5ebbe6bdc 100644 --- a/src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx +++ b/src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx @@ -4,6 +4,7 @@ import { IUploadFilePickerTabProps, IUploadFilePickerTabState } from '.'; import { IFilePickerResult } from '../FilePicker.types'; import { GeneralHelper } from '../../../common/utilities'; import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/components/Button'; +import { css } from '@uifabric/utilities/lib/css'; import * as strings from 'ControlStrings'; import styles from './UploadFilePickerTab.module.scss'; @@ -28,7 +29,7 @@ export default class UploadFilePickerTab extends React.Component

{strings.UploadFileHeader}

-
+
- -

{strings.WebSearchLinkLabel}

- - {this.props.bingSearchService && this._renderSearchBox()} +

{strings.WebSearchLinkLabel}

-
- { !query && this._renderSearchSuggestions() } - { query && results && this._renderSearchResults() } + {this.props.bingSearchService && this._renderSearchBox()} +
+ {!query && this._renderSearchSuggestions()} + {query && results && this._renderSearchResults()}
{ diff --git a/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss b/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss index 96ca7d85a..d17ed7ce7 100644 --- a/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss +++ b/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss @@ -92,5 +92,5 @@ } .documentLibraryBrowserContainer { - padding: 0 32px; + padding: 0; } From b40d35775106422d62e4923e2e2f8411ab8632f7 Mon Sep 17 00:00:00 2001 From: AJIXuMuK Date: Tue, 20 Oct 2020 20:15:23 -0700 Subject: [PATCH 57/59] changelog --- CHANGELOG.JSON | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON index 34c6f9c57..c3c431076 100644 --- a/CHANGELOG.JSON +++ b/CHANGELOG.JSON @@ -19,7 +19,8 @@ "`RichText`: Cannot add link in first line [#672](https://github.com/pnp/sp-dev-fx-controls-react/issues/672)", "`TaxonomyPicker`: Ability to reset the TaxonomyPicker (Remove all selected Terms) [#367](https://github.com/pnp/sp-dev-fx-controls-react/issues/367)", "Documentation fix for `TaxonomyPicker`: the `disabled` property is a `boolean` and not a `string` as currently specified [#695](https://github.com/pnp/sp-dev-fx-controls-react/pull/695)", - "`ComboBoxListItemPicker`: update options when `listId` has been changed [#683](https://github.com/pnp/sp-dev-fx-controls-react/issues/683)" + "`ComboBoxListItemPicker`: update options when `listId` has been changed [#683](https://github.com/pnp/sp-dev-fx-controls-react/issues/683)", + "`FilePicker`: styles are updated to match OOB control [#700](https://github.com/pnp/sp-dev-fx-controls-react/issues/700)" ] }, "contributions": [ From 7396e8bf1fe66237ff6882b305a1fe7cd06f3d01 Mon Sep 17 00:00:00 2001 From: AJIXuMuK Date: Tue, 20 Oct 2020 20:15:47 -0700 Subject: [PATCH 58/59] pre-commit --- CHANGELOG.md | 1 + docs/documentation/docs/about/release-notes.md | 1 + 2 files changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index eb0c857bd..943b20508 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ - `TaxonomyPicker`: Ability to reset the TaxonomyPicker (Remove all selected Terms) [#367](https://github.com/pnp/sp-dev-fx-controls-react/issues/367) - Documentation fix for `TaxonomyPicker`: the `disabled` property is a `boolean` and not a `string` as currently specified [#695](https://github.com/pnp/sp-dev-fx-controls-react/pull/695) - `ComboBoxListItemPicker`: update options when `listId` has been changed [#683](https://github.com/pnp/sp-dev-fx-controls-react/issues/683) +- `FilePicker`: styles are updated to match OOB control [#700](https://github.com/pnp/sp-dev-fx-controls-react/issues/700) ### Contributors diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md index eb0c857bd..943b20508 100644 --- a/docs/documentation/docs/about/release-notes.md +++ b/docs/documentation/docs/about/release-notes.md @@ -20,6 +20,7 @@ - `TaxonomyPicker`: Ability to reset the TaxonomyPicker (Remove all selected Terms) [#367](https://github.com/pnp/sp-dev-fx-controls-react/issues/367) - Documentation fix for `TaxonomyPicker`: the `disabled` property is a `boolean` and not a `string` as currently specified [#695](https://github.com/pnp/sp-dev-fx-controls-react/pull/695) - `ComboBoxListItemPicker`: update options when `listId` has been changed [#683](https://github.com/pnp/sp-dev-fx-controls-react/issues/683) +- `FilePicker`: styles are updated to match OOB control [#700](https://github.com/pnp/sp-dev-fx-controls-react/issues/700) ### Contributors From 4b99c5113d2721d1c3dc61ed67391399d48bc30a Mon Sep 17 00:00:00 2001 From: AJIXuMuK Date: Tue, 20 Oct 2020 21:50:55 -0700 Subject: [PATCH 59/59] FilePicker - some lost styles --- .../filePicker/FilePicker.module.scss | 28 +++++++++---------- .../OneDriveFilesTab/OneDriveFilesTab.tsx | 2 +- .../RecentFilesTab/RecentFilesTab.tsx | 2 +- .../SiteFilePickerTab/SiteFilePickerTab.tsx | 2 +- .../controlsTest/components/ControlsTest.tsx | 2 +- 5 files changed, 17 insertions(+), 19 deletions(-) diff --git a/src/controls/filePicker/FilePicker.module.scss b/src/controls/filePicker/FilePicker.module.scss index ebe1bb1c3..1bf84195b 100644 --- a/src/controls/filePicker/FilePicker.module.scss +++ b/src/controls/filePicker/FilePicker.module.scss @@ -28,13 +28,6 @@ margin: 0; } -.filePicker - :global(.ms-Panel-main) - :global(.ms-Panel-contentInner) - :global(.ms-Panel-content) { - height: 100%; -} - .filePicker :global(.ms-Nav-link) { position: relative; -webkit-font-smoothing: antialiased; @@ -59,7 +52,6 @@ outline: transparent; border-width: initial; border-style: none; - border-color: initial; border-image: initial; text-decoration: none; border-radius: 0px; @@ -124,6 +116,7 @@ } .nav { + position: absolute; height: 100%; color: $ms-color-neutralLighter; } @@ -153,12 +146,17 @@ .breadcrumbNav { margin-top: 0px; + padding: 22px 32px; } .breadcrumbNavItem { color: $ms-color-neutralPrimary; - font-size: 28px; - font-weight: 100; - padding: 22px 10px 20px 32px; + font-size: 24px; + font-weight: 600; + padding: 22px 8px 20px 0; +} + +.breadcrumbNav :global(.ms-Breadcrumb-listItem:last-child .ms-Breadcrumb-itemLink) { + font-weight: 600; } .tab { @@ -243,14 +241,10 @@ .tabContainer { height: 100%; - -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; flex-direction: column; } @@ -292,6 +286,10 @@ background-color: red; } +.itemPickerTopBar :global(.ms-CommandBarItem-link) { + border-color: transparent; +} + .commandBarNoChevron :global(.ms-CommandBarItem-chevronDown) { display: none; } diff --git a/src/controls/filePicker/OneDriveFilesTab/OneDriveFilesTab.tsx b/src/controls/filePicker/OneDriveFilesTab/OneDriveFilesTab.tsx index 50cd6d5ef..30611c91c 100644 --- a/src/controls/filePicker/OneDriveFilesTab/OneDriveFilesTab.tsx +++ b/src/controls/filePicker/OneDriveFilesTab/OneDriveFilesTab.tsx @@ -65,7 +65,7 @@ export class OneDriveFilesTab extends React.Component
- +
{this.state.libraryAbsolutePath !== undefined && diff --git a/src/controls/filePicker/RecentFilesTab/RecentFilesTab.tsx b/src/controls/filePicker/RecentFilesTab/RecentFilesTab.tsx index 8e59e8ca7..1b336be2d 100644 --- a/src/controls/filePicker/RecentFilesTab/RecentFilesTab.tsx +++ b/src/controls/filePicker/RecentFilesTab/RecentFilesTab.tsx @@ -26,7 +26,7 @@ const ROWS_PER_PAGE = 3; /** * Maximum row height */ -const MAX_ROW_HEIGHT = 250; +const MAX_ROW_HEIGHT = 175; export default class RecentFilesTab extends React.Component { private _columnCount: number; diff --git a/src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx b/src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx index c8a063617..ad15cfb37 100644 --- a/src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx +++ b/src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx @@ -37,7 +37,7 @@ export default class SiteFilePickerTab extends React.Component
- +
{this.state.libraryAbsolutePath === undefined && diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx index b897f90a4..514cc1de7 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/src/webparts/controlsTest/components/ControlsTest.tsx @@ -1274,7 +1274,7 @@ export default class ControlsTest extends React.Component { this.setState({ filePickerResult }); }} context={this.props.context} - hideRecentTab={true} + hideRecentTab={false} /> { this.state.filePickerResult &&