@knockout-js/layout 0.1.26 → 0.1.27
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/es2017/components/modal/index.js +10 -18
- package/es2017/components/modal/index.js.map +1 -1
- package/es2017/components/modal/index.module.css +32 -6
- package/esm/components/modal/index.js +12 -20
- package/esm/components/modal/index.js.map +1 -1
- package/esm/components/modal/index.module.css +32 -6
- package/package.json +3 -3
|
@@ -17,7 +17,6 @@ const Modal = (props)=>{
|
|
|
17
17
|
"screenfulIcon"
|
|
18
18
|
]);
|
|
19
19
|
const [screenful, setScreenful] = useState(defaultScreenful !== null && defaultScreenful !== void 0 ? defaultScreenful : false);
|
|
20
|
-
const [disabled, setDisabled] = useState(true);
|
|
21
20
|
const [bounds, setBounds] = useState({
|
|
22
21
|
left: 0,
|
|
23
22
|
top: 0,
|
|
@@ -25,26 +24,18 @@ const Modal = (props)=>{
|
|
|
25
24
|
right: 0
|
|
26
25
|
});
|
|
27
26
|
const draggleRef = useRef(null);
|
|
27
|
+
const draggable = !screenful && isDraggable !== false;
|
|
28
28
|
return /*#__PURE__*/ _jsx(AntdModal, _object_spread_props(_object_spread({}, restProps), {
|
|
29
|
-
className:
|
|
29
|
+
className: [
|
|
30
|
+
screenful ? styles.screenfulModal : '',
|
|
31
|
+
draggable ? styles.draggableModal : ''
|
|
32
|
+
].filter(Boolean).join(' ') || undefined,
|
|
30
33
|
width: screenful ? 'auto' : width,
|
|
31
34
|
style: screenful ? {
|
|
32
35
|
top: 0
|
|
33
36
|
} : style,
|
|
34
37
|
title: /*#__PURE__*/ _jsxs("div", {
|
|
35
|
-
className:
|
|
36
|
-
onMouseOver: ()=>{
|
|
37
|
-
if (screenful) {
|
|
38
|
-
setDisabled(true);
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
if (disabled) {
|
|
42
|
-
setDisabled(false);
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
onMouseOut: ()=>{
|
|
46
|
-
setDisabled(true);
|
|
47
|
-
},
|
|
38
|
+
className: styles.titleWrapper,
|
|
48
39
|
children: [
|
|
49
40
|
title,
|
|
50
41
|
screenfulIcon === false ? /*#__PURE__*/ _jsx(_Fragment, {}) : /*#__PURE__*/ _jsx(Button, {
|
|
@@ -61,10 +52,11 @@ const Modal = (props)=>{
|
|
|
61
52
|
})
|
|
62
53
|
]
|
|
63
54
|
}),
|
|
64
|
-
modalRender: (modal)=>
|
|
65
|
-
disabled: disabled,
|
|
55
|
+
modalRender: (modal)=>draggable ? /*#__PURE__*/ _jsx(Draggable, {
|
|
66
56
|
bounds: bounds,
|
|
67
57
|
nodeRef: draggleRef,
|
|
58
|
+
handle: ".ant-modal-header",
|
|
59
|
+
cancel: "button, a, .ant-modal-close, [role='button']",
|
|
68
60
|
onStart: (event, uiData)=>{
|
|
69
61
|
var _draggleRef_current;
|
|
70
62
|
const { clientWidth, clientHeight } = window.document.documentElement;
|
|
@@ -83,7 +75,7 @@ const Modal = (props)=>{
|
|
|
83
75
|
ref: draggleRef,
|
|
84
76
|
children: modal
|
|
85
77
|
})
|
|
86
|
-
})
|
|
78
|
+
}) : modal
|
|
87
79
|
}));
|
|
88
80
|
};
|
|
89
81
|
export default Modal;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;AAAA,SAASA,cAAc,QAAQ,oBAAoB;AACnD,SAASC,SAASC,SAAS,EAAEC,MAAM,QAAsC,OAAO;AAChF,SAAoBC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AACpD,OAAOC,eAAe,kBAAkB;AACxC,OAAOC,YAAY,qBAAqB;AAiBxC,MAAMN,QAAQ,CAACO;IACb,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,KAAK,EAAEC,gBAAgB,EAAEC,WAAW,EAAEC,aAAa,EAAgB,GAAGN,OAAdO,uCAAcP;QAApFC;QAAOC;QAAOC;QAAOC;QAAkBC;QAAaC;;IAC5D,MAAM,CAACE,WAAWC,aAAa,GAAGZ,SAASO,8EAAoB;IAC/D,MAAM,CAACM,
|
|
1
|
+
{"version":3,"mappings":";;;;AAAA,SAASA,cAAc,QAAQ,oBAAoB;AACnD,SAASC,SAASC,SAAS,EAAEC,MAAM,QAAsC,OAAO;AAChF,SAAoBC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AACpD,OAAOC,eAAe,kBAAkB;AACxC,OAAOC,YAAY,qBAAqB;AAiBxC,MAAMN,QAAQ,CAACO;IACb,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,KAAK,EAAEC,gBAAgB,EAAEC,WAAW,EAAEC,aAAa,EAAgB,GAAGN,OAAdO,uCAAcP;QAApFC;QAAOC;QAAOC;QAAOC;QAAkBC;QAAaC;;IAC5D,MAAM,CAACE,WAAWC,aAAa,GAAGZ,SAASO,8EAAoB;IAC/D,MAAM,CAACM,QAAQC,UAAU,GAAGd,SAAS;QAAEe,MAAM;QAAGC,KAAK;QAAGC,QAAQ;QAAGC,OAAO;IAAE;IAC5E,MAAMC,aAAapB,OAAuB;IAC1C,MAAMqB,YAAY,CAACT,aAAaH,gBAAgB;IAEhD,qBAAO,KAACX,mDACFa;QACJW,WAAW;YACTV,YAAYT,OAAOoB,cAAc,GAAG;YACpCF,YAAYlB,OAAOqB,cAAc,GAAG;SACrC,CAACC,MAAM,CAACC,SAASC,IAAI,CAAC,QAAQC;QAC/BvB,OAAOO,YAAY,SAASP;QAC5BC,OAAOM,YAAY;YAAEK,KAAK;QAAE,IAAIX;QAChCC,qBACE,MAACsB;YAAIP,WAAWnB,OAAO2B,YAAY;;gBAChCvB;gBACAG,kBAAkB,sBAAQ,oCAAQ,KAACX;oBAClCuB,WAAWnB,OAAOO,aAAa;oBAC/BqB,MAAK;oBACLC,MAAK;oBACLC,SAAS,CAACC;wBACRA,MAAMC,eAAe;wBACrBtB,aAAa,CAACD;oBAChB;8BAECF,gBAAgBA,8BAAgB,KAACd;wBAAewC,KAAKR;;;;;QAK5DS,aAAa,CAACC,QACZjB,0BAAY,KAACnB;gBACXY,QAAQA;gBACRyB,SAASnB;gBACToB,QAAO;gBACPC,QAAO;gBACPC,SAAS,CAACR,OAAOS;wBAEIvB;oBADnB,MAAM,EAAEwB,WAAW,EAAEC,YAAY,EAAE,GAAGC,OAAOC,QAAQ,CAACC,eAAe;oBACrE,MAAMC,cAAa7B,iCAAW8B,OAAO,cAAlB9B,8DAAoB+B,qBAAqB;oBAC5D,IAAI,CAACF,YAAY;wBACf;oBACF;oBACAlC,UAAU;wBACRC,MAAM,CAACiC,WAAWjC,IAAI,GAAG2B,OAAOS,CAAC;wBACjCjC,OAAOyB,cAAeK,YAAW9B,KAAK,GAAGwB,OAAOS,CAAC,CAADA;wBAChDnC,KAAK,CAACgC,WAAWhC,GAAG,GAAG0B,OAAOU,CAAC;wBAC/BnC,QAAQ2B,eAAgBI,YAAW/B,MAAM,GAAGyB,OAAOU,CAAC,CAADA;oBACrD;gBACF;0BAEA,mBAACxB;oBAAIyB,KAAKlC;8BAAakB;;iBACVA;;AAGrB;AAEA,eAAezC,MAAM","names":["ExpandOutlined","Modal","AntdModal","Button","useRef","useState","Draggable","styles","props","width","style","title","defaultScreenful","isDraggable","screenfulIcon","restProps","screenful","setScreenful","bounds","setBounds","left","top","bottom","right","draggleRef","draggable","className","screenfulModal","draggableModal","filter","Boolean","join","undefined","div","titleWrapper","type","size","onClick","event","stopPropagation","rev","modalRender","modal","nodeRef","handle","cancel","onStart","uiData","clientWidth","clientHeight","window","document","documentElement","targetRect","current","getBoundingClientRect","x","y","ref"],"ignoreList":[],"sources":[".\\src\\components\\modal\\index.tsx"]}
|
|
@@ -1,14 +1,40 @@
|
|
|
1
|
-
.modal {
|
|
1
|
+
.draggableModal :global(.ant-modal-header) {
|
|
2
|
+
position: absolute;
|
|
3
|
+
left: 0;
|
|
4
|
+
top: 0;
|
|
5
|
+
width: 100%;
|
|
2
6
|
cursor: move;
|
|
7
|
+
padding: 16px 24px;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.draggableModal :global(.ant-modal-content) {
|
|
11
|
+
padding-top: 44px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.titleWrapper {
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
justify-content: space-between;
|
|
18
|
+
padding-right: 18px;
|
|
3
19
|
}
|
|
4
20
|
|
|
5
21
|
.screenfulIcon {
|
|
6
|
-
|
|
7
|
-
right: 40px;
|
|
8
|
-
top: 16px;
|
|
22
|
+
flex-shrink: 0;
|
|
9
23
|
color: rgba(0, 0, 0, 0.45);
|
|
10
24
|
}
|
|
11
25
|
|
|
26
|
+
.screenfulModal :global(.ant-modal-header) {
|
|
27
|
+
position: absolute;
|
|
28
|
+
left: 0;
|
|
29
|
+
top: 0;
|
|
30
|
+
width: 100%;
|
|
31
|
+
padding: 16px 24px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.screenfulModal :global(.ant-modal-content) {
|
|
35
|
+
padding-top: 44px;
|
|
36
|
+
}
|
|
37
|
+
|
|
12
38
|
.screenfulModal {
|
|
13
39
|
max-width: 100vw;
|
|
14
40
|
padding-bottom: 0;
|
|
@@ -16,5 +42,5 @@
|
|
|
16
42
|
|
|
17
43
|
.screenfulModal :global(.ant-modal-body) {
|
|
18
44
|
height: calc(100vh - 116px);
|
|
19
|
-
overflow: auto;
|
|
20
|
-
}
|
|
45
|
+
overflow: hidden auto;
|
|
46
|
+
}
|
|
@@ -18,34 +18,25 @@ var Modal = function(props) {
|
|
|
18
18
|
"screenfulIcon"
|
|
19
19
|
]);
|
|
20
20
|
var _useState = _sliced_to_array(useState(defaultScreenful !== null && defaultScreenful !== void 0 ? defaultScreenful : false), 2), screenful = _useState[0], setScreenful = _useState[1];
|
|
21
|
-
var _useState1 = _sliced_to_array(useState(
|
|
22
|
-
var _useState2 = _sliced_to_array(useState({
|
|
21
|
+
var _useState1 = _sliced_to_array(useState({
|
|
23
22
|
left: 0,
|
|
24
23
|
top: 0,
|
|
25
24
|
bottom: 0,
|
|
26
25
|
right: 0
|
|
27
|
-
}), 2), bounds =
|
|
26
|
+
}), 2), bounds = _useState1[0], setBounds = _useState1[1];
|
|
28
27
|
var draggleRef = useRef(null);
|
|
28
|
+
var draggable = !screenful && isDraggable !== false;
|
|
29
29
|
return /*#__PURE__*/ _jsx(AntdModal, _object_spread_props(_object_spread({}, restProps), {
|
|
30
|
-
className:
|
|
30
|
+
className: [
|
|
31
|
+
screenful ? styles.screenfulModal : "",
|
|
32
|
+
draggable ? styles.draggableModal : ""
|
|
33
|
+
].filter(Boolean).join(" ") || undefined,
|
|
31
34
|
width: screenful ? "auto" : width,
|
|
32
35
|
style: screenful ? {
|
|
33
36
|
top: 0
|
|
34
37
|
} : style,
|
|
35
38
|
title: /*#__PURE__*/ _jsxs("div", {
|
|
36
|
-
className:
|
|
37
|
-
onMouseOver: function() {
|
|
38
|
-
if (screenful) {
|
|
39
|
-
setDisabled(true);
|
|
40
|
-
return;
|
|
41
|
-
}
|
|
42
|
-
if (disabled) {
|
|
43
|
-
setDisabled(false);
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
onMouseOut: function() {
|
|
47
|
-
setDisabled(true);
|
|
48
|
-
},
|
|
39
|
+
className: styles.titleWrapper,
|
|
49
40
|
children: [
|
|
50
41
|
title,
|
|
51
42
|
screenfulIcon === false ? /*#__PURE__*/ _jsx(_Fragment, {}) : /*#__PURE__*/ _jsx(Button, {
|
|
@@ -63,10 +54,11 @@ var Modal = function(props) {
|
|
|
63
54
|
]
|
|
64
55
|
}),
|
|
65
56
|
modalRender: function(modal) {
|
|
66
|
-
return
|
|
67
|
-
disabled: disabled,
|
|
57
|
+
return draggable ? /*#__PURE__*/ _jsx(Draggable, {
|
|
68
58
|
bounds: bounds,
|
|
69
59
|
nodeRef: draggleRef,
|
|
60
|
+
handle: ".ant-modal-header",
|
|
61
|
+
cancel: "button, a, .ant-modal-close, [role='button']",
|
|
70
62
|
onStart: function(event, uiData) {
|
|
71
63
|
var _draggleRef_current;
|
|
72
64
|
var _window_document_documentElement = window.document.documentElement, clientWidth = _window_document_documentElement.clientWidth, clientHeight = _window_document_documentElement.clientHeight;
|
|
@@ -85,7 +77,7 @@ var Modal = function(props) {
|
|
|
85
77
|
ref: draggleRef,
|
|
86
78
|
children: modal
|
|
87
79
|
})
|
|
88
|
-
});
|
|
80
|
+
}) : modal;
|
|
89
81
|
}
|
|
90
82
|
}));
|
|
91
83
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;AAAA,SAASA,cAAc,QAAQ,oBAAoB;AACnD,SAASC,SAASC,SAAS,EAAEC,MAAM,QAAsC,OAAO;AAChF,SAAoBC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AACpD,OAAOC,eAAe,kBAAkB;AACxC,OAAOC,YAAY,qBAAqB;AAiBxC,IAAMN,QAAQ,SAACO;IACb,IAAQC,QAAoFD,MAApFC,OAAOC,QAA6EF,MAA7EE,OAAOC,QAAsEH,MAAtEG,OAAOC,mBAA+DJ,MAA/DI,kBAAkBC,cAA6CL,MAA7CK,aAAaC,gBAAgCN,MAAhCM,eAAkBC,uCAAcP;QAApFC;QAAOC;QAAOC;QAAOC;QAAkBC;QAAaC;;IAC5D,IAAkCT,sCAASO,8EAAoB,YAAxDI,YAA2BX,cAAhBY,eAAgBZ;IAClC,
|
|
1
|
+
{"version":3,"mappings":";;;;;AAAA,SAASA,cAAc,QAAQ,oBAAoB;AACnD,SAASC,SAASC,SAAS,EAAEC,MAAM,QAAsC,OAAO;AAChF,SAAoBC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AACpD,OAAOC,eAAe,kBAAkB;AACxC,OAAOC,YAAY,qBAAqB;AAiBxC,IAAMN,QAAQ,SAACO;IACb,IAAQC,QAAoFD,MAApFC,OAAOC,QAA6EF,MAA7EE,OAAOC,QAAsEH,MAAtEG,OAAOC,mBAA+DJ,MAA/DI,kBAAkBC,cAA6CL,MAA7CK,aAAaC,gBAAgCN,MAAhCM,eAAkBC,uCAAcP;QAApFC;QAAOC;QAAOC;QAAOC;QAAkBC;QAAaC;;IAC5D,IAAkCT,sCAASO,8EAAoB,YAAxDI,YAA2BX,cAAhBY,eAAgBZ;IAClC,IAA4BA,uCAAS;QAAEa,MAAM;QAAGC,KAAK;QAAGC,QAAQ;QAAGC,OAAO;IAAE,QAArEC,SAAqBjB,eAAbkB,YAAalB;IAC5B,IAAMmB,aAAapB,OAAuB;IAC1C,IAAMqB,YAAY,CAACT,aAAaH,gBAAgB;IAEhD,qBAAO,KAACX,mDACFa;QACJW,WAAW;YACTV,YAAYT,OAAOoB,cAAc,GAAG;YACpCF,YAAYlB,OAAOqB,cAAc,GAAG;SACrC,CAACC,MAAM,CAACC,SAASC,IAAI,CAAC,QAAQC;QAC/BvB,OAAOO,YAAY,SAASP;QAC5BC,OAAOM,YAAY;YAAEG,KAAK;QAAE,IAAIT;QAChCC,qBACE,MAACsB;YAAIP,WAAWnB,OAAO2B,YAAY;;gBAChCvB;gBACAG,kBAAkB,sBAAQ,oCAAQ,KAACX;oBAClCuB,WAAWnB,OAAOO,aAAa;oBAC/BqB,MAAK;oBACLC,MAAK;oBACLC,SAAS,SAACC;wBACRA,MAAMC,eAAe;wBACrBtB,aAAa,CAACD;oBAChB;8BAECF,gBAAgBA,8BAAgB,KAACd;wBAAewC,KAAKR;;;;;QAK5DS,aAAa,SAACC;mBACZjB,0BAAY,KAACnB;gBACXgB,QAAQA;gBACRqB,SAASnB;gBACToB,QAAO;gBACPC,QAAO;gBACPC,SAAS,SAACR,OAAOS;wBAEIvB;oBADnB,IAAsCwB,0CAAOC,QAAQ,CAACC,eAAe,EAA7DC,cAA8BH,iCAA9BG,aAAaC,eAAiBJ,iCAAjBI;oBACrB,IAAMC,cAAa7B,iCAAW8B,OAAO,cAAlB9B,8DAAoB+B,qBAAqB;oBAC5D,IAAI,CAACF,YAAY;wBACf;oBACF;oBACA9B,UAAU;wBACRL,MAAM,CAACmC,WAAWnC,IAAI,GAAG6B,OAAOS,CAAC;wBACjCnC,OAAO8B,cAAeE,YAAWhC,KAAK,GAAG0B,OAAOS,CAAC,CAADA;wBAChDrC,KAAK,CAACkC,WAAWlC,GAAG,GAAG4B,OAAOU,CAAC;wBAC/BrC,QAAQgC,eAAgBC,YAAWjC,MAAM,GAAG2B,OAAOU,CAAC,CAADA;oBACrD;gBACF;0BAEA,mBAACxB;oBAAIyB,KAAKlC;8BAAakB;;iBACVA;;;AAGrB;AAEA,eAAezC,MAAM","names":["ExpandOutlined","Modal","AntdModal","Button","useRef","useState","Draggable","styles","props","width","style","title","defaultScreenful","isDraggable","screenfulIcon","restProps","screenful","setScreenful","left","top","bottom","right","bounds","setBounds","draggleRef","draggable","className","screenfulModal","draggableModal","filter","Boolean","join","undefined","div","titleWrapper","type","size","onClick","event","stopPropagation","rev","modalRender","modal","nodeRef","handle","cancel","onStart","uiData","window","document","documentElement","clientWidth","clientHeight","targetRect","current","getBoundingClientRect","x","y","ref"],"ignoreList":[],"sources":[".\\src\\components\\modal\\index.tsx"]}
|
|
@@ -1,14 +1,40 @@
|
|
|
1
|
-
.modal {
|
|
1
|
+
.draggableModal :global(.ant-modal-header) {
|
|
2
|
+
position: absolute;
|
|
3
|
+
left: 0;
|
|
4
|
+
top: 0;
|
|
5
|
+
width: 100%;
|
|
2
6
|
cursor: move;
|
|
7
|
+
padding: 16px 24px;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.draggableModal :global(.ant-modal-content) {
|
|
11
|
+
padding-top: 44px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.titleWrapper {
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
justify-content: space-between;
|
|
18
|
+
padding-right: 18px;
|
|
3
19
|
}
|
|
4
20
|
|
|
5
21
|
.screenfulIcon {
|
|
6
|
-
|
|
7
|
-
right: 40px;
|
|
8
|
-
top: 16px;
|
|
22
|
+
flex-shrink: 0;
|
|
9
23
|
color: rgba(0, 0, 0, 0.45);
|
|
10
24
|
}
|
|
11
25
|
|
|
26
|
+
.screenfulModal :global(.ant-modal-header) {
|
|
27
|
+
position: absolute;
|
|
28
|
+
left: 0;
|
|
29
|
+
top: 0;
|
|
30
|
+
width: 100%;
|
|
31
|
+
padding: 16px 24px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.screenfulModal :global(.ant-modal-content) {
|
|
35
|
+
padding-top: 44px;
|
|
36
|
+
}
|
|
37
|
+
|
|
12
38
|
.screenfulModal {
|
|
13
39
|
max-width: 100vw;
|
|
14
40
|
padding-bottom: 0;
|
|
@@ -16,5 +42,5 @@
|
|
|
16
42
|
|
|
17
43
|
.screenfulModal :global(.ant-modal-body) {
|
|
18
44
|
height: calc(100vh - 116px);
|
|
19
|
-
overflow: auto;
|
|
20
|
-
}
|
|
45
|
+
overflow: hidden auto;
|
|
46
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@knockout-js/layout",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.27",
|
|
4
4
|
"description": "组件功能描述",
|
|
5
5
|
"files": [
|
|
6
6
|
"esm",
|
|
@@ -48,8 +48,8 @@
|
|
|
48
48
|
"dayjs": "^1.11.9",
|
|
49
49
|
"react-activation": "^0.12.4",
|
|
50
50
|
"react-draggable": "^4.4.5",
|
|
51
|
-
"@knockout-js/
|
|
52
|
-
"@knockout-js/
|
|
51
|
+
"@knockout-js/api": "^0.1.17",
|
|
52
|
+
"@knockout-js/ice-urql": "^0.1.21"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@ice/pkg": "^1.6.2",
|