@vtx/components 2.5.13 → 2.5.15
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/CHANGELOG.md +842 -0
- package/lib/_util/filterSpecialCharacters.js +43 -54
- package/lib/_util/filterSpecialCharacters.js.map +1 -1
- package/lib/_util/getComponentProps.js +3 -0
- package/lib/_util/getComponentProps.js.map +1 -1
- package/lib/_util/getUrlParam.js +6 -0
- package/lib/_util/getUrlParam.js.map +1 -1
- package/lib/_util/isFunction.js +1 -0
- package/lib/_util/isFunction.js.map +1 -1
- package/lib/_util/isObject.js +1 -0
- package/lib/_util/isObject.js.map +1 -1
- package/lib/_util/useInterval.js +3 -0
- package/lib/_util/useInterval.js.map +1 -1
- package/lib/_util/useSet.js +32 -14
- package/lib/_util/useSet.js.map +1 -1
- package/lib/config.js.map +1 -1
- package/lib/index.js +22 -0
- package/lib/index.js.map +1 -1
- package/lib/vtx-color-picker/index.js +21 -5
- package/lib/vtx-color-picker/index.js.map +1 -1
- package/lib/vtx-color-picker/style/css.js +2 -0
- package/lib/vtx-color-picker/style/css.js.map +1 -1
- package/lib/vtx-color-picker/style/index.js +2 -0
- package/lib/vtx-color-picker/style/index.js.map +1 -1
- package/lib/vtx-combogrid/Combogrid.js +73 -33
- package/lib/vtx-combogrid/Combogrid.js.map +1 -1
- package/lib/vtx-combogrid/index.js +45 -20
- package/lib/vtx-combogrid/index.js.map +1 -1
- package/lib/vtx-combogrid/style/css.js +7 -0
- package/lib/vtx-combogrid/style/css.js.map +1 -1
- package/lib/vtx-combogrid/style/index.js +7 -0
- package/lib/vtx-combogrid/style/index.js.map +1 -1
- package/lib/vtx-combogrid/style/index.less +29 -29
- package/lib/vtx-datagrid/Alert.js +11 -3
- package/lib/vtx-datagrid/Alert.js.map +1 -1
- package/lib/vtx-datagrid/ColumnSetting.js +44 -19
- package/lib/vtx-datagrid/ColumnSetting.js.map +1 -1
- package/lib/vtx-datagrid/ResizeableTitle.js +13 -2
- package/lib/vtx-datagrid/ResizeableTitle.js.map +1 -1
- package/lib/vtx-datagrid/index.js +137 -77
- package/lib/vtx-datagrid/index.js.map +1 -1
- package/lib/vtx-datagrid/renderColumnButtons.js +35 -5
- package/lib/vtx-datagrid/renderColumnButtons.js.map +1 -1
- package/lib/vtx-datagrid/style/css.js +10 -0
- package/lib/vtx-datagrid/style/css.js.map +1 -1
- package/lib/vtx-datagrid/style/index.js +10 -0
- package/lib/vtx-datagrid/style/index.js.map +1 -1
- package/lib/vtx-datagrid/style/index.less +131 -131
- package/lib/vtx-date-picker/QdatePicker.js +46 -16
- package/lib/vtx-date-picker/QdatePicker.js.map +1 -1
- package/lib/vtx-date-picker/YearPicker.js +30 -7
- package/lib/vtx-date-picker/YearPicker.js.map +1 -1
- package/lib/vtx-date-picker/generatePicker.js +46 -5
- package/lib/vtx-date-picker/generatePicker.js.map +1 -1
- package/lib/vtx-date-picker/index.js +8 -2
- package/lib/vtx-date-picker/index.js.map +1 -1
- package/lib/vtx-date-picker/style/css.js +1 -0
- package/lib/vtx-date-picker/style/css.js.map +1 -1
- package/lib/vtx-date-picker/style/index.js +1 -0
- package/lib/vtx-date-picker/style/index.js.map +1 -1
- package/lib/vtx-date-picker/style/index.less +38 -38
- package/lib/vtx-editor/index.js +23 -5
- package/lib/vtx-editor/index.js.map +1 -1
- package/lib/vtx-editor/style/css.js +2 -0
- package/lib/vtx-editor/style/css.js.map +1 -1
- package/lib/vtx-editor/style/index.js +2 -0
- package/lib/vtx-editor/style/index.js.map +1 -1
- package/lib/vtx-editor/style/index.less +6 -6
- package/lib/vtx-export/index.js +55 -23
- package/lib/vtx-export/index.js.map +1 -1
- package/lib/vtx-export/style/css.js +6 -0
- package/lib/vtx-export/style/css.js.map +1 -1
- package/lib/vtx-export/style/index.js +6 -0
- package/lib/vtx-export/style/index.js.map +1 -1
- package/lib/vtx-form-layout/Card.js +26 -5
- package/lib/vtx-form-layout/Card.js.map +1 -1
- package/lib/vtx-form-layout/Divider.js +5 -0
- package/lib/vtx-form-layout/Divider.js.map +1 -1
- package/lib/vtx-form-layout/FormItem.js +34 -9
- package/lib/vtx-form-layout/FormItem.js.map +1 -1
- package/lib/vtx-form-layout/Pane.js +7 -2
- package/lib/vtx-form-layout/Pane.js.map +1 -1
- package/lib/vtx-form-layout/Row.js +6 -0
- package/lib/vtx-form-layout/Row.js.map +1 -1
- package/lib/vtx-form-layout/context.js +2 -0
- package/lib/vtx-form-layout/context.js.map +1 -1
- package/lib/vtx-form-layout/demo/Modal.less +41 -41
- package/lib/vtx-form-layout/index.js +22 -8
- package/lib/vtx-form-layout/index.js.map +1 -1
- package/lib/vtx-form-layout/style/css.js +8 -0
- package/lib/vtx-form-layout/style/css.js.map +1 -1
- package/lib/vtx-form-layout/style/index.js +8 -0
- package/lib/vtx-form-layout/style/index.js.map +1 -1
- package/lib/vtx-form-layout/style/index.less +148 -148
- package/lib/vtx-image/Image.js +92 -56
- package/lib/vtx-image/Image.js.map +1 -1
- package/lib/vtx-image/Preview.js +51 -20
- package/lib/vtx-image/Preview.js.map +1 -1
- package/lib/vtx-image/PreviewGroup.js +40 -11
- package/lib/vtx-image/PreviewGroup.js.map +1 -1
- package/lib/vtx-image/index.js +6 -0
- package/lib/vtx-image/index.js.map +1 -1
- package/lib/vtx-image/style/css.js +1 -0
- package/lib/vtx-image/style/css.js.map +1 -1
- package/lib/vtx-image/style/index.js +1 -0
- package/lib/vtx-image/style/index.js.map +1 -1
- package/lib/vtx-image/style/index.less +46 -46
- package/lib/vtx-import/index.js +72 -37
- package/lib/vtx-import/index.js.map +1 -1
- package/lib/vtx-import/result.js +24 -7
- package/lib/vtx-import/result.js.map +1 -1
- package/lib/vtx-import/style/css.js +2 -0
- package/lib/vtx-import/style/css.js.map +1 -1
- package/lib/vtx-import/style/index.js +2 -0
- package/lib/vtx-import/style/index.js.map +1 -1
- package/lib/vtx-input/TextArea.js +22 -6
- package/lib/vtx-input/TextArea.js.map +1 -1
- package/lib/vtx-input/index.js +37 -11
- package/lib/vtx-input/index.js.map +1 -1
- package/lib/vtx-input/style/css.js +1 -0
- package/lib/vtx-input/style/css.js.map +1 -1
- package/lib/vtx-input/style/index.js +1 -0
- package/lib/vtx-input/style/index.js.map +1 -1
- package/lib/vtx-input/style/index.less +20 -20
- package/lib/vtx-input/useLength.js +16 -4
- package/lib/vtx-input/useLength.js.map +1 -1
- package/lib/vtx-modal/Title.js +6 -1
- package/lib/vtx-modal/Title.js.map +1 -1
- package/lib/vtx-modal/index.js +70 -32
- package/lib/vtx-modal/index.js.map +1 -1
- package/lib/vtx-modal/style/css.js +2 -0
- package/lib/vtx-modal/style/css.js.map +1 -1
- package/lib/vtx-modal/style/index.js +2 -0
- package/lib/vtx-modal/style/index.js.map +1 -1
- package/lib/vtx-modal/style/index.less +83 -83
- package/lib/vtx-page-layout/Basic.js +6 -2
- package/lib/vtx-page-layout/Basic.js.map +1 -1
- package/lib/vtx-page-layout/Content.js +19 -7
- package/lib/vtx-page-layout/Content.js.map +1 -1
- package/lib/vtx-page-layout/Pane.js +10 -2
- package/lib/vtx-page-layout/Pane.js.map +1 -1
- package/lib/vtx-page-layout/TableLayout.js +52 -22
- package/lib/vtx-page-layout/TableLayout.js.map +1 -1
- package/lib/vtx-page-layout/TableWrap.js +15 -3
- package/lib/vtx-page-layout/TableWrap.js.map +1 -1
- package/lib/vtx-page-layout/container.js +34 -4
- package/lib/vtx-page-layout/container.js.map +1 -1
- package/lib/vtx-page-layout/index.js +8 -0
- package/lib/vtx-page-layout/index.js.map +1 -1
- package/lib/vtx-page-layout/style/index.less +139 -139
- package/lib/vtx-rps-frame/index.js +44 -21
- package/lib/vtx-rps-frame/index.js.map +1 -1
- package/lib/vtx-scrollable-row/index.js +55 -19
- package/lib/vtx-scrollable-row/index.js.map +1 -1
- package/lib/vtx-scrollable-row/style/css.js +1 -0
- package/lib/vtx-scrollable-row/style/css.js.map +1 -1
- package/lib/vtx-scrollable-row/style/index.js +1 -0
- package/lib/vtx-scrollable-row/style/index.js.map +1 -1
- package/lib/vtx-scrollable-row/style/index.less +111 -111
- package/lib/vtx-search/VtxCol.js +21 -0
- package/lib/vtx-search/VtxCol.js.map +1 -1
- package/lib/vtx-search/VtxRow.js +12 -6
- package/lib/vtx-search/VtxRow.js.map +1 -1
- package/lib/vtx-search/index.js +87 -36
- package/lib/vtx-search/index.js.map +1 -1
- package/lib/vtx-search/style/css.js +5 -0
- package/lib/vtx-search/style/css.js.map +1 -1
- package/lib/vtx-search/style/index.js +5 -0
- package/lib/vtx-search/style/index.js.map +1 -1
- package/lib/vtx-search/style/index.less +81 -81
- package/lib/vtx-search-map-input/index.js +68 -39
- package/lib/vtx-search-map-input/index.js.map +1 -1
- package/lib/vtx-search-map-input/style/css.js +2 -0
- package/lib/vtx-search-map-input/style/css.js.map +1 -1
- package/lib/vtx-search-map-input/style/index.js +2 -0
- package/lib/vtx-search-map-input/style/index.js.map +1 -1
- package/lib/vtx-select/index.js +64 -20
- package/lib/vtx-select/index.js.map +1 -1
- package/lib/vtx-select/style/css.js +8 -0
- package/lib/vtx-select/style/css.js.map +1 -1
- package/lib/vtx-select/style/index.js +8 -0
- package/lib/vtx-select/style/index.js.map +1 -1
- package/lib/vtx-select/style/index.less +66 -66
- package/lib/vtx-signature/index.js +28 -14
- package/lib/vtx-signature/index.js.map +1 -1
- package/lib/vtx-signature/style/css.js +2 -0
- package/lib/vtx-signature/style/css.js.map +1 -1
- package/lib/vtx-signature/style/index.js +2 -0
- package/lib/vtx-signature/style/index.js.map +1 -1
- package/lib/vtx-signature/style/index.less +32 -32
- package/lib/vtx-split-pane/Pane.js +14 -2
- package/lib/vtx-split-pane/Pane.js.map +1 -1
- package/lib/vtx-split-pane/Resizer.js +30 -10
- package/lib/vtx-split-pane/Resizer.js.map +1 -1
- package/lib/vtx-split-pane/SplitPane.js +104 -52
- package/lib/vtx-split-pane/SplitPane.js.map +1 -1
- package/lib/vtx-split-pane/index.js +4 -0
- package/lib/vtx-split-pane/index.js.map +1 -1
- package/lib/vtx-split-pane/style/css.js +3 -0
- package/lib/vtx-split-pane/style/css.js.map +1 -1
- package/lib/vtx-split-pane/style/index.js +3 -0
- package/lib/vtx-split-pane/style/index.js.map +1 -1
- package/lib/vtx-split-pane/style/index.less +59 -59
- package/lib/vtx-statistics-column/Back.js +7 -1
- package/lib/vtx-statistics-column/Back.js.map +1 -1
- package/lib/vtx-statistics-column/Item.js +22 -5
- package/lib/vtx-statistics-column/Item.js.map +1 -1
- package/lib/vtx-statistics-column/Total.js +22 -5
- package/lib/vtx-statistics-column/Total.js.map +1 -1
- package/lib/vtx-statistics-column/context.js +2 -0
- package/lib/vtx-statistics-column/context.js.map +1 -1
- package/lib/vtx-statistics-column/index.js +16 -0
- package/lib/vtx-statistics-column/index.js.map +1 -1
- package/lib/vtx-statistics-column/style/index.less +61 -61
- package/lib/vtx-time-picker/index.js +16 -3
- package/lib/vtx-time-picker/index.js.map +1 -1
- package/lib/vtx-time-picker/style/css.js.map +1 -1
- package/lib/vtx-time-picker/style/index.js.map +1 -1
- package/lib/vtx-upload/FilePreview.js +28 -9
- package/lib/vtx-upload/FilePreview.js.map +1 -1
- package/lib/vtx-upload/index.js +136 -67
- package/lib/vtx-upload/index.js.map +1 -1
- package/lib/vtx-upload/style/css.js +6 -0
- package/lib/vtx-upload/style/css.js.map +1 -1
- package/lib/vtx-upload/style/index.js +6 -0
- package/lib/vtx-upload/style/index.js.map +1 -1
- package/lib/vtx-upload/style/index.less +59 -59
- package/lib/vtx-ztree/index.js +103 -51
- package/lib/vtx-ztree/index.js.map +1 -1
- package/lib/vtx-ztree/style/css.js +1 -0
- package/lib/vtx-ztree/style/css.js.map +1 -1
- package/lib/vtx-ztree/style/index.js +1 -0
- package/lib/vtx-ztree/style/index.js.map +1 -1
- package/lib/vtx-ztree/style/index.less +30 -30
- package/lib/vtx-ztree-select/index.js +97 -38
- package/lib/vtx-ztree-select/index.js.map +1 -1
- package/lib/vtx-ztree-select/style/css.js +4 -0
- package/lib/vtx-ztree-select/style/css.js.map +1 -1
- package/lib/vtx-ztree-select/style/index.js +4 -0
- package/lib/vtx-ztree-select/style/index.js.map +1 -1
- package/lib/vtx-ztree-select/style/index.less +76 -76
- package/package.json +1 -1
package/lib/vtx-image/Image.js
CHANGED
|
@@ -1,86 +1,110 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
+
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports["default"] = void 0;
|
|
9
|
+
|
|
8
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
|
|
9
12
|
var _classnames2 = _interopRequireDefault(require("classnames"));
|
|
13
|
+
|
|
10
14
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
|
+
|
|
11
16
|
var _Preview = _interopRequireDefault(require("./Preview"));
|
|
17
|
+
|
|
12
18
|
var _PreviewGroup = _interopRequireWildcard(require("./PreviewGroup"));
|
|
19
|
+
|
|
13
20
|
var _useSet3 = _interopRequireDefault(require("../_util/useSet"));
|
|
21
|
+
|
|
14
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
23
|
+
|
|
15
24
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
25
|
+
|
|
16
26
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
27
|
+
|
|
17
28
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
29
|
+
|
|
18
30
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
31
|
+
|
|
19
32
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
33
|
+
|
|
20
34
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
35
|
+
|
|
21
36
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
37
|
+
|
|
22
38
|
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
39
|
+
|
|
23
40
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
41
|
+
|
|
24
42
|
var defaultEmptyImageSrc = '';
|
|
25
43
|
var defaultErrorImageSrc = '';
|
|
26
44
|
var defaultEmptyText = '暂无图片';
|
|
27
45
|
var defaultErrorText = '图片出错';
|
|
28
46
|
var uuid = 0;
|
|
47
|
+
|
|
29
48
|
function VtxImage(props) {
|
|
30
49
|
var _React$useState = _react["default"].useState(function () {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
50
|
+
uuid += 1;
|
|
51
|
+
return uuid;
|
|
52
|
+
}),
|
|
53
|
+
_React$useState2 = _slicedToArray(_React$useState, 1),
|
|
54
|
+
currentId = _React$useState2[0];
|
|
55
|
+
|
|
36
56
|
var _useSet = (0, _useSet3["default"])({
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
57
|
+
isError: false,
|
|
58
|
+
// 图片是否加载失败
|
|
59
|
+
isEmptyImageError: false,
|
|
60
|
+
// 空白图片是否加载失败
|
|
61
|
+
isErrorImageError: false,
|
|
62
|
+
// 报错图片是否加载失败
|
|
63
|
+
viewerVisible: false,
|
|
64
|
+
// 是否查看
|
|
65
|
+
visible: false,
|
|
66
|
+
photo: undefined
|
|
67
|
+
}),
|
|
68
|
+
_useSet2 = _slicedToArray(_useSet, 2),
|
|
69
|
+
state = _useSet2[0],
|
|
70
|
+
setState = _useSet2[1];
|
|
71
|
+
|
|
51
72
|
var isError = state.isError,
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
73
|
+
isEmptyImageError = state.isEmptyImageError,
|
|
74
|
+
isErrorImageError = state.isErrorImageError,
|
|
75
|
+
visible = state.visible,
|
|
76
|
+
photo = state.photo;
|
|
56
77
|
var _props$prefixCls = props.prefixCls,
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
78
|
+
prefixCls = _props$prefixCls === void 0 ? 'vtx-image' : _props$prefixCls,
|
|
79
|
+
_props$preview = props.preview,
|
|
80
|
+
preview = _props$preview === void 0 ? true : _props$preview,
|
|
81
|
+
className = props.className,
|
|
82
|
+
style = props.style,
|
|
83
|
+
src = props.src,
|
|
84
|
+
thumb = props.thumb,
|
|
85
|
+
alt = props.alt,
|
|
86
|
+
_props$emptyImageSrc = props.emptyImageSrc,
|
|
87
|
+
emptyImageSrc = _props$emptyImageSrc === void 0 ? defaultEmptyImageSrc : _props$emptyImageSrc,
|
|
88
|
+
_props$errorImageSrc = props.errorImageSrc,
|
|
89
|
+
errorImageSrc = _props$errorImageSrc === void 0 ? defaultErrorImageSrc : _props$errorImageSrc,
|
|
90
|
+
_props$emptyText = props.emptyText,
|
|
91
|
+
emptyText = _props$emptyText === void 0 ? defaultEmptyText : _props$emptyText,
|
|
92
|
+
_props$errorText = props.errorText,
|
|
93
|
+
errorText = _props$errorText === void 0 ? defaultErrorText : _props$errorText,
|
|
94
|
+
_onClick = props.onClick,
|
|
95
|
+
aspectFit = props.aspectFit;
|
|
96
|
+
|
|
75
97
|
var _useContext = (0, _react.useContext)(_PreviewGroup.context),
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
98
|
+
isPreviewGroup = _useContext.isPreviewGroup,
|
|
99
|
+
setCurrent = _useContext.setCurrent,
|
|
100
|
+
setGroupShowPreview = _useContext.setShowPreview,
|
|
101
|
+
registerImage = _useContext.registerImage;
|
|
102
|
+
|
|
80
103
|
(0, _react.useEffect)(function () {
|
|
81
104
|
setState({
|
|
82
105
|
isError: false
|
|
83
106
|
});
|
|
107
|
+
|
|
84
108
|
if (isPreviewGroup && preview) {
|
|
85
109
|
registerImage({
|
|
86
110
|
id: currentId,
|
|
@@ -88,9 +112,8 @@ function VtxImage(props) {
|
|
|
88
112
|
alt: alt
|
|
89
113
|
});
|
|
90
114
|
}
|
|
91
|
-
}, [src]);
|
|
115
|
+
}, [src]); // 图片props属性
|
|
92
116
|
|
|
93
|
-
// 图片props属性
|
|
94
117
|
var imgProps = {
|
|
95
118
|
src: thumb || src,
|
|
96
119
|
className: className,
|
|
@@ -100,7 +123,9 @@ function VtxImage(props) {
|
|
|
100
123
|
if (!src || isError) {
|
|
101
124
|
return null;
|
|
102
125
|
}
|
|
126
|
+
|
|
103
127
|
_onClick && _onClick();
|
|
128
|
+
|
|
104
129
|
if (preview) {
|
|
105
130
|
if (isPreviewGroup) {
|
|
106
131
|
setCurrent(currentId);
|
|
@@ -121,13 +146,13 @@ function VtxImage(props) {
|
|
|
121
146
|
isError: true
|
|
122
147
|
});
|
|
123
148
|
}
|
|
124
|
-
};
|
|
149
|
+
}; // 无图片
|
|
125
150
|
|
|
126
|
-
// 无图片
|
|
127
151
|
if (!src) {
|
|
128
152
|
//有替代图片
|
|
129
153
|
if (emptyImageSrc && !isEmptyImageError) {
|
|
130
154
|
imgProps.src = emptyImageSrc;
|
|
155
|
+
|
|
131
156
|
imgProps.onError = function () {
|
|
132
157
|
setState({
|
|
133
158
|
isEmptyImageError: true
|
|
@@ -140,13 +165,14 @@ function VtxImage(props) {
|
|
|
140
165
|
style: style
|
|
141
166
|
}, /*#__PURE__*/_react["default"].createElement("p", null, emptyText));
|
|
142
167
|
}
|
|
143
|
-
}
|
|
168
|
+
} // 图片出错
|
|
169
|
+
|
|
144
170
|
|
|
145
|
-
// 图片出错
|
|
146
171
|
if (isError) {
|
|
147
172
|
if (errorImageSrc && !isErrorImageError) {
|
|
148
173
|
imgProps['data-error-img'] = src;
|
|
149
174
|
imgProps.src = errorImageSrc;
|
|
175
|
+
|
|
150
176
|
imgProps.onError = function () {
|
|
151
177
|
setState({
|
|
152
178
|
isErrorImageError: true
|
|
@@ -161,13 +187,16 @@ function VtxImage(props) {
|
|
|
161
187
|
}, /*#__PURE__*/_react["default"].createElement("p", null, errorText));
|
|
162
188
|
}
|
|
163
189
|
}
|
|
164
|
-
|
|
165
|
-
// 缩放
|
|
190
|
+
|
|
191
|
+
var imgRender = /*#__PURE__*/_react["default"].createElement("img", imgProps); // 缩放
|
|
192
|
+
|
|
193
|
+
|
|
166
194
|
if (src && !isError && aspectFit) {
|
|
167
195
|
imgRender = /*#__PURE__*/_react["default"].createElement("div", {
|
|
168
196
|
className: (0, _classnames2["default"])("".concat(prefixCls, "-aspectFit"), _defineProperty({}, "".concat(prefixCls, "-preview"), preview))
|
|
169
197
|
}, /*#__PURE__*/_react["default"].createElement("img", imgProps));
|
|
170
198
|
}
|
|
199
|
+
|
|
171
200
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, imgRender, !isPreviewGroup && preview && /*#__PURE__*/_react["default"].createElement(_Preview["default"], {
|
|
172
201
|
visible: visible,
|
|
173
202
|
photo: photo,
|
|
@@ -178,6 +207,7 @@ function VtxImage(props) {
|
|
|
178
207
|
}
|
|
179
208
|
}));
|
|
180
209
|
}
|
|
210
|
+
|
|
181
211
|
VtxImage.propTypes = {
|
|
182
212
|
prefixCls: _propTypes["default"].string,
|
|
183
213
|
className: _propTypes["default"].string,
|
|
@@ -194,24 +224,30 @@ VtxImage.propTypes = {
|
|
|
194
224
|
aspectFit: _propTypes["default"].bool
|
|
195
225
|
};
|
|
196
226
|
VtxImage.setImageConfig = setImageConfig;
|
|
227
|
+
|
|
197
228
|
function setImageConfig(options) {
|
|
198
229
|
var emptyImageSrc = options.emptyImageSrc,
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
230
|
+
errorImageSrc = options.errorImageSrc,
|
|
231
|
+
emptyText = options.emptyText,
|
|
232
|
+
errorText = options.errorText;
|
|
233
|
+
|
|
202
234
|
if (emptyImageSrc !== undefined) {
|
|
203
235
|
defaultEmptyImageSrc = emptyImageSrc;
|
|
204
236
|
}
|
|
237
|
+
|
|
205
238
|
if (errorImageSrc !== undefined) {
|
|
206
239
|
defaultErrorImageSrc = errorImageSrc;
|
|
207
240
|
}
|
|
241
|
+
|
|
208
242
|
if (emptyText !== undefined) {
|
|
209
243
|
defaultEmptyText = emptyText;
|
|
210
244
|
}
|
|
245
|
+
|
|
211
246
|
if (errorText !== undefined) {
|
|
212
247
|
defaultErrorText = errorText;
|
|
213
248
|
}
|
|
214
249
|
}
|
|
250
|
+
|
|
215
251
|
VtxImage.PreviewGroup = _PreviewGroup["default"];
|
|
216
252
|
VtxImage.VtxImagePreview = _Preview["default"];
|
|
217
253
|
var _default = VtxImage;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.js","names":["defaultEmptyImageSrc","defaultErrorImageSrc","defaultEmptyText","defaultErrorText","uuid","VtxImage","props","React","useState","currentId","useSet","isError","isEmptyImageError","isErrorImageError","viewerVisible","visible","photo","undefined","state","setState","prefixCls","preview","className","style","src","thumb","alt","emptyImageSrc","errorImageSrc","emptyText","errorText","onClick","aspectFit","useContext","context","isPreviewGroup","setCurrent","setGroupShowPreview","setShowPreview","registerImage","useEffect","id","imgProps","onError","imgRender","classnames","propTypes","PropTypes","string","object","bool","func","setImageConfig","options","PreviewGroup","VtxImagePreview","Preview"],"sources":["vtx-image/Image.jsx"],"sourcesContent":["import React, { useEffect, useContext } from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport Preview from './Preview';\nimport PreviewGroup, { context } from './PreviewGroup';\nimport useSet from '../_util/useSet';\n\nlet defaultEmptyImageSrc = '';\nlet defaultErrorImageSrc = '';\nlet defaultEmptyText = '暂无图片';\nlet defaultErrorText = '图片出错';\n\nlet uuid = 0;\n\nfunction VtxImage(props) {\n const [currentId] = React.useState(() => {\n uuid += 1;\n return uuid;\n });\n\n const [state, setState] = useSet({\n isError: false, // 图片是否加载失败\n isEmptyImageError: false, // 空白图片是否加载失败\n isErrorImageError: false, // 报错图片是否加载失败\n viewerVisible: false, // 是否查看\n visible: false,\n photo: undefined,\n });\n const { isError, isEmptyImageError, isErrorImageError, visible, photo } = state;\n\n const {\n prefixCls = 'vtx-image',\n preview = true,\n className,\n style,\n src,\n thumb,\n alt,\n emptyImageSrc = defaultEmptyImageSrc,\n errorImageSrc = defaultErrorImageSrc,\n emptyText = defaultEmptyText,\n errorText = defaultErrorText,\n onClick,\n aspectFit,\n } = props;\n\n const {\n isPreviewGroup,\n setCurrent,\n setShowPreview: setGroupShowPreview,\n registerImage,\n } = useContext(context);\n\n useEffect(() => {\n setState({\n isError: false,\n });\n if (isPreviewGroup && preview) {\n registerImage({ id: currentId, src, alt });\n }\n }, [src]);\n\n // 图片props属性\n let imgProps = {\n src: thumb || src,\n className,\n style,\n alt,\n onClick: () => {\n if (!src || isError) {\n return null;\n }\n onClick && onClick();\n if (preview) {\n if (isPreviewGroup) {\n setCurrent(currentId);\n setGroupShowPreview(true);\n } else {\n setState({\n visible: true,\n photo: {\n src,\n alt,\n },\n });\n }\n }\n },\n onError: () => {\n setState({\n isError: true,\n });\n },\n };\n\n // 无图片\n if (!src) {\n //有替代图片\n if (emptyImageSrc && !isEmptyImageError) {\n imgProps.src = emptyImageSrc;\n imgProps.onError = () => {\n setState({ isEmptyImageError: true });\n };\n } else {\n // 没有替代图片或替代图片无法加载\n return (\n <div className={`${prefixCls}-nodata`} style={style}>\n <p>{emptyText}</p>\n </div>\n );\n }\n }\n\n // 图片出错\n if (isError) {\n if (errorImageSrc && !isErrorImageError) {\n imgProps['data-error-img'] = src;\n imgProps.src = errorImageSrc;\n imgProps.onError = () => {\n setState({ isErrorImageError: true });\n };\n } else {\n // 无法加载报错图片\n return (\n <div className={`${prefixCls}-error`} data-error-img={src} style={style}>\n <p>{errorText}</p>\n </div>\n );\n }\n }\n\n let imgRender = <img {...imgProps} />;\n // 缩放\n if (src && !isError && aspectFit) {\n imgRender = (\n <div\n className={classnames(`${prefixCls}-aspectFit`, {\n [`${prefixCls}-preview`]: preview,\n })}\n >\n <img {...imgProps} />\n </div>\n );\n }\n return (\n <>\n {imgRender}\n {!isPreviewGroup && preview && (\n <Preview\n visible={visible}\n photo={photo}\n onClose={() => setState({ visible: false })}\n />\n )}\n </>\n );\n}\n\nVtxImage.propTypes = {\n prefixCls: PropTypes.string,\n className: PropTypes.string,\n style: PropTypes.object,\n preview: PropTypes.bool,\n src: PropTypes.string,\n thumb: PropTypes.string,\n alt: PropTypes.string,\n emptyImageSrc: PropTypes.string,\n errorImageSrc: PropTypes.string,\n emptyText: PropTypes.string,\n errorText: PropTypes.string,\n onClick: PropTypes.func,\n aspectFit: PropTypes.bool,\n};\n\nVtxImage.setImageConfig = setImageConfig;\n\nfunction setImageConfig(options) {\n const { emptyImageSrc, errorImageSrc, emptyText, errorText } = options;\n\n if (emptyImageSrc !== undefined) {\n defaultEmptyImageSrc = emptyImageSrc;\n }\n if (errorImageSrc !== undefined) {\n defaultErrorImageSrc = errorImageSrc;\n }\n if (emptyText !== undefined) {\n defaultEmptyText = emptyText;\n }\n if (errorText !== undefined) {\n defaultErrorText = errorText;\n }\n}\n\nVtxImage.PreviewGroup = PreviewGroup;\nVtxImage.VtxImagePreview = Preview;\n\nexport default VtxImage;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Image.js","names":["defaultEmptyImageSrc","defaultErrorImageSrc","defaultEmptyText","defaultErrorText","uuid","VtxImage","props","React","useState","currentId","useSet","isError","isEmptyImageError","isErrorImageError","viewerVisible","visible","photo","undefined","state","setState","prefixCls","preview","className","style","src","thumb","alt","emptyImageSrc","errorImageSrc","emptyText","errorText","onClick","aspectFit","useContext","context","isPreviewGroup","setCurrent","setGroupShowPreview","setShowPreview","registerImage","useEffect","id","imgProps","onError","imgRender","classnames","propTypes","PropTypes","string","object","bool","func","setImageConfig","options","PreviewGroup","VtxImagePreview","Preview"],"sources":["vtx-image/Image.jsx"],"sourcesContent":["import React, { useEffect, useContext } from 'react';\r\nimport classnames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Preview from './Preview';\r\nimport PreviewGroup, { context } from './PreviewGroup';\r\nimport useSet from '../_util/useSet';\r\n\r\nlet defaultEmptyImageSrc = '';\r\nlet defaultErrorImageSrc = '';\r\nlet defaultEmptyText = '暂无图片';\r\nlet defaultErrorText = '图片出错';\r\n\r\nlet uuid = 0;\r\n\r\nfunction VtxImage(props) {\r\n const [currentId] = React.useState(() => {\r\n uuid += 1;\r\n return uuid;\r\n });\r\n\r\n const [state, setState] = useSet({\r\n isError: false, // 图片是否加载失败\r\n isEmptyImageError: false, // 空白图片是否加载失败\r\n isErrorImageError: false, // 报错图片是否加载失败\r\n viewerVisible: false, // 是否查看\r\n visible: false,\r\n photo: undefined,\r\n });\r\n const { isError, isEmptyImageError, isErrorImageError, visible, photo } = state;\r\n\r\n const {\r\n prefixCls = 'vtx-image',\r\n preview = true,\r\n className,\r\n style,\r\n src,\r\n thumb,\r\n alt,\r\n emptyImageSrc = defaultEmptyImageSrc,\r\n errorImageSrc = defaultErrorImageSrc,\r\n emptyText = defaultEmptyText,\r\n errorText = defaultErrorText,\r\n onClick,\r\n aspectFit,\r\n } = props;\r\n\r\n const {\r\n isPreviewGroup,\r\n setCurrent,\r\n setShowPreview: setGroupShowPreview,\r\n registerImage,\r\n } = useContext(context);\r\n\r\n useEffect(() => {\r\n setState({\r\n isError: false,\r\n });\r\n if (isPreviewGroup && preview) {\r\n registerImage({ id: currentId, src, alt });\r\n }\r\n }, [src]);\r\n\r\n // 图片props属性\r\n let imgProps = {\r\n src: thumb || src,\r\n className,\r\n style,\r\n alt,\r\n onClick: () => {\r\n if (!src || isError) {\r\n return null;\r\n }\r\n onClick && onClick();\r\n if (preview) {\r\n if (isPreviewGroup) {\r\n setCurrent(currentId);\r\n setGroupShowPreview(true);\r\n } else {\r\n setState({\r\n visible: true,\r\n photo: {\r\n src,\r\n alt,\r\n },\r\n });\r\n }\r\n }\r\n },\r\n onError: () => {\r\n setState({\r\n isError: true,\r\n });\r\n },\r\n };\r\n\r\n // 无图片\r\n if (!src) {\r\n //有替代图片\r\n if (emptyImageSrc && !isEmptyImageError) {\r\n imgProps.src = emptyImageSrc;\r\n imgProps.onError = () => {\r\n setState({ isEmptyImageError: true });\r\n };\r\n } else {\r\n // 没有替代图片或替代图片无法加载\r\n return (\r\n <div className={`${prefixCls}-nodata`} style={style}>\r\n <p>{emptyText}</p>\r\n </div>\r\n );\r\n }\r\n }\r\n\r\n // 图片出错\r\n if (isError) {\r\n if (errorImageSrc && !isErrorImageError) {\r\n imgProps['data-error-img'] = src;\r\n imgProps.src = errorImageSrc;\r\n imgProps.onError = () => {\r\n setState({ isErrorImageError: true });\r\n };\r\n } else {\r\n // 无法加载报错图片\r\n return (\r\n <div className={`${prefixCls}-error`} data-error-img={src} style={style}>\r\n <p>{errorText}</p>\r\n </div>\r\n );\r\n }\r\n }\r\n\r\n let imgRender = <img {...imgProps} />;\r\n // 缩放\r\n if (src && !isError && aspectFit) {\r\n imgRender = (\r\n <div\r\n className={classnames(`${prefixCls}-aspectFit`, {\r\n [`${prefixCls}-preview`]: preview,\r\n })}\r\n >\r\n <img {...imgProps} />\r\n </div>\r\n );\r\n }\r\n return (\r\n <>\r\n {imgRender}\r\n {!isPreviewGroup && preview && (\r\n <Preview\r\n visible={visible}\r\n photo={photo}\r\n onClose={() => setState({ visible: false })}\r\n />\r\n )}\r\n </>\r\n );\r\n}\r\n\r\nVtxImage.propTypes = {\r\n prefixCls: PropTypes.string,\r\n className: PropTypes.string,\r\n style: PropTypes.object,\r\n preview: PropTypes.bool,\r\n src: PropTypes.string,\r\n thumb: PropTypes.string,\r\n alt: PropTypes.string,\r\n emptyImageSrc: PropTypes.string,\r\n errorImageSrc: PropTypes.string,\r\n emptyText: PropTypes.string,\r\n errorText: PropTypes.string,\r\n onClick: PropTypes.func,\r\n aspectFit: PropTypes.bool,\r\n};\r\n\r\nVtxImage.setImageConfig = setImageConfig;\r\n\r\nfunction setImageConfig(options) {\r\n const { emptyImageSrc, errorImageSrc, emptyText, errorText } = options;\r\n\r\n if (emptyImageSrc !== undefined) {\r\n defaultEmptyImageSrc = emptyImageSrc;\r\n }\r\n if (errorImageSrc !== undefined) {\r\n defaultErrorImageSrc = errorImageSrc;\r\n }\r\n if (emptyText !== undefined) {\r\n defaultEmptyText = emptyText;\r\n }\r\n if (errorText !== undefined) {\r\n defaultErrorText = errorText;\r\n }\r\n}\r\n\r\nVtxImage.PreviewGroup = PreviewGroup;\r\nVtxImage.VtxImagePreview = Preview;\r\n\r\nexport default VtxImage;\r\n"],"mappings":"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"}
|
package/lib/vtx-image/Preview.js
CHANGED
|
@@ -1,58 +1,82 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
+
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports["default"] = Preview;
|
|
9
|
+
|
|
8
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
|
|
9
12
|
var _viewerjs = _interopRequireDefault(require("viewerjs"));
|
|
13
|
+
|
|
10
14
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
|
+
|
|
11
16
|
var _isObject = _interopRequireDefault(require("../_util/isObject"));
|
|
17
|
+
|
|
12
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
19
|
+
|
|
13
20
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
21
|
+
|
|
14
22
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
23
|
+
|
|
15
24
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
25
|
+
|
|
16
26
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
27
|
+
|
|
17
28
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
29
|
+
|
|
18
30
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
31
|
+
|
|
19
32
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
33
|
+
|
|
20
34
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
35
|
+
|
|
21
36
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
37
|
+
|
|
22
38
|
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
39
|
+
|
|
23
40
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
41
|
+
|
|
24
42
|
// 单张
|
|
25
|
-
var VIEWER = 'viewer';
|
|
26
|
-
|
|
43
|
+
var VIEWER = 'viewer'; // 多张
|
|
44
|
+
|
|
27
45
|
var GALLERY = 'gallery';
|
|
46
|
+
|
|
28
47
|
function checkMode(x) {
|
|
29
48
|
var mode = '';
|
|
49
|
+
|
|
30
50
|
if ((0, _isObject["default"])(x)) {
|
|
31
51
|
mode = VIEWER;
|
|
32
52
|
}
|
|
53
|
+
|
|
33
54
|
if (Array.isArray(x)) {
|
|
34
55
|
var len = x.length;
|
|
35
56
|
mode = len == 0 ? '' : len == 1 ? VIEWER : GALLERY;
|
|
36
57
|
}
|
|
58
|
+
|
|
37
59
|
return mode;
|
|
38
60
|
}
|
|
61
|
+
|
|
39
62
|
function Preview(props) {
|
|
40
63
|
var _useState = (0, _react.useState)(),
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
64
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
65
|
+
container = _useState2[0],
|
|
66
|
+
setContainer = _useState2[1];
|
|
67
|
+
|
|
44
68
|
var _useState3 = (0, _react.useState)(),
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
69
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
70
|
+
viewer = _useState4[0],
|
|
71
|
+
setViewer = _useState4[1];
|
|
72
|
+
|
|
48
73
|
var photo = props.photo,
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
74
|
+
index = props.index,
|
|
75
|
+
visible = props.visible,
|
|
76
|
+
onClose = props.onClose,
|
|
77
|
+
onIndexChange = props.onIndexChange,
|
|
78
|
+
options = props.options; // let container;
|
|
54
79
|
|
|
55
|
-
// let container;
|
|
56
80
|
(0, _react.useEffect)(function () {
|
|
57
81
|
var viewerOption = _objectSpread({
|
|
58
82
|
button: true,
|
|
@@ -75,6 +99,7 @@ function Preview(props) {
|
|
|
75
99
|
// 图片是否可翻转
|
|
76
100
|
transition: true
|
|
77
101
|
}, options);
|
|
102
|
+
|
|
78
103
|
var container = document.createElement('div');
|
|
79
104
|
var viewer = new _viewerjs["default"](container, _objectSpread({
|
|
80
105
|
url: function url(image) {
|
|
@@ -99,20 +124,24 @@ function Preview(props) {
|
|
|
99
124
|
if (container.childNodes.length > 0) {
|
|
100
125
|
container.innerHTML = '';
|
|
101
126
|
}
|
|
127
|
+
|
|
102
128
|
var mode = checkMode(photo);
|
|
103
|
-
var newIndex = index;
|
|
104
|
-
|
|
129
|
+
var newIndex = index; // 单张
|
|
130
|
+
|
|
105
131
|
if (mode === VIEWER) {
|
|
106
132
|
newIndex = 0;
|
|
133
|
+
|
|
107
134
|
var _ref = (0, _isObject["default"])(photo) ? photo : photo[0],
|
|
108
|
-
|
|
109
|
-
|
|
135
|
+
src = _ref.src,
|
|
136
|
+
alt = _ref.alt;
|
|
137
|
+
|
|
110
138
|
var imgElem = document.createElement('img');
|
|
111
139
|
imgElem.src = src;
|
|
112
140
|
imgElem.alt = alt;
|
|
113
141
|
container.appendChild(imgElem);
|
|
114
|
-
}
|
|
115
|
-
|
|
142
|
+
} // 多张
|
|
143
|
+
|
|
144
|
+
|
|
116
145
|
if (mode === GALLERY) {
|
|
117
146
|
var len = photo.length - 1;
|
|
118
147
|
newIndex = index < 0 ? 0 : index;
|
|
@@ -128,12 +157,14 @@ function Preview(props) {
|
|
|
128
157
|
});
|
|
129
158
|
container.appendChild(ulElem);
|
|
130
159
|
}
|
|
160
|
+
|
|
131
161
|
viewer.update();
|
|
132
162
|
viewer.view(newIndex);
|
|
133
163
|
}
|
|
134
164
|
}, [visible]);
|
|
135
165
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null);
|
|
136
166
|
}
|
|
167
|
+
|
|
137
168
|
Preview.propTypes = {
|
|
138
169
|
photo: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].array]),
|
|
139
170
|
index: _propTypes["default"].number,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Preview.js","names":["VIEWER","GALLERY","checkMode","x","mode","isObject","Array","isArray","len","length","Preview","props","useState","container","setContainer","viewer","setViewer","photo","index","visible","onClose","onIndexChange","options","useEffect","viewerOption","button","navbar","title","toolbar","tooltip","movable","zoomable","rotatable","scalable","transition","document","createElement","Viewer","url","image","src","hidden","view","e","detail","destroy","childNodes","innerHTML","newIndex","alt","imgElem","appendChild","ulElem","map","item","liElem","update","propTypes","PropTypes","oneOfType","object","array","number","bool","func"],"sources":["vtx-image/Preview.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport Viewer from 'viewerjs';\nimport PropTypes from 'prop-types';\n\nimport isObject from '../_util/isObject';\n\n// 单张\nconst VIEWER = 'viewer';\n// 多张\nconst GALLERY = 'gallery';\nfunction checkMode(x) {\n let mode = '';\n if (isObject(x)) {\n mode = VIEWER;\n }\n if (Array.isArray(x)) {\n let len = x.length;\n mode = len == 0 ? '' : len == 1 ? VIEWER : GALLERY;\n }\n return mode;\n}\n\nexport default function Preview(props) {\n const [container, setContainer] = useState();\n const [viewer, setViewer] = useState();\n const { photo, index, visible, onClose, onIndexChange, options } = props;\n\n // let container;\n useEffect(() => {\n const viewerOption = {\n button: true, // 显示右上角关闭按钮\n navbar: false, // 显示缩略图导航\n title: true, // 显示当前图片的标题(现实 alt 属性及图片尺寸)\n toolbar: true, // 是否显示工具栏\n tooltip: true, // 显示缩放百分比\n movable: true, // 图片是否可移动\n zoomable: true, // 图片是否可缩放\n rotatable: true, // 图片是否可旋转\n scalable: true, // 图片是否可翻转\n transition: true, // 使用 CSS3 过度\n ...options,\n };\n\n const container = document.createElement('div');\n const viewer = new Viewer(container, {\n url(image) {\n return image.src;\n },\n // 关闭后\n hidden() {\n onClose && onClose();\n },\n view(e) {\n onIndexChange && onIndexChange(e.detail.index);\n },\n ...viewerOption,\n });\n setContainer(container);\n setViewer(viewer);\n return () => {\n viewer && viewer.destroy();\n };\n }, []);\n\n useEffect(() => {\n if (visible) {\n if (container.childNodes.length > 0) {\n container.innerHTML = '';\n }\n const mode = checkMode(photo);\n let newIndex = index;\n // 单张\n if (mode === VIEWER) {\n newIndex = 0;\n const { src, alt } = isObject(photo) ? photo : photo[0];\n const imgElem = document.createElement('img');\n imgElem.src = src;\n imgElem.alt = alt;\n container.appendChild(imgElem);\n }\n // 多张\n if (mode === GALLERY) {\n let len = photo.length - 1;\n newIndex = index < 0 ? 0 : index;\n newIndex = index > len ? len : index;\n const ulElem = document.createElement('ul');\n photo.map(item => {\n const liElem = document.createElement('li');\n const imgElem = document.createElement('img');\n imgElem.src = item.src;\n imgElem.alt = item.alt;\n liElem.appendChild(imgElem);\n ulElem.appendChild(liElem);\n });\n container.appendChild(ulElem);\n }\n viewer.update();\n viewer.view(newIndex);\n }\n }, [visible]);\n\n return <></>;\n}\n\nPreview.propTypes = {\n photo: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n index: PropTypes.number,\n visible: PropTypes.bool,\n onClose: PropTypes.func,\n onIndexChange: PropTypes.func,\n options: PropTypes.object,\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Preview.js","names":["VIEWER","GALLERY","checkMode","x","mode","isObject","Array","isArray","len","length","Preview","props","useState","container","setContainer","viewer","setViewer","photo","index","visible","onClose","onIndexChange","options","useEffect","viewerOption","button","navbar","title","toolbar","tooltip","movable","zoomable","rotatable","scalable","transition","document","createElement","Viewer","url","image","src","hidden","view","e","detail","destroy","childNodes","innerHTML","newIndex","alt","imgElem","appendChild","ulElem","map","item","liElem","update","propTypes","PropTypes","oneOfType","object","array","number","bool","func"],"sources":["vtx-image/Preview.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\r\nimport Viewer from 'viewerjs';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport isObject from '../_util/isObject';\r\n\r\n// 单张\r\nconst VIEWER = 'viewer';\r\n// 多张\r\nconst GALLERY = 'gallery';\r\nfunction checkMode(x) {\r\n let mode = '';\r\n if (isObject(x)) {\r\n mode = VIEWER;\r\n }\r\n if (Array.isArray(x)) {\r\n let len = x.length;\r\n mode = len == 0 ? '' : len == 1 ? VIEWER : GALLERY;\r\n }\r\n return mode;\r\n}\r\n\r\nexport default function Preview(props) {\r\n const [container, setContainer] = useState();\r\n const [viewer, setViewer] = useState();\r\n const { photo, index, visible, onClose, onIndexChange, options } = props;\r\n\r\n // let container;\r\n useEffect(() => {\r\n const viewerOption = {\r\n button: true, // 显示右上角关闭按钮\r\n navbar: false, // 显示缩略图导航\r\n title: true, // 显示当前图片的标题(现实 alt 属性及图片尺寸)\r\n toolbar: true, // 是否显示工具栏\r\n tooltip: true, // 显示缩放百分比\r\n movable: true, // 图片是否可移动\r\n zoomable: true, // 图片是否可缩放\r\n rotatable: true, // 图片是否可旋转\r\n scalable: true, // 图片是否可翻转\r\n transition: true, // 使用 CSS3 过度\r\n ...options,\r\n };\r\n\r\n const container = document.createElement('div');\r\n const viewer = new Viewer(container, {\r\n url(image) {\r\n return image.src;\r\n },\r\n // 关闭后\r\n hidden() {\r\n onClose && onClose();\r\n },\r\n view(e) {\r\n onIndexChange && onIndexChange(e.detail.index);\r\n },\r\n ...viewerOption,\r\n });\r\n setContainer(container);\r\n setViewer(viewer);\r\n return () => {\r\n viewer && viewer.destroy();\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (visible) {\r\n if (container.childNodes.length > 0) {\r\n container.innerHTML = '';\r\n }\r\n const mode = checkMode(photo);\r\n let newIndex = index;\r\n // 单张\r\n if (mode === VIEWER) {\r\n newIndex = 0;\r\n const { src, alt } = isObject(photo) ? photo : photo[0];\r\n const imgElem = document.createElement('img');\r\n imgElem.src = src;\r\n imgElem.alt = alt;\r\n container.appendChild(imgElem);\r\n }\r\n // 多张\r\n if (mode === GALLERY) {\r\n let len = photo.length - 1;\r\n newIndex = index < 0 ? 0 : index;\r\n newIndex = index > len ? len : index;\r\n const ulElem = document.createElement('ul');\r\n photo.map(item => {\r\n const liElem = document.createElement('li');\r\n const imgElem = document.createElement('img');\r\n imgElem.src = item.src;\r\n imgElem.alt = item.alt;\r\n liElem.appendChild(imgElem);\r\n ulElem.appendChild(liElem);\r\n });\r\n container.appendChild(ulElem);\r\n }\r\n viewer.update();\r\n viewer.view(newIndex);\r\n }\r\n }, [visible]);\r\n\r\n return <></>;\r\n}\r\n\r\nPreview.propTypes = {\r\n photo: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\r\n index: PropTypes.number,\r\n visible: PropTypes.bool,\r\n onClose: PropTypes.func,\r\n onIndexChange: PropTypes.func,\r\n options: PropTypes.object,\r\n};\r\n"],"mappings":"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"}
|