nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 11:23:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Wired layout changes

Browse Source
This commit is contained in:
Bill 2022-01-12 23:54:46 -05:00
parent 2955149200
commit 9c77ee70b2
4 changed files with 37 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/wired/WiredView.scss
View File

@ -1,6 +1,5 @@
.nitro-wired { .nitro-wired {
width: 300px; width: 300px;
padding:7px;
.icon { .icon {
background-repeat: no-repeat; background-repeat: no-repeat;

6
src/components/wired/WiredView.tsx
View File

@ -1,5 +1,6 @@
import { ConditionDefinition, Triggerable, TriggerDefinition, UpdateActionMessageComposer, UpdateConditionMessageComposer, UpdateTriggerMessageComposer, WiredActionDefinition } from '@nitrots/nitro-renderer'; import { ConditionDefinition, Triggerable, TriggerDefinition, UpdateActionMessageComposer, UpdateConditionMessageComposer, UpdateTriggerMessageComposer, WiredActionDefinition } from '@nitrots/nitro-renderer';
import { FC, useCallback, useMemo, useState } from 'react'; import { FC, useCallback, useMemo, useState } from 'react';
import { IsOwnerOfFloorFurniture } from '../../api';
import { WiredEvent } from '../../events'; import { WiredEvent } from '../../events';
import { useUiEvent } from '../../hooks/events'; import { useUiEvent } from '../../hooks/events';
import { SendMessageHook } from '../../hooks/messages'; import { SendMessageHook } from '../../hooks/messages';
@ -22,7 +23,10 @@ export const WiredView: FC<{}> = props =>
const onWiredEvent = useCallback((event: WiredEvent) => const onWiredEvent = useCallback((event: WiredEvent) =>
{ {
// check if owner & warn with confirm if(!IsOwnerOfFloorFurniture(trigger.id))
{
}
if(trigger instanceof WiredActionDefinition) if(trigger instanceof WiredActionDefinition)
{ {

50
src/components/wired/views/WiredBaseView.tsx
View File

@ -1,8 +1,12 @@
import { FC, useCallback, useEffect, useState } from 'react'; import { FC, useCallback, useEffect, useState } from 'react';
import { GetSessionDataManager, LocalizeText } from '../../../api'; import { GetSessionDataManager, LocalizeText } from '../../../api';
import { Button } from '../../../common/Button';
import { Column } from '../../../common/Column';
import { Flex } from '../../../common/Flex';
import { Text } from '../../../common/Text';
import { WiredEvent } from '../../../events'; import { WiredEvent } from '../../../events';
import { dispatchUiEvent } from '../../../hooks/events'; import { dispatchUiEvent } from '../../../hooks/events';
import { NitroCardContentView, NitroCardView } from '../../../layout'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../layout';
import { WiredFurniType } from '../common/WiredFurniType'; import { WiredFurniType } from '../common/WiredFurniType';
import { WiredSelectionVisualizer } from '../common/WiredSelectionVisualizer'; import { WiredSelectionVisualizer } from '../common/WiredSelectionVisualizer';
import { useWiredContext } from '../context/WiredContext'; import { useWiredContext } from '../context/WiredContext';
@ -13,11 +17,12 @@ export interface WiredBaseViewProps
wiredType: string; wiredType: string;
requiresFurni: number; requiresFurni: number;
save: () => void; save: () => void;
validate?: () => boolean;
} }
export const WiredBaseView: FC<WiredBaseViewProps> = props => export const WiredBaseView: FC<WiredBaseViewProps> = props =>
{ {
const { wiredType = '', requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, children = null } = props; const { wiredType = '', requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, validate = null, children = null } = props;
const [ wiredName, setWiredName ] = useState<string>(null); const [ wiredName, setWiredName ] = useState<string>(null);
const [ wiredDescription, setWiredDescription ] = useState<string>(null); const [ wiredDescription, setWiredDescription ] = useState<string>(null);
const { trigger = null, setTrigger = null, setIntParams = null, setStringParam = null, setFurniIds = null } = useWiredContext(); const { trigger = null, setTrigger = null, setIntParams = null, setStringParam = null, setFurniIds = null } = useWiredContext();
@ -60,10 +65,12 @@ export const WiredBaseView: FC<WiredBaseViewProps> = props =>
const onSave = useCallback(() => const onSave = useCallback(() =>
{ {
if(validate && !validate()) return;
if(save) save(); if(save) save();
setTimeout(() => dispatchUiEvent(new WiredEvent(WiredEvent.SAVE_WIRED)), 1); setTimeout(() => dispatchUiEvent(new WiredEvent(WiredEvent.SAVE_WIRED)), 1);
}, [ save ]); }, [ save, validate ]);
const close = useCallback(() => const close = useCallback(() =>
{ {
@ -71,34 +78,27 @@ export const WiredBaseView: FC<WiredBaseViewProps> = props =>
}, [ setTrigger ]); }, [ setTrigger ]);
return ( return (
<NitroCardView className={`nitro-wired nitro-wired-${wiredType} ` + (wiredType === 'trigger' ? 'rounded-0' : 'rounded-2')}> <NitroCardView uniqueKey="nitro-wired" className="nitro-wired" simple={ true }>
<div className="nitro-wired-header d-flex"> <NitroCardHeaderView headerText={ LocalizeText('wiredfurni.title') } onCloseClick={ close } />
<div className="nitro-wired-title rounded-start w-100 drag-handler">{ LocalizeText('wiredfurni.title') }</div>
<div className="nitro-wired-close rounded-end flex-shrink-0" onClick={ close }>
<i className="fas fa-times" />
</div>
</div>
<NitroCardContentView> <NitroCardContentView>
<div className="d-flex align-items-center"> <Column gap={ 1 }>
<i className={ `me-2 flex-shrink-0 icon icon-wired-${ wiredType }` } /> <Flex alignItems="center" gap={ 1 }>
<div className="fw-bold">{ wiredName }</div> <i className={ `icon icon-wired-${ wiredType }` } />
</div> <Text bold>{ wiredName }</Text>
<div>{ wiredDescription }</div> </Flex>
<div> <Text small>{ wiredDescription }</Text>
{ !children ? null : <> </Column>
<hr className="my-1 mb-2 bg-dark" /> { (children !== null) && <hr className="m-0 bg-dark" /> }
{ children } { children }
</> }
</div>
{ (requiresFurni > WiredFurniType.STUFF_SELECTION_OPTION_NONE) && { (requiresFurni > WiredFurniType.STUFF_SELECTION_OPTION_NONE) &&
<> <>
<hr className="my-1 mb-2 bg-dark" /> <hr className="m-0 bg-dark" />
<WiredFurniSelectorView /> <WiredFurniSelectorView />
</> } </> }
<div className="d-flex mt-3"> <Flex gap={ 1 }>
<button className="btn btn-sm btn-success me-2 w-100" onClick={ onSave }>{ LocalizeText('wiredfurni.ready') }</button> <Button fullWidth variant="success" onClick={ onSave }>{ LocalizeText('wiredfurni.ready') }</Button>
<button className="btn btn-sm btn-secondary w-100" onClick={ close }>{ LocalizeText('cancel') }</button> <Button fullWidth variant="secondary" onClick={ close }>{ LocalizeText('cancel') }</Button>
</div> </Flex>
</NitroCardContentView> </NitroCardContentView>
</NitroCardView> </NitroCardView>
); );

10
src/components/wired/views/WiredFurniSelectorView.tsx
View File

@ -1,5 +1,7 @@
import { FC, useCallback, useEffect } from 'react'; import { FC, useCallback, useEffect } from 'react';
import { LocalizeText } from '../../../api'; import { LocalizeText } from '../../../api';
import { Column } from '../../../common/Column';
import { Text } from '../../../common/Text';
import { WiredSelectObjectEvent } from '../../../events'; import { WiredSelectObjectEvent } from '../../../events';
import { useUiEvent } from '../../../hooks/events'; import { useUiEvent } from '../../../hooks/events';
import { WiredSelectionVisualizer } from '../common/WiredSelectionVisualizer'; import { WiredSelectionVisualizer } from '../common/WiredSelectionVisualizer';
@ -75,9 +77,9 @@ export const WiredFurniSelectorView: FC<{}> = props =>
}, [ trigger, setFurniIds ]); }, [ trigger, setFurniIds ]);
return ( return (
<div className="d-flex flex-column"> <Column gap={ 1 }>
<div className="fw-bold">{ LocalizeText('wiredfurni.pickfurnis.caption', ['count', 'limit'], [ furniIds.length.toString(), trigger.maximumItemSelectionCount.toString() ]) }</div> <Text bold>{ LocalizeText('wiredfurni.pickfurnis.caption', ['count', 'limit'], [ furniIds.length.toString(), trigger.maximumItemSelectionCount.toString() ]) }</Text>
{ LocalizeText('wiredfurni.pickfurnis.desc') } <Text small>{ LocalizeText('wiredfurni.pickfurnis.desc') }</Text>
</div> </Column>
); );
} }