code7-leia 0.1.126 → 0.1.127

package/dist/components/FileArea/components/Search/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const InputContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const Input: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>;
+export declare const IconContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.126",
+  "version": "0.1.127",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/FileArea/components/Search/index.tsx

@@ -1,54 +1,43 @@
 import React from 'react';
 import unorm from 'unorm';
 import { FaSearch } from 'react-icons/fa';
-import type { FileData } from '../../../../interface/FileData'
+import { InputContainer, Input, IconContainer } from './styles';
+import type { FileData } from '../../../../interface/FileData';
 
 interface SearchInputProps {
   placeholder: string;
-  initialFiles: FileData[]
+  initialFiles: FileData[];
   setFiles: React.Dispatch<React.SetStateAction<FileData[]>>;
 }
 
-const SearchInput: React.FC<SearchInputProps> = ({ placeholder, setFiles, initialFiles }) => {
-
+const SearchInput: React.FC<SearchInputProps> = ({
+  placeholder,
+  setFiles,
+  initialFiles,
+}) => {
   const searchName = (e: React.ChangeEvent<HTMLInputElement>) => {
     const searchTerm = e.target.value.trim();
     const normalizedSearchTerm = unorm.nfkd(searchTerm).toLowerCase();
-    
-    const newFiles = initialFiles.filter(file => {
-        const normalizedFileName = unorm.nfkd(file.name).toLowerCase();
-        return normalizedFileName.includes(normalizedSearchTerm);
+
+    const newFiles = initialFiles.filter((file) => {
+      const normalizedFileName = unorm.nfkd(file.name).toLowerCase();
+      return normalizedFileName.includes(normalizedSearchTerm);
     });
-    
+
     setFiles(searchTerm !== '' ? newFiles : initialFiles);
-}
-  
+  };
 
   return (
-    <div style={{ position: 'relative', width: '300px' }}>
-      <input
+    <InputContainer>
+      <Input
         type="text"
-        onChange={(e) => searchName(e)}
+        onChange={(e: any) => searchName(e)}
         placeholder={placeholder}
-        style={{
-          paddingLeft: '40px',
-          borderRadius: '5px',
-          border: '1px solid #ccc',
-          height: '40px',
-          width: '100%',
-        }}
       />
-      <div
-        style={{
-          position: 'absolute',
-          top: '10px',
-          left: '10px',
-          pointerEvents: 'none', 
-        }}
-      >
+      <IconContainer>
         <FaSearch />
-      </div>
-    </div>
+      </IconContainer>
+    </InputContainer>
   );
 };
 

package/src/components/FileArea/components/Search/styles.tsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+export const InputContainer = styled.div`
+  position: relative;
+  width: 300px;
+`;
+
+export const Input = styled.input`
+  padding-left: 40px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  height: 40px;
+  width: 100%;
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px #6690ff;
+  }
+`;
+
+export const IconContainer = styled.div`
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  pointer-events: none;
+`;

package/src/components/FileArea/index.tsx

@@ -68,6 +68,10 @@ export const FileArea = () => {
     if(modal){
       setUploadFile(undefined)
       setPresset([])
+      const tag = optionsPresset.map((tag: any) => {
+        return { label: tag, value: tag }
+      })
+      setOptionsPresset(tag)
     }
     setModal(!modal)
   }