Mobs Comments - Answer Overflow

function FileExplorer(props: Props) {
    const [components, setComponents] = createStore(["/"]);
    const [current, setCurrent] = createStore<Record<string, any>>({});

    const [directories, setDirectories] = createStore<Record<string, any>>({});
    const [files, setFiles] = createStore<Record<string, string>>({});

    onMount(() => {
        setCurrent(props.fs);
        loadData();
    });

    function loadData() {
        const dirs: typeof directories = {};
        const fls: typeof files = {};
        for (const key in current) {
            const item = current[key];
            if (typeof item === "object") {
                dirs[key] = item;
            } else {
                fls[key] = item;
            }
        }
        setDirectories(dirs);
        setFiles(fls);
    }

    function intoDir(name: string) {
        setCurrent((prev) => prev[name]);
        setComponents((prev) => [...prev, name, "/"]);
        loadData();
    }

    return (
        <div>
            <p>{components.join("")}</p>
            <For each={Object.entries(directories)}>
                {([name, value]) => (
                    <FileItem
                        name={name}
                        isDirectory={true}
                        value={value}
                        onClick={() => intoDir(name)}
                    />
                )}
            </For>
            <For each={Object.entries(files)}>
                {([name, value]) => (
                    <FileItem
                        name={name}
                        isDirectory={false}
                        value={value}
                        onClick={() => {}}
                    />
                )}
            </For>
        </div>
    );
}

function FileExplorer(props: Props) {
    const [components, setComponents] = createStore(["/"]);
    const [current, setCurrent] = createStore<Record<string, any>>({});

    const [directories, setDirectories] = createStore<Record<string, any>>({});
    const [files, setFiles] = createStore<Record<string, string>>({});

    onMount(() => {
        setCurrent(props.fs);
        loadData();
    });

    function loadData() {
        const dirs: typeof directories = {};
        const fls: typeof files = {};
        for (const key in current) {
            const item = current[key];
            if (typeof item === "object") {
                dirs[key] = item;
            } else {
                fls[key] = item;
            }
        }
        setDirectories(dirs);
        setFiles(fls);
    }

    function intoDir(name: string) {
        setCurrent((prev) => prev[name]);
        setComponents((prev) => [...prev, name, "/"]);
        loadData();
    }

    return (
        <div>
            <p>{components.join("")}</p>
            <For each={Object.entries(directories)}>
                {([name, value]) => (
                    <FileItem
                        name={name}
                        isDirectory={true}
                        value={value}
                        onClick={() => intoDir(name)}
                    />
                )}
            </For>
            <For each={Object.entries(files)}>
                {([name, value]) => (
                    <FileItem
                        name={name}
                        isDirectory={false}
                        value={value}
                        onClick={() => {}}
                    />
                )}
            </For>
        </div>
    );
}

When the intoDir function is called the current store object is not replaced with the new object, rather it for some reason is merging both objects which I am having a hard time understanding.

11 replies

SSolidJS

•Created by musiclover on 8/18/2024 in #support

Getting value from store is not reactive.

The problem is you're calling getParam and <MySlider value= {getParam (info)} /> is going to only get called once onMount so getParam wont get called again.

8 replies

SSolidJS

•Created by Mobs on 6/27/2024 in #support

Running into ambiguous error

When i change loadLabels back to the old implementation the error is not thrown and things go back to normal

5 replies

SSolidJS

•Created by Mobs on 6/27/2024 in #support

Running into ambiguous error

5 replies

SSolidJS

•Created by Mobs on 2/8/2024 in #support

[SOLVED] Textfield patterns (input masks)

In my case there are a variable number of inputs so keeping track of so many refs seems like a nightmare.

23 replies

SSolidJS

•Created by Mobs on 2/8/2024 in #support

[SOLVED] Textfield patterns (input masks)

function Counter() {
  const [text, setText] = createSignal(".meas analysis_type Delay_fall");
  
  const protectedTextRegex = new RegExp("^\.meas (?:[A-Za-z]+) Delay_fall");
  const mask = createInputMask((value, selection) => {
    return !protectedTextRegex.test(value)
    ? [text() + value.slice(text().length), [text().length, text().length]]
    : maskArrayToFn([value])(value, selection)
  });

  return (<div>
    <input value={text()} oninput={(e) => setText(mask(e))} />
    <button onclick={() => console.log(text())}>print text to console</button>
  </div>);
}

function Counter() {
  const [text, setText] = createSignal(".meas analysis_type Delay_fall");
  
  const protectedTextRegex = new RegExp("^\.meas (?:[A-Za-z]+) Delay_fall");
  const mask = createInputMask((value, selection) => {
    return !protectedTextRegex.test(value)
    ? [text() + value.slice(text().length), [text().length, text().length]]
    : maskArrayToFn([value])(value, selection)
  });

  return (<div>
    <input value={text()} oninput={(e) => setText(mask(e))} />
    <button onclick={() => console.log(text())}>print text to console</button>
  </div>);
}

This is pretty cool.

23 replies

SSolidJS

•Created by Mobs on 2/8/2024 in #support

[SOLVED] Textfield patterns (input masks)

Nevermind I played around with it I understand whats going on here.

23 replies

SSolidJS

•Created by Mobs on 2/8/2024 in #support

[SOLVED] Textfield patterns (input masks)

Also how is setRef being called here?

<textarea ref={setRef} oninput={mask}>{protectedText}</textarea>

<textarea ref={setRef} oninput={mask}>{protectedText}</textarea>

23 replies

SSolidJS

•Created by Mobs on 2/8/2024 in #support

[SOLVED] Textfield patterns (input masks)

But can you explain how this is working here?

  const mask = createInputMask((value, selection) => value.length < len 
    ? [protectedText, [len, len]] // little confused here
    : maskArrayToFn([protectedText, /.*/])(value, selection) // here too
  );

  const mask = createInputMask((value, selection) => value.length < len 
    ? [protectedText, [len, len]] // little confused here
    : maskArrayToFn([protectedText, /.*/])(value, selection) // here too
  );

23 replies

SSolidJS

•Created by Mobs on 2/8/2024 in #support

[SOLVED] Textfield patterns (input masks)

This is great. Thank you

23 replies

SSolidJS

•Created by Mobs on 2/8/2024 in #support

[SOLVED] Textfield patterns (input masks)

So I am trying to make a generic platform different electrical/electronic circuit sims and long story short they use these instructions which look like this more or less depending on the simulator.

.meas tran Delay_fall trig v(Vinp) val =0 td =1n fall =3 targ v(Vout) val =0 fall=3

.meas tran Delay_fall trig v(Vinp) val =0 td =1n fall =3 targ v(Vout) val =0 fall=3

And I need to keep track of the name in this case it is 'Delay_fall' for the above instruction. So in this case I can't let the user change the .meas tran Delay_fall (this is for one case and one kind of syntax) So I really don't know what kind of other cases I will run into in the future so I would like to have a flexible system.

23 replies

SSolidJS

•Created by Mobs on 2/8/2024 in #support

[SOLVED] Textfield patterns (input masks)

I actually have to go sleep in a bit I'll try to explain the use case more

23 replies

Gaming

Programming