diff --git a/debug/src/index.tsx b/debug/src/index.tsx index 7334cc7..f5be167 100644 --- a/debug/src/index.tsx +++ b/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(undefined); - - console.log(value); + const [data, setData] = useState([]); return (

Componente - Filtro

+ ", "<"]} - type="number" + options={["=", "!="]} + type="autocomplete" value={value} + onSearch={() => setData([ + { id: 1, label: "Luiz Fernando" }, + { id: 2, label: "Dayana" }, + { id: 3, label: "Lara" }, + ])} onChange={setValue}/> ); diff --git a/package.json b/package.json index 1ef384a..8a53ba0 100644 --- a/package.json +++ b/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", diff --git a/src/inputfilter/_inputfilter.scss b/src/inputfilter/_inputfilter.scss index 413ee55..75c8f3b 100644 --- a/src/inputfilter/_inputfilter.scss +++ b/src/inputfilter/_inputfilter.scss @@ -42,6 +42,7 @@ .input-filter-select { width: 40%; max-width: 200px; + min-width: 130px; } .input-filter-field { diff --git a/src/inputfilter/index.ts b/src/inputfilter/index.ts index 64e9d0e..af6b945 100644 --- a/src/inputfilter/index.ts +++ b/src/inputfilter/index.ts @@ -1 +1,2 @@ +export * from "./legend"; export * from "./inputfilter"; \ No newline at end of file diff --git a/src/inputfilter/legend.ts b/src/inputfilter/legend.ts new file mode 100644 index 0000000..f66bd04 --- /dev/null +++ b/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 ? "..." : ""); +} \ No newline at end of file diff --git a/src/utils/const.ts b/src/utils/const.ts index 239c454..0c92f5a 100644 --- a/src/utils/const.ts +++ b/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" } +]; \ No newline at end of file diff --git a/test/inputfilter.test.ts b/test/inputfilter.test.ts new file mode 100644 index 0000000..36e3a47 --- /dev/null +++ b/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")); + }); +});