@ui5/webcomponents-react/dist/components/VariantManagement/ManageViewsTableRows.js

React Wrapper for UI5 Web Components and additional components

import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
import IconMode from '@ui5/webcomponents/dist/types/IconMode.js';
import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
import declineIcon from '@ui5/webcomponents-icons/dist/decline.js';
import favoriteIcon from '@ui5/webcomponents-icons/dist/favorite.js';
import unfavoriteIcon from '@ui5/webcomponents-icons/dist/unfavorite.js';
import { ThemingParameters, useI18nBundle } from '@ui5/webcomponents-react-base';
import { useReducer, useRef, useState } from 'react';
import { APPLY_AUTOMATICALLY, DELETE_VIEW, MARK_AS_FAVORITE, MARK_AS_STANDARD, PRIVATE, PUBLIC, SELECTED_AS_FAVORITE, SPECIFY_VIEW_NAME, UNSELECTED_AS_FAVORITE, VARIANT_MANAGEMENT_ERROR_DUPLICATE, VIEW } from '../../i18n/i18n-defaults.js';
import { trimAndRemoveSpaces } from '../../internal/utils.js';
import { Button, CheckBox, Icon, Input, RadioButton, TableCell, TableRow } from '../../webComponents/index.js';
import { Text } from '../../webComponents/Text/index.js';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const ManageViewsTableRows = props => {
  const {
    variantNames,
    changedVariantNames,
    setChangedVariantNames,
    handleRowChange,
    handleDelete,
    defaultView,
    setDefaultView,
    showShare,
    showApplyAutomatically,
    showSetAsDefault,
    showCreatedBy,
    labelReadOnly,
    favorite,
    children,
    global,
    isDefault,
    applyAutomatically,
    applyAutomaticallyText,
    author,
    setInvalidVariants,
    hideDelete,
    showOnlyFavorites
  } = props;
  const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
  const errorTextAlreadyExists = i18nBundle.getText(VARIANT_MANAGEMENT_ERROR_DUPLICATE);
  const errorTextEmpty = i18nBundle.getText(SPECIFY_VIEW_NAME);
  const publicText = i18nBundle.getText(PUBLIC);
  const privateText = i18nBundle.getText(PRIVATE);
  const a11yFavoriteText = i18nBundle.getText(MARK_AS_FAVORITE);
  const a11yStandardText = i18nBundle.getText(MARK_AS_STANDARD);
  const a11yDeleteText = i18nBundle.getText(DELETE_VIEW);
  const a11yApplyAutomaticallyText = i18nBundle.getText(APPLY_AUTOMATICALLY);
  const favoriteIconTitleText = i18nBundle.getText(SELECTED_AS_FAVORITE);
  const unfavoriteIconTitleText = i18nBundle.getText(UNSELECTED_AS_FAVORITE);
  const inputPlaceHolder = i18nBundle.getText(VIEW);
  const [internalFavorite, setFavorite] = useReducer(prev => {
    return !prev;
  }, !!favorite);
  const iconName = internalFavorite ? favoriteIcon : unfavoriteIcon;
  const inputRef = useRef(undefined);
  const [variantNameInvalid, setVariantNameInvalid] = useState(false);
  const onFavoriteClick = e => {
    setFavorite();
    handleRowChange(e, {
      currentVariant: children,
      favorite: !internalFavorite
    });
  };
  const handleVariantInput = e => {
    if (typeof props.manageViewsInputProps?.onInput === 'function') {
      props.manageViewsInputProps?.onInput(e);
    }
    const trimmedValue = trimAndRemoveSpaces(e.target.value);
    if (children !== trimmedValue && (variantNames.includes(trimmedValue) || Array.from(changedVariantNames.values()).includes(trimmedValue))) {
      setVariantNameInvalid(errorTextAlreadyExists);
      setInvalidVariants(prev => ({
        ...prev,
        [`${children}`]: inputRef.current
      }));
      handleRowChange(e, {
        currentVariant: children,
        children: trimmedValue
      });
    } else if (trimmedValue.length === 0) {
      setVariantNameInvalid(errorTextEmpty);
      setInvalidVariants(prev => ({
        ...prev,
        [children]: inputRef.current
      }));
      handleRowChange(e, {
        currentVariant: children,
        children: trimmedValue
      });
    } else if (e.isInvalid) {
      setInvalidVariants(prev => ({
        ...prev,
        [`${children}`]: inputRef.current
      }));
    } else {
      setVariantNameInvalid(false);
      setInvalidVariants(prev => {
        const invalidRows = {
          ...prev
        };
        if (prev.hasOwnProperty(children)) {
          delete invalidRows[children];
        }
        return invalidRows;
      });
      handleRowChange(e, {
        currentVariant: children,
        children: trimmedValue
      });
    }
  };
  const handleVariantChange = e => {
    if (typeof props.manageViewsInputProps?.onChange === 'function') {
      props.manageViewsInputProps?.onChange(e);
    }
    const trimmedValue = trimAndRemoveSpaces(e.target.value);
    setChangedVariantNames(prev => {
      const currentChangedVariants = new Map(prev);
      currentChangedVariants.set(children, trimmedValue);
      return currentChangedVariants;
    });
  };
  const handleDefaultChange = () => {
    setDefaultView(children);
  };
  const handleApplyAutomaticallyChange = e => {
    handleRowChange(e, {
      currentVariant: children,
      applyAutomatically: e.target.checked
    });
  };
  const renderView = () => {
    if (labelReadOnly) {
      return /*#__PURE__*/_jsx(Text, {
        style: {
          fontFamily: isDefault ? ThemingParameters.sapFontBoldFamily : ThemingParameters.sapFontFamily
        },
        children: children
      });
    }
    return /*#__PURE__*/_jsx(Input, {
      placeholder: inputPlaceHolder,
      ref: inputRef,
      ...props.manageViewsInputProps,
      valueStateMessage: props.manageViewsInputProps?.valueStateMessage ?? /*#__PURE__*/_jsx("div", {
        children: variantNameInvalid
      }),
      valueState: props.manageViewsInputProps?.valueState ?? (!variantNameInvalid ? ValueState.None : ValueState.Negative),
      value: children,
      onInput: handleVariantInput,
      onChange: handleVariantChange
    });
  };
  return /*#__PURE__*/_jsxs(TableRow, {
    "data-id": children,
    children: [showOnlyFavorites && /*#__PURE__*/_jsx(TableCell, {
      children: isDefault ? /*#__PURE__*/_jsx(Icon, {
        name: favoriteIcon,
        style: {
          color: ThemingParameters.sapContent_NonInteractiveIconColor
        }
      }) : /*#__PURE__*/_jsx(Icon, {
        accessibleName: a11yFavoriteText,
        title: iconName === favoriteIcon ? favoriteIconTitleText : unfavoriteIconTitleText,
        name: iconName,
        mode: IconMode.Interactive,
        style: {
          color: ThemingParameters.sapContent_MarkerIconColor,
          cursor: 'pointer'
        },
        onClick: onFavoriteClick
      })
    }), /*#__PURE__*/_jsx(TableCell, {
      children: renderView()
    }), showShare && /*#__PURE__*/_jsx(TableCell, {
      children: global ? publicText : privateText
    }), showSetAsDefault && /*#__PURE__*/_jsx(TableCell, {
      children: /*#__PURE__*/_jsx(RadioButton, {
        accessibleName: a11yStandardText,
        checked: defaultView !== undefined ? defaultView === children : isDefault,
        onChange: handleDefaultChange
      })
    }), showApplyAutomatically && /*#__PURE__*/_jsx(TableCell, {
      children: /*#__PURE__*/_jsx(CheckBox, {
        accessibleName: a11yApplyAutomaticallyText,
        checked: applyAutomatically,
        onChange: handleApplyAutomaticallyChange,
        text: applyAutomaticallyText
      })
    }), showCreatedBy && /*#__PURE__*/_jsx(TableCell, {
      children: /*#__PURE__*/_jsx(Text, {
        children: author
      })
    }), /*#__PURE__*/_jsx(TableCell, {
      children: !(hideDelete ?? global) && /*#__PURE__*/_jsx(Button, {
        tooltip: a11yDeleteText,
        accessibleName: a11yDeleteText,
        icon: declineIcon,
        design: ButtonDesign.Transparent,
        onClick: handleDelete,
        "data-children": children
      })
    })]
  }, `${children}`);
};