MARKET-1466 Cascade Select #184
Conversation
StasivPavlo
commented
Dec 22, 2022
StasivPavlo
commented
… bl-cascadeSelect-component
|
|
||
| | Action | Inputs | Return | | ||
| |---------------|--------|--------------------------| | ||
| | Get Select in | | Object: of a select item | |
There was a problem hiding this comment.
How about add an actions same as for default select?
Set Options
Get Options
Set Value
Get Value
There was a problem hiding this comment.
please describe these actions here in the doc
| return validItem; | ||
| }); | ||
|
|
||
| levelOfNesting--; |
There was a problem hiding this comment.
could you please explain the logic around ++/-- levelOfNesting
if it needs to calculate nesting depth would not it be better to pass a new level into the prepare function?
const prepare = (children, depth) => {
if (item.children) {
validItem = {
...validItem,
children: prepare(item.children, depth + 1),
};
parentItems.push({ code: item.code, isOpen: false, depth });
} else {
items.push(validItem);
}
}
const preparedCascade = prepare(cascade);
There was a problem hiding this comment.
As far as I understand, with this implementation, we will not be able to get the last depth value when this recursion ends. It's needed to get max depth
There was a problem hiding this comment.
why do you need to know about the max depth?
There was a problem hiding this comment.
get sorted and separated array of parentItems by levelOfNesting in the getNestedItems function
| const { display, classList, style, cascade, placeholder } = component; | ||
| const { onClickItem } = eventHandlers; | ||
|
|
||
| const [itemsCascade, setItemsCascade] = useState(); |
There was a problem hiding this comment.
what's the difference between them?
- itemsCascade
- parentItems
- items
There was a problem hiding this comment.
itemsCascadeis a validated object which comes from propertycascadeparentItemsis the array of arrays of parent items(items which have children) separated bylevelOfNestingitemsis the array of items which we can select(which haven't children)
There was a problem hiding this comment.
I still do not understand why we need 3 lists instead of a single one itemsCascade
we can validate/transform the source list into a list that suits all needs, the target list can have any structure we need and items can have all necessary information about clickable/nestingLevel/etc
There was a problem hiding this comment.
because it's easy to find items in an array, instead of an array of objects that have in turn, have their own array of objects
There was a problem hiding this comment.
parent reference should solve that problem
| let isCircular = false; | ||
| let cycleLocation; | ||
|
|
||
| function detect(obj, key) { |
| component.getCascade = () => itemsCascade; | ||
| component.setCascade = (cascade) => validate(cascade, setItemsCascade, setParentItems, setItems); | ||
|
|
||
| useEffect(() => component.el = cascadeSelectRef.current, []); |
| } | ||
|
|
||
| return ( | ||
| <div ref={ cascadeSelectRef } className={ cn('bl-cascadeSelect-component', ...classList) } style={ style }> |
There was a problem hiding this comment.
cn('bl-cascadeSelect-component', classList)
| export const findParentItem = (parentItems, item) => { | ||
| const { levelOfNesting, code } = item; | ||
|
|
||
| return parentItems[levelOfNesting].find(item => item.code === code); |
There was a problem hiding this comment.
to avoid reverse find you can build you data structure with the following way:
list = [
{
id: parent1,
label: I am parent item,
children: [
{
id:child1,
label: I am child 1,
parent: $refToTheParent1Object
}
]
}
]
where $refToTheParent1Object is list[0].children[0].parent = list[0]
There was a problem hiding this comment.
Is it a cyclic object? Isn't it?
| for (let i = 0; i < currentParentItems[levelOfNesting].length; i++) { | ||
| const { code: parentItemCode, isOpen } = currentParentItems[levelOfNesting][i]; | ||
|
|
||
| currentParentItems[levelOfNesting][i].isOpen = parentItemCode === code ? !isOpen : false; |
There was a problem hiding this comment.
in order to avoid modifying the entire state each time I can propose the following approach:
-
having a data structure of the list as described here https://github.com/Backendless/ui-builder-library/pull/184/files#r1095517200 you can build a specific
pathfor each item, for ex:parent1.child1 -
in the view you can determine if the leaf/branch must be open by comparing
selectedItem.path.startsWith(theViewItem.path)
|
|
||
| | Property | Type | Default Value | Logic | Data Binding | UI Setting | Description | | ||
| |-------------------|---------|---------------------|-----------------------------|--------------|------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | ||
| | Cascade | JSON | | Cascade Logic | YES | YES | Allows determinate an array of select items to display as the available options. Watch [Codeless Examples](#Examples). Signature of polygon: `[{name, code, ?children}]` | |
|
|
||
| | Property | Type | Default Value | Logic | Data Binding | UI Setting | Description | | ||
| |-------------------|---------|---------------------|-----------------------------|--------------|------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | ||
| | Cascade | JSON | | Cascade Logic | YES | YES | Allows determinate an array of select items to display as the available options. Watch [Codeless Examples](#Examples). Signature of polygon: `[{name, code, ?children}]` | |
| export const findParentItem = (parentItems, item) => { | ||
| const { levelOfNesting, code } = item; | ||
|
|
||
| return parentItems[levelOfNesting].find(item => item.code === code); |
| const { display, classList, style, cascade, placeholder } = component; | ||
| const { onClickItem } = eventHandlers; | ||
|
|
||
| const [itemsCascade, setItemsCascade] = useState(); |
There was a problem hiding this comment.
parent reference should solve that problem
