@vtx/components 3.1.118 → 3.1.119
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.
|
@@ -38,7 +38,9 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
38
38
|
function VtxCard(props) {
|
|
39
39
|
var title = props.title,
|
|
40
40
|
_props$expand = props.expand,
|
|
41
|
-
expand = _props$expand === void 0 ? true : _props$expand
|
|
41
|
+
expand = _props$expand === void 0 ? true : _props$expand,
|
|
42
|
+
extra = props.extra,
|
|
43
|
+
onExpandChange = props.onExpandChange;
|
|
42
44
|
|
|
43
45
|
var _useState = (0, _react.useState)(expand),
|
|
44
46
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -53,10 +55,20 @@ function VtxCard(props) {
|
|
|
53
55
|
};
|
|
54
56
|
}
|
|
55
57
|
|
|
58
|
+
(0, _react.useEffect)(function () {
|
|
59
|
+
onExpandChange && onExpandChange(visible);
|
|
60
|
+
}, [visible]);
|
|
56
61
|
return /*#__PURE__*/_react["default"].createElement(_card["default"], {
|
|
57
62
|
title: title,
|
|
58
63
|
className: "vtx-form-card",
|
|
59
|
-
extra: /*#__PURE__*/_react["default"].createElement(
|
|
64
|
+
extra: extra ? /*#__PURE__*/_react["default"].createElement("span", {
|
|
65
|
+
className: "vtx-form-card-custom-icon",
|
|
66
|
+
onClick: function onClick() {
|
|
67
|
+
return setVisible(function (pre) {
|
|
68
|
+
return !pre;
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
}, extra) : /*#__PURE__*/_react["default"].createElement(_RightOutlined["default"], {
|
|
60
72
|
className: "vtx-form-card-expand-icon",
|
|
61
73
|
style: style,
|
|
62
74
|
onClick: function onClick() {
|
|
@@ -75,7 +87,9 @@ function VtxCard(props) {
|
|
|
75
87
|
VtxCard.propTypes = {
|
|
76
88
|
expand: _propTypes["default"].bool,
|
|
77
89
|
title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
|
|
78
|
-
children: _propTypes["default"].node
|
|
90
|
+
children: _propTypes["default"].node,
|
|
91
|
+
extra: _propTypes["default"].node,
|
|
92
|
+
onExpandChange: _propTypes["default"].func
|
|
79
93
|
};
|
|
80
94
|
var _default = VtxCard;
|
|
81
95
|
exports["default"] = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","names":["VtxCard","props","title","expand","useState","visible","setVisible","style","transform","pre","classnames","children","propTypes","PropTypes","bool","oneOfType","string","node"],"sources":["vtx-form-layout/Card.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Card from 'antd/lib/card';\nimport RightOutlined from '@ant-design/icons/RightOutlined';\n\nfunction VtxCard(props) {\n const { title, expand = true } = props;\n const [visible, setVisible] = useState(expand);\n let style = {};\n if (visible) {\n style = { transform: 'rotate(90deg)' };\n }\n return (\n <Card\n title={title}\n className=\"vtx-form-card\"\n extra={\n <RightOutlined\n className=\"vtx-form-card-expand-icon\"\n style={style}\n onClick={() => setVisible(pre => !pre)}\n />\n }\n >\n <div\n className={classnames('vtx-form-card-content', {\n 'vtx-form-card-content-hide': !visible,\n })}\n >\n {props.children}\n </div>\n </Card>\n );\n}\n\nVtxCard.propTypes = {\n expand: PropTypes.bool,\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n children: PropTypes.node,\n};\n\nexport default VtxCard;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAEA,SAASA,OAAT,CAAiBC,KAAjB,EAAwB;EACpB,IAAQC,KAAR,
|
|
1
|
+
{"version":3,"file":"Card.js","names":["VtxCard","props","title","expand","extra","onExpandChange","useState","visible","setVisible","style","transform","useEffect","pre","classnames","children","propTypes","PropTypes","bool","oneOfType","string","node","func"],"sources":["vtx-form-layout/Card.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Card from 'antd/lib/card';\nimport RightOutlined from '@ant-design/icons/RightOutlined';\n\nfunction VtxCard(props) {\n const { title, expand = true, extra, onExpandChange } = props;\n const [visible, setVisible] = useState(expand);\n let style = {};\n if (visible) {\n style = { transform: 'rotate(90deg)' };\n }\n\n useEffect(()=>{\n onExpandChange && onExpandChange(visible);\n }, [visible])\n return (\n <Card\n title={title}\n className=\"vtx-form-card\"\n extra={\n extra?\n <span className='vtx-form-card-custom-icon' onClick={() => setVisible(pre => !pre)}>{extra}</span>\n :\n <RightOutlined\n className=\"vtx-form-card-expand-icon\"\n style={style}\n onClick={() => setVisible(pre => !pre)}\n />\n }\n >\n <div\n className={classnames('vtx-form-card-content', {\n 'vtx-form-card-content-hide': !visible,\n })}\n >\n {props.children}\n </div>\n </Card>\n );\n}\n\nVtxCard.propTypes = {\n expand: PropTypes.bool,\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n children: PropTypes.node,\n extra: PropTypes.node,\n onExpandChange: PropTypes.func,\n};\n\nexport default VtxCard;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAEA,SAASA,OAAT,CAAiBC,KAAjB,EAAwB;EACpB,IAAQC,KAAR,GAAwDD,KAAxD,CAAQC,KAAR;EAAA,oBAAwDD,KAAxD,CAAeE,MAAf;EAAA,IAAeA,MAAf,8BAAwB,IAAxB;EAAA,IAA8BC,KAA9B,GAAwDH,KAAxD,CAA8BG,KAA9B;EAAA,IAAqCC,cAArC,GAAwDJ,KAAxD,CAAqCI,cAArC;;EACA,gBAA8B,IAAAC,eAAA,EAASH,MAAT,CAA9B;EAAA;EAAA,IAAOI,OAAP;EAAA,IAAgBC,UAAhB;;EACA,IAAIC,KAAK,GAAG,EAAZ;;EACA,IAAIF,OAAJ,EAAa;IACTE,KAAK,GAAG;MAAEC,SAAS,EAAE;IAAb,CAAR;EACH;;EAED,IAAAC,gBAAA,EAAU,YAAI;IACVN,cAAc,IAAIA,cAAc,CAACE,OAAD,CAAhC;EACH,CAFD,EAEG,CAACA,OAAD,CAFH;EAGA,oBACI,gCAAC,gBAAD;IACI,KAAK,EAAEL,KADX;IAEI,SAAS,EAAC,eAFd;IAGI,KAAK,EACDE,KAAK,gBACD;MAAM,SAAS,EAAC,2BAAhB;MAA4C,OAAO,EAAE;QAAA,OAAMI,UAAU,CAAC,UAAAI,GAAG;UAAA,OAAI,CAACA,GAAL;QAAA,CAAJ,CAAhB;MAAA;IAArD,GAAqFR,KAArF,CADC,gBAGL,gCAAC,yBAAD;MACI,SAAS,EAAC,2BADd;MAEI,KAAK,EAAEK,KAFX;MAGI,OAAO,EAAE;QAAA,OAAMD,UAAU,CAAC,UAAAI,GAAG;UAAA,OAAI,CAACA,GAAL;QAAA,CAAJ,CAAhB;MAAA;IAHb;EAPR,gBAcI;IACI,SAAS,EAAE,IAAAC,sBAAA,EAAW,uBAAX,EAAoC;MAC3C,8BAA8B,CAACN;IADY,CAApC;EADf,GAKKN,KAAK,CAACa,QALX,CAdJ,CADJ;AAwBH;;AAEDd,OAAO,CAACe,SAAR,GAAoB;EAChBZ,MAAM,EAAEa,qBAAA,CAAUC,IADF;EAEhBf,KAAK,EAAEc,qBAAA,CAAUE,SAAV,CAAoB,CAACF,qBAAA,CAAUG,MAAX,EAAmBH,qBAAA,CAAUI,IAA7B,CAApB,CAFS;EAGhBN,QAAQ,EAAEE,qBAAA,CAAUI,IAHJ;EAIhBhB,KAAK,EAAEY,qBAAA,CAAUI,IAJD;EAKhBf,cAAc,EAAEW,qBAAA,CAAUK;AALV,CAApB;eAQerB,O"}
|
|
@@ -114,6 +114,10 @@
|
|
|
114
114
|
color: rgba(0, 0, 0, 0.75);
|
|
115
115
|
transition: transform 0.24s, -webkit-transform 0.24s;
|
|
116
116
|
}
|
|
117
|
+
.vtx-form-layout .vtx-form-card-custom-icon {
|
|
118
|
+
transition: transform 0.24s, -webkit-transform 0.24s;
|
|
119
|
+
cursor: pointer;
|
|
120
|
+
}
|
|
117
121
|
.vtx-form-layout .vtx-form-card .ant-card-body {
|
|
118
122
|
padding: 0;
|
|
119
123
|
}
|