76 lines
1.9 KiB
JavaScript
76 lines
1.9 KiB
JavaScript
import React from "@modules/react";
|
|
import Utilities from "@modules/utilities";
|
|
|
|
|
|
export const Direction = Object.freeze({
|
|
VERTICAL: "bd-flex-vertical",
|
|
HORIZONTAL: "bd-flex-horizontal",
|
|
HORIZONTAL_REVERSE: "bd-flex-reverse"
|
|
});
|
|
|
|
export const Justify = Object.freeze({
|
|
START: "bd-flex-justify-start",
|
|
END: "bd-flex-justify-end",
|
|
CENTER: "bd-flex-justify-center",
|
|
BETWEEN: "bd-flex-justify-between",
|
|
AROUND: "bd-flex-justify-around"
|
|
});
|
|
|
|
export const Align = Object.freeze({
|
|
START: "bd-flex-align-start",
|
|
END: "bd-flex-align-end",
|
|
CENTER: "bd-flex-align-center",
|
|
STRETCH: "bd-flex-align-stretch",
|
|
BASELINE: "bd-flex-align-baseline"
|
|
});
|
|
|
|
export const Wrap = Object.freeze({
|
|
NO_WRAP: "bd-flex-no-wrap",
|
|
WRAP: "bd-flex-wrap",
|
|
WRAP_REVERSE: "bd-flex-wrap-reverse"
|
|
});
|
|
|
|
|
|
export function Child(props) {
|
|
if (!props.className) props.className = "";
|
|
props.className = Utilities.className(props.className, "bd-flex-child");
|
|
return <Flex {...props} />;
|
|
}
|
|
|
|
|
|
export default function Flex({
|
|
children,
|
|
className,
|
|
style,
|
|
shrink = 1,
|
|
grow = 1,
|
|
basis = "auto",
|
|
direction = Direction.HORIZONTAL,
|
|
align = Align.STRETCH,
|
|
justify = Justify.START,
|
|
wrap = Wrap.NO_WRAP
|
|
}) {
|
|
return <div
|
|
className={Utilities.className(
|
|
"bd-flex",
|
|
direction,
|
|
justify,
|
|
align,
|
|
wrap,
|
|
className
|
|
)}
|
|
style={Object.assign({
|
|
flexShrink: shrink,
|
|
flexGrow: grow,
|
|
flexBasis: basis
|
|
}, style)}
|
|
>
|
|
{children}
|
|
</div>;
|
|
}
|
|
|
|
Flex.Child = Child;
|
|
Flex.Direction = Direction;
|
|
Flex.Align = Align;
|
|
Flex.Justify = Justify;
|
|
Flex.Wrap = Wrap; |