awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed the useRef issue

Browse Source
This commit is contained in:
Vladyslav Matsiiako
2022-11-29 22:27:41 -05:00
parent ef248e3944
commit 0fde680a11
1 changed files with 22 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/components/dashboard/DashboardInputField.js
View File

@@ -6,25 +6,6 @@ import guidGenerator from "../utilities/randomId";
const REGEX = /([$]{.*?})/g;
/**
* This function splits the input of a dashboard field into the parts that are inside and outside of ${...}
* @param {string} text - the value of the input in the Dashboard Input Field
* @returns
*/
const findReferences = (text) => {
var splitText = text.split("${");
let textArray = [splitText[0]];
for (var i = 1; i < splitText.length; i++) {
let insideBrackets = "${" + splitText[i].split("}")[0];
if (splitText[i].includes("}")) {
insideBrackets += "}";
}
textArray.push(insideBrackets);
textArray.push(splitText[i].split("}")[1]);
}
return textArray;
};
/**
* This component renders the input fields on the dashboard
* @param {object} obj - the order number of a keyPair
@@ -44,6 +25,12 @@ const DashboardInputField = ({
blurred,
duplicates
}) => {
const ref = useRef(null);
const syncScroll = (e) => {
ref.current.scrollTop = e.target.scrollTop;
ref.current.scrollLeft = e.target.scrollLeft;
};
if (type === "varName") {
const startsWithNumber = !isNaN(value.charAt(0)) && value != "";
const hasDuplicates = duplicates?.includes(value);
@@ -75,13 +62,6 @@ const DashboardInputField = ({
</div>
);
} else if (type === "value") {
const ref = useRef(null);
const syncScroll = (e) => {
ref.current.scrollTop = e.target.scrollTop;
ref.current.scrollLeft = e.target.scrollLeft;
};
return (
<div className="flex-col w-full">
<div
@@ -110,15 +90,27 @@ const DashboardInputField = ({
{
value
.split(REGEX)
.map((word, i) => {
.map((word, id) => {
if (word.match(REGEX) !== null) {
return (
<span key={i} className="text-yellow-400">
{word}
<span className="ph-no-capture text-yellow" key={id}>
{word.slice(0, 2)}
<span className="ph-no-capture text-yellow-200/80">
{word.slice(2, word.length - 1)}
</span>
{word.slice(word.length - 1, word.length) == "}" ? (
<span className="ph-no-capture text-yellow">
{word.slice(word.length - 1, word.length)}{" "}
</span>
) : (
<span className="ph-no-capture text-yellow-400">
{word.slice(word.length - 1, word.length)}{" "}
</span>
)}
</span>
);
} else {
return <span key={i}>{word}</span>;
return <span key={id} className="ph-no-capture">{word}</span>;
}
})
}