From 791f16c8eff042e8c2ccd60f08543bd568583021 Mon Sep 17 00:00:00 2001 From: Vladimir Khvan Date: Thu, 18 Apr 2024 18:52:08 +0500 Subject: [PATCH 01/29] Web: Client: JavascriptSDK: isolated components from presets --- .../sub-components/FrameIdSetter.js | 65 ++++++++++++++ .../sub-components/HeightSetter.js | 87 +++++++++++++++++++ .../sub-components/PresetWrapper.js | 46 ++++++++++ .../sub-components/WidthSetter.js | 87 +++++++++++++++++++ 4 files changed, 285 insertions(+) create mode 100644 packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/FrameIdSetter.js create mode 100644 packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/HeightSetter.js create mode 100644 packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PresetWrapper.js create mode 100644 packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/WidthSetter.js diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/FrameIdSetter.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/FrameIdSetter.js new file mode 100644 index 0000000000..6885f8f613 --- /dev/null +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/FrameIdSetter.js @@ -0,0 +1,65 @@ +// (c) Copyright Ascensio System SIA 2009-2024 +// +// This program is a free software product. +// You can redistribute it and/or modify it under the terms +// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software +// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended +// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of +// any third-party rights. +// +// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty +// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see +// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html +// +// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021. +// +// The interactive user interfaces in modified source and object code versions of the Program must +// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3. +// +// Pursuant to Section 7(b) of the License you must retain the original Product logo when +// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under +// trademark law for use of our trademarks. +// +// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing +// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 +// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + +import { useState, useCallback } from "react"; +import debounce from "lodash.debounce"; +import { TextInput } from "@docspace/shared/components/text-input"; +import { Label } from "@docspace/shared/components/label"; + +import { ControlsGroup } from "../presets/StyledPresets"; + +export const FrameIdSetter = (props) => { + const { t, defaultFrameId, setConfig } = props; + + const [frameId, setFrameId] = useState(defaultFrameId); + + const debouncedSetConfig = useCallback( + debounce((frameId) => { + setConfig((config) => { + return { ...config, frameId }; + }); + }, 500), + [setConfig], + ); + + const onChangeFrameId = (e) => { + setFrameId(e.target.value); + debouncedSetConfig(e.target.value); + }; + + return ( + + + ); +}; diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/HeightSetter.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/HeightSetter.js new file mode 100644 index 0000000000..b7382e75b3 --- /dev/null +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/HeightSetter.js @@ -0,0 +1,87 @@ +// (c) Copyright Ascensio System SIA 2009-2024 +// +// This program is a free software product. +// You can redistribute it and/or modify it under the terms +// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software +// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended +// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of +// any third-party rights. +// +// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty +// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see +// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html +// +// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021. +// +// The interactive user interfaces in modified source and object code versions of the Program must +// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3. +// +// Pursuant to Section 7(b) of the License you must retain the original Product logo when +// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under +// trademark law for use of our trademarks. +// +// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing +// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 +// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + +import { useState, useCallback } from "react"; +import debounce from "lodash.debounce"; +import { TextInput } from "@docspace/shared/components/text-input"; +import { Label } from "@docspace/shared/components/label"; +import { ComboBox } from "@docspace/shared/components/combobox"; + +import { ControlsGroup, RowContainer } from "../presets/StyledPresets"; + +export const HeightSetter = (props) => { + const { t, setConfig, dataDimensions, defaultDimension, defaultHeight } = + props; + + const [heightDimension, setHeightDimension] = useState(defaultDimension); + const [height, setHeight] = useState(defaultHeight); + + const debouncedSetConfig = useCallback( + debounce((value, dimension) => { + setConfig((config) => { + return { ...config, height: `${value}${dimension}` }; + }); + }, 500), + [setConfig], + ); + + const onChangeHeight = (e) => { + setHeight(e.target.value); + debouncedSetConfig(e.target.value, heightDimension.label); + }; + + const onChangeHeightDimension = (item) => { + setConfig((config) => { + return { ...config, height: `${height}${item.label}` }; + }); + + setHeightDimension(item); + }; + + return ( + + + ); +}; diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PresetWrapper.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PresetWrapper.js new file mode 100644 index 0000000000..4897f078ca --- /dev/null +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PresetWrapper.js @@ -0,0 +1,46 @@ +// (c) Copyright Ascensio System SIA 2009-2024 +// +// This program is a free software product. +// You can redistribute it and/or modify it under the terms +// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software +// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended +// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of +// any third-party rights. +// +// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty +// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see +// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html +// +// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021. +// +// The interactive user interfaces in modified source and object code versions of the Program must +// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3. +// +// Pursuant to Section 7(b) of the License you must retain the original Product logo when +// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under +// trademark law for use of our trademarks. +// +// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing +// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 +// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode +import { Text } from "@docspace/shared/components/text"; + +import { + SDKContainer, + CategoryHeader, + CategoryDescription, +} from "../presets/StyledPresets"; + +export const PresetWrapper = (props) => { + const { children, description, header } = props; + + return ( + + + {description} + + {header} + {children} + + ); +}; diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/WidthSetter.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/WidthSetter.js new file mode 100644 index 0000000000..078c13bc64 --- /dev/null +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/WidthSetter.js @@ -0,0 +1,87 @@ +// (c) Copyright Ascensio System SIA 2009-2024 +// +// This program is a free software product. +// You can redistribute it and/or modify it under the terms +// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software +// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended +// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of +// any third-party rights. +// +// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty +// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see +// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html +// +// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021. +// +// The interactive user interfaces in modified source and object code versions of the Program must +// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3. +// +// Pursuant to Section 7(b) of the License you must retain the original Product logo when +// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under +// trademark law for use of our trademarks. +// +// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing +// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 +// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + +import { useState, useCallback } from "react"; +import debounce from "lodash.debounce"; +import { TextInput } from "@docspace/shared/components/text-input"; +import { Label } from "@docspace/shared/components/label"; +import { ComboBox } from "@docspace/shared/components/combobox"; + +import { ControlsGroup, RowContainer } from "../presets/StyledPresets"; + +export const WidthSetter = (props) => { + const { t, setConfig, dataDimensions, defaultDimension, defaultWidth } = + props; + + const [widthDimension, setWidthDimension] = useState(defaultDimension); + const [width, setWidth] = useState(defaultWidth); + + const debouncedSetConfig = useCallback( + debounce((value, dimension) => { + setConfig((config) => { + return { ...config, width: `${value}${dimension}` }; + }); + }, 500), + [setConfig], + ); + + const onChangeWidth = (e) => { + setWidth(e.target.value); + debouncedSetConfig(e.target.value, widthDimension.label); + }; + + const onChangeWidthDimension = (item) => { + setConfig((config) => { + return { ...config, width: `${width}${item.label}` }; + }); + + setWidthDimension(item); + }; + + return ( + + + ); +}; From 96596b18109fcb717fa4dbc80e775231544068c4 Mon Sep 17 00:00:00 2001 From: Vladimir Khvan Date: Fri, 19 Apr 2024 15:55:10 +0500 Subject: [PATCH 02/29] Web: Client: JavascriptSDK: isolated components from DocSpace preset --- .../JavascriptSDK/presets/DocSpace.js | 157 +++++------------- 1 file changed, 38 insertions(+), 119 deletions(-) diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js index b8153c08a5..54317c9a37 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js @@ -32,29 +32,26 @@ import { TextInput } from "@docspace/shared/components/text-input"; import { Textarea } from "@docspace/shared/components/textarea"; import { Label } from "@docspace/shared/components/label"; import { Text } from "@docspace/shared/components/text"; -import { ComboBox } from "@docspace/shared/components/combobox"; import { TabsContainer } from "@docspace/shared/components/tabs-container"; import { objectToGetParams, loadScript } from "@docspace/shared/utils/common"; import { inject, observer } from "mobx-react"; -import { isTablet, isMobile } from "@docspace/shared/utils/device"; - import GetCodeDialog from "../sub-components/GetCodeDialog"; import CodeBlock from "../sub-components/CodeBlock"; import { Button } from "@docspace/shared/components/button"; const showPreviewThreshold = 720; +import { WidthSetter } from "../sub-components/WidthSetter"; +import { HeightSetter } from "../sub-components/HeightSetter"; +import { FrameIdSetter } from "../sub-components/FrameIdSetter"; +import { PresetWrapper } from "../sub-components/PresetWrapper"; + import { - SDKContainer, Controls, - CategoryHeader, CategorySubHeader, - CategoryDescription, - ControlsGroup, Frame, Container, - RowContainer, Preview, GetCodeButtonWrapper, ControlsSection, @@ -72,20 +69,20 @@ const DocSpace = (props) => { { key: "percent", label: "%", default: true }, { key: "pixel", label: "px" }, ]; - - const [widthDimension, setWidthDimension] = useState(dataDimensions[0]); - const [heightDimension, setHeightDimension] = useState(dataDimensions[0]); - const [width, setWidth] = useState("100"); - const [height, setHeight] = useState("100"); const [isGetCodeDialogOpened, setIsGetCodeDialogOpened] = useState(false); const [showPreview, setShowPreview] = useState( window.innerWidth > showPreviewThreshold, ); + const defaultWidthDimension = dataDimensions[0], + defaultHeightDimension = dataDimensions[0], + defaultWidth = "100", + defaultHeight = "100"; + const [config, setConfig] = useState({ mode: "manager", - width: `${width}${widthDimension.label}`, - height: `${height}${heightDimension.label}`, + width: `${defaultWidth}${defaultWidthDimension.label}`, + height: `${defaultHeight}${defaultHeightDimension.label}`, frameId: "ds-frame", showHeader: true, showTitle: true, @@ -139,44 +136,6 @@ const DocSpace = (props) => { loadFrame(); }; - const onChangeWidth = (e) => { - setConfig((config) => { - return { ...config, width: `${e.target.value}${widthDimension.label}` }; - }); - - setWidth(e.target.value); - }; - - const onChangeHeight = (e) => { - setConfig((config) => { - return { ...config, height: `${e.target.value}${heightDimension.label}` }; - }); - - setHeight(e.target.value); - }; - - const onChangeFrameId = (e) => { - setConfig((config) => { - return { ...config, frameId: e.target.value }; - }); - }; - - const onChangeWidthDimension = (item) => { - setConfig((config) => { - return { ...config, width: `${width}${item.label}` }; - }); - - setWidthDimension(item); - }; - - const onChangeHeightDimension = (item) => { - setConfig((config) => { - return { ...config, height: `${height}${item.label}` }; - }); - - setHeightDimension(item); - }; - const openGetCodeModal = () => setIsGetCodeDialogOpened(true); const closeGetCodeModal = () => setIsGetCodeDialogOpened(false); @@ -198,14 +157,8 @@ const DocSpace = (props) => { const preview = ( @@ -245,11 +198,10 @@ const DocSpace = (props) => { ]; return ( - - - {t("DocspaceDescription")} - - {t("CreateSampleDocSpace")} + {showPreview && ( @@ -259,58 +211,25 @@ const DocSpace = (props) => { {t("CustomizingDisplay")} - - - - - - + + + @@ -336,7 +255,7 @@ const DocSpace = (props) => { /> )} - + ); }; From 791f9048431d5d67d439c3637e24aede2fe597f9 Mon Sep 17 00:00:00 2001 From: Vladimir Khvan Date: Mon, 22 Apr 2024 19:05:26 +0500 Subject: [PATCH 03/29] Web: Client: JavascriptSDK: refactored editor --- .../JavascriptSDK/presets/DocSpace.js | 2 - .../JavascriptSDK/presets/Editor.js | 154 +++++------------- 2 files changed, 40 insertions(+), 116 deletions(-) diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js index 54317c9a37..dafa7eae9a 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js @@ -28,9 +28,7 @@ import { useState, useEffect } from "react"; import { withTranslation } from "react-i18next"; import debounce from "lodash.debounce"; import { Box } from "@docspace/shared/components/box"; -import { TextInput } from "@docspace/shared/components/text-input"; import { Textarea } from "@docspace/shared/components/textarea"; -import { Label } from "@docspace/shared/components/label"; import { Text } from "@docspace/shared/components/text"; import { TabsContainer } from "@docspace/shared/components/tabs-container"; import { objectToGetParams, loadScript } from "@docspace/shared/utils/common"; diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Editor.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Editor.js index 9acb63251a..c0be574c0a 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Editor.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Editor.js @@ -28,20 +28,16 @@ import { useState, useEffect } from "react"; import { withTranslation } from "react-i18next"; import debounce from "lodash.debounce"; import { Box } from "@docspace/shared/components/box"; -import { TextInput } from "@docspace/shared/components/text-input"; import { Textarea } from "@docspace/shared/components/textarea"; import { Label } from "@docspace/shared/components/label"; import { Text } from "@docspace/shared/components/text"; import { Checkbox } from "@docspace/shared/components/checkbox"; -import { ComboBox } from "@docspace/shared/components/combobox"; import { TabsContainer } from "@docspace/shared/components/tabs-container"; import FilesSelectorInput from "SRC_DIR/components/FilesSelectorInput"; import { objectToGetParams, loadScript } from "@docspace/shared/utils/common"; import { inject, observer } from "mobx-react"; import { FilesSelectorFilterTypes } from "@docspace/shared/enums"; -import { isTablet, isMobile } from "@docspace/shared/utils/device"; - import EmptyIframeContainer from "../sub-components/EmptyIframeContainer"; import GetCodeDialog from "../sub-components/GetCodeDialog"; @@ -50,18 +46,19 @@ import { Button } from "@docspace/shared/components/button"; const showPreviewThreshold = 720; +import { WidthSetter } from "../sub-components/WidthSetter"; +import { HeightSetter } from "../sub-components/HeightSetter"; +import { FrameIdSetter } from "../sub-components/FrameIdSetter"; +import { PresetWrapper } from "../sub-components/PresetWrapper"; + import { - SDKContainer, Controls, - CategoryHeader, CategorySubHeader, - CategoryDescription, ControlsGroup, LabelGroup, ControlsSection, Frame, Container, - RowContainer, Preview, GetCodeButtonWrapper, FilesSelectorInputWrapper, @@ -80,10 +77,11 @@ const Editor = (props) => { { key: "pixel", label: "px" }, ]; - const [widthDimension, setWidthDimension] = useState(dataDimensions[0]); - const [heightDimension, setHeightDimension] = useState(dataDimensions[0]); - const [width, setWidth] = useState("100"); - const [height, setHeight] = useState("100"); + const defaultWidthDimension = dataDimensions[0], + defaultHeightDimension = dataDimensions[0], + defaultWidth = "100", + defaultHeight = "100"; + const [isGetCodeDialogOpened, setIsGetCodeDialogOpened] = useState(false); const [showPreview, setShowPreview] = useState( window.innerWidth > showPreviewThreshold, @@ -91,8 +89,8 @@ const Editor = (props) => { const [config, setConfig] = useState({ mode: "editor", - width: `${width}${widthDimension.label}`, - height: `${height}${heightDimension.label}`, + width: `${defaultWidth}${defaultWidthDimension.label}`, + height: `${defaultHeight}${defaultHeightDimension.label}`, frameId: "ds-frame", init: false, }); @@ -132,22 +130,6 @@ const Editor = (props) => { loadFrame(); }; - const onChangeWidth = (e) => { - setConfig((config) => { - return { ...config, width: `${e.target.value}${widthDimension.label}` }; - }); - - setWidth(e.target.value); - }; - - const onChangeHeight = (e) => { - setConfig((config) => { - return { ...config, height: `${e.target.value}${heightDimension.label}` }; - }); - - setHeight(e.target.value); - }; - const onChangeFileId = async (file) => { const newConfig = { id: file.id, @@ -167,28 +149,6 @@ const Editor = (props) => { }); }; - const onChangeFrameId = (e) => { - setConfig((config) => { - return { ...config, frameId: e.target.value }; - }); - }; - - const onChangeWidthDimension = (item) => { - setConfig((config) => { - return { ...config, width: `${width}${item.label}` }; - }); - - setWidthDimension(item); - }; - - const onChangeHeightDimension = (item) => { - setConfig((config) => { - return { ...config, height: `${height}${item.label}` }; - }); - - setHeightDimension(item); - }; - const openGetCodeModal = () => setIsGetCodeDialogOpened(true); const closeGetCodeModal = () => setIsGetCodeDialogOpened(false); @@ -211,13 +171,13 @@ const Editor = (props) => { const preview = ( { ]; return ( - - - {t("EditorDescription")} - - {t("CreateSampleEditor")} + {showPreview && ( @@ -304,58 +263,25 @@ const Editor = (props) => { {t("CustomizingDisplay")} - - - - - - + + + {/* @@ -405,7 +331,7 @@ const Editor = (props) => { /> )} - + ); }; From 7dfd68e157ead95b3781505e298ec81a13b03e46 Mon Sep 17 00:00:00 2001 From: Vladimir Khvan Date: Tue, 30 Apr 2024 15:58:58 +0500 Subject: [PATCH 04/29] Web: CLient: JAvascriptSDK: refactored room selector preset --- .../JavascriptSDK/presets/RoomSelector.js | 159 +++++------------- 1 file changed, 42 insertions(+), 117 deletions(-) diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/RoomSelector.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/RoomSelector.js index afef76d0aa..165a741bf1 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/RoomSelector.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/RoomSelector.js @@ -52,6 +52,11 @@ import { toastr } from "@docspace/shared/components/toast"; const showPreviewThreshold = 720; +import { WidthSetter } from "../sub-components/WidthSetter"; +import { HeightSetter } from "../sub-components/HeightSetter"; +import { FrameIdSetter } from "../sub-components/FrameIdSetter"; +import { PresetWrapper } from "../sub-components/PresetWrapper"; + import { SDKContainer, Controls, @@ -117,10 +122,11 @@ const RoomSelector = (props) => { }, ]; - const [widthDimension, setWidthDimension] = useState(dataDimensions[0]); - const [heightDimension, setHeightDimension] = useState(dataDimensions[0]); - const [width, setWidth] = useState("100"); - const [height, setHeight] = useState("100"); + const defaultWidthDimension = dataDimensions[0], + defaultHeightDimension = dataDimensions[0], + defaultWidth = "100", + defaultHeight = "100"; + const [isGetCodeDialogOpened, setIsGetCodeDialogOpened] = useState(false); const [showPreview, setShowPreview] = useState( window.innerWidth > showPreviewThreshold, @@ -136,8 +142,8 @@ const RoomSelector = (props) => { const [config, setConfig] = useState({ mode: "room-selector", - width: `${width}${widthDimension.label}`, - height: `${height}${heightDimension.label}`, + width: `${defaultWidth}${defaultWidthDimension.label}`, + height: `${defaultHeight}${defaultHeightDimension.label}`, frameId: "ds-frame", init: true, showSelectorCancel: true, @@ -202,55 +208,8 @@ const RoomSelector = (props) => { setConfig((config) => ({ ...config, roomType: option.roomType })); }; - const onChangeTab = (tab) => { - if (tab.key === "preview" && selectedElementType === "button") { - setConfig((config) => ({ ...config, isButtonMode: true })); - } else if (tab.key === "selector-preview") { - setConfig((config) => ({ ...config, isButtonMode: false })); - } else if (tab.key === "code") { - setConfig((config) => ({ - ...config, - isButtonMode: selectedElementType === "button", - })); - } - }; - - const onChangeWidth = (e) => { - setConfig((config) => { - return { ...config, width: `${e.target.value}${widthDimension.label}` }; - }); - - setWidth(e.target.value); - }; - - const onChangeHeight = (e) => { - setConfig((config) => { - return { ...config, height: `${e.target.value}${heightDimension.label}` }; - }); - - setHeight(e.target.value); - }; - - const onChangeFrameId = (e) => { - setConfig((config) => { - return { ...config, frameId: e.target.value }; - }); - }; - - const onChangeWidthDimension = (item) => { - setConfig((config) => { - return { ...config, width: `${width}${item.label}` }; - }); - - setWidthDimension(item); - }; - - const onChangeHeightDimension = (item) => { - setConfig((config) => { - return { ...config, height: `${height}${item.label}` }; - }); - - setHeightDimension(item); + const onChangeTab = () => { + loadFrame(); }; const toggleWithSearch = () => { @@ -295,13 +254,13 @@ const RoomSelector = (props) => { const preview = ( { ]; return ( - - - {t("RoomSelectorDescription")} - - {t("CreateSampleRoomSelector")} + {showPreview && ( @@ -410,58 +368,25 @@ const RoomSelector = (props) => { {t("CustomizingDisplay")} - - - - - - + + + @@ -527,7 +452,7 @@ const RoomSelector = (props) => { /> )} - + ); }; From 163a61a27fe669270d9444b75afe948036ba4968 Mon Sep 17 00:00:00 2001 From: Vladimir Khvan Date: Wed, 1 May 2024 17:18:35 +0500 Subject: [PATCH 05/29] Web: CLient: JAvascriptSDK: refactored viewer preset --- .../JavascriptSDK/presets/Viewer.js | 153 +++++------------- 1 file changed, 40 insertions(+), 113 deletions(-) diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Viewer.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Viewer.js index b560327c66..07301127bb 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Viewer.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Viewer.js @@ -41,8 +41,6 @@ import { inject, observer } from "mobx-react"; import { ImageEditor } from "@docspace/shared/components/image-editor"; import { FilesSelectorFilterTypes } from "@docspace/shared/enums"; -import { isTablet, isMobile } from "@docspace/shared/utils/device"; - import EmptyIframeContainer from "../sub-components/EmptyIframeContainer"; import GetCodeDialog from "../sub-components/GetCodeDialog"; @@ -51,19 +49,19 @@ import { Button } from "@docspace/shared/components/button"; const showPreviewThreshold = 720; +import { WidthSetter } from "../sub-components/WidthSetter"; +import { HeightSetter } from "../sub-components/HeightSetter"; +import { FrameIdSetter } from "../sub-components/FrameIdSetter"; +import { PresetWrapper } from "../sub-components/PresetWrapper"; + import { - SDKContainer, Controls, - CategoryHeader, CategorySubHeader, - CategoryDescription, ControlsGroup, LabelGroup, ControlsSection, Frame, Container, - RowContainer, - ColumnContainer, Preview, GetCodeButtonWrapper, FilesSelectorInputWrapper, @@ -82,10 +80,11 @@ const Viewer = (props) => { { key: "pixel", label: "px" }, ]; - const [widthDimension, setWidthDimension] = useState(dataDimensions[0]); - const [heightDimension, setHeightDimension] = useState(dataDimensions[0]); - const [width, setWidth] = useState("100"); - const [height, setHeight] = useState("100"); + const defaultWidthDimension = dataDimensions[0], + defaultHeightDimension = dataDimensions[0], + defaultWidth = "100", + defaultHeight = "100"; + const [isGetCodeDialogOpened, setIsGetCodeDialogOpened] = useState(false); const [showPreview, setShowPreview] = useState( window.innerWidth > showPreviewThreshold, @@ -94,8 +93,8 @@ const Viewer = (props) => { const [config, setConfig] = useState({ mode: "viewer", editorType: "embedded", - width: `${width}${widthDimension.label}`, - height: `${height}${heightDimension.label}`, + width: `${defaultWidth}${defaultWidthDimension.label}`, + height: `${defaultHeight}${defaultHeightDimension.label}`, frameId: "ds-frame", init: false, }); @@ -135,22 +134,6 @@ const Viewer = (props) => { loadFrame(); }; - const onChangeWidth = (e) => { - setConfig((config) => { - return { ...config, width: `${e.target.value}${widthDimension.label}` }; - }); - - setWidth(e.target.value); - }; - - const onChangeHeight = (e) => { - setConfig((config) => { - return { ...config, height: `${e.target.value}${heightDimension.label}` }; - }); - - setHeight(e.target.value); - }; - const onChangeFileId = async (file) => { const newConfig = { id: file.id, @@ -170,28 +153,6 @@ const Viewer = (props) => { }); }; - const onChangeFrameId = (e) => { - setConfig((config) => { - return { ...config, frameId: e.target.value, init: true }; - }); - }; - - const onChangeWidthDimension = (item) => { - setConfig((config) => { - return { ...config, width: `${width}${item.label}` }; - }); - - setWidthDimension(item); - }; - - const onChangeHeightDimension = (item) => { - setConfig((config) => { - return { ...config, height: `${height}${item.label}` }; - }); - - setHeightDimension(item); - }; - const openGetCodeModal = () => setIsGetCodeDialogOpened(true); const closeGetCodeModal = () => setIsGetCodeDialogOpened(false); @@ -214,13 +175,13 @@ const Viewer = (props) => { const preview = ( { ]; return ( - - - {t("ViewerDescription")} - - {t("CreateSampleViewer")} + {showPreview && ( @@ -307,58 +267,25 @@ const Viewer = (props) => { {t("CustomizingDisplay")} - - - - - - + + + {/* @@ -447,7 +374,7 @@ const Viewer = (props) => { /> )} - + ); }; From 9632bd60584e17d0cf75913a53afdaa480e3ecaa Mon Sep 17 00:00:00 2001 From: Vladimir Khvan Date: Wed, 1 May 2024 18:35:09 +0500 Subject: [PATCH 06/29] Web: Client: JavascripSDK: code to insert block was isolated in component --- .../JavascriptSDK/presets/DocSpace.js | 21 +------- .../JavascriptSDK/presets/Editor.js | 21 +------- .../JavascriptSDK/presets/RoomSelector.js | 26 +-------- .../JavascriptSDK/presets/Viewer.js | 18 +------ .../sub-components/CodeToInsert.js | 53 +++++++++++++++++++ 5 files changed, 61 insertions(+), 78 deletions(-) create mode 100644 packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeToInsert.js diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js index dafa7eae9a..244bd4fd34 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js @@ -28,14 +28,11 @@ import { useState, useEffect } from "react"; import { withTranslation } from "react-i18next"; import debounce from "lodash.debounce"; import { Box } from "@docspace/shared/components/box"; -import { Textarea } from "@docspace/shared/components/textarea"; -import { Text } from "@docspace/shared/components/text"; import { TabsContainer } from "@docspace/shared/components/tabs-container"; import { objectToGetParams, loadScript } from "@docspace/shared/utils/common"; import { inject, observer } from "mobx-react"; import GetCodeDialog from "../sub-components/GetCodeDialog"; -import CodeBlock from "../sub-components/CodeBlock"; import { Button } from "@docspace/shared/components/button"; const showPreviewThreshold = 720; @@ -44,6 +41,7 @@ import { WidthSetter } from "../sub-components/WidthSetter"; import { HeightSetter } from "../sub-components/HeightSetter"; import { FrameIdSetter } from "../sub-components/FrameIdSetter"; import { PresetWrapper } from "../sub-components/PresetWrapper"; +import { CodeToInsert } from "../sub-components/CodeToInsert"; import { Controls, @@ -164,22 +162,7 @@ const DocSpace = (props) => { ); const code = ( - - - {`HTML ${t("CodeTitle")}`} - - - {t("HtmlCodeDescription")} - -