@shopgate/engage/favorites/components/Lists/ListsModal.js

Shopgate's ENGAGE library.

import React, { useState, useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';
import { hasNewServices } from '@shopgate/engage/core/helpers';
import { Dialog, TextField } from '@shopgate/engage/components';
import { i18n } from '@shopgate/engage/core';
import { themeName } from '@shopgate/pwa-common/helpers/config';
import { css } from 'glamor';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const isIos = themeName.includes('ios');
const styles = {
  root: css({
    display: 'flex',
    flexDirection: 'column'
  }),
  input: css({
    textAlign: 'left',
    fontSize: '1rem'
  }).toString()
};

/**
 * @param {Object} props Props
 * @param {'add_list'|'rename_list'} [props.type] The modal type
 * @param {Function} props.onConfirm The confirm handler
 * @param {Function} props.onDismiss The dismiss handler
 * @returns {JSX.Element}
 */
const ListsModal = ({
  type,
  onConfirm,
  onDismiss
}) => {
  const [input, setInput] = useState('');
  const [error, setError] = useState(null);
  const onConfirmWrapped = useCallback(() => {
    if (input.length === 0) {
      setError(i18n.text('favorites.errors.invalid_name'));
      return;
    }
    onConfirm(input);
  }, [input, onConfirm]);
  const onChange = useCallback(value => {
    setInput(value);
  }, []);

  // Favorites list name was restricted to 25 characters on PWA6 in CCP-2535
  const textFieldMaxLength = useMemo(() => !hasNewServices() ? '25' : undefined, []);
  return /*#__PURE__*/_jsx(Dialog, {
    onConfirm: onConfirmWrapped,
    onDismiss: onDismiss,
    modal: {
      title: i18n.text(`favorites.${type}_modal.title`),
      dismiss: i18n.text(`favorites.${type}_modal.dismiss`),
      confirm: i18n.text(`favorites.${type}_modal.confirm`)
    },
    children: /*#__PURE__*/_jsxs("div", {
      className: styles.root,
      children: [/*#__PURE__*/_jsx("span", {
        children: i18n.text(`favorites.${type}_modal.message`)
      }), /*#__PURE__*/_jsx(TextField, {
        name: "name",
        ...(isIos ? {
          placeholder: i18n.text(`favorites.${type}_modal.label`)
        } : {
          label: i18n.text(`favorites.${type}_modal.label`)
        }),
        maxLength: textFieldMaxLength,
        onChange: onChange,
        value: input,
        errorText: error || undefined,
        className: styles.input
      })]
    })
  });
};
ListsModal.defaultProps = {
  type: 'add_list'
};
export default ListsModal;