app: Fonctionnalisation composant TermInput

This commit is contained in:
Mattéo Delabre 2019-11-27 02:06:22 -05:00
parent 95d1fd31cc
commit 8f488a0cb3
Signed by: matteo
GPG Key ID: AE3FBD02DC583ABB
3 changed files with 127 additions and 42 deletions

View File

@ -1,12 +1,17 @@
import React from 'react'; import React, {useState} from 'react';
import TermInput from './TermInput.js'; import TermInput from './TermInput.js';
import ResultsGraph from './ResultsGraph.js'; import ResultsGraph from './ResultsGraph.js';
const App = () => ( const App = () =>
<div className="App"> {
<TermInput /> const [terms, setTerms] = useState([]);
<ResultsGraph />
</div> return (
); <div className="App">
<TermInput terms={terms} setTerms={setTerms} />
<ResultsGraph />
</div>
);
};
export default App; export default App;

View File

@ -1,32 +1,53 @@
import React from 'react'; import React, {useState} from 'react';
class TermInput extends React.Component const enterKey = 13;
const TermInput = ({terms, setTerms}) =>
{ {
constructor(props) const [value, setValue] = useState('');
{
super(props);
this.state = { input: '' };
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(ev) const handleKeyDown = ev =>
{ {
this.setState({ if (ev.keyCode === enterKey)
input: ev.target.value {
}); ev.preventDefault();
}
render() if (!terms.includes(value))
{
setTerms(terms.concat([value]));
}
setValue('');
}
};
const handleChange = ev =>
{ {
return ( setValue(ev.target.value);
<div className="TermInput"> };
<input type="text"
className="TermInput_input" const handleRemove = removedTerm =>
value={this.state.input} {
onChange={this.handleInputChange} /> console.log(removedTerm);
</div> console.log(terms);
); setTerms(terms.filter(term => term !== removedTerm));
} };
return (
<div className="TermInput">
{terms.map(term =>
<span
className="TermInput_term"
onClick={handleRemove.bind(null, term)}
>{term}</span>
)}
<input
autofocus="true" type="text" className="TermInput_input"
placeholder="Rechercher un symptôme, un signe ou une maladie…"
value={value}
onChange={handleChange} onKeyDown={handleKeyDown} />
</div>
);
} }
export default TermInput; export default TermInput;

View File

@ -1,7 +1,18 @@
:root :root
{ {
--color-accent: #D80C49;
--color-secondary: #AE1246;
--color-light: #EEEEEE;
--color-dark: #1D1D1D;
--font-family: 'Source Sans Pro'; --font-family: 'Source Sans Pro';
--font-size: 18px; --font-size: 18px;
--font-color: var(--color-dark);
--base-size: 25px;
--animation-ease-out: cubic-bezier(0.075, 0.82, 0.165, 1);
--animation-short: .3s;
} }
body, html body, html
@ -11,8 +22,12 @@ body, html
outline: 0; outline: 0;
height: 100%; height: 100%;
background-color: var(--color-light);
font-family: var(--font-family); font-family: var(--font-family);
font-size: var(--font-size); font-size: var(--font-size);
line-height: var(--base-size);
color: var(--font-color);
} }
body, html, #root body, html, #root
@ -25,6 +40,9 @@ input
{ {
font-family: var(--font-family); font-family: var(--font-family);
font-size: var(--font-size); font-size: var(--font-size);
padding: 0 calc(.6 * var(--base-size));
height: calc(2 * var(--base-size));
} }
*, *::before, *::after *, *::before, *::after
@ -32,48 +50,89 @@ input
box-sizing: border-box; box-sizing: border-box;
} }
/**
* App
*/
.App .App
{ {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.TermInput .App .TermInput
{ {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
top: 32px; width: 600px;
top: calc(2 * var(--base-size));
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
}
border: 2px solid #333333; /**
* TermInput
*/
.TermInput
{
display: flex; display: flex;
align-items: center;
border: 2px solid var(--color-dark);
border-radius: 2px;
background: white;
transition: box-shadow var(--animation-short) var(--animation-ease-out);
} }
.TermInput:focus-within .TermInput:focus-within
{ {
outline: 2px solid #333333; box-shadow:
-1px -1px 0px var(--color-dark),
1px -1px 0px var(--color-dark),
1px 1px 0px var(--color-dark),
-1px 1px 0px var(--color-dark);
}
.TermInput_term
{
display: inline-block;
background: var(--color-secondary);
color: var(--color-light);
border-radius: 2px;
padding: calc(.2 * var(--base-size));
margin-left: calc(.3 * var(--base-size));
cursor: pointer;
transition: background var(--animation-short) var(--animation-ease-out);
}
.TermInput_term:hover
{
background: var(--color-accent);
} }
.TermInput_input .TermInput_input
{ {
flex: 1; flex: 1;
padding: 6px 12px;
border: none; border: none;
width: 600px;
} }
.ResultsGraph, .ResultsGraph div, .ResultsGraph svg /**
{ * Graph
width: 100%; */
height: 100%;
}
.Graph .Graph
{ {
position: relative; position: relative;
display: block; display: block;
width: 100%;
height: 100%;
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
} }
@ -91,7 +150,7 @@ input
.Graph_edgesContainer line .Graph_edgesContainer line
{ {
stroke: black; stroke: var(--color-dark);
} }
.Graph_node .Graph_node