Create LargeList, LargeListItem components #793
Conversation
| import React, { ReactChildren, useState } from "react"; | ||
| import { StyleSheet, css } from "aphrodite"; | ||
|
|
||
| // Components | ||
| import LargeListItem from "~/components/Form/LargeListItem"; |
There was a problem hiding this comment.
Going forward, let's do away with this type of import styling. No one is really interested in what's imported unless they find some bug. In which case, they wouldn't care about the style of import anyways. Just make sure to alphabetize. (I think there's a VS-code ways to alphbetize. On MacOS, it's Fn + F9)
| import React, { ReactChildren, useState } from "react"; | |
| import { StyleSheet, css } from "aphrodite"; | |
| // Components | |
| import LargeListItem from "~/components/Form/LargeListItem"; | |
| import React, { ReactChildren, useState } from "react"; | |
| import { StyleSheet, css } from "aphrodite"; | |
| import LargeListItem from "~/components/Form/LargeListItem"; |
| selectMany: boolean; | ||
| useLargeHitbox: boolean; | ||
| customListStyle: StyleSheet; | ||
| onChange?: Function; | ||
| children: ReactChildren; |
| useLargeHitbox, | ||
| customListStyle, | ||
| onChange, | ||
| children, |
There was a problem hiding this comment.
No need for children. Let's just passdown an array of item. Better alternative would be just passdown prop-objects to List & list formats items accordingly. But either way works.
I would like to avoid playing around with children like you are doing below since children could be anything.
| children, | |
| items: Array<ReactElement<typeof LargeListItemProps>>, |
| onChange, | ||
| children, | ||
| }: LargeListProps) { | ||
| let [isActives, setIsActives] = useState(children.map(() => false)); |
There was a problem hiding this comment.
| let [isActives, setIsActives] = useState(children.map(() => false)); | |
| const [activeIndices, setActiveIndicies] = useState<Array<ids>>([]); |
| <LargeListItem | ||
| checkboxSquare={selectMany} | ||
| useLargeHitbox={useLargeHitbox} | ||
| isActive={isActives[index]} |
There was a problem hiding this comment.
| isActive={isActives[index]} | |
| isActive={activeIndices.includes([index])} |
| let changed; | ||
| if (selectMany) { | ||
| changed = [...isActives]; // Do not modify other boxes | ||
| } else { | ||
| changed = isActives.map(() => false); // Set all other boxes to false | ||
| } | ||
| changed[index] = value; | ||
| setIsActives(changed); | ||
| onChange && onChange({ isActives, index, value, id }); // Send information about the state change |
There was a problem hiding this comment.
Let's think about how we can refactor this based on the suggestions I've given above
| ); | ||
| }; | ||
|
|
||
| const wrappedChildren = children.map(renderListItem); |
There was a problem hiding this comment.
probably dont need this with suggestions
Revised requested changes from #785
LargeList/LargeListItem is the selectable list of gray, rectangular, containers underneath "Select your post type".