tgui-core 1.0.2 → 1.0.4

package/{src/components → components}/Flex.tsx

@@ -1,105 +1,105 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { classes } from '../common/react';
-
-import { BoxProps, computeBoxClassName, computeBoxProps, unit } from './Box';
-
-export type FlexProps = Partial<{
-  align: string | boolean;
-  direction: string;
-  inline: boolean;
-  justify: string;
-  scrollable: boolean;
-  style: Partial<HTMLDivElement['style']>;
-  wrap: string | boolean;
-}> &
-  BoxProps;
-
-export const computeFlexClassName = (props: FlexProps) => {
-  return classes([
-    'Flex',
-    props.inline && 'Flex--inline',
-    computeBoxClassName(props),
-  ]);
-};
-
-export const computeFlexProps = (props: FlexProps) => {
-  const { className, direction, wrap, align, justify, inline, ...rest } = props;
-
-  return computeBoxProps({
-    style: {
-      ...rest.style,
-      flexDirection: direction,
-      flexWrap: wrap === true ? 'wrap' : wrap,
-      alignItems: align,
-      justifyContent: justify,
-    },
-    ...rest,
-  });
-};
-
-export const Flex = (props) => {
-  const { className, ...rest } = props;
-  return (
-    <div
-      className={classes([className, computeFlexClassName(rest)])}
-      {...computeFlexProps(rest)}
-    />
-  );
-};
-
-export type FlexItemProps = BoxProps &
-  Partial<{
-    grow: number | boolean;
-    order: number;
-    shrink: number | boolean;
-    basis: string | number;
-    align: string | boolean;
-    style: Partial<HTMLDivElement['style']>;
-  }>;
-
-export const computeFlexItemClassName = (props: FlexItemProps) => {
-  return classes(['Flex__item', computeBoxClassName(props)]);
-};
-
-export const computeFlexItemProps = (props: FlexItemProps) => {
-  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 ??
-    // If grow is used, basis should be set to 0 to be consistent with
-    // flex css shorthand `flex: 1`.
-    (grow !== undefined ? 0 : undefined);
-
-  return computeBoxProps({
-    style: {
-      ...style,
-      flexGrow: grow !== undefined && Number(grow),
-      flexShrink: shrink !== undefined && Number(shrink),
-      flexBasis: unit(computedBasis),
-      order: order,
-      alignSelf: align,
-    },
-    ...rest,
-  });
-};
-
-const FlexItem = (props) => {
-  const { className, ...rest } = props;
-  return (
-    <div
-      className={classes([className, computeFlexItemClassName(props)])}
-      {...computeFlexItemProps(rest)}
-    />
-  );
-};
-
-Flex.Item = FlexItem;
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { classes } from '../common/react';
+
+import { BoxProps, computeBoxClassName, computeBoxProps, unit } from './Box';
+
+export type FlexProps = Partial<{
+  align: string | boolean;
+  direction: string;
+  inline: boolean;
+  justify: string;
+  scrollable: boolean;
+  style: Partial<HTMLDivElement['style']>;
+  wrap: string | boolean;
+}> &
+  BoxProps;
+
+export const computeFlexClassName = (props: FlexProps) => {
+  return classes([
+    'Flex',
+    props.inline && 'Flex--inline',
+    computeBoxClassName(props),
+  ]);
+};
+
+export const computeFlexProps = (props: FlexProps) => {
+  const { className, direction, wrap, align, justify, inline, ...rest } = props;
+
+  return computeBoxProps({
+    style: {
+      ...rest.style,
+      flexDirection: direction,
+      flexWrap: wrap === true ? 'wrap' : wrap,
+      alignItems: align,
+      justifyContent: justify,
+    },
+    ...rest,
+  });
+};
+
+export const Flex = (props) => {
+  const { className, ...rest } = props;
+  return (
+    <div
+      className={classes([className, computeFlexClassName(rest)])}
+      {...computeFlexProps(rest)}
+    />
+  );
+};
+
+export type FlexItemProps = BoxProps &
+  Partial<{
+    grow: number | boolean;
+    order: number;
+    shrink: number | boolean;
+    basis: string | number;
+    align: string | boolean;
+    style: Partial<HTMLDivElement['style']>;
+  }>;
+
+export const computeFlexItemClassName = (props: FlexItemProps) => {
+  return classes(['Flex__item', computeBoxClassName(props)]);
+};
+
+export const computeFlexItemProps = (props: FlexItemProps) => {
+  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 ??
+    // If grow is used, basis should be set to 0 to be consistent with
+    // flex css shorthand `flex: 1`.
+    (grow !== undefined ? 0 : undefined);
+
+  return computeBoxProps({
+    style: {
+      ...style,
+      flexGrow: grow !== undefined && Number(grow),
+      flexShrink: shrink !== undefined && Number(shrink),
+      flexBasis: unit(computedBasis),
+      order: order,
+      alignSelf: align,
+    },
+    ...rest,
+  });
+};
+
+const FlexItem = (props) => {
+  const { className, ...rest } = props;
+  return (
+    <div
+      className={classes([className, computeFlexItemClassName(props)])}
+      {...computeFlexItemProps(rest)}
+    />
+  );
+};
+
+Flex.Item = FlexItem;

package/{src/components → components}/Icon.tsx

@@ -1,91 +1,91 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @author Original Aleksej Komarov
- * @author Changes ThePotato97
- * @license MIT
- */
-
-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 } & Partial<{
-  size: number;
-  spin: BooleanLike;
-  className: string;
-  rotation: number;
-  style: Partial<HTMLDivElement['style']>;
-}>;
-
-export type IconProps = IconPropsUnique & BoxProps;
-
-export const Icon = (props: IconProps) => {
-  const { name, size, spin, className, rotation, ...rest } = props;
-
-  const customStyle = rest.style || {};
-  if (size) {
-    customStyle.fontSize = size * 100 + '%';
-  }
-  if (rotation) {
-    customStyle.transform = `rotate(${rotation}deg)`;
-  }
-  rest.style = customStyle;
-
-  const boxProps = computeBoxProps(rest);
-
-  let iconClass = '';
-  if (name.startsWith('tg-')) {
-    // tgfont icon
-    iconClass = name;
-  } else {
-    // font awesome icon
-    const faRegular = FA_OUTLINE_REGEX.test(name);
-    const faName = name.replace(FA_OUTLINE_REGEX, '');
-    const preprendFa = !faName.startsWith('fa-');
-
-    iconClass = faRegular ? 'far ' : 'fas ';
-    if (preprendFa) {
-      iconClass += 'fa-';
-    }
-    iconClass += faName;
-    if (spin) {
-      iconClass += ' fa-spin';
-    }
-  }
-  return (
-    <i
-      className={classes([
-        'Icon',
-        iconClass,
-        className,
-        computeBoxClassName(rest),
-      ])}
-      {...boxProps}
-    />
-  );
-};
-
-type IconStackUnique = {
-  children: ReactNode;
-  className?: string;
-};
-
-export type IconStackProps = IconStackUnique & BoxProps;
-
-export const IconStack = (props: IconStackProps) => {
-  const { className, children, ...rest } = props;
-  return (
-    <span
-      className={classes(['IconStack', className, computeBoxClassName(rest)])}
-      {...computeBoxProps(rest)}
-    >
-      {children}
-    </span>
-  );
-};
-
-Icon.Stack = IconStack;
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @author Original Aleksej Komarov
+ * @author Changes ThePotato97
+ * @license MIT
+ */
+
+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 } & Partial<{
+  size: number;
+  spin: BooleanLike;
+  className: string;
+  rotation: number;
+  style: Partial<HTMLDivElement['style']>;
+}>;
+
+export type IconProps = IconPropsUnique & BoxProps;
+
+export const Icon = (props: IconProps) => {
+  const { name, size, spin, className, rotation, ...rest } = props;
+
+  const customStyle = rest.style || {};
+  if (size) {
+    customStyle.fontSize = size * 100 + '%';
+  }
+  if (rotation) {
+    customStyle.transform = `rotate(${rotation}deg)`;
+  }
+  rest.style = customStyle;
+
+  const boxProps = computeBoxProps(rest);
+
+  let iconClass = '';
+  if (name.startsWith('tg-')) {
+    // tgfont icon
+    iconClass = name;
+  } else {
+    // font awesome icon
+    const faRegular = FA_OUTLINE_REGEX.test(name);
+    const faName = name.replace(FA_OUTLINE_REGEX, '');
+    const preprendFa = !faName.startsWith('fa-');
+
+    iconClass = faRegular ? 'far ' : 'fas ';
+    if (preprendFa) {
+      iconClass += 'fa-';
+    }
+    iconClass += faName;
+    if (spin) {
+      iconClass += ' fa-spin';
+    }
+  }
+  return (
+    <i
+      className={classes([
+        'Icon',
+        iconClass,
+        className,
+        computeBoxClassName(rest),
+      ])}
+      {...boxProps}
+    />
+  );
+};
+
+type IconStackUnique = {
+  children: ReactNode;
+  className?: string;
+};
+
+export type IconStackProps = IconStackUnique & BoxProps;
+
+export const IconStack = (props: IconStackProps) => {
+  const { className, children, ...rest } = props;
+  return (
+    <span
+      className={classes(['IconStack', className, computeBoxClassName(rest)])}
+      {...computeBoxProps(rest)}
+    >
+      {children}
+    </span>
+  );
+};
+
+Icon.Stack = IconStack;