@ui5/webcomponents-react/wrappers/components/VariantManagement/SaveViewDialog.js

React Wrapper for UI5 Web Components and additional components

import BarDesign from '@ui5/webcomponents/dist/types/BarDesign.js';
import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
import { enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
import { clsx } from 'clsx';
import { useId, useRef, useState } from 'react';
import { FlexBoxAlignItems, FlexBoxDirection } from '../../enums/index.js';
import { APPLY_AUTOMATICALLY, CANCEL, PUBLIC, SAVE, SAVE_VIEW, SET_AS_DEFAULT, SPECIFY_VIEW_NAME, VARIANT_MANAGEMENT_ERROR_DUPLICATE, VIEW } from '../../i18n/i18n-defaults.js';
import { trimAndRemoveSpaces } from '../../internal/utils.js';
import { Bar, Button, CheckBox, Dialog, Input, Label } from '../../webComponents/index.js';
import { FlexBox } from '../FlexBox/index.js';
import { classNames, styleData } from './SaveViewDialog.module.css.js';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export const SaveViewDialog = props => {
  const {
    onAfterClose,
    handleSave,
    selectedVariant,
    showShare,
    showApplyAutomatically,
    showSetAsDefault,
    variantNames,
    saveViewInputProps,
    onSaveViewCancel
  } = props;
  const saveViewDialogRef = useRef(null);
  const inputRef = useRef(undefined);
  const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
  useStylesheet(styleData, 'SaveViewDialog');
  const uniqueId = useId();
  const cancelText = i18nBundle.getText(CANCEL);
  const saveText = i18nBundle.getText(SAVE);
  const headingText = i18nBundle.getText(SAVE_VIEW);
  const defaultCbLabel = i18nBundle.getText(SET_AS_DEFAULT);
  const publicCbLabel = i18nBundle.getText(PUBLIC);
  const applyAutomaticallyCbLabel = i18nBundle.getText(APPLY_AUTOMATICALLY);
  const inputLabelText = i18nBundle.getText(VIEW);
  const errorTextAlreadyExists = i18nBundle.getText(VARIANT_MANAGEMENT_ERROR_DUPLICATE);
  const errorTextEmpty = i18nBundle.getText(SPECIFY_VIEW_NAME);
  const [isDefault, setDefault] = useState(selectedVariant.isDefault);
  const [isPublic, setPublic] = useState(selectedVariant.global);
  const [applyAutomatically, setApplyAutomatically] = useState(selectedVariant.applyAutomatically);
  const [variantName, setVariantName] = useState(selectedVariant.children);
  const [variantNameInvalid, setVariantNameInvalid] = useState(false);
  const [isInvalid, setIsInvalid] = useState(false);
  const handleInputChange = e => {
    if (typeof saveViewInputProps?.onInput === 'function') {
      saveViewInputProps.onInput(e);
    }
    const trimmedValue = trimAndRemoveSpaces(e.target.value);
    setVariantName(trimmedValue);
    if (variantNames.includes(trimmedValue)) {
      setVariantNameInvalid(errorTextAlreadyExists);
    } else if (trimmedValue.length === 0) {
      setVariantNameInvalid(errorTextEmpty);
    } else if (e.isInvalid) {
      setIsInvalid(true);
    } else {
      setVariantNameInvalid(false);
      setIsInvalid(false);
    }
  };
  const onSave = e => {
    if (variantNames.includes(variantName)) {
      setVariantNameInvalid(errorTextAlreadyExists);
      inputRef.current?.focus();
    } else if (variantName.length === 0) {
      setVariantNameInvalid(errorTextEmpty);
      inputRef.current?.focus();
    } else if (isInvalid) {
      inputRef.current?.focus();
    } else {
      setVariantNameInvalid(false);
      handleSave(e, {
        ...selectedVariant,
        children: variantName,
        isDefault,
        global: isPublic,
        applyAutomatically
      });
    }
  };
  const handleClose = e => {
    if (e.detail.escPressed) {
      handleCancel(e);
    } else {
      onAfterClose(e);
    }
  };
  const handleCancel = e => {
    if (typeof onSaveViewCancel === 'function') {
      onSaveViewCancel(enrichEventWithDetails(e, {
        ...selectedVariant,
        children: variantName,
        isDefault,
        global: isPublic,
        applyAutomatically,
        isInvalid
      }));
    }
    setIsInvalid(false);
    inputRef.current.isInvalid = false;
    saveViewDialogRef.current.open = false;
  };
  const handleChangeDefault = e => {
    setDefault(e.target.checked);
  };
  const handleChangePublic = e => {
    setPublic(e.target.checked);
  };
  const handleChangeApplyAutomatically = e => {
    setApplyAutomatically(e.target.checked);
  };
  return /*#__PURE__*/_jsx(Dialog, {
    open: true,
    className: classNames.dialog,
    ref: saveViewDialogRef,
    headerText: headingText,
    onClose: onAfterClose,
    onBeforeClose: handleClose,
    initialFocus: `view-${uniqueId}`,
    footer: /*#__PURE__*/_jsx(Bar, {
      design: BarDesign.Footer,
      endContent: /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx(Button, {
          design: ButtonDesign.Emphasized,
          onClick: onSave,
          children: saveText
        }), /*#__PURE__*/_jsx(Button, {
          design: ButtonDesign.Transparent,
          onClick: handleCancel,
          children: cancelText
        })]
      })
    }),
    children: /*#__PURE__*/_jsxs(FlexBox, {
      direction: FlexBoxDirection.Column,
      alignItems: FlexBoxAlignItems.Start,
      children: [/*#__PURE__*/_jsx(Label, {
        for: `view-${uniqueId}`,
        showColon: true,
        children: inputLabelText
      }), /*#__PURE__*/_jsx(Input, {
        accessibleName: inputLabelText,
        ref: inputRef,
        ...saveViewInputProps,
        valueState: saveViewInputProps?.valueState ?? (!variantNameInvalid ? 'None' : 'Negative'),
        valueStateMessage: saveViewInputProps?.valueStateMessage ?? /*#__PURE__*/_jsx("div", {
          children: variantNameInvalid
        }),
        className: clsx(classNames.input, saveViewInputProps?.className),
        id: `view-${uniqueId}`,
        value: variantName,
        onInput: handleInputChange
      }), /*#__PURE__*/_jsxs(FlexBox, {
        alignItems: FlexBoxAlignItems.Start,
        direction: FlexBoxDirection.Column,
        className: classNames.checkBoxesContainer,
        children: [showSetAsDefault && /*#__PURE__*/_jsx(CheckBox, {
          onChange: handleChangeDefault,
          text: defaultCbLabel,
          checked: isDefault
        }), showShare && /*#__PURE__*/_jsx(CheckBox, {
          onChange: handleChangePublic,
          text: publicCbLabel,
          checked: isPublic
        }), showApplyAutomatically && /*#__PURE__*/_jsx(CheckBox, {
          onChange: handleChangeApplyAutomatically,
          text: applyAutomaticallyCbLabel,
          checked: applyAutomatically
        })]
      })]
    })
  });
};