@longline/aqua-ui 1.0.345 → 1.0.347
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ITestable } from '../../Types';
|
|
3
|
+
interface IGridProps extends ITestable {
|
|
4
|
+
/** @ignore */
|
|
5
|
+
className?: string;
|
|
6
|
+
/** @ignore */
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Column gap in pixels between items on the same row.
|
|
10
|
+
* @default 8
|
|
11
|
+
*/
|
|
12
|
+
gap?: number;
|
|
13
|
+
/**
|
|
14
|
+
* Row gap in pixels between rows.
|
|
15
|
+
* @default 0
|
|
16
|
+
*/
|
|
17
|
+
rowGap?: number;
|
|
18
|
+
/**
|
|
19
|
+
* If set, the grid grows to fill its flex container (`flex: 1`).
|
|
20
|
+
* @default false
|
|
21
|
+
*/
|
|
22
|
+
fill?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Optional inline styles applied to the outer element, for one-off overrides
|
|
25
|
+
* of the default styling.
|
|
26
|
+
*/
|
|
27
|
+
style?: React.CSSProperties;
|
|
28
|
+
}
|
|
29
|
+
interface IGridItemProps extends ITestable {
|
|
30
|
+
/** @ignore */
|
|
31
|
+
className?: string;
|
|
32
|
+
/** @ignore */
|
|
33
|
+
children?: React.ReactNode;
|
|
34
|
+
/**
|
|
35
|
+
* How many of the grid's 6 columns this item spans (1–6): 6 is a full-width
|
|
36
|
+
* row, 3 a half, 2 a third, 1 a sixth.
|
|
37
|
+
* @default 6
|
|
38
|
+
*/
|
|
39
|
+
weight?: number;
|
|
40
|
+
/**
|
|
41
|
+
* Optional inline styles applied to the outer element, for one-off overrides
|
|
42
|
+
* of the default styling.
|
|
43
|
+
*/
|
|
44
|
+
style?: React.CSSProperties;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* A `Grid` lays out its `Grid.Item` children on a fixed **6-column** grid — the
|
|
48
|
+
* layout used across our forms and detail views, where a `Grid.Item`'s `weight`
|
|
49
|
+
* (1–6) says how many columns it spans. Two `weight={3}` items sit side by side;
|
|
50
|
+
* a `weight={6}` item is a full-width row.
|
|
51
|
+
*
|
|
52
|
+
* ### Props
|
|
53
|
+
* - `gap`: column gap in pixels (default 8).
|
|
54
|
+
* - `rowGap`: row gap in pixels (default 0).
|
|
55
|
+
* - `fill`: grow to fill a flex container.
|
|
56
|
+
*
|
|
57
|
+
* @example
|
|
58
|
+
* ```tsx
|
|
59
|
+
* <Grid>
|
|
60
|
+
* <Grid.Item weight={3}><View label="First name">Ada</View></Grid.Item>
|
|
61
|
+
* <Grid.Item weight={3}><View label="Last name">Lovelace</View></Grid.Item>
|
|
62
|
+
* <Grid.Item><View label="Address">…</View></Grid.Item>
|
|
63
|
+
* </Grid>
|
|
64
|
+
* ```
|
|
65
|
+
*/
|
|
66
|
+
declare const Grid: {
|
|
67
|
+
(props: IGridProps): React.JSX.Element;
|
|
68
|
+
displayName: string;
|
|
69
|
+
Item: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IGridItemProps, never>> & string & Omit<(props: IGridItemProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
|
|
70
|
+
};
|
|
71
|
+
export { Grid, IGridProps, IGridItemProps };
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
+
return cooked;
|
|
4
|
+
};
|
|
5
|
+
var __assign = (this && this.__assign) || function () {
|
|
6
|
+
__assign = Object.assign || function(t) {
|
|
7
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
8
|
+
s = arguments[i];
|
|
9
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
10
|
+
t[p] = s[p];
|
|
11
|
+
}
|
|
12
|
+
return t;
|
|
13
|
+
};
|
|
14
|
+
return __assign.apply(this, arguments);
|
|
15
|
+
};
|
|
16
|
+
import * as React from 'react';
|
|
17
|
+
import styled, { css } from 'styled-components';
|
|
18
|
+
var GridBase = function (props) {
|
|
19
|
+
return React.createElement("div", { "data-testid": props['data-testid'] || "Grid", className: props.className, style: props.style }, props.children);
|
|
20
|
+
};
|
|
21
|
+
// A fixed 6-column track. `minmax(0, 1fr)` (rather than a bare `1fr`) lets a
|
|
22
|
+
// column shrink below the intrinsic width of its content — without it, a long
|
|
23
|
+
// unbreakable value would blow the column, and the whole grid, past its
|
|
24
|
+
// container. `column-gap` handles the inter-column spacing, so the tracks stay
|
|
25
|
+
// even regardless of the gap size.
|
|
26
|
+
var GridStyled = styled(GridBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(6, minmax(0, 1fr));\n column-gap: ", "px;\n row-gap: ", "px;\n ", "\n"], ["\n display: grid;\n grid-template-columns: repeat(6, minmax(0, 1fr));\n column-gap: ", "px;\n row-gap: ", "px;\n ", "\n"])), function (p) { var _a; return (_a = p.gap) !== null && _a !== void 0 ? _a : 8; }, function (p) { var _a; return (_a = p.rowGap) !== null && _a !== void 0 ? _a : 0; }, function (p) { return p.fill && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["flex: 1;"], ["flex: 1;"]))); });
|
|
27
|
+
var GridItemBase = function (props) {
|
|
28
|
+
return React.createElement("div", { "data-testid": props['data-testid'] || "Grid.Item", className: props.className, style: props.style }, props.children);
|
|
29
|
+
};
|
|
30
|
+
// A column-flex so its child (a Form.Field, a View, …) fills the cell width.
|
|
31
|
+
// `min-width: 0` is the flex-item counterpart to the track's `minmax(0, 1fr)`:
|
|
32
|
+
// together they stop a wide child from forcing the cell to overflow.
|
|
33
|
+
var GridItem = styled(GridItemBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n grid-column: span ", ";\n display: flex;\n flex-direction: column;\n min-width: 0;\n"], ["\n grid-column: span ", ";\n display: flex;\n flex-direction: column;\n min-width: 0;\n"])), function (p) { var _a; return (_a = p.weight) !== null && _a !== void 0 ? _a : 6; });
|
|
34
|
+
GridItem.displayName = "Grid.Item";
|
|
35
|
+
/**
|
|
36
|
+
* A `Grid` lays out its `Grid.Item` children on a fixed **6-column** grid — the
|
|
37
|
+
* layout used across our forms and detail views, where a `Grid.Item`'s `weight`
|
|
38
|
+
* (1–6) says how many columns it spans. Two `weight={3}` items sit side by side;
|
|
39
|
+
* a `weight={6}` item is a full-width row.
|
|
40
|
+
*
|
|
41
|
+
* ### Props
|
|
42
|
+
* - `gap`: column gap in pixels (default 8).
|
|
43
|
+
* - `rowGap`: row gap in pixels (default 0).
|
|
44
|
+
* - `fill`: grow to fill a flex container.
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* ```tsx
|
|
48
|
+
* <Grid>
|
|
49
|
+
* <Grid.Item weight={3}><View label="First name">Ada</View></Grid.Item>
|
|
50
|
+
* <Grid.Item weight={3}><View label="Last name">Lovelace</View></Grid.Item>
|
|
51
|
+
* <Grid.Item><View label="Address">…</View></Grid.Item>
|
|
52
|
+
* </Grid>
|
|
53
|
+
* ```
|
|
54
|
+
*/
|
|
55
|
+
var Grid = function (props) { return React.createElement(GridStyled, __assign({}, props)); };
|
|
56
|
+
Grid.displayName = "Grid";
|
|
57
|
+
Grid.Item = GridItem;
|
|
58
|
+
export { Grid };
|
|
59
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Grid } from './Grid';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Grid } from './Grid';
|