text: import Facebook from 'lesca-facebook-share';
  import Gtag from 'lesca-gtag';
  import ImageOnload from 'lesca-image-onload';
  import { Bezier, useTween } from 'lesca-use-tween';
  import { useEffect, useRef, useState } from 'react';
  import QueryString from 'lesca-url-parameters';
  import Line from 'lesca-line-share';
  import Copy from 'copy-text-to-clipboard';
  
  import './main.less';
  
  const y = 100;
  const duration = 500;
  const easing = Bezier.easeOutBack;
  const WIDGET_NAME = '快捷列';
  
  // Share
  const url = QueryString.root();
  const hashtag = '新光新朋友';
  
  const Widget = () => {
  	const ref = useRef();
  	const [state, setstate] = useState(false);
  	const [style, setStyle] = useTween({ y });
  
  	useEffect(() => {
  		new ImageOnload(ref.current, {
  			hideBeforeLoaded: false,
  		}).then(() => {
  			setStyle({ y: 0 }, { duration, easing, delay: 2000 });
  		});
  	}, []);
  
  	return (
  		<div className='Widget dropShadow' ref={ref} style={style}>
  			<div
  				className='accordion'
  				onClick={() => {
  					setstate((c) => !c);
  				}}
  				role='none'
  			/>
  			{state && (
  				<>
  					<div
  						className='fb'
  						onClick={() => {
  							Gtag.event(WIDGET_NAME, 'Facebook分享');
  							Facebook.share({ url, hashtag, redirect_uri: url });
  						}}
  						role='none'
  					/>
  					<div
  						className='line'
  						onClick={() => {
  							Line.share(url, hashtag);
  							Gtag.event(WIDGET_NAME, 'Line分享');
  						}}
  						role='none'
  					/>
  					<div
  						className='link'
  						onClick={() => {
  							Gtag.event(WIDGET_NAME, '連結');
  							Copy(url);
  							alert('網址已經複製到剪貼簿');
  						}}
  						role='none'
  					/>
  				</>
  			)}
  		</div>
  	);
  };
  export default Widget;
  