zilly-ui/src/styles/grid/index.ts

Zilly web react ui components

import { createStyles } from "@material-ui/styles";
import withStyles from "../withStyles";
import defaultTheme from "../defaultTheme";
import { Breakpoint, keys as breakpointKeys } from "../createBreakpoints";
import { GridClassKey } from "../../grid/type";
const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const GRID_SIZES = ["auto", true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

function generateGutter(theme: typeof defaultTheme, breakpoint: Breakpoint) {
	const styles: any = {};

	SPACINGS.forEach(spacing => {
		const themeSpacing = theme.spacing(spacing);

		if (themeSpacing === 0) {
			return;
		}

		styles[`spacing-${breakpoint}-${spacing}`] = {
			margin: -themeSpacing / 2,
			width: `calc(100% + ${themeSpacing}px)`,
			"& > $item": {
				padding: themeSpacing / 2
			}
		};
	});

	return styles;
}

function generateGrid(globalStyles: any, theme: typeof defaultTheme, breakpoint: Breakpoint) {
	const styles: any = {};

	GRID_SIZES.forEach(size => {
		const key = `grid-${breakpoint}-${size}`;
		if (size === true) {
			styles[key] = {
				flexBasis: 0,
				flexGrow: 1,
				maxWidth: "100%"
			};
			return;
		}

		if (size === "auto") {
			styles[key] = {
				flexBasis: "auto",
				flexGrow: 0,
				maxWidth: "none"
			};
			return;
		}
		if (typeof size === "number") {
			const width = `${Math.round((size / 12) * 10e7) / 10e5}%`;

			styles[key] = {
				flexBasis: width,
				flexGrow: 0,
				maxWidth: width
			};
		}
	});

	if (breakpoint === "xs") {
		Object.assign(globalStyles, styles);
	} else {
		globalStyles[theme.breakpoints.up(breakpoint)] = styles;
	}
}

export default withStyles<GridClassKey>(
	theme =>
		createStyles({
			root: {},
			container: {
				boxSizing: "border-box",
				display: "flex",
				flexWrap: "wrap",
				width: "100%"
			},
			//if item === true
			item: {
				boxSizing: "border-box",
				margin: "0"
			},
			/* if `zeroMinWidth={true}`. */
			zeroMinWidth: {
				minWidth: 0
			},
			/* if `direction="column"`. */
			"direction-xs-column": {
				flexDirection: "column"
			},
			/* if `direction="column-reverse" */
			"direction-xs-column-reverse": {
				flexDirection: "column-reverse"
			},
			/* if `wrap="nowrap"` */
			"wrap-xs-nowrap": {
				flexWrap: "nowrap"
			},
			/* if `wrap="reverse"`. */
			"wrap-xs-wrap-reverse": {
				flexWrap: "wrap-reverse"
			},
			/* `alignItems="center"` */
			"align-items-xs-center": {
				alignItems: "center"
			},
			/* `alignItems="flex-start"` */
			"align-items-xs-flex-start": {
				alignItems: "flex-start"
			},
			/* if `alignItems="baseline"`. */
			"align-items-xs-baseline": {
				alignItems: "baseline"
			},
			/* if `alignContent="center"`.  */
			"align-content-xs-center": {
				alignContent: "center"
			},
			/* `alignContent="flex-start"` */
			"align-content-xs-flex-start": {
				alignContent: "flex-start"
			},
			/* `alignContent="flex-end" */
			"align-content-xs-flex-end": {
				alignContent: "flex-end"
			},
			/* Styles applied to the root element if `alignContent="space-between"`. */
			"align-content-xs-space-between": {
				alignContent: "space-between"
			},
			/* Styles applied to the root element if `alignContent="space-around"`. */
			"align-content-xs-space-around": {
				alignContent: "space-around"
			},
			/* Styles applied to the root element if `justify="center"`. */
			"justify-xs-center": {
				justifyContent: "center"
			},
			/* Styles applied to the root element if `justify="flex-end"`. */
			"justify-xs-flex-end": {
				justifyContent: "flex-end"
			},
			/* Styles applied to the root element if `justify="space-between"`. */
			"justify-xs-space-between": {
				justifyContent: "space-between"
			},
			/* Styles applied to the root element if `justify="space-around"`. */
			"justify-xs-space-around": {
				justifyContent: "space-around"
			},
			/* Styles applied to the root element if `justify="space-evenly"`. */
			"justify-xs-space-evenly": {
				justifyContent: "space-evenly"
			},
			...generateGutter(theme, "xs"),
			...breakpointKeys.reduce((accumulator, key) => {
				// Use side effect over immutability for better performance.
				generateGrid(accumulator, theme, key as any);
				return accumulator;
			}, {})
		}),
	{ name: "ZuiGrid" }
);