diff --git a/example/src/App.tsx b/example/src/App.tsx index 5b6d6a612a..59090916b3 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -46,6 +46,10 @@ if (enablePolymerEditor) { const App = () => { const hiddenButtonsConfig = getHiddenButtonsConfig() + + /* should InfoModal be removed completely from client + and all error handling modals (not only for copy-cut-paste) controlled by library? */ + const [hasError, setHasError] = useState(false) const [errorMessage, setErrorMessage] = useState('') const [showPolymerEditor, setShowPolymerEditor] = useState(false) diff --git a/packages/ketcher-react/src/script/ui/action/index.js b/packages/ketcher-react/src/script/ui/action/index.js index 888ac15066..a6bb05dc4c 100644 --- a/packages/ketcher-react/src/script/ui/action/index.js +++ b/packages/ketcher-react/src/script/ui/action/index.js @@ -27,7 +27,7 @@ import zoom from './zoom' import help from './help' import functionalGroups from './functionalGroups' import fullscreen from './fullscreen' -import { removeStructAction } from '../state/shared' +import { removeStructAction, openInfoModal } from '../state/shared' export * from './action.types' @@ -89,8 +89,14 @@ const config = { cut: { shortcut: 'Mod+x', title: 'Cut', - action: (editor) => { - exec('cut') || dontClipMessage('Cut', editor.errorHandler) // eslint-disable-line no-unused-expressions + action: { + thunk: (dispatch, _) => { + const isCutSupported = exec('cut') + + if (!isCutSupported) { + dispatch(openInfoModal('Cut')) + } + } }, disabled: (editor) => !hasSelection(editor), hidden: (options) => isHidden(options, 'cut') @@ -102,8 +108,14 @@ const config = { copy: { shortcut: 'Mod+c', title: 'Copy', - action: (editor) => { - exec('copy') || dontClipMessage('Copy', editor.errorHandler) // eslint-disable-line no-unused-expressions + action: { + thunk: (dispatch, _) => { + const isCopySupported = exec('copy') + + if (!isCopySupported) { + dispatch(openInfoModal('Copy')) + } + } }, disabled: (editor) => !hasSelection(editor), hidden: (options) => isHidden(options, 'copy') @@ -138,8 +150,14 @@ const config = { paste: { shortcut: 'Mod+v', title: 'Paste', - action: (editor) => { - exec('paste') || dontClipMessage('Paste', editor.errorHandler) // eslint-disable-line no-unused-expressions + action: { + thunk: (dispatch, _) => { + const isPasteSupported = exec('paste') + + if (!isPasteSupported) { + dispatch(openInfoModal('Paste')) + } + } }, selected: ({ actions }) => actions && // TMP @@ -220,6 +238,11 @@ const config = { }, hidden: (options) => isHidden(options, 'any-atom') }, + 'info-modal': { + title: 'Error message', + action: { dialog: 'info-modal' }, + hidden: (options) => isHidden(options, 'info-modal') + }, ...server, ...debug, ...tools, @@ -240,13 +263,4 @@ function hasSelection(editor) { ) } -function dontClipMessage(title, errorHandler) { - errorHandler( - 'This action is unavailable via menu.\n' + // eslint-disable-line no-undef - 'Instead, use shortcut to ' + - title + - '.' - ) -} - export default config diff --git a/packages/ketcher-react/src/script/ui/dialog/index.ts b/packages/ketcher-react/src/script/ui/dialog/index.ts index f85b7caf58..15080938cf 100644 --- a/packages/ketcher-react/src/script/ui/dialog/index.ts +++ b/packages/ketcher-react/src/script/ui/dialog/index.ts @@ -42,6 +42,7 @@ import TemplateAttach from './template/template-attach' import TemplatesDialog from './template/TemplateDialog' import Text from '../views/modal/components/Text' import { Confirm } from '../views/modal/components/Confirm' +import InfoModal from '../views/modal/components/InfoModal' export default { open: Open, @@ -67,5 +68,6 @@ export default { settings: Settings, sgroup: SGroup, text: Text, - confirm: Confirm + confirm: Confirm, + 'info-modal': InfoModal } as any diff --git a/packages/ketcher-react/src/script/ui/state/shared.ts b/packages/ketcher-react/src/script/ui/state/shared.ts index e6e9bbd86d..5aefaaabb0 100644 --- a/packages/ketcher-react/src/script/ui/state/shared.ts +++ b/packages/ketcher-react/src/script/ui/state/shared.ts @@ -182,3 +182,13 @@ export function load(struct: Struct, options?) { } } } + +export function openInfoModal(command: 'Paste' | 'Copy' | 'Cut'): { + type: 'MODAL_OPEN' + data: { name: 'info-modal'; prop: { message: 'Paste' | 'Copy' | 'Cut' } } +} { + return { + type: 'MODAL_OPEN', + data: { name: 'info-modal', prop: { message: command } } + } +} diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/InfoModal.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/InfoModal.module.less new file mode 100644 index 0000000000..a2be470c45 --- /dev/null +++ b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/InfoModal.module.less @@ -0,0 +1,42 @@ +/**************************************************************************** + * Copyright 2021 EPAM Systems + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + ***************************************************************************/ + + +@import '../../../../../../style/variables.less'; + + .infoModal { + width: @width-settings; + } + + .ok { + min-width: 70px; + height: 24px; + border-radius: 4px; + font-size: 12px; + color: #fff; + background-color: #167782; + border: 1px solid transparent; + } + + .ok:hover, .ok:active { + background-color: #4fb3bf; + } + + .ok:disabled { + color: #333; + background-color: #e1e5ea; + } + \ No newline at end of file diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/InfoModal.tsx b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/InfoModal.tsx new file mode 100644 index 0000000000..2fb25df573 --- /dev/null +++ b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/InfoModal.tsx @@ -0,0 +1,63 @@ +/**************************************************************************** + * Copyright 2021 EPAM Systems + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + ***************************************************************************/ + +import { connect } from 'react-redux' +import config from 'src/script/ui/action' +import { error } from './constants' +import { Dialog } from '../../../components' +import { PasteErrorModalBody } from './PasteErrorModalBody' + +import styles from './InfoModal.module.less' + +function ErrorInfoModal(props) { + console.log('props in ErrorInfoModal', props) + + const paste = config.paste.title ?? 'Paste' + const isPasteError = props.message === paste + + const defaultMessage = `This action is unavailable via menu. Instead, use shortcut to ${props.message}.` + + const headerContent =