fix some style issues

cmss13-devs · Jan 20, 2024 · 0016ed5 · 0016ed5
1 parent 0105968
commit 0016ed5
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 38 deletions.
diff --git a/tgui/packages/tgui/components/Button.jsx b/tgui/packages/tgui/components/Button.jsx
@@ -273,7 +273,7 @@ export class ButtonInput extends Component {
           className="NumberInput__input"
           style={{
             'display': !this.state.inInput ? 'none' : undefined,
-            'text-align': 'left',
+            'textAlign': 'left',
           }}
           onBlur={(e) => {
             if (!this.state.inInput) {

diff --git a/tgui/packages/tgui/components/NumberInput.jsx b/tgui/packages/tgui/components/NumberInput.jsx
@@ -5,8 +5,9 @@
  */
 
 import { clamp } from 'common/math';
-import { classes, pureComponentHooks } from 'common/react';
+import { classes } from 'common/react';
 import { Component, createRef } from 'react';
+
 import { AnimatedNumber } from './AnimatedNumber';
 import { Box } from './Box';
 
@@ -165,14 +166,15 @@ export class NumberInput extends Component {
       displayValue = intermediateValue;
     }
 
-    // prettier-ignore
     const contentElement = (
-      <div className="NumberInput__content" unselectable={Byond.IS_LTE_IE8}>
-        {
-          (animated && !dragging && !suppressingFlicker) ?
-            (<AnimatedNumber value={displayValue} format={format} />) :
-            (format ? format(displayValue) : displayValue)
-        }
+      <div className="NumberInput__content">
+        {animated && !dragging && !suppressingFlicker ? (
+          <AnimatedNumber value={displayValue} format={format} />
+        ) : format ? (
+          format(displayValue)
+        ) : (
+          displayValue
+        )}
 
         {unit ? ' ' + unit : ''}
       </div>
@@ -194,10 +196,12 @@ export class NumberInput extends Component {
           <div
             className="NumberInput__bar"
             style={{
-              // prettier-ignore
-              height: clamp(
-                (displayValue - minValue) / (maxValue - minValue) * 100,
-                0, 100) + '%',
+              height:
+                clamp(
+                  ((displayValue - minValue) / (maxValue - minValue)) * 100,
+                  0,
+                  100
+                ) + '%',
             }}
           />
         </div>
@@ -208,8 +212,8 @@ export class NumberInput extends Component {
           style={{
             display: !editing ? 'none' : undefined,
             height: height,
-            'line-height': lineHeight,
-            'font-size': fontSize,
+            lineHeight: lineHeight,
+            fontSize: fontSize,
           }}
           onBlur={(e) => {
             if (!editing) {
@@ -274,7 +278,6 @@ export class NumberInput extends Component {
   }
 }
 
-NumberInput.defaultHooks = pureComponentHooks;
 NumberInput.defaultProps = {
   minValue: -Infinity,
   maxValue: +Infinity,

diff --git a/.../packages/tgui/components/ProgressBar.jsx → .../packages/tgui/components/ProgressBar.tsx b/.../packages/tgui/components/ProgressBar.jsx → .../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 { clamp01, keyOfMatchingRange, scale, toFixed } from 'common/math';
+import { classes } from 'common/react';
+import { PropsWithChildren } from 'react';
+
 import { CSS_COLORS } from '../constants';
+import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
+
+type Props = {
+  readonly value: number;
+} & Partial<{
+  backgroundColor: string;
+  className: string;
+  color: string;
+  height: string | number;
+  maxValue: number;
+  minValue: number;
+  ranges: Record<string, [number, number]>;
+  style: Partial<HTMLDivElement['style']>;
+  title: string;
+  width: string | number;
+}> &
+  Partial<BoxProps> &
+  PropsWithChildren;
 
-export const ProgressBar = (props) => {
+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-<name> 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-<name> 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) => {
     </div>
   );
 };
-
-ProgressBar.defaultHooks = pureComponentHooks;