pixel-react 1.8.1 → 1.8.3

package/src/components/Search/Search.tsx

@@ -1,138 +1,138 @@
-import React, { useState, useEffect, useRef } from 'react';
-import classNames from 'classnames';
-import './Search.scss';
-import Icon from '../Icon';
-import { SearchProps } from './types';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import Typography from '../Typography';
-import Tooltip from '../Tooltip';
-
-const Search = ({
-  placeholder = 'Search',
-  onSearch,
-  disabled = false,
-  width = 150,
-  value = '',
-  isExpand = false,
-  onClose,
-  onExpand,
-}: SearchProps) => {
-  const [searchValue, setSearchValue] = useState<string>(value);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (isExpand && inputRef.current) {
-      inputRef.current.focus();
-    }
-    setSearchValue('');
-  }, [isExpand]);
-
-  useEffect(() => {
-    setSearchValue(value);
-  }, [value]);
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter' && !checkEmpty(searchValue)) {
-      onSearch(searchValue.trim());
-    } else if (event?.key === 'Escape') {
-      handleSearchClearAndClose('Close');
-    }
-  };
-
-  const handleSearchClearAndClose = (label: string) => {
-    setSearchValue('');
-    onSearch('');
-    if (label === 'Close') {
-      onClose?.();
-    }
-    if (label === 'Clear' && isExpand && inputRef.current) {
-      inputRef.current.focus();
-    }
-  };
-
-  const handleIconClick = () => {
-    if (!disabled) {
-      onExpand?.(!isExpand);
-    }
-  };
-  const handleChange = (data: string) => {
-    setSearchValue(data);
-    if (data === '') {
-      onSearch('');
-    }
-  };
-
-  return (
-    <div
-      className={classNames('ff-search-container', {
-        expanded: isExpand,
-        disabled: disabled,
-      })}
-    >
-      <div
-        className={classNames('ff-search-icon', { expanded: isExpand })}
-        onClick={handleIconClick}
-      >
-        <Tooltip title="Search">
-          <Icon
-            name="search"
-            height={isExpand ? 14 : 16}
-            width={isExpand ? 14 : 16}
-          />
-        </Tooltip>
-      </div>
-      <div
-        className={classNames('ff-vertical-line', {
-          expanded: isExpand,
-        })}
-      ></div>
-      <input
-        className="ff-search-input"
-        name="input"
-        style={{ width: isExpand ? `${width}px` : '0px' }}
-        placeholder={placeholder}
-        type="text"
-        value={searchValue}
-        disabled={disabled}
-        ref={inputRef}
-        autoComplete="off"
-        onChange={(e) => {
-          handleChange(e.target.value);
-        }}
-        onKeyDown={handleKeyDown}
-      />
-
-      {isExpand && (
-        <>
-          <div
-            className="ff-search-clear-button"
-            onClick={() => handleSearchClearAndClose('Clear')}
-          >
-            {searchValue !== '' && (
-              <Typography
-                children={'Clear'}
-                fontSize={8}
-                color={'var(--ff-search-filed-clear-text)'}
-              />
-            )}
-          </div>
-          <Tooltip title="Close">
-            <div className="ff-search-close-icon">
-              <Icon
-                height={6}
-                width={6}
-                name="close"
-                hoverEffect={true}
-                onClick={() => {
-                  handleSearchClearAndClose('Close');
-                }}
-              />
-            </div>
-          </Tooltip>
-        </>
-      )}
-    </div>
-  );
-};
-
-export default Search;
+import React, { useState, useEffect, useRef } from 'react';
+import classNames from 'classnames';
+import './Search.scss';
+import Icon from '../Icon';
+import { SearchProps } from './types';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import Typography from '../Typography';
+import Tooltip from '../Tooltip';
+
+const Search = ({
+  placeholder = 'Search',
+  onSearch,
+  disabled = false,
+  width = 150,
+  value = '',
+  isExpand = false,
+  onClose,
+  onExpand,
+}: SearchProps) => {
+  const [searchValue, setSearchValue] = useState<string>(value);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isExpand && inputRef.current) {
+      inputRef.current.focus();
+    }
+    setSearchValue('');
+  }, [isExpand]);
+
+  useEffect(() => {
+    setSearchValue(value);
+  }, [value]);
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter' && !checkEmpty(searchValue)) {
+      onSearch(searchValue.trim());
+    } else if (event?.key === 'Escape') {
+      handleSearchClearAndClose('Close');
+    }
+  };
+
+  const handleSearchClearAndClose = (label: string) => {
+    setSearchValue('');
+    onSearch('');
+    if (label === 'Close') {
+      onClose?.();
+    }
+    if (label === 'Clear' && isExpand && inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+
+  const handleIconClick = () => {
+    if (!disabled) {
+      onExpand?.(!isExpand);
+    }
+  };
+  const handleChange = (data: string) => {
+    setSearchValue(data);
+    if (data === '') {
+      onSearch('');
+    }
+  };
+
+  return (
+    <div
+      className={classNames('ff-search-container', {
+        expanded: isExpand,
+        disabled: disabled,
+      })}
+    >
+      <div
+        className={classNames('ff-search-icon', { expanded: isExpand })}
+        onClick={handleIconClick}
+      >
+        <Tooltip title="Search">
+          <Icon
+            name="search"
+            height={isExpand ? 14 : 16}
+            width={isExpand ? 14 : 16}
+          />
+        </Tooltip>
+      </div>
+      <div
+        className={classNames('ff-vertical-line', {
+          expanded: isExpand,
+        })}
+      ></div>
+      <input
+        className="ff-search-input"
+        name="input"
+        style={{ width: isExpand ? `${width}px` : '0px' }}
+        placeholder={placeholder}
+        type="text"
+        value={searchValue}
+        disabled={disabled}
+        ref={inputRef}
+        autoComplete="off"
+        onChange={(e) => {
+          handleChange(e.target.value);
+        }}
+        onKeyDown={handleKeyDown}
+      />
+
+      {isExpand && (
+        <>
+          <div
+            className="ff-search-clear-button"
+            onClick={() => handleSearchClearAndClose('Clear')}
+          >
+            {searchValue !== '' && (
+              <Typography
+                children={'Clear'}
+                fontSize={8}
+                color={'var(--ff-search-filed-clear-text)'}
+              />
+            )}
+          </div>
+          <Tooltip title="Close">
+            <div className="ff-search-close-icon">
+              <Icon
+                height={6}
+                width={6}
+                name="close"
+                hoverEffect={true}
+                onClick={() => {
+                  handleSearchClearAndClose('Close');
+                }}
+              />
+            </div>
+          </Tooltip>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default Search;

package/src/components/Search/index.ts

@@ -1 +1 @@
-export { default } from './Search';
+export { default } from './Search';

package/src/components/Search/types.ts

@@ -1,19 +1,19 @@
-export interface SearchProps {
-  /**
-   * Placeholder for the input field
-   */
-  placeholder?: string;
-  /**
-   * Callback function to be called when the search button is clicked or enter key is pressed
-   */
-  onSearch: (query: string) => void;
-  /**
-   * Additional styles for the button
-   */
-  disabled?: boolean;
-  width?: number;
-  value: string;
-  isExpand: boolean;
-  onClose: () => void;
-  onExpand: (isExpand: boolean) => void;
-}
+export interface SearchProps {
+  /**
+   * Placeholder for the input field
+   */
+  placeholder?: string;
+  /**
+   * Callback function to be called when the search button is clicked or enter key is pressed
+   */
+  onSearch: (query: string) => void;
+  /**
+   * Additional styles for the button
+   */
+  disabled?: boolean;
+  width?: number;
+  value: string;
+  isExpand: boolean;
+  onClose: () => void;
+  onExpand: (isExpand: boolean) => void;
+}