Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MIRROR] Removes grid usage + heavy refactors #2853

Merged
merged 1 commit into from
Apr 13, 2024
Merged

[MIRROR] Removes grid usage + heavy refactors #2853

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 0 additions & 33 deletions tgui/packages/tgui/components/Grid.jsx
View file
Open in desktop

This file was deleted.

44 changes: 44 additions & 0 deletions tgui/packages/tgui/components/Grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
/**
* @file
* @copyright 2020 Aleksej Komarov
* @license MIT
*/

import { PropsWithChildren } from 'react';

import { logger } from '../logging';
import { BoxProps } from './Box';
import { Table } from './Table';

/** @deprecated Do not use. Use stack instead. */
export function Grid(props: PropsWithChildren<BoxProps>) {
const { children, ...rest } = props;
logger.error('Grid component is deprecated. Use a Stack instead.');
return (
<Table {...rest}>
<Table.Row>{children}</Table.Row>
</Table>
);
}

type Props = Partial<{
/** Width of the column in percentage. */
size: number;
}> &
BoxProps;

/** @deprecated Do not use. Use stack instead. */
export function GridColumn(props: Props) {
const { size = 1, style, ...rest } = props;
return (
<Table.Cell
style={{
width: size + '%',
...style,
}}
{...rest}
/>
);
}

Grid.Column = GridColumn;
2 changes: 2 additions & 0 deletions tgui/packages/tgui/components/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,8 @@ type CellProps = Partial<{
colSpan: number;
/** Whether this is a header cell. */
header: boolean;
/** Rows for this cell to expand, assuming there is room. */
rowSpan: number;
}> &
BoxProps;

Expand Down
264 changes: 138 additions & 126 deletions tgui/packages/tgui/interfaces/AirlockElectronics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,31 @@
import { BooleanLike } from 'common/react';

import { useBackend } from '../backend';
import { Button, Input, LabeledList, Section } from '../components';
import { Button, Input, LabeledList, Section, Stack } from '../components';
import { Window } from '../layouts';
import { AccessConfig } from './common/AccessConfig';
import { AccessConfig, Region } from './common/AccessConfig';

type Data = {
accesses: string[];
oneAccess: BooleanLike;
unres_direction: number;
passedName: string;
passedCycleId: number;
regions: string[];
accesses: string[];
passedName: string;
regions: Region[];
shell: BooleanLike;
unres_direction: number;
};

export const AirLockMainSection = (props) => {
export function AirlockElectronics(props) {
return (
<Window width={420} height={485}>
<Window.Content>
<AirLockMainSection />
</Window.Content>
</Window>
);
}

export function AirLockMainSection(props) {
const { act, data } = useBackend<Data>();
const {
accesses = [],
Expand All @@ -28,123 +38,125 @@ export const AirLockMainSection = (props) => {
} = data;

return (
<Section title="Main">
<LabeledList>
<LabeledList.Item label="Integrated Circuit Shell">
<Button.Checkbox
content="Shell"
checked={shell}
onClick={() => {
act('set_shell', { on: !shell });
}}
tooltip="Whether this airlock can have an integrated circuit placed inside of it or not."
/>
</LabeledList.Item>
<LabeledList.Item label="Access Required">
<Button
icon={oneAccess ? 'unlock' : 'lock'}
content={oneAccess ? 'One' : 'All'}
onClick={() => act('one_access')}
/>
</LabeledList.Item>
<LabeledList.Item label="Unrestricted Access">
<Button
icon={unres_direction & 1 ? 'check-square-o' : 'square-o'}
content="North"
selected={unres_direction & 1}
onClick={() =>
act('direc_set', {
unres_direction: '1',
})
}
/>
<Button
icon={unres_direction & 2 ? 'check-square-o' : 'square-o'}
content="South"
selected={unres_direction & 2}
onClick={() =>
act('direc_set', {
unres_direction: '2',
})
}
/>
<Button
icon={unres_direction & 4 ? 'check-square-o' : 'square-o'}
content="East"
selected={unres_direction & 4}
onClick={() =>
act('direc_set', {
unres_direction: '4',
})
}
/>
<Button
icon={unres_direction & 8 ? 'check-square-o' : 'square-o'}
content="West"
selected={unres_direction & 8}
onClick={() =>
act('direc_set', {
unres_direction: '8',
})
}
/>
</LabeledList.Item>
<LabeledList.Item label="Airlock Name">
<Input
fluid
maxLength={30}
value={passedName}
onChange={(e, value) =>
act('passedName', {
passedName: value,
})
}
/>
</LabeledList.Item>
<LabeledList.Item label="Cycling Id">
<Input
fluid
maxLength={30}
value={passedCycleId}
onChange={(e, value) =>
act('passedCycleId', {
passedCycleId: value,
})
}
/>
</LabeledList.Item>
</LabeledList>
<AccessConfig
accesses={regions}
selectedList={accesses}
accessMod={(ref) =>
act('set', {
access: ref,
})
}
grantAll={() => act('grant_all')}
denyAll={() => act('clear_all')}
grantDep={(ref) =>
act('grant_region', {
region: ref,
})
}
denyDep={(ref) =>
act('deny_region', {
region: ref,
})
}
/>
</Section>
);
};

export const AirlockElectronics = (props) => {
return (
<Window width={420} height={485}>
<Window.Content>
<AirLockMainSection />
</Window.Content>
</Window>
<Stack fill vertical>
<Stack.Item>
<Section fill>
<LabeledList>
<LabeledList.Item label="Integrated Circuit Shell">
<Button.Checkbox
checked={shell}
onClick={() => {
act('set_shell', { on: !shell });
}}
tooltip="Whether this airlock can have an integrated circuit placed inside of it or not."
>
Shell
</Button.Checkbox>
</LabeledList.Item>
<LabeledList.Item label="Access Required">
<Button
icon={oneAccess ? 'unlock' : 'lock'}
onClick={() => act('one_access')}
>
{oneAccess ? 'One' : 'All'}
</Button>
</LabeledList.Item>
<LabeledList.Item label="Unrestricted Access">
<Button
icon={unres_direction & 1 ? 'check-square-o' : 'square-o'}
selected={unres_direction & 1}
onClick={() =>
act('direc_set', {
unres_direction: '1',
})
}
>
North
</Button>
<Button
icon={unres_direction & 2 ? 'check-square-o' : 'square-o'}
selected={unres_direction & 2}
onClick={() =>
act('direc_set', {
unres_direction: '2',
})
}
>
South
</Button>
<Button
icon={unres_direction & 4 ? 'check-square-o' : 'square-o'}
selected={unres_direction & 4}
onClick={() =>
act('direc_set', {
unres_direction: '4',
})
}
>
East
</Button>
<Button
icon={unres_direction & 8 ? 'check-square-o' : 'square-o'}
selected={unres_direction & 8}
onClick={() =>
act('direc_set', {
unres_direction: '8',
})
}
>
West
</Button>
</LabeledList.Item>
<LabeledList.Item label="Airlock Name">
<Input
fluid
maxLength={30}
value={passedName}
onChange={(e, value) =>
act('passedName', {
passedName: value,
})
}
/>
</LabeledList.Item>
<LabeledList.Item label="Cycling Id">
<Input
fluid
maxLength={30}
value={passedCycleId}
onChange={(e, value) =>
act('passedCycleId', {
passedCycleId: value,
})
}
/>
</LabeledList.Item>
</LabeledList>
</Section>
</Stack.Item>
<Stack.Item grow>
<AccessConfig
accesses={regions}
selectedList={accesses}
accessMod={(ref) =>
act('set', {
access: ref,
})
}
grantAll={() => act('grant_all')}
denyAll={() => act('clear_all')}
grantDep={(ref) =>
act('grant_region', {
region: ref,
})
}
denyDep={(ref) =>
act('deny_region', {
region: ref,
})
}
/>
</Stack.Item>
</Stack>
);
};
}
8 changes: 4 additions & 4 deletions tgui/packages/tgui/interfaces/CircuitAccessChecker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ import { BooleanLike } from 'common/react';
import { useBackend } from '../backend';
import { Button, LabeledList } from '../components';
import { Window } from '../layouts';
import { AccessConfig } from './common/AccessConfig';
import { AccessConfig, Region } from './common/AccessConfig';

type Data = {
oneAccess: BooleanLike;
regions: string[];
regions: Region[];
accesses: string[];
};

Expand All @@ -28,8 +28,8 @@ export const CircuitAccessChecker = (props) => {
</LabeledList.Item>
</LabeledList>
<AccessConfig
accesses={regions || []}
selectedList={accesses || []}
accesses={regions}
selectedList={accesses}
accessMod={(ref) =>
act('set', {
access: ref,
Expand Down
Loading
Loading