@craftercms/studio-ui/components/CreateSiteDialog/CreateSiteDialog.js

Services, components, models & utils to build CrafterCMS authoring extensions.

/*
 * Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License version 3 as published by
 * the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

/*
 * Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License version 3 as published by
 * the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
import React, { useEffect, useState } from 'react';
import Dialog from '@mui/material/Dialog';
import { nnou } from '../../utils/object';
import { useSpreadState } from '../../hooks/useSpreadState';
import CreateSiteDialogContainer from './CreateSiteDialogContainer';
import { useStyles } from './styles';
const siteInitialState = {
  blueprint: null,
  siteId: '',
  siteName: '',
  siteIdExist: false,
  siteNameExist: false,
  invalidSiteId: false,
  description: '',
  pushSite: false,
  useRemote: false,
  createAsOrphan: false,
  repoUrl: '',
  repoAuthentication: 'none',
  repoRemoteBranch: '',
  sandboxBranch: '',
  repoRemoteName: '',
  repoPassword: '',
  repoUsername: '',
  repoToken: '',
  repoKey: '',
  submitted: false,
  selectedView: 0,
  details: { blueprint: null, index: null },
  blueprintFields: {},
  expanded: {
    basic: false,
    token: false,
    key: false
  },
  showIncompatible: true,
  gitBranch: ''
};
const searchInitialState = {
  searchKey: '',
  searchSelected: false
};
function CreateSiteDialog(props) {
  const [disableEnforceFocus, setDisableEnforceFocus] = useState(false);
  const [dialog, setDialog] = useSpreadState({
    open: nnou(props.open) ? props.open : true,
    inProgress: false
  });
  const [site, setSite] = useSpreadState(siteInitialState);
  const [search, setSearch] = useState(searchInitialState);
  const { classes } = useStyles();
  function cleanDialogState() {
    setDialog({ open: false, inProgress: false });
    setSite(siteInitialState);
    setSearch(searchInitialState);
  }
  useEffect(() => {
    setDialog({ open: props.open });
  }, [props.open, setDialog]);
  useEffect(() => {
    const loginListener = function (event) {
      if (event.detail.state === 'logged') {
        setDisableEnforceFocus(false);
      } else if (event.detail.state === 'reLogin') {
        setDisableEnforceFocus(true);
      }
    };
    document.addEventListener('login', loginListener, false);
    return () => {
      document.removeEventListener('login', loginListener, false);
    };
  }, []);
  function handleClose(event, reason) {
    var _a;
    const formInProgress = isFormInProgress();
    if (reason === 'escapeKeyDown' && site.details.blueprint) {
      setSite({ details: { blueprint: null, index: null } });
    } else if (
      (reason === 'escapeKeyDown' || reason === 'closeButton' || reason === 'backdropClick') &&
      formInProgress
    ) {
      setDialog({ inProgress: true });
    } else {
      // call externalClose fn
      cleanDialogState();
      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
    }
  }
  function isFormInProgress() {
    let inProgress = false;
    const keys = [
      'siteId',
      'description',
      'repoUrl',
      'repoAuthentication',
      'repoRemoteBranch',
      'sandboxBranch',
      'repoRemoteName',
      'repoPassword',
      'repoUsername',
      'repoToken',
      'repoKey'
    ];
    keys.forEach((key) => {
      if (site[key] !== siteInitialState[key]) {
        inProgress = true;
      }
    });
    Object.keys(site.blueprintFields).forEach((key) => {
      if (site.blueprintFields[key] !== '') {
        inProgress = true;
      }
    });
    return inProgress;
  }
  return React.createElement(
    Dialog,
    {
      open: dialog.open,
      onClose: handleClose,
      'aria-labelledby': 'create-site-dialog',
      fullWidth: true,
      maxWidth: 'lg',
      classes: { paperScrollPaper: classes.paperScrollPaper },
      disableEnforceFocus: disableEnforceFocus
    },
    React.createElement(CreateSiteDialogContainer, {
      site: site,
      setSite: setSite,
      search: search,
      setSearch: setSearch,
      handleClose: handleClose,
      dialog: dialog,
      setDialog: setDialog,
      disableEnforceFocus: disableEnforceFocus
    })
  );
}
export default CreateSiteDialog;