diff --git a/package-lock.json b/package-lock.json index 8adadc49a..2cc061861 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,10 +5,12 @@ "requires": true, "dependencies": { "@atlaskit/analytics-next": { - "version": "3.0.7", - "resolved": "https://registry.npmjs.org/@atlaskit/analytics-next/-/analytics-next-3.0.7.tgz", - "integrity": "sha512-osUW2nntOjVKvJBQx2JE21cZ5H13mk8drQkSNw1KJWhV8bDIjZLuDBGqUI6kKbE+M0dGZP4se8YcwILcx1Vdaw==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@atlaskit/analytics-next/-/analytics-next-3.1.2.tgz", + "integrity": "sha512-bkYDvl3Ojsnim+bsc9BALfvOjiL7xdb2rTp/4yqUP9pfidtf5HudbOJ849+dKcRCmk/rFbfB/nhDBRU6rv1Ueg==", "requires": { + "@babel/runtime": "^7.0.0", + "babel-runtime": "^6.26.0", "prop-types": "^15.5.10" } }, @@ -53,12 +55,24 @@ } }, "@atlaskit/blanket": { - "version": "7.0.7", - "resolved": "https://registry.npmjs.org/@atlaskit/blanket/-/blanket-7.0.7.tgz", - "integrity": "sha512-e2tyj0bBPMVk4ORCGxOXZx4PhDuWXctKkq+aKWeUy6bHFIpNp+r227JAp+MGt4dBj80JFATJXT0SUtxTdLqpTA==", + "version": "7.0.12", + "resolved": "https://registry.npmjs.org/@atlaskit/blanket/-/blanket-7.0.12.tgz", + "integrity": "sha512-IWnXU2N42M14kvTU1YhATiK7vGYPZPsk/c2A+b8tNhRJTcfcTxTPMfcmGOvWYPD128el2TSly4uOvn9B9WKc9A==", "requires": { - "@atlaskit/analytics-next": "^3.0.6", - "@atlaskit/theme": "^6.0.2" + "@atlaskit/analytics-next": "^3.1.2", + "@atlaskit/theme": "^7.0.1", + "@babel/runtime": "^7.0.0" + }, + "dependencies": { + "@atlaskit/theme": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-7.0.1.tgz", + "integrity": "sha512-wxXDnkUablJketNCrQuNUuazufYEA7kv0Y6Yzv6uvqfuyNpWUQt4H1psz/MW8DbZmCdku9dEYbNVK3nFP5TDGg==", + "requires": { + "@babel/runtime": "^7.0.0", + "prop-types": "^15.5.10" + } + } } }, "@atlaskit/button": { @@ -779,98 +793,44 @@ } }, "@atlaskit/modal-dialog": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@atlaskit/modal-dialog/-/modal-dialog-6.0.12.tgz", - "integrity": "sha512-/64iftFdwTCcizNoGHw1PsIbKkEn0wE0ziMYnEc3IetBZWfJPOzW1SlyuulNGdJl8ZzMVrf9fTt4qMKAUHVbbw==", + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/@atlaskit/modal-dialog/-/modal-dialog-7.1.2.tgz", + "integrity": "sha512-rY8ojmtr0/9MxqQ8Ab9mtgv1VLRuJMNPCCbstjJzv+NLBu5tIh/on+iuzsxBL84E5hgrvg0wf7JHzKyOoQJQsw==", "requires": { - "@atlaskit/analytics-next": "^3.0.6", - "@atlaskit/blanket": "^7.0.7", - "@atlaskit/button": "^9.0.8", - "@atlaskit/icon": "^13.6.1", - "@atlaskit/layer-manager": "^5.0.9", - "@atlaskit/theme": "^6.0.2", + "@atlaskit/analytics-next": "^3.1.2", + "@atlaskit/blanket": "^7.0.12", + "@atlaskit/button": "^10.1.1", + "@atlaskit/icon": "^15.0.2", + "@atlaskit/portal": "^0.0.17", + "@atlaskit/theme": "^7.0.1", + "@babel/runtime": "^7.0.0", + "exenv": "^1.2.2", "prop-types": "^15.5.10", "raf-schd": "^2.1.0", "react-focus-lock": "^1.11.3", - "react-scrolllock": "^3.0.1", - "react-transition-group": "^2.2.1" + "react-scrolllock": "^3.0.2", + "react-transition-group": "^2.2.1", + "tiny-invariant": "^0.0.3" }, "dependencies": { - "@atlaskit/button": { - "version": "9.0.16", - "resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-9.0.16.tgz", - "integrity": "sha512-VFk7Qyp+IM2AxsPseHubrqU4ORq5BQPRDafWHVFqg/yf2AzKU1sDavRIX8jQfchnu5rBdBgmQjffX5cArzCawg==", + "@atlaskit/icon": { + "version": "15.0.3", + "resolved": "https://registry.npmjs.org/@atlaskit/icon/-/icon-15.0.3.tgz", + "integrity": "sha512-UAf7U0/+5giS2uMlOeVMYmhuWD4fQy0eRcp7r8oEDBqZXNH0yIuHrfu1bPgt2SbFotrjxZdPpOX1i1dXEu7y6g==", "requires": { - "@atlaskit/analytics-next": "^3.0.10", - "@atlaskit/spinner": "9.0.10", - "@atlaskit/theme": "^6.1.1", - "@babel/runtime": "^7.0.0", - "babel-runtime": "^6.26.0" - }, - "dependencies": { - "@atlaskit/analytics-next": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/@atlaskit/analytics-next/-/analytics-next-3.1.2.tgz", - "integrity": "sha512-bkYDvl3Ojsnim+bsc9BALfvOjiL7xdb2rTp/4yqUP9pfidtf5HudbOJ849+dKcRCmk/rFbfB/nhDBRU6rv1Ueg==", - "requires": { - "@babel/runtime": "^7.0.0", - "babel-runtime": "^6.26.0", - "prop-types": "^15.5.10" - } - }, - "@atlaskit/theme": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-6.2.1.tgz", - "integrity": "sha512-6u0OxpnZ2n+G7Wc1wckgtOEiYl3wmJ2HvBd28N7d+Fi/fbi+C4TzfBvyeENUqtrp1UIEhweVbB2WLoVoKA5c/w==", - "requires": { - "@babel/runtime": "^7.0.0", - "prop-types": "^15.5.10" - } - } - } - }, - "@atlaskit/spinner": { - "version": "9.0.10", - "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-9.0.10.tgz", - "integrity": "sha512-1akBXR6uC/cRWzwGPF4IfS7YpCsHdlncvo98p4W9ZGRn822SBQk9hiZBL0BfvkEFViAakPV7JZ5zZKc75UExhA==", - "requires": { - "@atlaskit/theme": "^6.1.1", + "@atlaskit/theme": "^7.0.1", "@babel/runtime": "^7.0.0", "babel-runtime": "^6.26.0", - "react-transition-group": "^2.2.1" - }, - "dependencies": { - "@atlaskit/theme": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-6.2.1.tgz", - "integrity": "sha512-6u0OxpnZ2n+G7Wc1wckgtOEiYl3wmJ2HvBd28N7d+Fi/fbi+C4TzfBvyeENUqtrp1UIEhweVbB2WLoVoKA5c/w==", - "requires": { - "@babel/runtime": "^7.0.0", - "prop-types": "^15.5.10" - } - } + "uuid": "^3.1.0" } }, - "react-transition-group": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz", - "integrity": "sha512-Xv5d55NkJUxUzLCImGSanK8Cl/30sgpOEMGc5m86t8+kZwrPxPCPcFqyx83kkr+5Lz5gs6djuvE5By+gce+VjA==", + "@atlaskit/theme": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-7.0.1.tgz", + "integrity": "sha512-wxXDnkUablJketNCrQuNUuazufYEA7kv0Y6Yzv6uvqfuyNpWUQt4H1psz/MW8DbZmCdku9dEYbNVK3nFP5TDGg==", "requires": { - "dom-helpers": "^3.3.1", - "loose-envify": "^1.3.1", - "prop-types": "^15.6.2", - "react-lifecycles-compat": "^3.0.4" - }, - "dependencies": { - "prop-types": { - "version": "15.6.2", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz", - "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==", - "requires": { - "loose-envify": "^1.3.1", - "object-assign": "^4.1.1" - } - } + "@babel/runtime": "^7.0.0", + "prop-types": "^15.5.10" } } } @@ -924,6 +884,17 @@ "react-popper": "1.0.2" } }, + "@atlaskit/portal": { + "version": "0.0.17", + "resolved": "https://registry.npmjs.org/@atlaskit/portal/-/portal-0.0.17.tgz", + "integrity": "sha512-nn7b0xd1f/zHaAVCl18vmInPS5/P3zJyDP5pVBeH6Lg4Xo60BR1SDOca9EzKqvxs0FFE84HWcjpWSBRxHZ5sHw==", + "requires": { + "@babel/runtime": "^7.0.0", + "babel-runtime": "^6.26.0", + "exenv": "^1.2.2", + "tiny-invariant": "^0.0.3" + } + }, "@atlaskit/spinner": { "version": "9.0.13", "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-9.0.13.tgz", diff --git a/package.json b/package.json index 2b71c5404..3bdac2188 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "@atlaskit/inline-message": "7.0.10", "@atlaskit/layer-manager": "5.0.19", "@atlaskit/lozenge": "6.2.4", - "@atlaskit/modal-dialog": "6.0.12", + "@atlaskit/modal-dialog": "7.1.2", "@atlaskit/multi-select": "11.0.13", "@atlaskit/spinner": "9.0.13", "@atlaskit/tabs": "8.0.11", diff --git a/react/features/base/dialog/components/DialogContainer.js b/react/features/base/dialog/components/AbstractDialogContainer.js similarity index 71% rename from react/features/base/dialog/components/DialogContainer.js rename to react/features/base/dialog/components/AbstractDialogContainer.js index 0aecf96b6..6f04f2ff9 100644 --- a/react/features/base/dialog/components/DialogContainer.js +++ b/react/features/base/dialog/components/AbstractDialogContainer.js @@ -1,7 +1,6 @@ /* @flow */ import React, { Component } from 'react'; -import { connect } from 'react-redux'; /** * The type of the React {@code Component} props of {@link DialogContainer}. @@ -25,18 +24,16 @@ type Props = { }; /** - * Implements a DialogContainer responsible for showing all dialogs. We will - * need a separate container so we can handle multiple dialogs by showing them - * simultaneously or queuing them. + * Implements a DialogContainer responsible for showing all dialogs. */ -export class DialogContainer extends Component { +export default class AbstractDialogContainer extends Component { /** - * Implements React's {@link Component#render()}. + * Returns the dialog to be displayed. * - * @inheritdoc - * @returns {ReactElement} + * @private + * @returns {ReactElement|null} */ - render() { + _renderDialogContent() { const { _component: component, _reducedUI: reducedUI @@ -50,8 +47,8 @@ export class DialogContainer extends Component { } /** - * Maps (parts of) the redux state to the associated {@code DialogContainer}'s - * props. + * Maps (parts of) the redux state to the associated + * {@code AbstractDialogContainer}'s props. * * @param {Object} state - The redux state. * @private @@ -61,7 +58,7 @@ export class DialogContainer extends Component { * _reducedUI: boolean * }} */ -function _mapStateToProps(state) { +export function abstractMapStateToProps(state: Object) { const stateFeaturesBaseDialog = state['features/base/dialog']; const { reducedUI } = state['features/base/responsive-ui']; @@ -71,5 +68,3 @@ function _mapStateToProps(state) { _reducedUI: reducedUI }; } - -export default connect(_mapStateToProps)(DialogContainer); diff --git a/react/features/base/dialog/components/index.js b/react/features/base/dialog/components/index.js index 7298d92a8..2b1cf4e12 100644 --- a/react/features/base/dialog/components/index.js +++ b/react/features/base/dialog/components/index.js @@ -2,5 +2,4 @@ export * from './_'; -export { default as DialogContainer } from './DialogContainer'; export { default as DialogContent } from './DialogContent'; diff --git a/react/features/base/dialog/components/native/DialogContainer.js b/react/features/base/dialog/components/native/DialogContainer.js new file mode 100644 index 000000000..8862940bf --- /dev/null +++ b/react/features/base/dialog/components/native/DialogContainer.js @@ -0,0 +1,26 @@ +import { connect } from 'react-redux'; + +import AbstractDialogContainer, { + abstractMapStateToProps +} from '../AbstractDialogContainer'; + +/** + * Implements a DialogContainer responsible for showing all dialogs. We will + * need a separate container so we can handle multiple dialogs by showing them + * simultaneously or queueing them. + * + * @extends AbstractDialogContainer + */ +class DialogContainer extends AbstractDialogContainer { + /** + * Implements React's {@link Component#render()}. + * + * @inheritdoc + * @returns {ReactElement} + */ + render() { + return this._renderDialogContent(); + } +} + +export default connect(abstractMapStateToProps)(DialogContainer); diff --git a/react/features/base/dialog/components/native/index.js b/react/features/base/dialog/components/native/index.js index 6baa888b1..a57c369bd 100644 --- a/react/features/base/dialog/components/native/index.js +++ b/react/features/base/dialog/components/native/index.js @@ -3,6 +3,7 @@ export { default as BottomSheet } from './BottomSheet'; export { default as ConfirmDialog } from './ConfirmDialog'; export { default as CustomDialog } from './CustomDialog'; +export { default as DialogContainer } from './DialogContainer'; export { default as InputDialog } from './InputDialog'; export { default as CustomSubmitDialog } from './CustomSubmitDialog'; diff --git a/react/features/base/dialog/components/web/DialogContainer.js b/react/features/base/dialog/components/web/DialogContainer.js new file mode 100644 index 000000000..af1c0c6af --- /dev/null +++ b/react/features/base/dialog/components/web/DialogContainer.js @@ -0,0 +1,32 @@ +import { ModalTransition } from '@atlaskit/modal-dialog'; +import React from 'react'; +import { connect } from 'react-redux'; + +import AbstractDialogContainer, { + abstractMapStateToProps +} from '../AbstractDialogContainer'; + +/** + * Implements a DialogContainer responsible for showing all dialogs. Necessary + * for supporting @atlaskit's modal animations. + * + * @extends AbstractDialogContainer + */ +class DialogContainer extends AbstractDialogContainer { + /** + * Implements React's {@link Component#render()}. + * + * @inheritdoc + * @returns {ReactElement} + */ + render() { + return ( + + { this._renderDialogContent() } + + ); + } +} + +export default connect(abstractMapStateToProps)(DialogContainer); + diff --git a/react/features/base/dialog/components/web/index.js b/react/features/base/dialog/components/web/index.js index 57cfe6882..8a0b716b3 100644 --- a/react/features/base/dialog/components/web/index.js +++ b/react/features/base/dialog/components/web/index.js @@ -3,5 +3,6 @@ export { default as AbstractDialogTab } from './AbstractDialogTab'; export type { Props as AbstractDialogTabProps } from './AbstractDialogTab'; export { default as Dialog } from './Dialog'; +export { default as DialogContainer } from './DialogContainer'; export { default as DialogWithTabs } from './DialogWithTabs'; export { default as StatelessDialog } from './StatelessDialog';