From ef0168c9ffbba72ab18c6a14a61f4ca5e217e4d6 Mon Sep 17 00:00:00 2001 From: Robert Pintilii Date: Fri, 17 Feb 2023 12:53:14 +0200 Subject: [PATCH] ref(dialog) Remove atlaskit dialog (#12925) --- package-lock.json | 244 ------------ package.json | 1 - react/features/app/middlewares.web.ts | 1 - .../base/dialog/components/web/Dialog-old.js | 93 ----- .../dialog/components/web/DialogWithTabs.js | 256 ------------ .../dialog/components/web/ModalHeader.tsx | 172 -------- .../dialog/components/web/StatelessDialog.tsx | 377 ------------------ .../dialog/components/web/ThemedDialog.js | 31 -- .../base/dialog/components/web/index.js | 3 - react/features/base/dialog/middleware.web.ts | 74 ---- react/features/base/dialog/reducer.ts | 4 +- .../base/ui/components/GlobalStyles.web.tsx | 5 +- .../ui/components/web/DialogContainer.tsx | 15 +- react/features/base/ui/constants.web.ts | 19 - 14 files changed, 5 insertions(+), 1290 deletions(-) delete mode 100644 react/features/base/dialog/components/web/Dialog-old.js delete mode 100644 react/features/base/dialog/components/web/DialogWithTabs.js delete mode 100644 react/features/base/dialog/components/web/ModalHeader.tsx delete mode 100644 react/features/base/dialog/components/web/StatelessDialog.tsx delete mode 100644 react/features/base/dialog/components/web/ThemedDialog.js delete mode 100644 react/features/base/dialog/middleware.web.ts diff --git a/package-lock.json b/package-lock.json index 319c04096..62d22f0dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index f56ffed75..eff6628ca 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/react/features/app/middlewares.web.ts b/react/features/app/middlewares.web.ts index 7842b6f9e..acb6b5ba5 100644 --- a/react/features/app/middlewares.web.ts +++ b/react/features/app/middlewares.web.ts @@ -21,6 +21,5 @@ import '../toolbox/middleware'; import '../face-landmarks/middleware'; import '../gifs/middleware'; import '../whiteboard/middleware'; -import '../base/dialog/middleware'; import './middlewares.any'; diff --git a/react/features/base/dialog/components/web/Dialog-old.js b/react/features/base/dialog/components/web/Dialog-old.js deleted file mode 100644 index b268d8aa3..000000000 --- a/react/features/base/dialog/components/web/Dialog-old.js +++ /dev/null @@ -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 { - /** - * 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 ; - } - - _onCancel: () => void; - - /** - * Dispatches action to hide the dialog. - * - * @returns {void} - */ - _onCancel() { - this.props.isModal || super._onCancel(); - } - - _onSubmit: (?string) => void; -} - -export default connect()(Dialog); diff --git a/react/features/base/dialog/components/web/DialogWithTabs.js b/react/features/base/dialog/components/web/DialogWithTabs.js deleted file mode 100644 index 421c810f3..000000000 --- a/react/features/base/dialog/components/web/DialogWithTabs.js +++ /dev/null @@ -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, - - /** - * 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 -}; - -/** - * A React {@code Component} for displaying a dialog with tabs. - * - * @augments Component - */ -class DialogWithTabs extends Component { - /** - * 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 ( - -
- { this._renderTabs() } -
- - ); - } - - /** - * 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 ( - { - 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 ( -
- -
); - } - - _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); diff --git a/react/features/base/dialog/components/web/ModalHeader.tsx b/react/features/base/dialog/components/web/ModalHeader.tsx deleted file mode 100644 index 2bfef0de6..000000000 --- a/react/features/base/dialog/components/web/ModalHeader.tsx +++ /dev/null @@ -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 ( - - - - ); -}; - -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} - */ -class ModalHeader extends React.Component { - 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 ( -
- - <TitleIcon appearance = { appearance } /> - <TitleText - data-testid = { testId && `${testId}-heading` } - id = { id } - isHeadingMultiline = { isHeadingMultiline }> - {heading} - </TitleText> - - - { - !hideCloseIconButton &&
- ); - } -} -export default translate(withStyles(styles)(ModalHeader)); diff --git a/react/features/base/dialog/components/web/StatelessDialog.tsx b/react/features/base/dialog/components/web/StatelessDialog.tsx deleted file mode 100644 index db66c18fb..000000000 --- a/react/features/base/dialog/components/web/StatelessDialog.tsx +++ /dev/null @@ -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 | 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 { - 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 ( - ( - // @ts-ignore - - ) - }} - footer = { this._renderFooter } - i18n = { this.props.i18n } - onClose = { this._onDialogDismissed } - onDialogDismissed = { this._onDialogDismissed } - shouldCloseOnEscapePress = { true } - width = { width || 'medium' }> -
- -
- - ); - } - - /** - * 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 ( - - { - - /** - * Atlaskit has this empty span (JustifySim) so... - */ - } - -
- { buttons } -
- - ); - } - - /** - * 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 ( -