mirror of
https://github.com/ianarawjo/ChainForge.git
synced 2025-03-14 16:26:45 +00:00
sort of working CSV node -- without handles
This commit is contained in:
parent
1eee1c1d11
commit
c3820b1f59
@ -1,33 +1,81 @@
|
||||
import React, { useState, useRef, useEffect, useCallback } from 'react';
|
||||
import { Card, Text} from '@mantine/core';
|
||||
import { Card, Text } from '@mantine/core';
|
||||
import useStore from './store';
|
||||
import NodeLabel from './NodeLabelComponent'
|
||||
import { IconFileText } from '@tabler/icons-react';
|
||||
import { IconCsv, IconFileText } from '@tabler/icons-react';
|
||||
import { edit } from 'ace-builds';
|
||||
|
||||
const CsvNode = ({ data, id }) => {
|
||||
const setDataPropsForNode = useStore((state) => state.setDataPropsForNode);
|
||||
const content = "test content";
|
||||
const [contentDiv, setContentDiv] = useState(null);
|
||||
const [fields, setFields] = useState([]);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
const processCsv = (csv) => {
|
||||
// Split the input string by rows, and merge
|
||||
var res = csv.split('\n').join(',');
|
||||
|
||||
// remove all the empty or whitespace-only elements
|
||||
return res.split(',').map(e => e.trim()).filter(e => e.length > 0);
|
||||
}
|
||||
|
||||
// Handle a change in a text fields' input.
|
||||
const handleInputChange = useCallback((event) => {
|
||||
// Update the data for this text fields' id.
|
||||
let new_data = { 'text': event.target.value };
|
||||
let new_data = {'text': event.target.value};
|
||||
setDataPropsForNode(id, new_data);
|
||||
}, [id, setDataPropsForNode]);
|
||||
|
||||
const handKeyDown = useCallback((event) => {
|
||||
if (event.key === 'Enter') {
|
||||
setIsEditing(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleDivOnClick = useCallback((event) => {
|
||||
setIsEditing(true);
|
||||
}, []);
|
||||
|
||||
// Initialize fields (run once at init)
|
||||
useEffect(() => {
|
||||
if (!data.text) {
|
||||
setIsEditing(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// when data.text changes, update the content div
|
||||
useEffect(() => {
|
||||
if(isEditing) {
|
||||
var text_val = data.text || '';
|
||||
setContentDiv(
|
||||
<div className="input-field" key={id}>
|
||||
<textarea id={id} name={id} className="text-field-fixed nodrag" rows="2" cols="40" onChange={handleInputChange} placeholder='Paste your CSV text here' onKeyDown={handKeyDown} value={text_val} />
|
||||
</div>
|
||||
);
|
||||
return
|
||||
}
|
||||
if (!data.text) return;
|
||||
// Take the data.text as csv (only 1 row), and get individual elements
|
||||
const elements = processCsv(data.text);
|
||||
|
||||
// generate a HTML code that highlights the elements
|
||||
const html = [];
|
||||
elements.forEach((e, idx) => {
|
||||
html.push(<span key={idx} className="csv-element">{e}</span>);
|
||||
if (idx < elements.length - 1) {
|
||||
html.push(<span key={idx + 'comma'} className="csv-comma">,</span>);
|
||||
}
|
||||
});
|
||||
|
||||
setContentDiv(<div className='csv-div' onClick={handleDivOnClick}>
|
||||
{html}
|
||||
</div>);
|
||||
}, [id, data.text, isEditing, handleDivOnClick, handleInputChange, handKeyDown]);
|
||||
|
||||
return (
|
||||
<div className="text-fields-node cfnode">
|
||||
<NodeLabel title={data.title || 'CSV Node'} nodeId={id} icon={<IconFileText size="16px" />} />
|
||||
<Card shadow="sm" padding="lg" radius="md" withBorder>
|
||||
|
||||
<Text size="sm" color="dimmed">
|
||||
With Fjord Tours you can explore more of the magical fjord landscapes with tours and
|
||||
activities on and around the fjords of Norway
|
||||
</Text>
|
||||
</Card>
|
||||
|
||||
<NodeLabel title={data.title || 'CSV Node'} nodeId={id} icon={<IconCsv size="16px" />} />
|
||||
{contentDiv}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -21,4 +21,23 @@ code {
|
||||
|
||||
.script-node-input {
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.csv-element {
|
||||
position: relative;
|
||||
color: #ffffff;
|
||||
background-color: #2cba6c;
|
||||
font-size: inherit;
|
||||
padding: .2em .4em;
|
||||
border-radius: 6px;
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
/* set a muted text */
|
||||
.csv-comma {
|
||||
color: #FFC107;
|
||||
}
|
||||
|
||||
.csv-div {
|
||||
width: 350px;
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user