#7 - Create new component

Disponibilizando funções de legenda para inputFilter.

debug/src/index.tsx

@@ -1,21 +1,29 @@
 import { Box } from "../../src/box";
+import { Chip } from "primereact/chip";
 import React, { useState } from "react";
-import { InputFilter } from "../../src/inputfilter";
+import { filterLegendAutocomplete, InputFilter } from "../../src/inputfilter";
 
 const Root = () => {
     const [value, setValue] = useState<any>(undefined);
-
-    console.log(value);
+    const [data, setData] = useState<any>([]);
 
     return (
         <Box size="100">
             <p className="w-100">Componente - Filtro</p>
+            <Chip className="my-2 fs-7"
+                  label={filterLegendAutocomplete(value, data)}/>
             <InputFilter required
+                         data={data}
                          icon="funnel-fill"
                          label="Data"
-                         options={["=", ">", "<"]}
-                         type="number"
+                         options={["=", "!="]}
+                         type="autocomplete"
                          value={value}
+                         onSearch={() => setData([
+                             { id: 1, label: "Luiz Fernando" },
+                             { id: 2, label: "Dayana" },
+                             { id: 3, label: "Lara" },
+                         ])}
                          onChange={setValue}/>
         </Box>
     );

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangesix/react",
   "type": "module",
-  "version": "1.0.10-x4",
+  "version": "1.0.10-x5",
   "description": "Conjunto de componentes e funções disponíveis para serem utilizados em projetos React.",
   "author": "Luiz Fernando Bernardes de Paula",
   "license": "MIT",

src/inputfilter/_inputfilter.scss

@@ -42,6 +42,7 @@
 .input-filter-select {
   width: 40%;
   max-width: 200px;
+  min-width: 130px;
 }
 
 .input-filter-field {

src/inputfilter/index.ts

@@ -1 +1,2 @@
+export * from "./legend";
 export * from "./inputfilter";

src/inputfilter/legend.ts

@@ -0,0 +1,82 @@
+import { MES } from "../utils";
+import { optionsLabel } from "./const";
+
+/**
+ * Retorna a legenda de acordo com operador na string
+ * @param value - Valor a ser tratado
+ */
+export function filterLegend(value: string | undefined): string | null {
+    if (!value) {
+        return null;
+    }
+    let optsRegex = /(=|!=|<|>|<=|>=|%|!%|\{\})/;
+    let optsMatch = value?.match(optsRegex);
+    let opts = value.charAt(value.length - 1);
+    let option = optsMatch?.[0];
+
+    if (optsMatch?.[0] !== opts && isNaN(parseInt(opts)) && option?.slice(-1) !== opts) {
+        option = optsMatch?.[0] + opts;
+    }
+    return optionsLabel.filter(item => item.options === option)[0]?.label ?? null;
+}
+
+/**
+ * Realiza o tratamento das informações para retorna a legenda do tipo `Date`
+ * @param value - Valor a ser tratado
+ */
+export function filterLegendData(value: string | undefined): string {
+    let legend = filterLegend(value);
+    if (legend === null) {
+        return "Não encontramos legenda definida.";
+    }
+
+    let interval = value?.split("{}");
+    let date = value?.split("/");
+
+    const handleLegend = (date: any): string => {
+        let dia = parseInt(date[0]);
+        let mes = parseInt(date[1], 10);
+        let ano = parseInt(date[2]);
+
+        return `
+            ${(dia > 0 ? `${mes == 0 ? "dia" : ""} ${dia}` : "")} 
+            ${mes > 0 ? `${dia > 0 ? "de" : ""} ${MES[mes - 1]?.name}` : ""} 
+            ${ano > 0 ? `${dia > 0 || mes > 0 ? "de" : ""} ${ano}` : ""}
+        `.replace(/\s+/g, " ").trim();
+    };
+    let result = interval?.[1] === undefined
+        ? handleLegend(date)
+        : handleLegend(interval[0].split("/")) + " à " + handleLegend(interval[1].split("/"));
+    return legend + ": " + result;
+}
+
+/**
+ * Realiza o tratamento das informações para retorna a legenda do tipo `Text`
+ * @param value - Valor a ser tratado
+ */
+export function filterLegendText(value: string | undefined): string {
+    let legend = filterLegend(value);
+    if (legend === null) {
+        return "Não encontramos legenda definida.";
+    }
+    return legend + ": " + (value?.replace(/(=|!=|<|>|<=|>=|%|!%|\{\})/g, "") ?? "");
+}
+
+/**
+ * Realiza o tratamento das informações para retorna a legando do tipo `autocomplete`
+ * @param value - Valor a ser tratado
+ * @param dto - Array de objeto para ser pesquisado a legenda
+ * @param word - Limite de palavras para a legenda
+ */
+export function filterLegendAutocomplete(value: string | undefined, dto: any[] = [], word: number = 30): string {
+    let legend = filterLegend(value);
+    if (legend === null || dto.length === 0) {
+        return "Não encontramos legenda definida.";
+    }
+    let ids: any[] = value?.split(";").map(item => parseInt(item)) ?? [];
+    let values = dto
+        .filter(obj => ids.includes(obj.id))
+        .map(item => item.label).join(", ");
+    let text = values.substring(0, word);
+    return legend + ": " + text + (text.length !== values.length ? "..." : "");
+}

src/utils/const.ts

@@ -3,3 +3,48 @@ import { getMetaContent } from "./helper";
 export const USER: string | null = getMetaContent("auth");
 export const BASE: string | null = getMetaContent("react-base");
 export const TOKEN: string | null = getMetaContent("csrf-token");
+
+export const MES: Array<{ id: number, name: string }> = [
+    { id: 1, name: "Janeiro" },
+    { id: 2, name: "Fevereiro" },
+    { id: 3, name: "Março" },
+    { id: 4, name: "Abril" },
+    { id: 5, name: "Maio" },
+    { id: 6, name: "Junho" },
+    { id: 7, name: "Julho" },
+    { id: 8, name: "Agosto" },
+    { id: 9, name: "Setembro" },
+    { id: 10, name: "Outubro" },
+    { id: 11, name: "Novembro" },
+    { id: 12, name: "Dezembro" },
+];
+
+export const ESTADOS: Array<{ id: string, name: string }> = [
+    { name: "Acre", id: "AC" },
+    { name: "Alagoas", id: "AL" },
+    { name: "Amapá", id: "AP" },
+    { name: "Amazonas", id: "AM" },
+    { name: "Bahia", id: "BA" },
+    { name: "Ceará", id: "CE" },
+    { name: "Distrito Federal", id: "DF" },
+    { name: "Espírito Santo", id: "ES" },
+    { name: "Goiás", id: "GO" },
+    { name: "Maranhão", id: "MA" },
+    { name: "Mato Grosso", id: "MT" },
+    { name: "Mato Grosso do Sul", id: "MS" },
+    { name: "Minas Gerais", id: "MG" },
+    { name: "Pará", id: "PA" },
+    { name: "Paraíba", id: "PB" },
+    { name: "Paraná", id: "PR" },
+    { name: "Pernambuco", id: "PE" },
+    { name: "Piauí", id: "PI" },
+    { name: "Rio de Janeiro", id: "RJ" },
+    { name: "Rio Grande do Norte", id: "RN" },
+    { name: "Rio Grande do Sul", id: "RS" },
+    { name: "Rondônia", id: "RO" },
+    { name: "Roraima", id: "RR" },
+    { name: "Santa Catarina", id: "SC" },
+    { name: "São Paulo", id: "SP" },
+    { name: "Sergipe", id: "SE" },
+    { name: "Tocantins", id: "TO" }
+];

test/inputfilter.test.ts

@@ -0,0 +1,25 @@
+import { expect, describe, test } from "@jest/globals";
+import { filterLegend, filterLegendData, filterLegendText, filterLegendAutocomplete } from "../dist/inputfilter";
+
+describe("InputFilter", () => {
+
+    describe("Arquivo -> legend.ts", () => {
+        test("filterLegend - Undefined", () => expect(filterLegend(undefined)).toBeNull());
+        test("filterLegend - Valor diferente", () => expect(filterLegend("9/11/2024>!@#")).toBeNull());
+        test("filterLegend - Igual a", () => expect(filterLegend("9/11/2024=")).toEqual("Igual a"));
+        test("filterLegend - Maior ou igual a", () => expect(filterLegend("9/11/2024>=")).toEqual("Maior ou igual a"));
+        test("filterLegend - Intervalo", () => expect(filterLegend("9/11/2024{}0/0/0")).toEqual("Intervalo"));
+
+        test("filterLegendData", () => expect(typeof filterLegendData(undefined)).toBe("string"));
+        test("filterLegendData", () => expect(typeof filterLegendData("9/11/2024=")).toBe("string"));
+
+        test("filterLegendText", () => expect(typeof filterLegendText(undefined)).toBe("string"));
+        test("filterLegendText", () => expect(typeof filterLegendText("luizfernando!%")).toBe("string"));
+
+        test("filterLegendAutocomplete", () => expect(typeof filterLegendAutocomplete(undefined)).toBe("string"));
+        test("filterLegendAutocomplete", () => expect(filterLegendAutocomplete("1!=", [{
+            id: 1,
+            label: "TESTE"
+        }])).toBe("Diferente de: TESTE"));
+    });
+});