-
Notifications
You must be signed in to change notification settings - Fork 1k
/
Stack.js
62 lines (53 loc) · 1.71 KB
/
Stack.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import React, { Children, forwardRef } from 'react';
import { StyledStack, StyledStackLayer } from './StyledStack';
import { StackPropTypes } from './propTypes';
import { useThemeValue } from '../../utils/useThemeValue';
const buildStyledChildren =
({ anchor, fill, guidingIndex, interactiveChild, interactiveIndex }) =>
(child, index) => {
const interactive =
interactiveChild === undefined || interactiveIndex === index;
const isGuidingIndex = index === guidingIndex;
const props = isGuidingIndex
? { guiding: true, fillContainer: fill }
: { anchor };
return (
<StyledStackLayer key={index} interactive={interactive} {...props}>
{child}
</StyledStackLayer>
);
};
const Stack = forwardRef(
(
{ anchor, children, fill, guidingChild, interactiveChild, ...rest },
ref,
) => {
const { passThemeFlag } = useThemeValue();
const prunedChildren = Children.toArray(children).filter((c) => c);
const toChildIndex = (child) => {
let index = child;
if (index === 'first' || !index) index = 0;
else if (index === 'last') index = prunedChildren.length - 1;
return index;
};
const guidingIndex = toChildIndex(guidingChild);
const interactiveIndex = interactiveChild && toChildIndex(interactiveChild);
const styledChildren = prunedChildren.map(
buildStyledChildren({
anchor,
fill,
guidingIndex,
interactiveChild,
interactiveIndex,
}),
);
return (
<StyledStack ref={ref} fillContainer={fill} {...passThemeFlag} {...rest}>
{styledChildren}
</StyledStack>
);
},
);
Stack.displayName = 'Stack';
Stack.propTypes = StackPropTypes;
export { Stack };