#7 - Create new component

Criando o filtro para number.
OrangesixGithub · Nov 9, 2024 · 312a2c9 · 312a2c9
1 parent 1705fc1
commit 312a2c9
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 27 deletions.
diff --git a/debug/src/index.tsx b/debug/src/index.tsx
@@ -11,14 +11,12 @@ const Root = () => {
         <Box size="100">
             <p className="w-100">Componente - Filtro</p>
             <InputFilter required
-                         data={[]}
                          icon="funnel-fill"
                          label="Data"
-                         options={["=", "!="]}
-                         type="autocomplete"
+                         options={["=", ">", "<"]}
+                         type="number"
                          value={value}
-                         onChange={setValue}
-                         onSearch={() => null}/>
+                         onChange={setValue}/>
         </Box>
     );
 };

diff --git a/package.json b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "@orangesix/react",
   "type": "module",
-  "version": "1.0.10-x3",
-  "description": "Set of components and functions available to be used in a React project.",
+  "version": "1.0.10-x4",
+  "description": "Conjunto de componentes e funções disponíveis para serem utilizados em projetos React.",
   "author": "Luiz Fernando Bernardes de Paula",
   "license": "MIT",
   "scripts": {

diff --git a/src/inputfilter/core/number.tsx b/src/inputfilter/core/number.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { handleNumber } from "../../utils";
+import { handleGetValueNumber } from "../function/handle";
+import { InputFilterCoreProps, InputFilterOptionsMap } from "../types";
+
+/**
+ * Core - `Number`
+ * Campo do filtro tipo numero
+ */
+export function Number<T extends keyof InputFilterOptionsMap>(props: InputFilterCoreProps<T>) {
+    return (
+        <input className="form-control input-filter-field"
+               disabled={props.disabled}
+               id={(props.id ?? "input-filter") + "-number"}
+               name={(props.name ?? "input-filter") + "-number"}
+               placeholder={props.placeholder}
+               value={handleGetValueNumber(props.value, props.options ?? "")}
+               onChange={event => props.onChange(handleNumber(event.target.value, "decimal") + props.select)}/>
+    );
+}
diff --git a/src/inputfilter/function/handle.ts b/src/inputfilter/function/handle.ts
@@ -1,4 +1,5 @@
 import { validateDate } from "./validate";
+import { handleNumber } from "../../utils";
 import { InputFilterOptionsMap } from "../types";
 
 /**
@@ -144,4 +145,26 @@ export function handleSetValueAutocomplete(
 ): string | null {
     let ids = value.map(item => item.id);
     return ids.length === 0 ? null : ids.join(";") + select;
+}
+
+/**
+ * Retorna apenas o valor sem os operadores filtro tipo `Number`.
+ *
+ * @param value - O valor completo, incluindo a opção de filtro.
+ * @param options - Um array de opções de filtro disponíveis.
+ * @returns O valor sem as opções de filtro.
+ */
+export function handleGetValueNumber(
+    value: string | undefined,
+    options: Array<InputFilterOptionsMap["text"]>
+): string {
+    let str = value;
+    let exists = options
+        .slice()
+        .reverse()
+        .find(item => str?.endsWith(item));
+    if (exists && str !== undefined) {
+        return handleNumber(str.slice(0, -exists.length), "decimal");
+    }
+    return handleNumber(str ?? "", "decimal");
 }
diff --git a/src/inputfilter/inputfilter.tsx b/src/inputfilter/inputfilter.tsx
@@ -2,45 +2,37 @@ import { Box } from "../box";
 import { Text } from "./core/text";
 import { Date } from "./core/date";
 import { InputLabel } from "../api";
+import { Number } from "./core/number";
+import * as handle from "./function/handle";
 import { classNames } from "primereact/utils";
 import { Autocomplete } from "./core/autocomplete";
 import React, { useState, useEffect } from "react";
 import { optionsDefault, optionsLabel } from "./const";
 import { InputFilterOptionsMap, InputFilterProps } from "./types";
-import {
-    handleGetOption,
-    handleGetValueText,
-    handleGetValueDate,
-    handleSetValueDate,
-    handleGetValueAutocomplete,
-    handleSetValueAutocomplete,
-} from "./function/handle";
 
 /**
  * Componente - `InputFilter`
  *
  * Um componente utilizado para montar o objeto de pesquisa de dados.
  * Permite alterar o seu tipo através do type: `text`, `date`, `autocomplete`.
  */
-export function InputFilter<T extends keyof InputFilterOptionsMap = "text">(
-    { ...props }: InputFilterProps<T>) {
+export function InputFilter<T extends keyof InputFilterOptionsMap = "text">({ ...props }: InputFilterProps<T>) {
 
     const options: any[] = (props.options ?? optionsDefault).sort((a, b) => a.length - b.length);
     const selectOptions = optionsLabel.filter(item => options?.includes(item.options as any));
-
-    const [select, setSelect] = useState<string>(handleGetOption<T>(props.value, options));
+    const [select, setSelect] = useState<string>(handle.handleGetOption<T>(props.value, options));
 
     useEffect(() => {
         if (!props.type || props.type === "text") {
-            let value = handleGetValueText(props.value, options);
+            let value = handle.handleGetValueText(props.value, options);
             if (value !== null) {
                 props.onChange(value + select);
+            } else {
+                props.onChange(null);
             }
-            props.onChange(null);
-
         } else if (props.type === "date") {
-            let date = handleGetValueDate(props.value, options, select);
-            let setDate = handleSetValueDate("0", null, date);
+            let date = handle.handleGetValueDate(props.value, options, select);
+            let setDate = handle.handleSetValueDate("0", null, date);
 
             if (select === "{}" && setDate === "0/0/0{}0/0/0") {
                 props.onChange(null);
@@ -51,10 +43,16 @@ export function InputFilter<T extends keyof InputFilterOptionsMap = "text">(
                     props.onChange(setDate);
                 }
             }
-
         } else if (props.type === "autocomplete") {
-            let value = handleGetValueAutocomplete(props.value, options, props.data);
-            props.onChange(handleSetValueAutocomplete(value, select));
+            let value = handle.handleGetValueAutocomplete(props.value, options, props.data);
+            props.onChange(handle.handleSetValueAutocomplete(value, select));
+        } else if (props.type === "number") {
+            let value = handle.handleGetValueNumber(props.value, options);
+            if (value !== "") {
+                props.onChange(value + select);
+            } else {
+                props.onChange(null);
+            }
         }
     }, [select]);
 
@@ -92,6 +90,10 @@ export function InputFilter<T extends keyof InputFilterOptionsMap = "text">(
                     && <Autocomplete<"autocomplete"> {...props as InputFilterProps<"autocomplete">}
                                                      options={options}
                                                      select={select}/>}
+                {props.type === "number"
+                    && <Number<"number"> {...props}
+                                         options={options}
+                                         select={select}/>}
             </div>
         </Box>
     );

diff --git a/src/inputfilter/types.d.ts b/src/inputfilter/types.d.ts
@@ -57,6 +57,7 @@ export type InputFilterOptionsMap = {
     text: "=" | "!=" | "%" | "!%"
     date: "=" | "!=" | "<" | ">" | "<=" | ">=" | "{}"
     autocomplete: "=" | "!=" | "%" | "!%"
+    number: "=" | "!=" | "<" | ">" | "<=" | ">="
 }
 
 export type InputFilterOptionsProps = "=" | "!=" | "<" | ">" | "<=" | ">=" | "{}" | "%" | "!%";
diff --git a/src/utils/handle.ts b/src/utils/handle.ts
@@ -0,0 +1,41 @@
+/**
+ * Formata um valor numérico para o formato decimal ou monetário.
+ *
+ * @param valor - O valor a ser formatado.
+ * @param format - O formato desejado: "money" para monetário ou "decimal" para decimal.
+ * @returns O valor formatado como string.
+ */
+export function handleNumber(
+    valor: string,
+    format: "money" | "decimal" = "decimal"
+): string {
+    let value = valor.replace(/[^0-9.,]/g, "");
+    if (format === "decimal") {
+        return value.replace(",", ".").replace(/(\..*)\./g, "$1");
+    }
+    return parseFloat(value.replace(",", ".")).toLocaleString("pt-BR", {
+        style: "currency",
+        currency: "BRL"
+    }).replace(".", " ");
+}
+
+/**
+ * Formata um valor de string para o formato de horas (HH:MM).
+ *
+ * @param valor - O valor a ser formatado.
+ * @returns O valor formatado como string no formato de horas.
+ */
+export function handleHours(valor: string): string {
+    let value = valor.replace(/[^\d.]/g, "");
+    const parts = value.split(".");
+
+    if (parts.length > 1) {
+        parts[1] = parts[1].substring(0, 2);
+    }
+
+    value = parts.join(".");
+    if (value.length > 2) {
+        value = value.substring(0, value.length - 2) + ":" + value.substring(value.length - 2);
+    }
+    return value;
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,4 +1,5 @@
 export * from "./const";
+export * from "./handle";
 export * from "./helper";
 export * from "./request";
 export * from "./message";