2020-10-16 13:16:01 +00:00
|
|
|
|
import React, { forwardRef } from "react";
|
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
|
import StyledGrid from "./styledGrid";
|
2019-12-20 11:53:07 +00:00
|
|
|
|
|
|
|
|
|
const Grid = forwardRef(({ tag, as, ...rest }, ref) => {
|
|
|
|
|
//console.log("Grid render", rest)
|
2020-10-16 13:16:01 +00:00
|
|
|
|
return <StyledGrid as={!as && tag ? tag : as} ref={ref} {...rest} />;
|
2019-12-20 11:53:07 +00:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
Grid.propTypes = {
|
|
|
|
|
as: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
|
/** sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis */
|
2019-12-20 11:53:07 +00:00
|
|
|
|
alignContent: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
|
/** sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis.
|
|
|
|
|
* In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. */
|
2019-12-20 11:53:07 +00:00
|
|
|
|
alignItems: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
|
/** overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
|
|
|
|
|
* In Flexbox, it aligns the item on the cross axis. */
|
2019-12-20 11:53:07 +00:00
|
|
|
|
alignSelf: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
|
/** specifies named grid areas. Takes value as array of string arrays that specify named grid areas.
|
|
|
|
|
* Or objects array, that contains names and coordinates of areas. */
|
2019-12-20 11:53:07 +00:00
|
|
|
|
areasProp: PropTypes.array,
|
2021-03-07 11:57:26 +00:00
|
|
|
|
/** defines the sizing of the grid columns. Specifying a single string will repeat several columns of this size.
|
|
|
|
|
* Specifying an object allows you to specify the number of repetitions and the size of the column.
|
|
|
|
|
* Or you can specify an array with column sizes. The column size can be specified as an array of minimum and maximum widths. */
|
2020-10-16 13:16:01 +00:00
|
|
|
|
columnsProp: PropTypes.oneOfType([
|
|
|
|
|
PropTypes.string,
|
|
|
|
|
PropTypes.array,
|
|
|
|
|
PropTypes.object,
|
|
|
|
|
]),
|
2021-03-07 11:57:26 +00:00
|
|
|
|
/** is a shorthand property for grid-row-start, grid-column-start, grid-row-end and grid-column-end, specifying a grid item’s size and
|
|
|
|
|
* location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement,
|
|
|
|
|
* thereby specifying the edges of its grid area. */
|
2019-12-20 11:53:07 +00:00
|
|
|
|
gridArea: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
|
/** sets the size of the gap (gutter) between an element's columns. */
|
2019-12-20 11:53:07 +00:00
|
|
|
|
gridColumnGap: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
|
/** sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap. */
|
2019-12-20 11:53:07 +00:00
|
|
|
|
gridGap: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
|
/** sets the size of the gap (gutter) between an element's grid rows. */
|
2019-12-20 11:53:07 +00:00
|
|
|
|
gridRowGap: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
|
/** defines the height of the border of the element area. */
|
2019-12-20 11:53:07 +00:00
|
|
|
|
heightProp: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
|
/** defines how the browser distributes space between and around content items along the main-axis of a flex container,
|
|
|
|
|
* and the inline axis of a grid container. */
|
2019-12-20 11:53:07 +00:00
|
|
|
|
justifyContent: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
|
/** defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis. */
|
2019-12-20 11:53:07 +00:00
|
|
|
|
justifyItems: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
|
/** sets the way a box is justified inside its alignment container along the appropriate axis. */
|
2019-12-20 11:53:07 +00:00
|
|
|
|
justifySelf: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
|
/** sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left */
|
2019-12-20 11:53:07 +00:00
|
|
|
|
marginProp: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
|
/** sets the padding area on all four sides of an element. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left */
|
2019-12-20 11:53:07 +00:00
|
|
|
|
paddingProp: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
|
/** defines the sizing of the grid rows. Specifying a single string will repeat several rows of this size. Or you can specify an array with rows sizes.
|
|
|
|
|
* The row size can be specified as an array of minimum and maximum heights. */
|
2019-12-20 11:53:07 +00:00
|
|
|
|
rowsProp: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
|
|
|
|
|
tag: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
|
/** defines the width of the border of the element area. */
|
2020-10-16 13:16:01 +00:00
|
|
|
|
widthProp: PropTypes.string,
|
|
|
|
|
};
|
2019-12-20 11:53:07 +00:00
|
|
|
|
|
|
|
|
|
Grid.defaultProps = {
|
2020-10-16 13:16:01 +00:00
|
|
|
|
heightProp: "100%",
|
|
|
|
|
widthProp: "100%",
|
2019-12-20 11:53:07 +00:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
Grid.displayName = "Grid";
|
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
|
export default Grid;
|