forked from M3-Academy/challenge-vtex-io
54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import React, { useEffect } from "react";
|
|
|
|
interface IPlaceholderProps {
|
|
text: string;
|
|
}
|
|
|
|
export function Placeholder({ text = "Digite seu CEP" }: IPlaceholderProps) {
|
|
function waitForElm(selector: any) {
|
|
return new Promise((resolve) => {
|
|
if (document.querySelector(selector)) {
|
|
return resolve(document.querySelector(selector));
|
|
}
|
|
|
|
const observer = new MutationObserver(() => {
|
|
if (document.querySelector(selector)) {
|
|
resolve(document.querySelector(selector));
|
|
observer.disconnect();
|
|
}
|
|
});
|
|
|
|
observer.observe(document.body, {
|
|
childList: true,
|
|
subtree: true,
|
|
});
|
|
});
|
|
}
|
|
|
|
async function ShippingSimulatorPlaceholder(): Promise<void> {
|
|
const shippingSimulatorInput = (await waitForElm(
|
|
".vtex-store-components-3-x-shippingContainer .vtex-address-form-4-x-input"
|
|
)) as any;
|
|
|
|
if (shippingSimulatorInput !== null || shippingSimulatorInput) {
|
|
shippingSimulatorInput.placeholder = text;
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
ShippingSimulatorPlaceholder();
|
|
}, []);
|
|
|
|
return <></>;
|
|
}
|
|
|
|
Placeholder.schema = {
|
|
title: "Placeholder do shipping-simulation",
|
|
type: "object",
|
|
properties: {
|
|
text: {
|
|
type: "string",
|
|
},
|
|
},
|
|
};
|