duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-20 07:26:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Polish wired editor UI and variable handling

Browse Source
This commit is contained in:
Lorenzune
2026-04-08 16:18:16 +02:00
parent 0ebd37d91b
commit 5e9e3e1e4c
22 changed files with 926 additions and 1029 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wired/views/WiredBaseView.tsx
+42 -50
View File
@@ -1,6 +1,8 @@
import { GetRoomEngine, GetSessionDataManager } from '@nitrots/nitro-renderer';
import { CSSProperties, FC, PropsWithChildren, ReactNode, useEffect, useState } from 'react';
import { LocalizeText, WiredFurniType, WiredSelectionVisualizer } from '../../../api';
import wiredBgLeft from '../../../assets/images/wired/wired_bg_left.png';
import wiredBgRight from '../../../assets/images/wired/wired_bg_right.png';
import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
import { useWired, useWiredTools } from '../../../hooks';
import { WiredFurniSelectorView } from './WiredFurniSelectorView';
@@ -20,6 +22,7 @@ export interface WiredBaseViewProps
export const WiredBaseView: FC<PropsWithChildren<WiredBaseViewProps>> = props =>
{
const WIRED_CARD_WIDTH = 244;
const { wiredType = '', requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, validate = null, children = null, hasSpecialInput = false, cardStyle = undefined, footer = null, footerCollapsible = true, selectionPreview = null } = props;
const [ wiredName, setWiredName ] = useState<string>(null);
const [ needsSave, setNeedsSave ] = useState<boolean>(false);
@@ -122,64 +125,53 @@ export const WiredBaseView: FC<PropsWithChildren<WiredBaseViewProps>> = props =>
const resolvedCardStyle: CSSProperties = { ...cardStyle };
if(resolvedCardStyle.width !== undefined)
{
if(typeof resolvedCardStyle.width === 'number')
{
resolvedCardStyle.maxWidth = Math.min(resolvedCardStyle.width, 324);
}
else if(typeof resolvedCardStyle.width === 'string')
{
const match = resolvedCardStyle.width.trim().match(/^(\d+(?:\.\d+)?)px$/i);
resolvedCardStyle.maxWidth = match ? `${ Math.min(parseFloat(match[1]), 324) }px` : resolvedCardStyle.width;
}
delete resolvedCardStyle.width;
}
if(resolvedCardStyle.minWidth === undefined) resolvedCardStyle.minWidth = 216;
if(resolvedCardStyle.maxWidth === undefined) resolvedCardStyle.maxWidth = 'min(90vw, 324px)';
resolvedCardStyle.width = WIRED_CARD_WIDTH;
resolvedCardStyle.minWidth = WIRED_CARD_WIDTH;
resolvedCardStyle.maxWidth = WIRED_CARD_WIDTH;
resolvedCardStyle.resize = 'none';
return (
<NitroCardView className="nitro-wired" theme="primary-slim" uniqueKey="nitro-wired" isResizable={ false } style={ resolvedCardStyle }>
<NitroCardHeaderView classNames={ [ 'nitro-wired__header' ] } headerText={ LocalizeText('wiredfurni.title') } onCloseClick={ onClose } />
<NitroCardContentView classNames={ [ 'nitro-wired__content' ] } gap={ 2 }>
<NitroCardContentView classNames={ [ 'nitro-wired__content' ] } gap={ 0 }>
<div className="nitro-wired__section nitro-wired__summary">
<div className="flex items-center justify-center gap-1">
<i className={ `icon icon-wired-${ wiredType }` } />
<img className="nitro-wired__summary-bg nitro-wired__summary-bg--left" src={ wiredBgLeft } alt="" />
<img className="nitro-wired__summary-bg nitro-wired__summary-bg--right" src={ wiredBgRight } alt="" />
<div className="nitro-wired__summary-copy">
<Text bold className="nitro-wired__summary-title">{ wiredName }</Text>
</div>
</div>
{ !!children && <div className="nitro-wired__divider" /> }
{ !!children && <div className="nitro-wired__section nitro-wired__section--body">{ children }</div> }
{ (requiresFurni > WiredFurniType.STUFF_SELECTION_OPTION_NONE) &&
<>
<div className="nitro-wired__divider" />
<div className="nitro-wired__section nitro-wired__section--selector">
{ selectionPreview || <WiredFurniSelectorView /> }
</div>
</> }
{ footer &&
<>
<div className="nitro-wired__divider" />
<div className="nitro-wired__section nitro-wired__section--footer">
{ footerCollapsible
? (
<>
<button className="nitro-wired__advanced-toggle" type="button" onClick={ () => setShowFooter(value => !value) }>
{ LocalizeText(showFooter ? 'wiredfurni.params.sources.collapse' : 'wiredfurni.params.sources.expand') }
</button>
{ showFooter && <div className="nitro-wired__advanced-body">{ footer }</div> }
</>
)
: footer }
</div>
</> }
<div className="nitro-wired__divider" />
<div className="flex items-center gap-1 nitro-wired__actions">
<Button disabled={ !roomSettings.canModify } fullWidth variant="success" classNames={ [ 'nitro-wired__button', 'nitro-wired__button--primary' ] } onClick={ onSave }>{ LocalizeText('wiredfurni.ready') }</Button>
<Button fullWidth variant="secondary" classNames={ [ 'nitro-wired__button', 'nitro-wired__button--secondary' ] } onClick={ onClose }>{ LocalizeText('cancel') }</Button>
<div className="nitro-wired__body">
{ !!children && <div className="nitro-wired__divider" /> }
{ !!children && <div className="nitro-wired__section nitro-wired__section--body">{ children }</div> }
{ (requiresFurni > WiredFurniType.STUFF_SELECTION_OPTION_NONE) &&
<>
<div className="nitro-wired__divider" />
<div className="nitro-wired__section nitro-wired__section--selector">
{ selectionPreview || <WiredFurniSelectorView /> }
</div>
</> }
{ footer &&
<>
<div className="nitro-wired__divider" />
<div className="nitro-wired__section nitro-wired__section--footer">
{ footerCollapsible
? (
<>
<button className="nitro-wired__advanced-toggle" type="button" onClick={ () => setShowFooter(value => !value) }>
{ LocalizeText(showFooter ? 'wiredfurni.params.sources.collapse' : 'wiredfurni.params.sources.expand') }
</button>
{ showFooter && <div className="nitro-wired__advanced-body">{ footer }</div> }
</>
)
: footer }
</div>
</> }
<div className="nitro-wired__divider" />
<div className="flex items-center gap-1 nitro-wired__actions">
<Button disabled={ !roomSettings.canModify } fullWidth variant="success" classNames={ [ 'nitro-wired__button', 'nitro-wired__button--primary' ] } onClick={ onSave }>{ LocalizeText('wiredfurni.ready') }</Button>
<Button fullWidth variant="secondary" classNames={ [ 'nitro-wired__button', 'nitro-wired__button--secondary' ] } onClick={ onClose }>{ LocalizeText('cancel') }</Button>
</div>
</div>
</NitroCardContentView>
</NitroCardView>