nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-22 22:30:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Remove classnames dependency

Browse Source
This commit is contained in:
Bill 2022-10-24 02:42:49 -04:00
parent 99e98048e0
commit c3efcbf857
9 changed files with 37 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -19,7 +19,6 @@
"@nitrots/nitro-renderer": "^1.3.4",
"@tanstack/react-virtual": "^3.0.0-beta.18",
"animate.css": "^4.1.1",
"classnames": "^2.3.1",
"cross-env": "^7.0.3",
"emoji-toolkit": "^6.6.0",
"react": "^18.2.0",

1
src/common/classNames.ts Normal file
View File

@ -0,0 +1 @@
export const classNames = (...classes: string[]) => classes.filter(Boolean).join(' ');

2
src/common/index.ts
View File

@ -5,6 +5,7 @@ export * from './ButtonGroup';
export * from './card';
export * from './card/accordion';
export * from './card/tabs';
export * from './classNames';
export * from './Column';
export * from './draggable-window';
export * from './Flex';
@ -14,6 +15,7 @@ export * from './GridContext';
export * from './HorizontalRule';
export * from './InfiniteScroll';
export * from './layout';
export * from './layout/limited-edition';
export * from './Text';
export * from './transitions';
export * from './types';

50
src/components/catalog/views/gift/CatalogGiftView.tsx
View File

@ -1,9 +1,8 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { GiftReceiverNotFoundEvent, PurchaseFromCatalogAsGiftComposer } from '@nitrots/nitro-renderer';
import classNames from 'classnames';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { GetSessionDataManager, LocalizeText, ProductTypeEnum, SendMessageComposer } from '../../../../api';
import { Base, Button, ButtonGroup, Column, Flex, FormGroup, LayoutCurrencyIcon, LayoutFurniImageView, LayoutGiftTagView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
import { Base, Button, ButtonGroup, classNames, Column, Flex, FormGroup, LayoutCurrencyIcon, LayoutFurniImageView, LayoutGiftTagView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
import { CatalogEvent, CatalogInitGiftEvent, CatalogPurchasedEvent } from '../../../../events';
import { useCatalog, useMessageEvent, useUiEvent } from '../../../../hooks';
@ -41,29 +40,6 @@ export const CatalogGiftView: FC<{}> = props =>
if(colors.length) setSelectedColorId(colors[0].id);
}, [ colors ]);
const onCatalogEvent = useCallback((event: CatalogEvent) =>
{
switch(event.type)
{
case CatalogPurchasedEvent.PURCHASE_SUCCESS:
onClose();
return;
case CatalogEvent.INIT_GIFT:
const castedEvent = (event as CatalogInitGiftEvent);
onClose();
setPageId(castedEvent.pageId);
setOfferId(castedEvent.offerId);
setExtraData(castedEvent.extraData);
setIsVisible(true);
return;
}
}, [ onClose ]);
useUiEvent(CatalogPurchasedEvent.PURCHASE_SUCCESS, onCatalogEvent);
useUiEvent(CatalogEvent.INIT_GIFT, onCatalogEvent);
const isBoxDefault = useMemo(() =>
{
return giftConfiguration ? (giftConfiguration.defaultStuffTypes.findIndex(s => (s === giftConfiguration.boxTypes[selectedBoxIndex])) > -1) : true;
@ -115,6 +91,28 @@ export const CatalogGiftView: FC<{}> = props =>
useMessageEvent<GiftReceiverNotFoundEvent>(GiftReceiverNotFoundEvent, event => setReceiverNotFound(true));
useUiEvent([
CatalogPurchasedEvent.PURCHASE_SUCCESS,
CatalogEvent.INIT_GIFT ], event =>
{
switch(event.type)
{
case CatalogPurchasedEvent.PURCHASE_SUCCESS:
onClose();
return;
case CatalogEvent.INIT_GIFT:
const castedEvent = (event as CatalogInitGiftEvent);
onClose();
setPageId(castedEvent.pageId);
setOfferId(castedEvent.offerId);
setExtraData(castedEvent.extraData);
setIsVisible(true);
return;
}
});
useEffect(() =>
{
setReceiverNotFound(false);
@ -157,7 +155,7 @@ export const CatalogGiftView: FC<{}> = props =>
<NitroCardContentView className="text-black">
<FormGroup column>
<Text>{ LocalizeText('catalog.gift_wrapping.receiver') }</Text>
<input type="text" className={ 'form-control form-control-sm' + classNames({ ' is-invalid': receiverNotFound }) } value={ receiverName } onChange={ (e) => setReceiverName(e.target.value) } />
<input type="text" className={ classNames('form-control form-control-sm', receiverNotFound && 'is-invalid') } value={ receiverName } onChange={ (e) => setReceiverName(e.target.value) } />
{ receiverNotFound &&
<Base className="invalid-feedback">{ LocalizeText('catalog.gift_wrapping.receiver_not_found.title') }</Base> }
</FormGroup>

7
src/components/groups/views/tabs/GroupTabColorsView.tsx
View File

@ -1,8 +1,7 @@
import { GroupSaveColorsComposer } from '@nitrots/nitro-renderer';
import classNames from 'classnames';
import { Dispatch, FC, SetStateAction, useCallback, useEffect, useState } from 'react';
import { IGroupData, LocalizeText, SendMessageComposer } from '../../../../api';
import { AutoGrid, Base, Column, Flex, Grid, Text } from '../../../../common';
import { AutoGrid, Base, classNames, Column, Flex, Grid, Text } from '../../../../common';
import { useGroup } from '../../../../hooks';
interface GroupTabColorsViewProps
@ -110,7 +109,7 @@ export const GroupTabColorsView: FC<GroupTabColorsViewProps> = props =>
<AutoGrid gap={ 1 } columnCount={ 7 } columnMinWidth={ 16 } columnMinHeight={ 16 }>
{ groupData.groupColors && groupCustomize.groupColorsA && groupCustomize.groupColorsA.map((item, index) =>
{
return <div key={ index } className={ 'group-badge-color-swatch cursor-pointer' + classNames({ ' active': (groupData.groupColors[0] === item.id) }) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(0, item.id) }></div>
return <div key={ index } className={ classNames('group-badge-color-swatch cursor-pointer', ((groupData.groupColors[0] === item.id) && 'active')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(0, item.id) }></div>
}) }
</AutoGrid>
</Column>
@ -119,7 +118,7 @@ export const GroupTabColorsView: FC<GroupTabColorsViewProps> = props =>
<AutoGrid gap={ 1 } columnCount={ 7 } columnMinWidth={ 16 } columnMinHeight={ 16 }>
{ groupData.groupColors && groupCustomize.groupColorsB && groupCustomize.groupColorsB.map((item, index) =>
{
return <div key={ index } className={ 'group-badge-color-swatch cursor-pointer' + classNames({ ' active': (groupData.groupColors[1] === item.id) }) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(1, item.id) }></div>
return <div key={ index } className={ classNames('group-badge-color-swatch cursor-pointer', ((groupData.groupColors[1] === item.id) && 'active')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(1, item.id) }></div>
}) }
</AutoGrid>
</Column>

5
src/components/navigator/views/NavigatorRoomInfoView.tsx
View File

@ -1,9 +1,8 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { RoomMuteComposer, RoomSettingsComposer, SecurityLevel, ToggleStaffPickMessageComposer, UpdateHomeRoomMessageComposer } from '@nitrots/nitro-renderer';
import classNames from 'classnames';
import { FC, useEffect, useState } from 'react';
import { CreateLinkEvent, DispatchUiEvent, GetGroupInformation, GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../../api';
import { Button, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView } from '../../../common';
import { Button, classNames, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView } from '../../../common';
import { RoomWidgetThumbnailEvent } from '../../../events';
import { useNavigator } from '../../../hooks';
@ -104,7 +103,7 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
<Flex gap={ 1 }>
<Column grow gap={ 1 }>
<Flex gap={ 1 }>
<i onClick={ () => processAction('set_home_room') } className={ 'flex-shrink-0 icon icon-house-small cursor-pointer' + classNames({ ' gray': navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId }) } />
<i onClick={ () => processAction('set_home_room') } className={ classNames('flex-shrink-0 icon icon-house-small cursor-pointer', ((navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId) && 'gray')) } />
<Text bold>{ navigatorData.enteredGuestRoom.roomName }</Text>
</Flex>
{ navigatorData.enteredGuestRoom.showOwner &&

3
src/components/room/widgets/choosers/ChooserWidgetView.tsx
View File

@ -1,7 +1,6 @@
import classNames from 'classnames';
import { FC, useEffect, useMemo, useState } from 'react';
import { GetSessionDataManager, LocalizeText, RoomObjectItem } from '../../../../api';
import { Flex, InfiniteScroll, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
import { classNames, Flex, InfiniteScroll, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
interface ChooserWidgetViewProps
{

5
src/components/room/widgets/furniture/FurnitureDimmerView.tsx
View File

@ -1,9 +1,8 @@
import { RoomEngineTriggerWidgetEvent } from '@nitrots/nitro-renderer';
import classNames from 'classnames';
import { FC, useEffect, useMemo, useState } from 'react';
import ReactSlider from 'react-slider';
import { ColorUtils, FurnitureDimmerUtilities, GetConfiguration, LocalizeText } from '../../../../api';
import { Base, Button, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../../../common';
import { Base, Button, classNames, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../../../common';
import { useFurnitureDimmerWidget, useRoomEngineEvent } from '../../../../hooks';
export const FurnitureDimmerView: FC<{}> = props =>
@ -56,7 +55,7 @@ export const FurnitureDimmerView: FC<{}> = props =>
{ FurnitureDimmerUtilities.AVAILABLE_COLORS.map((color, index) =>
{
return (
<Column fullWidth pointer key={ index } className={ 'color-swatch rounded' + classNames({ ' active': color === selectedColor }) } onClick={ () => setSelectedColor(color) } style={ { backgroundColor: FurnitureDimmerUtilities.HTML_COLORS[index] } } />
<Column fullWidth pointer key={ index } className={ classNames('color-swatch rounded', ((color === selectedColor ) && 'active')) } onClick={ () => setSelectedColor(color) } style={ { backgroundColor: FurnitureDimmerUtilities.HTML_COLORS[index] } } />
);
}) }
</Grid> }

5
src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
View File

@ -1,8 +1,7 @@
import { GetGuestRoomResultEvent, RateFlatMessageComposer } from '@nitrots/nitro-renderer';
import classNames from 'classnames';
import { FC, useEffect, useState } from 'react';
import { CreateLinkEvent, GetRoomEngine, LocalizeText, SendMessageComposer } from '../../../../api';
import { Base, Column, Flex, Text, TransitionAnimation, TransitionAnimationTypes } from '../../../../common';
import { Base, classNames, Column, Flex, Text, TransitionAnimation, TransitionAnimationTypes } from '../../../../common';
import { useMessageEvent, useNavigator, useRoom } from '../../../../hooks';
export const RoomToolsWidgetView: FC<{}> = props =>
@ -71,7 +70,7 @@ export const RoomToolsWidgetView: FC<{}> = props =>
<Flex className="nitro-room-tools-container" gap={ 2 }>
<Column center className="nitro-room-tools p-2">
<Base pointer title={ LocalizeText('room.settings.button.text') } className="icon icon-cog" onClick={ () => handleToolClick('settings') } />
<Base pointer title={ LocalizeText('room.zoom.button.text') } onClick={ () => handleToolClick('zoom') } className={ 'icon ' + classNames({ 'icon-zoom-less': !isZoomedIn, 'icon-zoom-more': isZoomedIn }) } />
<Base pointer title={ LocalizeText('room.zoom.button.text') } onClick={ () => handleToolClick('zoom') } className={ classNames('icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more')) } />
<Base pointer title={ LocalizeText('room.chathistory.button.text') } onClick={ () => handleToolClick('chat_history') } className="icon icon-chat-history" />
{ navigatorData.canRate &&
<Base pointer title={ LocalizeText('room.like.button.text') } onClick={ () => handleToolClick('like_room') } className="icon icon-like-room" /> }