From a652cf97ae25542c9edfc81748ab26fe23e86925 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Thu, 6 Nov 2025 11:36:48 +0100 Subject: [PATCH] Floating Action Button: Fix transition (#6440) --- src/components/calls/group/GroupCall.tsx | 5 ++-- .../common/IconWithSpinner.module.scss | 16 +++++++++++ src/components/common/IconWithSpinner.tsx | 28 +++++++++++++++++++ src/components/left/main/ContactList.tsx | 6 ++-- src/components/left/newChat/NewChatStep1.tsx | 5 ++-- src/components/left/newChat/NewChatStep2.tsx | 11 ++------ .../left/settings/SettingsEditProfile.tsx | 12 ++------ .../settings/SettingsPrivacyBlockedUsers.tsx | 6 ++-- ...SettingsPrivacyVisibilityExceptionList.tsx | 6 ++-- .../folders/SettingsFoldersChatFilters.tsx | 6 ++-- .../settings/folders/SettingsFoldersEdit.tsx | 11 ++------ .../folders/SettingsShareChatlist.tsx | 12 ++------ src/components/right/AddChatMembers.tsx | 12 ++------ src/components/right/CreateTopic.tsx | 12 ++------ src/components/right/EditTopic.tsx | 12 ++------ src/components/right/Profile.tsx | 5 ++-- src/components/right/management/ManageBot.tsx | 12 ++------ .../right/management/ManageChannel.tsx | 12 ++------ .../management/ManageChatAdministrators.tsx | 6 ++-- .../management/ManageChatPrivacyType.tsx | 12 ++------ .../management/ManageChatRemovedUsers.tsx | 6 ++-- .../right/management/ManageGroup.tsx | 12 ++------ .../management/ManageGroupAdminRights.tsx | 12 ++------ .../right/management/ManageGroupMembers.tsx | 6 ++-- .../management/ManageGroupPermissions.tsx | 12 ++------ .../management/ManageGroupUserPermissions.tsx | 12 ++------ .../right/management/ManageInvite.tsx | 6 ++-- .../right/management/ManageReactions.tsx | 12 ++------ .../right/management/ManageUser.tsx | 12 ++------ .../right/management/NewDiscussionGroup.tsx | 12 ++------ src/components/story/privacy/CloseFriends.tsx | 6 ++-- src/components/ui/FloatingActionButton.scss | 9 +++++- src/components/ui/FloatingActionButton.tsx | 17 +++++------ 33 files changed, 136 insertions(+), 205 deletions(-) create mode 100644 src/components/common/IconWithSpinner.module.scss create mode 100644 src/components/common/IconWithSpinner.tsx diff --git a/src/components/calls/group/GroupCall.tsx b/src/components/calls/group/GroupCall.tsx index 215b94871..0e2c5a38f 100644 --- a/src/components/calls/group/GroupCall.tsx +++ b/src/components/calls/group/GroupCall.tsx @@ -427,9 +427,8 @@ const GroupCall: FC = ({ onClick={handleInviteMember} className={styles.addParticipantButton} ariaLabel={lang('VoipGroupInviteMember')} - > - - + iconName="add-user-filled" + />
diff --git a/src/components/common/IconWithSpinner.module.scss b/src/components/common/IconWithSpinner.module.scss new file mode 100644 index 000000000..cdcd22512 --- /dev/null +++ b/src/components/common/IconWithSpinner.module.scss @@ -0,0 +1,16 @@ +.root { + --icon-size: 1.5rem; + + width: var(--icon-size); + height: var(--icon-size); +} + +.spinner { + --spinner-size: var(--icon-size); + + margin: 0 !important; +} + +.icon { + font-size: var(--icon-size); +} diff --git a/src/components/common/IconWithSpinner.tsx b/src/components/common/IconWithSpinner.tsx new file mode 100644 index 000000000..40529d098 --- /dev/null +++ b/src/components/common/IconWithSpinner.tsx @@ -0,0 +1,28 @@ +import { memo } from '../../lib/teact/teact'; + +import type { IconName } from '../../types/icons'; + +import Spinner from '../ui/Spinner'; +import Transition from '../ui/Transition'; +import Icon from './icons/Icon'; + +import styles from './IconWithSpinner.module.scss'; + +type OwnProps = { + iconName: IconName; + isLoading?: boolean; +}; + +const IconWithSpinner = ({ iconName, isLoading }: OwnProps) => { + return ( + + {isLoading ? ( + + ) : ( + + )} + + ); +}; + +export default memo(IconWithSpinner); diff --git a/src/components/left/main/ContactList.tsx b/src/components/left/main/ContactList.tsx index 59c1b19fc..550f0b6a9 100644 --- a/src/components/left/main/ContactList.tsx +++ b/src/components/left/main/ContactList.tsx @@ -13,7 +13,6 @@ import useHistoryBack from '../../../hooks/useHistoryBack'; import useInfiniteScroll from '../../../hooks/useInfiniteScroll'; import useOldLang from '../../../hooks/useOldLang'; -import Icon from '../../common/icons/Icon'; import PrivateChatInfo from '../../common/PrivateChatInfo'; import FloatingActionButton from '../../ui/FloatingActionButton'; import InfiniteScroll from '../../ui/InfiniteScroll'; @@ -100,9 +99,8 @@ const ContactList: FC = ({ isShown onClick={openNewContactDialog} ariaLabel={lang('CreateNewContact')} - > - - + iconName="add-user-filled" + /> ); }; diff --git a/src/components/left/newChat/NewChatStep1.tsx b/src/components/left/newChat/NewChatStep1.tsx index d3ef49764..112e27e44 100644 --- a/src/components/left/newChat/NewChatStep1.tsx +++ b/src/components/left/newChat/NewChatStep1.tsx @@ -122,9 +122,8 @@ const NewChatStep1: FC = ({ isShown onClick={handleNextStep} ariaLabel={isChannel ? 'Continue To Channel Info' : 'Continue To Group Info'} - > - - + iconName="arrow-right" + />
); diff --git a/src/components/left/newChat/NewChatStep2.tsx b/src/components/left/newChat/NewChatStep2.tsx index 01af4203a..8c253e140 100644 --- a/src/components/left/newChat/NewChatStep2.tsx +++ b/src/components/left/newChat/NewChatStep2.tsx @@ -21,7 +21,6 @@ import Button from '../../ui/Button'; import FloatingActionButton from '../../ui/FloatingActionButton'; import InputText from '../../ui/InputText'; import ListItem from '../../ui/ListItem'; -import Spinner from '../../ui/Spinner'; export type OwnProps = { isChannel?: boolean; @@ -210,13 +209,9 @@ const NewChatStep2: FC = ({ onClick={isChannel ? handleCreateChannel : handleCreateGroup} disabled={isLoading} ariaLabel={isChannel ? lang('ChannelIntro.CreateChannel') : 'Create Group'} - > - {isLoading ? ( - - ) : ( - - )} - + iconName="arrow-right" + isLoading={isLoading} + /> ); }; diff --git a/src/components/left/settings/SettingsEditProfile.tsx b/src/components/left/settings/SettingsEditProfile.tsx index 265ad8472..04415f356 100644 --- a/src/components/left/settings/SettingsEditProfile.tsx +++ b/src/components/left/settings/SettingsEditProfile.tsx @@ -22,14 +22,12 @@ import useMedia from '../../../hooks/useMedia'; import useOldLang from '../../../hooks/useOldLang'; import usePreviousDeprecated from '../../../hooks/usePreviousDeprecated'; -import Icon from '../../common/icons/Icon'; import ManageUsernames from '../../common/ManageUsernames'; import SafeLink from '../../common/SafeLink'; import UsernameInput from '../../common/UsernameInput'; import AvatarEditable from '../../ui/AvatarEditable'; import FloatingActionButton from '../../ui/FloatingActionButton'; import InputText from '../../ui/InputText'; -import Spinner from '../../ui/Spinner'; import TextArea from '../../ui/TextArea'; type OwnProps = { @@ -289,13 +287,9 @@ const SettingsEditProfile: FC = ({ onClick={handleProfileSave} disabled={isLoading} ariaLabel={lang('Save')} - > - {isLoading ? ( - - ) : ( - - )} - + iconName="check" + isLoading={isLoading} + /> ); }; diff --git a/src/components/left/settings/SettingsPrivacyBlockedUsers.tsx b/src/components/left/settings/SettingsPrivacyBlockedUsers.tsx index 65bcb6382..aa1833546 100644 --- a/src/components/left/settings/SettingsPrivacyBlockedUsers.tsx +++ b/src/components/left/settings/SettingsPrivacyBlockedUsers.tsx @@ -16,7 +16,6 @@ import useOldLang from '../../../hooks/useOldLang'; import Avatar from '../../common/Avatar'; import FullNameTitle from '../../common/FullNameTitle'; -import Icon from '../../common/icons/Icon'; import FloatingActionButton from '../../ui/FloatingActionButton'; import ListItem from '../../ui/ListItem'; import Loading from '../../ui/Loading'; @@ -144,9 +143,8 @@ const SettingsPrivacyBlockedUsers: FC = ({ className="block-user-button" onClick={openBlockUserModal} ariaLabel={lang('BlockContact')} - > - - + iconName="add" + /> = ({ isShown={isSubmitShown} onClick={handleSubmit} ariaLabel={isAllowList ? oldLang('AlwaysAllow') : oldLang('NeverAllow')} - > - - + iconName="check" + /> ); }; diff --git a/src/components/left/settings/folders/SettingsFoldersChatFilters.tsx b/src/components/left/settings/folders/SettingsFoldersChatFilters.tsx index 7005e430c..11b1c3760 100644 --- a/src/components/left/settings/folders/SettingsFoldersChatFilters.tsx +++ b/src/components/left/settings/folders/SettingsFoldersChatFilters.tsx @@ -18,7 +18,6 @@ import useHistoryBack from '../../../../hooks/useHistoryBack'; import useLastCallback from '../../../../hooks/useLastCallback'; import useOldLang from '../../../../hooks/useOldLang'; -import Icon from '../../../common/icons/Icon'; import PeerPicker from '../../../common/pickers/PeerPicker'; import FloatingActionButton from '../../../ui/FloatingActionButton'; import Loading from '../../../ui/Loading'; @@ -162,9 +161,8 @@ const SettingsFoldersChatFilters: FC = ({ isShown={isTouched} onClick={onSaveFilter} ariaLabel={lang('Save')} - > - - + iconName="check" + /> ); }; diff --git a/src/components/left/settings/folders/SettingsFoldersEdit.tsx b/src/components/left/settings/folders/SettingsFoldersEdit.tsx index d1560b572..06225119b 100644 --- a/src/components/left/settings/folders/SettingsFoldersEdit.tsx +++ b/src/components/left/settings/folders/SettingsFoldersEdit.tsx @@ -34,7 +34,6 @@ import PrivateChatInfo from '../../../common/PrivateChatInfo'; import FloatingActionButton from '../../../ui/FloatingActionButton'; import InputText from '../../../ui/InputText'; import ListItem from '../../../ui/ListItem'; -import Spinner from '../../../ui/Spinner'; type OwnProps = { state: FoldersState; @@ -461,13 +460,9 @@ const SettingsFoldersEdit: FC = ({ disabled={state.isLoading} onClick={handleSubmit} ariaLabel={state.mode === 'edit' ? 'Save changes' : 'Create folder'} - > - {state.isLoading ? ( - - ) : ( - - )} - + iconName="check" + isLoading={state.isLoading} + /> ); }; diff --git a/src/components/left/settings/folders/SettingsShareChatlist.tsx b/src/components/left/settings/folders/SettingsShareChatlist.tsx index c1c7b68cf..8e1f0cfd0 100644 --- a/src/components/left/settings/folders/SettingsShareChatlist.tsx +++ b/src/components/left/settings/folders/SettingsShareChatlist.tsx @@ -24,11 +24,9 @@ import useLastCallback from '../../../../hooks/useLastCallback'; import useOldLang from '../../../../hooks/useOldLang'; import AnimatedIcon from '../../../common/AnimatedIcon'; -import Icon from '../../../common/icons/Icon'; import LinkField from '../../../common/LinkField'; import PeerPicker from '../../../common/pickers/PeerPicker'; import FloatingActionButton from '../../../ui/FloatingActionButton'; -import Spinner from '../../../ui/Spinner'; type OwnProps = { isActive?: boolean; @@ -198,13 +196,9 @@ const SettingsShareChatlist: FC = ({ disabled={isDisabled} onClick={handleSubmit} ariaLabel="Save changes" - > - {isLoading ? ( - - ) : ( - - )} - + iconName="check" + isLoading={isLoading} + /> ); }; diff --git a/src/components/right/AddChatMembers.tsx b/src/components/right/AddChatMembers.tsx index 69581fbea..121e4ead2 100644 --- a/src/components/right/AddChatMembers.tsx +++ b/src/components/right/AddChatMembers.tsx @@ -21,10 +21,8 @@ import useHistoryBack from '../../hooks/useHistoryBack'; import useOldLang from '../../hooks/useOldLang'; import usePreviousDeprecated from '../../hooks/usePreviousDeprecated'; -import Icon from '../common/icons/Icon'; import PeerPicker from '../common/pickers/PeerPicker'; import FloatingActionButton from '../ui/FloatingActionButton'; -import Spinner from '../ui/Spinner'; import './AddChatMembers.scss'; @@ -144,13 +142,9 @@ const AddChatMembers: FC = ({ disabled={isLoading} ariaLabel={lang('lng_channel_add_users')} onClick={handleNextStep} - > - {isLoading ? ( - - ) : ( - - )} - + iconName="arrow-right" + isLoading={isLoading} + /> ); diff --git a/src/components/right/CreateTopic.tsx b/src/components/right/CreateTopic.tsx index b890e4bf2..aa2c0a1f6 100644 --- a/src/components/right/CreateTopic.tsx +++ b/src/components/right/CreateTopic.tsx @@ -19,11 +19,9 @@ import useHistoryBack from '../../hooks/useHistoryBack'; import useOldLang from '../../hooks/useOldLang'; import CustomEmojiPicker from '../common/CustomEmojiPicker'; -import Icon from '../common/icons/Icon'; import TopicIcon from '../common/TopicIcon'; import FloatingActionButton from '../ui/FloatingActionButton'; import InputText from '../ui/InputText'; -import Spinner from '../ui/Spinner'; import Transition from '../ui/Transition'; import styles from './ManageTopic.module.scss'; @@ -158,13 +156,9 @@ const CreateTopic: FC = ({ disabled={isLoading} onClick={handleCreateTopic} ariaLabel={lang('Save')} - > - {isLoading ? ( - - ) : ( - - )} - + iconName="check" + isLoading={isLoading} + /> ); }; diff --git a/src/components/right/EditTopic.tsx b/src/components/right/EditTopic.tsx index f69adb954..488f9d0cf 100644 --- a/src/components/right/EditTopic.tsx +++ b/src/components/right/EditTopic.tsx @@ -19,12 +19,10 @@ import useHistoryBack from '../../hooks/useHistoryBack'; import useOldLang from '../../hooks/useOldLang'; import CustomEmojiPicker from '../common/CustomEmojiPicker'; -import Icon from '../common/icons/Icon'; import TopicIcon from '../common/TopicIcon'; import FloatingActionButton from '../ui/FloatingActionButton'; import InputText from '../ui/InputText'; import Loading from '../ui/Loading'; -import Spinner from '../ui/Spinner'; import Transition from '../ui/Transition'; import styles from './ManageTopic.module.scss'; @@ -174,13 +172,9 @@ const EditTopic: FC = ({ disabled={isLoading} onClick={handleEditTopic} ariaLabel={lang('Save')} - > - {isLoading ? ( - - ) : ( - - )} - + iconName="check" + isLoading={isLoading} + /> ); }; diff --git a/src/components/right/Profile.tsx b/src/components/right/Profile.tsx index c51b9f4f5..92dd96eaf 100644 --- a/src/components/right/Profile.tsx +++ b/src/components/right/Profile.tsx @@ -1224,9 +1224,8 @@ const Profile = ({ isShown={canRenderContent} onClick={handleNewMemberDialogOpen} ariaLabel={oldLang('lng_channel_add_users')} - > - - + iconName="add-user-filled" + /> )} {canDeleteMembers && ( = ({ onClick={handleProfileSave} disabled={isLoading} ariaLabel={lang('Save')} - > - {isLoading ? ( - - ) : ( - - )} - + iconName="check" + isLoading={isLoading} + /> = ({ onClick={handleUpdateChannel} disabled={isLoading} ariaLabel={lang('Save')} - > - {isLoading ? ( - - ) : ( - - )} - + iconName="check" + isLoading={isLoading} + /> = ({ isShown={canAddNewAdmins} onClick={handleAddAdminClick} ariaLabel={lang('Channel.Management.AddModerator')} - > - - + iconName="add-user-filled" + /> {canToggleSignatures && ( diff --git a/src/components/right/management/ManageChatPrivacyType.tsx b/src/components/right/management/ManageChatPrivacyType.tsx index 9a58f1124..da21b3921 100644 --- a/src/components/right/management/ManageChatPrivacyType.tsx +++ b/src/components/right/management/ManageChatPrivacyType.tsx @@ -21,7 +21,6 @@ import useHistoryBack from '../../../hooks/useHistoryBack'; import useOldLang from '../../../hooks/useOldLang'; import usePreviousDeprecated from '../../../hooks/usePreviousDeprecated'; -import Icon from '../../common/icons/Icon'; import LinkField from '../../common/LinkField'; import ManageUsernames from '../../common/ManageUsernames'; import SafeLink from '../../common/SafeLink'; @@ -31,7 +30,6 @@ import FloatingActionButton from '../../ui/FloatingActionButton'; import ListItem from '../../ui/ListItem'; import Loading from '../../ui/Loading'; import RadioGroup from '../../ui/RadioGroup'; -import Spinner from '../../ui/Spinner'; type PrivacyType = 'private' | 'public'; @@ -281,13 +279,9 @@ const ManageChatPrivacyType: FC = ({ disabled={isLoading} ariaLabel={lang('Save')} onClick={handleSave} - > - {isLoading ? ( - - ) : ( - - )} - + iconName="check" + isLoading={isLoading} + /> = ({ isShown onClick={openRemoveUserModal} ariaLabel={lang('Channel.EditAdmin.Permission.BanUsers')} - > - - + iconName="add-user-filled" + /> )} {chat && canDeleteMembers && ( = ({ onClick={handleUpdateGroup} disabled={isLoading} ariaLabel={lang('Save')} - > - {isLoading ? ( - - ) : ( - - )} - + iconName="check" + isLoading={isLoading} + /> = ({ onClick={handleSavePermissions} ariaLabel={lang('Save')} disabled={isLoading} - > - {isLoading ? ( - - ) : ( - - )} - + iconName="check" + isLoading={isLoading} + /> {!isNewAdmin && ( = ({ isShown onClick={handleNewMemberDialogOpen} ariaLabel={lang('lng_channel_add_users')} - > - - + iconName="add-user-filled" + /> )} {canDeleteMembers && ( = ({ onClick={handleUpdatePermissions} ariaLabel={lang('Save')} disabled={arePermissionsLoading} - > - {arePermissionsLoading ? ( - - ) : ( - - )} - + iconName="check" + isLoading={arePermissionsLoading} + /> ); }; diff --git a/src/components/right/management/ManageGroupUserPermissions.tsx b/src/components/right/management/ManageGroupUserPermissions.tsx index 4ee6ba45d..e308043da 100644 --- a/src/components/right/management/ManageGroupUserPermissions.tsx +++ b/src/components/right/management/ManageGroupUserPermissions.tsx @@ -16,13 +16,11 @@ import useLang from '../../../hooks/useLang'; import useOldLang from '../../../hooks/useOldLang'; import useManagePermissions from '../hooks/useManagePermissions'; -import Icon from '../../common/icons/Icon'; import PrivateChatInfo from '../../common/PrivateChatInfo'; import PermissionCheckboxList from '../../main/PermissionCheckboxList'; import ConfirmDialog from '../../ui/ConfirmDialog'; import FloatingActionButton from '../../ui/FloatingActionButton'; import ListItem from '../../ui/ListItem'; -import Spinner from '../../ui/Spinner'; type OwnProps = { chatId: string; @@ -177,13 +175,9 @@ const ManageGroupUserPermissions: FC = ({ onClick={handleSavePermissions} ariaLabel={oldLang('Save')} disabled={isLoading} - > - {isLoading ? ( - - ) : ( - - )} - + iconName="check" + isLoading={isLoading} + /> = ({ onClick={handleSaveClick} disabled={isSubmitBlocked} ariaLabel={editingInvite ? lang('SaveLink') : lang('CreateLink')} - > - - + iconName="check" + /> = ({ onClick={handleSaveReactions} ariaLabel={lang('Save')} disabled={isLoading} - > - {isLoading ? ( - - ) : ( - - )} - + iconName="check" + isLoading={isLoading} + /> ); }; diff --git a/src/components/right/management/ManageUser.tsx b/src/components/right/management/ManageUser.tsx index 171558b8b..0e49a5d48 100644 --- a/src/components/right/management/ManageUser.tsx +++ b/src/components/right/management/ManageUser.tsx @@ -27,7 +27,6 @@ import useLang from '../../../hooks/useLang'; import useOldLang from '../../../hooks/useOldLang'; import Avatar from '../../common/Avatar'; -import Icon from '../../common/icons/Icon'; import PrivateChatInfo from '../../common/PrivateChatInfo'; import Checkbox from '../../ui/Checkbox'; import ConfirmDialog from '../../ui/ConfirmDialog'; @@ -35,7 +34,6 @@ import FloatingActionButton from '../../ui/FloatingActionButton'; import InputText from '../../ui/InputText'; import ListItem from '../../ui/ListItem'; import SelectAvatar from '../../ui/SelectAvatar'; -import Spinner from '../../ui/Spinner'; import TextArea from '../../ui/TextArea'; import './Management.scss'; @@ -315,13 +313,9 @@ const ManageUser: FC = ({ onClick={handleProfileSave} disabled={isLoading} ariaLabel={oldLang('Save')} - > - {isLoading ? ( - - ) : ( - - )} - + iconName="check" + isLoading={isLoading} + /> = ({ onClick={handleCreateGroup} disabled={isLoading} ariaLabel={lang('DiscussionCreateGroup')} - > - {isLoading ? ( - - ) : ( - - )} - + iconName="arrow-right" + isLoading={isLoading} + /> diff --git a/src/components/story/privacy/CloseFriends.tsx b/src/components/story/privacy/CloseFriends.tsx index 79b52755e..4d3e66662 100644 --- a/src/components/story/privacy/CloseFriends.tsx +++ b/src/components/story/privacy/CloseFriends.tsx @@ -13,7 +13,6 @@ import useEffectWithPrevDeps from '../../../hooks/useEffectWithPrevDeps'; import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; -import Icon from '../../common/icons/Icon'; import PeerPicker from '../../common/pickers/PeerPicker'; import FloatingActionButton from '../../ui/FloatingActionButton'; @@ -85,9 +84,8 @@ function CloseFriends({ isShown={isSubmitShown} onClick={handleSubmit} ariaLabel={lang('Save')} - > - - + iconName="check" + /> ); diff --git a/src/components/ui/FloatingActionButton.scss b/src/components/ui/FloatingActionButton.scss index eb5ccfde9..e268532b3 100644 --- a/src/components/ui/FloatingActionButton.scss +++ b/src/components/ui/FloatingActionButton.scss @@ -1,11 +1,18 @@ .FloatingActionButton { + --transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s, color 0.15s, opacity 0.15s; + position: absolute; z-index: 2; right: 1rem; bottom: 1rem; transform: translateY(5rem); - transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); + transition: var(--transition); + + &:active, + &.clicked { + transition: var(--transition) !important; + } body.no-page-transitions & { transition: none !important; diff --git a/src/components/ui/FloatingActionButton.tsx b/src/components/ui/FloatingActionButton.tsx index df89b7f89..14c0da73b 100644 --- a/src/components/ui/FloatingActionButton.tsx +++ b/src/components/ui/FloatingActionButton.tsx @@ -1,35 +1,36 @@ -import type { FC } from '../../lib/teact/teact'; -import type React from '../../lib/teact/teact'; - +import type { IconName } from '../../types/icons'; import type { OwnProps as ButtonProps } from './Button'; import buildClassName from '../../util/buildClassName'; import useOldLang from '../../hooks/useOldLang'; +import IconWithSpinner from '../common/IconWithSpinner'; import Button from './Button'; import './FloatingActionButton.scss'; type OwnProps = { isShown: boolean; + iconName: IconName; className?: string; color?: ButtonProps['color']; ariaLabel?: ButtonProps['ariaLabel']; disabled?: boolean; + isLoading?: boolean; onClick: () => void; - children: React.ReactNode; }; -const FloatingActionButton: FC = ({ +const FloatingActionButton = ({ isShown, + iconName, className, color = 'primary', ariaLabel, disabled, + isLoading, onClick, - children, -}) => { +}: OwnProps) => { const lang = useOldLang(); const buttonClassName = buildClassName( @@ -49,7 +50,7 @@ const FloatingActionButton: FC = ({ tabIndex={-1} isRtl={lang.isRtl} > - {children} + ); };