add urlInput

packages/volto-hydra/src/components/Iframe/View.jsx

@@ -5,7 +5,8 @@ import Cookies from 'js-cookie';
 import isValidUrl from '../../utils/isValidUrl';
 import './styles.css';
 import usePresetUrls from '../../utils/usePresetsUrls';
-import UrlDropdown from '../UrlDropdown';
+import UrlInput from '../UrlInput';
+
 /**
  * Get the default URL from the environment
  * @returns {string} URL from the environment
@@ -110,27 +111,10 @@ const Iframe = () => {
  }
  }, [form, initialUrl]);
 
- const handleUrlChange = (event) => {
- setUrl(event.target.value);
- };
-
  return (
  <div id="iframeContainer">
  <div className="input-container">
- <UrlDropdown urls={presetUrls} onChange={handleNavigateToUrl} />
- <input
- type="text"
- value={url}
- onChange={handleUrlChange}
- placeholder="Enter URL"
- className="iframe-input-field"
- />
- <button
- onClick={() => handleNavigateToUrl(url)}
- className="iframe-input-button"
- >
- ➔
- </button>
+ <UrlInput urls={presetUrls} onSelect={handleNavigateToUrl} />
  </div>
  <iframe id="previewIframe" title="Preview" src={src} />
  </div>

packages/volto-hydra/src/components/UrlInput/UrlInput.js

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from 'react';
+import { Dropdown, Icon } from 'semantic-ui-react';
+import Cookies from 'js-cookie';
+import './styles.css';
+
+const UrlInput = ({ urls, onSelect }) => {
+ const [searchQuery, setSearchQuery] = useState('');
+ const [value, setValue] = useState(Cookies.get('iframe_url') || '');
+ const [urlList, setUrlList] = useState(urls);
+ const handleDropdownChange = (e, { value, searchQuery }) => {
+ setValue(value);
+ setSearchQuery(value);
+ onSelect(value);
+ };
+
+ useEffect(() => {
+ setUrlList((prev) => (prev ? [...prev, ...urls] : urls));
+ }, [urls]);
+
+ const handleSearchChange = (e, { searchQuery }) => {
+ setSearchQuery(searchQuery);
+ };
+
+ const handleOnAddItem = (e, { value }) => {
+ setUrlList((prev) => (prev ? [...prev, value] : [value]));
+ };
+ const renderDropdown = () => {
+ const dropdownOptions = urlList.map((url) => ({
+ key: url,
+ value: url,
+ text: url,
+ }));
+
+ return (
+ <Dropdown
+ fluid
+ selectOnNavigation={false}
+ closeOnEscape
+ allowAdditions
+ options={dropdownOptions}
+ placeholder="Enter URL or select preset"
+ search
+ searchQuery={searchQuery}
+ selection
+ value={value}
+ onAddItem={handleOnAddItem}
+ onChange={handleDropdownChange}
+ onSearchChange={handleSearchChange}
+ />
+ );
+ };
+
+ return <div className="url-input-container">{renderDropdown()}</div>;
+};
+
+export default UrlInput;

packages/volto-hydra/src/components/UrlInput/index.js

@@ -0,0 +1,2 @@
+import UrlInput from './UrlInput';
+export default UrlInput;

packages/volto-hydra/src/components/UrlInput/styles.css

@@ -0,0 +1,3 @@
+.url-input-container {
+ width: 100%;
+}