g.parotte
/
docker-infisical
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Converted Button component to typescript (#47)

Browse Source
pull/49/head
Vladyslav Matsiiako 1 year ago
parent 1961b92340
commit 634d5fe5c3
8 changed files with 12478 additions and 12449 deletions
Show Stats Download Patch File Download Diff File

111
frontend/components/basic/buttons/Button.js
Unescape View File

@ -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
Unescape View 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;
}

2
frontend/components/basic/table/UserTable.js
Unescape View File

@ -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(

19
frontend/jsconfig.json
Unescape View File

@ -1,19 +0,0 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/components/*": [
"components/*"
],
"~/utilities/*": [
"components/utilities/*"
],
"~/*": [
"const"
],
"~/pages/*": [
"pages/*"
],
}
}
}

5
frontend/next-env.d.ts vendored
Unescape View 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
View File

File diff suppressed because it is too large Load Diff

2
frontend/package.json
Unescape View File

@ -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
Unescape View 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"
]
}
Write Preview
Loading…
Cancel
Save