yootd 0.0.12 → 0.0.13
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/Preview/index.js +4 -1
- package/dist/Preview/index.scss +35 -35
- package/dist/Preview/types/type.d.ts +22 -21
- package/package.json +1 -1
package/dist/Preview/index.js
CHANGED
|
@@ -28,6 +28,8 @@ export var Preview = function Preview(_ref) {
|
|
|
28
28
|
panOnDrag = _ref.panOnDrag,
|
|
29
29
|
zoomOnScroll = _ref.zoomOnScroll,
|
|
30
30
|
content = _ref.content,
|
|
31
|
+
_ref$fitView = _ref.fitView,
|
|
32
|
+
fitView = _ref$fitView === void 0 ? true : _ref$fitView,
|
|
31
33
|
_ref$modes = _ref.modes,
|
|
32
34
|
modes = _ref$modes === void 0 ? ['phone', 'web'] : _ref$modes,
|
|
33
35
|
_ref$width = _ref.width,
|
|
@@ -52,6 +54,7 @@ export var Preview = function Preview(_ref) {
|
|
|
52
54
|
useEffect(function () {
|
|
53
55
|
setMode(modes === null || modes === void 0 ? void 0 : modes[0]);
|
|
54
56
|
}, [modes]);
|
|
57
|
+
console.log('modes');
|
|
55
58
|
return /*#__PURE__*/React.createElement("div", {
|
|
56
59
|
className: "".concat(mb),
|
|
57
60
|
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
@@ -77,7 +80,7 @@ export var Preview = function Preview(_ref) {
|
|
|
77
80
|
minZoom: minZoom,
|
|
78
81
|
panOnDrag: panOnDrag,
|
|
79
82
|
zoomOnScroll: zoomOnScroll,
|
|
80
|
-
fitView:
|
|
83
|
+
fitView: fitView,
|
|
81
84
|
preventScrolling: false
|
|
82
85
|
}, controls && /*#__PURE__*/React.createElement(Controls, {
|
|
83
86
|
defaultZoom: defaultZoom
|
package/dist/Preview/index.scss
CHANGED
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
.yot-preview {
|
|
2
|
-
&-controls {
|
|
3
|
-
display: flex;
|
|
4
|
-
justify-content: center;
|
|
5
|
-
align-items: center;
|
|
6
|
-
z-index: 100;
|
|
7
|
-
position: absolute;
|
|
8
|
-
bottom: 10px;
|
|
9
|
-
right: 10px;
|
|
10
|
-
background-color: #ffffff;
|
|
11
|
-
border-radius: 8px;
|
|
12
|
-
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16);
|
|
13
|
-
.ant-btn.css-var-yootd.ant-btn-default.ant-btn-color-default.ant-btn-variant-outlined {
|
|
14
|
-
background-color: transparent;
|
|
15
|
-
border: none;
|
|
16
|
-
&:hover .ant-btn-icon svg path {
|
|
17
|
-
fill: var(--ant-color-primary);
|
|
18
|
-
}
|
|
19
|
-
&:hover .ant-btn-icon svg #rect-stroke {
|
|
20
|
-
stroke: var(--ant-color-primary);
|
|
21
|
-
}
|
|
22
|
-
&:hover .ant-btn-icon svg #reset-icon-rect {
|
|
23
|
-
fill: var(--ant-color-primary);
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
&--zoom {
|
|
27
|
-
width: 64px;
|
|
28
|
-
background-color: transparent;
|
|
29
|
-
border: none;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
.react-flow__panel.center {
|
|
33
|
-
transform: translateX(-63%);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
1
|
+
.yot-preview {
|
|
2
|
+
&-controls {
|
|
3
|
+
display: flex;
|
|
4
|
+
justify-content: center;
|
|
5
|
+
align-items: center;
|
|
6
|
+
z-index: 100;
|
|
7
|
+
position: absolute;
|
|
8
|
+
bottom: 10px;
|
|
9
|
+
right: 10px;
|
|
10
|
+
background-color: #ffffff;
|
|
11
|
+
border-radius: 8px;
|
|
12
|
+
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16);
|
|
13
|
+
.ant-btn.css-var-yootd.ant-btn-default.ant-btn-color-default.ant-btn-variant-outlined {
|
|
14
|
+
background-color: transparent;
|
|
15
|
+
border: none;
|
|
16
|
+
&:hover .ant-btn-icon svg path {
|
|
17
|
+
fill: var(--ant-color-primary);
|
|
18
|
+
}
|
|
19
|
+
&:hover .ant-btn-icon svg #rect-stroke {
|
|
20
|
+
stroke: var(--ant-color-primary);
|
|
21
|
+
}
|
|
22
|
+
&:hover .ant-btn-icon svg #reset-icon-rect {
|
|
23
|
+
fill: var(--ant-color-primary);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
&--zoom {
|
|
27
|
+
width: 64px;
|
|
28
|
+
background-color: transparent;
|
|
29
|
+
border: none;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
.react-flow__panel.center {
|
|
33
|
+
transform: translateX(-63%);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
@@ -1,21 +1,22 @@
|
|
|
1
|
-
export interface PrevewProps {
|
|
2
|
-
controls?: boolean; // 是否显示右下角的放大缩小组件
|
|
3
|
-
defaultZoom?: number; // 初始化放大倍数
|
|
4
|
-
maxZoom?: number; // 最大放大倍数
|
|
5
|
-
minZoom?: number; // 最小放大倍数
|
|
6
|
-
panOnDrag?: boolean; // 是否可以拖拽
|
|
7
|
-
zoomOnScroll?: boolean; // 是否可以滚动
|
|
8
|
-
modes?: ['phone', 'web'] | ['phone'] | ['web']; // 预览模式
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
1
|
+
export interface PrevewProps {
|
|
2
|
+
controls?: boolean; // 是否显示右下角的放大缩小组件
|
|
3
|
+
defaultZoom?: number; // 初始化放大倍数
|
|
4
|
+
maxZoom?: number; // 最大放大倍数
|
|
5
|
+
minZoom?: number; // 最小放大倍数
|
|
6
|
+
panOnDrag?: boolean; // 是否可以拖拽
|
|
7
|
+
zoomOnScroll?: boolean; // 是否可以滚动
|
|
8
|
+
modes?: ['phone', 'web'] | ['phone'] | ['web']; // 预览模式
|
|
9
|
+
fitView?: boolean; // 是否自动适应视图
|
|
10
|
+
content?: ReactNode; // 数据
|
|
11
|
+
width?: number | string; // 宽度
|
|
12
|
+
height?: number | string; // 高度
|
|
13
|
+
style?: React.CSSProperties; // 样式
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export interface TopPreviewProps {
|
|
17
|
+
mode: string;
|
|
18
|
+
onChange: (value: string) => void;
|
|
19
|
+
}
|
|
20
|
+
export interface ControlsProps {
|
|
21
|
+
defaultZoom?: number; // 初始化放大倍数
|
|
22
|
+
}
|