mirror of
https://github.com/Infisical/infisical.git
synced 2026-01-08 23:18:05 -05:00
Converted Button component to typescript (#47)
This commit is contained in:
Vladyslav Matsiiako
@@ -1,111 +0,0 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { faPlus } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
var classNames = require("classnames");
|
||||
|
||||
export default function Button({
|
||||
text,
|
||||
onButtonPressed,
|
||||
link,
|
||||
loading,
|
||||
color,
|
||||
size,
|
||||
icon,
|
||||
active = true,
|
||||
iconDisabled,
|
||||
textDisabled,
|
||||
}) {
|
||||
let styleButton = classNames(
|
||||
"group m-auto md:m-0 inline-block rounded-md duration-200",
|
||||
|
||||
// Setting background colors and hover modes
|
||||
color == "mineshaft" && active && "bg-mineshaft-700 hover:bg-primary",
|
||||
color == "mineshaft" && !active && "bg-mineshaft",
|
||||
(color == "primary" || !color) && active && "bg-primary hover:opacity-80",
|
||||
(color == "primary" || !color) && !active && "bg-primary",
|
||||
color == "red" && "bg-red",
|
||||
|
||||
// Changing the opacity when active vs when not
|
||||
active ? "opacity-100 cursor-pointer" : "opacity-40",
|
||||
|
||||
// Setting the button sizes
|
||||
size == "md" && "h-10 w-full px-2 md:px-4",
|
||||
size == "lg" && "h-12 w-full px-2 md:px-8",
|
||||
!size && "md:py-1 px-3 md:px-8",
|
||||
size == "icon-md" && "h-10 w-10 flex items-center justify-center",
|
||||
size == "icon-sm" && "h-9 w-9 flex items-center justify-center"
|
||||
);
|
||||
|
||||
let styleMainDiv = classNames(
|
||||
"relative font-medium flex items-center",
|
||||
|
||||
// Setting the text color for the text and icon
|
||||
color == "mineshaft" && "text-gray-400",
|
||||
color != "mineshaft" && color != "red" && "text-black",
|
||||
color == "red" && "text-gray-200",
|
||||
active && color != "red" ? "group-hover:text-black" : "",
|
||||
|
||||
size == "icon" && "flex items-center justify-center"
|
||||
);
|
||||
|
||||
let textStyle = classNames(
|
||||
"relative duration-200",
|
||||
|
||||
// Show the loading sign if the loading indicator is on
|
||||
loading == true ? "opacity-0" : "opacity-100",
|
||||
size == "md" && "text-sm",
|
||||
size == "lg" && "text-lg"
|
||||
);
|
||||
|
||||
const button = (
|
||||
<button
|
||||
disabled={!active}
|
||||
onClick={onButtonPressed}
|
||||
className={styleButton}
|
||||
>
|
||||
<div className={styleMainDiv}>
|
||||
<div
|
||||
className={`${
|
||||
loading == true ? "opacity-100" : "opacity-0"
|
||||
} absolute flex items-center px-2 duration-200`}
|
||||
>
|
||||
<Image
|
||||
src="/images/loading/loadingblack.gif"
|
||||
height={25}
|
||||
width={42}
|
||||
alt="loading animation"
|
||||
className={`rounded-xl`}
|
||||
></Image>
|
||||
</div>
|
||||
{icon && (
|
||||
<FontAwesomeIcon
|
||||
icon={icon}
|
||||
className={`flex my-auto font-extrabold ${
|
||||
size == "icon-sm" ? "text-sm" : "text-md"
|
||||
} ${(text || textDisabled) && "mr-2"}`}
|
||||
/>
|
||||
)}
|
||||
{iconDisabled && (
|
||||
<FontAwesomeIcon
|
||||
icon={iconDisabled}
|
||||
className={`flex my-auto font-extrabold ${
|
||||
size == "icon-sm" ? "text-sm" : "text-md"
|
||||
} ${(text || textDisabled) && "mr-2"}`}
|
||||
/>
|
||||
)}
|
||||
{(text || textDisabled) && (
|
||||
<p className={textStyle}>{active ? text : textDisabled}</p>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
|
||||
if (link) {
|
||||
return <Link href={link}>{button}</Link>;
|
||||
}
|
||||
|
||||
return button;
|
||||
}
|
||||
111
frontend/components/basic/buttons/Button.tsx
Normal file
111
frontend/components/basic/buttons/Button.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import { IconProp } from "@fortawesome/fontawesome-svg-core";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
var classNames = require("classnames");
|
||||
|
||||
type ButtonProps = {
|
||||
text: string;
|
||||
onButtonPressed: () => void;
|
||||
loading: boolean;
|
||||
color: string;
|
||||
size: string;
|
||||
icon: IconProp;
|
||||
active: boolean;
|
||||
iconDisabled: string;
|
||||
textDisabled: string;
|
||||
}
|
||||
|
||||
export default function Button (props: ButtonProps): JSX.Element {
|
||||
// Check if the button show always be 'active' - then true;
|
||||
// or if it should switch between 'active' and 'disabled' - then give the status
|
||||
const activityStatus = props.active || (props.text != "" && props.textDisabled == undefined)
|
||||
|
||||
let styleButton = classNames(
|
||||
"group m-auto md:m-0 inline-block rounded-md duration-200",
|
||||
|
||||
// Setting background colors and hover modes
|
||||
props.color == "mineshaft" && activityStatus && "bg-mineshaft-700 hover:bg-primary",
|
||||
props.color == "mineshaft" && !activityStatus && "bg-mineshaft",
|
||||
(props.color == "primary" || !props.color) && activityStatus && "bg-primary hover:opacity-80",
|
||||
(props.color == "primary" || !props.color) && !activityStatus && "bg-primary",
|
||||
props.color == "red" && "bg-red",
|
||||
|
||||
// Changing the opacity when active vs when not
|
||||
activityStatus ? "opacity-100 cursor-pointer" : "opacity-40",
|
||||
|
||||
// Setting the button sizes
|
||||
props.size == "md" && "h-10 w-full px-2 md:px-4",
|
||||
props.size == "lg" && "h-12 w-full px-2 md:px-8",
|
||||
!props.size && "md:py-1 px-3 md:px-8",
|
||||
props.size == "icon-md" && "h-10 w-10 flex items-center justify-center",
|
||||
props.size == "icon-sm" && "h-9 w-9 flex items-center justify-center"
|
||||
);
|
||||
|
||||
let styleMainDiv = classNames(
|
||||
"relative font-medium flex items-center",
|
||||
|
||||
// Setting the text color for the text and icon
|
||||
props.color == "mineshaft" && "text-gray-400",
|
||||
props.color != "mineshaft" && props.color != "red" && "text-black",
|
||||
props.color == "red" && "text-gray-200",
|
||||
activityStatus && props.color != "red" ? "group-hover:text-black" : "",
|
||||
|
||||
props.size == "icon" && "flex items-center justify-center"
|
||||
);
|
||||
|
||||
let textStyle = classNames(
|
||||
"relative duration-200",
|
||||
|
||||
// Show the loading sign if the loading indicator is on
|
||||
props.loading == true ? "opacity-0" : "opacity-100",
|
||||
props.size == "md" && "text-sm",
|
||||
props.size == "lg" && "text-lg"
|
||||
);
|
||||
|
||||
const button = (
|
||||
<button
|
||||
disabled={!activityStatus}
|
||||
onClick={props.onButtonPressed}
|
||||
className={styleButton}
|
||||
>
|
||||
<div className={styleMainDiv}>
|
||||
<div
|
||||
className={`${
|
||||
props.loading == true ? "opacity-100" : "opacity-0"
|
||||
} absolute flex items-center px-2 duration-200`}
|
||||
>
|
||||
<Image
|
||||
src="/images/loading/loadingblack.gif"
|
||||
height={25}
|
||||
width={42}
|
||||
alt="loading animation"
|
||||
className={`rounded-xl`}
|
||||
></Image>
|
||||
</div>
|
||||
{props.icon && (
|
||||
<FontAwesomeIcon
|
||||
icon={props.icon as IconProp}
|
||||
className={`flex my-auto font-extrabold ${
|
||||
props.size == "icon-sm" ? "text-sm" : "text-md"
|
||||
} ${(props.text || props.textDisabled) && "mr-2"}`}
|
||||
/>
|
||||
)}
|
||||
{props.iconDisabled && (
|
||||
<FontAwesomeIcon
|
||||
icon={props.iconDisabled as IconProp}
|
||||
className={`flex my-auto font-extrabold ${
|
||||
props.size == "icon-sm" ? "text-sm" : "text-md"
|
||||
} ${(props.text || props.textDisabled) && "mr-2"}`}
|
||||
/>
|
||||
)}
|
||||
{(props.text || props.textDisabled) && (
|
||||
<p className={textStyle}>{activityStatus ? props.text : props.textDisabled}</p>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
|
||||
return button;
|
||||
}
|
||||
@@ -185,7 +185,7 @@ const UserTable = ({
|
||||
)}
|
||||
{(row.status == "invited" ||
|
||||
row.status == "verified") && (
|
||||
<div className="w-full pl-12">
|
||||
<div className="w-full pl-9">
|
||||
<Button
|
||||
onButtonPressed={() =>
|
||||
deleteMembershipAndResendInvite(
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"~/components/*": [
|
||||
"components/*"
|
||||
],
|
||||
"~/utilities/*": [
|
||||
"components/utilities/*"
|
||||
],
|
||||
"~/*": [
|
||||
"const"
|
||||
],
|
||||
"~/pages/*": [
|
||||
"pages/*"
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
5
frontend/next-env.d.ts
vendored
Normal file
5
frontend/next-env.d.ts
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
24632
frontend/package-lock.json
generated
24632
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -16,7 +16,6 @@
|
||||
"@fortawesome/free-solid-svg-icons": "^6.1.2",
|
||||
"@fortawesome/react-fontawesome": "^0.1.19",
|
||||
"@headlessui/react": "^1.6.6",
|
||||
"@heroicons/react": "^1.0.6",
|
||||
"@reduxjs/toolkit": "^1.8.3",
|
||||
"@stripe/react-stripe-js": "^1.10.0",
|
||||
"@stripe/stripe-js": "^1.35.0",
|
||||
@@ -53,6 +52,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/typography": "^0.5.4",
|
||||
"@types/node": "18.11.9",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint-config-next": "^13.0.5",
|
||||
|
||||
45
frontend/tsconfig.json
Normal file
45
frontend/tsconfig.json
Normal file
@@ -0,0 +1,45 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"~/components/*": [
|
||||
"components/*"
|
||||
],
|
||||
"~/utilities/*": [
|
||||
"components/utilities/*"
|
||||
],
|
||||
"~/*": [
|
||||
"const"
|
||||
],
|
||||
"~/pages/*": [
|
||||
"pages/*"
|
||||
]
|
||||
},
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx"
|
||||
, "components/basic/layout.js" ],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user