| 33 | * component to use. |
| 34 | */ |
| 35 | const Link = ({refresh = false, ...props}) => { |
| 36 | const {className, style, id, href, children, title, target, setProps} = |
| 37 | props; |
| 38 | const cleanUrl = window.dash_clientside.clean_url; |
| 39 | const sanitizedUrl = useMemo(() => { |
| 40 | return href ? cleanUrl(href) : undefined; |
| 41 | }, [href]); |
| 42 | |
| 43 | const ctx = window.dash_component_api.useDashContext(); |
| 44 | const loading = ctx.useLoading(); |
| 45 | |
| 46 | const updateLocation = e => { |
| 47 | const hasModifiers = e.metaKey || e.shiftKey || e.altKey || e.ctrlKey; |
| 48 | |
| 49 | if (hasModifiers) { |
| 50 | return; |
| 51 | } |
| 52 | if (target !== '_self' && !isNil(target)) { |
| 53 | return; |
| 54 | } |
| 55 | // prevent anchor from updating location |
| 56 | e.preventDefault(); |
| 57 | if (refresh) { |
| 58 | window.location = sanitizedUrl; |
| 59 | } else { |
| 60 | window.history.pushState({}, '', sanitizedUrl); |
| 61 | window.dispatchEvent(new CustomEvent('_dashprivate_pushstate')); |
| 62 | } |
| 63 | // scroll back to top |
| 64 | window.scrollTo(0, 0); |
| 65 | }; |
| 66 | |
| 67 | useEffect(() => { |
| 68 | if (sanitizedUrl && sanitizedUrl !== href) { |
| 69 | setProps({ |
| 70 | _dash_error: new Error(`Dangerous link detected:: ${href}`), |
| 71 | }); |
| 72 | } |
| 73 | }, [href, sanitizedUrl]); |
| 74 | |
| 75 | return ( |
| 76 | <a |
| 77 | data-dash-is-loading={loading || undefined} |
| 78 | id={id} |
| 79 | className={className} |
| 80 | style={style} |