zilly-ui/src/styles/createSpacing.ts

Zilly web react ui components

export type SpacingOptions = number | ((factor: number) => string | number);
export default function createSpacing(spacingInput: SpacingOptions = 8) {
	let transform: Function;

	if (typeof spacingInput === "function") {
		transform = spacingInput;
	} else {
		if (typeof spacingInput !== "number") {
			console.warn(
				[
					`Zui: the \`theme.spacing\` value (${spacingInput}) is invalid.'`,
					`It should be a number or a function.`
				].join("\n")
			);
		}

		transform = (factor: number) => spacingInput * factor;
	}

	const spacing = (...args: Array<number>) => {
		if (args.length > 4) {
			console.warn(
				`Zui: Too many arguments provided, expected between 0 and 4, got ${args.length}`
			);
		}
		if (args.length === 0) {
			return transform(1);
		}

		if (args.length === 1) {
			return transform(args[0]);
		}

		return args
			.map(factor => {
				const output = transform(factor);
				return typeof output === "number" ? `${output}px` : output;
			})
			.join(" ");
	};

	return spacing;
}