05f190c102
# New Feature: Entity Explorer - Entities are actions (apis and queries), datasources, pages, and widgets - With this new feature, all entities in the application will be available to view in the new entity explorer sidebar - All existing application features from the api sidebar, query sidebar, datasource sidebar and pages sidebar now are avialable on the entity explorer sidebar - Users are now able to quickly switch to any entity in the application from the entity explorer sidebar. - Users can also search all entities in the application from the new sidebar. Use cmd + f or ctrl + f to focus on the search input - Users can rename entities from the new sidebar - Users can also perform contextual actions on these entities like set a page as home page, copy/move actions, delete entity, etc from the context menu available alongside the entities in the sidebar - Users can view the properties of the entities in the sidebar, as well as copy bindings to use in the application.
55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import { MutableRefObject } from "react";
|
|
|
|
const writeToClipboard = async (
|
|
text: string,
|
|
el: HTMLElement,
|
|
ref: MutableRefObject<HTMLElement | null>,
|
|
) => {
|
|
if ("clipboard" in navigator) {
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
el.childNodes[0].textContent = "Copied to clipboard!";
|
|
el.classList.add("success");
|
|
ref.current && ref.current.append(el);
|
|
} catch (e) {
|
|
el.childNodes[0].textContent = "Failed!";
|
|
el.classList.add("error");
|
|
ref.current && ref.current.append(el);
|
|
}
|
|
setTimeout(() => {
|
|
ref.current?.removeChild(el);
|
|
}, 1000);
|
|
}
|
|
};
|
|
|
|
/* How it works:
|
|
This hook takes a ref object as a paramter.
|
|
|
|
Success in copying:
|
|
It appends a div with the class .clipboard-message.success with text "Binding Copied!"
|
|
to the element which the passed ref refers
|
|
|
|
Error in copying:
|
|
It appends a div with the class .clipboard-message.error with text "Failed!"
|
|
to the element which the passed ref refers
|
|
|
|
The component which implements the hook needs to add the appropriate styles
|
|
to the clipboard success and error message div
|
|
|
|
Messages get removed in 2 seconds. Not customizable at the moment.
|
|
|
|
TODO(abhinav): Enhance this hook to make it more customizable.
|
|
*/
|
|
const useClipboard = (ref: MutableRefObject<HTMLElement | null>) => {
|
|
const write = (text: string) => {
|
|
const el = document.createElement("div");
|
|
const content = document.createTextNode("");
|
|
el.classList.add("clipboard-message");
|
|
el.appendChild(content);
|
|
writeToClipboard(text, el, ref);
|
|
};
|
|
return write;
|
|
};
|
|
|
|
export default useClipboard;
|