pds-dev-kit-web 1.4.67 → 1.5.0
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/index.d.ts +6 -4
- package/dist/index.js +13 -6
- package/dist/src/desktop/components/AdminList/AdminList.js +4 -1
- package/dist/src/desktop/index.d.ts +2 -2
- package/dist/src/desktop/index.js +4 -1
- package/dist/src/desktop/panels/AnnotationSheet/AnnotationSheet.d.ts +57 -0
- package/dist/src/desktop/panels/AnnotationSheet/AnnotationSheet.js +134 -0
- package/dist/src/desktop/panels/AnnotationSheet/index.d.ts +1 -0
- package/dist/src/desktop/panels/AnnotationSheet/index.js +8 -0
- package/dist/src/desktop/panels/ContentSheet/ContentSheet.d.ts +57 -0
- package/dist/src/desktop/panels/ContentSheet/ContentSheet.js +134 -0
- package/dist/src/desktop/panels/ContentSheet/index.d.ts +1 -0
- package/dist/src/desktop/panels/ContentSheet/index.js +8 -0
- package/dist/src/desktop/panels/SectionSheet/SectionSheet.d.ts +57 -0
- package/dist/src/desktop/panels/SectionSheet/SectionSheet.js +134 -0
- package/dist/src/desktop/panels/SectionSheet/index.d.ts +1 -0
- package/dist/src/desktop/panels/SectionSheet/index.js +8 -0
- package/dist/src/desktop/panels/index.d.ts +4 -1
- package/dist/src/desktop/panels/index.js +7 -1
- package/dist/src/mobile/components/FloatingActionButton/FloatingActionButton.d.ts +16 -0
- package/dist/src/mobile/components/FloatingActionButton/FloatingActionButton.js +89 -0
- package/dist/src/mobile/components/FloatingActionButton/index.d.ts +1 -0
- package/dist/src/mobile/components/FloatingActionButton/index.js +8 -0
- package/dist/src/mobile/components/index.d.ts +2 -1
- package/dist/src/mobile/components/index.js +3 -1
- package/dist/src/mobile/index.d.ts +4 -4
- package/dist/src/mobile/index.js +5 -1
- package/dist/src/mobile/panels/AnnotationSheet/AnnotationSheet.d.ts +56 -0
- package/dist/src/mobile/panels/AnnotationSheet/AnnotationSheet.js +131 -0
- package/dist/src/mobile/panels/AnnotationSheet/index.d.ts +1 -0
- package/dist/src/mobile/panels/AnnotationSheet/index.js +8 -0
- package/dist/src/mobile/panels/ContentSheet/ContentSheet.d.ts +56 -0
- package/dist/src/mobile/panels/ContentSheet/ContentSheet.js +131 -0
- package/dist/src/mobile/panels/ContentSheet/index.d.ts +1 -0
- package/dist/src/mobile/panels/ContentSheet/index.js +8 -0
- package/dist/src/mobile/panels/SectionSheet/SectionSheet.d.ts +56 -0
- package/dist/src/mobile/panels/SectionSheet/SectionSheet.js +131 -0
- package/dist/src/mobile/panels/SectionSheet/index.d.ts +1 -0
- package/dist/src/mobile/panels/SectionSheet/index.js +8 -0
- package/dist/src/mobile/panels/index.d.ts +4 -1
- package/dist/src/mobile/panels/index.js +7 -1
- package/package.json +1 -1
- package/release-note.md +8 -3
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import React, { CSSProperties } from 'react';
|
|
2
|
+
import { UiColors } from '../../../common';
|
|
3
|
+
declare type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
|
|
4
|
+
export declare type ContentSheetProps = {
|
|
5
|
+
width: string;
|
|
6
|
+
height: string;
|
|
7
|
+
backgroundColorTheme?: 'transparent' | 'white' | 'black' | 'base1' | 'base2' | 'base3';
|
|
8
|
+
overrideBackgroundColorKey?: UiColors;
|
|
9
|
+
borderMode?: 'none' | 'use';
|
|
10
|
+
borderWidth?: 1 | 2;
|
|
11
|
+
borderColorTheme?: 'grey' | 'blue' | 'green';
|
|
12
|
+
overrideBorderColorKey?: UiColors;
|
|
13
|
+
shapeType?: 'rectangle' | 'round';
|
|
14
|
+
radius?: 8 | 16 | 24;
|
|
15
|
+
paddingTop?: PaddingSpacingType;
|
|
16
|
+
paddingRight?: PaddingSpacingType;
|
|
17
|
+
paddingBottom?: PaddingSpacingType;
|
|
18
|
+
paddingLeft?: PaddingSpacingType;
|
|
19
|
+
overrideCSS?: CSSProperties;
|
|
20
|
+
children: React.ReactNode;
|
|
21
|
+
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
22
|
+
};
|
|
23
|
+
export declare type StyleProps = {
|
|
24
|
+
$width?: string;
|
|
25
|
+
$height?: string;
|
|
26
|
+
$backgroundColorTheme?: 'transparent' | 'white' | 'black' | 'base1' | 'base2' | 'base3';
|
|
27
|
+
overrideBackgroundColorKey?: UiColors;
|
|
28
|
+
borderMode?: 'none' | 'use';
|
|
29
|
+
$borderWidth?: 1 | 2;
|
|
30
|
+
$borderColorTheme?: 'grey' | 'blue' | 'green';
|
|
31
|
+
overrideBorderColorKey?: UiColors;
|
|
32
|
+
shapeType?: 'rectangle' | 'round';
|
|
33
|
+
$radius?: 8 | 16 | 24;
|
|
34
|
+
paddingTop?: PaddingSpacingType;
|
|
35
|
+
paddingRight?: PaddingSpacingType;
|
|
36
|
+
paddingBottom?: PaddingSpacingType;
|
|
37
|
+
paddingLeft?: PaddingSpacingType;
|
|
38
|
+
};
|
|
39
|
+
declare const paddingSpacing: {
|
|
40
|
+
readonly spacing_a: "spacingA";
|
|
41
|
+
readonly spacing_b: "spacingB";
|
|
42
|
+
readonly spacing_c: "spacingC";
|
|
43
|
+
readonly spacing_d: "spacingD";
|
|
44
|
+
readonly spacing_e: "spacingE";
|
|
45
|
+
readonly spacing_f: "spacingF";
|
|
46
|
+
readonly spacing_g: "spacingG";
|
|
47
|
+
readonly spacing_h: "spacingH";
|
|
48
|
+
readonly spacing_i: "spacingI";
|
|
49
|
+
readonly spacing_j: "spacingJ";
|
|
50
|
+
readonly spacing_k: "spacingK";
|
|
51
|
+
readonly spacing_l: "spacingL";
|
|
52
|
+
readonly spacing_m: "spacingM";
|
|
53
|
+
readonly spacing_n: "spacingN";
|
|
54
|
+
};
|
|
55
|
+
declare function ContentSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, onClick }: ContentSheetProps): JSX.Element;
|
|
56
|
+
export default ContentSheet;
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
|
+
if (k2 === undefined) k2 = k;
|
|
8
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
var react_1 = __importDefault(require("react"));
|
|
30
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
|
31
|
+
var backgroundColorTheme = {
|
|
32
|
+
transparent: 'ui_cpnt_sheet_base_03',
|
|
33
|
+
white: 'ui_cpnt_sheet_base_white',
|
|
34
|
+
black: 'ui_cpnt_sheet_base_black',
|
|
35
|
+
base1: 'ui_cpnt_sheet_base_01',
|
|
36
|
+
base2: 'ui_cpnt_sheet_base_02',
|
|
37
|
+
base3: 'ui_cpnt_sheet_base'
|
|
38
|
+
};
|
|
39
|
+
var borderColorTheme = {
|
|
40
|
+
grey: 'ui_cpnt_sheet_border_01',
|
|
41
|
+
blue: 'ui_cpnt_sheet_border_02',
|
|
42
|
+
green: 'ui_cpnt_sheet_border_03'
|
|
43
|
+
};
|
|
44
|
+
var paddingSpacing = {
|
|
45
|
+
spacing_a: 'spacingA',
|
|
46
|
+
spacing_b: 'spacingB',
|
|
47
|
+
spacing_c: 'spacingC',
|
|
48
|
+
spacing_d: 'spacingD',
|
|
49
|
+
spacing_e: 'spacingE',
|
|
50
|
+
spacing_f: 'spacingF',
|
|
51
|
+
spacing_g: 'spacingG',
|
|
52
|
+
spacing_h: 'spacingH',
|
|
53
|
+
spacing_i: 'spacingI',
|
|
54
|
+
spacing_j: 'spacingJ',
|
|
55
|
+
spacing_k: 'spacingK',
|
|
56
|
+
spacing_l: 'spacingL',
|
|
57
|
+
spacing_m: 'spacingM',
|
|
58
|
+
spacing_n: 'spacingN'
|
|
59
|
+
};
|
|
60
|
+
function ContentSheet(_a) {
|
|
61
|
+
var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'base3' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, onClick = _a.onClick;
|
|
62
|
+
var handleClick = function (e) {
|
|
63
|
+
if (onClick) {
|
|
64
|
+
onClick(e);
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
return (react_1.default.createElement(S_ContentSheet, { "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick }, children));
|
|
68
|
+
}
|
|
69
|
+
var radiusStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), function (_a) {
|
|
70
|
+
var $radius = _a.$radius;
|
|
71
|
+
return $radius + "px";
|
|
72
|
+
});
|
|
73
|
+
var paddingTopStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding-top: ", ";\n"], ["\n padding-top: ", ";\n"])), function (_a) {
|
|
74
|
+
var theme = _a.theme, paddingTop = _a.paddingTop;
|
|
75
|
+
return paddingTop && (paddingTop === 'none' ? 0 : theme.spacing[paddingSpacing[paddingTop]]);
|
|
76
|
+
});
|
|
77
|
+
var paddingRightStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding-right: ", ";\n"], ["\n padding-right: ", ";\n"])), function (_a) {
|
|
78
|
+
var theme = _a.theme, paddingRight = _a.paddingRight;
|
|
79
|
+
return paddingRight && (paddingRight === 'none' ? 0 : theme.spacing[paddingSpacing[paddingRight]]);
|
|
80
|
+
});
|
|
81
|
+
var paddingBottomStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding-bottom: ", ";\n"], ["\n padding-bottom: ", ";\n"])), function (_a) {
|
|
82
|
+
var theme = _a.theme, paddingBottom = _a.paddingBottom;
|
|
83
|
+
return paddingBottom && (paddingBottom === 'none' ? 0 : theme.spacing[paddingSpacing[paddingBottom]]);
|
|
84
|
+
});
|
|
85
|
+
var paddingLeftStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding-left: ", ";\n"], ["\n padding-left: ", ";\n"])), function (_a) {
|
|
86
|
+
var theme = _a.theme, paddingLeft = _a.paddingLeft;
|
|
87
|
+
return paddingLeft && (paddingLeft === 'none' ? 0 : theme.spacing[paddingSpacing[paddingLeft]]);
|
|
88
|
+
});
|
|
89
|
+
var overrideStyle = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n"], ["\n background-color: ", ";\n border-color: ", ";\n"])), function (_a) {
|
|
90
|
+
var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
|
|
91
|
+
return overrideBackgroundColorKey && theme[overrideBackgroundColorKey];
|
|
92
|
+
}, function (_a) {
|
|
93
|
+
var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
|
|
94
|
+
return overrideBorderColorKey && theme[overrideBorderColorKey];
|
|
95
|
+
});
|
|
96
|
+
var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n background-color: ", ";\n border-style: ", ";\n border-width: ", ";\n border-color: ", ";\n box-sizing: border-box;\n\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n"], ["\n width: ", ";\n height: ", ";\n background-color: ", ";\n border-style: ", ";\n border-width: ", ";\n border-color: ", ";\n box-sizing: border-box;\n\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
|
|
97
|
+
var $width = _a.$width;
|
|
98
|
+
return $width;
|
|
99
|
+
}, function (_a) {
|
|
100
|
+
var $height = _a.$height;
|
|
101
|
+
return $height;
|
|
102
|
+
}, function (_a) {
|
|
103
|
+
var theme = _a.theme, $backgroundColorTheme = _a.$backgroundColorTheme;
|
|
104
|
+
return $backgroundColorTheme && theme[backgroundColorTheme[$backgroundColorTheme]];
|
|
105
|
+
}, function (_a) {
|
|
106
|
+
var borderMode = _a.borderMode;
|
|
107
|
+
return (borderMode === 'use' ? 'solid' : 'none');
|
|
108
|
+
}, function (_a) {
|
|
109
|
+
var $borderWidth = _a.$borderWidth;
|
|
110
|
+
return $borderWidth + "px";
|
|
111
|
+
}, function (_a) {
|
|
112
|
+
var theme = _a.theme, $borderColorTheme = _a.$borderColorTheme;
|
|
113
|
+
return $borderColorTheme && theme[borderColorTheme[$borderColorTheme]];
|
|
114
|
+
}, function (_a) {
|
|
115
|
+
var shapeType = _a.shapeType;
|
|
116
|
+
return shapeType === 'round' && radiusStyle;
|
|
117
|
+
}, function (_a) {
|
|
118
|
+
var paddingTop = _a.paddingTop;
|
|
119
|
+
return paddingTop !== 'none' && paddingTopStyle;
|
|
120
|
+
}, function (_a) {
|
|
121
|
+
var paddingRight = _a.paddingRight;
|
|
122
|
+
return paddingRight !== 'none' && paddingRightStyle;
|
|
123
|
+
}, function (_a) {
|
|
124
|
+
var paddingBottom = _a.paddingBottom;
|
|
125
|
+
return paddingBottom !== 'none' && paddingBottomStyle;
|
|
126
|
+
}, function (_a) {
|
|
127
|
+
var paddingLeft = _a.paddingLeft;
|
|
128
|
+
return paddingLeft !== 'none' && paddingLeftStyle;
|
|
129
|
+
}, overrideStyle);
|
|
130
|
+
exports.default = ContentSheet;
|
|
131
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as ContentSheet } from './ContentSheet';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.ContentSheet = void 0;
|
|
7
|
+
var ContentSheet_1 = require("./ContentSheet");
|
|
8
|
+
Object.defineProperty(exports, "ContentSheet", { enumerable: true, get: function () { return __importDefault(ContentSheet_1).default; } });
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import React, { CSSProperties } from 'react';
|
|
2
|
+
import { UiColors } from '../../../common';
|
|
3
|
+
declare type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
|
|
4
|
+
export declare type SectionSheetProps = {
|
|
5
|
+
width: string;
|
|
6
|
+
height: string;
|
|
7
|
+
backgroundColorTheme?: 'transparent' | 'white' | 'black' | 'base1' | 'base2' | 'base3';
|
|
8
|
+
overrideBackgroundColorKey?: UiColors;
|
|
9
|
+
borderMode?: 'none' | 'use';
|
|
10
|
+
borderWidth?: 1 | 2;
|
|
11
|
+
borderColorTheme?: 'grey' | 'blue' | 'green';
|
|
12
|
+
overrideBorderColorKey?: UiColors;
|
|
13
|
+
shapeType?: 'rectangle' | 'round';
|
|
14
|
+
radius?: 8 | 16 | 24;
|
|
15
|
+
paddingTop?: PaddingSpacingType;
|
|
16
|
+
paddingRight?: PaddingSpacingType;
|
|
17
|
+
paddingBottom?: PaddingSpacingType;
|
|
18
|
+
paddingLeft?: PaddingSpacingType;
|
|
19
|
+
overrideCSS?: CSSProperties;
|
|
20
|
+
children: React.ReactNode;
|
|
21
|
+
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
22
|
+
};
|
|
23
|
+
export declare type StyleProps = {
|
|
24
|
+
$width?: string;
|
|
25
|
+
$height?: string;
|
|
26
|
+
$backgroundColorTheme?: 'transparent' | 'white' | 'black' | 'base1' | 'base2' | 'base3';
|
|
27
|
+
overrideBackgroundColorKey?: UiColors;
|
|
28
|
+
borderMode?: 'none' | 'use';
|
|
29
|
+
$borderWidth?: 1 | 2;
|
|
30
|
+
$borderColorTheme?: 'grey' | 'blue' | 'green';
|
|
31
|
+
overrideBorderColorKey?: UiColors;
|
|
32
|
+
shapeType?: 'rectangle' | 'round';
|
|
33
|
+
$radius?: 8 | 16 | 24;
|
|
34
|
+
paddingTop?: PaddingSpacingType;
|
|
35
|
+
paddingRight?: PaddingSpacingType;
|
|
36
|
+
paddingBottom?: PaddingSpacingType;
|
|
37
|
+
paddingLeft?: PaddingSpacingType;
|
|
38
|
+
};
|
|
39
|
+
declare const paddingSpacing: {
|
|
40
|
+
readonly spacing_a: "spacingA";
|
|
41
|
+
readonly spacing_b: "spacingB";
|
|
42
|
+
readonly spacing_c: "spacingC";
|
|
43
|
+
readonly spacing_d: "spacingD";
|
|
44
|
+
readonly spacing_e: "spacingE";
|
|
45
|
+
readonly spacing_f: "spacingF";
|
|
46
|
+
readonly spacing_g: "spacingG";
|
|
47
|
+
readonly spacing_h: "spacingH";
|
|
48
|
+
readonly spacing_i: "spacingI";
|
|
49
|
+
readonly spacing_j: "spacingJ";
|
|
50
|
+
readonly spacing_k: "spacingK";
|
|
51
|
+
readonly spacing_l: "spacingL";
|
|
52
|
+
readonly spacing_m: "spacingM";
|
|
53
|
+
readonly spacing_n: "spacingN";
|
|
54
|
+
};
|
|
55
|
+
declare function SectionSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, onClick }: SectionSheetProps): JSX.Element;
|
|
56
|
+
export default SectionSheet;
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
|
+
if (k2 === undefined) k2 = k;
|
|
8
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
var react_1 = __importDefault(require("react"));
|
|
30
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
|
31
|
+
var backgroundColorTheme = {
|
|
32
|
+
transparent: 'ui_cpnt_sheet_base_03',
|
|
33
|
+
white: 'ui_cpnt_sheet_base_white',
|
|
34
|
+
black: 'ui_cpnt_sheet_base_black',
|
|
35
|
+
base1: 'ui_cpnt_sheet_base_01',
|
|
36
|
+
base2: 'ui_cpnt_sheet_base_02',
|
|
37
|
+
base3: 'ui_cpnt_sheet_base'
|
|
38
|
+
};
|
|
39
|
+
var borderColorTheme = {
|
|
40
|
+
grey: 'ui_cpnt_sheet_border_01',
|
|
41
|
+
blue: 'ui_cpnt_sheet_border_02',
|
|
42
|
+
green: 'ui_cpnt_sheet_border_03'
|
|
43
|
+
};
|
|
44
|
+
var paddingSpacing = {
|
|
45
|
+
spacing_a: 'spacingA',
|
|
46
|
+
spacing_b: 'spacingB',
|
|
47
|
+
spacing_c: 'spacingC',
|
|
48
|
+
spacing_d: 'spacingD',
|
|
49
|
+
spacing_e: 'spacingE',
|
|
50
|
+
spacing_f: 'spacingF',
|
|
51
|
+
spacing_g: 'spacingG',
|
|
52
|
+
spacing_h: 'spacingH',
|
|
53
|
+
spacing_i: 'spacingI',
|
|
54
|
+
spacing_j: 'spacingJ',
|
|
55
|
+
spacing_k: 'spacingK',
|
|
56
|
+
spacing_l: 'spacingL',
|
|
57
|
+
spacing_m: 'spacingM',
|
|
58
|
+
spacing_n: 'spacingN'
|
|
59
|
+
};
|
|
60
|
+
function SectionSheet(_a) {
|
|
61
|
+
var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'transparent' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, onClick = _a.onClick;
|
|
62
|
+
var handleClick = function (e) {
|
|
63
|
+
if (onClick) {
|
|
64
|
+
onClick(e);
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
return (react_1.default.createElement(S_SectionSheet, { "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick }, children));
|
|
68
|
+
}
|
|
69
|
+
var radiusStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), function (_a) {
|
|
70
|
+
var $radius = _a.$radius;
|
|
71
|
+
return $radius + "px";
|
|
72
|
+
});
|
|
73
|
+
var paddingTopStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding-top: ", ";\n"], ["\n padding-top: ", ";\n"])), function (_a) {
|
|
74
|
+
var theme = _a.theme, paddingTop = _a.paddingTop;
|
|
75
|
+
return paddingTop && (paddingTop === 'none' ? 0 : theme.spacing[paddingSpacing[paddingTop]]);
|
|
76
|
+
});
|
|
77
|
+
var paddingRightStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding-right: ", ";\n"], ["\n padding-right: ", ";\n"])), function (_a) {
|
|
78
|
+
var theme = _a.theme, paddingRight = _a.paddingRight;
|
|
79
|
+
return paddingRight && (paddingRight === 'none' ? 0 : theme.spacing[paddingSpacing[paddingRight]]);
|
|
80
|
+
});
|
|
81
|
+
var paddingBottomStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding-bottom: ", ";\n"], ["\n padding-bottom: ", ";\n"])), function (_a) {
|
|
82
|
+
var theme = _a.theme, paddingBottom = _a.paddingBottom;
|
|
83
|
+
return paddingBottom && (paddingBottom === 'none' ? 0 : theme.spacing[paddingSpacing[paddingBottom]]);
|
|
84
|
+
});
|
|
85
|
+
var paddingLeftStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding-left: ", ";\n"], ["\n padding-left: ", ";\n"])), function (_a) {
|
|
86
|
+
var theme = _a.theme, paddingLeft = _a.paddingLeft;
|
|
87
|
+
return paddingLeft && (paddingLeft === 'none' ? 0 : theme.spacing[paddingSpacing[paddingLeft]]);
|
|
88
|
+
});
|
|
89
|
+
var advancedCSS = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n"], ["\n background-color: ", ";\n border-color: ", ";\n"])), function (_a) {
|
|
90
|
+
var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
|
|
91
|
+
return overrideBackgroundColorKey && theme[overrideBackgroundColorKey];
|
|
92
|
+
}, function (_a) {
|
|
93
|
+
var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
|
|
94
|
+
return overrideBorderColorKey && theme[overrideBorderColorKey];
|
|
95
|
+
});
|
|
96
|
+
var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n background-color: ", ";\n border-style: ", ";\n border-width: ", ";\n border-color: ", ";\n box-sizing: border-box;\n\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n"], ["\n width: ", ";\n height: ", ";\n background-color: ", ";\n border-style: ", ";\n border-width: ", ";\n border-color: ", ";\n box-sizing: border-box;\n\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
|
|
97
|
+
var $width = _a.$width;
|
|
98
|
+
return $width;
|
|
99
|
+
}, function (_a) {
|
|
100
|
+
var $height = _a.$height;
|
|
101
|
+
return $height;
|
|
102
|
+
}, function (_a) {
|
|
103
|
+
var theme = _a.theme, $backgroundColorTheme = _a.$backgroundColorTheme;
|
|
104
|
+
return $backgroundColorTheme && theme[backgroundColorTheme[$backgroundColorTheme]];
|
|
105
|
+
}, function (_a) {
|
|
106
|
+
var borderMode = _a.borderMode;
|
|
107
|
+
return (borderMode === 'use' ? 'solid' : 'none');
|
|
108
|
+
}, function (_a) {
|
|
109
|
+
var $borderWidth = _a.$borderWidth;
|
|
110
|
+
return $borderWidth + "px";
|
|
111
|
+
}, function (_a) {
|
|
112
|
+
var theme = _a.theme, $borderColorTheme = _a.$borderColorTheme;
|
|
113
|
+
return $borderColorTheme && theme[borderColorTheme[$borderColorTheme]];
|
|
114
|
+
}, function (_a) {
|
|
115
|
+
var shapeType = _a.shapeType;
|
|
116
|
+
return shapeType === 'round' && radiusStyle;
|
|
117
|
+
}, function (_a) {
|
|
118
|
+
var paddingTop = _a.paddingTop;
|
|
119
|
+
return paddingTop !== 'none' && paddingTopStyle;
|
|
120
|
+
}, function (_a) {
|
|
121
|
+
var paddingRight = _a.paddingRight;
|
|
122
|
+
return paddingRight !== 'none' && paddingRightStyle;
|
|
123
|
+
}, function (_a) {
|
|
124
|
+
var paddingBottom = _a.paddingBottom;
|
|
125
|
+
return paddingBottom !== 'none' && paddingBottomStyle;
|
|
126
|
+
}, function (_a) {
|
|
127
|
+
var paddingLeft = _a.paddingLeft;
|
|
128
|
+
return paddingLeft !== 'none' && paddingLeftStyle;
|
|
129
|
+
}, advancedCSS);
|
|
130
|
+
exports.default = SectionSheet;
|
|
131
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as SectionSheet } from './SectionSheet';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.SectionSheet = void 0;
|
|
7
|
+
var SectionSheet_1 = require("./SectionSheet");
|
|
8
|
+
Object.defineProperty(exports, "SectionSheet", { enumerable: true, get: function () { return __importDefault(SectionSheet_1).default; } });
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
+
import { AnnotationSheet } from './AnnotationSheet';
|
|
2
|
+
import { ContentSheet } from './ContentSheet';
|
|
1
3
|
import { MobileBasicModal } from './MobileBasicModal';
|
|
2
|
-
|
|
4
|
+
import { SectionSheet } from './SectionSheet';
|
|
5
|
+
export { AnnotationSheet, ContentSheet, MobileBasicModal, SectionSheet };
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.MobileBasicModal = void 0;
|
|
3
|
+
exports.SectionSheet = exports.MobileBasicModal = exports.ContentSheet = exports.AnnotationSheet = void 0;
|
|
4
|
+
var AnnotationSheet_1 = require("./AnnotationSheet");
|
|
5
|
+
Object.defineProperty(exports, "AnnotationSheet", { enumerable: true, get: function () { return AnnotationSheet_1.AnnotationSheet; } });
|
|
6
|
+
var ContentSheet_1 = require("./ContentSheet");
|
|
7
|
+
Object.defineProperty(exports, "ContentSheet", { enumerable: true, get: function () { return ContentSheet_1.ContentSheet; } });
|
|
4
8
|
var MobileBasicModal_1 = require("./MobileBasicModal");
|
|
5
9
|
Object.defineProperty(exports, "MobileBasicModal", { enumerable: true, get: function () { return MobileBasicModal_1.MobileBasicModal; } });
|
|
10
|
+
var SectionSheet_1 = require("./SectionSheet");
|
|
11
|
+
Object.defineProperty(exports, "SectionSheet", { enumerable: true, get: function () { return SectionSheet_1.SectionSheet; } });
|
package/package.json
CHANGED
package/release-note.md
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
# PDS-DEV-KIT-WEB Release Notes
|
|
2
|
-
## [v1.
|
|
2
|
+
## [v1.5.0]
|
|
3
3
|
|
|
4
4
|
### Component
|
|
5
|
-
*
|
|
6
|
-
*
|
|
5
|
+
* FloatingActionButton
|
|
6
|
+
* 모바일 최적화 컴포넌트 생성 (M_FloatingActionButton)
|
|
7
|
+
|
|
8
|
+
### Panel
|
|
9
|
+
* ContentSheet 신규 출시
|
|
10
|
+
* AnnotationSheet 신규 출시
|
|
11
|
+
* SectionSheet 신규 출시
|