t
t
Explore posts from servers
SSolidJS
Created by t on 1/6/2024 in #support
My first solid component
import { createBreakpoints } from "@solid-primitives/media";
import { children, For, mergeProps } from "solid-js";

import type { JSX, ParentComponent } from "solid-js";

interface ColumnsProps extends JSX.HTMLAttributes<HTMLDivElement> {
columns?: number | Record<number, string>;
}

export const Columns: ParentComponent<ColumnsProps> = (_props) => {
const props = mergeProps({ columns: 3 }, _props);

const columnAmount = () =>
typeof props.columns === "object"
? Object.entries(createBreakpoints(props.columns)).reduce((acc, [key, value]) => (value ? Number(key) : acc), 1)
: props.columns;

const resolved = children(() => props.children).toArray;

const createColumns = () =>
resolved().reduce(
// eslint-disable-next-line solid/reactivity
(acc: JSX.Element[][], child, index) => (acc[index % columnAmount()]?.push(child), acc),
Array.from({ length: columnAmount() }, () => []),
);

return (
<div ref={console.log} {...props}>
<For each={createColumns()}>{(column) => <div>{column}</div>}</For>
</div>
);
};
import { createBreakpoints } from "@solid-primitives/media";
import { children, For, mergeProps } from "solid-js";

import type { JSX, ParentComponent } from "solid-js";

interface ColumnsProps extends JSX.HTMLAttributes<HTMLDivElement> {
columns?: number | Record<number, string>;
}

export const Columns: ParentComponent<ColumnsProps> = (_props) => {
const props = mergeProps({ columns: 3 }, _props);

const columnAmount = () =>
typeof props.columns === "object"
? Object.entries(createBreakpoints(props.columns)).reduce((acc, [key, value]) => (value ? Number(key) : acc), 1)
: props.columns;

const resolved = children(() => props.children).toArray;

const createColumns = () =>
resolved().reduce(
// eslint-disable-next-line solid/reactivity
(acc: JSX.Element[][], child, index) => (acc[index % columnAmount()]?.push(child), acc),
Array.from({ length: columnAmount() }, () => []),
);

return (
<div ref={console.log} {...props}>
<For each={createColumns()}>{(column) => <div>{column}</div>}</For>
</div>
);
};
40 replies
SSolidJS
Created by t on 1/6/2024 in #support
My first solid component
As for this I think I'll just disable eslint for that line
40 replies
SSolidJS
Created by t on 1/6/2024 in #support
My first solid component
Oh that makes sense
40 replies
SSolidJS
Created by t on 1/6/2024 in #support
My first solid component
How do I check if one is being created
40 replies
SSolidJS
Created by t on 1/6/2024 in #support
My first solid component
I don't think I understand how memos work
40 replies
SSolidJS
Created by t on 1/6/2024 in #support
My first solid component
That didn't work
40 replies
SSolidJS
Created by t on 1/6/2024 in #support
My first solid component
Childs isn't getting called here so you can't reduce it
40 replies
SSolidJS
Created by t on 1/6/2024 in #support
My first solid component
@joshwilsonvu can you help?
40 replies
SSolidJS
Created by t on 1/6/2024 in #support
My first solid component
I can't tell whether this is a false positive or something is actually wrong and I don't understand it
40 replies
SSolidJS
Created by t on 1/6/2024 in #support
My first solid component
This seems to be working fine too even though I'm getting a warning @ line 22 This function should be passed to a tracked scope (like createEffect) or an event handler because it contains reactivity, or else changes will be ignored.
40 replies
SSolidJS
Created by t on 1/6/2024 in #support
My first solid component
No description
40 replies
SSolidJS
Created by t on 1/6/2024 in #support
My first solid component
Unless I'm misunderstanding
40 replies
SSolidJS
Created by t on 1/6/2024 in #support
My first solid component
At least this works
40 replies
SSolidJS
Created by t on 1/6/2024 in #support
My first solid component
No description
40 replies
SSolidJS
Created by t on 1/6/2024 in #support
My first solid component
props.children is of the same type so I think 2. is wrong
40 replies
SSolidJS
Created by t on 1/6/2024 in #support
My first solid component
merged.children is of type JSX.Element | undefined so I can't iterate over it
40 replies
SSolidJS
Created by t on 1/6/2024 in #support
My first solid component
No description
40 replies
SSolidJS
Created by t on 1/6/2024 in #support
My first solid component
No description
40 replies
SSolidJS
Created by t on 1/6/2024 in #support
My first solid component
Code and image are the same, I attached it because I find Discord's codeblocks hard to read
40 replies