this repo has no description
phaz.uk
1import { createSignal, For, Show } from 'solid-js';
2import './ParameterList.css';
3
4export interface ParameterListProps{
5 setPopupOpen: ( open: boolean ) => void
6 value: { type: string, desc: string }[],
7 changed: ( value: { type: string, desc: string }[] ) => void
8}
9
10export let ParameterList = ( props: ParameterListProps ) => {
11 let [ parameters, setParameters ] = createSignal<{ type: string, desc: string }[]>(props.value, { equals: false });
12 let [ addParametersOpen, setAddParametersOpen ] = createSignal(false);
13
14 return (
15 <div class="parameter-list">
16 <div class="parameter-list-inner">
17 <div class="parameter-list-header">
18 <h1 style={{ float: 'left' }}>Parameter List</h1>
19 <div style={{ float: 'right' }} class="parameter-list-close">
20 <div style={{ background: 'red', width: '25px', height: '25px', cursor: 'pointer' }} onClick={() => props.setPopupOpen(false)}></div>
21 </div>
22 </div>
23 <div class="parameter-list-content">
24 <For each={parameters()}>
25 { ( i, index ) => <div style={{ display: 'flex' }}>
26 <div class="parameter-list-parameter">{ i.desc === "" ? i.type : i.desc + ` ${i.type}` }</div>
27 <div class="parameter-list-parameter parameter-list-parameter-delete" onClick={() => {
28 let params = parameters();
29 params.splice(index(), 1);
30
31 setParameters(params);
32 props.changed(params);
33 }}>
34 <img src="/assets/icons/trash-can-solid-full.svg" width="20" />
35 </div>
36 </div>}
37 </For>
38 <div class="button" onClick={() => { setAddParametersOpen(!addParametersOpen()) }}>Add Parameter + </div>
39 <Show when={addParametersOpen()}>
40 <div class="parameter-list-button-dropdown">
41 <div onClick={() => {
42 setAddParametersOpen(false);
43
44 let params = parameters();
45 params.push({ type: 'Float', desc: '' });
46
47 setParameters(params);
48 props.changed(params);
49 }}>Float Parameter</div>
50 <div onClick={() => {
51 setAddParametersOpen(false);
52
53 let params = parameters();
54 params.push({ type: 'Int', desc: '' });
55
56 setParameters(params);
57 props.changed(params);
58 }}>Integer Parameter</div>
59 <div onClick={() => {
60 setAddParametersOpen(false);
61
62 let params = parameters();
63 params.push({ type: 'Boolean', desc: '' });
64
65 setParameters(params);
66 props.changed(params);
67 }}>Boolean Parameter</div>
68 </div>
69 </Show>
70 </div>
71 </div>
72 </div>
73 )
74}