Fixed copy paste on all components

This commit is contained in:
Lucas Oliveira 2023-07-20 17:17:48 -03:00
commit ab185f57bd
12 changed files with 23 additions and 77 deletions

View file

@ -152,7 +152,7 @@ export default function ParameterComponent({
return ( return (
<div <div
ref={ref} ref={ref}
className="nopan nodrag noundo nocopy mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2" className="mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2"
> >
<> <>
<div <div
@ -242,7 +242,6 @@ export default function ParameterComponent({
) : ( ) : (
<InputComponent <InputComponent
disabled={disabled} disabled={disabled}
disableCopyPaste={true}
password={data.node.template[name].password ?? false} password={data.node.template[name].password ?? false}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={handleOnNewValue} onChange={handleOnNewValue}
@ -264,7 +263,6 @@ export default function ParameterComponent({
<div className="mt-2 w-full"> <div className="mt-2 w-full">
<FloatComponent <FloatComponent
disabled={disabled} disabled={disabled}
disableCopyPaste={true}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={handleOnNewValue} onChange={handleOnNewValue}
/> />
@ -309,7 +307,6 @@ export default function ParameterComponent({
<div className="mt-2 w-full"> <div className="mt-2 w-full">
<IntComponent <IntComponent
disabled={disabled} disabled={disabled}
disableCopyPaste={true}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={handleOnNewValue} onChange={handleOnNewValue}
/> />

View file

@ -51,7 +51,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
)} )}
</div> </div>
<Input <Input
className="mt-2 font-normal" className="nopan nodrag noundo nocopy mt-2 font-normal"
onChange={handleNameChange} onChange={handleNameChange}
type="text" type="text"
name="name" name="name"

View file

@ -1,16 +1,12 @@
import { useContext, useEffect } from "react"; import { useEffect } from "react";
import { TabsContext } from "../../contexts/tabsContext";
import { FloatComponentType } from "../../types/components"; import { FloatComponentType } from "../../types/components";
export default function FloatComponent({ export default function FloatComponent({
value, value,
onChange, onChange,
disableCopyPaste = false,
disabled, disabled,
editNode = false, editNode = false,
}: FloatComponentType) { }: FloatComponentType) {
const { setDisableCopyPaste } = useContext(TabsContext);
const step = 0.1; const step = 0.1;
const min = 0; const min = 0;
const max = 1; const max = 1;
@ -25,12 +21,6 @@ export default function FloatComponent({
return ( return (
<div className={"w-full " + (disabled ? "float-component-pointer" : "")}> <div className={"w-full " + (disabled ? "float-component-pointer" : "")}>
<input <input
onFocus={() => {
if (disableCopyPaste) setDisableCopyPaste(true);
}}
onBlur={() => {
if (disableCopyPaste) setDisableCopyPaste(false);
}}
type="number" type="number"
step={step} step={step}
min={min} min={min}
@ -45,9 +35,10 @@ export default function FloatComponent({
max={max} max={max}
value={value ?? ""} value={value ?? ""}
className={ className={
editNode "nopan nodrag noundo nocopy " +
(editNode
? "input-edit-node" ? "input-edit-node"
: "input-primary" + (disabled ? " input-disable " : "") : "input-primary" + (disabled ? " input-disable " : ""))
} }
placeholder={ placeholder={
editNode ? "Number 0 to 1" : "Type a number from zero to one" editNode ? "Number 0 to 1" : "Type a number from zero to one"

View file

@ -1,18 +1,15 @@
import { useContext, useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { TabsContext } from "../../contexts/tabsContext";
import { InputComponentType } from "../../types/components"; import { InputComponentType } from "../../types/components";
import { classNames } from "../../utils/utils"; import { classNames } from "../../utils/utils";
export default function InputComponent({ export default function InputComponent({
value, value,
onChange, onChange,
disableCopyPaste = false,
disabled, disabled,
password, password,
editNode = false, editNode = false,
}: InputComponentType) { }: InputComponentType) {
const [pwdVisible, setPwdVisible] = useState(false); const [pwdVisible, setPwdVisible] = useState(false);
const { setDisableCopyPaste } = useContext(TabsContext);
// Clear component state // Clear component state
useEffect(() => { useEffect(() => {
@ -25,18 +22,13 @@ export default function InputComponent({
<div className={disabled ? "input-component-div" : "relative"}> <div className={disabled ? "input-component-div" : "relative"}>
<input <input
value={value} value={value}
onFocus={() => {
if (disableCopyPaste) setDisableCopyPaste(true);
}}
onBlur={() => {
if (disableCopyPaste) setDisableCopyPaste(false);
}}
className={classNames( className={classNames(
disabled ? " input-disable " : "", disabled ? " input-disable " : "",
password && !pwdVisible && value !== "" ? " text-clip password " : "", password && !pwdVisible && value !== "" ? " text-clip password " : "",
editNode ? " input-edit-node " : " input-primary ", editNode ? " input-edit-node " : " input-primary ",
password && editNode ? "pr-8" : "", password && editNode ? "pr-8" : "",
password && !editNode ? "pr-10" : "" password && !editNode ? "pr-10" : "",
"nopan nodrag noundo nocopy"
)} )}
placeholder={password && editNode ? "Key" : "Type something..."} placeholder={password && editNode ? "Key" : "Type something..."}
onChange={(e) => { onChange={(e) => {

View file

@ -40,9 +40,10 @@ export default function InputListComponent({
type="text" type="text"
value={i} value={i}
className={ className={
editNode "nopan nodrag noundo nocopy " +
(editNode
? "input-edit-node " ? "input-edit-node "
: "input-primary " + (disabled ? "input-disable" : "") : "input-primary " + (disabled ? "input-disable" : ""))
} }
placeholder="Type something..." placeholder="Type something..."
onChange={(e) => { onChange={(e) => {

View file

@ -1,15 +1,12 @@
import { useContext, useEffect } from "react"; import { useEffect } from "react";
import { TabsContext } from "../../contexts/tabsContext";
import { FloatComponentType } from "../../types/components"; import { FloatComponentType } from "../../types/components";
export default function IntComponent({ export default function IntComponent({
value, value,
onChange, onChange,
disableCopyPaste = false,
disabled, disabled,
editNode = false, editNode = false,
}: FloatComponentType) { }: FloatComponentType) {
const { setDisableCopyPaste } = useContext(TabsContext);
const min = 0; const min = 0;
// Clear component state // Clear component state
@ -27,12 +24,6 @@ export default function IntComponent({
} }
> >
<input <input
onFocus={() => {
if (disableCopyPaste) setDisableCopyPaste(true);
}}
onBlur={() => {
if (disableCopyPaste) setDisableCopyPaste(false);
}}
onKeyDown={(event) => { onKeyDown={(event) => {
if ( if (
event.key !== "Backspace" && event.key !== "Backspace" &&
@ -61,9 +52,10 @@ export default function IntComponent({
}} }}
value={value ?? ""} value={value ?? ""}
className={ className={
editNode "nopan nodrag noundo nocopy " +
(editNode
? " input-edit-node " ? " input-edit-node "
: " input-primary " + (disabled ? " input-disable" : "") : " input-primary " + (disabled ? " input-disable" : ""))
} }
placeholder={editNode ? "Integer number" : "Type an integer number"} placeholder={editNode ? "Integer number" : "Type an integer number"}
onChange={(e) => { onChange={(e) => {

View file

@ -1,6 +1,5 @@
import { useContext, useEffect } from "react"; import { useEffect } from "react";
import { TypeModal } from "../../constants/enums"; import { TypeModal } from "../../constants/enums";
import { TabsContext } from "../../contexts/tabsContext";
import GenericModal from "../../modals/genericModal"; import GenericModal from "../../modals/genericModal";
import { TextAreaComponentType } from "../../types/components"; import { TextAreaComponentType } from "../../types/components";
import IconComponent from "../genericIconComponent"; import IconComponent from "../genericIconComponent";
@ -11,8 +10,6 @@ export default function TextAreaComponent({
disabled, disabled,
editNode = false, editNode = false,
}: TextAreaComponentType) { }: TextAreaComponentType) {
const { setDisableCopyPaste } = useContext(TabsContext);
// Clear text area // Clear text area
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
@ -25,17 +22,11 @@ export default function TextAreaComponent({
<div className="flex w-full items-center"> <div className="flex w-full items-center">
<input <input
value={value} value={value}
onFocus={() => {
setDisableCopyPaste(true);
}}
onBlur={() => {
setDisableCopyPaste(false);
}}
className={ className={
(editNode (editNode
? " input-edit-node " ? " input-edit-node "
: " input-primary " + (disabled ? " input-disable" : "")) + : " input-primary " + (disabled ? " input-disable" : "")) +
" w-full" " nopan nodrag noundo nocopy w-full"
} }
placeholder={"Type something..."} placeholder={"Type something..."}
onChange={(e) => { onChange={(e) => {

View file

@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input <input
type={type} type={type}
className={cn( className={cn(
"flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", "nopan nodrag noundo nocopy flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className className
)} )}
ref={ref} ref={ref}

View file

@ -57,7 +57,7 @@ export default function RenameLabel(props) {
ref={inputRef} ref={inputRef}
onInput={resizeInput} onInput={resizeInput}
className={cn( className={cn(
"rounded-md bg-transparent px-2 outline-ring hover:outline focus:border-none focus:outline active:outline", "nopan nodrag noundo nocopy rounded-md bg-transparent px-2 outline-ring hover:outline focus:border-none focus:outline active:outline",
props.className props.className
)} )}
onBlur={() => { onBlur={() => {

View file

@ -1,4 +1,4 @@
import { ReactNode, useContext, useEffect, useState } from "react"; import { ReactNode } from "react";
import React from "react"; import React from "react";
import { import {
@ -9,7 +9,6 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "../../components/ui/dialog"; } from "../../components/ui/dialog";
import { TabsContext } from "../../contexts/tabsContext";
type ContentProps = { children: ReactNode }; type ContentProps = { children: ReactNode };
type HeaderProps = { children: ReactNode; description: string }; type HeaderProps = { children: ReactNode; description: string };
@ -97,24 +96,9 @@ function BaseModal({
break; break;
} }
const { disableCopyPaste, setDisableCopyPaste } = useContext(TabsContext);
const [keepDisabling, setKeepDisabling] = useState(false);
useEffect(() => {
if (keepDisabling) {
setDisableCopyPaste(true);
}
}, [disableCopyPaste]);
useEffect(() => {
if (!open) {
setKeepDisabling(false);
}
}, [open]);
//UPDATE COLORS AND STYLE CLASSSES //UPDATE COLORS AND STYLE CLASSSES
return ( return (
<Dialog modal={true} open={open} onOpenChange={setOpen}> <Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger className="w-full" hidden={triggerChild ? false : true}> <DialogTrigger className="w-full" hidden={triggerChild ? false : true}>
{triggerChild} {triggerChild}
</DialogTrigger> </DialogTrigger>

View file

@ -114,7 +114,7 @@ export default function ExtraSidebar() {
name="search" name="search"
id="search" id="search"
placeholder="Search" placeholder="Search"
className="input-search" className="nopan nodrag noundo nocopy input-search"
onChange={(e) => { onChange={(e) => {
handleSearchInput(e.target.value); handleSearchInput(e.target.value);
// Set search input state // Set search input state

View file

@ -7,7 +7,6 @@ export type InputComponentType = {
disabled?: boolean; disabled?: boolean;
onChange: (value: string) => void; onChange: (value: string) => void;
password: boolean; password: boolean;
disableCopyPaste?: boolean;
editNode?: boolean; editNode?: boolean;
onChangePass?: (value: boolean | boolean) => void; onChangePass?: (value: boolean | boolean) => void;
showPass?: boolean; showPass?: boolean;
@ -94,7 +93,6 @@ export type DisclosureComponentType = {
export type FloatComponentType = { export type FloatComponentType = {
value: string; value: string;
disabled?: boolean; disabled?: boolean;
disableCopyPaste?: boolean;
onChange: (value: string) => void; onChange: (value: string) => void;
editNode?: boolean; editNode?: boolean;
}; };