victoraalvarez
victoraalvarez
SSolidJS
Created by victoraalvarez on 7/4/2023 in #support
Question on Functions vs Components
So if I wanted to switch from functions to <SourceDropdown /> would I have to pass the signals into each of the components manually? Because for example, levels depends on the source and field signals defined in a higher scope and (I think) the components scope doesnt work the same as the functions
10 replies
SSolidJS
Created by victoraalvarez on 7/4/2023 in #support
Question on Functions vs Components
I see, this is the return of my LayerPanel function
return (
<>
<ul class="list-group mt-2">
<li class="list-group-item d-flex ">

</li>
<li class="list-group-item d-flex ">
<div class="col">
<div class="source-row d-flex">{
SourceDropdown()
}</div>
<div class="data-row d-flex">{
FieldDropdown()
}<span class="px-1" style="color: blue;">@</span>{
LevelDropdown()
}</div>
</div>
<div class="col">

</div>
</li>
</ul>
</>
)
return (
<>
<ul class="list-group mt-2">
<li class="list-group-item d-flex ">

</li>
<li class="list-group-item d-flex ">
<div class="col">
<div class="source-row d-flex">{
SourceDropdown()
}</div>
<div class="data-row d-flex">{
FieldDropdown()
}<span class="px-1" style="color: blue;">@</span>{
LevelDropdown()
}</div>
</div>
<div class="col">

</div>
</li>
</ul>
</>
)
So there is/isn't a difference in using {SourceDropdown()} versus <SourceDropdown />?
10 replies
SSolidJS
Created by victoraalvarez on 7/4/2023 in #support
Question on Functions vs Components
ouff, the formatting on that is terrible, ill probably send a playground solidjs playground
10 replies
SSolidJS
Created by victoraalvarez on 7/4/2023 in #support
Question on Functions vs Components
export default function LayerPanel () {
const [data] = getData();

const [selectedSource, setSelectedSource] = createSignal("");

const SourceDropdown = () => {
if (data.state === "ready") {
const sources = parseModelData(data()).getSources();
const sourcesPair = sources.map(source => {
return {
[source]: SOURCE_LOOKUP[source]
}
});

return (
<>
<div class="dropdown">
<button class="btn btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
{ selectedSource() ? SOURCE_LOOKUP[selectedSource()] : "Select source..." }
</button>
<ul class="dropdown-menu">
<For each={ sourcesPair } fallback={"Loading..."}>
{(source) => <li><a onClick={
(event) => {
const value = event.currentTarget.textContent || "";
const key = Object.keys(SOURCE_LOOKUP).find(key => SOURCE_LOOKUP[key] === value);
setSelectedSource(key || "default");
}
} class="dropdown-item">{Object.values(source)}</a></li>}
</For>
</ul>
</div>
</>
)
}
}
export default function LayerPanel () {
const [data] = getData();

const [selectedSource, setSelectedSource] = createSignal("");

const SourceDropdown = () => {
if (data.state === "ready") {
const sources = parseModelData(data()).getSources();
const sourcesPair = sources.map(source => {
return {
[source]: SOURCE_LOOKUP[source]
}
});

return (
<>
<div class="dropdown">
<button class="btn btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
{ selectedSource() ? SOURCE_LOOKUP[selectedSource()] : "Select source..." }
</button>
<ul class="dropdown-menu">
<For each={ sourcesPair } fallback={"Loading..."}>
{(source) => <li><a onClick={
(event) => {
const value = event.currentTarget.textContent || "";
const key = Object.keys(SOURCE_LOOKUP).find(key => SOURCE_LOOKUP[key] === value);
setSelectedSource(key || "default");
}
} class="dropdown-item">{Object.values(source)}</a></li>}
</For>
</ul>
</div>
</>
)
}
}
10 replies
SSolidJS
Created by victoraalvarez on 7/3/2023 in #support
Uncaught ReferenceError: createDeepSignal is not defined
thanks so much!
5 replies