mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
ff03c0b718
* chore: pages realtime * chore: empty binary response * chore: added a ypy package * feat: pages collaboration * chore: update fetching logic * chore: degrade ypy version * chore: replace useEffect fetch logic with useSWR * chore: move all the update logic to the page store * refactor: remove react-hook-form * chore: save description_html as well * chore: migrate old data logic * fix: added description_binary as field name * fix: code cleanup * refactor: create separate hook to handle page description * fix: build errors * chore: combine updates instead of using the whole document * chore: removed ypy package * chore: added conflict resolving logic to the client side * chore: add a save changes button * chore: add read-only validation * chore: remove saving state information * chore: added permission class * chore: removed the migration file * chore: corrected the model field * chore: rename pageStore to page * chore: update collaboration provider * chore: add try catch to handle error --------- Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
import { useState } from "react";
|
|
import { usePopper } from "react-popper";
|
|
import { Calendar, History, Info } from "lucide-react";
|
|
// helpers
|
|
import { renderFormattedDate } from "@/helpers/date-time.helper";
|
|
// store
|
|
import { IPageStore } from "@/store/pages/page.store";
|
|
|
|
type Props = {
|
|
page: IPageStore;
|
|
};
|
|
|
|
export const PageInfoPopover: React.FC<Props> = (props) => {
|
|
const { page } = props;
|
|
// states
|
|
const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
|
|
// refs
|
|
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
|
|
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
|
|
// popper-js
|
|
const { styles: infoPopoverStyles, attributes: infoPopoverAttributes } = usePopper(referenceElement, popperElement, {
|
|
placement: "bottom-start",
|
|
});
|
|
// derived values
|
|
const { created_at, updated_at } = page;
|
|
|
|
return (
|
|
<div onMouseEnter={() => setIsPopoverOpen(true)} onMouseLeave={() => setIsPopoverOpen(false)}>
|
|
<button type="button" ref={setReferenceElement} className="block">
|
|
<Info className="h-3.5 w-3.5" />
|
|
</button>
|
|
{isPopoverOpen && (
|
|
<div
|
|
className="z-10 w-64 space-y-2.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg"
|
|
ref={setPopperElement}
|
|
style={infoPopoverStyles.popper}
|
|
{...infoPopoverAttributes.popper}
|
|
>
|
|
<div className="space-y-1.5">
|
|
<h6 className="text-xs text-custom-text-400">Last updated on</h6>
|
|
<h5 className="flex items-center gap-1 text-sm">
|
|
<History className="h-3 w-3" />
|
|
{renderFormattedDate(updated_at)}
|
|
</h5>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<h6 className="text-xs text-custom-text-400">Created on</h6>
|
|
<h5 className="flex items-center gap-1 text-sm">
|
|
<Calendar className="h-3 w-3" />
|
|
{renderFormattedDate(created_at)}
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|