Files
HKSingleParty/99_references/ionic-react-conference-app/src/components/ShareSocialFab.tsx
2025-05-28 09:55:51 +08:00

62 lines
1.6 KiB
TypeScript

import {
IonLoading,
IonFab,
IonFabButton,
IonIcon,
IonFabList,
} from '@ionic/react';
import {
shareSocial,
logoVimeo,
logoInstagram,
logoTwitter,
logoFacebook,
} from 'ionicons/icons';
import React, { useState } from 'react';
const ShareSocialFab: React.FC = () => {
const [loadingMessage, setLoadingMessage] = useState('');
const [showLoading, setShowLoading] = useState(false);
const openSocial = (network: string) => {
setLoadingMessage(`Posting to ${network}`);
setShowLoading(true);
};
return (
<>
<IonLoading
isOpen={showLoading}
message={loadingMessage}
duration={2000}
spinner="crescent"
onDidDismiss={() => setShowLoading(false)}
/>
<IonFab slot="fixed" vertical="bottom" horizontal="end">
<IonFabButton>
<IonIcon icon={shareSocial} />
</IonFabButton>
<IonFabList side="top">
<IonFabButton color="vimeo" onClick={() => openSocial('Vimeo')}>
<IonIcon icon={logoVimeo} />
</IonFabButton>
<IonFabButton
color="instagram"
onClick={() => openSocial('Instagram')}
>
<IonIcon icon={logoInstagram} />
</IonFabButton>
<IonFabButton color="twitter" onClick={() => openSocial('Twitter')}>
<IonIcon icon={logoTwitter} />
</IonFabButton>
<IonFabButton color="facebook" onClick={() => openSocial('Facebook')}>
<IonIcon icon={logoFacebook} />
</IonFabButton>
</IonFabList>
</IonFab>
</>
);
};
export default ShareSocialFab;