Web:Client:CreateEditRoomDialog: add disabled state

2022-10-26 16:25:37 +05:00 · 2022-10-26 16:25:37 +05:00 · 3b23bb51ec
commit 3b23bb51ec
parent 3c17b68b5e
15 changed files with 78 additions and 12 deletions
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js
@ -140,6 +140,7 @@ const CreateRoomDialog = ({
            setRoomParams={setRoomParams}
            setRoomType={setRoomType}
            setIsScrollLocked={setIsScrollLocked}
+            isDisabled={isLoading}
          />
        )}
      </ModalDialog.Body>
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js
@ -72,6 +72,7 @@ const EditRoomDialog = ({
          setRoomType={setRoomType}
          setIsScrollLocked={setIsScrollLocked}
          isEdit
+          isDisabled={isLoading}
        />
      </ModalDialog.Body>

@ -91,6 +92,7 @@ const EditRoomDialog = ({
          size="normal"
          scale
          onClick={onClose}
+          isDisabled={isLoading}
        />
      </ModalDialog.Footer>
    </ModalDialog>
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/Dropzone.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/Dropzone.js
@ -58,9 +58,11 @@ const StyledDropzone = styled.div`

 StyledDropzone.defaultProps = { theme: Base };

-const Dropzone = ({ t, setUploadedFile }) => {
+const Dropzone = ({ t, setUploadedFile, isDisabled }) => {
  const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
    maxFiles: 1,
+    noClick: isDisabled,
+    noKeyboard: isDisabled,
    // maxSize: 1000000,
    accept: ["image/png", "image/jpeg"],
  });
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js
@ -106,23 +106,37 @@ const IconCropper = ({
  uploadedFile,
  setUploadedFile,
  setPreviewIcon,
+  isDisabled,
 }) => {
  let editorRef = null;
  const setEditorRef = (editor) => (editorRef = editor);

-  const handlePositionChange = (position) =>
+  const handlePositionChange = (position) => {
+    if (isDisabled) return;
+
    onChangeIcon({ ...icon, x: position.x, y: position.y });
+  };
+
+  const handleSliderChange = (e, newZoom = null) => {
+    if (isDisabled) return;

-  const handleSliderChange = (e, newZoom = null) =>
    onChangeIcon({ ...icon, zoom: newZoom ? newZoom : +e.target.value });
+  };
+
+  const handleZoomInClick = () => {
+    if (isDisabled) return;

-  const handleZoomInClick = () =>
    handleSliderChange({}, icon.zoom <= 4.5 ? icon.zoom + 0.5 : 5);
+  };
+  const handleZoomOutClick = () => {
+    if (isDisabled) return;

-  const handleZoomOutClick = () =>
    handleSliderChange({}, icon.zoom >= 1.5 ? icon.zoom - 0.5 : 1);
-
-  const handleDeleteImage = () => setUploadedFile(null);
+  };
+  const handleDeleteImage = () => {
+    if (isDisabled) return;
+    setUploadedFile(null);
+  };

  const handleImageChange = throttle(() => {
    if (editorRef) {
@ -181,6 +195,7 @@ const IconCropper = ({
          iconName={"/static/images/zoom-minus.react.svg"}
          isFill={true}
          isClickable={false}
+          isDisabled={isDisabled}
        />
        <Slider
          className="icon_cropper-zoom-container-slider"
@ -189,6 +204,7 @@ const IconCropper = ({
          onChange={handleSliderChange}
          step={0.01}
          value={icon.zoom}
+          isDisabled={isDisabled}
        />
        <IconButton
          className="icon_cropper-zoom-container-button"
@ -197,6 +213,7 @@ const IconCropper = ({
          iconName={"/static/images/zoom-plus.react.svg"}
          isFill={true}
          isClickable={false}
+          isDisabled={isDisabled}
        />
      </div>
    </StyledIconCropper>
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/index.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/index.js
@ -24,6 +24,7 @@ const IconEditor = ({
  currentRoomTypeData,
  icon,
  onChangeIcon,
+  isDisabled,
 }) => {
  const [previewIcon, setPreviewIcon] = useState(null);

@ -41,6 +42,7 @@ const IconEditor = ({
            uploadedFile={icon.uploadedFile}
            setUploadedFile={setUploadedFile}
            setPreviewIcon={setPreviewIcon}
+            isDisabled={isDisabled}
          />

          <PreviewTile
@ -49,10 +51,15 @@ const IconEditor = ({
            previewIcon={previewIcon}
            tags={tags.map((tag) => tag.name)}
            defaultTagLabel={t(currentRoomTypeData.defaultTag)}
+            isDisabled={isDisabled}
          />
        </div>
      )}
-      <Dropzone t={t} setUploadedFile={setUploadedFile} />
+      <Dropzone
+        t={t}
+        setUploadedFile={setUploadedFile}
+        isDisabled={isDisabled}
+      />
    </StyledIconEditor>
  );
 };
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Params/InputParam.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Params/InputParam.js
@ -23,6 +23,7 @@ const InputParam = ({
  onChange,
  onFocus,
  onBlur,
+  isDisabled,
 }) => {
  return (
    <StyledInputParam>
@ -42,6 +43,7 @@ const InputParam = ({
        scale
        placeholder={placeholder}
        tabIndex={2}
+        isDisabled={isDisabled}
      />
    </StyledInputParam>
  );
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/PermanentSettings/index.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/PermanentSettings/index.js
@ -22,6 +22,7 @@ const PermanentSettings = ({
  isThirdparty,
  storageLocation,
  isPrivate,
+  isDisabled,
 }) => {
  const createThirdpartyPath = () => {
    const path = storageLocation.parentId.split("|");
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/index.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/index.js
@ -17,10 +17,12 @@ const RoomTypeDropdown = ({
  currentRoom,
  setRoomType,
  setIsScrollLocked,
+  isDisabled,
 }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleDropdown = () => {
+    if (isDisabled) return;
    if (isOpen) {
      setIsScrollLocked(false);
      setIsOpen(false);
@ -31,6 +33,7 @@ const RoomTypeDropdown = ({
  };

  const chooseRoomType = (roomType) => {
+    if (isDisabled) return;
    setRoomType(roomType);
    toggleDropdown();
  };
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js
@ -31,6 +31,7 @@ const SetRoomParams = ({
  tagHandler,
  setIsScrollLocked,
  isEdit,
+  isDisabled,
 }) => {
  const onChangeName = (e) =>
    setRoomParams({ ...roomParams, title: e.target.value });
@ -57,6 +58,7 @@ const SetRoomParams = ({
          currentRoom={currentRoomTypeData}
          setRoomType={setRoomType}
          setIsScrollLocked={setIsScrollLocked}
+          isDisabled={isDisabled}
        />
      )}

@ -67,6 +69,7 @@ const SetRoomParams = ({
          isThirdparty={roomParams.isThirdparty}
          storageLocation={roomParams.storageLocation}
          isPrivate={roomParams.isPrivate}
+          isDisabled={isDisabled}
        />
      )}

@ -76,6 +79,7 @@ const SetRoomParams = ({
        placeholder={t("NamePlaceholder")}
        value={roomParams.title}
        onChange={onChangeName}
+        isDisabled={isDisabled}
      />

      <TagInput
@ -83,6 +87,7 @@ const SetRoomParams = ({
        tagHandler={tagHandler}
        currentRoomTypeData={currentRoomTypeData}
        setIsScrollLocked={setIsScrollLocked}
+        isDisabled={isDisabled}
      />

      {/* {!isEdit && (
@ -101,6 +106,7 @@ const SetRoomParams = ({
          onChangeStorageLocation={onChangeStorageLocation}
          setIsScrollLocked={setIsScrollLocked}
          setIsOauthWindowOpen={setIsOauthWindowOpen}
+          isDisabled={isDisabled}
        />
      )}

@ -111,6 +117,7 @@ const SetRoomParams = ({
        currentRoomTypeData={currentRoomTypeData}
        icon={roomParams.icon}
        onChangeIcon={onChangeIcon}
+        isDisabled={isDisabled}
      />
    </StyledSetRoomParams>
  );
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagDropdown.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagDropdown.js
@ -12,6 +12,7 @@ const TagDropdown = ({
  tagInputValue,
  setTagInputValue,
  createTagLabel,
+  isDisabled,
 }) => {
  const dropdownRef = useRef(null);

--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagList.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagList.js
@ -21,9 +21,14 @@ const StyledTagList = styled.div`
  }
 `;

-const TagList = ({ defaultTagLabel, tagHandler }) => {
+const TagList = ({ defaultTagLabel, tagHandler, isDisabled }) => {
  const { tags } = tagHandler;

+  const onDeleteAction = (id) => {
+    if (isDisabled) return;
+    tagHandler.deleteTag(id);
+  };
+
  return (
    <StyledTagList className="set_room_params-tag_input-tag_list">
      {tags.length ? (
@ -35,7 +40,7 @@ const TagList = ({ defaultTagLabel, tagHandler }) => {
            label={tag.name}
            isNewTag
            onDelete={() => {
-              tagHandler.deleteTag(tag.id);
+              onDeleteAction(tag.id);
            }}
          />
        ))
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js
@ -29,6 +29,7 @@ const TagInput = ({
  tagHandler,
  currentRoomTypeData,
  setIsScrollLocked,
+  isDisabled,
 }) => {
  const [tagInput, setTagInput] = useState("");
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@ -36,6 +37,7 @@ const TagInput = ({
  const onTagInputChange = (e) => setTagInput(e.target.value);

  const openDropdown = () => {
+    if (isDisabled) return;
    setIsScrollLocked(true);
    setIsDropdownOpen(true);
  };
@ -55,6 +57,7 @@ const TagInput = ({
        onChange={onTagInputChange}
        onFocus={openDropdown}
        onBlur={closeDropdown}
+        isDisabled={isDisabled}
      />

      <TagDropdown
@ -68,6 +71,7 @@ const TagInput = ({
      <TagList
        tagHandler={tagHandler}
        defaultTagLabel={t(currentRoomTypeData.defaultTag)}
+        isDisabled={isDisabled}
      />
    </StyledTagInput>
  );
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/FolderInput.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/FolderInput.js
@ -98,11 +98,15 @@ const FolderInput = ({
  roomTitle,
  thirdpartyAccount,
  onChangeStorageFolderId,
+  isDisabled,
 }) => {
  const [treeNode, setTreeNode] = useState(null);

  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const onOpen = () => setIsDialogOpen(true);
+  const onOpen = () => {
+    if (isDisabled) return;
+    setIsDialogOpen(true);
+  };
  const onClose = () => setIsDialogOpen(false);

  const [path, setPath] = useState("");
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirdPartyComboBox.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirdPartyComboBox.js
@ -116,6 +116,8 @@ const ThirdPartyComboBox = ({

  setIsScrollLocked,
  setIsOauthWindowOpen,
+
+  isDisabled,
 }) => {
  const dropdownRef = useRef(null);

@ -130,6 +132,7 @@ const ThirdPartyComboBox = ({
  const [dropdownDirection, setDropdownDirection] = useState("bottom");

  const toggleIsOpen = () => {
+    if (isDisabled) return;
    if (isOpen) setIsScrollLocked(false);
    else {
      setIsScrollLocked(true);
@ -233,7 +236,9 @@ const ThirdPartyComboBox = ({

        <Button
          isDisabled={
-            !storageLocation?.provider || !!storageLocation?.thirdpartyAccount
+            !storageLocation?.provider ||
+            !!storageLocation?.thirdpartyAccount ||
+            isDisabled
          }
          className="set_room_params-thirdparty-connect"
          size="small"
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/index.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/index.js
@ -36,8 +36,11 @@ const ThirdPartyStorage = ({
  openConnectWindow,
  setConnectItem,
  getOAuthToken,
+
+  isDisabled,
 }) => {
  const onChangeIsThirdparty = () => {
+    if (isDisabled) return;
    if (connectItems.length) {
      onChangeStorageLocation({
        ...storageLocation,
@ -110,6 +113,7 @@ const ThirdPartyStorage = ({
          getOAuthToken={getOAuthToken}
          setIsScrollLocked={setIsScrollLocked}
          setIsOauthWindowOpen={setIsOauthWindowOpen}
+          isDisabled={isDisabled}
        />
      )}

@ -119,6 +123,7 @@ const ThirdPartyStorage = ({
          roomTitle={roomTitle}
          thirdpartyAccount={storageLocation.thirdpartyAccount}
          onChangeStorageFolderId={onChangeStorageFolderId}
+          isDisabled={isDisabled}
        />
      )}