| 1 |
import classNames from "classnames"; |
| 2 |
import { CSSProperties, useState, type SVGProps } from "react"; |
| 3 |
import UpsellModal, { |
| 4 |
BlockUpsellInfo, |
| 5 |
UpsellEnhancedModal, |
| 6 |
UpsellModalComponent, |
| 7 |
} from "./UpsellModal"; |
| 8 |
import { createPortal } from "react-dom"; |
| 9 |
|
| 10 |
function LockFillIcon(props: SVGProps<SVGSVGElement>) { |
| 11 |
return ( |
| 12 |
<svg |
| 13 |
xmlns="http://www.w3.org/2000/svg" |
| 14 |
width="1em" |
| 15 |
height="1em" |
| 16 |
viewBox="0 0 24 24" |
| 17 |
{...props} |
| 18 |
> |
| 19 |
<g fill="none" fillRule="evenodd"> |
| 20 |
<path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"></path> |
| 21 |
<path |
| 22 |
fill="currentColor" |
| 23 |
d="M6 8a6 6 0 1 1 12 0h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2zm6-4a4 4 0 0 1 4 4H8a4 4 0 0 1 4-4m2 10a2 2 0 0 1-1 1.732V17a1 1 0 1 1-2 0v-1.268A2 2 0 0 1 12 12a2 2 0 0 1 2 2" |
| 24 |
></path> |
| 25 |
</g> |
| 26 |
</svg> |
| 27 |
); |
| 28 |
} |
| 29 |
|
| 30 |
interface LockedControlProps { |
| 31 |
children: any; |
| 32 |
inToolsPanel?: boolean; |
| 33 |
info?: BlockUpsellInfo; |
| 34 |
selected?: string; |
| 35 |
isEnhanced?: boolean; |
| 36 |
style?: CSSProperties; |
| 37 |
} |
| 38 |
|
| 39 |
export default function LockedControl({ |
| 40 |
children, |
| 41 |
inToolsPanel, |
| 42 |
info, |
| 43 |
selected, |
| 44 |
isEnhanced, |
| 45 |
style, |
| 46 |
}: LockedControlProps) { |
| 47 |
const [showUpsell, setVisibility] = useState(false); |
| 48 |
|
| 49 |
return ( |
| 50 |
<> |
| 51 |
<div |
| 52 |
className={classNames({ |
| 53 |
"tableberg-locked-root": true, |
| 54 |
"tableberg-locked-root-toolbar": inToolsPanel, |
| 55 |
})} |
| 56 |
style={style} |
| 57 |
> |
| 58 |
<div className="tableberg-locked-children">{children}</div> |
| 59 |
<button |
| 60 |
className="tableberg-lock-overlay" |
| 61 |
onClick={() => setVisibility(true)} |
| 62 |
aria-label="Unlock with Tableberg Pro" |
| 63 |
> |
| 64 |
<span className="tableberg-lock-container"> |
| 65 |
<LockFillIcon height="25px" width="25px" /> |
| 66 |
</span> |
| 67 |
</button> |
| 68 |
</div> |
| 69 |
{showUpsell && |
| 70 |
createPortal( |
| 71 |
info ? ( |
| 72 |
<UpsellModalComponent |
| 73 |
onClose={() => setVisibility(false)} |
| 74 |
info={info} |
| 75 |
/> |
| 76 |
) : isEnhanced ? ( |
| 77 |
<UpsellEnhancedModal |
| 78 |
onClose={() => setVisibility(false)} |
| 79 |
selected={selected} |
| 80 |
/> |
| 81 |
) : ( |
| 82 |
<UpsellModal |
| 83 |
onClose={() => setVisibility(false)} |
| 84 |
selected={selected} |
| 85 |
/> |
| 86 |
), |
| 87 |
document.body |
| 88 |
)} |
| 89 |
</> |
| 90 |
); |
| 91 |
} |
| 92 |
|
