-
Conteúdo Similar
-
Por eiwes
Eu tenho esse código, mas preciso retornar funções puras em vez de funções mutáveis.
É possível? Talvez usando OOP? Não sei como melhorar isso.
Tentei retornar os valores de cada função, mas não obtive sucesso.
import { AssetStatusType } from '@domain/interfaces/common' import { BothComponentType, ComponentsType, GroupFiltersType, OperationType, OverviewModelType, PendenciesOverviewType, PendenciesType, StructurePendenciesCount, StructureStatusCount } from '../../types' const updateStatusCount = ( statusCount: StructureStatusCount, status: AssetStatusType ) => { statusCount[status] = (statusCount[status] || 0) + 1 } const updatePendenciesCount = ( pendenciesCount: StructurePendenciesCount, key: AssetStatusType, subKey: OperationType | PendenciesOverviewType ) => { pendenciesCount[key] = pendenciesCount[key] ?? {} pendenciesCount[key][subKey] = (pendenciesCount[key]?.[subKey] || 0) + 1 } const processOverviewPendencies = ( pendencies: PendenciesType[] | null | undefined, pendenciesCount: StructurePendenciesCount, countedIds: Set<string>, id: string ) => { if (pendencies?.length) { for (const { state, pendencyType } of pendencies) { const uniqueId = `${state}-${pendencyType}-${id}` if (!countedIds.has(uniqueId)) { updatePendenciesCount(pendenciesCount, state, pendencyType) countedIds.add(uniqueId) } } } } const processOverviewComponents = ( components: ComponentsType[], isGroupByTree: boolean, statusCount: StructureStatusCount, pendenciesCount: StructurePendenciesCount, countedIds: Set<string>, id: string, type: BothComponentType ) => { for (const { pendencies, status, operationType } of components) { if (isGroupByTree && type === 'location') { updateStatusCount(statusCount, status) if (operationType) { updatePendenciesCount(pendenciesCount, status, operationType) } } processOverviewPendencies(pendencies, pendenciesCount, countedIds, id) } } const processOverviewData = ( data: OverviewModelType[], groupBy: GroupFiltersType, statusCount: StructureStatusCount, pendenciesCount: StructurePendenciesCount, countedIds: Set<string> ) => { const isGroupByTree = groupBy === 'tree' const isGroupByAsset = groupBy === 'asset' for (const { id, status, components, operationType, type } of data) { if (isGroupByAsset || type === 'asset') { updateStatusCount(statusCount, status) if (operationType) { updatePendenciesCount(pendenciesCount, status, operationType) } } processOverviewComponents( components, isGroupByTree, statusCount, pendenciesCount, countedIds, id, type ) } } export const calculateOverviewCounts = ( data: OverviewModelType[], groupBy: GroupFiltersType ) => { const statusCount: StructureStatusCount = {} as StructureStatusCount const pendenciesCount: StructurePendenciesCount = {} as StructurePendenciesCount const countedIds = new Set<string>() processOverviewData(data, groupBy, statusCount, pendenciesCount, countedIds) return { ...statusCount, pendencies: pendenciesCount } } Existe uma maneira mais limpa e elegante de fazer isso? Preciso retornar um objeto como este:
// calculateOverviewCounts return this { pendencies: StructurePendenciesCount; working: number; inAlert: number; warning: number; stopped: number; off: number; } StructurePendenciesCount é:
-
Por araujoitalo
Olá a todos!
Estou trabalhando em uma tabela utilizando a bilioteca ng2-smart-table e estou com uma dificuldade em passar para um componente customizado os valores inseridos na linha de edição:
Veja o código abaixo, gostaria de passar para o componente SmartTableEditorFunctionsComponent os valores de Temperatura Máxima e Minima ao inserir uma nova linha na tabela.
temperaturaMaxima: { type: 'number', title: 'Temperatura Máxima', }, temperaturaMinima: { title: 'Temperatura Mínima', type: 'number', }, temperaturaMedia: { title: 'Temperatura Média', type: 'number', editor: { type: 'custom', component: SmartTableEditorFunctionsComponent, valuePrepareFunction(instance) { instance.save.subscribe(); }, }, },
Imagem da tabela:
Criei um botão para tentar recuperar o valor, porem sem sucesso.
Código do componente:
export class SmartTableEditorFunctionsComponent extends DefaultEditor { @Input() value: string | number; @Input() rowData: any; @Output() save: EventEmitter<any> = new EventEmitter(); constructor() { super(); } getPlaceholder(value: any) { const id = value.column.temperaturaMaxima; return id; } test() { const id = this.rowData.temperaturaMaxima; alert('TESTE' + id); } } Código do template do componente:
{{ cell.newValue }} <input type="number" [(ngModel)]="cell.newValue" [name]="cell.getId()" [placeholder]="cell.getTitle()" [disabled]="!cell.isEditable()" (click)="onClick.emit($event)" /> <button (click)="test()">Pega Valor</button> Alguém poderia me ajudar?
-
Por araujoitalo
Olá a todos!
Estou trabalhando em uma tabela utilizando a bilioteca ng2-smart-table e estou com uma dificuldade em passar para um componente customizado os valores inseridos na linha de edição:
Veja o código abaixo, gostaria de passar para o componente SmartTableEditorFunctionsComponent os valores de Temperatura Máxima e Minima ao inserir uma nova linha na tabela.
temperaturaMaxima: { type: 'number', title: 'Temperatura Máxima', }, temperaturaMinima: { title: 'Temperatura Mínima', type: 'number', }, temperaturaMedia: { title: 'Temperatura Média', type: 'number', editor: { type: 'custom', component: SmartTableEditorFunctionsComponent, valuePrepareFunction(instance) { instance.save.subscribe(); }, }, },
Imagem da tabela:
Criei um botão para tentar recuperar o valor, porem sem sucesso.
Código do componente:
export class SmartTableEditorFunctionsComponent extends DefaultEditor { @Input() value: string | number; @Input() rowData: any; @Output() save: EventEmitter<any> = new EventEmitter(); constructor() { super(); } getPlaceholder(value: any) { const id = value.column.temperaturaMaxima; return id; } test() { const id = this.rowData.temperaturaMaxima; alert('TESTE' + id); } } Código do template do componente:
{{ cell.newValue }} <input type="number" [(ngModel)]="cell.newValue" [name]="cell.getId()" [placeholder]="cell.getTitle()" [disabled]="!cell.isEditable()" (click)="onClick.emit($event)" /> <button (click)="test()">Pega Valor</button> Alguém poderia me ajudar?
-
Por ANRVA6
Então, amigos segue a live demo:
http://feeling.atwebpages.com
Uma pena que minha outra conta eu perdi com meu e-mail.
Seguinte, eu peguei daqui um exemplo do que eu precisava, que é um 'cardápio' que consiga adicionar o produto clicando na foto e no final, preciso q ele some e faça uma mini tabelinha com os itens.
Até ai, perfeito, tá tudo beleza e funcionando.
Porém, não tive jeito de conseguir fazer a impressão apenas da parte que preciso, que seria o que você comprou. Não preciso confirmação de nenhum tipo de sistemas reais bancários, apenas imprimir mesmo numa impressora térmica o cupom com os itens e quantidade.
Segue meu ''código'' que tá meio bagunçado mas legível:
index.html
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>PDV Feeling</title> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <div class="main-wrapper" id="noPrint"> <div class="header" id="noPrint"><h1>PDV Feeling</h1></div> <div id="vue"> <cart :cart="cart" :cart-sub-total="cartSubTotal" :cart-total="cartTotal" :checkout-bool="checkoutBool"></cart> <products :cart="cart" :cart-sub-total="cartSubTotal" :cart-total="cartTotal" :products-data="productsData"></products> <checkout-area v-if="checkoutBool" :cart="cart" :cart-sub-total="cartSubTotal" :cart-total="cartTotal" :products-data="productsData" ></checkout-area> </div> </div> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.js'></script> <script src="./script.js"></script> </body> </html>
script.js
//@TODO NOTIFICATIONS //--------- // Vue components //--------- Vue.component('products', { ready: function () { var self = this; document.addEventListener("keydown", function(e) { if (self.showModal && e.keyCode == 37) { self.changeProductInModal("prev"); } else if (self.showModal && e.keyCode == 39) { self.changeProductInModal("next"); } else if (self.showModal && e.keyCode == 27) { self.hideModal(); } }); }, template: "<h1>Produtos</h1>" + "<div class='products'>" + "<div v-for='product in productsData' track-by='$index' class='product {{ product.product | lowercase }}'>" + "<div class='image' @click='viewProduct(product)' v-bind:style='{ backgroundImage: \"url(\" + product.image + \")\" }' style='background-size: cover; background-position: center;'></div>" + "<div class='name'>{{ product.product }}</div>" + "<div class='description'>{{ product.description }}</div>" + "<div class='price'>{{ product.price | currency }}</div>" + "<button @click='addToCart(product)'>Adicionar ao Carrinho</button><br><br></div>" + "</div>" + "<div class='modalWrapper' v-show='showModal'>" + "<div class='prevProduct' @click='changeProductInModal(\"prev\")'><i class='fa fa-angle-left'></i></div>" + "<div class='nextProduct' @click='changeProductInModal(\"next\")'><i class='fa fa-angle-right'></i></div>" + "<div class='overlay' @click='hideModal()'></div>" + "<div class='modal'>" + "<i class='close fa fa-times' @click='hideModal()'></i>" + "<div class='imageWrapper'><div class='image' v-bind:style='{ backgroundImage: \"url(\" + modalData.image + \")\" }' style='background-size: cover; background-position: center;' v-on:mouseover='imageMouseOver($event)' v-on:mousemove='imageMouseMove($event)' v-on:mouseout='imageMouseOut($event)'></div></div>" + "<div class='additionalImages' v-if='modalData.images'>" + "<div v-for='image in modalData.images' class='additionalImage' v-bind:style='{ backgroundImage: \"url(\" + image.image + \")\" }' style='background-size: cover; background-position: center;' @click='changeImage(image.image)'></div>" + "</div>" + "<div class='name'>{{ modalData.product }}</div>" + "<div class='description'>{{ modalData.description }}</div>" + "<div class='details'>{{ modalData.details }}</div>" + "<h3 class='price'>{{ modalData.price | currency }}</h3>" + "<label for='modalAmount'>QTY</label>" + "<input id='modalAmount' value='{{ modalAmount }}' v-model='modalAmount' class='amount' @keyup.enter='modalAddToCart(modalData), hideModal()'/>" + "<button @click='modalAddToCart(modalData), hideModal()'>Add to Cart</button>" + "</div></div>", props: ['productsData', 'cart', 'cartSubTotal', 'cartTotal'], data: function() { return { showModal: false, modalData: {}, modalAmount: 1, timeout: "", mousestop: "" } }, methods: { addToCart: function(product) { var found = false; for (var i = 0; i < vue.cart.length; i++) { if (vue.cart[i].sku === product.sku) { var newProduct = vue.cart[i]; newProduct.quantity = newProduct.quantity + 1; vue.cart.$set(i, newProduct); //console.log("DUPLICATE", vue.cart[i].product + "'s quantity is now: " + vue.cart[i].quantity); found = true; break; } } if(!found) { product.quantity = 1; vue.cart.push(product); } vue.cartSubTotal = vue.cartSubTotal + product.price; vue.cartTotal = vue.cartSubTotal; vue.checkoutBool = true; }, modalAddToCart: function(modalData) { var self = this; for(var i = 0; i < self.modalAmount; i++) { self.addToCart(modalData); } self.modalAmount = 1; }, viewProduct: function(product) { var self = this; //self.modalData = product; self.modalData = (JSON.parse(JSON.stringify(product))); self.showModal = true; }, changeProductInModal: function(direction) { var self = this, productsLength = vue.productsData.length, currentProduct = self.modalData.sku, newProductId, newProduct; if(direction === "next") { newProductId = currentProduct + 1; if(currentProduct >= productsLength) { newProductId = 1; } } else if(direction === "prev") { newProductId = currentProduct - 1; if(newProductId === 0) { newProductId = productsLength; } } //console.log(direction, newProductId); for (var i = 0; i < productsLength; i++) { if (vue.productsData[i].sku === newProductId) { self.viewProduct(vue.productsData[i]); } } }, hideModal: function() { //hide modal and empty modal data var self = this; self.modalData = {}; self.showModal = false; }, changeImage: function(image) { var self = this; self.modalData.image = image; }, imageMouseOver: function(event) { event.target.style.transform = "scale(2)"; }, imageMouseMove: function(event) { var self = this; event.target.style.transform = "scale(2)"; self.timeout = setTimeout(function() { event.target.style.transformOrigin = ((event.pageX - event.target.getBoundingClientRect().left) / event.target.getBoundingClientRect().width) * 100 + '% ' + ((event.pageY - event.target.getBoundingClientRect().top - window.pageYOffset) / event.target.getBoundingClientRect().height) * 100 + "%"; }, 50); self.mouseStop = setTimeout(function() { event.target.style.transformOrigin = ((event.pageX - event.target.getBoundingClientRect().left) / event.target.getBoundingClientRect().width) * 100 + '% ' + ((event.pageY - event.target.getBoundingClientRect().top - window.pageYOffset) / event.target.getBoundingClientRect().height) * 100 + "%"; }, 100); }, imageMouseOut: function(event) { event.target.style.transform = "scale(1)"; } } }); Vue.component('cart', { template: '<div class="cart">' + '<span class="cart-size" @click="showCart = !showCart"> {{ cart | cartSize }} </span><i class="fa fa-shopping-cart" @click="showCart = !showCart"></i>' + '<div class="cart-items" v-show="showCart">' + '<table class="cartTable">' + '<tbody>' + '<tr class="product" v-for="product in cart">' + '<td class="align-left"><div class="cartImage" @click="removeProduct(product)" v-bind:style="{ backgroundImage: \'url(\' + product.image + \')\' }" style="background-size: cover; background-position: center;"><i class="close fa fa-times"></i></div></td>' + '<td class="align-center"><button @click="quantityChange(product, \'decriment\')"><i class="close fa fa-minus"></i></button></td>' + '<td class="align-center">{{ cart[$index].quantity }}</td>' + '<td class="align-center"><button @click="quantityChange(product, \'incriment\')"><i class="close fa fa-plus"></i></button></td>' + '<td class="align-center">{{ cart[$index] | customPluralize }}</td>' + '<td>{{ product.price | currency }}</td>' + '</tbody>' + '<table>' + '</div>' + '<h4 class="cartSubTotal" v-show="showCart"> {{ cartSubTotal | currency }} </h4></div>' + '<button class="clearCart" v-show="checkoutBool" @click="clearCart()"> Clear Cart </button>' + '<button class="checkoutCart" v-show="checkoutBool" @click="propagateCheckout()"> Checkout </button>', props: ['checkoutBool', 'cart', 'cartSize', 'cartSubTotal', 'cartTotal'], data: function() { return { showCart: false } }, filters: { customPluralize: function(cart) { var newName; if(cart.quantity > 1) { if(cart.product === "Peach") { newName = cart.product + "es"; } else if(cart.product === "Puppy") { newName = cart.product + "ies"; newName = newName.replace("y", ""); } else { newName = cart.product + "s"; } return newName; } return cart.product; }, cartSize: function(cart) { var cartSize = 0; for (var i = 0; i < cart.length; i++) { cartSize += cart[i].quantity; } return cartSize; } }, methods: { removeProduct: function(product) { vue.cart.$remove(product); vue.cartSubTotal = vue.cartSubTotal - (product.price * product.quantity); vue.cartTotal = vue.cartSubTotal; if(vue.cart.length <= 0) { vue.checkoutBool = false; } }, clearCart: function() { vue.cart = []; vue.cartSubTotal = 0; vue.cartTotal = 0; vue.checkoutBool = false; this.showCart = false; }, quantityChange: function(product, direction) { var qtyChange; for (var i = 0; i < vue.cart.length; i++) { if (vue.cart[i].sku === product.sku) { var newProduct = vue.cart[i]; if(direction === "incriment") { newProduct.quantity = newProduct.quantity + 1; vue.cart.$set(i, newProduct); } else { newProduct.quantity = newProduct.quantity - 1; if(newProduct.quantity == 0) { vue.cart.$remove(newProduct); } else { vue.cart.$set(i, newProduct); } } } } if(direction === "incriment") { vue.cartSubTotal = vue.cartSubTotal + product.price; } else { vue.cartSubTotal = vue.cartSubTotal - product.price; } vue.cartTotal = vue.cartSubTotal; if(vue.cart.length <= 0) { vue.checkoutBool = false; } }, //send our request up the chain, to our parent //our parent catches the event, and sends the request back down propagateCheckout: function() { vue.$dispatch("checkoutRequest"); } } }); Vue.component('checkout-area', { template: "<h1>Checkout Area</h1>" + '<div class="checkout-area">' + '<span> {{ cart | cartSize }} </span><i class="fa fa-shopping-cart"></i>' + '<table>' + '<thead>' + '<tr>' + '<th class="align-center">SKU</th>' + '<th>Name</th>' + '<th>Description</th>' + '<th class="align-right">Amount</th>' + '<th class="align-right">Price</th>' + '</tr>' + '</thead>' + '<tbody>' + '<tr v-for="product in cart" track-by="$index">' + '<td class="align-center">{{ product.sku }}</td>' + '<td>{{ product.product }}</td>' + '<td>{{ product.description }}</td>' + '<td class="align-right">{{ cart[$index].quantity }}</td>' + '<td class="align-right">{{ product.price | currency }}</td>' + '</tr>' + //'<button @click="removeProduct(product)"> X </button></div>' + '<tr>' + '<td> </td>' + '<td> </td>' + '<td> </td>' + '<td> </td>' + '<td> </td>' + '</tr>' + '<tr>' + '<td></td>' + '<td></td>' + '<td></td>' + '</tr>' + '<tr>' + '<td></td>' + '<td></td>' + '<td></td>' + '</tr>' + '<tr>' + '<td></td>' + '<td></td>' + '<td></td>' + '<td class="align-right vert-bottom">Total:</td>' + '<td class="align-right vert-bottom"><h2 v-if="cartSubTotal != 0"> {{ cartTotal | currency }} </h2></td>' + '</tr>' + '</tbody>' + '</table>' + '<button v-show="cartSubTotal" @click="checkoutModal()">Checkout</button></div>' + "<div class='modalWrapper' v-show='showModal'>" + "<div class='overlay' @click='hideModal()'></div>" + "<div class='modal checkout'>" + "<i class='close fa fa-times' @click='hideModal()'></i>" + "<h1>Checkout</h1>" + "<h1> Total: {{ cartTotal | currency }} </h3>" + "<br><div>This is where our payment processor goes</div>" + "</div>", props: ['cart', 'cartSize', 'cartSubTotal', 'cartTotal'], data: function() { return { showModal: false } }, filters: { customPluralize: function(cart) { var newName; if(cart.quantity > 1) { newName = cart.product + "s"; return newName; } return cart.product; }, cartSize: function(cart) { var cartSize = 0; for (var i = 0; i < cart.length; i++) { cartSize += cart[i].quantity; } return cartSize; } }, methods: { removeProduct: function(product) { vue.cart.$remove(product); vue.cartSubTotal = vue.cartSubTotal - (product.price * product.quantity); vue.cartTotal = vue.cartSubTotal; if(vue.cart.length <= 0) { vue.checkoutBool = false; } }, checkoutModal: function() { var self = this; self.showModal = true; console.log("CHECKOUT", self.cartTotal); }, hideModal: function() { //hide modal and empty modal data var self = this; self.showModal = false; } }, //intercept the checkout request broadcast //run our function events: { "checkoutRequest": function() { var self = this; self.checkoutModal(); } } }); //--------- // Vue init //--------- Vue.config.debug = false; var vue = new Vue({ el: "#vue", data: { productsData: [ { sku: 1, product: "Monkey", image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/chimpanzee.jpg", images: [ { image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/chimpanzee.jpg" }, { image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/gorilla.jpg" }, { image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/red-monkey.jpg" }, { image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/mandrill-monkey.jpg" } ], description: "This is a monkey", details: "This is where some detailes on monkies would go. This monkey done seent some shit.", price: 5.50 }, { sku: 2, product: "Kitten", image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/kittens.jpg", description: "This is a kitten", details: "This is where some detailes on kittens would go. Shout out kittens for being adorable.", price: 10 }, { sku: 3, product: "Shark", image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/shark.jpg", description: "This is a shark", details: "This is where some detailes on sharks would go. Damn nature, you scary.", price: 15 }, { sku: 4, product: "Puppy", image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/dog.jpg", description: "This is a puppy", details: "This is where some detailes on puppies would go. Shout out puppies for being adorable.", price: 5 }, { sku: 5, product: "Apple", image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/apple.jpg", description: "This is an apple", details: "This is where some detailes on apples would go. Shout out apples for being delicious.", price: 1 }, { sku: 6, product: "Orange", image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/orange.jpg", description: "This is an orange", details: "This is where some detailes on oranges would go. Shout out oranges for being delicious.", price: 1.1 }, { sku: 7, product: "Peach", image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/peach.jpg", description: "This is a peach", details: "This is where some detailes on peaches would go. Shout out peaches for being delicious.", price: 1.5 }, { sku: 8, product: "Mango", image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/mango.png", description: "This is a mango", details: "This is where some detailes on mangos would go. Shout out mangos for being delicious.", price: 2 }, { sku: 9, product: "Cognac", image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/cognac.jpg", description: "This is a glass of cognac", details: "This is where some detailes on cognac would go. I'm like hey whats up, hello.", price: 17.38 }, { sku: 10, product: "Chain", image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/chain.jpg", description: "This is a chain", details: "This is where some details on chains would go. 2Chainz but I got me a few on.", price: 17.38 } ], checkoutBool: false, cart: [], cartSubTotal: 0, cartTotal: 0 }, //intercept the checkout request dispatch //send it back down the chain events: { "checkoutRequest": function() { vue.$broadcast("checkoutRequest"); } } });
Bom, eu tentei de tantas maneiras e diversos tutoriais, que ficou evidente que não vou conseguir sem ajuda.
Não me importa se ele irá criar uma nova página com os dados nem nada, desde q ele clique no botão e imprima na impressora padrão. Li em foruns gringos que tem navegadores que não lidam bem com tipos de codigo para impressão sem diálogo, se for o caso posso usar qualquer navegador na máquina, minha ideia é que online nunca vai precisar ''reinstalar'' sistemas nesse pc. Se só conseguir fazer com diálogo, tbm é possível, mesmo q prefira sem nenhum popup.
Fico na esperança da ajuda dos amigos, pois estava a bastante tempo sem programar nada e, agora graças a deus com mais projetos, irei tirar a ferrugem, mas de momento necessito desse apoio da comunidade.
-
Por Lucas.RR
Boa tarde a todos, estou tentando fazer um autocomplete com suggestion e uso o TypeScript, vi esta aplicação no youtube mas sem utilizar o TypeScript.
Quando rodo a aplicação ela funciona, mas mostra erro na pagina quando é carregada, por causa da falta de tipagem, gostaria de saber como fazer.
A aplicação funciona assim:
carrego os nomes que tenho no banco de dados vindos do back:
useEffect(() => { const loadUsers = async() => { const response = await api.get('/cadastrousuarios'); setUsers(response.data); console.log(response.data); } loadUsers(); }, []); na propriedade do input onChange eu chamei onChangeHandler:
<input type='text' className='col-md-12 input' onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeHandler(e.target.value)} value={text}/>
É no onChangeHandler que esta o problema, o código pega o valor que do get em .json e procura na coluna_nome os valores que são inputados no input e mostra as sugestões:
const onChangeHandler = (text: any) => { let matches: React.SetStateAction<never[]>= []; if (text.length>0){ matches = users.filter( user => { const regex = new RegExp(`${text}`, 'ig'); return user.coluna_nome.match(regex); }) } setSuggestions(matches) setText(text) } no return user.coluna_nome.match(regex) da erro no .coluna_nome. o erro é: Property 'coluna_nome' does not exist on type 'never'.ts(2339).
Sei que é problema de tipagem mas não sei como fazer a tipagem desse item, poderiam me ajudar por favor.
Obs: Quando abro a pagina da erro por causa dessa tipagem, mas eu fecho o erro e funciona certinho!
-
Ola!
A pergunta pode parecer simples, mas eu sou junior e estou consertando algumas coisas num projeto ja existente.
No momento eu tenho uma barra de pesquisa em um <div> com um input type=text que esta escondido e um botao com uma lupa, quando se clica na lupa o input desliza e aparece porem para poder digitar algum valor no input eu preciso apertar no input novamente.
Gostaria de saber se existe alguma forma de fazer com que quando clicasse na lupa a barra de pesquisa deslisasse ja com o cursor text no input e pronto pra escrever em vez de ter que clicar novamente.
Obrigada!
Compartilhar este post
Link para o post
Compartilhar em outros sites