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/inline-dialog": "13.0.9",
|
||||
"@atlaskit/inline-message": "11.0.8",
|
||||
"@atlaskit/modal-dialog": "11.2.4",
|
||||
"@atlaskit/multi-select": "15.0.5",
|
||||
"@atlaskit/spinner": "15.0.6",
|
||||
"@atlaskit/tabs": "12.1.2",
|
||||
|
|
@ -336,44 +335,6 @@
|
|||
"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": {
|
||||
"version": "15.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-15.1.4.tgz",
|
||||
|
|
@ -663,93 +624,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": {
|
||||
"version": "0.4.8",
|
||||
"resolved": "https://registry.npmjs.org/@atlaskit/motion/-/motion-0.4.8.tgz",
|
||||
|
|
@ -18787,11 +18661,6 @@
|
|||
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
|
||||
"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": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
|
|
@ -20729,39 +20598,6 @@
|
|||
"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": {
|
||||
"version": "15.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-15.1.4.tgz",
|
||||
|
|
@ -20990,81 +20826,6 @@
|
|||
"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": {
|
||||
"version": "0.4.8",
|
||||
"resolved": "https://registry.npmjs.org/@atlaskit/motion/-/motion-0.4.8.tgz",
|
||||
|
|
@ -34609,11 +34370,6 @@
|
|||
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
|
||||
"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": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@
|
|||
"@atlaskit/icon": "21.2.0",
|
||||
"@atlaskit/inline-dialog": "13.0.9",
|
||||
"@atlaskit/inline-message": "11.0.8",
|
||||
"@atlaskit/modal-dialog": "11.2.4",
|
||||
"@atlaskit/multi-select": "15.0.5",
|
||||
"@atlaskit/spinner": "15.0.6",
|
||||
"@atlaskit/tabs": "12.1.2",
|
||||
|
|
|
|||
|
|
@ -21,6 +21,5 @@ import '../toolbox/middleware';
|
|||
import '../face-landmarks/middleware';
|
||||
import '../gifs/middleware';
|
||||
import '../whiteboard/middleware';
|
||||
import '../base/dialog/middleware';
|
||||
|
||||
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 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';
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
component?: ComponentType;
|
||||
componentProps?: Object;
|
||||
isNewDialog?: boolean;
|
||||
sheet?: ComponentType;
|
||||
sheetProps?: Object;
|
||||
}
|
||||
|
|
@ -44,8 +43,7 @@ ReducerRegistry.register<IDialogState>('features/base/dialog', (state = {}, acti
|
|||
case OPEN_DIALOG:
|
||||
return assign(state, {
|
||||
component: action.component,
|
||||
componentProps: action.componentProps,
|
||||
isNewDialog: action.isNewDialog
|
||||
componentProps: action.componentProps
|
||||
});
|
||||
|
||||
case HIDE_SHEET:
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
import { GlobalStyles as MUIGlobalStyles } from 'tss-react';
|
||||
import { useStyles } from 'tss-react/mui';
|
||||
|
||||
import { commonStyles, getGlobalStyles } from '../constants';
|
||||
import { commonStyles } from '../constants';
|
||||
|
||||
/**
|
||||
* A component generating all the global styles.
|
||||
|
|
@ -14,8 +14,7 @@ function GlobalStyles() {
|
|||
|
||||
return (<MUIGlobalStyles
|
||||
styles = {{
|
||||
...commonStyles(theme),
|
||||
...getGlobalStyles(theme)
|
||||
...commonStyles(theme)
|
||||
}} />);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { ModalTransition } from '@atlaskit/modal-dialog';
|
||||
import React, { Component, ComponentType } from 'react';
|
||||
|
||||
import { IReduxState } from '../../../../app/types';
|
||||
|
|
@ -21,11 +20,6 @@ interface IProps {
|
|||
*/
|
||||
_componentProps: Object;
|
||||
|
||||
/**
|
||||
* Whether the dialog is using the new component.
|
||||
*/
|
||||
_isNewDialog: boolean;
|
||||
|
||||
/**
|
||||
* Whether the overflow drawer should be used.
|
||||
*/
|
||||
|
|
@ -74,16 +68,12 @@ class DialogContainer extends Component<IProps> {
|
|||
* @returns {ReactElement}
|
||||
*/
|
||||
render() {
|
||||
return this.props._isNewDialog ? (
|
||||
return (
|
||||
<DialogTransition>
|
||||
{this.props._overflowDrawer
|
||||
? <JitsiPortal>{this._renderDialogContent()}</JitsiPortal>
|
||||
: this._renderDialogContent()}
|
||||
</DialogTransition>
|
||||
) : (
|
||||
<ModalTransition>
|
||||
{ this._renderDialogContent() }
|
||||
</ModalTransition>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -104,7 +94,6 @@ function mapStateToProps(state: IReduxState) {
|
|||
return {
|
||||
_component: stateFeaturesBaseDialog.component,
|
||||
_componentProps: stateFeaturesBaseDialog.componentProps,
|
||||
_isNewDialog: stateFeaturesBaseDialog.isNewDialog,
|
||||
_overflowDrawer: overflowDrawer,
|
||||
_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