ref(dialog) Remove atlaskit dialog (#12925)
This commit is contained in:
Robert Pintilii
GitHub
parent
df1a5a25d4
commit
ef0168c9ff
|
|
@ -15,7 +15,6 @@
|
||||||
"@atlaskit/icon": "21.2.0",
|
"@atlaskit/icon": "21.2.0",
|
||||||
"@atlaskit/inline-dialog": "13.0.9",
|
"@atlaskit/inline-dialog": "13.0.9",
|
||||||
"@atlaskit/inline-message": "11.0.8",
|
"@atlaskit/inline-message": "11.0.8",
|
||||||
"@atlaskit/modal-dialog": "11.2.4",
|
|
||||||
"@atlaskit/multi-select": "15.0.5",
|
"@atlaskit/multi-select": "15.0.5",
|
||||||
"@atlaskit/spinner": "15.0.6",
|
"@atlaskit/spinner": "15.0.6",
|
||||||
"@atlaskit/tabs": "12.1.2",
|
"@atlaskit/tabs": "12.1.2",
|
||||||
|
|
@ -336,44 +335,6 @@
|
||||||
"react": "^16.8.0"
|
"react": "^16.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@atlaskit/blanket": {
|
|
||||||
"version": "11.4.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/@atlaskit/blanket/-/blanket-11.4.1.tgz",
|
|
||||||
"integrity": "sha512-jQor3MUcsD04/lUjdW89daYw6t0gFEuWzyqYGKgDQpVeQ3n0Lfrg5S3Eogc2cbRzgKMGaET6HMB+FD6EpE2QsQ==",
|
|
||||||
"dependencies": {
|
|
||||||
"@atlaskit/analytics-next": "^8.0.0",
|
|
||||||
"@atlaskit/ds-lib": "^1.2.0",
|
|
||||||
"@atlaskit/theme": "^11.2.0",
|
|
||||||
"@babel/runtime": "^7.0.0",
|
|
||||||
"@emotion/core": "^10.0.9"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": "^16.8.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@atlaskit/blanket/node_modules/@atlaskit/theme": {
|
|
||||||
"version": "11.5.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-11.5.2.tgz",
|
|
||||||
"integrity": "sha512-iycVcMzGaPboTVu0s+DoeV3oZZGIxXca1IjVtlxERA/78dftYoVTjiBnh6XtAQnIgB0O+SaAOQaaHJZgJ4gwpQ==",
|
|
||||||
"dependencies": {
|
|
||||||
"@atlaskit/tokens": "^0.2.0",
|
|
||||||
"@babel/runtime": "^7.0.0",
|
|
||||||
"exenv": "^1.2.2",
|
|
||||||
"prop-types": "^15.5.10"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": "^16.8.0",
|
|
||||||
"styled-components": "^3.2.6"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@atlaskit/blanket/node_modules/@atlaskit/tokens": {
|
|
||||||
"version": "0.2.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/@atlaskit/tokens/-/tokens-0.2.1.tgz",
|
|
||||||
"integrity": "sha512-Fm/F9mOC7QI5OSwvyY5N5+cvhx0lPLPAE5sE520ztb+YOaSiFxHZ13YBJkkdVTtxbGsYayYWITinGDQcCnhLog==",
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/runtime": "^7.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@atlaskit/button": {
|
"node_modules/@atlaskit/button": {
|
||||||
"version": "15.1.4",
|
"version": "15.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-15.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-15.1.4.tgz",
|
||||||
|
|
@ -663,93 +624,6 @@
|
||||||
"styled-components": "^3.2.6"
|
"styled-components": "^3.2.6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@atlaskit/modal-dialog": {
|
|
||||||
"version": "11.2.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/@atlaskit/modal-dialog/-/modal-dialog-11.2.4.tgz",
|
|
||||||
"integrity": "sha512-+Qe2Ai2qiBCaLm5F144Kn+M8931097mlZTbBppCrhBbanOyZJHrRkzqbCCd5NGGLpfLUZxfZaQYJssrHfGCDnA==",
|
|
||||||
"dependencies": {
|
|
||||||
"@atlaskit/analytics-next": "^8.0.0",
|
|
||||||
"@atlaskit/blanket": "^11.0.0",
|
|
||||||
"@atlaskit/button": "^15.1.0",
|
|
||||||
"@atlaskit/icon": "^21.1.0",
|
|
||||||
"@atlaskit/portal": "^4.0.0",
|
|
||||||
"@atlaskit/theme": "^11.0.0",
|
|
||||||
"@babel/runtime": "^7.0.0",
|
|
||||||
"@emotion/core": "^10.0.9",
|
|
||||||
"@emotion/styled": "^10.0.7",
|
|
||||||
"exenv": "^1.2.2",
|
|
||||||
"raf-schd": "^2.1.0",
|
|
||||||
"react-focus-lock": "^1.19.1",
|
|
||||||
"react-scrolllock": "^5.0.1",
|
|
||||||
"react-transition-group": "^4.4.1",
|
|
||||||
"react-uid": "^2.2.0",
|
|
||||||
"tiny-invariant": "^0.0.3"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": "^16.8.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@atlaskit/modal-dialog/node_modules/@emotion/styled": {
|
|
||||||
"version": "10.3.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.3.0.tgz",
|
|
||||||
"integrity": "sha512-GgcUpXBBEU5ido+/p/mCT2/Xx+Oqmp9JzQRuC+a4lYM4i4LBBn/dWvc0rQ19N9ObA8/T4NWMrPNe79kMBDJqoQ==",
|
|
||||||
"dependencies": {
|
|
||||||
"@emotion/styled-base": "^10.3.0",
|
|
||||||
"babel-plugin-emotion": "^10.0.27"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"@emotion/core": "^10.0.27",
|
|
||||||
"react": ">=16.3.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@atlaskit/modal-dialog/node_modules/dom-helpers": {
|
|
||||||
"version": "5.2.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
|
|
||||||
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/runtime": "^7.8.7",
|
|
||||||
"csstype": "^3.0.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@atlaskit/modal-dialog/node_modules/focus-lock": {
|
|
||||||
"version": "0.6.8",
|
|
||||||
"resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.6.8.tgz",
|
|
||||||
"integrity": "sha512-vkHTluRCoq9FcsrldC0ulQHiyBYgVJB2CX53I8r0nTC6KnEij7Of0jpBspjt3/CuNb6fyoj3aOh9J2HgQUM0og=="
|
|
||||||
},
|
|
||||||
"node_modules/@atlaskit/modal-dialog/node_modules/raf-schd": {
|
|
||||||
"version": "2.1.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-2.1.2.tgz",
|
|
||||||
"integrity": "sha512-Orl0IEvMtUCgPddgSxtxreK77UiQz4nPYJy9RggVzu4mKsZkQWiAaG1y9HlYWdvm9xtN348xRaT37qkvL/+A+g=="
|
|
||||||
},
|
|
||||||
"node_modules/@atlaskit/modal-dialog/node_modules/react-focus-lock": {
|
|
||||||
"version": "1.19.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-1.19.1.tgz",
|
|
||||||
"integrity": "sha512-TPpfiack1/nF4uttySfpxPk4rGZTLXlaZl7ncZg/ELAk24Iq2B1UUaUioID8H8dneUXqznT83JTNDHDj+kwryw==",
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/runtime": "^7.0.0",
|
|
||||||
"focus-lock": "^0.6.3",
|
|
||||||
"prop-types": "^15.6.2",
|
|
||||||
"react-clientside-effect": "^1.2.0"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": "^15.0.0 || ^16.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@atlaskit/modal-dialog/node_modules/react-transition-group": {
|
|
||||||
"version": "4.4.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
|
|
||||||
"integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/runtime": "^7.5.5",
|
|
||||||
"dom-helpers": "^5.0.1",
|
|
||||||
"loose-envify": "^1.4.0",
|
|
||||||
"prop-types": "^15.6.2"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": ">=16.6.0",
|
|
||||||
"react-dom": ">=16.6.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@atlaskit/motion": {
|
"node_modules/@atlaskit/motion": {
|
||||||
"version": "0.4.8",
|
"version": "0.4.8",
|
||||||
"resolved": "https://registry.npmjs.org/@atlaskit/motion/-/motion-0.4.8.tgz",
|
"resolved": "https://registry.npmjs.org/@atlaskit/motion/-/motion-0.4.8.tgz",
|
||||||
|
|
@ -18787,11 +18661,6 @@
|
||||||
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
|
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/tiny-invariant": {
|
|
||||||
"version": "0.0.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-0.0.3.tgz",
|
|
||||||
"integrity": "sha512-SA2YwvDrCITM9fTvHTHRpq9W6L2fBsClbqm3maT5PZux4Z73SPPDYwJMtnoWh6WMgmCkJij/LaOlWiqJqFMK8g=="
|
|
||||||
},
|
|
||||||
"node_modules/tiny-warning": {
|
"node_modules/tiny-warning": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||||
|
|
@ -20729,39 +20598,6 @@
|
||||||
"tslib": "^2.0.0"
|
"tslib": "^2.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@atlaskit/blanket": {
|
|
||||||
"version": "11.4.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/@atlaskit/blanket/-/blanket-11.4.1.tgz",
|
|
||||||
"integrity": "sha512-jQor3MUcsD04/lUjdW89daYw6t0gFEuWzyqYGKgDQpVeQ3n0Lfrg5S3Eogc2cbRzgKMGaET6HMB+FD6EpE2QsQ==",
|
|
||||||
"requires": {
|
|
||||||
"@atlaskit/analytics-next": "^8.0.0",
|
|
||||||
"@atlaskit/ds-lib": "^1.2.0",
|
|
||||||
"@atlaskit/theme": "^11.2.0",
|
|
||||||
"@babel/runtime": "^7.0.0",
|
|
||||||
"@emotion/core": "^10.0.9"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@atlaskit/theme": {
|
|
||||||
"version": "11.5.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-11.5.2.tgz",
|
|
||||||
"integrity": "sha512-iycVcMzGaPboTVu0s+DoeV3oZZGIxXca1IjVtlxERA/78dftYoVTjiBnh6XtAQnIgB0O+SaAOQaaHJZgJ4gwpQ==",
|
|
||||||
"requires": {
|
|
||||||
"@atlaskit/tokens": "^0.2.0",
|
|
||||||
"@babel/runtime": "^7.0.0",
|
|
||||||
"exenv": "^1.2.2",
|
|
||||||
"prop-types": "^15.5.10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@atlaskit/tokens": {
|
|
||||||
"version": "0.2.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/@atlaskit/tokens/-/tokens-0.2.1.tgz",
|
|
||||||
"integrity": "sha512-Fm/F9mOC7QI5OSwvyY5N5+cvhx0lPLPAE5sE520ztb+YOaSiFxHZ13YBJkkdVTtxbGsYayYWITinGDQcCnhLog==",
|
|
||||||
"requires": {
|
|
||||||
"@babel/runtime": "^7.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@atlaskit/button": {
|
"@atlaskit/button": {
|
||||||
"version": "15.1.4",
|
"version": "15.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-15.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-15.1.4.tgz",
|
||||||
|
|
@ -20990,81 +20826,6 @@
|
||||||
"react-scrolllock": "^5.0.1"
|
"react-scrolllock": "^5.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@atlaskit/modal-dialog": {
|
|
||||||
"version": "11.2.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/@atlaskit/modal-dialog/-/modal-dialog-11.2.4.tgz",
|
|
||||||
"integrity": "sha512-+Qe2Ai2qiBCaLm5F144Kn+M8931097mlZTbBppCrhBbanOyZJHrRkzqbCCd5NGGLpfLUZxfZaQYJssrHfGCDnA==",
|
|
||||||
"requires": {
|
|
||||||
"@atlaskit/analytics-next": "^8.0.0",
|
|
||||||
"@atlaskit/blanket": "^11.0.0",
|
|
||||||
"@atlaskit/button": "^15.1.0",
|
|
||||||
"@atlaskit/icon": "^21.1.0",
|
|
||||||
"@atlaskit/portal": "^4.0.0",
|
|
||||||
"@atlaskit/theme": "^11.0.0",
|
|
||||||
"@babel/runtime": "^7.0.0",
|
|
||||||
"@emotion/core": "^10.0.9",
|
|
||||||
"@emotion/styled": "^10.0.7",
|
|
||||||
"exenv": "^1.2.2",
|
|
||||||
"raf-schd": "^2.1.0",
|
|
||||||
"react-focus-lock": "^1.19.1",
|
|
||||||
"react-scrolllock": "^5.0.1",
|
|
||||||
"react-transition-group": "^4.4.1",
|
|
||||||
"react-uid": "^2.2.0",
|
|
||||||
"tiny-invariant": "^0.0.3"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@emotion/styled": {
|
|
||||||
"version": "10.3.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.3.0.tgz",
|
|
||||||
"integrity": "sha512-GgcUpXBBEU5ido+/p/mCT2/Xx+Oqmp9JzQRuC+a4lYM4i4LBBn/dWvc0rQ19N9ObA8/T4NWMrPNe79kMBDJqoQ==",
|
|
||||||
"requires": {
|
|
||||||
"@emotion/styled-base": "^10.3.0",
|
|
||||||
"babel-plugin-emotion": "^10.0.27"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"dom-helpers": {
|
|
||||||
"version": "5.2.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
|
|
||||||
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
|
|
||||||
"requires": {
|
|
||||||
"@babel/runtime": "^7.8.7",
|
|
||||||
"csstype": "^3.0.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"focus-lock": {
|
|
||||||
"version": "0.6.8",
|
|
||||||
"resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.6.8.tgz",
|
|
||||||
"integrity": "sha512-vkHTluRCoq9FcsrldC0ulQHiyBYgVJB2CX53I8r0nTC6KnEij7Of0jpBspjt3/CuNb6fyoj3aOh9J2HgQUM0og=="
|
|
||||||
},
|
|
||||||
"raf-schd": {
|
|
||||||
"version": "2.1.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-2.1.2.tgz",
|
|
||||||
"integrity": "sha512-Orl0IEvMtUCgPddgSxtxreK77UiQz4nPYJy9RggVzu4mKsZkQWiAaG1y9HlYWdvm9xtN348xRaT37qkvL/+A+g=="
|
|
||||||
},
|
|
||||||
"react-focus-lock": {
|
|
||||||
"version": "1.19.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-1.19.1.tgz",
|
|
||||||
"integrity": "sha512-TPpfiack1/nF4uttySfpxPk4rGZTLXlaZl7ncZg/ELAk24Iq2B1UUaUioID8H8dneUXqznT83JTNDHDj+kwryw==",
|
|
||||||
"requires": {
|
|
||||||
"@babel/runtime": "^7.0.0",
|
|
||||||
"focus-lock": "^0.6.3",
|
|
||||||
"prop-types": "^15.6.2",
|
|
||||||
"react-clientside-effect": "^1.2.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"react-transition-group": {
|
|
||||||
"version": "4.4.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
|
|
||||||
"integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
|
|
||||||
"requires": {
|
|
||||||
"@babel/runtime": "^7.5.5",
|
|
||||||
"dom-helpers": "^5.0.1",
|
|
||||||
"loose-envify": "^1.4.0",
|
|
||||||
"prop-types": "^15.6.2"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@atlaskit/motion": {
|
"@atlaskit/motion": {
|
||||||
"version": "0.4.8",
|
"version": "0.4.8",
|
||||||
"resolved": "https://registry.npmjs.org/@atlaskit/motion/-/motion-0.4.8.tgz",
|
"resolved": "https://registry.npmjs.org/@atlaskit/motion/-/motion-0.4.8.tgz",
|
||||||
|
|
@ -34609,11 +34370,6 @@
|
||||||
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
|
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"tiny-invariant": {
|
|
||||||
"version": "0.0.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-0.0.3.tgz",
|
|
||||||
"integrity": "sha512-SA2YwvDrCITM9fTvHTHRpq9W6L2fBsClbqm3maT5PZux4Z73SPPDYwJMtnoWh6WMgmCkJij/LaOlWiqJqFMK8g=="
|
|
||||||
},
|
|
||||||
"tiny-warning": {
|
"tiny-warning": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,6 @@
|
||||||
"@atlaskit/icon": "21.2.0",
|
"@atlaskit/icon": "21.2.0",
|
||||||
"@atlaskit/inline-dialog": "13.0.9",
|
"@atlaskit/inline-dialog": "13.0.9",
|
||||||
"@atlaskit/inline-message": "11.0.8",
|
"@atlaskit/inline-message": "11.0.8",
|
||||||
"@atlaskit/modal-dialog": "11.2.4",
|
|
||||||
"@atlaskit/multi-select": "15.0.5",
|
"@atlaskit/multi-select": "15.0.5",
|
||||||
"@atlaskit/spinner": "15.0.6",
|
"@atlaskit/spinner": "15.0.6",
|
||||||
"@atlaskit/tabs": "12.1.2",
|
"@atlaskit/tabs": "12.1.2",
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,5 @@ import '../toolbox/middleware';
|
||||||
import '../face-landmarks/middleware';
|
import '../face-landmarks/middleware';
|
||||||
import '../gifs/middleware';
|
import '../gifs/middleware';
|
||||||
import '../whiteboard/middleware';
|
import '../whiteboard/middleware';
|
||||||
import '../base/dialog/middleware';
|
|
||||||
|
|
||||||
import './middlewares.any';
|
import './middlewares.any';
|
||||||
|
|
|
||||||
|
|
@ -1,93 +0,0 @@
|
||||||
// @flow
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
import { connect } from '../../../redux';
|
|
||||||
import AbstractDialog from '../AbstractDialog';
|
|
||||||
import type { Props as AbstractDialogProps, State } from '../AbstractDialog';
|
|
||||||
|
|
||||||
import StatelessDialog from './StatelessDialog';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The type of the React {@code Component} props of {@link Dialog}.
|
|
||||||
*/
|
|
||||||
type Props = AbstractDialogProps & {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* True if listening for the Enter key should be disabled.
|
|
||||||
*/
|
|
||||||
disableEnter: boolean,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Whether the dialog is modal. This means clicking on the blanket will
|
|
||||||
* leave the dialog open. No cancel button.
|
|
||||||
*/
|
|
||||||
isModal: boolean,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Disables rendering of the submit button.
|
|
||||||
*/
|
|
||||||
submitDisabled: boolean,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Width of the dialog, can be:
|
|
||||||
* - 'small' (400px), 'medium' (600px), 'large' (800px),
|
|
||||||
* 'x-large' (968px)
|
|
||||||
* - integer value for pixel width
|
|
||||||
* - string value for percentage.
|
|
||||||
*/
|
|
||||||
width: string
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Web dialog that uses atlaskit modal-dialog to display dialogs.
|
|
||||||
*/
|
|
||||||
class Dialog extends AbstractDialog<Props, State> {
|
|
||||||
/**
|
|
||||||
* Initializes a new Dialog instance.
|
|
||||||
*
|
|
||||||
* @param {Object} props - The read-only properties with which the new
|
|
||||||
* instance is to be initialized.
|
|
||||||
*/
|
|
||||||
constructor(props: Props) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
// Bind event handlers so they are only bound once per instance.
|
|
||||||
this._onCancel = this._onCancel.bind(this);
|
|
||||||
this._onSubmit = this._onSubmit.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Implements React's {@link Component#render()}.
|
|
||||||
*
|
|
||||||
* @inheritdoc
|
|
||||||
* @returns {ReactElement}
|
|
||||||
*/
|
|
||||||
render() {
|
|
||||||
const props = {
|
|
||||||
...this.props,
|
|
||||||
onCancel: this._onCancel,
|
|
||||||
onSubmit: this._onSubmit
|
|
||||||
};
|
|
||||||
|
|
||||||
// $FlowExpectedError
|
|
||||||
delete props.dispatch;
|
|
||||||
|
|
||||||
return <StatelessDialog { ...props } />;
|
|
||||||
}
|
|
||||||
|
|
||||||
_onCancel: () => void;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Dispatches action to hide the dialog.
|
|
||||||
*
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
_onCancel() {
|
|
||||||
this.props.isModal || super._onCancel();
|
|
||||||
}
|
|
||||||
|
|
||||||
_onSubmit: (?string) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default connect()(Dialog);
|
|
||||||
|
|
@ -1,256 +0,0 @@
|
||||||
// @flow
|
|
||||||
|
|
||||||
import Tabs from '@atlaskit/tabs';
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
|
|
||||||
import { translate } from '../../../i18n/functions';
|
|
||||||
import logger from '../../logger';
|
|
||||||
|
|
||||||
import StatelessDialog from './StatelessDialog';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The type of the React {@code Component} props of {@link DialogWithTabs}.
|
|
||||||
*/
|
|
||||||
export type Props = {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function that closes the dialog.
|
|
||||||
*/
|
|
||||||
closeDialog: Function,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Css class name that will be added to the dialog.
|
|
||||||
*/
|
|
||||||
cssClassName: string,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Which settings tab should be initially displayed. If not defined then
|
|
||||||
* the first tab will be displayed.
|
|
||||||
*/
|
|
||||||
defaultTab: number,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Disables dismissing the dialog when the blanket is clicked. Enabled
|
|
||||||
* by default.
|
|
||||||
*/
|
|
||||||
disableBlanketClickDismiss: boolean,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Callback invoked when the Save button has been pressed.
|
|
||||||
*/
|
|
||||||
onSubmit: Function,
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Invoked to obtain translated strings.
|
|
||||||
*/
|
|
||||||
t: Function,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Information about the tabs that will be rendered.
|
|
||||||
*/
|
|
||||||
tabs: Array<Object>,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Key to use for showing a title.
|
|
||||||
*/
|
|
||||||
titleKey: string
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The type of the React {@code Component} state of {@link DialogWithTabs}.
|
|
||||||
*/
|
|
||||||
type State = {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The index of the tab that should be displayed.
|
|
||||||
*/
|
|
||||||
selectedTab: number,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* An array of the states of the tabs.
|
|
||||||
*/
|
|
||||||
tabStates: Array<Object>
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A React {@code Component} for displaying a dialog with tabs.
|
|
||||||
*
|
|
||||||
* @augments Component
|
|
||||||
*/
|
|
||||||
class DialogWithTabs extends Component<Props, State> {
|
|
||||||
/**
|
|
||||||
* Initializes a new {@code DialogWithTabs} instance.
|
|
||||||
*
|
|
||||||
* @param {Object} props - The read-only React {@code Component} props with
|
|
||||||
* which the new instance is to be initialized.
|
|
||||||
*/
|
|
||||||
constructor(props: Props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
selectedTab: this.props.defaultTab || 0,
|
|
||||||
tabStates: this.props.tabs.map(tab => tab.props)
|
|
||||||
};
|
|
||||||
this._onSubmit = this._onSubmit.bind(this);
|
|
||||||
this._onTabSelected = this._onTabSelected.bind(this);
|
|
||||||
this._onTabStateChange = this._onTabStateChange.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Implements React's {@link Component#render()}.
|
|
||||||
*
|
|
||||||
* @inheritdoc
|
|
||||||
* @returns {ReactElement}
|
|
||||||
*/
|
|
||||||
render() {
|
|
||||||
const onCancel = this.props.closeDialog;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<StatelessDialog
|
|
||||||
disableBlanketClickDismiss
|
|
||||||
= { this.props.disableBlanketClickDismiss }
|
|
||||||
onCancel = { onCancel }
|
|
||||||
onSubmit = { this._onSubmit }
|
|
||||||
titleKey = { this.props.titleKey } >
|
|
||||||
<div className = { this.props.cssClassName } >
|
|
||||||
{ this._renderTabs() }
|
|
||||||
</div>
|
|
||||||
</StatelessDialog>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets the props to pass into the tab component.
|
|
||||||
*
|
|
||||||
* @param {number} tabId - The index of the tab configuration within
|
|
||||||
* {@link this.state.tabStates}.
|
|
||||||
* @returns {Object}
|
|
||||||
*/
|
|
||||||
_getTabProps(tabId) {
|
|
||||||
const { tabs } = this.props;
|
|
||||||
const { tabStates } = this.state;
|
|
||||||
const tabConfiguration = tabs[tabId];
|
|
||||||
const currentTabState = tabStates[tabId];
|
|
||||||
|
|
||||||
if (tabConfiguration.propsUpdateFunction) {
|
|
||||||
return tabConfiguration.propsUpdateFunction(
|
|
||||||
currentTabState,
|
|
||||||
tabConfiguration.props);
|
|
||||||
}
|
|
||||||
|
|
||||||
return { ...currentTabState };
|
|
||||||
}
|
|
||||||
|
|
||||||
_onTabSelected: (Object, number) => void;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Callback invoked when the desired tab to display should be changed.
|
|
||||||
*
|
|
||||||
* @param {Object} tab - The configuration passed into atlaskit tabs to
|
|
||||||
* describe how to display the selected tab.
|
|
||||||
* @param {number} tabIndex - The index of the tab within the array of
|
|
||||||
* displayed tabs.
|
|
||||||
* @private
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
_onTabSelected(tab, tabIndex) { // eslint-disable-line no-unused-vars
|
|
||||||
this.setState({ selectedTab: tabIndex });
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Renders the tabs from the tab information passed on props.
|
|
||||||
*
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
_renderTabs() {
|
|
||||||
const { t, tabs } = this.props;
|
|
||||||
|
|
||||||
if (tabs.length === 1) {
|
|
||||||
return this._renderTab({
|
|
||||||
...tabs[0],
|
|
||||||
tabId: 0
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (tabs.length > 1) {
|
|
||||||
return (
|
|
||||||
<Tabs
|
|
||||||
onSelect = { this._onTabSelected }
|
|
||||||
selected = { this.state.selectedTab }
|
|
||||||
tabs = {
|
|
||||||
tabs.map(({ component, label, styles }, idx) => {
|
|
||||||
return {
|
|
||||||
content: this._renderTab({
|
|
||||||
component,
|
|
||||||
styles,
|
|
||||||
tabId: idx
|
|
||||||
}),
|
|
||||||
label: t(label)
|
|
||||||
};
|
|
||||||
})
|
|
||||||
} />);
|
|
||||||
}
|
|
||||||
|
|
||||||
logger.warn('No settings tabs configured to display.');
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Renders a tab from the tab information passed as parameters.
|
|
||||||
*
|
|
||||||
* @param {Object} tabInfo - Information about the tab.
|
|
||||||
* @returns {Component} - The tab.
|
|
||||||
*/
|
|
||||||
_renderTab({ component, styles, tabId }) {
|
|
||||||
const { closeDialog } = this.props;
|
|
||||||
const TabComponent = component;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className = { styles }>
|
|
||||||
<TabComponent
|
|
||||||
closeDialog = { closeDialog }
|
|
||||||
mountCallback = { this.props.tabs[tabId].onMount }
|
|
||||||
onTabStateChange
|
|
||||||
= { this._onTabStateChange }
|
|
||||||
tabId = { tabId }
|
|
||||||
{ ...this._getTabProps(tabId) } />
|
|
||||||
</div>);
|
|
||||||
}
|
|
||||||
|
|
||||||
_onTabStateChange: (number, Object) => void;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Changes the state for a tab.
|
|
||||||
*
|
|
||||||
* @param {number} tabId - The id of the tab which state will be changed.
|
|
||||||
* @param {Object} state - The new state.
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
_onTabStateChange(tabId, state) {
|
|
||||||
const tabStates = [ ...this.state.tabStates ];
|
|
||||||
|
|
||||||
tabStates[tabId] = state;
|
|
||||||
this.setState({ tabStates });
|
|
||||||
}
|
|
||||||
|
|
||||||
_onSubmit: () => void;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Submits the information filled in the dialog.
|
|
||||||
*
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
_onSubmit() {
|
|
||||||
const { onSubmit, tabs } = this.props;
|
|
||||||
|
|
||||||
tabs.forEach(({ submit }, idx) => {
|
|
||||||
submit && submit(this.state.tabStates[idx]);
|
|
||||||
});
|
|
||||||
|
|
||||||
onSubmit();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default translate(DialogWithTabs);
|
|
||||||
|
|
@ -1,172 +0,0 @@
|
||||||
/* eslint-disable lines-around-comment */
|
|
||||||
/* eslint-disable react/no-multi-comp */
|
|
||||||
import ErrorIcon from '@atlaskit/icon/glyph/error';
|
|
||||||
import WarningIcon from '@atlaskit/icon/glyph/warning';
|
|
||||||
import {
|
|
||||||
Header,
|
|
||||||
Title,
|
|
||||||
TitleText,
|
|
||||||
titleIconWrapperStyles
|
|
||||||
// @ts-ignore
|
|
||||||
} from '@atlaskit/modal-dialog/dist/es2019/styled/Content';
|
|
||||||
import { Theme } from '@mui/material';
|
|
||||||
import { withStyles } from '@mui/styles';
|
|
||||||
import React from 'react';
|
|
||||||
import { WithTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
import { translate } from '../../../i18n/functions';
|
|
||||||
import { IconCloseLarge } from '../../../icons/svg';
|
|
||||||
import { withPixelLineHeight } from '../../../styles/functions.web';
|
|
||||||
import Button from '../../../ui/components/web/Button';
|
|
||||||
import { BUTTON_TYPES } from '../../../ui/constants.web';
|
|
||||||
|
|
||||||
const TitleIcon = ({ appearance }: { appearance?: 'danger' | 'warning'; }) => {
|
|
||||||
if (!appearance) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const IconSymbol = appearance === 'danger' ? ErrorIcon : WarningIcon;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<span css = { titleIconWrapperStyles(appearance) }>
|
|
||||||
<IconSymbol label = { `${appearance} icon` } />
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
interface IProps extends WithTranslation {
|
|
||||||
appearance?: 'danger' | 'warning';
|
|
||||||
classes: any;
|
|
||||||
heading: string;
|
|
||||||
hideCloseIconButton: boolean;
|
|
||||||
id?: string;
|
|
||||||
isHeadingMultiline: boolean;
|
|
||||||
onClose: (e?: any) => void;
|
|
||||||
showKeyline: boolean;
|
|
||||||
testId?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Creates the styles for the component.
|
|
||||||
*
|
|
||||||
* @param {Object} theme - The current UI theme.
|
|
||||||
*
|
|
||||||
* @returns {Object}
|
|
||||||
*/
|
|
||||||
const styles = (theme: Theme) => {
|
|
||||||
return {
|
|
||||||
closeButton: {
|
|
||||||
borderRadius: theme.shape.borderRadius,
|
|
||||||
cursor: 'pointer',
|
|
||||||
padding: 13,
|
|
||||||
|
|
||||||
[theme.breakpoints.down(480)]: {
|
|
||||||
background: theme.palette.action02
|
|
||||||
},
|
|
||||||
|
|
||||||
'&:hover': {
|
|
||||||
background: theme.palette.ui04
|
|
||||||
}
|
|
||||||
},
|
|
||||||
header: {
|
|
||||||
boxShadow: 'none',
|
|
||||||
|
|
||||||
'& h4': {
|
|
||||||
...withPixelLineHeight(theme.typography.heading5),
|
|
||||||
color: theme.palette.text01
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A default header for modal-dialog components.
|
|
||||||
*
|
|
||||||
* @class ModalHeader
|
|
||||||
* @augments {React.Component<IProps>}
|
|
||||||
*/
|
|
||||||
class ModalHeader extends React.Component<IProps> {
|
|
||||||
static defaultProps = {
|
|
||||||
isHeadingMultiline: true
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initializes a new {@code ModalHeader} instance.
|
|
||||||
*
|
|
||||||
* @param {*} props - The read-only properties with which the new instance
|
|
||||||
* is to be initialized.
|
|
||||||
*/
|
|
||||||
constructor(props: IProps) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
// Bind event handler so it is only bound once for every instance.
|
|
||||||
this._onKeyPress = this._onKeyPress.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* KeyPress handler for accessibility.
|
|
||||||
*
|
|
||||||
* @param {Object} e - The key event to handle.
|
|
||||||
*
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
_onKeyPress(e: React.KeyboardEvent) {
|
|
||||||
if (this.props.onClose && (e.key === ' ' || e.key === 'Enter')) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.props.onClose();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Implements React's {@link Component#render()}.
|
|
||||||
*
|
|
||||||
* @inheritdoc
|
|
||||||
* @returns {ReactElement}
|
|
||||||
*/
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
id,
|
|
||||||
appearance,
|
|
||||||
classes,
|
|
||||||
heading,
|
|
||||||
hideCloseIconButton,
|
|
||||||
onClose,
|
|
||||||
showKeyline,
|
|
||||||
isHeadingMultiline,
|
|
||||||
testId,
|
|
||||||
t
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
if (!heading) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Header
|
|
||||||
className = { classes.header }
|
|
||||||
showKeyline = { showKeyline }>
|
|
||||||
<Title>
|
|
||||||
<TitleIcon appearance = { appearance } />
|
|
||||||
<TitleText
|
|
||||||
data-testid = { testId && `${testId}-heading` }
|
|
||||||
id = { id }
|
|
||||||
isHeadingMultiline = { isHeadingMultiline }>
|
|
||||||
{heading}
|
|
||||||
</TitleText>
|
|
||||||
</Title>
|
|
||||||
|
|
||||||
{
|
|
||||||
!hideCloseIconButton && <Button
|
|
||||||
accessibilityLabel = { t('dialog.close') }
|
|
||||||
icon = { IconCloseLarge }
|
|
||||||
id = 'modal-header-close-button'
|
|
||||||
onClick = { onClose }
|
|
||||||
size = 'large'
|
|
||||||
type = { BUTTON_TYPES.TERTIARY } />
|
|
||||||
}
|
|
||||||
</Header>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export default translate(withStyles(styles)(ModalHeader));
|
|
||||||
|
|
@ -1,377 +0,0 @@
|
||||||
/* eslint-disable lines-around-comment */
|
|
||||||
import Modal, { ModalFooter } from '@atlaskit/modal-dialog';
|
|
||||||
import { Theme } from '@mui/material';
|
|
||||||
import { withStyles } from '@mui/styles';
|
|
||||||
import React, { Component, ReactElement } from 'react';
|
|
||||||
import { WithTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
import { translate } from '../../../i18n/functions';
|
|
||||||
import Button from '../../../ui/components/web/Button';
|
|
||||||
import { BUTTON_TYPES } from '../../../ui/constants.web';
|
|
||||||
import type { DialogProps } from '../../constants';
|
|
||||||
|
|
||||||
import ModalHeader from './ModalHeader';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The ID to be used for the cancel button if enabled.
|
|
||||||
*
|
|
||||||
* @type {string}
|
|
||||||
*/
|
|
||||||
const CANCEL_BUTTON_ID = 'modal-dialog-cancel-button';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The ID to be used for the ok button if enabled.
|
|
||||||
*
|
|
||||||
* @type {string}
|
|
||||||
*/
|
|
||||||
const OK_BUTTON_ID = 'modal-dialog-ok-button';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The type of the React {@code Component} props of {@link StatelessDialog}.
|
|
||||||
*
|
|
||||||
* @static
|
|
||||||
*/
|
|
||||||
interface IProps extends DialogProps, WithTranslation {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* An object containing the CSS classes.
|
|
||||||
*/
|
|
||||||
classes: any;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Custom dialog header that replaces the standard heading.
|
|
||||||
*/
|
|
||||||
customHeader?: ReactElement<any> | Function;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Disables dismissing the dialog when the blanket is clicked. Enabled
|
|
||||||
* by default.
|
|
||||||
*/
|
|
||||||
disableBlanketClickDismiss: boolean;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* True if listening for the Enter key should be disabled.
|
|
||||||
*/
|
|
||||||
disableEnter: boolean;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* If true, no footer will be displayed.
|
|
||||||
*/
|
|
||||||
disableFooter?: boolean;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* If true, the cancel button will not display but cancel actions, like
|
|
||||||
* clicking the blanket, will cancel.
|
|
||||||
*/
|
|
||||||
hideCancelButton: boolean;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* If true, the close icon button will not be displayed.
|
|
||||||
*/
|
|
||||||
hideCloseIconButton: boolean;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Whether the dialog is modal. This means clicking on the blanket will
|
|
||||||
* leave the dialog open. No cancel button.
|
|
||||||
*/
|
|
||||||
isModal: boolean;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The handler for the event when clicking the 'confirmNo' button.
|
|
||||||
* Defaults to onCancel if absent.
|
|
||||||
*/
|
|
||||||
onDecline?: () => void;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Callback invoked when setting the ref of the Dialog.
|
|
||||||
*/
|
|
||||||
onDialogRef?: Function;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Disables rendering of the submit button.
|
|
||||||
*/
|
|
||||||
submitDisabled: boolean;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Width of the dialog, can be:
|
|
||||||
* - 'small' (400px), 'medium' (600px), 'large' (800px),
|
|
||||||
* 'x-large' (968px)
|
|
||||||
* - integer value for pixel width
|
|
||||||
* - string value for percentage.
|
|
||||||
*/
|
|
||||||
width: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Creates the styles for the component.
|
|
||||||
*
|
|
||||||
* @param {Object} theme - The theme.
|
|
||||||
* @returns {Object}
|
|
||||||
*/
|
|
||||||
const styles = (theme: Theme) => {
|
|
||||||
return {
|
|
||||||
footer: {
|
|
||||||
boxShadow: 'none'
|
|
||||||
},
|
|
||||||
|
|
||||||
buttonContainer: {
|
|
||||||
display: 'flex',
|
|
||||||
|
|
||||||
'& > button:first-child': {
|
|
||||||
marginRight: theme.spacing(2)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Web dialog that uses atlaskit modal-dialog to display dialogs.
|
|
||||||
*/
|
|
||||||
class StatelessDialog extends Component<IProps> {
|
|
||||||
static defaultProps = {
|
|
||||||
hideCloseIconButton: false
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initializes a new {@code StatelessDialog} instance.
|
|
||||||
*
|
|
||||||
* @param {Object} props - The read-only properties with which the new
|
|
||||||
* instance is to be initialized.
|
|
||||||
*/
|
|
||||||
constructor(props: IProps) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
// Bind event handlers so they are only bound once for every instance.
|
|
||||||
this._onCancel = this._onCancel.bind(this);
|
|
||||||
this._onDialogDismissed = this._onDialogDismissed.bind(this);
|
|
||||||
this._onKeyPress = this._onKeyPress.bind(this);
|
|
||||||
this._onSubmit = this._onSubmit.bind(this);
|
|
||||||
this._renderFooter = this._renderFooter.bind(this);
|
|
||||||
this._onDialogRef = this._onDialogRef.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Implements React's {@link Component#render()}.
|
|
||||||
*
|
|
||||||
* @inheritdoc
|
|
||||||
* @returns {ReactElement}
|
|
||||||
*/
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
customHeader,
|
|
||||||
children,
|
|
||||||
hideCloseIconButton,
|
|
||||||
t,
|
|
||||||
titleString,
|
|
||||||
titleKey,
|
|
||||||
width
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
autoFocus = { true }
|
|
||||||
components = {{
|
|
||||||
// @ts-ignore
|
|
||||||
Header: customHeader ? customHeader : props => (
|
|
||||||
// @ts-ignore
|
|
||||||
<ModalHeader
|
|
||||||
{ ...props }
|
|
||||||
heading = { titleString || t(titleKey ?? '') }
|
|
||||||
hideCloseIconButton = { hideCloseIconButton } />
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
footer = { this._renderFooter }
|
|
||||||
i18n = { this.props.i18n }
|
|
||||||
onClose = { this._onDialogDismissed }
|
|
||||||
onDialogDismissed = { this._onDialogDismissed }
|
|
||||||
shouldCloseOnEscapePress = { true }
|
|
||||||
width = { width || 'medium' }>
|
|
||||||
<div
|
|
||||||
onKeyPress = { this._onKeyPress }
|
|
||||||
ref = { this._onDialogRef }>
|
|
||||||
<form
|
|
||||||
className = 'modal-dialog-form'
|
|
||||||
id = 'modal-dialog-form'
|
|
||||||
onSubmit = { this._onSubmit }>
|
|
||||||
{ children }
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns a ReactElement to display buttons for closing the modal.
|
|
||||||
*
|
|
||||||
* @param {Object} propsFromModalFooter - The props passed in from the
|
|
||||||
* {@link ModalFooter} component.
|
|
||||||
* @private
|
|
||||||
* @returns {ReactElement}
|
|
||||||
*/
|
|
||||||
_renderFooter(propsFromModalFooter: any) {
|
|
||||||
// Filter out falsy (null) values because {@code ButtonGroup} will error
|
|
||||||
// if passed in anything but buttons with valid type props.
|
|
||||||
const buttons = [
|
|
||||||
this._renderCancelButton(),
|
|
||||||
this._renderOKButton()
|
|
||||||
].filter(Boolean);
|
|
||||||
|
|
||||||
if (this.props.disableFooter) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ModalFooter
|
|
||||||
className = { this.props.classes.footer }
|
|
||||||
showKeyline = { propsFromModalFooter.showKeyline } >
|
|
||||||
{
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Atlaskit has this empty span (JustifySim) so...
|
|
||||||
*/
|
|
||||||
}
|
|
||||||
<span />
|
|
||||||
<div className = { this.props.classes.buttonContainer }>
|
|
||||||
{ buttons }
|
|
||||||
</div>
|
|
||||||
</ModalFooter>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Dispatches action to hide the dialog.
|
|
||||||
*
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
_onCancel() {
|
|
||||||
if (!this.props.isModal) {
|
|
||||||
const { onCancel } = this.props;
|
|
||||||
|
|
||||||
onCancel?.();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handles click on the blanket area.
|
|
||||||
*
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
_onDialogDismissed() {
|
|
||||||
if (!this.props.disableBlanketClickDismiss) {
|
|
||||||
this._onCancel();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Dispatches the action when submitting the dialog.
|
|
||||||
*
|
|
||||||
* @private
|
|
||||||
* @param {string} value - The submitted value if any.
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
_onSubmit(value?: any) {
|
|
||||||
const { onSubmit } = this.props;
|
|
||||||
|
|
||||||
onSubmit?.(value);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Renders Cancel button.
|
|
||||||
*
|
|
||||||
* @private
|
|
||||||
* @returns {ReactElement|null} The Cancel button if enabled and dialog is
|
|
||||||
* not modal.
|
|
||||||
*/
|
|
||||||
_renderCancelButton() {
|
|
||||||
if (this.props.cancelDisabled
|
|
||||||
|| this.props.isModal
|
|
||||||
|| this.props.hideCancelButton) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const {
|
|
||||||
t,
|
|
||||||
onDecline
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
accessibilityLabel = { t(this.props.cancelKey || 'dialog.Cancel') }
|
|
||||||
id = { CANCEL_BUTTON_ID }
|
|
||||||
key = { CANCEL_BUTTON_ID }
|
|
||||||
label = { t(this.props.cancelKey || 'dialog.Cancel') }
|
|
||||||
onClick = { onDecline || this._onCancel }
|
|
||||||
size = 'small'
|
|
||||||
type = { BUTTON_TYPES.TERTIARY } />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Renders OK button.
|
|
||||||
*
|
|
||||||
* @private
|
|
||||||
* @returns {ReactElement|null} The OK button if enabled.
|
|
||||||
*/
|
|
||||||
_renderOKButton() {
|
|
||||||
const {
|
|
||||||
submitDisabled,
|
|
||||||
t
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
if (submitDisabled) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
accessibilityLabel = { t(this.props.okKey || 'dialog.Ok') }
|
|
||||||
disabled = { this.props.okDisabled }
|
|
||||||
id = { OK_BUTTON_ID }
|
|
||||||
key = { OK_BUTTON_ID }
|
|
||||||
label = { t(this.props.okKey || 'dialog.Ok') }
|
|
||||||
onClick = { this._onSubmit }
|
|
||||||
size = 'small' />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Callback invoked when setting the ref of the dialog's child passing the Modal ref.
|
|
||||||
* It is done this way because we cannot directly access the ref of the Modal component.
|
|
||||||
*
|
|
||||||
* @param {HTMLElement} element - The DOM element for the dialog.
|
|
||||||
* @private
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
_onDialogRef(element?: any) {
|
|
||||||
this.props.onDialogRef?.(element?.parentNode);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handles 'Enter' key in the dialog to submit/hide dialog depending on
|
|
||||||
* the available buttons and their disabled state.
|
|
||||||
*
|
|
||||||
* @param {Object} event - The key event.
|
|
||||||
* @private
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
_onKeyPress(event: React.KeyboardEvent) {
|
|
||||||
// If the event coming to the dialog has been subject to preventDefault
|
|
||||||
// we don't handle it here.
|
|
||||||
if (event.defaultPrevented) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.key === 'Enter' && !this.props.disableEnter) {
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
if (this.props.submitDisabled && !this.props.cancelDisabled) {
|
|
||||||
this._onCancel();
|
|
||||||
} else if (!this.props.okDisabled) {
|
|
||||||
this._onSubmit();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default translate(withStyles(styles)(StatelessDialog));
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
// @flow
|
|
||||||
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
FillScreen,
|
|
||||||
PositionerAbsolute,
|
|
||||||
PositionerRelative,
|
|
||||||
dialogHeight,
|
|
||||||
dialogWidth
|
|
||||||
} from '@atlaskit/modal-dialog/dist/es2019/styled/Modal.js';
|
|
||||||
import { DN50, N0 } from '@atlaskit/theme/colors';
|
|
||||||
import { themed } from '@atlaskit/theme/components';
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
isChromeless: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
const ThemedDialog = (props: Props) => {
|
|
||||||
const style = { backgroundColor: props.isChromeless ? 'transparent' : themed({ light: N0,
|
|
||||||
dark: DN50 })({ theme: { mode: 'dark' } }) };
|
|
||||||
|
|
||||||
return (<Dialog
|
|
||||||
{ ...props }
|
|
||||||
aria-modal = { true }
|
|
||||||
style = { style }
|
|
||||||
theme = {{ mode: 'dark' }} />);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
export { ThemedDialog as Dialog, FillScreen, dialogWidth, dialogHeight, PositionerAbsolute, PositionerRelative };
|
|
||||||
|
|
@ -2,7 +2,4 @@
|
||||||
|
|
||||||
export { default as AbstractDialogTab } from './AbstractDialogTab';
|
export { default as AbstractDialogTab } from './AbstractDialogTab';
|
||||||
export type { Props as AbstractDialogTabProps } from './AbstractDialogTab';
|
export type { Props as AbstractDialogTabProps } from './AbstractDialogTab';
|
||||||
export { default as Dialog } from './Dialog-old';
|
|
||||||
export { default as DialogWithTabs } from './DialogWithTabs';
|
|
||||||
export { default as StatelessDialog } from './StatelessDialog';
|
|
||||||
export { default as DialogContainer } from '../../../ui/components/web/DialogContainer';
|
export { default as DialogContainer } from '../../../ui/components/web/DialogContainer';
|
||||||
|
|
|
||||||
|
|
@ -1,74 +0,0 @@
|
||||||
/* eslint-disable lines-around-comment */
|
|
||||||
import LoginDialog from '../../authentication/components/web/LoginDialog';
|
|
||||||
import WaitForOwnerDialog from '../../authentication/components/web/WaitForOwnerDialog';
|
|
||||||
import ChatPrivacyDialog from '../../chat/components/web/ChatPrivacyDialog';
|
|
||||||
import DesktopPicker from '../../desktop-picker/components/DesktopPicker';
|
|
||||||
import DisplayNamePrompt from '../../display-name/components/web/DisplayNamePrompt';
|
|
||||||
import ParticipantVerificationDialog from '../../e2ee/components/ParticipantVerificationDialog';
|
|
||||||
import EmbedMeetingDialog from '../../embed-meeting/components/EmbedMeetingDialog';
|
|
||||||
// @ts-ignore
|
|
||||||
import FeedbackDialog from '../../feedback/components/FeedbackDialog.web';
|
|
||||||
import AddPeopleDialog from '../../invite/components/add-people-dialog/web/AddPeopleDialog';
|
|
||||||
import PremiumFeatureDialog from '../../jaas/components/web/PremiumFeatureDialog';
|
|
||||||
import KeyboardShortcutsDialog from '../../keyboard-shortcuts/components/web/KeyboardShortcutsDialog';
|
|
||||||
// @ts-ignore
|
|
||||||
import StartLiveStreamDialog from '../../recording/components/LiveStream/web/StartLiveStreamDialog';
|
|
||||||
// @ts-ignore
|
|
||||||
import StopLiveStreamDialog from '../../recording/components/LiveStream/web/StopLiveStreamDialog';
|
|
||||||
// @ts-ignore
|
|
||||||
import StartRecordingDialog from '../../recording/components/Recording/web/StartRecordingDialog';
|
|
||||||
// @ts-ignore
|
|
||||||
import StopRecordingDialog from '../../recording/components/Recording/web/StopRecordingDialog';
|
|
||||||
// @ts-ignore
|
|
||||||
import RemoteControlAuthorizationDialog from '../../remote-control/components/RemoteControlAuthorizationDialog';
|
|
||||||
import PasswordRequiredPrompt from '../../room-lock/components/PasswordRequiredPrompt.web';
|
|
||||||
import SalesforceLinkDialog from '../../salesforce/components/web/SalesforceLinkDialog';
|
|
||||||
import ShareAudioDialog from '../../screen-share/components/web/ShareAudioDialog';
|
|
||||||
import ShareScreenWarningDialog from '../../screen-share/components/web/ShareScreenWarningDialog';
|
|
||||||
import SecurityDialog from '../../security/components/security-dialog/web/SecurityDialog';
|
|
||||||
import LogoutDialog from '../../settings/components/web/LogoutDialog';
|
|
||||||
import SettingsDialog from '../../settings/components/web/SettingsDialog';
|
|
||||||
import SharedVideoDialog from '../../shared-video/components/web/SharedVideoDialog';
|
|
||||||
import SpeakerStats from '../../speaker-stats/components/web/SpeakerStats';
|
|
||||||
import LanguageSelectorDialog from '../../subtitles/components/LanguageSelectorDialog.web';
|
|
||||||
import GrantModeratorDialog from '../../video-menu/components/web/GrantModeratorDialog';
|
|
||||||
import KickRemoteParticipantDialog from '../../video-menu/components/web/KickRemoteParticipantDialog';
|
|
||||||
import MuteEveryoneDialog from '../../video-menu/components/web/MuteEveryoneDialog';
|
|
||||||
import MuteEveryonesVideoDialog from '../../video-menu/components/web/MuteEveryonesVideoDialog';
|
|
||||||
import MuteRemoteParticipantsVideoDialog from '../../video-menu/components/web/MuteRemoteParticipantsVideoDialog';
|
|
||||||
// @ts-ignore
|
|
||||||
import VideoQualityDialog from '../../video-quality/components/VideoQualityDialog.web';
|
|
||||||
import VirtualBackgroundDialog from '../../virtual-background/components/VirtualBackgroundDialog';
|
|
||||||
import MiddlewareRegistry from '../redux/MiddlewareRegistry';
|
|
||||||
|
|
||||||
import { OPEN_DIALOG } from './actionTypes';
|
|
||||||
|
|
||||||
// ! IMPORTANT - This whole middleware is only needed for the transition from from @atlaskit dialog to our component.
|
|
||||||
// ! It should be removed when the transition is over.
|
|
||||||
|
|
||||||
const NEW_DIALOG_LIST = [ KeyboardShortcutsDialog, ChatPrivacyDialog, DisplayNamePrompt, EmbedMeetingDialog,
|
|
||||||
FeedbackDialog, AddPeopleDialog, PremiumFeatureDialog, StartLiveStreamDialog, StopLiveStreamDialog,
|
|
||||||
StartRecordingDialog, StopRecordingDialog, ShareAudioDialog, ShareScreenWarningDialog, SecurityDialog,
|
|
||||||
SharedVideoDialog, SpeakerStats, LanguageSelectorDialog, MuteEveryoneDialog, MuteEveryonesVideoDialog,
|
|
||||||
GrantModeratorDialog, KickRemoteParticipantDialog, MuteRemoteParticipantsVideoDialog, VideoQualityDialog,
|
|
||||||
VirtualBackgroundDialog, LoginDialog, WaitForOwnerDialog, DesktopPicker, RemoteControlAuthorizationDialog,
|
|
||||||
LogoutDialog, SalesforceLinkDialog, ParticipantVerificationDialog, PasswordRequiredPrompt, SettingsDialog ];
|
|
||||||
|
|
||||||
// This function is necessary while the transition from @atlaskit dialog to our component is ongoing.
|
|
||||||
const isNewDialog = (component: any) => NEW_DIALOG_LIST.some(comp => comp === component);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Implements the entry point of the middleware of the feature base/media.
|
|
||||||
*
|
|
||||||
* @param {IStore} store - The redux store.
|
|
||||||
* @returns {Function}
|
|
||||||
*/
|
|
||||||
MiddlewareRegistry.register(() => (next: Function) => (action: any) => {
|
|
||||||
switch (action.type) {
|
|
||||||
case OPEN_DIALOG: {
|
|
||||||
action.isNewDialog = isNewDialog(action.component);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return next(action);
|
|
||||||
});
|
|
||||||
|
|
@ -13,7 +13,6 @@ import {
|
||||||
export interface IDialogState {
|
export interface IDialogState {
|
||||||
component?: ComponentType;
|
component?: ComponentType;
|
||||||
componentProps?: Object;
|
componentProps?: Object;
|
||||||
isNewDialog?: boolean;
|
|
||||||
sheet?: ComponentType;
|
sheet?: ComponentType;
|
||||||
sheetProps?: Object;
|
sheetProps?: Object;
|
||||||
}
|
}
|
||||||
|
|
@ -44,8 +43,7 @@ ReducerRegistry.register<IDialogState>('features/base/dialog', (state = {}, acti
|
||||||
case OPEN_DIALOG:
|
case OPEN_DIALOG:
|
||||||
return assign(state, {
|
return assign(state, {
|
||||||
component: action.component,
|
component: action.component,
|
||||||
componentProps: action.componentProps,
|
componentProps: action.componentProps
|
||||||
isNewDialog: action.isNewDialog
|
|
||||||
});
|
});
|
||||||
|
|
||||||
case HIDE_SHEET:
|
case HIDE_SHEET:
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
||||||
import { GlobalStyles as MUIGlobalStyles } from 'tss-react';
|
import { GlobalStyles as MUIGlobalStyles } from 'tss-react';
|
||||||
import { useStyles } from 'tss-react/mui';
|
import { useStyles } from 'tss-react/mui';
|
||||||
|
|
||||||
import { commonStyles, getGlobalStyles } from '../constants';
|
import { commonStyles } from '../constants';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A component generating all the global styles.
|
* A component generating all the global styles.
|
||||||
|
|
@ -14,8 +14,7 @@ function GlobalStyles() {
|
||||||
|
|
||||||
return (<MUIGlobalStyles
|
return (<MUIGlobalStyles
|
||||||
styles = {{
|
styles = {{
|
||||||
...commonStyles(theme),
|
...commonStyles(theme)
|
||||||
...getGlobalStyles(theme)
|
|
||||||
}} />);
|
}} />);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
import { ModalTransition } from '@atlaskit/modal-dialog';
|
|
||||||
import React, { Component, ComponentType } from 'react';
|
import React, { Component, ComponentType } from 'react';
|
||||||
|
|
||||||
import { IReduxState } from '../../../../app/types';
|
import { IReduxState } from '../../../../app/types';
|
||||||
|
|
@ -21,11 +20,6 @@ interface IProps {
|
||||||
*/
|
*/
|
||||||
_componentProps: Object;
|
_componentProps: Object;
|
||||||
|
|
||||||
/**
|
|
||||||
* Whether the dialog is using the new component.
|
|
||||||
*/
|
|
||||||
_isNewDialog: boolean;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Whether the overflow drawer should be used.
|
* Whether the overflow drawer should be used.
|
||||||
*/
|
*/
|
||||||
|
|
@ -74,16 +68,12 @@ class DialogContainer extends Component<IProps> {
|
||||||
* @returns {ReactElement}
|
* @returns {ReactElement}
|
||||||
*/
|
*/
|
||||||
render() {
|
render() {
|
||||||
return this.props._isNewDialog ? (
|
return (
|
||||||
<DialogTransition>
|
<DialogTransition>
|
||||||
{this.props._overflowDrawer
|
{this.props._overflowDrawer
|
||||||
? <JitsiPortal>{this._renderDialogContent()}</JitsiPortal>
|
? <JitsiPortal>{this._renderDialogContent()}</JitsiPortal>
|
||||||
: this._renderDialogContent() }
|
: this._renderDialogContent()}
|
||||||
</DialogTransition>
|
</DialogTransition>
|
||||||
) : (
|
|
||||||
<ModalTransition>
|
|
||||||
{ this._renderDialogContent() }
|
|
||||||
</ModalTransition>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -104,7 +94,6 @@ function mapStateToProps(state: IReduxState) {
|
||||||
return {
|
return {
|
||||||
_component: stateFeaturesBaseDialog.component,
|
_component: stateFeaturesBaseDialog.component,
|
||||||
_componentProps: stateFeaturesBaseDialog.componentProps,
|
_componentProps: stateFeaturesBaseDialog.componentProps,
|
||||||
_isNewDialog: stateFeaturesBaseDialog.isNewDialog,
|
|
||||||
_overflowDrawer: overflowDrawer,
|
_overflowDrawer: overflowDrawer,
|
||||||
_reducedUI: reducedUI
|
_reducedUI: reducedUI
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -281,22 +281,3 @@ export const commonStyles = (theme: Theme) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the global styles.
|
|
||||||
*
|
|
||||||
* @param {Object} theme - The Jitsi theme.
|
|
||||||
* @returns {Object}
|
|
||||||
*/
|
|
||||||
export const getGlobalStyles = (theme: Theme) => {
|
|
||||||
return {
|
|
||||||
// @atlaskit/modal-dialog OVERRIDES
|
|
||||||
'.atlaskit-portal div[role=dialog]': {
|
|
||||||
// override dialog background
|
|
||||||
'& > div': {
|
|
||||||
background: theme.palette.ui02,
|
|
||||||
color: theme.palette.text01
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue