{nodes}
);
};
-export const ListOfButtonsWithLinkEvent = () => {
- const nodes: JSX.Element[] = [];
- for (let i = 0; i < 100; i++) {
- const node = (
-
- );
- nodes.push(node);
- }
- render({nodes}
);
-};
-
export const ListOfButtonsWithIcons = () => {
const nodes: JSX.Element[] = [];
for (let i = 0; i < 100; i++) {
diff --git a/tgui/packages/tgui-bench/tests/DisposalBin.test.tsx b/tgui/packages/tgui-bench/tests/DisposalBin.test.tsx
index 5ac9965c76..63093f42f7 100644
--- a/tgui/packages/tgui-bench/tests/DisposalBin.test.tsx
+++ b/tgui/packages/tgui-bench/tests/DisposalBin.test.tsx
@@ -1,22 +1,19 @@
-import { StoreProvider, configureStore } from 'tgui/store';
-
+import { backendUpdate, setGlobalStore } from 'tgui/backend';
import { DisposalBin } from 'tgui/interfaces/DisposalBin';
-import { backendUpdate } from 'tgui/backend';
import { createRenderer } from 'tgui/renderer';
+import { configureStore } from 'tgui/store';
const store = configureStore({ sideEffects: false });
const renderUi = createRenderer((dataJson: string) => {
+ setGlobalStore(store);
+
store.dispatch(
backendUpdate({
data: Byond.parseJson(dataJson),
- })
- );
- return (
-
- {this.props.children}
-
- );
- }
-}
+ return (
+
+ {props.children}
+
+ );
+};
diff --git a/tgui/packages/tgui/components/Blink.jsx b/tgui/packages/tgui/components/Blink.jsx
index bd781336b4..dc12f84346 100644
--- a/tgui/packages/tgui/components/Blink.jsx
+++ b/tgui/packages/tgui/components/Blink.jsx
@@ -1,11 +1,11 @@
-import { Component } from 'inferno';
+import { Component } from 'react';
const DEFAULT_BLINKING_INTERVAL = 1000;
const DEFAULT_BLINKING_TIME = 1000;
export class Blink extends Component {
- constructor() {
- super();
+ constructor(props) {
+ super(props);
this.state = {
hidden: false,
};
@@ -55,13 +55,14 @@ export class Blink extends Component {
clearTimeout(this.timer);
}
- render(props) {
+ render() {
return (
- {props.children}
+ }}
+ >
+ {this.props.children}
);
}
diff --git a/tgui/packages/tgui/components/BlockQuote.jsx b/tgui/packages/tgui/components/BlockQuote.tsx
similarity index 71%
rename from tgui/packages/tgui/components/BlockQuote.jsx
rename to tgui/packages/tgui/components/BlockQuote.tsx
index 8c0f53a46a..3c627d3fac 100644
--- a/tgui/packages/tgui/components/BlockQuote.jsx
+++ b/tgui/packages/tgui/components/BlockQuote.tsx
@@ -5,9 +5,11 @@
*/
import { classes } from 'common/react';
-import { Box } from './Box';
-export const BlockQuote = (props) => {
+import { Box, BoxProps } from './Box';
+
+export function BlockQuote(props: BoxProps) {
const { className, ...rest } = props;
+
return {
return;
}
}}
- {...computeBoxProps(rest)}>
+ {...computeBoxProps(rest)}
+ >
{
className,
])}
{...rest}
- onClick={disabled ? undefined : onClick}
- onmouseover={onMouseOver}>
+ onClick={disabled ? () => null : onClick}
+ onMouseOver={onMouseOver}
+ >
{display}
{open && (
)}
@@ -126,7 +130,7 @@ type MenuBarItemProps = {
entry: string;
children: any;
openWidth: string;
- display: InfernoNode;
+ display: ReactNode;
setOpenMenuBar: (entry: string | null) => void;
openMenuBar: string | null;
setOpenOnHover: (flag: boolean) => void;
@@ -169,7 +173,8 @@ export const Dropdown = (props: MenuBarItemProps) => {
if (openOnHover) {
setOpenMenuBar(entry);
}
- }}>
+ }}
+ >
{children}
);
@@ -185,7 +190,8 @@ const MenuItemToggle = (props) => {
'MenuBar__MenuItemToggle',
'MenuBar__hover',
])}
- onClick={() => onClick(value)}>
+ onClick={() => onClick(value)}
+ >
{children}
@@ -210,7 +213,7 @@ const NanoMapZoomer = (props, context) => {
selected={~~level === ~~config.mapZLevel}
content={level}
onClick={() => {
- act('setZLevel', { 'mapZLevel': level });
+ act('setZLevel', { mapZLevel: level });
}}
/>
))}
diff --git a/tgui/packages/tgui/components/NoticeBox.jsx b/tgui/packages/tgui/components/NoticeBox.jsx
deleted file mode 100644
index 1c3b49b16a..0000000000
--- a/tgui/packages/tgui/components/NoticeBox.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { classes, pureComponentHooks } from 'common/react';
-import { Box } from './Box';
-
-export const NoticeBox = (props) => {
- const { className, color, info, warning, success, danger, ...rest } = props;
- return (
- & {
+ info: boolean;
+ })
+ | (Omit & {
+ success: boolean;
+ })
+ | (Omit & {
+ danger: boolean;
+ });
+
+export function NoticeBox(props: Props) {
+ const { className, color, info, success, danger, ...rest } = props;
+
+ return (
+
{icon && iconPosition !== 'right' && (
{
return buttonContent;
};
-Button.defaultHooks = pureComponentHooks;
-
export const ButtonCheckbox = (props) => {
const { checked, ...rest } = props;
return (
@@ -153,8 +138,8 @@ export const ButtonCheckbox = (props) => {
Button.Checkbox = ButtonCheckbox;
export class ButtonConfirm extends Component {
- constructor() {
- super();
+ constructor(props) {
+ super(props);
this.state = {
clickedOnce: false,
};
@@ -204,8 +189,8 @@ export class ButtonConfirm extends Component {
Button.Confirm = ButtonConfirm;
export class ButtonInput extends Component {
- constructor() {
- super();
+ constructor(props) {
+ super(props);
this.inputRef = createRef();
this.state = {
inInput: false,
@@ -267,15 +252,16 @@ export class ButtonInput extends Component {
'Button--color--' + color,
])}
{...rest}
- onClick={() => this.setInInput(true)}>
+ onClick={() => this.setInInput(true)}
+ >
{icon && {
+ ref: RefObject;
+ state: State;
+
+ constructor(props: Props) {
super(props);
this.ref = createRef();
this.state = {
// Initial guess
viewBox: [600, 200],
};
- this.handleResize = () => {
- const element = this.ref.current;
- this.setState({
- viewBox: [element.offsetWidth, element.offsetHeight],
- });
- };
+ this.handleResize = this.handleResize.bind(this);
}
componentDidMount() {
@@ -65,6 +91,16 @@ class LineChart extends Component {
window.removeEventListener('resize', this.handleResize);
}
+ handleResize = () => {
+ const element = this.ref.current;
+ if (!element) {
+ return;
+ }
+ this.setState({
+ viewBox: [element.offsetWidth, element.offsetHeight],
+ });
+ };
+
render() {
const {
data = [],
@@ -87,41 +123,37 @@ class LineChart extends Component {
normalized.push([-strokeWidth, first[1]]);
}
const points = dataToPolylinePoints(normalized);
+ const divProps = { ...rest, className: '', ref: this.ref };
+
return (
- {(props) => (
-
+
+
);
}
}
-LineChart.defaultHooks = pureComponentHooks;
-
-const Stub = (props) => null;
-
-// IE8: No inline svg support
export const Chart = {
- Line: Byond.IS_LTE_IE8 ? Stub : LineChart,
+ Line: LineChart,
};
diff --git a/tgui/packages/tgui/components/Collapsible.jsx b/tgui/packages/tgui/components/Collapsible.jsx
deleted file mode 100644
index f91eeddb45..0000000000
--- a/tgui/packages/tgui/components/Collapsible.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { Component } from 'inferno';
-import { Box } from './Box';
-import { Button } from './Button';
-
-export class Collapsible extends Component {
- constructor(props) {
- super(props);
- const { open } = props;
- this.state = {
- open: open || false,
- };
- }
-
- render() {
- const { props } = this;
- const { open } = this.state;
- const { children, color = 'default', title, buttons, ...rest } = props;
- return (
-
- {children} }
-
- );
- }
-}
diff --git a/tgui/packages/tgui/components/Collapsible.tsx b/tgui/packages/tgui/components/Collapsible.tsx
new file mode 100644
index 0000000000..b470ed5ce6
--- /dev/null
+++ b/tgui/packages/tgui/components/Collapsible.tsx
@@ -0,0 +1,44 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { ReactNode, useState } from 'react';
+
+import { Box, BoxProps } from './Box';
+import { Button } from './Button';
+
+type Props = Partial<{
+ buttons: ReactNode;
+ open: boolean;
+ title: ReactNode;
+}> &
+ BoxProps;
+
+export function Collapsible(props: Props) {
+ const { children, color, title, buttons, ...rest } = props;
+ const [open, setOpen] = useState(props.open);
+
+ return (
+
+ {children} }
+
+ );
+}
diff --git a/tgui/packages/tgui/components/ColorBox.jsx b/tgui/packages/tgui/components/ColorBox.jsx
deleted file mode 100644
index a6203ca469..0000000000
--- a/tgui/packages/tgui/components/ColorBox.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { classes, pureComponentHooks } from 'common/react';
-import { computeBoxClassName, computeBoxProps } from './Box';
-
-export const ColorBox = (props) => {
- // prettier-ignore
- const {
- content,
- children,
- className,
- color,
- backgroundColor,
- ...rest
- } = props;
- rest.color = content ? null : 'transparent';
- rest.backgroundColor = color || backgroundColor;
- return (
-
+
);
-};
+}
diff --git a/tgui/packages/tgui/components/Divider.jsx b/tgui/packages/tgui/components/Divider.tsx
similarity index 66%
rename from tgui/packages/tgui/components/Divider.jsx
rename to tgui/packages/tgui/components/Divider.tsx
index 8cbf9b77d7..1582aeadfd 100644
--- a/tgui/packages/tgui/components/Divider.jsx
+++ b/tgui/packages/tgui/components/Divider.tsx
@@ -6,8 +6,14 @@
import { classes } from 'common/react';
-export const Divider = (props) => {
- const { vertical, hidden } = props;
+type Props = Partial<{
+ hidden: boolean;
+ vertical: boolean;
+}>;
+
+export function Divider(props: Props) {
+ const { hidden, vertical } = props;
+
return (
;
-};
+} & PropsWithChildren;
type State = {
fontSize: number;
@@ -19,8 +25,8 @@ export class FitText extends Component {
fontSize: 0,
};
- constructor() {
- super();
+ constructor(props: Props) {
+ super(props);
this.resize = this.resize.bind(this);
@@ -80,10 +86,12 @@ export class FitText extends Component {
+ fontSize: `${this.state.fontSize}px`,
+ ...(typeof this.props.native?.style === 'object'
+ ? this.props.native.style
+ : {}),
+ }}
+ >
{this.props.children}
);
diff --git a/tgui/packages/tgui/components/Flex.tsx b/tgui/packages/tgui/components/Flex.tsx
index f67738280b..50dba27795 100644
--- a/tgui/packages/tgui/components/Flex.tsx
+++ b/tgui/packages/tgui/components/Flex.tsx
@@ -4,16 +4,20 @@
* @license MIT
*/
-import { BooleanLike, classes, pureComponentHooks } from 'common/react';
+import { classes } from 'common/react';
+
import { BoxProps, computeBoxClassName, computeBoxProps, unit } from './Box';
-export type FlexProps = BoxProps & {
- direction?: string | BooleanLike;
- wrap?: string | BooleanLike;
- align?: string | BooleanLike;
- justify?: string | BooleanLike;
- inline?: BooleanLike;
-};
+export type FlexProps = Partial<{
+ align: string | boolean;
+ direction: string;
+ inline: boolean;
+ justify: string;
+ scrollable: boolean;
+ style: Partial;
+ wrap: string | boolean;
+}> &
+ BoxProps;
export const computeFlexClassName = (props: FlexProps) => {
return classes([
@@ -27,13 +31,14 @@ export const computeFlexClassName = (props: FlexProps) => {
export const computeFlexProps = (props: FlexProps) => {
const { className, direction, wrap, align, justify, inline, ...rest } = props;
+
return computeBoxProps({
style: {
...rest.style,
- 'flex-direction': direction,
- 'flex-wrap': wrap === true ? 'wrap' : wrap,
- 'align-items': align,
- 'justify-content': justify,
+ flexDirection: direction,
+ flexWrap: wrap === true ? 'wrap' : wrap,
+ alignItems: align,
+ justifyContent: justify,
},
...rest,
});
@@ -49,15 +54,15 @@ export const Flex = (props) => {
);
};
-Flex.defaultHooks = pureComponentHooks;
-
-export type FlexItemProps = BoxProps & {
- grow?: number;
- order?: number;
- shrink?: number;
- basis?: string | BooleanLike;
- align?: string | BooleanLike;
-};
+export type FlexItemProps = BoxProps &
+ Partial<{
+ grow: number | boolean;
+ order: number;
+ shrink: number | boolean;
+ basis: string | number;
+ align: string | boolean;
+ style: Partial;
+ }>;
export const computeFlexItemClassName = (props: FlexItemProps) => {
return classes([
@@ -68,33 +73,26 @@ export const computeFlexItemClassName = (props: FlexItemProps) => {
};
export const computeFlexItemProps = (props: FlexItemProps) => {
- // prettier-ignore
- const {
- className,
- style,
- grow,
- order,
- shrink,
- basis,
- align,
- ...rest
- } = props;
- // prettier-ignore
- const computedBasis = basis
+ const { className, style, grow, order, shrink, basis, align, ...rest } =
+ props;
+
+ const computedBasis =
+ basis ??
// IE11: Set basis to specified width if it's known, which fixes certain
// bugs when rendering tables inside the flex.
- ?? props.width
+ props.width ??
// If grow is used, basis should be set to 0 to be consistent with
// flex css shorthand `flex: 1`.
- ?? (grow !== undefined ? 0 : undefined);
+ (grow !== undefined ? 0 : undefined);
+
return computeBoxProps({
style: {
...style,
- 'flex-grow': grow !== undefined && Number(grow),
- 'flex-shrink': shrink !== undefined && Number(shrink),
- 'flex-basis': unit(computedBasis),
- 'order': order,
- 'align-self': align,
+ flexGrow: grow !== undefined && Number(grow),
+ flexShrink: shrink !== undefined && Number(shrink),
+ flexBasis: unit(computedBasis),
+ order: order,
+ alignSelf: align,
},
...rest,
});
@@ -110,6 +108,4 @@ const FlexItem = (props) => {
);
};
-FlexItem.defaultHooks = pureComponentHooks;
-
Flex.Item = FlexItem;
diff --git a/tgui/packages/tgui/components/Grid.jsx b/tgui/packages/tgui/components/Grid.jsx
index 7ad3fd1dfd..f5593c9e00 100644
--- a/tgui/packages/tgui/components/Grid.jsx
+++ b/tgui/packages/tgui/components/Grid.jsx
@@ -5,7 +5,6 @@
*/
import { Table } from './Table';
-import { pureComponentHooks } from 'common/react';
/** @deprecated */
export const Grid = (props) => {
@@ -17,8 +16,6 @@ export const Grid = (props) => {
);
};
-Grid.defaultHooks = pureComponentHooks;
-
/** @deprecated */
export const GridColumn = (props) => {
const { size = 1, style, ...rest } = props;
@@ -33,6 +30,4 @@ export const GridColumn = (props) => {
);
};
-Grid.defaultHooks = pureComponentHooks;
-
Grid.Column = GridColumn;
diff --git a/tgui/packages/tgui/components/Icon.tsx b/tgui/packages/tgui/components/Icon.tsx
index da8b6af26a..cf0b55dfa8 100644
--- a/tgui/packages/tgui/components/Icon.tsx
+++ b/tgui/packages/tgui/components/Icon.tsx
@@ -6,40 +6,34 @@
* @license MIT
*/
-import { classes, pureComponentHooks } from 'common/react';
-import { InfernoNode } from 'inferno';
+import { BooleanLike, classes } from 'common/react';
+import { ReactNode } from 'react';
+
import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
const FA_OUTLINE_REGEX = /-o$/;
-type IconPropsUnique = {
- name: string;
- size?: number;
- spin?: boolean;
- className?: string;
- rotation?: number;
- style?: string | CSSProperties;
-};
+type IconPropsUnique = { name: string } & Partial<{
+ size: number;
+ spin: BooleanLike;
+ className: string;
+ rotation: number;
+ style: Partial;
+}>;
export type IconProps = IconPropsUnique & BoxProps;
export const Icon = (props: IconProps) => {
- let { style, ...restlet } = props;
- const { name, size, spin, className, rotation, ...rest } = restlet;
+ const { name, size, spin, className, rotation, ...rest } = props;
+ const customStyle = rest.style || {};
if (size) {
- if (!style) {
- style = {};
- }
- style['font-size'] = size * 100 + '%';
+ customStyle.fontSize = size * 100 + '%';
}
if (rotation) {
- if (!style) {
- style = {};
- }
- style['transform'] = `rotate(${rotation}deg)`;
+ customStyle.transform = `rotate(${rotation}deg)`;
}
- rest.style = style;
+ rest.style = customStyle;
const boxProps = computeBoxProps(rest);
@@ -75,10 +69,8 @@ export const Icon = (props: IconProps) => {
);
};
-Icon.defaultHooks = pureComponentHooks;
-
type IconStackUnique = {
- children: InfernoNode;
+ children: ReactNode;
className?: string;
};
@@ -88,8 +80,9 @@ export const IconStack = (props: IconStackProps) => {
const { className, children, ...rest } = props;
return (
+ className={classes(['IconStack', className, computeBoxClassName(rest)])}
+ {...computeBoxProps(rest)}
+ >
{children}
);
diff --git a/tgui/packages/tgui/components/Image.tsx b/tgui/packages/tgui/components/Image.tsx
new file mode 100644
index 0000000000..3e1519bfbb
--- /dev/null
+++ b/tgui/packages/tgui/components/Image.tsx
@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+
+import { BoxProps, computeBoxProps } from './Box';
+import { Tooltip } from './Tooltip';
+
+type Props = Partial<{
+ fixBlur: boolean; // true is default, this is an ie thing
+ objectFit: 'contain' | 'cover'; // fill is default
+ tooltip: ReactNode;
+}> &
+ IconUnion &
+ BoxProps;
+
+// at least one of these is required
+type IconUnion =
+ | {
+ className?: string;
+ src: string;
+ }
+ | {
+ className: string;
+ src?: string;
+ };
+
+/** Image component. Use this instead of Box as="img". */
+export const Image = (props: Props) => {
+ const {
+ className,
+ fixBlur = true,
+ objectFit = 'fill',
+ src,
+ tooltip,
+ ...rest
+ } = props;
+
+ const computedProps = computeBoxProps(rest);
+ computedProps['style'] = {
+ ...computedProps.style,
+ '-ms-interpolation-mode': fixBlur ? 'nearest-neighbor' : 'auto',
+ objectFit,
+ };
+
+ let content = 
;
+
+ if (tooltip) {
+ content = {content} ;
+ }
+
+ return content;
+};
diff --git a/tgui/packages/tgui/components/InfinitePlane.jsx b/tgui/packages/tgui/components/InfinitePlane.jsx
index 74f60f1e4d..5277f2ad79 100644
--- a/tgui/packages/tgui/components/InfinitePlane.jsx
+++ b/tgui/packages/tgui/components/InfinitePlane.jsx
@@ -1,8 +1,9 @@
+import { Component } from 'react';
+
import { computeBoxProps } from './Box';
-import { Stack } from './Stack';
-import { ProgressBar } from './ProgressBar';
import { Button } from './Button';
-import { Component } from 'inferno';
+import { ProgressBar } from './ProgressBar';
+import { Stack } from './Stack';
const ZOOM_MIN_VAL = 0.5;
const ZOOM_MAX_VAL = 1.5;
@@ -10,8 +11,8 @@ const ZOOM_MAX_VAL = 1.5;
const ZOOM_INCREMENT = 0.1;
export class InfinitePlane extends Component {
- constructor() {
- super();
+ constructor(props) {
+ super(props);
this.state = {
mouseDown: false,
@@ -139,30 +140,32 @@ export class InfinitePlane extends Component {
overflow: 'hidden',
position: 'relative',
},
- })}>
+ })}
+ >
+ maxValue={ZOOM_MAX_VAL}
+ >
{zoom}x
diff --git a/tgui/packages/tgui/components/Input.jsx b/tgui/packages/tgui/components/Input.jsx
index ac7ce6eef3..252f1c917e 100644
--- a/tgui/packages/tgui/components/Input.jsx
+++ b/tgui/packages/tgui/components/Input.jsx
@@ -6,7 +6,8 @@
import { KEY_ENTER, KEY_ESCAPE } from 'common/keycodes';
import { classes } from 'common/react';
-import { Component, createRef } from 'inferno';
+import { Component, createRef } from 'react';
+
import { Box } from './Box';
// prettier-ignore
@@ -17,8 +18,8 @@ export const toInputValue = value => (
);
export class Input extends Component {
- constructor() {
- super();
+ constructor(props) {
+ super(props);
this.inputRef = createRef();
this.state = {
editing: false,
@@ -138,7 +139,8 @@ export class Input extends Component {
monospace && 'Input--monospace',
className,
])}
- {...rest}>
+ {...rest}
+ >
);
@@ -105,15 +107,17 @@ class MenuBarButton extends Component{content}
{
if (!this.state.inInput) {
@@ -313,8 +299,8 @@ export class ButtonInput extends Component {
Button.Input = ButtonInput;
export class ButtonFile extends Component {
- constructor() {
- super();
+ constructor(props) {
+ super(props);
this.inputRef = createRef();
}
diff --git a/tgui/packages/tgui/components/ByondUi.jsx b/tgui/packages/tgui/components/ByondUi.jsx
index 4623fe5770..c119879dd2 100644
--- a/tgui/packages/tgui/components/ByondUi.jsx
+++ b/tgui/packages/tgui/components/ByondUi.jsx
@@ -6,7 +6,8 @@
import { shallowDiffers } from 'common/react';
import { debounce } from 'common/timer';
-import { Component, createRef } from 'inferno';
+import { Component, createRef } from 'react';
+
import { createLogger } from '../logging';
import { computeBoxProps } from './Box';
@@ -92,20 +93,12 @@ export class ByondUi extends Component {
}
componentDidMount() {
- // IE8: It probably works, but fuck you anyway.
- if (Byond.IS_LTE_IE10) {
- return;
- }
window.addEventListener('resize', this.handleResize);
this.componentDidUpdate();
this.handleResize();
}
componentDidUpdate() {
- // IE8: It probably works, but fuck you anyway.
- if (Byond.IS_LTE_IE10) {
- return;
- }
const { params = {} } = this.props;
const box = getBoundingBox(this.containerRef.current);
logger.debug('bounding box', box);
@@ -118,10 +111,6 @@ export class ByondUi extends Component {
}
componentWillUnmount() {
- // IE8: It probably works, but fuck you anyway.
- if (Byond.IS_LTE_IE10) {
- return;
- }
window.removeEventListener('resize', this.handleResize);
this.byondUiElement.unmount();
}
@@ -131,7 +120,7 @@ export class ByondUi extends Component {
return (
{/* Filler */}
-
+
);
}
diff --git a/tgui/packages/tgui/components/Chart.jsx b/tgui/packages/tgui/components/Chart.tsx
similarity index 53%
rename from tgui/packages/tgui/components/Chart.jsx
rename to tgui/packages/tgui/components/Chart.tsx
index fac444bd1d..205dc6fbec 100644
--- a/tgui/packages/tgui/components/Chart.jsx
+++ b/tgui/packages/tgui/components/Chart.tsx
@@ -5,29 +5,57 @@
*/
import { map, zipWith } from 'common/collections';
-import { pureComponentHooks } from 'common/react';
-import { Component, createRef } from 'inferno';
-import { Box } from './Box';
+import { Component, createRef, RefObject } from 'react';
-const normalizeData = (data, scale, rangeX, rangeY) => {
+import { Box, BoxProps } from './Box';
+
+type Props = {
+ data: number[][];
+} & Partial<{
+ fillColor: string;
+ rangeX: [number, number];
+ rangeY: [number, number];
+ strokeColor: string;
+ strokeWidth: number;
+}> &
+ BoxProps;
+
+type State = {
+ viewBox: [number, number];
+};
+
+type Point = number[];
+type Range = [number, number];
+
+const normalizeData = (
+ data: Point[],
+ scale: number[],
+ rangeX?: Range,
+ rangeY?: Range,
+) => {
if (data.length === 0) {
return [];
}
+
const min = zipWith(Math.min)(...data);
const max = zipWith(Math.max)(...data);
+
if (rangeX !== undefined) {
min[0] = rangeX[0];
max[0] = rangeX[1];
}
+
if (rangeY !== undefined) {
min[1] = rangeY[0];
max[1] = rangeY[1];
}
- const normalized = map((point) => {
- return zipWith((value, min, max, scale) => {
+
+ const normalized = map((point: Point) => {
+ return zipWith((value: number, min: number, max: number, scale: number) => {
return ((value - min) / (max - min)) * scale;
})(point, min, max, scale);
})(data);
+
return normalized;
};
@@ -40,20 +68,18 @@ const dataToPolylinePoints = (data) => {
return points;
};
-class LineChart extends Component {
- constructor(props) {
+class LineChart extends Component
-
-
- )}
+
-
- {open &&
-
-
- {buttons && (
- {buttons}
- )}
-
+
+ {open &&
+
+
+ {buttons && (
+ {buttons}
+ )}
+
- {content || '.'}
-
- );
-};
-
-ColorBox.defaultHooks = pureComponentHooks;
diff --git a/tgui/packages/tgui/components/ColorBox.tsx b/tgui/packages/tgui/components/ColorBox.tsx
new file mode 100644
index 0000000000..b04cdd9241
--- /dev/null
+++ b/tgui/packages/tgui/components/ColorBox.tsx
@@ -0,0 +1,30 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { classes } from 'common/react';
+import { ReactNode } from 'react';
+
+import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
+
+type Props = {
+ content?: ReactNode;
+} & BoxProps;
+
+export function ColorBox(props: Props) {
+ const { content, children, className, ...rest } = props;
+
+ rest.color = content ? null : 'default';
+ rest.backgroundColor = props.color || 'default';
+
+ return (
+
+ {content || '.'}
+
+ );
+}
diff --git a/tgui/packages/tgui/components/Dialog.tsx b/tgui/packages/tgui/components/Dialog.tsx
index 277a03b284..897ce236a4 100644
--- a/tgui/packages/tgui/components/Dialog.tsx
+++ b/tgui/packages/tgui/components/Dialog.tsx
@@ -52,7 +52,8 @@ const DialogButton = (props: DialogButtonProps) => {
);
diff --git a/tgui/packages/tgui/components/Dimmer.jsx b/tgui/packages/tgui/components/Dimmer.tsx
similarity index 61%
rename from tgui/packages/tgui/components/Dimmer.jsx
rename to tgui/packages/tgui/components/Dimmer.tsx
index 85e046ca0d..d1ddb64c4e 100644
--- a/tgui/packages/tgui/components/Dimmer.jsx
+++ b/tgui/packages/tgui/components/Dimmer.tsx
@@ -5,13 +5,15 @@
*/
import { classes } from 'common/react';
-import { Box } from './Box';
-export const Dimmer = (props) => {
+import { Box, BoxProps } from './Box';
+
+export function Dimmer(props: BoxProps) {
const { className, children, ...rest } = props;
+
return (
- {children}
{
])}
/>
);
-};
+}
diff --git a/tgui/packages/tgui/components/DraggableControl.jsx b/tgui/packages/tgui/components/DraggableControl.jsx
index 8ada6f2fa4..bb55287b02 100644
--- a/tgui/packages/tgui/components/DraggableControl.jsx
+++ b/tgui/packages/tgui/components/DraggableControl.jsx
@@ -5,8 +5,8 @@
*/
import { clamp } from 'common/math';
-import { pureComponentHooks } from 'common/react';
-import { Component, createRef } from 'inferno';
+import { Component, createRef } from 'react';
+
import { AnimatedNumber } from './AnimatedNumber';
const DEFAULT_UPDATE_RATE = 400;
@@ -97,13 +97,13 @@ export class DraggableControl extends Component {
state.internalValue = clamp(
state.internalValue + (offset * step) / stepPixelSize,
minValue - step,
- maxValue + step
+ maxValue + step,
);
// Clamp the final value
state.value = clamp(
state.internalValue - (state.internalValue % step) + stepOffset,
minValue,
- maxValue
+ maxValue,
);
state.origin = getScalarScreenOffset(e, dragMatrix);
} else if (Math.abs(offset) > 4) {
@@ -196,8 +196,8 @@ export class DraggableControl extends Component {
style={{
display: !editing ? 'none' : undefined,
height: height,
- 'line-height': lineHeight,
- 'font-size': fontSize,
+ lineHeight: lineHeight,
+ fontsize: fontSize,
}}
onBlur={(e) => {
if (!editing) {
@@ -276,7 +276,6 @@ export class DraggableControl extends Component {
}
}
-DraggableControl.defaultHooks = pureComponentHooks;
DraggableControl.defaultProps = {
minValue: -Infinity,
maxValue: +Infinity,
diff --git a/tgui/packages/tgui/components/Dropdown.tsx b/tgui/packages/tgui/components/Dropdown.tsx
index 7fa0e3ae8d..4fabfbf0bb 100644
--- a/tgui/packages/tgui/components/Dropdown.tsx
+++ b/tgui/packages/tgui/components/Dropdown.tsx
@@ -1,386 +1,220 @@
-import { createPopper, VirtualElement } from '@popperjs/core';
import { classes } from 'common/react';
-import { Component, findDOMfromVNode, InfernoNode, render } from 'inferno';
-import { Box, BoxProps } from './Box';
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+
+import { BoxProps, unit } from './Box';
import { Button } from './Button';
import { Icon } from './Icon';
-import { Stack } from './Stack';
+import { Popper } from './Popper';
-export interface DropdownEntry {
- displayText: string | number | InfernoNode;
- value: string | number | Enumerator;
+type DropdownEntry = {
+ displayText: ReactNode;
+ value: string | number;
+};
+
+type DropdownOption = string | DropdownEntry;
+
+type Props = {
+ /** An array of strings which will be displayed in the
+ dropdown when open. See Dropdown.tsx for more advanced usage with DropdownEntry */
+ options: DropdownOption[];
+ /** Called when a value is picked from the list, `value` is the value that was picked */
+ onSelected: (value: any) => void;
+} & Partial<{
+ /** Whether to display previous / next buttons */
+ buttons: boolean;
+ /** Whether to clip the selected text */
+ clipSelectedText: boolean;
+ /** Color of dropdown button */
+ color: string;
+ /** Disables the dropdown */
+ disabled: boolean;
+ /** Text to always display in place of the selected text */
+ displayText: ReactNode;
+ /** Icon to display in dropdown button */
+ icon: string;
+ /** Angle of the icon */
+ iconRotation: number;
+ /** Whether or not the icon should spin */
+ iconSpin: boolean;
+ /** Width of the dropdown menu. Default: 15rem */
+ menuWidth: string;
+ /** Whether or not the arrow on the right hand side of the dropdown button is visible */
+ noChevron: boolean;
+ /** Called when dropdown button is clicked */
+ onClick: (event) => void;
+ /** Dropdown renders over instead of below */
+ over: boolean;
+ /** Currently selected entry */
+ selected: string | number;
+}> &
+ BoxProps;
+
+function getOptionValue(option: DropdownOption) {
+ return typeof option === 'string' ? option : option.value;
}
-type DropdownUniqueProps = {
- options: string[] | DropdownEntry[];
- icon?: string;
- iconRotation?: number;
- clipSelectedText?: boolean;
- width?: string;
- menuWidth?: string;
- over?: boolean;
- color?: string;
- nochevron?: boolean;
- displayText?: string | number | InfernoNode;
- onClick?: (event) => void;
- // you freaks really are just doing anything with this shit
- selected?: any;
- onSelected?: (selected: any) => void;
- buttons?: boolean;
-};
+export function Dropdown(props: Props) {
+ const {
+ buttons,
+ className,
+ clipSelectedText = true,
+ color = 'default',
+ disabled,
+ displayText,
+ icon,
+ iconRotation,
+ iconSpin,
+ menuWidth = '15rem',
+ noChevron,
+ onClick,
+ onSelected,
+ options = [],
+ over,
+ selected,
+ width,
+ } = props;
-export type DropdownProps = BoxProps & DropdownUniqueProps;
+ const [open, setOpen] = useState(false);
+ const adjustedOpen = over ? !open : open;
+ const innerRef = useRef(null);
-const DEFAULT_OPTIONS = {
- placement: 'left-start',
- modifiers: [
- {
- name: 'eventListeners',
- enabled: false,
- },
- ],
-};
-const NULL_RECT: DOMRect = {
- width: 0,
- height: 0,
- top: 0,
- right: 0,
- bottom: 0,
- left: 0,
- x: 0,
- y: 0,
- toJSON: () => null,
-} as const;
-
-type DropdownState = {
- selected?: string;
- open: boolean;
-};
-
-const DROPDOWN_DEFAULT_CLASSNAMES = 'Layout Dropdown__menu';
-const DROPDOWN_SCROLL_CLASSNAMES = 'Layout Dropdown__menu-scroll';
-
-export class Dropdown extends Component {
- static renderedMenu: HTMLDivElement | undefined;
- static singletonPopper: ReturnType | undefined;
- static currentOpenMenu: Element | undefined;
- static virtualElement: VirtualElement = {
- getBoundingClientRect: () =>
- Dropdown.currentOpenMenu?.getBoundingClientRect() ?? NULL_RECT,
- };
- menuContents: any;
- state: DropdownState = {
- open: false,
- selected: this.props.selected,
- };
-
- handleClick = () => {
- if (this.state.open) {
- this.setOpen(false);
- }
- };
-
- getDOMNode() {
- return findDOMfromVNode(this.$LI, true);
- }
-
- componentDidMount() {
- const domNode = this.getDOMNode();
-
- if (!domNode) {
- return;
- }
- }
-
- openMenu() {
- let renderedMenu = Dropdown.renderedMenu;
- if (renderedMenu === undefined) {
- renderedMenu = document.createElement('div');
- renderedMenu.className = DROPDOWN_DEFAULT_CLASSNAMES;
- document.body.appendChild(renderedMenu);
- Dropdown.renderedMenu = renderedMenu;
- }
-
- const domNode = this.getDOMNode()!;
- Dropdown.currentOpenMenu = domNode;
-
- renderedMenu.scrollTop = 0;
- renderedMenu.style.width =
- this.props.menuWidth ||
- // Hack, but domNode should *always* be the parent control meaning it will have width
- // @ts-ignore
- `${domNode.offsetWidth}px`;
- renderedMenu.style.opacity = '1';
- renderedMenu.style.pointerEvents = 'auto';
-
- // ie hack
- // ie has this bizarre behavior where focus just silently fails if the
- // element being targeted "isn't ready"
- // 400 is probably way too high, but the lack of hotloading is testing my
- // patience on tuning it
- // I'm beyond giving a shit at this point it fucking works whatever
- setTimeout(() => {
- Dropdown.renderedMenu?.focus();
- }, 400);
- this.renderMenuContent();
- }
-
- closeMenu() {
- if (Dropdown.currentOpenMenu !== this.getDOMNode()) {
- return;
- }
-
- Dropdown.currentOpenMenu = undefined;
- Dropdown.renderedMenu!.style.opacity = '0';
- Dropdown.renderedMenu!.style.pointerEvents = 'none';
- }
-
- componentWillUnmount() {
- this.closeMenu();
- this.setOpen(false);
- }
-
- renderMenuContent() {
- const renderedMenu = Dropdown.renderedMenu;
- if (!renderedMenu) {
- return;
- }
- if (renderedMenu.offsetHeight > 200) {
- renderedMenu.className = DROPDOWN_SCROLL_CLASSNAMES;
- } else {
- renderedMenu.className = DROPDOWN_DEFAULT_CLASSNAMES;
- }
-
- const { options = [] } = this.props;
- const ops = options.map((option) => {
- let value, displayText;
-
- if (typeof option === 'string') {
- displayText = option;
- value = option;
- } else if (option !== null) {
- displayText = option.displayText;
- value = option.value;
+ /** Update the selected value when clicking the left/right buttons */
+ const updateSelected = useCallback(
+ (direction: 'previous' | 'next') => {
+ if (options.length < 1 || disabled) {
+ return;
}
+ const startIndex = 0;
+ const endIndex = options.length - 1;
- return (
- setOpen(false)}
+ placement={over ? 'top-start' : 'bottom-start'}
+ content={
+
+ }
+ >
+ {
- this.setSelected(value);
- }}>
- {displayText}
-
+ let selectedIndex = options.findIndex(
+ (option) => getOptionValue(option) === selected,
);
- });
- const to_render = ops.length ? ops : 'No Options Found';
-
- render({to_render}
, renderedMenu, () => {
- let singletonPopper = Dropdown.singletonPopper;
- if (singletonPopper === undefined) {
- singletonPopper = createPopper(Dropdown.virtualElement, renderedMenu!, {
- ...DEFAULT_OPTIONS,
- placement: 'bottom-start',
- });
-
- Dropdown.singletonPopper = singletonPopper;
- } else {
- singletonPopper.setOptions({
- ...DEFAULT_OPTIONS,
- placement: 'bottom-start',
- });
-
- singletonPopper.update();
+ if (selectedIndex < 0) {
+ selectedIndex = direction === 'next' ? endIndex : startIndex;
}
- });
- }
- setOpen(open: boolean) {
- this.setState((state) => ({
- ...state,
- open,
- }));
- if (open) {
- setTimeout(() => {
- this.openMenu();
- window.addEventListener('click', this.handleClick);
- });
- } else {
- this.closeMenu();
- window.removeEventListener('click', this.handleClick);
- }
- }
+ let newIndex = selectedIndex;
+ if (direction === 'next') {
+ newIndex = selectedIndex === endIndex ? startIndex : selectedIndex++;
+ } else {
+ newIndex = selectedIndex === startIndex ? endIndex : selectedIndex--;
+ }
- setSelected(selected: string) {
- this.setState((state) => ({
- ...state,
- selected,
- }));
- this.setOpen(false);
- if (this.props.onSelected) {
- this.props.onSelected(selected);
- }
- }
+ onSelected?.(getOptionValue(options[newIndex]));
+ },
+ [disabled, onSelected, options, selected],
+ );
- getOptionValue(option): string {
- return typeof option === 'string' ? option : option.value;
- }
+ /** Allows the menu to be scrollable on open */
+ useEffect(() => {
+ if (!open) return;
- getSelectedIndex(): number {
- const selected = this.state.selected || this.props.selected;
- const { options = [] } = this.props;
+ innerRef.current?.focus();
+ }, [open]);
- return options.findIndex((option) => {
- return this.getOptionValue(option) === selected;
- });
- }
+ return (
+
+ {options.length === 0 && (
+
-
- {
+ setOpen(false);
+ onSelected?.(value);
+ }}
+ >
+ {typeof option === 'string' ? option : option.displayText}
+
+ );
+ })}
+ No options
+ )}
- toPrevious(): void {
- if (this.props.options.length < 1) {
- return;
- }
+ {options.map((option, index) => {
+ const value = getOptionValue(option);
- let selectedIndex = this.getSelectedIndex();
- const startIndex = 0;
- const endIndex = this.props.options.length - 1;
-
- const hasSelected = selectedIndex >= 0;
- if (!hasSelected) {
- selectedIndex = startIndex;
- }
-
- const previousIndex =
- selectedIndex === startIndex ? endIndex : selectedIndex - 1;
-
- this.setSelected(this.getOptionValue(this.props.options[previousIndex]));
- }
-
- toNext(): void {
- if (this.props.options.length < 1) {
- return;
- }
-
- let selectedIndex = this.getSelectedIndex();
- const startIndex = 0;
- const endIndex = this.props.options.length - 1;
-
- const hasSelected = selectedIndex >= 0;
- if (!hasSelected) {
- selectedIndex = endIndex;
- }
-
- const nextIndex =
- selectedIndex === endIndex ? startIndex : selectedIndex + 1;
-
- this.setSelected(this.getOptionValue(this.props.options[nextIndex]));
- }
-
- render() {
- const { props } = this;
- const {
- icon,
- iconRotation,
- iconSpin,
- clipSelectedText = true,
- color = 'default',
- dropdownStyle,
- over,
- nochevron,
- width,
- onClick,
- onSelected,
- selected,
- disabled,
- displayText,
- buttons,
- ...boxProps
- } = props;
- const { className, ...rest } = boxProps;
-
- const adjustedOpen = over ? !this.state.open : this.state.open;
-
- return (
-
+
+
+ );
}
diff --git a/tgui/packages/tgui/components/FakeTerminal.jsx b/tgui/packages/tgui/components/FakeTerminal.jsx
index d6479a2579..d3b7fbe65d 100644
--- a/tgui/packages/tgui/components/FakeTerminal.jsx
+++ b/tgui/packages/tgui/components/FakeTerminal.jsx
@@ -1,5 +1,6 @@
+import { Component, Fragment } from 'react';
+
import { Box } from './Box';
-import { Component, Fragment } from 'inferno';
export class FakeTerminal extends Component {
constructor(props) {
diff --git a/tgui/packages/tgui/components/FitText.tsx b/tgui/packages/tgui/components/FitText.tsx
index 334eb97073..049c887ed7 100644
--- a/tgui/packages/tgui/components/FitText.tsx
+++ b/tgui/packages/tgui/components/FitText.tsx
@@ -1,4 +1,10 @@
-import { Component, createRef, RefObject } from 'inferno';
+import {
+ Component,
+ createRef,
+ HTMLAttributes,
+ PropsWithChildren,
+ RefObject,
+} from 'react';
const DEFAULT_ACCEPTABLE_DIFFERENCE = 5;
@@ -7,7 +13,7 @@ type Props = {
maxWidth: number;
maxFontSize: number;
native?: HTMLAttributes
+
+ {
- if (disabled && !this.state.open) {
+ if (disabled && !open) {
return;
}
- this.setOpen(!this.state.open);
- if (onClick) {
- onClick(event);
- }
+ setOpen(!open);
+ onClick?.(event);
}}
- {...rest}>
+ >
{icon && (
+
+ {buttons && (
+ <>
+ position: 'fixed',
+ transform: `translate(${finalLeft}px, ${finalTop}px) scale(${zoom})`,
+ transformOrigin: 'top left',
+ height: '100%',
+ width: '100%',
+ }}
+ >
{children}
@@ -174,7 +177,8 @@ export class InfinitePlane extends Component {
.
{
dispose: () => void;
- constructor() {
- super();
+ constructor(props) {
+ super(props);
this.dispose = listenForKeyEvents((key) => {
if (this.props.onKey) {
diff --git a/tgui/packages/tgui/components/Knob.jsx b/tgui/packages/tgui/components/Knob.jsx
index 1d40ff1ed2..e9067fc71d 100644
--- a/tgui/packages/tgui/components/Knob.jsx
+++ b/tgui/packages/tgui/components/Knob.jsx
@@ -6,16 +6,11 @@
import { keyOfMatchingRange, scale } from 'common/math';
import { classes } from 'common/react';
+
import { computeBoxClassName, computeBoxProps } from './Box';
import { DraggableControl } from './DraggableControl';
-import { NumberInput } from './NumberInput';
export const Knob = (props) => {
- // IE8: I don't want to support a yet another component on IE8.
- // IE8: It also can't handle SVG.
- if (Byond.IS_LTE_IE8) {
- return
+ }}
+ >
{checked &&
@@ -205,7 +211,8 @@ const MenuItem = (props) => {
'MenuBar__MenuItem',
'MenuBar__hover',
])}
- onClick={() => onClick(value)}>
+ onClick={() => onClick(value)}
+ >
{displayText}
);
diff --git a/tgui/packages/tgui/components/Modal.jsx b/tgui/packages/tgui/components/Modal.jsx
index 54c8c090ec..69231ec87f 100644
--- a/tgui/packages/tgui/components/Modal.jsx
+++ b/tgui/packages/tgui/components/Modal.jsx
@@ -5,6 +5,7 @@
*/
import { classes } from 'common/react';
+
import { computeBoxClassName, computeBoxProps } from './Box';
import { Dimmer } from './Dimmer';
@@ -25,7 +26,8 @@ export const Modal = (props) => {
+ {...computeBoxProps(rest)}
+ >
{children}
diff --git a/tgui/packages/tgui/components/NanoMap.jsx b/tgui/packages/tgui/components/NanoMap.jsx
index 5c10f7a73f..d2e15a71f2 100644
--- a/tgui/packages/tgui/components/NanoMap.jsx
+++ b/tgui/packages/tgui/components/NanoMap.jsx
@@ -1,6 +1,7 @@
-import { Component } from 'inferno';
-import { Box, Button, Icon, Tooltip, LabeledList, Slider } from '.';
+import { Component } from 'react';
+
import { useBackend } from '../backend';
+import { Box, Button, Icon, LabeledList, Slider, Tooltip } from '.';
const pauseEvent = (e) => {
if (e.stopPropagation) {
@@ -132,13 +133,13 @@ export class NanoMap extends Component {
height: mapSize,
'margin-top': offsetY + 'px',
'margin-left': offsetX + 'px',
- 'overflow': 'hidden',
- 'position': 'relative',
+ overflow: 'hidden',
+ position: 'relative',
'background-image': 'url(' + mapUrl + ')',
'background-size': 'cover',
'background-repeat': 'no-repeat',
'text-align': 'center',
- 'cursor': dragging ? 'move' : 'auto',
+ cursor: dragging ? 'move' : 'auto',
};
return (
@@ -147,7 +148,8 @@ export class NanoMap extends Component {
style={newStyle}
textAlign="center"
onMouseDown={this.handleDragStart}
- onClick={this.handleOnClick}>
+ onClick={this.handleOnClick}
+ >
- {
- (animated && !dragging && !suppressingFlicker) ?
- ([2];
- additionalStyles?: CSSProperties;
+type RequiredProps = {
+ /** The content to display in the popper */
+ content: ReactNode;
+ /** Whether the popper is open */
+ isOpen: boolean;
};
-export class Popper extends Component {
- static id: number = 0;
+type OptionalProps = Partial<{
+ /** Called when the user clicks outside the popper */
+ onClickOutside: () => void;
+ /** Where to place the popper relative to the reference element */
+ placement: Placement;
+}>;
- renderedContent: HTMLDivElement;
- popperInstance: ReturnType;
+type Props = RequiredProps & OptionalProps;
- constructor() {
- super();
+/**
+ * ## Popper
+ * Popper lets you position elements so that they don't go out of the bounds of the window.
+ * @url https://popper.js.org/react-popper/ for more information.
+ */
+export function Popper(props: PropsWithChildren) {
+ const { children, content, isOpen, onClickOutside, placement } = props;
- Popper.id += 1;
+ const [referenceElement, setReferenceElement] =
+ useState(null);
+ const [popperElement, setPopperElement] = useState(
+ null,
+ );
+
+ // One would imagine we could just use useref here, but it's against react-popper documentation and causes a positioning bug
+ // We still need them to call focus and clickoutside events :(
+ const popperRef = useRef(null);
+ const parentRef = useRef(null);
+
+ const { styles, attributes } = usePopper(referenceElement, popperElement, {
+ placement,
+ });
+
+ /** Close the popper when the user clicks outside */
+ function handleClickOutside(event: MouseEvent) {
+ if (
+ !popperRef.current?.contains(event.target as Node) &&
+ !parentRef.current?.contains(event.target as Node)
+ ) {
+ onClickOutside?.();
+ }
}
- componentDidMount() {
- const { additionalStyles, options } = this.props;
-
- this.renderedContent = document.createElement('div');
-
- if (additionalStyles) {
- for (const [attribute, value] of Object.entries(additionalStyles)) {
- this.renderedContent.style[attribute] = value;
- }
+ useEffect(() => {
+ if (isOpen) {
+ document.addEventListener('mousedown', handleClickOutside);
+ } else {
+ document.removeEventListener('mousedown', handleClickOutside);
}
- this.renderPopperContent(() => {
- document.body.appendChild(this.renderedContent);
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, [isOpen]);
- // HACK: We don't want to create a wrapper, as it could break the layout
- // of consumers, so we do the inferno equivalent of `findDOMNode(this)`.
- // This is usually bad as refs are usually better, but refs did
- // not work in this case, as they weren't propagating correctly.
- // A previous attempt was made as a render prop that passed an ID,
- // but this made consuming use too unwieldly.
- // This code is copied from `findDOMNode` in inferno-extras.
- // Because this component is written in TypeScript, we will know
- // immediately if this internal variable is removed.
- const domNode = findDOMfromVNode(this.$LI, true);
- if (!domNode) {
- return;
- }
-
- this.popperInstance = createPopper(
- domNode,
- this.renderedContent,
- options
- );
- });
- }
-
- componentDidUpdate() {
- this.renderPopperContent(() => this.popperInstance?.update());
- }
-
- componentWillUnmount() {
- this.popperInstance?.destroy();
- render(null, this.renderedContent, () => {
- this.renderedContent.remove();
- });
- }
-
- renderPopperContent(callback: () => void) {
- // `render` errors when given false, so we convert it to `null`,
- // which is supported.
- render(this.props.popperContent || null, this.renderedContent, callback);
- }
-
- render() {
- return this.props.children;
- }
+ return (
+ <>
+ ;
+ style: Partial;
+ title: string;
+ width: string | number;
+}> &
+ Partial &
+ PropsWithChildren;
+
+export const ProgressBar = (props: Props) => {
const {
className,
value,
@@ -22,32 +41,28 @@ export const ProgressBar = (props) => {
} = props;
const scaledValue = scale(value, minValue, maxValue);
const hasContent = children !== undefined;
- // prettier-ignore
- const effectiveColor = color
- || keyOfMatchingRange(value, ranges)
- || 'default';
+
+ const effectiveColor =
+ color || keyOfMatchingRange(value, ranges) || 'default';
// We permit colors to be in hex format, rgb()/rgba() format,
// a name for a color- class, or a base CSS class.
const outerProps = computeBoxProps(rest);
- // prettier-ignore
- const outerClasses = [
- 'ProgressBar',
- className,
- computeBoxClassName(rest),
- ];
+
+ const outerClasses = ['ProgressBar', className, computeBoxClassName(rest)];
const fillStyles = {
- 'width': clamp01(scaledValue) * 100 + '%',
+ width: clamp01(scaledValue) * 100 + '%',
};
- if (CSS_COLORS.includes(effectiveColor) || effectiveColor === 'default') {
+ if (
+ CSS_COLORS.includes(effectiveColor as any) ||
+ effectiveColor === 'default'
+ ) {
// If the color is a color- class, just use that.
outerClasses.push('ProgressBar--color--' + effectiveColor);
} else {
// Otherwise, set styles directly.
- // prettier-ignore
- outerProps.style = (outerProps.style || "")
- + `border-color: ${effectiveColor};`;
- fillStyles['background-color'] = effectiveColor;
+ outerProps.style = { ...outerProps.style, borderColor: effectiveColor };
+ fillStyles['backgroundColor'] = effectiveColor;
}
return (
@@ -62,5 +77,3 @@ export const ProgressBar = (props) => {
);
};
-
-ProgressBar.defaultHooks = pureComponentHooks;
diff --git a/tgui/packages/tgui/components/RestrictedInput.jsx b/tgui/packages/tgui/components/RestrictedInput.jsx
index 1b082296ca..3125545bae 100644
--- a/tgui/packages/tgui/components/RestrictedInput.jsx
+++ b/tgui/packages/tgui/components/RestrictedInput.jsx
@@ -1,8 +1,9 @@
-import { classes } from 'common/react';
+import { KEY_ENTER, KEY_ESCAPE } from 'common/keycodes';
import { clamp } from 'common/math';
-import { Component, createRef } from 'inferno';
+import { classes } from 'common/react';
+import { Component, createRef } from 'react';
+
import { Box } from './Box';
-import { KEY_ESCAPE, KEY_ENTER } from 'common/keycodes';
const DEFAULT_MIN = 0;
const DEFAULT_MAX = 10000;
@@ -29,8 +30,8 @@ const getClampedNumber = (value, minValue, maxValue, allowFloats) => {
};
export class RestrictedInput extends Component {
- constructor() {
- super();
+ constructor(props) {
+ super(props);
this.inputRef = createRef();
this.state = {
editing: false,
@@ -47,7 +48,7 @@ export class RestrictedInput extends Component {
e.target.value,
minValue,
maxValue,
- allowFloats
+ allowFloats,
);
if (onChange) {
onChange(e, +e.target.value);
@@ -76,7 +77,7 @@ export class RestrictedInput extends Component {
e.target.value,
minValue,
maxValue,
- allowFloats
+ allowFloats,
);
this.setEditing(false);
if (onChange) {
@@ -110,7 +111,7 @@ export class RestrictedInput extends Component {
nextValue,
minValue,
maxValue,
- allowFloats
+ allowFloats,
);
}
if (this.props.autoFocus || this.props.autoSelect) {
@@ -136,7 +137,7 @@ export class RestrictedInput extends Component {
nextValue,
minValue,
maxValue,
- allowFloats
+ allowFloats,
);
}
}
@@ -158,7 +159,8 @@ export class RestrictedInput extends Component {
monospace && 'Input--monospace',
className,
])}
- {...rest}>
+ {...rest}
+ >
+ {animated && !dragging && !suppressingFlicker ? (
+
@@ -189,15 +191,18 @@ export class NumberInput extends Component {
minHeight={height}
lineHeight={lineHeight}
fontSize={fontSize}
- onMouseDown={this.handleDragStart}>
+ onMouseDown={this.handleDragStart}
+ >
{
+ setReferenceElement(node);
+ parentRef.current = node;
+ }}
+ >
+ {children}
+
+ {isOpen && (
+ {
+ setPopperElement(node);
+ popperRef.current = node;
+ }}
+ style={{ ...styles.popper, zIndex: 5 }}
+ {...attributes.popper}
+ >
+ {content}
+
+ )}
+
+ );
}
diff --git a/tgui/packages/tgui/components/ProgressBar.jsx b/tgui/packages/tgui/components/ProgressBar.tsx
similarity index 50%
rename from tgui/packages/tgui/components/ProgressBar.jsx
rename to tgui/packages/tgui/components/ProgressBar.tsx
index 86116732c3..ce2f071ba0 100644
--- a/tgui/packages/tgui/components/ProgressBar.jsx
+++ b/tgui/packages/tgui/components/ProgressBar.tsx
@@ -4,12 +4,31 @@
* @license MIT
*/
-import { clamp01, scale, keyOfMatchingRange, toFixed } from 'common/math';
-import { classes, pureComponentHooks } from 'common/react';
-import { computeBoxClassName, computeBoxProps } from './Box';
-import { CSS_COLORS } from '../constants';
+import { clamp01, keyOfMatchingRange, scale, toFixed } from 'common/math';
+import { classes } from 'common/react';
+import { PropsWithChildren } from 'react';
-export const ProgressBar = (props) => {
+import { CSS_COLORS } from '../constants';
+import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
+
+type Props = {
+ value: number;
+} & Partial<{
+ backgroundColor: string;
+ className: string;
+ color: string;
+ height: string | number;
+ maxValue: number;
+ minValue: number;
+ ranges: Record.
{
- // Support for IE8 is for losers sorry B)
- if (Byond.IS_LTE_IE8) {
- return