@workday/canvas-kit-react 9.0.0-alpha.316-next.2 → 9.0.0-alpha.317-next.3
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.
- package/dist/commonjs/layout/index.d.ts +0 -3
- package/dist/commonjs/layout/index.d.ts.map +1 -1
- package/dist/commonjs/layout/index.js +1 -5
- package/dist/es6/layout/index.d.ts +0 -3
- package/dist/es6/layout/index.d.ts.map +1 -1
- package/dist/es6/layout/index.js +0 -3
- package/layout/index.ts +0 -4
- package/package.json +3 -3
- package/dist/commonjs/layout/lib/Column.d.ts +0 -33
- package/dist/commonjs/layout/lib/Column.d.ts.map +0 -1
- package/dist/commonjs/layout/lib/Column.js +0 -109
- package/dist/commonjs/layout/lib/Layout.d.ts +0 -45
- package/dist/commonjs/layout/lib/Layout.d.ts.map +0 -1
- package/dist/commonjs/layout/lib/Layout.js +0 -131
- package/dist/es6/layout/lib/Column.d.ts +0 -33
- package/dist/es6/layout/lib/Column.d.ts.map +0 -1
- package/dist/es6/layout/lib/Column.js +0 -84
- package/dist/es6/layout/lib/Layout.d.ts +0 -45
- package/dist/es6/layout/lib/Layout.d.ts.map +0 -1
- package/dist/es6/layout/lib/Layout.js +0 -106
- package/layout/lib/Column.tsx +0 -88
- package/layout/lib/Layout.tsx +0 -124
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AACvE,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAC,aAAa,EAAE,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACvE,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACvF,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
|
|
@@ -10,11 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
10
10
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
11
|
};
|
|
12
12
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
-
exports.spaceStyleFnConfigs = exports.depthStyleFnConfigs =
|
|
14
|
-
var Layout_1 = require("./lib/Layout");
|
|
15
|
-
Object.defineProperty(exports, "DeprecatedLayout", { enumerable: true, get: function () { return Layout_1.DeprecatedLayout; } });
|
|
16
|
-
var Column_1 = require("./lib/Column");
|
|
17
|
-
Object.defineProperty(exports, "DeprecatedColumn", { enumerable: true, get: function () { return Column_1.DeprecatedColumn; } });
|
|
13
|
+
exports.spaceStyleFnConfigs = exports.depthStyleFnConfigs = void 0;
|
|
18
14
|
__exportStar(require("./lib/Box"), exports);
|
|
19
15
|
__exportStar(require("./lib/utils/background"), exports);
|
|
20
16
|
__exportStar(require("./lib/utils/border"), exports);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AACvE,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAC,aAAa,EAAE,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACvE,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACvF,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
|
package/dist/es6/layout/index.js
CHANGED
package/layout/index.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.317-next.3+19379c06",
|
|
4
4
|
"description": "The parent module that contains all Workday Canvas Kit React components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"@emotion/styled": "^11.6.0",
|
|
50
50
|
"@popperjs/core": "^2.5.4",
|
|
51
51
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
52
|
-
"@workday/canvas-kit-popup-stack": "^9.0.0-alpha.
|
|
52
|
+
"@workday/canvas-kit-popup-stack": "^9.0.0-alpha.317-next.3+19379c06",
|
|
53
53
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
54
54
|
"@workday/design-assets-types": "^0.2.8",
|
|
55
55
|
"chroma-js": "^2.1.0",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
68
68
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "19379c062e3718c6a4b0badfdd4c70ec75792ce7"
|
|
71
71
|
}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* ### Deprecated Layout Column Props
|
|
4
|
-
*
|
|
5
|
-
* As of Canvas Kit v8, Layout is being soft-deprecated.
|
|
6
|
-
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
7
|
-
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
8
|
-
* for more information.
|
|
9
|
-
*/
|
|
10
|
-
export interface DeprecatedColumnProps {
|
|
11
|
-
/**
|
|
12
|
-
* The children of the DeprecatedColumn (cannot be empty).
|
|
13
|
-
*/
|
|
14
|
-
children?: React.ReactNode;
|
|
15
|
-
/**
|
|
16
|
-
* The left and right padding of the DeprecatedColumn (inherits from Layout prop).
|
|
17
|
-
* @default 12
|
|
18
|
-
*/
|
|
19
|
-
spacing?: number;
|
|
20
|
-
/**
|
|
21
|
-
* The size of the 12-column grid.
|
|
22
|
-
*/
|
|
23
|
-
columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
24
|
-
/**
|
|
25
|
-
* The width of the columns. This will take precedence over `columns`.
|
|
26
|
-
*/
|
|
27
|
-
width?: number | string;
|
|
28
|
-
}
|
|
29
|
-
export declare class DeprecatedColumn extends React.Component<DeprecatedColumnProps> {
|
|
30
|
-
componentDidMount(): void;
|
|
31
|
-
render(): JSX.Element;
|
|
32
|
-
}
|
|
33
|
-
//# sourceMappingURL=Column.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Column.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;GAOG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC3D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAsCD,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC,qBAAqB,CAAC;IAC1E,iBAAiB;IASV,MAAM;CASd"}
|
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __extends = (this && this.__extends) || (function () {
|
|
3
|
-
var extendStatics = function (d, b) {
|
|
4
|
-
extendStatics = Object.setPrototypeOf ||
|
|
5
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
6
|
-
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
7
|
-
return extendStatics(d, b);
|
|
8
|
-
};
|
|
9
|
-
return function (d, b) {
|
|
10
|
-
extendStatics(d, b);
|
|
11
|
-
function __() { this.constructor = d; }
|
|
12
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
13
|
-
};
|
|
14
|
-
})();
|
|
15
|
-
var __assign = (this && this.__assign) || function () {
|
|
16
|
-
__assign = Object.assign || function(t) {
|
|
17
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
18
|
-
s = arguments[i];
|
|
19
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
20
|
-
t[p] = s[p];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
|
-
return __assign.apply(this, arguments);
|
|
25
|
-
};
|
|
26
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
27
|
-
if (k2 === undefined) k2 = k;
|
|
28
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
29
|
-
}) : (function(o, m, k, k2) {
|
|
30
|
-
if (k2 === undefined) k2 = k;
|
|
31
|
-
o[k2] = m[k];
|
|
32
|
-
}));
|
|
33
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
34
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
35
|
-
}) : function(o, v) {
|
|
36
|
-
o["default"] = v;
|
|
37
|
-
});
|
|
38
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
39
|
-
if (mod && mod.__esModule) return mod;
|
|
40
|
-
var result = {};
|
|
41
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
42
|
-
__setModuleDefault(result, mod);
|
|
43
|
-
return result;
|
|
44
|
-
};
|
|
45
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
46
|
-
var t = {};
|
|
47
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
48
|
-
t[p] = s[p];
|
|
49
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
50
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
51
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
52
|
-
t[p[i]] = s[p[i]];
|
|
53
|
-
}
|
|
54
|
-
return t;
|
|
55
|
-
};
|
|
56
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
57
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
58
|
-
};
|
|
59
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
60
|
-
exports.DeprecatedColumn = void 0;
|
|
61
|
-
var React = __importStar(require("react"));
|
|
62
|
-
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
63
|
-
var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
|
|
64
|
-
var ColumnContainer = styled_1.default('div', {
|
|
65
|
-
shouldForwardProp: function (prop) { return is_prop_valid_1.default(prop) && prop !== 'spacing'; },
|
|
66
|
-
})({
|
|
67
|
-
'&:first-of-type': {
|
|
68
|
-
paddingLeft: 0,
|
|
69
|
-
},
|
|
70
|
-
'&:last-child': {
|
|
71
|
-
paddingRight: 0,
|
|
72
|
-
},
|
|
73
|
-
}, function (_a) {
|
|
74
|
-
var spacing = _a.spacing;
|
|
75
|
-
if (spacing === 0) {
|
|
76
|
-
return;
|
|
77
|
-
}
|
|
78
|
-
return { padding: "0 " + spacing + "px" };
|
|
79
|
-
}, function (_a) {
|
|
80
|
-
var columns = _a.columns, width = _a.width, spacing = _a.spacing;
|
|
81
|
-
if (width) {
|
|
82
|
-
return { width: width };
|
|
83
|
-
}
|
|
84
|
-
if (columns) {
|
|
85
|
-
if (columns === 12) {
|
|
86
|
-
return { width: "100%" };
|
|
87
|
-
}
|
|
88
|
-
else {
|
|
89
|
-
var compensation = ((12 - columns) / 12) * ((spacing || 0) * 2);
|
|
90
|
-
return { width: "calc(" + (columns / 12) * 100 + "% - " + compensation + "px)" };
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
return { flex: 1 };
|
|
94
|
-
});
|
|
95
|
-
var DeprecatedColumn = /** @class */ (function (_super) {
|
|
96
|
-
__extends(DeprecatedColumn, _super);
|
|
97
|
-
function DeprecatedColumn() {
|
|
98
|
-
return _super !== null && _super.apply(this, arguments) || this;
|
|
99
|
-
}
|
|
100
|
-
DeprecatedColumn.prototype.componentDidMount = function () {
|
|
101
|
-
console.warn("This component is being deprecated and will be removed in Canvas Kit V9.\n\n For more information, please see the V8 upgrade guide:\n\n https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page\n ");
|
|
102
|
-
};
|
|
103
|
-
DeprecatedColumn.prototype.render = function () {
|
|
104
|
-
var _a = this.props, children = _a.children, spacing = _a.spacing, columns = _a.columns, width = _a.width, elemProps = __rest(_a, ["children", "spacing", "columns", "width"]);
|
|
105
|
-
return (React.createElement(ColumnContainer, __assign({ spacing: spacing, columns: columns, width: width }, elemProps), children));
|
|
106
|
-
};
|
|
107
|
-
return DeprecatedColumn;
|
|
108
|
-
}(React.Component));
|
|
109
|
-
exports.DeprecatedColumn = DeprecatedColumn;
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { DeprecatedColumn, DeprecatedColumnProps } from './Column';
|
|
3
|
-
/**
|
|
4
|
-
* ### Deprecated Layout Props
|
|
5
|
-
*
|
|
6
|
-
* As of Canvas Kit v8, Layout is being soft-deprecated.
|
|
7
|
-
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
8
|
-
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
9
|
-
* for more information.
|
|
10
|
-
*/
|
|
11
|
-
export interface DeprecatedLayoutProps {
|
|
12
|
-
/**
|
|
13
|
-
* The children of the DeprecatedLayout (cannot be empty).
|
|
14
|
-
*/
|
|
15
|
-
children: React.ReactElement<DeprecatedColumnProps>[] | React.ReactNode;
|
|
16
|
-
/**
|
|
17
|
-
* The spacing of the DeprecatedLayout children.
|
|
18
|
-
*/
|
|
19
|
-
spacing?: number;
|
|
20
|
-
/**
|
|
21
|
-
* The padding of the DeprecatedLayout's outside container.
|
|
22
|
-
* @default 12
|
|
23
|
-
*/
|
|
24
|
-
gutter?: number | string;
|
|
25
|
-
/**
|
|
26
|
-
* If true, set the max width of the DeprecatedLayout container to `1280px`.
|
|
27
|
-
* @default false
|
|
28
|
-
*/
|
|
29
|
-
capWidth?: boolean;
|
|
30
|
-
}
|
|
31
|
-
/**
|
|
32
|
-
* ### Deprecated Layout
|
|
33
|
-
*
|
|
34
|
-
* As of Canvas Kit v8, Layout is being soft-deprecated.
|
|
35
|
-
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
36
|
-
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
37
|
-
* for more information.
|
|
38
|
-
*/
|
|
39
|
-
export declare class DeprecatedLayout extends React.Component<DeprecatedLayoutProps> {
|
|
40
|
-
componentDidMount(): void;
|
|
41
|
-
static Column: typeof DeprecatedColumn;
|
|
42
|
-
private renderChild;
|
|
43
|
-
render(): JSX.Element;
|
|
44
|
-
}
|
|
45
|
-
//# sourceMappingURL=Layout.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,gBAAgB,EAAE,qBAAqB,EAAC,MAAM,UAAU,CAAC;AAIjE;;;;;;;GAOG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,qBAAqB,CAAC,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;IACxE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkCD;;;;;;;GAOG;AACH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC,qBAAqB,CAAC;IAC1E,iBAAiB;IASjB,OAAc,MAAM,0BAAoB;IAExC,OAAO,CAAC,WAAW,CAgBjB;IAEK,MAAM;CAed"}
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __extends = (this && this.__extends) || (function () {
|
|
3
|
-
var extendStatics = function (d, b) {
|
|
4
|
-
extendStatics = Object.setPrototypeOf ||
|
|
5
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
6
|
-
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
7
|
-
return extendStatics(d, b);
|
|
8
|
-
};
|
|
9
|
-
return function (d, b) {
|
|
10
|
-
extendStatics(d, b);
|
|
11
|
-
function __() { this.constructor = d; }
|
|
12
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
13
|
-
};
|
|
14
|
-
})();
|
|
15
|
-
var __assign = (this && this.__assign) || function () {
|
|
16
|
-
__assign = Object.assign || function(t) {
|
|
17
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
18
|
-
s = arguments[i];
|
|
19
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
20
|
-
t[p] = s[p];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
|
-
return __assign.apply(this, arguments);
|
|
25
|
-
};
|
|
26
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
27
|
-
if (k2 === undefined) k2 = k;
|
|
28
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
29
|
-
}) : (function(o, m, k, k2) {
|
|
30
|
-
if (k2 === undefined) k2 = k;
|
|
31
|
-
o[k2] = m[k];
|
|
32
|
-
}));
|
|
33
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
34
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
35
|
-
}) : function(o, v) {
|
|
36
|
-
o["default"] = v;
|
|
37
|
-
});
|
|
38
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
39
|
-
if (mod && mod.__esModule) return mod;
|
|
40
|
-
var result = {};
|
|
41
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
42
|
-
__setModuleDefault(result, mod);
|
|
43
|
-
return result;
|
|
44
|
-
};
|
|
45
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
46
|
-
var t = {};
|
|
47
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
48
|
-
t[p] = s[p];
|
|
49
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
50
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
51
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
52
|
-
t[p[i]] = s[p[i]];
|
|
53
|
-
}
|
|
54
|
-
return t;
|
|
55
|
-
};
|
|
56
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
57
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
58
|
-
};
|
|
59
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
60
|
-
exports.DeprecatedLayout = void 0;
|
|
61
|
-
var React = __importStar(require("react"));
|
|
62
|
-
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
63
|
-
var Column_1 = require("./Column");
|
|
64
|
-
var tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
65
|
-
var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
|
|
66
|
-
var LayoutStyles = {
|
|
67
|
-
classname: 'layout',
|
|
68
|
-
styles: {
|
|
69
|
-
display: 'flex',
|
|
70
|
-
width: '100%',
|
|
71
|
-
boxSizing: 'border-box',
|
|
72
|
-
},
|
|
73
|
-
};
|
|
74
|
-
var LayoutContainer = styled_1.default('div', {
|
|
75
|
-
shouldForwardProp: function (prop) { return is_prop_valid_1.default(prop) && prop !== 'spacing'; },
|
|
76
|
-
})(LayoutStyles.styles, function (_a) {
|
|
77
|
-
var gutter = _a.gutter;
|
|
78
|
-
if (gutter === 0) {
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
return { padding: "0 " + gutter };
|
|
82
|
-
}, function (_a) {
|
|
83
|
-
var capWidth = _a.capWidth;
|
|
84
|
-
if (!capWidth) {
|
|
85
|
-
return;
|
|
86
|
-
}
|
|
87
|
-
return {
|
|
88
|
-
maxWidth: '1280px',
|
|
89
|
-
margin: '0 auto',
|
|
90
|
-
};
|
|
91
|
-
});
|
|
92
|
-
/**
|
|
93
|
-
* ### Deprecated Layout
|
|
94
|
-
*
|
|
95
|
-
* As of Canvas Kit v8, Layout is being soft-deprecated.
|
|
96
|
-
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
97
|
-
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
98
|
-
* for more information.
|
|
99
|
-
*/
|
|
100
|
-
var DeprecatedLayout = /** @class */ (function (_super) {
|
|
101
|
-
__extends(DeprecatedLayout, _super);
|
|
102
|
-
function DeprecatedLayout() {
|
|
103
|
-
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
104
|
-
_this.renderChild = function (child, spacing) {
|
|
105
|
-
if (!React.isValidElement(child)) {
|
|
106
|
-
return;
|
|
107
|
-
}
|
|
108
|
-
if (child.type === Column_1.DeprecatedColumn) {
|
|
109
|
-
var childProps = child.props;
|
|
110
|
-
if (childProps.spacing || childProps.spacing === 0) {
|
|
111
|
-
return child;
|
|
112
|
-
}
|
|
113
|
-
return React.cloneElement(child, { spacing: spacing });
|
|
114
|
-
}
|
|
115
|
-
return child;
|
|
116
|
-
};
|
|
117
|
-
return _this;
|
|
118
|
-
}
|
|
119
|
-
DeprecatedLayout.prototype.componentDidMount = function () {
|
|
120
|
-
console.warn("This component is being deprecated and will be removed in Canvas Kit V9.\n\n For more information, please see the V8 upgrade guide:\n\n https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page\n ");
|
|
121
|
-
};
|
|
122
|
-
DeprecatedLayout.prototype.render = function () {
|
|
123
|
-
var _this = this;
|
|
124
|
-
var _a = this.props, _b = _a.gutter, gutter = _b === void 0 ? tokens_1.canvas.space.xs : _b, _c = _a.spacing, spacing = _c === void 0 ? tokens_1.spaceNumbers.xs : _c, children = _a.children, capWidth = _a.capWidth, elemProps = __rest(_a, ["gutter", "spacing", "children", "capWidth"]);
|
|
125
|
-
return (React.createElement(LayoutContainer, __assign({ spacing: spacing, gutter: gutter, capWidth: capWidth }, elemProps), React.Children.map(children, function (child) { return _this.renderChild(child, spacing); })));
|
|
126
|
-
};
|
|
127
|
-
DeprecatedLayout.Column = Column_1.DeprecatedColumn;
|
|
128
|
-
return DeprecatedLayout;
|
|
129
|
-
}(React.Component));
|
|
130
|
-
exports.DeprecatedLayout = DeprecatedLayout;
|
|
131
|
-
DeprecatedLayout.Column = Column_1.DeprecatedColumn;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* ### Deprecated Layout Column Props
|
|
4
|
-
*
|
|
5
|
-
* As of Canvas Kit v8, Layout is being soft-deprecated.
|
|
6
|
-
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
7
|
-
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
8
|
-
* for more information.
|
|
9
|
-
*/
|
|
10
|
-
export interface DeprecatedColumnProps {
|
|
11
|
-
/**
|
|
12
|
-
* The children of the DeprecatedColumn (cannot be empty).
|
|
13
|
-
*/
|
|
14
|
-
children?: React.ReactNode;
|
|
15
|
-
/**
|
|
16
|
-
* The left and right padding of the DeprecatedColumn (inherits from Layout prop).
|
|
17
|
-
* @default 12
|
|
18
|
-
*/
|
|
19
|
-
spacing?: number;
|
|
20
|
-
/**
|
|
21
|
-
* The size of the 12-column grid.
|
|
22
|
-
*/
|
|
23
|
-
columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
24
|
-
/**
|
|
25
|
-
* The width of the columns. This will take precedence over `columns`.
|
|
26
|
-
*/
|
|
27
|
-
width?: number | string;
|
|
28
|
-
}
|
|
29
|
-
export declare class DeprecatedColumn extends React.Component<DeprecatedColumnProps> {
|
|
30
|
-
componentDidMount(): void;
|
|
31
|
-
render(): JSX.Element;
|
|
32
|
-
}
|
|
33
|
-
//# sourceMappingURL=Column.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Column.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;GAOG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC3D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAsCD,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC,qBAAqB,CAAC;IAC1E,iBAAiB;IASV,MAAM;CASd"}
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
var __extends = (this && this.__extends) || (function () {
|
|
2
|
-
var extendStatics = function (d, b) {
|
|
3
|
-
extendStatics = Object.setPrototypeOf ||
|
|
4
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
5
|
-
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
6
|
-
return extendStatics(d, b);
|
|
7
|
-
};
|
|
8
|
-
return function (d, b) {
|
|
9
|
-
extendStatics(d, b);
|
|
10
|
-
function __() { this.constructor = d; }
|
|
11
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
12
|
-
};
|
|
13
|
-
})();
|
|
14
|
-
var __assign = (this && this.__assign) || function () {
|
|
15
|
-
__assign = Object.assign || function(t) {
|
|
16
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
17
|
-
s = arguments[i];
|
|
18
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
19
|
-
t[p] = s[p];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
return __assign.apply(this, arguments);
|
|
24
|
-
};
|
|
25
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
|
-
var t = {};
|
|
27
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
28
|
-
t[p] = s[p];
|
|
29
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
30
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
32
|
-
t[p[i]] = s[p[i]];
|
|
33
|
-
}
|
|
34
|
-
return t;
|
|
35
|
-
};
|
|
36
|
-
import * as React from 'react';
|
|
37
|
-
import styled from '@emotion/styled';
|
|
38
|
-
import isPropValid from '@emotion/is-prop-valid';
|
|
39
|
-
var ColumnContainer = styled('div', {
|
|
40
|
-
shouldForwardProp: function (prop) { return isPropValid(prop) && prop !== 'spacing'; },
|
|
41
|
-
})({
|
|
42
|
-
'&:first-of-type': {
|
|
43
|
-
paddingLeft: 0,
|
|
44
|
-
},
|
|
45
|
-
'&:last-child': {
|
|
46
|
-
paddingRight: 0,
|
|
47
|
-
},
|
|
48
|
-
}, function (_a) {
|
|
49
|
-
var spacing = _a.spacing;
|
|
50
|
-
if (spacing === 0) {
|
|
51
|
-
return;
|
|
52
|
-
}
|
|
53
|
-
return { padding: "0 " + spacing + "px" };
|
|
54
|
-
}, function (_a) {
|
|
55
|
-
var columns = _a.columns, width = _a.width, spacing = _a.spacing;
|
|
56
|
-
if (width) {
|
|
57
|
-
return { width: width };
|
|
58
|
-
}
|
|
59
|
-
if (columns) {
|
|
60
|
-
if (columns === 12) {
|
|
61
|
-
return { width: "100%" };
|
|
62
|
-
}
|
|
63
|
-
else {
|
|
64
|
-
var compensation = ((12 - columns) / 12) * ((spacing || 0) * 2);
|
|
65
|
-
return { width: "calc(" + (columns / 12) * 100 + "% - " + compensation + "px)" };
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
return { flex: 1 };
|
|
69
|
-
});
|
|
70
|
-
var DeprecatedColumn = /** @class */ (function (_super) {
|
|
71
|
-
__extends(DeprecatedColumn, _super);
|
|
72
|
-
function DeprecatedColumn() {
|
|
73
|
-
return _super !== null && _super.apply(this, arguments) || this;
|
|
74
|
-
}
|
|
75
|
-
DeprecatedColumn.prototype.componentDidMount = function () {
|
|
76
|
-
console.warn("This component is being deprecated and will be removed in Canvas Kit V9.\n\n For more information, please see the V8 upgrade guide:\n\n https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page\n ");
|
|
77
|
-
};
|
|
78
|
-
DeprecatedColumn.prototype.render = function () {
|
|
79
|
-
var _a = this.props, children = _a.children, spacing = _a.spacing, columns = _a.columns, width = _a.width, elemProps = __rest(_a, ["children", "spacing", "columns", "width"]);
|
|
80
|
-
return (React.createElement(ColumnContainer, __assign({ spacing: spacing, columns: columns, width: width }, elemProps), children));
|
|
81
|
-
};
|
|
82
|
-
return DeprecatedColumn;
|
|
83
|
-
}(React.Component));
|
|
84
|
-
export { DeprecatedColumn };
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { DeprecatedColumn, DeprecatedColumnProps } from './Column';
|
|
3
|
-
/**
|
|
4
|
-
* ### Deprecated Layout Props
|
|
5
|
-
*
|
|
6
|
-
* As of Canvas Kit v8, Layout is being soft-deprecated.
|
|
7
|
-
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
8
|
-
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
9
|
-
* for more information.
|
|
10
|
-
*/
|
|
11
|
-
export interface DeprecatedLayoutProps {
|
|
12
|
-
/**
|
|
13
|
-
* The children of the DeprecatedLayout (cannot be empty).
|
|
14
|
-
*/
|
|
15
|
-
children: React.ReactElement<DeprecatedColumnProps>[] | React.ReactNode;
|
|
16
|
-
/**
|
|
17
|
-
* The spacing of the DeprecatedLayout children.
|
|
18
|
-
*/
|
|
19
|
-
spacing?: number;
|
|
20
|
-
/**
|
|
21
|
-
* The padding of the DeprecatedLayout's outside container.
|
|
22
|
-
* @default 12
|
|
23
|
-
*/
|
|
24
|
-
gutter?: number | string;
|
|
25
|
-
/**
|
|
26
|
-
* If true, set the max width of the DeprecatedLayout container to `1280px`.
|
|
27
|
-
* @default false
|
|
28
|
-
*/
|
|
29
|
-
capWidth?: boolean;
|
|
30
|
-
}
|
|
31
|
-
/**
|
|
32
|
-
* ### Deprecated Layout
|
|
33
|
-
*
|
|
34
|
-
* As of Canvas Kit v8, Layout is being soft-deprecated.
|
|
35
|
-
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
36
|
-
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
37
|
-
* for more information.
|
|
38
|
-
*/
|
|
39
|
-
export declare class DeprecatedLayout extends React.Component<DeprecatedLayoutProps> {
|
|
40
|
-
componentDidMount(): void;
|
|
41
|
-
static Column: typeof DeprecatedColumn;
|
|
42
|
-
private renderChild;
|
|
43
|
-
render(): JSX.Element;
|
|
44
|
-
}
|
|
45
|
-
//# sourceMappingURL=Layout.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,gBAAgB,EAAE,qBAAqB,EAAC,MAAM,UAAU,CAAC;AAIjE;;;;;;;GAOG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,qBAAqB,CAAC,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;IACxE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkCD;;;;;;;GAOG;AACH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC,qBAAqB,CAAC;IAC1E,iBAAiB;IASjB,OAAc,MAAM,0BAAoB;IAExC,OAAO,CAAC,WAAW,CAgBjB;IAEK,MAAM;CAed"}
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
var __extends = (this && this.__extends) || (function () {
|
|
2
|
-
var extendStatics = function (d, b) {
|
|
3
|
-
extendStatics = Object.setPrototypeOf ||
|
|
4
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
5
|
-
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
6
|
-
return extendStatics(d, b);
|
|
7
|
-
};
|
|
8
|
-
return function (d, b) {
|
|
9
|
-
extendStatics(d, b);
|
|
10
|
-
function __() { this.constructor = d; }
|
|
11
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
12
|
-
};
|
|
13
|
-
})();
|
|
14
|
-
var __assign = (this && this.__assign) || function () {
|
|
15
|
-
__assign = Object.assign || function(t) {
|
|
16
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
17
|
-
s = arguments[i];
|
|
18
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
19
|
-
t[p] = s[p];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
return __assign.apply(this, arguments);
|
|
24
|
-
};
|
|
25
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
|
-
var t = {};
|
|
27
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
28
|
-
t[p] = s[p];
|
|
29
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
30
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
32
|
-
t[p[i]] = s[p[i]];
|
|
33
|
-
}
|
|
34
|
-
return t;
|
|
35
|
-
};
|
|
36
|
-
import * as React from 'react';
|
|
37
|
-
import styled from '@emotion/styled';
|
|
38
|
-
import { DeprecatedColumn } from './Column';
|
|
39
|
-
import { canvas, spaceNumbers } from '@workday/canvas-kit-react/tokens';
|
|
40
|
-
import isPropValid from '@emotion/is-prop-valid';
|
|
41
|
-
var LayoutStyles = {
|
|
42
|
-
classname: 'layout',
|
|
43
|
-
styles: {
|
|
44
|
-
display: 'flex',
|
|
45
|
-
width: '100%',
|
|
46
|
-
boxSizing: 'border-box',
|
|
47
|
-
},
|
|
48
|
-
};
|
|
49
|
-
var LayoutContainer = styled('div', {
|
|
50
|
-
shouldForwardProp: function (prop) { return isPropValid(prop) && prop !== 'spacing'; },
|
|
51
|
-
})(LayoutStyles.styles, function (_a) {
|
|
52
|
-
var gutter = _a.gutter;
|
|
53
|
-
if (gutter === 0) {
|
|
54
|
-
return;
|
|
55
|
-
}
|
|
56
|
-
return { padding: "0 " + gutter };
|
|
57
|
-
}, function (_a) {
|
|
58
|
-
var capWidth = _a.capWidth;
|
|
59
|
-
if (!capWidth) {
|
|
60
|
-
return;
|
|
61
|
-
}
|
|
62
|
-
return {
|
|
63
|
-
maxWidth: '1280px',
|
|
64
|
-
margin: '0 auto',
|
|
65
|
-
};
|
|
66
|
-
});
|
|
67
|
-
/**
|
|
68
|
-
* ### Deprecated Layout
|
|
69
|
-
*
|
|
70
|
-
* As of Canvas Kit v8, Layout is being soft-deprecated.
|
|
71
|
-
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
72
|
-
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
73
|
-
* for more information.
|
|
74
|
-
*/
|
|
75
|
-
var DeprecatedLayout = /** @class */ (function (_super) {
|
|
76
|
-
__extends(DeprecatedLayout, _super);
|
|
77
|
-
function DeprecatedLayout() {
|
|
78
|
-
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
79
|
-
_this.renderChild = function (child, spacing) {
|
|
80
|
-
if (!React.isValidElement(child)) {
|
|
81
|
-
return;
|
|
82
|
-
}
|
|
83
|
-
if (child.type === DeprecatedColumn) {
|
|
84
|
-
var childProps = child.props;
|
|
85
|
-
if (childProps.spacing || childProps.spacing === 0) {
|
|
86
|
-
return child;
|
|
87
|
-
}
|
|
88
|
-
return React.cloneElement(child, { spacing: spacing });
|
|
89
|
-
}
|
|
90
|
-
return child;
|
|
91
|
-
};
|
|
92
|
-
return _this;
|
|
93
|
-
}
|
|
94
|
-
DeprecatedLayout.prototype.componentDidMount = function () {
|
|
95
|
-
console.warn("This component is being deprecated and will be removed in Canvas Kit V9.\n\n For more information, please see the V8 upgrade guide:\n\n https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page\n ");
|
|
96
|
-
};
|
|
97
|
-
DeprecatedLayout.prototype.render = function () {
|
|
98
|
-
var _this = this;
|
|
99
|
-
var _a = this.props, _b = _a.gutter, gutter = _b === void 0 ? canvas.space.xs : _b, _c = _a.spacing, spacing = _c === void 0 ? spaceNumbers.xs : _c, children = _a.children, capWidth = _a.capWidth, elemProps = __rest(_a, ["gutter", "spacing", "children", "capWidth"]);
|
|
100
|
-
return (React.createElement(LayoutContainer, __assign({ spacing: spacing, gutter: gutter, capWidth: capWidth }, elemProps), React.Children.map(children, function (child) { return _this.renderChild(child, spacing); })));
|
|
101
|
-
};
|
|
102
|
-
DeprecatedLayout.Column = DeprecatedColumn;
|
|
103
|
-
return DeprecatedLayout;
|
|
104
|
-
}(React.Component));
|
|
105
|
-
export { DeprecatedLayout };
|
|
106
|
-
DeprecatedLayout.Column = DeprecatedColumn;
|
package/layout/lib/Column.tsx
DELETED
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import styled from '@emotion/styled';
|
|
3
|
-
import isPropValid from '@emotion/is-prop-valid';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* ### Deprecated Layout Column Props
|
|
7
|
-
*
|
|
8
|
-
* As of Canvas Kit v8, Layout is being soft-deprecated.
|
|
9
|
-
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
10
|
-
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
11
|
-
* for more information.
|
|
12
|
-
*/
|
|
13
|
-
export interface DeprecatedColumnProps {
|
|
14
|
-
/**
|
|
15
|
-
* The children of the DeprecatedColumn (cannot be empty).
|
|
16
|
-
*/
|
|
17
|
-
children?: React.ReactNode;
|
|
18
|
-
/**
|
|
19
|
-
* The left and right padding of the DeprecatedColumn (inherits from Layout prop).
|
|
20
|
-
* @default 12
|
|
21
|
-
*/
|
|
22
|
-
spacing?: number;
|
|
23
|
-
/**
|
|
24
|
-
* The size of the 12-column grid.
|
|
25
|
-
*/
|
|
26
|
-
columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
27
|
-
/**
|
|
28
|
-
* The width of the columns. This will take precedence over `columns`.
|
|
29
|
-
*/
|
|
30
|
-
width?: number | string;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
const ColumnContainer = styled('div', {
|
|
34
|
-
shouldForwardProp: prop => isPropValid(prop) && prop !== 'spacing',
|
|
35
|
-
})<DeprecatedColumnProps>(
|
|
36
|
-
{
|
|
37
|
-
'&:first-of-type': {
|
|
38
|
-
paddingLeft: 0,
|
|
39
|
-
},
|
|
40
|
-
'&:last-child': {
|
|
41
|
-
paddingRight: 0,
|
|
42
|
-
},
|
|
43
|
-
},
|
|
44
|
-
({spacing}) => {
|
|
45
|
-
if (spacing === 0) {
|
|
46
|
-
return;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
return {padding: `0 ${spacing}px`};
|
|
50
|
-
},
|
|
51
|
-
({columns, width, spacing}) => {
|
|
52
|
-
if (width) {
|
|
53
|
-
return {width};
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
if (columns) {
|
|
57
|
-
if (columns === 12) {
|
|
58
|
-
return {width: `100%`};
|
|
59
|
-
} else {
|
|
60
|
-
const compensation = ((12 - columns) / 12) * ((spacing || 0) * 2);
|
|
61
|
-
return {width: `calc(${(columns / 12) * 100}% - ${compensation}px)`};
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
return {flex: 1};
|
|
66
|
-
}
|
|
67
|
-
);
|
|
68
|
-
|
|
69
|
-
export class DeprecatedColumn extends React.Component<DeprecatedColumnProps> {
|
|
70
|
-
componentDidMount() {
|
|
71
|
-
console.warn(
|
|
72
|
-
`This component is being deprecated and will be removed in Canvas Kit V9.\n
|
|
73
|
-
For more information, please see the V8 upgrade guide:\n
|
|
74
|
-
https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page
|
|
75
|
-
`
|
|
76
|
-
);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
public render() {
|
|
80
|
-
const {children, spacing, columns, width, ...elemProps} = this.props;
|
|
81
|
-
|
|
82
|
-
return (
|
|
83
|
-
<ColumnContainer spacing={spacing} columns={columns} width={width} {...elemProps}>
|
|
84
|
-
{children}
|
|
85
|
-
</ColumnContainer>
|
|
86
|
-
);
|
|
87
|
-
}
|
|
88
|
-
}
|
package/layout/lib/Layout.tsx
DELETED
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import styled from '@emotion/styled';
|
|
3
|
-
import {GenericStyle} from '@workday/canvas-kit-react/common';
|
|
4
|
-
import {DeprecatedColumn, DeprecatedColumnProps} from './Column';
|
|
5
|
-
import {canvas, spaceNumbers} from '@workday/canvas-kit-react/tokens';
|
|
6
|
-
import isPropValid from '@emotion/is-prop-valid';
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* ### Deprecated Layout Props
|
|
10
|
-
*
|
|
11
|
-
* As of Canvas Kit v8, Layout is being soft-deprecated.
|
|
12
|
-
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
13
|
-
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
14
|
-
* for more information.
|
|
15
|
-
*/
|
|
16
|
-
export interface DeprecatedLayoutProps {
|
|
17
|
-
/**
|
|
18
|
-
* The children of the DeprecatedLayout (cannot be empty).
|
|
19
|
-
*/
|
|
20
|
-
children: React.ReactElement<DeprecatedColumnProps>[] | React.ReactNode;
|
|
21
|
-
/**
|
|
22
|
-
* The spacing of the DeprecatedLayout children.
|
|
23
|
-
*/
|
|
24
|
-
spacing?: number;
|
|
25
|
-
/**
|
|
26
|
-
* The padding of the DeprecatedLayout's outside container.
|
|
27
|
-
* @default 12
|
|
28
|
-
*/
|
|
29
|
-
gutter?: number | string;
|
|
30
|
-
/**
|
|
31
|
-
* If true, set the max width of the DeprecatedLayout container to `1280px`.
|
|
32
|
-
* @default false
|
|
33
|
-
*/
|
|
34
|
-
capWidth?: boolean;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
const LayoutStyles: GenericStyle = {
|
|
38
|
-
classname: 'layout',
|
|
39
|
-
styles: {
|
|
40
|
-
display: 'flex',
|
|
41
|
-
width: '100%',
|
|
42
|
-
boxSizing: 'border-box',
|
|
43
|
-
},
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
const LayoutContainer = styled('div', {
|
|
47
|
-
shouldForwardProp: prop => isPropValid(prop) && prop !== 'spacing',
|
|
48
|
-
})<DeprecatedLayoutProps>(
|
|
49
|
-
LayoutStyles.styles,
|
|
50
|
-
({gutter}) => {
|
|
51
|
-
if (gutter === 0) {
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
return {padding: `0 ${gutter}`};
|
|
56
|
-
},
|
|
57
|
-
({capWidth}) => {
|
|
58
|
-
if (!capWidth) {
|
|
59
|
-
return;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
return {
|
|
63
|
-
maxWidth: '1280px',
|
|
64
|
-
margin: '0 auto',
|
|
65
|
-
};
|
|
66
|
-
}
|
|
67
|
-
);
|
|
68
|
-
|
|
69
|
-
/**
|
|
70
|
-
* ### Deprecated Layout
|
|
71
|
-
*
|
|
72
|
-
* As of Canvas Kit v8, Layout is being soft-deprecated.
|
|
73
|
-
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
74
|
-
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
75
|
-
* for more information.
|
|
76
|
-
*/
|
|
77
|
-
export class DeprecatedLayout extends React.Component<DeprecatedLayoutProps> {
|
|
78
|
-
componentDidMount() {
|
|
79
|
-
console.warn(
|
|
80
|
-
`This component is being deprecated and will be removed in Canvas Kit V9.\n
|
|
81
|
-
For more information, please see the V8 upgrade guide:\n
|
|
82
|
-
https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page
|
|
83
|
-
`
|
|
84
|
-
);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
public static Column = DeprecatedColumn;
|
|
88
|
-
|
|
89
|
-
private renderChild = (child: React.ReactNode, spacing: number): React.ReactNode => {
|
|
90
|
-
if (!React.isValidElement(child)) {
|
|
91
|
-
return;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
if (child.type === DeprecatedColumn) {
|
|
95
|
-
const childProps = child.props;
|
|
96
|
-
|
|
97
|
-
if (childProps.spacing || childProps.spacing === 0) {
|
|
98
|
-
return child;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
return React.cloneElement(child, {spacing});
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
return child;
|
|
105
|
-
};
|
|
106
|
-
|
|
107
|
-
public render() {
|
|
108
|
-
const {
|
|
109
|
-
gutter = canvas.space.xs,
|
|
110
|
-
spacing = spaceNumbers.xs,
|
|
111
|
-
children,
|
|
112
|
-
capWidth,
|
|
113
|
-
...elemProps
|
|
114
|
-
} = this.props;
|
|
115
|
-
|
|
116
|
-
return (
|
|
117
|
-
<LayoutContainer spacing={spacing} gutter={gutter} capWidth={capWidth} {...elemProps}>
|
|
118
|
-
{React.Children.map(children, child => this.renderChild(child, spacing))}
|
|
119
|
-
</LayoutContainer>
|
|
120
|
-
);
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
DeprecatedLayout.Column = DeprecatedColumn;
|