aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/views/common
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd/src/views/common')
-rw-r--r--FrontEnd/src/views/common/Menu.tsx26
-rw-r--r--FrontEnd/src/views/common/SearchInput.tsx13
-rw-r--r--FrontEnd/src/views/common/Spinner.tsx13
-rw-r--r--FrontEnd/src/views/common/TabPages.tsx20
-rw-r--r--FrontEnd/src/views/common/alert/AlertHost.tsx11
-rw-r--r--FrontEnd/src/views/common/button/LoadingButton.tsx23
-rw-r--r--FrontEnd/src/views/common/dailog/OperationDialog.tsx71
7 files changed, 66 insertions, 111 deletions
diff --git a/FrontEnd/src/views/common/Menu.tsx b/FrontEnd/src/views/common/Menu.tsx
index ae73a331..a5d2ec2c 100644
--- a/FrontEnd/src/views/common/Menu.tsx
+++ b/FrontEnd/src/views/common/Menu.tsx
@@ -1,9 +1,9 @@
import React from "react";
import classnames from "classnames";
-import { OverlayTrigger, OverlayTriggerProps, Popover } from "react-bootstrap";
import { useTranslation } from "react-i18next";
-import { BootstrapThemeColor, convertI18nText, I18nText } from "@/common";
+import { convertI18nText, I18nText } from "@/common";
+import { PaletteColorType } from "@/palette";
export type MenuItem =
| {
@@ -13,7 +13,7 @@ export type MenuItem =
type: "button";
text: I18nText;
iconClassName?: string;
- color?: BootstrapThemeColor;
+ color?: PaletteColorType;
onClick: () => void;
};
@@ -67,26 +67,14 @@ export default Menu;
export interface PopupMenuProps {
items: MenuItems;
- children: OverlayTriggerProps["children"];
+ children: React.ReactElement;
}
export const PopupMenu: React.FC<PopupMenuProps> = ({ items, children }) => {
const [show, setShow] = React.useState<boolean>(false);
const toggle = (): void => setShow(!show);
- return (
- <OverlayTrigger
- trigger="click"
- rootClose
- overlay={
- <Popover id="menu-popover">
- <Menu items={items} onItemClicked={() => setShow(false)} />
- </Popover>
- }
- show={show}
- onToggle={toggle}
- >
- {children}
- </OverlayTrigger>
- );
+ // TODO:
+
+ return <Menu items={items} onItemClicked={() => setShow(false)} />;
};
diff --git a/FrontEnd/src/views/common/SearchInput.tsx b/FrontEnd/src/views/common/SearchInput.tsx
index 79eb2732..fff11b95 100644
--- a/FrontEnd/src/views/common/SearchInput.tsx
+++ b/FrontEnd/src/views/common/SearchInput.tsx
@@ -1,7 +1,8 @@
import React, { useCallback } from "react";
import classnames from "classnames";
import { useTranslation } from "react-i18next";
-import { Spinner, Form, Button } from "react-bootstrap";
+
+import LoadingButton from "./button/LoadingButton";
export interface SearchInputProps {
value: string;
@@ -64,13 +65,9 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
"flex-shrink-0"
)}
>
- {props.loading ? (
- <Spinner variant="primary" animation="border" />
- ) : (
- <Button variant="outline-primary" onClick={props.onButtonClick}>
- {props.buttonText ?? t("search")}
- </Button>
- )}
+ <LoadingButton loading={props.loading} onClick={props.onButtonClick}>
+ {props.buttonText ?? t("search")}
+ </LoadingButton>
</div>
</div>
);
diff --git a/FrontEnd/src/views/common/Spinner.tsx b/FrontEnd/src/views/common/Spinner.tsx
new file mode 100644
index 00000000..783c9be2
--- /dev/null
+++ b/FrontEnd/src/views/common/Spinner.tsx
@@ -0,0 +1,13 @@
+import { PaletteColorType } from "@/palette";
+import React from "react";
+
+export interface SpinnerProps {
+ size?: "sm" | "md" | "lg" | number;
+ color?: PaletteColorType;
+}
+
+export default function Spinner(
+ props: SpinnerProps
+): React.ReactElement | null {
+ return <span />;
+}
diff --git a/FrontEnd/src/views/common/TabPages.tsx b/FrontEnd/src/views/common/TabPages.tsx
index 2b1d91cb..b7a9fb36 100644
--- a/FrontEnd/src/views/common/TabPages.tsx
+++ b/FrontEnd/src/views/common/TabPages.tsx
@@ -1,5 +1,4 @@
import React from "react";
-import { Nav } from "react-bootstrap";
import { useTranslation } from "react-i18next";
import { convertI18nText, I18nText, UiLogicError } from "@/common";
@@ -31,6 +30,8 @@ const TabPages: React.FC<TabPagesProps> = ({
pageContainerClassName,
pageContainerStyle,
}) => {
+ // TODO:
+
if (pages.length === 0) {
throw new UiLogicError("Page list can't be empty.");
}
@@ -47,23 +48,6 @@ const TabPages: React.FC<TabPagesProps> = ({
return (
<div className={className} style={style}>
- <Nav variant="tabs" className={navClassName} style={navStyle}>
- {pages.map((page) => (
- <Nav.Item key={page.id}>
- <Nav.Link
- active={tab === page.id}
- onClick={() => {
- setTab(page.id);
- }}
- >
- {convertI18nText(page.tabText, t)}
- </Nav.Link>
- </Nav.Item>
- ))}
- {actions != null && (
- <div className="ms-auto cru-tab-pages-action-area">{actions}</div>
- )}
- </Nav>
<div className={pageContainerClassName} style={pageContainerStyle}>
{currentPage.page}
</div>
diff --git a/FrontEnd/src/views/common/alert/AlertHost.tsx b/FrontEnd/src/views/common/alert/AlertHost.tsx
index 949be7ed..21b9882d 100644
--- a/FrontEnd/src/views/common/alert/AlertHost.tsx
+++ b/FrontEnd/src/views/common/alert/AlertHost.tsx
@@ -1,7 +1,6 @@
import React from "react";
import without from "lodash/without";
import { useTranslation } from "react-i18next";
-import { Alert } from "react-bootstrap";
import {
alertService,
@@ -52,13 +51,7 @@ export const AutoCloseAlert: React.FC<AutoCloseAlertProps> = (props) => {
};
return (
- <Alert
- className="m-3"
- variant={alert.type ?? "primary"}
- onClick={cancelTimer}
- onClose={close}
- dismissible
- >
+ <div className="m-3" onClick={cancelTimer}>
{(() => {
const { message } = alert;
if (typeof message === "function") {
@@ -66,7 +59,7 @@ export const AutoCloseAlert: React.FC<AutoCloseAlertProps> = (props) => {
return <Message />;
} else return convertI18nText(message, t);
})()}
- </Alert>
+ </div>
);
};
diff --git a/FrontEnd/src/views/common/button/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx
index fd1c19b3..aee83aa2 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.tsx
+++ b/FrontEnd/src/views/common/button/LoadingButton.tsx
@@ -1,26 +1,19 @@
import React from "react";
-const LoadingButton: React.FC<{ loading?: boolean } & ButtonProps> = ({
+import { CommonButtonProps } from "./common";
+import Button from "./Button";
+import Spinner from "../Spinner";
+
+const LoadingButton: React.FC<{ loading?: boolean } & CommonButtonProps> = ({
loading,
- variant,
disabled,
+ color,
...otherProps
}) => {
return (
- <Button
- variant={variant != null ? `outline-${variant}` : "outline-primary"}
- disabled={disabled || loading}
- {...otherProps}
- >
+ <Button color={color} disabled={disabled || loading} {...otherProps}>
{otherProps.children}
- {loading ? (
- <Spinner
- className="ms-1"
- variant={variant}
- animation="grow"
- size="sm"
- />
- ) : null}
+ {loading ? <Spinner color={color} /> : null}
</Button>
);
};
diff --git a/FrontEnd/src/views/common/dailog/OperationDialog.tsx b/FrontEnd/src/views/common/dailog/OperationDialog.tsx
index 129e85d5..1e765276 100644
--- a/FrontEnd/src/views/common/dailog/OperationDialog.tsx
+++ b/FrontEnd/src/views/common/dailog/OperationDialog.tsx
@@ -5,6 +5,8 @@ import moment from "moment";
import { convertI18nText, I18nText, UiLogicError } from "@/common";
+import { PaletteColorType } from "@/palette";
+
import Button from "../button/Button";
import LoadingButton from "../button/LoadingButton";
import Dialog from "./Dialog";
@@ -144,7 +146,7 @@ export interface OperationDialogProps<
open: boolean;
onClose: () => void;
title: I18nText | (() => React.ReactNode);
- themeColor?: "danger" | "success" | string;
+ themeColor?: PaletteColorType;
onProcess: (
inputs: MapOperationInputInfoValueTypeList<OperationInputInfoList>
) => Promise<TData>;
@@ -290,50 +292,42 @@ const OperationDialog = <
if (item.type === "text") {
return (
- <Form.Group key={index}>
+ <div key={index}>
{item.label && (
- <Form.Label>{convertI18nText(item.label, t)}</Form.Label>
+ <label>{convertI18nText(item.label, t)}</label>
)}
- <Form.Control
+ <input
type={item.password === true ? "password" : "text"}
value={value as string}
onChange={(e) => {
const v = e.target.value;
updateValue(index, v);
}}
- isInvalid={error != null}
disabled={process}
/>
- {error != null && (
- <Form.Control.Feedback type="invalid">
- {error}
- </Form.Control.Feedback>
- )}
- {item.helperText && (
- <Form.Text>{t(item.helperText)}</Form.Text>
- )}
- </Form.Group>
+ {error != null && <div>{error}</div>}
+ {item.helperText && <div>{t(item.helperText)}</div>}
+ </div>
);
} else if (item.type === "bool") {
return (
- <Form.Group key={index}>
- <Form.Check<"input">
+ <div key={index}>
+ <input
type="checkbox"
checked={value as boolean}
onChange={(event) => {
updateValue(index, event.currentTarget.checked);
}}
- label={convertI18nText(item.label, t)}
disabled={process}
/>
- </Form.Group>
+ <label>{convertI18nText(item.label, t)}</label>
+ </div>
);
} else if (item.type === "select") {
return (
- <Form.Group key={index}>
- <Form.Label>{convertI18nText(item.label, t)}</Form.Label>
- <Form.Control
- as="select"
+ <div key={index}>
+ <label>{convertI18nText(item.label, t)}</label>
+ <select
value={value as string}
onChange={(event) => {
updateValue(index, event.target.value);
@@ -348,14 +342,14 @@ const OperationDialog = <
</option>
);
})}
- </Form.Control>
- </Form.Group>
+ </select>
+ </div>
);
} else if (item.type === "color") {
return (
- <Form.Group key={index}>
+ <div key={index}>
{item.canBeNull ? (
- <Form.Check<"input">
+ <input
type="checkbox"
checked={value !== null}
onChange={(event) => {
@@ -365,42 +359,35 @@ const OperationDialog = <
updateValue(index, null);
}
}}
- label={convertI18nText(item.label, t)}
disabled={process}
/>
- ) : (
- <Form.Label>{convertI18nText(item.label, t)}</Form.Label>
- )}
+ ) : null}
+ <label>{convertI18nText(item.label, t)}</label>
{value !== null && (
<TwitterPicker
color={value as string}
onChange={(result) => updateValue(index, result.hex)}
/>
)}
- </Form.Group>
+ </div>
);
} else if (item.type === "datetime") {
return (
- <Form.Group key={index}>
+ <div key={index}>
{item.label && (
- <Form.Label>{convertI18nText(item.label, t)}</Form.Label>
+ <label>{convertI18nText(item.label, t)}</label>
)}
- <Form.Control
+ <input
type="datetime-local"
value={value as string}
onChange={(e) => {
const v = e.target.value;
updateValue(index, v);
}}
- isInvalid={error != null}
disabled={process}
/>
- {error != null && (
- <Form.Control.Feedback type="invalid">
- {error}
- </Form.Control.Feedback>
- )}
- </Form.Group>
+ {error != null && <div>{error}</div>}
+ </div>
);
}
})}
@@ -412,7 +399,7 @@ const OperationDialog = <
onClick={close}
/>
<LoadingButton
- variant={props.themeColor}
+ color={props.themeColor}
loading={process}
disabled={!canProcess}
onClick={() => {
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 21:07:26 +0000