New Grid API according issue #48

AlgusDark · Jun 24, 2017 · ac1e68c · ac1e68c
1 parent 6cce901
commit ac1e68c
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 116 deletions.
diff --git a/src/bulma.tsx b/src/bulma.tsx
@@ -53,7 +53,7 @@ export declare namespace Bulma {
         isParagraph?: boolean,
     }
 
-    export interface Grid extends Grid.HorizontalSize, Grid.Size, Grid.Offset {
+    export interface Grid extends Grid.HorizontalSize, Grid.Offset {
     }
 
     export type Platform = 'mobile' | 'tablet' | 'touch' | 'desktop' | 'widescreen';

diff --git a/src/grid/Column.tsx b/src/grid/Column.tsx
@@ -3,15 +3,14 @@ import * as classNames from 'classnames';
 
 import {
     Grid,
-    getHorizontalSizeModifiers, removeHorizontalSizeProps,
     getSizeModifiers, removeSizeProps,
     getOffsetModifiers, removeOffsetProps,
 } from './grid';
 import { Bulma, withHelpersModifiers } from './../bulma';
 import { getHTMLProps, combineModifiers } from './../helpers';
 
 export interface Column<T> extends
-    Grid.HorizontalSize, Grid.Size, Grid.Offset,
+    Grid.HorizontalSize, Grid.Offset,
     React.HTMLProps<T> { }
 
 export function Column(props: Column<HTMLDivElement>) {
@@ -20,7 +19,6 @@ export function Column(props: Column<HTMLDivElement>) {
         {
             ...combineModifiers(
                 props,
-                getHorizontalSizeModifiers,
                 getSizeModifiers,
                 getOffsetModifiers,
             )
@@ -30,7 +28,6 @@ export function Column(props: Column<HTMLDivElement>) {
 
     const HTMLProps = getHTMLProps(
         props,
-        removeHorizontalSizeProps,
         removeSizeProps,
         removeOffsetProps,
     );

diff --git a/src/grid/Tile.tsx b/src/grid/Tile.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
 import * as classNames from 'classnames';
 
-import { Grid, getHorizontalSizeModifiers, removeHorizontalSizeProps } from './grid';
+import { Grid, getGridSizesModifiers, removeGridSizesProps } from './grid';
 import { Bulma, withHelpersModifiers } from './../bulma';
 import { getHTMLProps } from './../helpers';
 
-export interface Tile<T> extends Bulma.Render, Grid.HorizontalSize,
+export interface Tile<T> extends Bulma.Render,
     React.HTMLProps<T> {
+    isSize?: Grid.Sizes,
     isAncestor?: boolean,
     isChild?: boolean,
     isParent?: boolean,
@@ -21,7 +22,7 @@ export function Tile(props: Tile<HTMLDivElement>) {
             'is-child': props.isChild,
             'is-parent': props.isParent,
             'is-vertical': props.isVertical,
-            ...getHorizontalSizeModifiers(props),
+            ...getGridSizesModifiers(props.isSize),
         },
         props.className
     );
@@ -35,7 +36,7 @@ export function Tile(props: Tile<HTMLDivElement>) {
         ...rest
     } = props;
 
-    const HTMLProps = getHTMLProps(rest, removeHorizontalSizeProps);
+    const HTMLProps = getHTMLProps(rest, removeGridSizesProps);
 
     if (render) return render({ ...HTMLProps, className });
 

diff --git a/src/grid/grid.ts b/src/grid/grid.ts
@@ -2,150 +2,100 @@ import { isMobile, isTablet, isDesktop } from './../bulma';
 import { isBetween, isOption } from './../helpers';
 
 export declare namespace Grid {
-    type Sizes = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    export type Sizes = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    type Fractions = '3/4' | '2/3' | '1/2' | '1/3' | '1/4';
+    type Width = 'full' | 'narrow';
+    type AllSizes = Sizes | Fractions | Width;
+
+    export interface SizeObject {
+        mobile?: AllSizes;
+        tablet?: AllSizes;
+        desktop?: AllSizes;
+        widescreen?: AllSizes;
+    }
+
     type Platforms = 'mobile' | 'tablet' | 'desktop';
 
     export interface HorizontalSize {
-        isSize?: Sizes,
+        isSize?: AllSizes | SizeObject,
     }
 
-    export interface Size {
-        isMobile?: Sizes,
-        isTablet?: Sizes,
-        isDesktop?: Sizes,
-
-        isFull?: boolean | Platforms | Platforms[],
-
-        isNarrow?: boolean | Platforms | Platforms[],
-
-        isThreeQuarters?: boolean | Platforms | Platforms[],
-
-        isTwoThirds?: boolean | Platforms | Platforms[],
-
-        isHalf?: boolean | Platforms | Platforms[],
-
-        isOneThird?: boolean | Platforms | Platforms[],
-
-        isOneQuarter?: boolean | Platforms | Platforms[],
+    export interface OffsetObject {
+        mobile?: Sizes | Fractions;
+        tablet?: Sizes | Fractions;
+        desktop?: Sizes | Fractions;
+        widescreen?: Sizes | Fractions;
     }
 
     export interface Offset {
-        isOffset?: Sizes,
-        isOffsetMobile?: Sizes,
-        isOffsetTablet?: Sizes,
-        isOffsetDesktop?: Sizes,
-
-        isOffsetThreeQuarters?: boolean | Platforms | Platforms[],
-
-        isOffsetTwoThirds?: boolean | Platforms | Platforms[],
-
-        isOffsetHalf?: boolean | Platforms | Platforms[],
-
-        isOffsetOneThird?: boolean | Platforms | Platforms[],
-
-        isOffsetOneQuarter?: boolean | Platforms | Platforms[],
+        isOffset?: Sizes | Fractions | OffsetObject,
     }
 
-    export interface NonHTMLProps extends HorizontalSize, Size, Offset {
+    export interface NonHTMLProps extends HorizontalSize, Offset {
 
     }
 }
 
 const isValidSize = isBetween(1, 12);
 const isPlatform = isOption(isMobile, isTablet, isDesktop);
 
-export function getHorizontalSizeModifiers({ isSize: size }: Grid.HorizontalSize) {
-    return (Number.isInteger(size) && isValidSize(size)) ? { [`is-${size}`]: true } : {}
+export function getGridSizesModifiers(isSize, isOffset = false, platform: boolean | string = false) {
+    return (Number.isInteger(isSize) && isValidSize(isSize)) ? { [`is-${isOffset ? 'offset-' : ''}${isSize}${isPlatform(platform) ? '-' + platform : ''}`]: true } : {}
 }
 
-export function removeHorizontalSizeProps(props: Grid.HorizontalSize) {
+export function removeGridSizesProps(props) {
     const {
         isSize,
         ...rest } = props;
     return rest;
 }
 
-const isValidAndInteger = (size) => Number.isInteger(size) ? isValidSize(size) : false;
-
-const getModifier = (modifier: boolean | Grid.Platforms | Grid.Platforms[], helper: string) => {
-    if (modifier === true) {
-        return { [`is-${helper}`]: true };
-    }
-    else if (typeof modifier === 'string') {
-        return isPlatform(modifier) ? { [`is-${helper}-${modifier}`]: true } : {};
-    }
-    else if (Array.isArray(modifier)) {
-        return modifier.map(str => str.toLowerCase().trim())
-            .reduce((init, option) => isPlatform(option) ? { ...init, [`is-${helper}-${option}`]: true } : init, {});
-    }
-    return {};
+const fractions = {
+    '3/4': 'three-quarters',
+    '2/3': 'two-thirds',
+    '1/2': 'half',
+    '1/3': 'one-third',
+    '1/4': 'one-quarter',
+}
+const width = {
+    'full': 'full',
+    'narrow': 'narrow',
 }
 
-export function getSizeModifiers(props: Grid.Size): object {
-    const platformSize = {
-        ...(isValidAndInteger(props.isMobile) ? { [`is-${props.isMobile}-mobile`]: true } : {}),
-        ...(isValidAndInteger(props.isTablet) ? { [`is-${props.isTablet}-tablet`]: true } : {}),
-        ...(isValidAndInteger(props.isDesktop) ? { [`is-${props.isDesktop}-desktop`]: true } : {}),
-    }
+function getGridFractionsModifiers(size, isOffset, platform) {
+    const sizes = !isOffset ? { ...fractions, ...width } : fractions;
 
-    return {
-        ...platformSize,
-        ...getModifier(props.isFull, 'full'),
-        ...getModifier(props.isNarrow, 'narrow'),
-        ...getModifier(props.isThreeQuarters, 'three-quarters'),
-        ...getModifier(props.isTwoThirds, 'two-thirds'),
-        ...getModifier(props.isHalf, 'half'),
-        ...getModifier(props.isOneThird, 'one-third'),
-        ...getModifier(props.isOneQuarter, 'one-quarter'),
-    }
+    return sizes[size] ? { [`is-${isOffset ? 'offset-' : ''}${sizes[size]}${isPlatform(platform) ? '-' + platform : ''}`]: true } : {}
 }
 
-export function removeSizeProps(props: Grid.Size) {
-    const {
-        isMobile,
-        isTablet,
-        isDesktop,
-        isFull,
-        isNarrow,
-        isThreeQuarters,
-        isTwoThirds,
-        isHalf,
-        isOneThird,
-        isOneQuarter,
-        ...rest } = props;
+function getGridObjectSizeModifiers(size, isOffset) {
+    return Object.keys(size).reduce((acc, key) => {
+        return isPlatform(key) ? { ...acc, ...getHorizontalSizeModifiers(size[key], isOffset, key) } : acc;
+    }, {});
+}
 
-    return rest;
+function getHorizontalSizeModifiers(size, isOffset = false, platform: boolean | string = false) {
+    if (typeof size === 'number') return getGridSizesModifiers(size, isOffset, platform);
+    if (typeof size === 'string') return getGridFractionsModifiers(size, isOffset, platform);
+    if (typeof size === 'object') return getGridObjectSizeModifiers(size, isOffset);
+    return {};
 }
 
-export function getOffsetModifiers(props: Grid.Offset) {
-    const platformSize = {
-        ...(isValidSize(props.isOffset) ? { [`is-offset-${props.isOffset}`]: true } : {}),
-        ...(isValidAndInteger(props.isOffsetMobile) ? { [`is-offset-${props.isOffsetMobile}-mobile`]: true } : {}),
-        ...(isValidAndInteger(props.isOffsetTablet) ? { [`is-offset-${props.isOffsetTablet}-tablet`]: true } : {}),
-        ...(isValidAndInteger(props.isOffsetDesktop) ? { [`is-offset-${props.isOffsetDesktop}-desktop`]: true } : {}),
-    }
+export function getSizeModifiers(props) {
+    return getHorizontalSizeModifiers(props.isSize);
+}
 
-    return {
-        ...platformSize,
-        ...getModifier(props.isOffsetThreeQuarters, 'offset-three-quarters'),
-        ...getModifier(props.isOffsetTwoThirds, 'offset-two-thirds'),
-        ...getModifier(props.isOffsetHalf, 'offset-half'),
-        ...getModifier(props.isOffsetOneThird, 'offset-one-third'),
-        ...getModifier(props.isOffsetOneQuarter, 'offset-one-quarter'),
-    }
+export function removeSizeProps(props) {
+    return removeGridSizesProps(props);
+}
+
+export function getOffsetModifiers(props) {
+    return getHorizontalSizeModifiers(props.isOffset, true);
 }
 
-export function removeOffsetProps(props: Grid.Offset) {
+export function removeOffsetProps(props) {
     const {
         isOffset,
-        isOffsetMobile,
-        isOffsetTablet,
-        isOffsetDesktop,
-        isOffsetThreeQuarters,
-        isOffsetTwoThirds,
-        isOffsetHalf,
-        isOffsetOneThird,
-        isOffsetOneQuarter,
         ...rest } = props;
     return rest;
 }
diff --git a/src/helpers.ts b/src/helpers.ts
@@ -10,4 +10,4 @@ export function combineModifiers(props: object, ...args: Array<Function>): objec
 
 export const isBetween = (min: number, max: number) => (value: number) => (value >= min && value <= max);
 export const is = (options: object) => (str: string): boolean => options[str] || false;
-export const isOption = (...fn: Function[]) => (str: string) => fn.some(option => option(str));
+export const isOption = (...fn: Function[]) => (str: string | boolean) => fn.some(option => option(str));