reafctor: normalize component formatting (#2082)

* refactor: move/rename BanUserButton file * refactor: move/rename Chart file * refactor: update generic component filenames to PascalCase * refactor: update config component filenames to PascalCase * refactor: update AdminLayout component filename to PascalCase * refactor: update/move VideoJS component * chore(eslint): disable bad react/require-default-props rule * refactor: normalize ActionButton component * refactor: normalize ActionButtonRow component * refactor: normalize FollowButton component * refactor: normalize NotifyButton component * refactor: normalize ChatActionMessage component * refactor: normalize ChatContainer component * refactor: normalize ChatJoinMessage component * refactor: normalize ChatModerationActionMenu component * refactor: normalize ChatModerationDetailsModal component * refactor: normalize ChatModeratorNotification component * refactor: normalize ChatSocialMessage component * refactor: normalize ChatSystemMessage component * refactor: normalize ChatTextField component * refactor: normalize ChatUserBadge component * refactor: normalize ChatUserMessage component * refactor: normalize ContentHeader component * refactor: normalize OwncastLogo component * refactor: normalize UserDropdown component * chore(eslint): modify react/function-component-definition rule * refactor: normalize CodecSelector component * refactor: update a bunch of functional components using eslint * refactor: update a bunch of functional components using eslint, pt2 * refactor: update a bunch of functional components using eslint, pt3 * refactor: replace all component->component default imports with named imports * refactor: replace all component-stories->component default imports with named imports * refactor: remove default exports from most components * chore(eslint): add eslint config files for the components and pages dirs * fix: use-before-define error in ChatContainer * Fix ChatContainer import * Only process .tsx files in Next builds Co-authored-by: Gabe Kangas <gabek@real-ity.com>
2022-09-07 09:00:28 +02:00
parent ee333ef10a
commit d1f3fffe2f
178 changed files with 1258 additions and 1227 deletions
--- a/web/components/StatisticItem.tsx
+++ b/web/components/StatisticItem.tsx
@@ -0,0 +1,92 @@
+/* eslint-disable react/no-unused-prop-types */
+/* eslint-disable react/no-unstable-nested-components */
+// TODO: This component should be cleaned up and usage should be re-examined. The types should be reconsidered as well.
+
+import { Typography, Statistic, Card, Progress } from 'antd';
+import { FC } from 'react';
+
+const { Text } = Typography;
+
+export type StatisticItemProps = {
+  title?: string;
+  value?: any;
+  prefix?: any;
+  suffix?: string;
+  color?: string;
+  progress?: boolean;
+  centered?: boolean;
+  formatter?: any;
+};
+
+const defaultProps = {
+  title: '',
+  value: 0,
+  prefix: null,
+  suffix: null,
+  color: '',
+  progress: false,
+  centered: false,
+  formatter: null,
+};
+
+export type ContentProps = {
+  prefix: string;
+  value: any;
+  suffix: string;
+  title: string;
+};
+
+const Content: FC<ContentProps> = ({ prefix, value, suffix, title }) => (
+  <div>
+    {prefix}
+    <div>
+      <Text type="secondary">{title}</Text>
+    </div>
+    <div>
+      <Text type="secondary">
+        {value}
+        {suffix || '%'}
+      </Text>
+    </div>
+  </div>
+);
+
+const ProgressView: FC<StatisticItemProps> = ({ title, value, prefix, suffix, color }) => {
+  const endColor = value > 90 ? 'red' : color;
+  const content = <Content prefix={prefix} value={value} suffix={suffix} title={title} />;
+
+  return (
+    <Progress
+      type="dashboard"
+      percent={value}
+      width={120}
+      strokeColor={{
+        '0%': color,
+        '90%': endColor,
+      }}
+      format={() => content}
+    />
+  );
+};
+ProgressView.defaultProps = defaultProps;
+
+const StatisticView: FC<StatisticItemProps> = ({ title, value, prefix, formatter }) => (
+  <Statistic title={title} value={value} prefix={prefix} formatter={formatter} />
+);
+StatisticView.defaultProps = defaultProps;
+
+export const StatisticItem: FC<StatisticItemProps> = props => {
+  const { progress, centered } = props;
+  const View = progress ? ProgressView : StatisticView;
+
+  const style = centered ? { display: 'flex', alignItems: 'center', justifyContent: 'center' } : {};
+
+  return (
+    <Card type="inner">
+      <div style={style}>
+        <View {...props} />
+      </div>
+    </Card>
+  );
+};
+StatisticItem.defaultProps = defaultProps;