From 125051a35405e3987e64bf86a4a315d0aab86e3f Mon Sep 17 00:00:00 2001 From: Alexander Fedyashov Date: Thu, 26 Jan 2017 21:19:38 +0200 Subject: [PATCH 1/2] style(Grid): update typings and propTypes usage --- src/collections/Grid/Grid.js | 36 ++++++++----------- src/collections/Grid/GridColumn.js | 39 +++++++-------------- src/collections/Grid/GridRow.js | 22 +++++------- src/collections/Grid/index.d.ts | 24 +++++++++---- test/specs/collections/Grid/Grid-test.js | 2 +- test/specs/collections/Grid/GridRow-test.js | 8 ++--- 6 files changed, 57 insertions(+), 74 deletions(-) diff --git a/src/collections/Grid/Grid.js b/src/collections/Grid/Grid.js index 392727c584..34cc3abab9 100644 --- a/src/collections/Grid/Grid.js +++ b/src/collections/Grid/Grid.js @@ -24,10 +24,10 @@ function Grid(props) { const { celled, centered, - container, children, className, columns, + container, divided, doubling, padded, @@ -69,16 +69,6 @@ Grid.Row = GridRow Grid._meta = { name: 'Grid', type: META.TYPES.COLLECTION, - props: { - celled: ['internally'], - columns: [...SUI.WIDTHS, 'equal'], - divided: ['vertically'], - padded: ['horizontally', 'vertically'], - relaxed: ['very'], - reversed: ['computer', 'computer vertically', 'mobile', 'mobile vertically', 'tablet', 'tablet vertically'], - textAlign: SUI.TEXT_ALIGNMENTS, - verticalAlign: SUI.VERTICAL_ALIGNMENTS, - }, } Grid.propTypes = { @@ -88,15 +78,12 @@ Grid.propTypes = { /** A grid can have rows divided into cells. */ celled: PropTypes.oneOfType([ PropTypes.bool, - PropTypes.oneOf(Grid._meta.props.celled), + PropTypes.oneOf(['internally']), ]), /** A grid can have its columns centered. */ centered: PropTypes.bool, - /** A grid can be combined with a container to use avaiable layout and alignment */ - container: PropTypes.bool, - /** Primary content. */ children: PropTypes.node, @@ -104,12 +91,15 @@ Grid.propTypes = { className: PropTypes.string, /** Represents column count per row in Grid. */ - columns: PropTypes.oneOf(Grid._meta.props.columns), + columns: PropTypes.oneOf([...SUI.WIDTHS, 'equal']), + + /** A grid can be combined with a container to use avaiable layout and alignment. */ + container: PropTypes.bool, /** A grid can have dividers between its columns. */ divided: PropTypes.oneOfType([ PropTypes.bool, - PropTypes.oneOf(Grid._meta.props.divided), + PropTypes.oneOf(['vertically']), ]), /** A grid can double its column width on tablet and mobile sizes. */ @@ -118,17 +108,19 @@ Grid.propTypes = { /** A grid can preserve its vertical and horizontal gutters on first and last columns. */ padded: PropTypes.oneOfType([ PropTypes.bool, - PropTypes.oneOf(Grid._meta.props.padded), + PropTypes.oneOf(['horizontally', 'vertically']), ]), /** A grid can increase its gutters to allow for more negative space. */ relaxed: PropTypes.oneOfType([ PropTypes.bool, - PropTypes.oneOf(Grid._meta.props.relaxed), + PropTypes.oneOf(['very']), ]), /** A grid can specify that its columns should reverse order at different device sizes. */ - reversed: PropTypes.oneOf(Grid._meta.props.reversed), + reversed: PropTypes.oneOf([ + 'computer', 'computer vertically', 'mobile', 'mobile vertically', 'tablet', 'tablet vertically', + ]), /** A grid can have its columns stack on-top of each other after reaching mobile breakpoints. */ stackable: PropTypes.bool, @@ -137,10 +129,10 @@ Grid.propTypes = { stretched: PropTypes.bool, /** A grid can specify its text alignment. */ - textAlign: PropTypes.oneOf(Grid._meta.props.textAlign), + textAlign: PropTypes.oneOf(SUI.TEXT_ALIGNMENTS), /** A grid can specify its vertical alignment to have all its columns vertically centered. */ - verticalAlign: PropTypes.oneOf(GridColumn._meta.props.verticalAlign), + verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS), } export default Grid diff --git a/src/collections/Grid/GridColumn.js b/src/collections/Grid/GridColumn.js index 95c95c7c14..b4a8605aeb 100644 --- a/src/collections/Grid/GridColumn.js +++ b/src/collections/Grid/GridColumn.js @@ -61,19 +61,6 @@ GridColumn._meta = { name: 'GridColumn', parent: 'Grid', type: META.TYPES.COLLECTION, - props: { - color: SUI.COLORS, - computer: SUI.WIDTHS, - floated: SUI.FLOATS, - largeScreen: SUI.WIDTHS, - mobile: SUI.WIDTHS, - only: ['computer', 'large screen', 'mobile', 'tablet mobile', 'tablet', 'widescreen'], - tablet: SUI.WIDTHS, - textAlign: SUI.TEXT_ALIGNMENTS, - verticalAlign: SUI.VERTICAL_ALIGNMENTS, - widescreen: SUI.WIDTHS, - width: SUI.WIDTHS, - }, } GridColumn.propTypes = { @@ -86,41 +73,41 @@ GridColumn.propTypes = { /** Additional classes. */ className: PropTypes.string, - /** A column can specify a width for a computer. */ - computer: PropTypes.oneOf(GridColumn._meta.props.width), - /** A grid column can be colored. */ - color: PropTypes.oneOf(GridColumn._meta.props.color), + color: PropTypes.oneOf(SUI.COLORS), + + /** A column can specify a width for a computer. */ + computer: PropTypes.oneOf(SUI.WIDTHS), /** A column can sit flush against the left or right edge of a row. */ - floated: PropTypes.oneOf(GridColumn._meta.props.floated), + floated: PropTypes.oneOf(SUI.FLOATS), /** A column can specify a width for a large screen device. */ - largeScreen: PropTypes.oneOf(GridColumn._meta.props.width), + largeScreen: PropTypes.oneOf(SUI.WIDTHS), /** A column can specify a width for a mobile device. */ - mobile: PropTypes.oneOf(GridColumn._meta.props.width), + mobile: PropTypes.oneOf(SUI.WIDTHS), /** A column can appear only for a specific device, or screen sizes. */ - only: PropTypes.oneOf(GridColumn._meta.props.only), + only: PropTypes.oneOf(['computer', 'large screen', 'mobile', 'tablet mobile', 'tablet', 'widescreen']), /** An can stretch its contents to take up the entire grid or row height. */ stretched: PropTypes.bool, /** A column can specify a width for a tablet device. */ - tablet: PropTypes.oneOf(GridColumn._meta.props.width), + tablet: PropTypes.oneOf(SUI.WIDTHS), /** A row can specify its text alignment. */ - textAlign: PropTypes.oneOf(GridColumn._meta.props.textAlign), + textAlign: PropTypes.oneOf(SUI.TEXT_ALIGNMENTS), /** A column can specify its vertical alignment to have all its columns vertically centered. */ - verticalAlign: PropTypes.oneOf(GridColumn._meta.props.verticalAlign), + verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS), /** A column can specify a width for a wide screen device. */ - widescreen: PropTypes.oneOf(GridColumn._meta.props.width), + widescreen: PropTypes.oneOf(SUI.WIDTHS), /** Represents width of column. */ - width: PropTypes.oneOf(GridColumn._meta.props.width), + width: PropTypes.oneOf(SUI.WIDTHS), } export default GridColumn diff --git a/src/collections/Grid/GridRow.js b/src/collections/Grid/GridRow.js index 0fa38abb5a..2f87d7f3d4 100644 --- a/src/collections/Grid/GridRow.js +++ b/src/collections/Grid/GridRow.js @@ -55,14 +55,6 @@ GridRow._meta = { name: 'GridRow', parent: 'Grid', type: META.TYPES.COLLECTION, - props: { - color: SUI.COLORS, - columns: [...SUI.WIDTHS, 'equal'], - only: ['computer', 'large screen', 'mobile', 'tablet mobile', 'tablet', 'widescreen'], - reversed: ['computer', 'computer vertically', 'mobile', 'mobile vertically', 'tablet', 'tablet vertically'], - textAlign: SUI.TEXT_ALIGNMENTS, - verticalAlign: SUI.VERTICAL_ALIGNMENTS, - }, } GridRow.propTypes = { @@ -79,28 +71,30 @@ GridRow.propTypes = { className: PropTypes.string, /** A grid row can be colored. */ - color: PropTypes.oneOf(GridRow._meta.props.color), + color: PropTypes.oneOf(SUI.COLORS), /** Represents column count per line in Row. */ - columns: PropTypes.oneOf(GridRow._meta.props.columns), + columns: PropTypes.oneOf([...SUI.WIDTHS, 'equal']), /** A row can have dividers between its columns. */ divided: PropTypes.bool, /** A row can appear only for a specific device, or screen sizes. */ - only: PropTypes.oneOf(GridRow._meta.props.only), + only: PropTypes.oneOf(['computer', 'large screen', 'mobile', 'tablet mobile', 'tablet', 'widescreen']), /** A row can specify that its columns should reverse order at different device sizes. */ - reversed: PropTypes.oneOf(GridRow._meta.props.reversed), + reversed: PropTypes.oneOf([ + 'computer', 'computer vertically', 'mobile', 'mobile vertically', 'tablet', 'tablet vertically', + ]), /** An can stretch its contents to take up the entire column height. */ stretched: PropTypes.bool, /** A row can specify its text alignment. */ - textAlign: PropTypes.oneOf(GridRow._meta.props.textAlign), + textAlign: PropTypes.oneOf(SUI.TEXT_ALIGNMENTS), /** A row can specify its vertical alignment to have all its columns vertically centered. */ - verticalAlign: PropTypes.oneOf(GridRow._meta.props.verticalAlign), + verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS), } export default GridRow diff --git a/src/collections/Grid/index.d.ts b/src/collections/Grid/index.d.ts index aae1287e4a..2d137c8f28 100644 --- a/src/collections/Grid/index.d.ts +++ b/src/collections/Grid/index.d.ts @@ -1,3 +1,4 @@ +import * as React from 'react'; import { SemanticCOLORS, SemanticFLOATS, @@ -5,15 +6,18 @@ import { SemanticVERTICALALIGNMENTS, SemanticWIDTHS } from '../..'; -import * as React from 'react'; -export type GridPropReversed = 'computer' | 'computer vertically' | 'mobile' | 'mobile vertically' | 'tablet' | 'tablet vertically'; +type GridPropOnly = 'computer' | 'large screen' | 'mobile' | 'tablet mobile' | 'tablet' | 'widescreen'; +type GridPropReversed = 'computer' | 'computer vertically' | 'mobile' | 'mobile vertically' | 'tablet' | 'tablet vertically'; + export interface GridProps { + [key: string]: any; + /** An element type to render as (string or function). */ as?: any; /** A grid can have rows divided into cells. */ - celled?: boolean|'internally'; + celled?: boolean | 'internally'; /** A grid can have its columns centered. */ centered?: boolean; @@ -27,6 +31,9 @@ export interface GridProps { /** Represents column count per row in Grid. */ columns?: SemanticWIDTHS | 'equal'; + /** A grid can be combined with a container to use avaiable layout and alignment. */ + container?: boolean; + /** A grid can have dividers between its columns. */ divided?: boolean | 'vertically'; @@ -55,15 +62,16 @@ export interface GridProps { verticalAlign?: SemanticVERTICALALIGNMENTS; } -interface GridClass extends React.ComponentClass { +interface GridComponent extends React.ComponentClass { Column: typeof GridColumn; Row: typeof GridRow; } -export const Grid: GridClass; +export const Grid: GridComponent; -type GridPropOnly = 'computer' | 'large screen' | 'mobile' | 'tablet mobile' | 'tablet' | 'widescreen'; interface GridColumnProps { + [key: string]: any; + /** An element type to render as (string or function). */ as?: any; @@ -113,6 +121,8 @@ interface GridColumnProps { export const GridColumn: React.ComponentClass; interface GridRowProps { + [key: string]: any; + /** An element type to render as (string or function). */ as?: any; @@ -150,4 +160,4 @@ interface GridRowProps { verticalAlign?: SemanticVERTICALALIGNMENTS; } -export const GridRow: React.ComponentClass; +export const GridRow: React.StatelessComponent; diff --git a/test/specs/collections/Grid/Grid-test.js b/test/specs/collections/Grid/Grid-test.js index 485fb42278..75140a588a 100644 --- a/test/specs/collections/Grid/Grid-test.js +++ b/test/specs/collections/Grid/Grid-test.js @@ -6,8 +6,8 @@ import GridRow from 'src/collections/Grid/GridRow' describe('Grid', () => { common.isConformant(Grid) - common.hasUIClassName(Grid) common.hasSubComponents(Grid, [GridRow, GridColumn]) + common.hasUIClassName(Grid) common.rendersChildren(Grid) common.implementsTextAlignProp(Grid) diff --git a/test/specs/collections/Grid/GridRow-test.js b/test/specs/collections/Grid/GridRow-test.js index 351bf95718..7ae09eaf8e 100644 --- a/test/specs/collections/Grid/GridRow-test.js +++ b/test/specs/collections/Grid/GridRow-test.js @@ -6,6 +6,10 @@ describe('GridRow', () => { common.isConformant(GridRow) common.rendersChildren(GridRow) + common.implementsTextAlignProp(GridRow) + common.implementsVerticalAlignProp(GridRow) + common.implementsWidthProp(GridRow, { propKey: 'columns', widthClass: 'column', canEqual: true }) + common.propKeyAndValueToClassName(GridRow, 'only') common.propKeyAndValueToClassName(GridRow, 'reversed') @@ -14,8 +18,4 @@ describe('GridRow', () => { common.propKeyOnlyToClassName(GridRow, 'stretched') common.propValueOnlyToClassName(GridRow, 'color', SUI.COLORS) - - common.implementsTextAlignProp(GridRow) - common.implementsVerticalAlignProp(GridRow) - common.implementsWidthProp(GridRow, { propKey: 'columns', widthClass: 'column', canEqual: true }) }) From f2e7e609f35cde2ab9fc8a4b10fb47da93d00dee Mon Sep 17 00:00:00 2001 From: Alexander Fedyashov Date: Thu, 26 Jan 2017 21:25:53 +0200 Subject: [PATCH 2/2] style(Grid): fix type --- src/collections/Grid/index.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/collections/Grid/index.d.ts b/src/collections/Grid/index.d.ts index 2d137c8f28..1a554f326a 100644 --- a/src/collections/Grid/index.d.ts +++ b/src/collections/Grid/index.d.ts @@ -62,7 +62,7 @@ export interface GridProps { verticalAlign?: SemanticVERTICALALIGNMENTS; } -interface GridComponent extends React.ComponentClass { +interface GridComponent extends React.StatelessComponent { Column: typeof GridColumn; Row: typeof GridRow; } @@ -118,7 +118,7 @@ interface GridColumnProps { width?: SemanticWIDTHS; } -export const GridColumn: React.ComponentClass; +export const GridColumn: React.StatelessComponent; interface GridRowProps { [key: string]: any;