49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
import React from 'react'
|
|
|
|
import SelectedVariable from './SelectedVariable'
|
|
import colors from './variable-colors.yaml'
|
|
import R from 'ramda'
|
|
|
|
function convertHex(hex,opacity){
|
|
let r = parseInt(hex.substring(0,2), 16),
|
|
g = parseInt(hex.substring(2,4), 16),
|
|
b = parseInt(hex.substring(4,6), 16),
|
|
result =`rgba(${r},${g},${b},${opacity})`
|
|
|
|
return result
|
|
}
|
|
|
|
const Variable = ({color, name, selectVariable}) =>
|
|
<li
|
|
className="variable" style={{background: convertHex(color, .15)}}
|
|
onClick={() => selectVariable(name)} >
|
|
<h3>{name}</h3>
|
|
</li>
|
|
|
|
export default class Variables extends React.Component {
|
|
render(){
|
|
let {variables, selectedTags, selectedVariable, selectVariable} = this.props
|
|
console.log('variables prop in <Variables', variables)
|
|
// let
|
|
// variableSet =
|
|
// variables.reduce((set, {variable}) => set.add(variable), new Set()), // get unique variable names
|
|
// variableColors = [...variableSet].reduce((correspondance, v, i) => Object.assign(correspondance, {[v]: colors[i]}), {})
|
|
|
|
console.log('selectedVariable',selectedVariable)
|
|
if (selectedVariable != null)
|
|
return <SelectedVariable
|
|
variable={R.find(R.propEq('name', selectedVariable))(variables)}
|
|
selectedTags={selectedTags}
|
|
/>
|
|
|
|
return <ul id="variables">
|
|
{variables.map((v, i) =>
|
|
<Variable key={i}
|
|
color={colors[i]} name={v.name}
|
|
selectVariable={selectVariable}
|
|
/>
|
|
)}
|
|
</ul>
|
|
}
|
|
}
|