nicecode/nicecode-v2
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 初始化页面

Browse Source
This commit is contained in:
NICE CODE BY DEV 2024-01-16 20:40:10 +08:00
parent 355354a96d
commit 1654c9c685
347 changed files with 40570 additions and 7165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.dumi/global.less
View File

@ -4,3 +4,10 @@
#root .dumi-default-doc-layout > main {
max-width: none;
}
#root .dumi-default-sidebar {
overflow-y: hidden;
&:hover {
overflow-y: auto;
}
}

30
.dumi/loading.svg Normal file
View File

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<defs>
<path id="path" d="M50 15A15 35 0 0 1 50 85A15 35 0 0 1 50 15" fill="none"></path>
<path id="patha" d="M0 0A15 35 0 0 1 0 70A15 35 0 0 1 0 0" fill="none"></path>
</defs><g transform="rotate(0 50 50)">
<use xlink:href="#path" stroke="#dfdfdf" stroke-width="3"></use>
</g><g transform="rotate(60 50 50)">
<use xlink:href="#path" stroke="#dfdfdf" stroke-width="3"></use>
</g><g transform="rotate(120 50 50)">
<use xlink:href="#path" stroke="#dfdfdf" stroke-width="3"></use>
</g><g transform="rotate(0 50 50)">
<circle cx="50" cy="15" r="9" fill="#e15b64">
<animateMotion dur="1s" repeatCount="indefinite" begin="0s">
<mpath xlink:href="#patha"></mpath>
</animateMotion>
</circle>
</g><g transform="rotate(60 50 50)">
<circle cx="50" cy="15" r="9" fill="#f8b26a">
<animateMotion dur="1s" repeatCount="indefinite" begin="-0.16666666666666666s">
<mpath xlink:href="#patha"></mpath>
</animateMotion>
</circle>
</g><g transform="rotate(120 50 50)">
<circle cx="50" cy="15" r="9" fill="#abbd81">
<animateMotion dur="1s" repeatCount="indefinite" begin="-0.3333333333333333s">
<mpath xlink:href="#patha"></mpath>
</animateMotion>
</circle>
</g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

8
.dumi/loading.tsx
View File

@ -1,5 +1,11 @@
import React from 'react';
import loading from './loading.svg'
export default () => {
return <div style={{ textAlign: 'center' }}>客官，您慢点儿...</div>;
return (
<div style={{ textAlign: 'center' }}>
<image src={loading} />
<p>客官，您慢点儿...</p>
</div>
);
};

9
packages/meta/es/index.js
View File

@ -15,8 +15,13 @@ export { default as Empty } from "./empty";
export { default as Form } from "./form";
export { default as Select } from "./select";
export { default as Radio } from "./radio";
export { default as CheckBox } from "./checkbox";
export { default as Checkbox } from "./checkbox";
export { default as Input } from "./input";
export { default as ConfigProvider } from "./config-provider";
export { default as Theme } from "./theme";
export { default as Locale } from "./locale";
export { default as Locale } from "./locale";
export { default as Watermark } from "./watermark";
export { default as Typography } from "./typography";
export { default as InputNumber } from "./input-number";
export { default as Modal } from "./modal";
export { default as Divider } from "./divider";

487
packages/meta/lib/BigImagePreview/BigImagePreview.js
View File

@ -1,487 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/BigImagePreview/BigImagePreview.tsx
var BigImagePreview_exports = {};
__export(BigImagePreview_exports, {
BigImagePreview: () => BigImagePreview,
default: () => BigImagePreview_default
});
module.exports = __toCommonJS(BigImagePreview_exports);
var import_react = __toESM(require("react"));
var import_classnames = __toESM(require("classnames"));
var import_hooks = require("@zhst/hooks");
var import_func = require("@zhst/func");
var import_rc_align = __toESM(require("rc-align"));
var import_antd = require("antd");
var import_iconfont = __toESM(require("../iconfont"));
var import_ImageEditor = require("../ImageEditor");
var import_BtnGroup = __toESM(require("./components/BtnGroup"));
var import_index = require("./index.less");
var import_ScreenhotButtons = __toESM(require("./components/ScreenhotButtons"));
var import_constants = require("../utils/constants");
var componentName = `zhst-image__img-view`;
var cropBtnDataSource = [
{
key: "close",
icon: "icon-danchuangguanbi",
title: "退出"
},
{
key: "autoCrop",
icon: "icon-zidong",
title: "智能框选"
},
{
key: "customCrop",
icon: "icon-shoudong",
title: "手动框选"
}
];
var operateBtnDataSource = [
{
key: "zoomOut",
icon: "icon-fangda",
title: "放大"
},
{
key: "zoomIn",
icon: "icon-suoxiao",
title: "缩小"
},
{
key: "reset",
icon: "icon-zhongzhi3",
title: "重置图片"
}
];
var BigImagePreview = import_react.default.forwardRef((props, ref) => {
var _a, _b;
const {
dataSource = [],
width,
height,
showScore = true,
objects = [],
showOpt = false,
showAttachImgLabel = true,
screenshotButtonAlign = import_constants.defaultAlignOption,
screenshotButtonRender = (0, import_ScreenhotButtons.default)({
onBigImageActionClick: () => {
},
disableBtn: []
}),
hideLeftTopBtn = true,
viewOption = {}
} = props;
const imgContainerRef = import_react.default.useRef(null);
const [isReady, setIsReady] = (0, import_react.useState)(false);
const [currentIndex, setCurrentIndex] = (0, import_react.useState)(0);
console.log("props", props);
const init = (0, import_react.useCallback)(($container) => {
imgContainerRef.current = $container;
setIsReady(true);
}, []);
const imgInsRef = (0, import_react.useRef)(null);
const [isImgReady, setIsImgReady] = (0, import_react.useState)(false);
(0, import_react.useEffect)(() => {
var _a2;
console.log("123", 123);
if (!isReady || !(imgContainerRef == null ? void 0 : imgContainerRef.current))
return;
const handleReady = (0, import_func.addEventListenerWrapper)(imgContainerRef.current, import_ImageEditor.EVENT_VIEWER_READY, () => {
setIsImgReady(true);
});
const handleTransformChange = (0, import_func.addEventListenerWrapper)(
imgContainerRef.current,
import_ImageEditor.EVENT_VIEWER_TRANSFORM_CHANGE,
() => {
}
);
imgInsRef.current = new import_ImageEditor.Viewer(imgContainerRef.current, {
...viewOption,
fitScaleAsMinScale: true,
image: (0, import_func.generateImg)((_a2 = dataSource[currentIndex]) == null ? void 0 : _a2.imageKey)
});
return () => {
var _a3, _b2;
handleReady == null ? void 0 : handleReady.remove();
handleTransformChange == null ? void 0 : handleTransformChange.remove();
(_b2 = (_a3 = imgInsRef == null ? void 0 : imgInsRef.current) == null ? void 0 : _a3.destroy) == null ? void 0 : _b2.call(_a3);
imgInsRef.current = null;
};
}, [isReady, currentIndex]);
const handleOptClick = (v) => {
var _a2, _b2, _c, _d, _e, _f;
switch (v) {
case "zoomOut":
(_b2 = (_a2 = imgInsRef == null ? void 0 : imgInsRef.current) == null ? void 0 : _a2.scaleTo) == null ? void 0 : _b2.call(_a2, 0.1);
break;
case "zoomIn":
(_d = (_c = imgInsRef == null ? void 0 : imgInsRef.current) == null ? void 0 : _c.scaleTo) == null ? void 0 : _d.call(_c, -0.1);
break;
case "reset":
(_f = (_e = imgInsRef == null ? void 0 : imgInsRef.current) == null ? void 0 : _e.reset) == null ? void 0 : _f.call(_e, -0.1);
break;
}
};
const cropInsRef = (0, import_react.useRef)(null);
const [showCrop, setShowCrop] = (0, import_react.useState)(showOpt);
const [cropType, setCropType] = (0, import_react.useState)(import_constants.CROP_TYPE["AUTO"]);
const [odList, setOdList] = (0, import_react.useState)([]);
const [extendOdList, setExtendOdList] = (0, import_react.useState)([]);
const [selectRectId, setSelectRectId] = (0, import_react.useState)(null);
const alginContainerRef = (0, import_react.useRef)(null);
const alignRef = (0, import_react.useRef)(null);
const [cropRect, setCropRect] = (0, import_react.useState)(null);
const [selectAlgorithmVersion, setSelectAlgorithmVersion] = (0, import_react.useState)(null);
const handlerCropStartRef = (0, import_react.useRef)(null);
const handlerCropEndRef = (0, import_react.useRef)(null);
const handleShapeSelectRef = (0, import_react.useRef)(null);
(0, import_react.useEffect)(() => {
initData(dataSource[currentIndex].objects || objects);
return () => {
var _a2, _b2, _c, _d, _e, _f, _g;
(_b2 = (_a2 = imgInsRef.current) == null ? void 0 : _a2.clearShape) == null ? void 0 : _b2.call(_a2);
(_c = handlerCropStartRef.current) == null ? void 0 : _c.remove();
(_d = handlerCropEndRef.current) == null ? void 0 : _d.remove();
(_e = handleShapeSelectRef.current) == null ? void 0 : _e.remove();
(_g = (_f = cropInsRef == null ? void 0 : cropInsRef.current) == null ? void 0 : _f.destroy) == null ? void 0 : _g.call(_f);
cropInsRef.current = null;
};
}, [isImgReady, showCrop, cropType, currentIndex]);
const initData = (_objects) => {
var _a2, _b2;
const imgIns = imgInsRef.current;
const _odRect = dataSource[currentIndex].odRect;
setCropRect(null);
if (!isImgReady)
return;
if (!showCrop) {
(_a2 = imgIns == null ? void 0 : imgIns.addShape) == null ? void 0 : _a2.call(imgIns, {
x: (0, import_func.get)(_odRect, "x", 0),
y: (0, import_func.get)(_odRect, "y", 0),
w: (0, import_func.get)(_odRect, "w", 0),
h: (0, import_func.get)(_odRect, "h", 0),
selectAble: false
});
return;
}
if (cropType === import_constants.CROP_TYPE["AUTO"]) {
const handleGetOD = (odList2) => {
const imgSize = imgIns.getImgSize();
const shapeList = odList2.map((rect2) => ({
...rect2,
selectAble: true,
id: rect2["id"],
algorithmVersion: rect2.algorithmVersion
}));
imgIns.replaceShape(shapeList);
const extendRect = shapeList.map((rect2) => {
const _extendRect = (0, import_func.getExtendRect)(rect2, imgSize.w, imgSize.h, rect2.algorithmVersion);
return { ...rect2, ..._extendRect };
});
setExtendOdList(extendRect);
imgIns.replaceShape(shapeList);
handleShapeSelectRef.current = (0, import_func.addEventListenerWrapper)(imgContainerRef.current, "shape-select", (e) => {
const id = e.detail;
setSelectRectId(id);
const selectShape = shapeList.find((v) => v["id"] === id);
if (selectShape) {
setSelectAlgorithmVersion(selectShape["algorithmVersion"]);
const axisRect = imgIns.imgRectAxisToCanvasAxisRect(selectShape);
const rect2 = {
x: axisRect.x2 > axisRect.x ? axisRect.x : axisRect.x2,
y: axisRect.y2 > axisRect.y ? axisRect.y : axisRect.y2,
w: Math.abs(axisRect.x2 - axisRect.x),
h: Math.abs(axisRect.y2 - axisRect.y)
};
setCropRect(rect2);
} else {
setCropRect(null);
}
});
};
const rect = (0, import_func.getOdRect)({ objects: _objects });
setOdList(rect);
handleGetOD(rect);
}
if (cropType === import_constants.CROP_TYPE["CUSTOM"]) {
(_b2 = imgIns == null ? void 0 : imgIns.clearShape) == null ? void 0 : _b2.call(imgIns);
handlerCropStartRef.current = (0, import_func.addEventListenerWrapper)(imgContainerRef.current, import_ImageEditor.EVENT_CROP_START, () => {
setSelectAlgorithmVersion(null);
setCropRect(null);
});
handlerCropEndRef.current = (0, import_func.addEventListenerWrapper)(imgContainerRef.current, import_ImageEditor.EVENT_CROP_END, (event) => {
var _a3, _b3;
const data = event.detail;
setSelectAlgorithmVersion(null);
setCropRect({
x: data.left,
y: data.top,
w: data.width,
h: data.height
});
(_b3 = (_a3 = alignRef == null ? void 0 : alignRef.current) == null ? void 0 : _a3.forceAlign) == null ? void 0 : _b3.call(_a3);
});
cropInsRef.current = new import_ImageEditor.Cropper(imgContainerRef.current, {
showMask: true,
viewer: imgIns
});
}
};
const latestCropType = (0, import_hooks.useLatest)(cropType);
const latestImgKey = (0, import_hooks.useLatest)(dataSource[currentIndex].imageKey);
const latestCropRect = (0, import_hooks.useLatest)(cropRect);
const getCropInfo = async () => {
const cropType2 = latestCropType.current;
const cropRect2 = latestCropRect.current;
const imgIns = imgInsRef.current;
const transform = imgIns.targetTransform;
let newImgKey = latestImgKey.current;
let rectList = [];
let extendRectList = [];
let selectIndex = 0;
switch (cropType2) {
case import_constants.CROP_TYPE["AUTO"]:
const shapes = imgIns.getSelectShape();
const shapeIds = shapes.map((v) => v["id"]);
rectList = odList.filter((v) => shapeIds.includes(v["id"])).map((item) => {
if (item.algorithmVersion === "OBJECT_TYPE_FACE" || item.objectType === "OBJECT_TYPE_FACE") {
if (!(0, import_func.isNull)(item.extendBox)) {
return {
...item,
w: (0, import_func.get)(item, "extendBox.w"),
h: (0, import_func.get)(item, "extendBox.h"),
x: (0, import_func.get)(item, "extendBox.x"),
y: (0, import_func.get)(item, "extendBox.y")
};
}
} else {
return item;
}
});
extendRectList = extendOdList.filter((v) => shapeIds.includes(v["id"])).map((v) => (0, import_func.pick)(v, ["x", "y", "w", "h", "algorithmVersion", "id"]));
selectIndex = rectList.findIndex((v) => v["id"] === selectRectId);
break;
default:
const newRect = (0, import_func.getTransformRect)(imgIns.image, transform, cropRect2);
if ((0, import_func.get)(transform, "rotate", 0) % 360 != 0) {
const data = (0, import_func.getRotateImg)(imgIns.image, (0, import_func.get)(transform, "rotate", 0));
newImgKey = await (0, import_func.upload)(data);
}
rectList.push(newRect);
extendRectList.push(newRect);
break;
}
await Promise.all(
extendRectList.map(async (rect, index) => {
const file = await (0, import_func.getFileByRect)(imgIns.image, rect);
const imgKey = await (0, import_func.upload)(file);
extendRectList[index] = { ...rect, imgKey };
})
);
await Promise.all(
rectList.map(async (rect, index) => {
const faceCorrectImage = rect["faceCorrectImage"];
let faceCorrectImageKey;
if (faceCorrectImage) {
const base64 = `data:image/jpg;base64,${faceCorrectImage}`;
const blobData = (0, import_func.dataURLToBlob)(base64);
const file = new window.File([blobData], `${(/* @__PURE__ */ new Date()).getTime()}`);
faceCorrectImageKey = await (0, import_func.upload)(file);
}
const newRect = {
...rect,
...faceCorrectImageKey ? { faceCorrectImageKey } : {}
};
delete newRect["faceCorrectImage"];
rectList[index] = newRect;
})
);
return { rectList, extendRectList, selectIndex, imgKey: newImgKey };
};
const handleCropBtnClick = (v) => {
switch (v) {
case "close":
setShowCrop(false);
break;
case "autoCrop":
setCropType(import_constants.CROP_TYPE["AUTO"]);
break;
case "customCrop":
setCropType(import_constants.CROP_TYPE["CUSTOM"]);
break;
}
};
const [selectAttachImgIndex, setSelectAttachImgIndex] = (0, import_react.useState)(0);
const [isZoomin, setIsZoomin] = (0, import_react.useState)(false);
const handleChangeIndex = (diff) => {
var _a2;
const _index = currentIndex + diff;
if (!((_a2 = dataSource == null ? void 0 : dataSource[_index]) == null ? void 0 : _a2.imageKey))
return;
setCurrentIndex(_index);
};
(0, import_react.useImperativeHandle)(ref, () => ({
imgInsRef,
setShowCrop,
initData,
getCropInfo,
handleChangeIndex
}));
return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}`), style: { height, width } }, dataSource.length ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
"div",
{
className: (0, import_classnames.default)(
`${componentName}-main`,
cropType === import_constants.CROP_TYPE["AUTO"] && `${componentName}-main--cursor`
),
ref: init
}
), !hideLeftTopBtn && /* @__PURE__ */ import_react.default.createElement(
import_BtnGroup.default,
{
className: (0, import_classnames.default)(`${componentName}-opt`),
dataSource: operateBtnDataSource,
onClick: handleOptClick,
placement: "left"
}
), showCrop && /* @__PURE__ */ import_react.default.createElement(
import_BtnGroup.default,
{
circle: true,
className: (0, import_classnames.default)(`${componentName}-crop-opt`),
dataSource: cropBtnDataSource,
onClick: handleCropBtnClick,
selectKey: cropType === import_constants.CROP_TYPE["AUTO"] ? "autoCrop" : "customCrop"
}
), showCrop && cropRect && screenshotButtonRender && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
"div",
{
ref: alginContainerRef,
className: (0, import_classnames.default)(`${componentName}-align`),
style: Object.assign(
{
width: cropRect.w,
height: cropRect.h
},
(0, import_func.getTransforms)({
translateX: cropRect.x,
translateY: cropRect.y
})
)
}
), /* @__PURE__ */ import_react.default.createElement(
import_rc_align.default,
{
ref: alignRef,
monitorWindowResize: true,
align: screenshotButtonAlign,
target: function() {
return alginContainerRef.current;
}
},
screenshotButtonRender({
model: "IMAGE",
getCropInfo,
setShowCrop,
cropType,
selectAlgorithmVersion
})
)), ((_a = dataSource[currentIndex].attachImg) == null ? void 0 : _a.length) && !showCrop && /* @__PURE__ */ import_react.default.createElement(
"div",
{
className: (0, import_classnames.default)(
`${componentName}-attach`,
isZoomin && `${componentName}-attach--zoomin`,
`${componentName}-attach--fixed`,
isZoomin && `${componentName}-attach--zoomin--fixed`
)
},
/* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}-attach__tab`) }, showAttachImgLabel ? (_b = dataSource[currentIndex].attachImg) == null ? void 0 : _b.map(({ label }, index) => /* @__PURE__ */ import_react.default.createElement(
"div",
{
key: index,
className: (0, import_classnames.default)(
`${componentName}-attach__tab-item`,
selectAttachImgIndex === index && `${componentName}-attach__tab-item--select`
),
onMouseEnter: () => {
setSelectAttachImgIndex(index);
}
},
label
)) : null),
/* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}-attach__scale`) }, /* @__PURE__ */ import_react.default.createElement(
import_antd.Button,
{
type: "text",
onMouseDown: (e) => {
if (e.button == 0) {
setIsZoomin((pre) => !pre);
}
},
style: {
color: "#fff"
}
},
/* @__PURE__ */ import_react.default.createElement(
import_iconfont.default,
{
styles: { display: "flex" },
icon: isZoomin ? "icon-cancle_fullscreen" : "icon-fullscreen"
}
)
)),
/* @__PURE__ */ import_react.default.createElement(
"img",
{
draggable: "false",
className: (0, import_classnames.default)(
`${componentName}-attach__img`,
`${componentName}-attach__img--fixed`
),
src: (0, import_func.get)(dataSource[currentIndex].attachImg, `${selectAttachImgIndex}.url`, "")
}
)
), showScore && /* @__PURE__ */ import_react.default.createElement(
"div",
{
style: { bottom: 20 },
className: (0, import_classnames.default)(`${componentName}__face-score`)
},
`人脸质量分：${Number(dataSource[currentIndex].score).toFixed(2)}`
)) : /* @__PURE__ */ import_react.default.createElement(import_antd.Empty, { image: import_antd.Empty.PRESENTED_IMAGE_SIMPLE, description: "暂无数据" }));
});
BigImagePreview.displayName = "BigImagePreview";
var BigImagePreview_default = BigImagePreview;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
BigImagePreview
});

0
packages/meta/lib/BigImagePreview/bigImagePreviewHelper.js
View File

83
packages/meta/lib/BigImagePreview/components/BtnGroup/index.js
View File

@ -1,83 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/BigImagePreview/components/BtnGroup/index.tsx
var BtnGroup_exports = {};
__export(BtnGroup_exports, {
BtnGroup: () => BtnGroup,
default: () => BtnGroup_default
});
module.exports = __toCommonJS(BtnGroup_exports);
var import_react = __toESM(require("react"));
var import_classnames = __toESM(require("classnames"));
var import_antd = require("antd");
var import_iconfont = __toESM(require("../../../iconfont"));
var import_index = require("./index.less");
var componentName = `zhst-image__btn-group`;
var BtnGroup = (props) => {
const { dataSource, onClick, className, circle, selectKey = "", placement = "right" } = props;
return /* @__PURE__ */ import_react.default.createElement(
"div",
{
className: (0, import_classnames.default)(
componentName,
circle && `${componentName}--circle`,
className
)
},
dataSource.map(({ key, icon, title }) => {
const isSelect = key === selectKey;
return /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { key, placement, title }, /* @__PURE__ */ import_react.default.createElement(
"div",
{
key,
className: (0, import_classnames.default)(
`${componentName}__item`,
isSelect && `${componentName}__item--active`
)
},
/* @__PURE__ */ import_react.default.createElement(
import_antd.Button,
{
type: "text",
onClick: (e) => {
onClick(key, e);
}
},
/* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { size: 18, icon })
)
));
})
);
};
BtnGroup.displayName = "BtnGroup";
var BtnGroup_default = BtnGroup;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
BtnGroup
});

51
packages/meta/lib/BigImagePreview/components/BtnGroup/index.less
View File

@ -1,51 +0,0 @@
.zhst-image__btn-group {
// display: flex;
width: 30px;
box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%);
&__item {
display: flex;
width: 30px;
height: 30px;
align-items: center;
justify-content: center;
background: #000;
&>button {
padding: 0;
color: #fff;
&:hover {
color: #09f;
}
&:active {
color: #09f;
}
&:focus {
color: #fff;
}
&>span {
display: flex;
}
}
&--active {
&>button {
color: #09f;
}
}
}
&--circle {
background-color: none;
box-shadow: none;
}
&--circle &__item {
margin-bottom: 4px;
border-radius: 50%;
}
}

126
packages/meta/lib/BigImagePreview/components/ScreenhotButtons/index.js
View File

@ -1,126 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/BigImagePreview/components/ScreenhotButtons/index.tsx
var ScreenhotButtons_exports = {};
__export(ScreenhotButtons_exports, {
default: () => ScreenhotButtons_default
});
module.exports = __toCommonJS(ScreenhotButtons_exports);
var import_react = __toESM(require("react"));
var import_antd = require("antd");
var import_classnames = __toESM(require("classnames"));
var import_BigImageModal = require("@zhst/types/BigImageModal");
var import_index = require("./index.less");
var componentName = "bigImageWrapper--v2";
var getScreenshotButtonRender = (arg) => {
const { disableBtn = [], onBigImageActionClick } = arg;
return (param) => {
const { getCropInfo, setShowCrop, cropType, selectAlgorithmVersion } = param;
let isAuto = cropType === "AUTO";
return /* @__PURE__ */ import_react.default.createElement(
"div",
{
className: (0, import_classnames.default)(`${componentName}__screenshot`),
style: {
zIndex: 100,
position: "absolute",
width: "86px"
}
},
!disableBtn.includes(import_BigImageModal.IBigImageOpt["ADD_HISTORY_WITH_CROP"]) && isAuto && /* @__PURE__ */ import_react.default.createElement(
import_antd.Button,
{
type: "text",
onClick: async (e) => {
e.stopPropagation();
const image = await getCropInfo();
setShowCrop(false);
onBigImageActionClick(import_BigImageModal.IBigImageOpt["ADD_HISTORY_WITH_CROP"], image);
}
},
"目标检索"
),
!disableBtn.includes(import_BigImageModal.IBigImageOpt["ADD_HISTORY_WITH_CROP_BODY"]) && !isAuto && /* @__PURE__ */ import_react.default.createElement(
import_antd.Button,
{
type: "text",
onClick: async (e) => {
e.stopPropagation();
const image = await getCropInfo();
setShowCrop(false);
onBigImageActionClick(import_BigImageModal.IBigImageOpt["ADD_HISTORY_WITH_CROP_BODY"], image);
}
},
"搜形体"
),
!disableBtn.includes(import_BigImageModal.IBigImageOpt["ADD_HISTORY_WITH_CROP_VEHICLE"]) && !isAuto && /* @__PURE__ */ import_react.default.createElement(
import_antd.Button,
{
type: "text",
onClick: async (e) => {
e.stopPropagation();
const image = await getCropInfo();
setShowCrop(false);
onBigImageActionClick(import_BigImageModal.IBigImageOpt["ADD_HISTORY_WITH_CROP_VEHICLE"], image);
}
},
"搜非机动车"
),
!disableBtn.includes(import_BigImageModal.IBigImageOpt["ADD_HISTORY_WITH_CROP_ARCHIVE"]) && selectAlgorithmVersion !== 0 && /* @__PURE__ */ import_react.default.createElement(
import_antd.Button,
{
type: "text",
onClick: (e) => {
e.stopPropagation();
let image = getCropInfo();
setShowCrop(false);
if (!image.rectList[0].algorithmVersion) {
image.rectList[0].algorithmVersion = 0;
image.extendRectList[0].algorithmVersion = 0;
}
onBigImageActionClick(import_BigImageModal.IBigImageOpt["ADD_HISTORY_WITH_CROP_ARCHIVE"], image);
}
},
"档案检索"
),
/* @__PURE__ */ import_react.default.createElement(
import_antd.Button,
{
type: "text",
onClick: (e) => {
e.stopPropagation();
setShowCrop(false);
}
},
"退出框选"
)
);
};
};
var ScreenhotButtons_default = getScreenshotButtonRender;

21
packages/meta/lib/BigImagePreview/components/ScreenhotButtons/index.less
View File

@ -1,21 +0,0 @@
.bigImageWrapper--v2__screenshot {
min-width: 90px;
background: rgb(0 0 0 / 50%);
border-radius: 0;
&>button {
width: 100%;
color: #fff !important;
font-family: 'Microsoft YaHei';
font-size: 12px !important;
border-radius: 0;
&>span {
color: #fff;
}
&:hover {
background-color: #09f !important;
}
}
}

36
packages/meta/lib/BigImagePreview/index.js
View File

@ -1,36 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/BigImagePreview/index.tsx
var BigImagePreview_exports = {};
__export(BigImagePreview_exports, {
default: () => BigImagePreview_default
});
module.exports = __toCommonJS(BigImagePreview_exports);
var import_BigImagePreview = __toESM(require("./BigImagePreview"));
var BigImagePreview_default = import_BigImagePreview.default;

129
packages/meta/lib/BigImagePreview/index.less
View File

@ -1,129 +0,0 @@
.zhst-image__img-view {
position: relative;
width: calc(100%);
height: 100%;
&__face-score {
position: absolute;
right: 20px;
bottom: 80px;
color: red;
font-family: 'Microsoft YaHei';
font-size: 19px;
font-weight: bold;
}
&-opt {
position: absolute;
z-index: 99;
top: 0;
}
&-crop-opt {
position: absolute;
z-index: 99;
top: 0;
right: 0;
}
&-align {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
&-main {
width: 100%;
height: 100%;
font-size: 0;
&--cursor {
& canvas {
min-height: 320px;
cursor: pointer;
}
}
}
&-screenshot {
position: absolute;
z-index: 10;
}
&-attach {
position: absolute;
z-index: 11;
bottom: 0;
// left: 78px;
left: 0;
min-width: 120px;
height: 202px;
transition: all 200ms;
&--fixed {
}
&--zoomin {
height: 100%;
&--fixed {
}
}
&__tab {
position: absolute;
top: 0;
left: 0;
display: flex;
&-item {
display: flex;
width: 30px;
height: 24px;
align-items: center;
justify-content: center;
background: #000;
color: #fff;
cursor: pointer;
font-size: 12px;
opacity: 0.5;
transition: all 200ms;
&--select {
width: 48px;
height: 34px;
background: #09f;
opacity: 1;
}
}
}
&__scale {
position: absolute;
top: 4px;
right: 4px;
display: flex;
width: 30px;
height: 30px;
align-items: center;
justify-content: center;
background: rgb(0 0 0 / 60%);
border-radius: 100%;
cursor: pointer;
line-height: 30px;
text-align: center;
}
&__img {
height: 100%;
object-fit: contain;
&--fixed {
width: 100%;
object-fit: contain;
}
}
}
}

157
packages/meta/lib/CompareImage/CompareImage.js
View File

@ -1,157 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/CompareImage/CompareImage.tsx
var CompareImage_exports = {};
__export(CompareImage_exports, {
default: () => CompareImage_default
});
module.exports = __toCommonJS(CompareImage_exports);
var import_react = __toESM(require("react"));
var import_func = require("@zhst/func");
var import_hooks = require("@zhst/hooks");
var import_antd = require("antd");
var import_classnames = __toESM(require("classnames"));
var import_viewer = __toESM(require("../ImageEditor/viewer"));
var import_iconfont = __toESM(require("../iconfont"));
var import_CornerScore = __toESM(require("./components/CornerScore"));
var import_index = require("./index.less");
var componentName = `zhst-image__compater-view`;
var CompareImage = (0, import_react.forwardRef)((props, ref) => {
const { label, openRoll = false, dataSource = [], showScore = true, current = 0 } = props;
const imgContainerRef = (0, import_react.useRef)(null);
const imgInsRef = (0, import_react.useRef)(null);
const [scale, setScale] = (0, import_react.useState)(0);
const [currentIndex, setCurrentIndex] = (0, import_react.useState)(current);
(0, import_react.useEffect)(() => {
const handleTransformChange = (0, import_func.addEventListenerWrapper)(
imgContainerRef.current,
"viewer-transform-change",
(event) => {
const data = event.detail;
setScale((0, import_func.get)(data, "scale", 0));
}
);
if ((0, import_func.generateImg)(dataSource[currentIndex].url)) {
imgInsRef.current = new import_viewer.default(imgContainerRef.current, {
image: (0, import_func.generateImg)(dataSource[currentIndex].url)
});
}
return () => {
var _a, _b;
handleTransformChange == null ? void 0 : handleTransformChange.remove();
(_b = (_a = imgInsRef == null ? void 0 : imgInsRef.current) == null ? void 0 : _a.destroy) == null ? void 0 : _b.call(_a);
imgInsRef.current = null;
};
}, []);
(0, import_hooks.useUpdateEffect)(() => {
var _a;
if (imgInsRef.current) {
(_a = imgInsRef.current) == null ? void 0 : _a.refleshImage({
image: (0, import_func.generateImg)(dataSource[currentIndex].url)
});
}
}, [currentIndex]);
const handleIndexChange = (changeVal) => {
var _a, _b;
const _index = currentIndex + changeVal;
if (!((_a = dataSource == null ? void 0 : dataSource[_index]) == null ? void 0 : _a.url))
return;
(_b = imgInsRef.current) == null ? void 0 : _b.refleshImage({
image: (0, import_func.generateImg)(dataSource[_index].url)
});
setCurrentIndex(_index);
};
(0, import_react.useImperativeHandle)(ref, () => ({
imgInsRef,
handleIndexChange
}));
return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}__container`) }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}__label`) }, label), /* @__PURE__ */ import_react.default.createElement("div", { ref: imgContainerRef, className: (0, import_classnames.default)(`${componentName}__view`) }), !dataSource.length && /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}__empty`) }, /* @__PURE__ */ import_react.default.createElement(
"img",
{
src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==",
title: "暂无数据"
}
), /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_classnames.default)(`${componentName}__empty--text`) }, "暂无匹配数据")), !!dataSource.length && openRoll && /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}__scoll-module`) }, /* @__PURE__ */ import_react.default.createElement(
import_antd.Button,
{
type: "default",
className: (0, import_classnames.default)(`${componentName}__scoll-module__btn`),
disabled: currentIndex <= 0,
onClick: () => {
handleIndexChange(-1);
}
},
/* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { icon: "icon-qiehuanzuo", size: 40 })
), /* @__PURE__ */ import_react.default.createElement(
import_antd.Button,
{
type: "default",
className: (0, import_classnames.default)(`${componentName}__scoll-module__btn`),
disabled: currentIndex >= dataSource.length - 1,
onClick: () => {
handleIndexChange(1);
}
},
/* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { icon: "icon-qiehuanyou", size: 40 })
)), showScore && /* @__PURE__ */ import_react.default.createElement(import_CornerScore.default, { scoreTxt: dataSource[currentIndex].score }), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}__tool`) }, /* @__PURE__ */ import_react.default.createElement(
import_antd.Button,
{
type: "text",
onClick: () => {
var _a, _b;
(_b = (_a = imgInsRef == null ? void 0 : imgInsRef.current) == null ? void 0 : _a.scaleTo) == null ? void 0 : _b.call(_a, 0.1);
}
},
/* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { size: 16, icon: "icon-fangda" }),
/* @__PURE__ */ import_react.default.createElement("span", null, "放大")
), /* @__PURE__ */ import_react.default.createElement(
import_antd.Button,
{
type: "text",
onClick: () => {
var _a, _b;
(_b = (_a = imgInsRef == null ? void 0 : imgInsRef.current) == null ? void 0 : _a.scaleTo) == null ? void 0 : _b.call(_a, -0.1);
}
},
/* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { size: 16, icon: "icon-suoxiao" }),
/* @__PURE__ */ import_react.default.createElement("span", null, "缩小")
), /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_classnames.default)(`${componentName}__tool__scale`) }, Math.round(scale * 100) + "%"), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}__tool__line`) }), /* @__PURE__ */ import_react.default.createElement(
import_antd.Button,
{
type: "text",
onClick: () => {
var _a, _b;
(_b = (_a = imgInsRef == null ? void 0 : imgInsRef.current) == null ? void 0 : _a.reset) == null ? void 0 : _b.call(_a);
}
},
/* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { size: 16, icon: "icon-zhongzhi3" }),
/* @__PURE__ */ import_react.default.createElement("span", null, "重置")
)));
});
var CompareImage_default = CompareImage;

52
packages/meta/lib/CompareImage/components/CornerScore/index.js
View File

@ -1,52 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/CompareImage/components/CornerScore/index.tsx
var CornerScore_exports = {};
__export(CornerScore_exports, {
CornerScore: () => CornerScore,
default: () => CornerScore_default
});
module.exports = __toCommonJS(CornerScore_exports);
var import_react = __toESM(require("react"));
var import_classnames = __toESM(require("classnames"));
var import_index = require("./index.less");
var componentName = `zhst-image__CornerScore`;
var CornerScore = (props) => {
const { scoreTxt } = props;
return (0, import_react.useMemo)(
() => /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}`) }, /* @__PURE__ */ import_react.default.createElement("span", null, ~~(scoreTxt * 100), "%")),
[scoreTxt]
);
};
CornerScore.displayName = componentName;
var CornerScore_default = CornerScore;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
CornerScore
});

21
packages/meta/lib/CompareImage/components/CornerScore/index.less
View File

@ -1,21 +0,0 @@
.zhst-image__CornerScore {
position: absolute;
right: 0;
bottom: 0;
width: 56px;
height: 22px;
line-height: 22px;
text-align: right;
padding-right: 1px;
background-size: 100%;
background-image: url('data: image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAAAsCAYAAAC9rDzHAAAByUlEQVR4Xu2cO08DMRCEJy0tlNBCSwmU0EIJLbS0UEILLTX/Fo3kk1AUHrrsjB3dWIoUnZTdvfnOZ6+1mxXGGHsADgEcA9hvnyMAvJ7xiwKrjuoQ0HmDxu8ZMxToAZDQrgAE2gxg6z9xAjwFcAvgoCDumGgKuADeA7iI6vUKqAFyE/KU12U9uMmiGuBr4Ong0bIS4A2Aa234sa4CyFzuPfLqFVABfGg5nv4OFu5BAZAbl4+F62q7fQVAJul3tjtYuCMFwEcATNozDAooAL7ltMVATngS8+kLP54UMzAAjc9VABrFVrgKQIWqRpsBaBRb4SoAFaoabQagUWyFqwBUqGq0GYBGsRWuAlChqtFmABrFVrgKQIWqRpsBaBRb4SoAFaoabVYDZLU1K9EyTApUA2RzyrMp9rgRlBWylIIlFRkmBapnIIuZ0hJmgkc3lQBTzGQEN7mqApjNSwd4VTOQr8yXFDL1IbjtDOTMY/dR1r0+/LZaA1n7yb6/wOsEb+4rlMDYdZR0oSO4uZuYtEkPAO17CP9dA3nCwll3Mlj8iw/nL4ABN/gj8hPAgBsc3KY1kJuTs7Y5yV+B7BBA5nKXrSUsKcGOgJvC/ALSJBp5mBHCFAAAAABJRU5ErkJggg==');
z-index: 99;
&>span {
padding-right: 6px;
line-height: 22px;
font-size: 12px;
vertical-align: middle;
color: rgba(255, 255, 255, 100%);
}
}

BIN
packages/meta/lib/CompareImage/images/emptyImage.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.7 KiB

BIN
packages/meta/lib/CompareImage/images/percent_background.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 514 B

36
packages/meta/lib/CompareImage/index.js
View File

@ -1,36 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/CompareImage/index.tsx
var CompareImage_exports = {};
__export(CompareImage_exports, {
default: () => CompareImage_default
});
module.exports = __toCommonJS(CompareImage_exports);
var import_CompareImage = __toESM(require("./CompareImage"));
var CompareImage_default = import_CompareImage.default;

147
packages/meta/lib/CompareImage/index.less
View File

@ -1,147 +0,0 @@
.zhst-image__compater-view {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
&>div:first-child {
margin-right: 25px;
}
&>div:last-child {
margin-left: 25px;
}
&__container {
position: relative;
width: 345px;
height: 460px;
box-sizing: content-box;
border: 1px solid #f0f0f0;
}
&__view {
width: 345px;
height: 460px;
}
&__label {
position: absolute;
z-index: 99;
top: 0;
left: 0;
display: flex;
height: 34px;
align-items: center;
justify-content: center;
// width: 48px;
padding: 0 6px;
background: #09f;
color: #fff;
}
&__tool {
display: flex;
width: 345px;
height: 40px;
align-items: center;
justify-content: center;
background: #f9f9f9;
i,
span {
color: #333 !important;
}
i {
margin-right: 4px;
}
&>*:not(:last-child) {
margin-right: 20px;
}
&__scale {
display: inline-block;
width: 38px;
height: 16px;
// margin-left: 15px;
box-sizing: content-box;
border: 1px solid rgb(77 77 77 / 100%);
background: rgb(255 255 255 / 100%);
border-radius: 2px;
color: #4d4d4d;
cursor: default;
font-size: 12px;
line-height: 16px;
text-align: center;
}
&__line {
width: 1px;
height: 14px;
background: #e6e6e6;
}
}
&__empty {
position: absolute;
z-index: 9;
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f9f9f9;
transform: translateY(-100%);
&>img {
width: 140px;
height: 80px;
}
&--text {
color: #999;
font-size: 14px;
line-height: 22px;
}
}
&__scoll-module {
position: absolute;
top: 0%;
left: 0%;
display: flex;
width: 100%;
height: 100%;
align-items: flex-end;
justify-content: space-between;
pointer-events: none;
&__btn {
display: flex;
width: 50px;
height: 50px;
align-items: center;
justify-content: center;
margin: 6px;
border-radius: 50%;
opacity: 0.5;
pointer-events: all;
&>span {
display: flex;
align-items: center;
justify-content: center;
}
}
&__btn:hover {
background-color: #09f !important;
color: #fff !important;
}
}
}

105
packages/meta/lib/ImageEditor/cropper/constants.js
View File

@ -1,105 +0,0 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/ImageEditor/cropper/constants.ts
var constants_exports = {};
__export(constants_exports, {
ACTION_CROP: () => ACTION_CROP,
ACTION_EAST: () => ACTION_EAST,
ACTION_MOVE: () => ACTION_MOVE,
ACTION_NORTH: () => ACTION_NORTH,
ACTION_NORTH_EAST: () => ACTION_NORTH_EAST,
ACTION_NORTH_WEST: () => ACTION_NORTH_WEST,
ACTION_SOUTH: () => ACTION_SOUTH,
ACTION_SOUTH_EAST: () => ACTION_SOUTH_EAST,
ACTION_SOUTH_WEST: () => ACTION_SOUTH_WEST,
ACTION_WEST: () => ACTION_WEST,
CLASS_HIDDEN: () => CLASS_HIDDEN,
CLASS_MASK: () => CLASS_MASK,
DATA_ACTION: () => DATA_ACTION,
EVENT_CROP_CHANGE: () => EVENT_CROP_CHANGE,
EVENT_CROP_END: () => EVENT_CROP_END,
EVENT_CROP_START: () => EVENT_CROP_START,
EVENT_POINTER_DOWN: () => EVENT_POINTER_DOWN,
EVENT_POINTER_MOVE: () => EVENT_POINTER_MOVE,
EVENT_POINTER_UP: () => EVENT_POINTER_UP,
EVENT_TOUCH_END: () => EVENT_TOUCH_END,
EVENT_TOUCH_MOVE: () => EVENT_TOUCH_MOVE,
EVENT_TOUCH_START: () => EVENT_TOUCH_START,
EVENT_WHEEL: () => EVENT_WHEEL,
NAMESPACE: () => NAMESPACE,
REGEXP_ACTIONS: () => REGEXP_ACTIONS,
REGEXP_SPACES: () => REGEXP_SPACES
});
module.exports = __toCommonJS(constants_exports);
var import_utils = require("../utils");
var NAMESPACE = "zhst-cropper";
var ACTION_MOVE = "move";
var ACTION_CROP = "crop";
var ACTION_EAST = "e";
var ACTION_WEST = "w";
var ACTION_SOUTH = "s";
var ACTION_NORTH = "n";
var ACTION_NORTH_EAST = "ne";
var ACTION_NORTH_WEST = "nw";
var ACTION_SOUTH_EAST = "se";
var ACTION_SOUTH_WEST = "sw";
var CLASS_HIDDEN = `${NAMESPACE}-hidden`;
var CLASS_MASK = `${NAMESPACE}-mask`;
var DATA_ACTION = `${NAMESPACE}-action`;
var EVENT_TOUCH_START = import_utils.IS_TOUCH_DEVICE ? "touchstart" : "mousedown";
var EVENT_TOUCH_MOVE = import_utils.IS_TOUCH_DEVICE ? "touchmove" : "mousemove";
var EVENT_TOUCH_END = import_utils.IS_TOUCH_DEVICE ? "touchend touchcancel" : "mouseup";
var EVENT_POINTER_DOWN = import_utils.HAS_POINTER_EVENT ? "pointerdown" : EVENT_TOUCH_START;
var EVENT_POINTER_MOVE = import_utils.HAS_POINTER_EVENT ? "pointermove" : EVENT_TOUCH_MOVE;
var EVENT_POINTER_UP = import_utils.HAS_POINTER_EVENT ? "pointerup pointercancel" : EVENT_TOUCH_END;
var EVENT_WHEEL = "wheel";
var EVENT_CROP_CHANGE = "crop-change";
var EVENT_CROP_START = "crop-start";
var EVENT_CROP_END = "crop-end";
var REGEXP_SPACES = /\s\s*/;
var REGEXP_ACTIONS = /^e|w|s|n|se|sw|ne|nw|all|crop|move|zoom$/;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ACTION_CROP,
ACTION_EAST,
ACTION_MOVE,
ACTION_NORTH,
ACTION_NORTH_EAST,
ACTION_NORTH_WEST,
ACTION_SOUTH,
ACTION_SOUTH_EAST,
ACTION_SOUTH_WEST,
ACTION_WEST,
CLASS_HIDDEN,
CLASS_MASK,
DATA_ACTION,
EVENT_CROP_CHANGE,
EVENT_CROP_END,
EVENT_CROP_START,
EVENT_POINTER_DOWN,
EVENT_POINTER_MOVE,
EVENT_POINTER_UP,
EVENT_TOUCH_END,
EVENT_TOUCH_MOVE,
EVENT_TOUCH_START,
EVENT_WHEEL,
NAMESPACE,
REGEXP_ACTIONS,
REGEXP_SPACES
});

419
packages/meta/lib/ImageEditor/cropper/event.js
View File

@ -1,419 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/ImageEditor/cropper/event.ts
var event_exports = {};
__export(event_exports, {
default: () => event_default
});
module.exports = __toCommonJS(event_exports);
var import_class = require("rc-util/lib/Dom/class");
var import_func = require("@zhst/func");
var import_warn = __toESM(require("rc-util/lib/warn"));
var import_utils = require("../utils");
var import_constants = require("./constants");
var event_default = {
bind() {
const { container, element, eventHandleList = [], option } = this;
const handleCropStart = (0, import_func.addEventListenerWrapper)(
container,
import_constants.EVENT_POINTER_DOWN,
this.onCropStart.bind(this)
);
eventHandleList.push(handleCropStart);
const handleCropMove = (0, import_func.addEventListenerWrapper)(
element.ownerDocument,
import_constants.EVENT_POINTER_MOVE,
this.onCropMove.bind(this)
);
eventHandleList.push(handleCropMove);
import_constants.EVENT_POINTER_UP.trim().split(import_constants.REGEXP_SPACES).forEach((eventName) => {
const handleCropEnd = (0, import_func.addEventListenerWrapper)(
element.ownerDocument,
eventName,
this.onCropEnd.bind(this)
);
eventHandleList.push(handleCropEnd);
});
},
unbind() {
const { eventHandleList } = this;
for (let index = eventHandleList.length; index > 0; index--) {
const handler = eventHandleList.shift;
try {
handler.remove();
} catch (error) {
(0, import_warn.default)("CROP:REMOVE_EVENT_FAIL,", error);
}
}
},
onCropStart(event) {
const { buttons, button } = event;
if (this.disabled || // Handle mouse event and pointer event and ignore touch event
(event.type === "mousedown" || event.type === "pointerdown" && event.pointerType === "mouse") && // No primary button (Usually the left button)
((0, import_func.isNumber)(buttons) && buttons !== 1 || (0, import_func.isNumber)(button) && button !== 0 || // Open context menu
event.ctrlKey)) {
return;
}
const action = (0, import_utils.getData)(event.target, import_constants.DATA_ACTION);
this.pointer = (0, import_utils.getPointer)(event);
if (!import_constants.REGEXP_ACTIONS.test(action)) {
return;
}
event.preventDefault();
this.action = action;
this.cropping = false;
if (action === import_constants.ACTION_CROP) {
this.cropping = true;
const { showMask } = this.options;
if (showMask) {
(0, import_class.addClass)(this.dragBox, import_constants.CLASS_MASK);
}
}
const hasCrop = (0, import_func.get)(this, "cropBoxData.width", 0) !== 0 && (0, import_func.get)(this, "cropBoxData.height", 0) !== 0;
(0, import_utils.dispatchEvent)(this.element, import_constants.EVENT_CROP_START, hasCrop ? this == null ? void 0 : this.cropBoxData : null);
(0, import_utils.dispatchEvent)(this.element, import_constants.EVENT_CROP_CHANGE, hasCrop ? this == null ? void 0 : this.cropBoxData : null);
},
onCropMove(event) {
const { action } = this;
if (!action) {
return;
}
this.pointer = Object.assign({}, this.pointer, (0, import_utils.getPointer)(event, true));
event.preventDefault();
this.change(event);
},
onCropEnd(event) {
const { action } = this;
if (!action) {
return;
}
event.preventDefault();
this.action = null;
this.point = null;
if (this.cropping) {
this.cropping = false;
}
const hasCrop = (0, import_func.get)(this, "cropBoxData.width", 0) !== 0 && (0, import_func.get)(this, "cropBoxData.height", 0) !== 0;
(0, import_utils.dispatchEvent)(this.element, import_constants.EVENT_CROP_CHANGE, hasCrop ? this == null ? void 0 : this.cropBoxData : null);
hasCrop && (0, import_utils.dispatchEvent)(this.element, import_constants.EVENT_CROP_END, hasCrop ? this == null ? void 0 : this.cropBoxData : null);
},
change(event) {
const { options, containerData, cropBoxData = {}, pointer = {}, wrapper } = this;
let { action } = this;
let { left, top, width, height } = cropBoxData;
const right = left + width;
const bottom = top + height;
const minLeft = 0;
const minTop = 0;
const maxWidth = containerData.width;
const maxHeight = containerData.height;
let renderable = true;
let offset;
const range = {
x: pointer.endX - pointer.startX,
y: pointer.endY - pointer.startY
};
const check = (side) => {
switch (side) {
case import_constants.ACTION_EAST:
if (right + range.x > maxWidth) {
range.x = maxWidth - right;
}
break;
case import_constants.ACTION_WEST:
if (left + range.x < minLeft) {
range.x = minLeft - left;
}
break;
case import_constants.ACTION_NORTH:
if (top + range.y < minTop) {
range.y = minTop - top;
}
break;
case import_constants.ACTION_SOUTH:
if (bottom + range.y > maxHeight) {
range.y = maxHeight - bottom;
}
break;
default:
}
};
switch (action) {
case import_constants.ACTION_CROP:
if (!range.x || !range.y) {
renderable = false;
break;
}
offset = (0, import_utils.getOffset)(this.container);
left = pointer.startX - offset.left;
top = pointer.startY - offset.top;
width = cropBoxData.minWidth;
height = cropBoxData.minHeight;
if (!left) {
debugger;
}
if (range.x > 0) {
action = range.y > 0 ? import_constants.ACTION_SOUTH_EAST : import_constants.ACTION_NORTH_EAST;
} else if (range.x < 0) {
left -= width;
action = range.y > 0 ? import_constants.ACTION_SOUTH_WEST : import_constants.ACTION_NORTH_WEST;
}
if (range.y < 0) {
top -= height;
}
if (!this.cropped) {
(0, import_class.removeClass)(this.cropBox, import_constants.CLASS_HIDDEN);
this.cropped = true;
if (this.limited) {
this.limitCropBox(true, true);
}
}
break;
case import_constants.ACTION_MOVE:
left += range.x;
top += range.y;
break;
case import_constants.ACTION_EAST:
if (range.x >= 0 && right >= maxWidth) {
renderable = false;
break;
}
check(import_constants.ACTION_EAST);
width += range.x;
if (width < 0) {
action = import_constants.ACTION_WEST;
width = -width;
left -= width;
}
break;
case import_constants.ACTION_NORTH:
if (range.y <= 0 && top <= minTop) {
renderable = false;
break;
}
check(import_constants.ACTION_NORTH);
height -= range.y;
top += range.y;
if (height < 0) {
action = import_constants.ACTION_SOUTH;
height = -height;
top -= height;
}
break;
case import_constants.ACTION_WEST:
if (range.x <= 0 && left <= minLeft) {
renderable = false;
break;
}
check(import_constants.ACTION_WEST);
width -= range.x;
left += range.x;
if (width < 0) {
action = import_constants.ACTION_EAST;
width = -width;
left -= width;
}
break;
case import_constants.ACTION_SOUTH:
if (range.y >= 0 && bottom >= maxHeight) {
renderable = false;
break;
}
check(import_constants.ACTION_SOUTH);
height += range.y;
if (height < 0) {
action = import_constants.ACTION_NORTH;
height = -height;
top -= height;
}
break;
case import_constants.ACTION_NORTH_EAST:
check(import_constants.ACTION_NORTH);
check(import_constants.ACTION_EAST);
if (range.x >= 0) {
if (right < maxWidth) {
width += range.x;
} else if (range.y <= 0 && top <= minTop) {
renderable = false;
}
} else {
width += range.x;
}
if (range.y <= 0) {
if (top > minTop) {
height -= range.y;
top += range.y;
}
} else {
height -= range.y;
top += range.y;
}
if (width < 0 && height < 0) {
action = import_constants.ACTION_SOUTH_WEST;
height = -height;
width = -width;
top -= height;
left -= width;
} else if (width < 0) {
action = import_constants.ACTION_NORTH_WEST;
width = -width;
left -= width;
} else if (height < 0) {
action = import_constants.ACTION_SOUTH_EAST;
height = -height;
top -= height;
}
break;
case import_constants.ACTION_NORTH_WEST:
check(import_constants.ACTION_NORTH);
check(import_constants.ACTION_WEST);
if (range.x <= 0) {
if (left > minLeft) {
width -= range.x;
left += range.x;
} else if (range.y <= 0 && top <= minTop) {
renderable = false;
}
} else {
width -= range.x;
left += range.x;
}
if (range.y <= 0) {
if (top > minTop) {
height -= range.y;
top += range.y;
}
} else {
height -= range.y;
top += range.y;
}
if (width < 0 && height < 0) {
action = import_constants.ACTION_SOUTH_EAST;
height = -height;
width = -width;
top -= height;
left -= width;
} else if (width < 0) {
action = import_constants.ACTION_NORTH_EAST;
width = -width;
left -= width;
} else if (height < 0) {
action = import_constants.ACTION_SOUTH_WEST;
height = -height;
top -= height;
}
break;
case import_constants.ACTION_SOUTH_WEST:
check(import_constants.ACTION_SOUTH);
check(import_constants.ACTION_WEST);
if (range.x <= 0) {
if (left > minLeft) {
width -= range.x;
left += range.x;
} else if (range.y >= 0 && bottom >= maxHeight) {
renderable = false;
}
} else {
width -= range.x;
left += range.x;
}
if (range.y >= 0) {
if (bottom < maxHeight) {
height += range.y;
}
} else {
height += range.y;
}
if (width < 0 && height < 0) {
action = import_constants.ACTION_NORTH_EAST;
height = -height;
width = -width;
top -= height;
left -= width;
} else if (width < 0) {
action = import_constants.ACTION_SOUTH_EAST;
width = -width;
left -= width;
} else if (height < 0) {
action = import_constants.ACTION_NORTH_WEST;
height = -height;
top -= height;
}
break;
case import_constants.ACTION_SOUTH_EAST:
check(import_constants.ACTION_SOUTH);
check(import_constants.ACTION_EAST);
if (range.x >= 0) {
if (right < maxWidth) {
width += range.x;
} else if (range.y >= 0 && bottom >= maxHeight) {
renderable = false;
}
} else {
width += range.x;
}
if (range.y >= 0) {
if (bottom < maxHeight) {
height += range.y;
}
} else {
height += range.y;
}
if (width < 0 && height < 0) {
action = import_constants.ACTION_NORTH_WEST;
height = -height;
width = -width;
top -= height;
left -= width;
} else if (width < 0) {
action = import_constants.ACTION_SOUTH_WEST;
width = -width;
left -= width;
} else if (height < 0) {
action = import_constants.ACTION_NORTH_EAST;
height = -height;
top -= height;
}
break;
default:
break;
}
if (renderable) {
cropBoxData.width = width;
cropBoxData.height = height;
cropBoxData.left = left;
cropBoxData.top = top;
this.action = action;
this.cropBoxData = cropBoxData;
this.renderCropBox();
}
this.pointer.startX = this.pointer.endX;
this.pointer.startY = this.pointer.endY;
}
};

136
packages/meta/lib/ImageEditor/cropper/index.js
View File

@ -1,136 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var __decorateClass = (decorators, target, key, kind) => {
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
for (var i = decorators.length - 1, decorator; i >= 0; i--)
if (decorator = decorators[i])
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
if (kind && result)
__defProp(target, key, result);
return result;
};
// src/ImageEditor/cropper/index.ts
var cropper_exports = {};
__export(cropper_exports, {
default: () => cropper_default
});
module.exports = __toCommonJS(cropper_exports);
var import_func = require("@zhst/func");
var import_class = require("rc-util/lib/Dom/class");
var import_utils = require("../utils");
var import_constants = require("./constants");
var import_template = __toESM(require("./template"));
var import_render = __toESM(require("./render"));
var import_event = __toESM(require("./event"));
var import_viewerBridge = __toESM(require("./viewerBridge"));
var import_preview = __toESM(require("./preview"));
var import_index_module = require("./index.module.scss");
var Cropper = class {
constructor(element, options) {
/* 所有事件 */
// eventHandleList: Array<any>;
this.eventHandleList = [];
this.element = element;
this.options = Object.assign({}, (0, import_func.isPlainObject)(options) && options);
this.limited = (0, import_func.isNil)(this.options.cropBoxLimited) ? false : true;
this.cropped = false;
this.init();
}
async init() {
this.build();
this.bind();
this.render();
this.initPreview();
if (this.options.viewer) {
this.initBridge();
}
this.initDefaultCropBox();
}
initDefaultCropBox() {
const { initialCropBoxData } = this.options || {};
if (initialCropBoxData) {
this.cropped = true;
const { showMask } = this.options;
showMask && (0, import_class.addClass)(this.dragBox, import_constants.CLASS_MASK);
(0, import_class.removeClass)(this.cropBox, import_constants.CLASS_HIDDEN);
this.cropBoxData = { ...this.cropBoxData, ...initialCropBoxData };
this.renderCropBox();
const hasCrop = (0, import_func.get)(this, "cropBoxData.width", 0) !== 0 && (0, import_func.get)(this, "cropBoxData.height", 0) !== 0;
(0, import_utils.dispatchEvent)(this.element, import_constants.EVENT_CROP_CHANGE, hasCrop ? this == null ? void 0 : this.cropBoxData : null);
hasCrop && (0, import_utils.dispatchEvent)(this.element, import_constants.EVENT_CROP_END, hasCrop ? this == null ? void 0 : this.cropBoxData : null);
}
}
load() {
return new Promise((resolve, reject) => {
const { image: propImage } = this.options;
if ((0, import_func.isString)(propImage)) {
const image = new Image();
const imgUrl = propImage;
image.crossOrigin = "anonymous";
image.src = imgUrl;
image.onload = () => {
this.image = image;
resolve(image);
};
image.onerror = (err) => {
reject(err);
};
} else {
this.image = propImage;
resolve(propImage);
}
});
}
build() {
const template = document.createElement("div");
template.innerHTML = import_template.default;
const container = template.querySelector(`.${import_constants.NAMESPACE}-container`);
const dragBox = container.querySelector(`.${import_constants.NAMESPACE}-drag-box`);
const cropBox = container.querySelector(`.${import_constants.NAMESPACE}-crop-box`);
const viewBox = container.querySelector(`.${import_constants.NAMESPACE}-view-box`);
this.element.appendChild(container);
this.container = container;
this.dragBox = dragBox;
this.cropBox = cropBox;
this.viewBox = viewBox;
(0, import_class.addClass)(cropBox, import_constants.CLASS_HIDDEN);
}
destroy() {
var _a, _b;
if (this.options.viewer) {
this.clearBridge();
}
this.unbind();
(_b = (_a = this.element) == null ? void 0 : _a.removeChild) == null ? void 0 : _b.call(_a, this.container);
}
};
Cropper = __decorateClass([
(0, import_utils.Mixin)(import_render.default, import_event.default, import_viewerBridge.default, import_preview.default)
], Cropper);
var cropper_default = Cropper;

194
packages/meta/lib/ImageEditor/cropper/index.module.scss
View File

@ -1,194 +0,0 @@
$prefix: zhst;
:global {
// .zhst-cropper-container {
// width: 100px;
// }
.zhst-cropper {
&-container {
position: relative;
direction: ltr;
font-size: 0;
line-height: 0;
touch-action: none;
user-select: none;
}
&-container,
&-wrap-box,
&-canvas,
&-drag-box,
&-crop-box,
&-face,
&-modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
&-drag-box {
cursor: crosshair;
}
&-view-box {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
outline: 1px solid #39f;
outline-color: rgb(51 153 255 / 75%);
}
//mask
&-mask {
background-color: rgb(0 0 0 / 50%);
}
//拖拽
&-face {
background-color: #fff;
cursor: move;
opacity: 0;
}
//点
&-point {
position: absolute;
width: 6px;
height: 6px;
// background: #fff;
background-color: #39f;
border-radius: 50%;
// border: 0.2px solid #000;
// 北n
// 东w 西e
// 南s
&.point-nw {
top: -3px;
left: -3px;
cursor: nwse-resize;
}
&.point-n {
top: -3px;
left: 50%;
cursor: ns-resize;
transform: translateX(-50%);
}
&.point-ne {
top: -3px;
right: -3px;
cursor: nesw-resize;
}
&.point-w {
top: 50%;
left: -3px;
cursor: ew-resize;
transform: translateY(-50%);
}
&.point-e {
top: 50%;
right: -3px;
cursor: ew-resize;
transform: translateY(-50%);
}
&.point-sw {
bottom: -3px;
left: -3px;
cursor: nesw-resize;
}
&.point-s {
bottom: -3px;
left: 50%;
cursor: ns-resize;
transform: translateX(-50%);
}
&.point-se {
right: -3px;
bottom: -3px;
cursor: nwse-resize;
}
}
//线
&-line {
// opacity: 0.1;
position: absolute;
display: block;
width: 100%;
height: 100%;
background-color: #39f;
&.line-e {
top: 0;
right: -1px;
width: 2px;
cursor: ew-resize;
}
&.line-n {
top: -1px;
left: 0;
height: 2px;
cursor: ns-resize;
}
&.line-w {
top: 0;
left: -1px;
width: 2px;
cursor: ew-resize;
}
&.line-s {
bottom: -1px;
left: 0;
height: 2px;
cursor: ns-resize;
}
}
//辅助class
&-invisible {
opacity: 0;
}
&-hide {
position: absolute;
display: block;
width: 0;
height: 0;
}
&-hidden {
display: none !important;
}
&-move {
cursor: move;
}
&-crop {
cursor: crosshair;
}
&-disabled &-drag-box,
&-disabled &-face,
&-disabled &-line,
&-disabled &-point {
cursor: not-allowed;
}
}
}

75
packages/meta/lib/ImageEditor/cropper/preview.js
View File

@ -1,75 +0,0 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/ImageEditor/cropper/preview.ts
var preview_exports = {};
__export(preview_exports, {
default: () => preview_default
});
module.exports = __toCommonJS(preview_exports);
var import_css = require("rc-util/lib/Dom/css");
var import_utils = require("../utils");
var preview_default = {
//var
previewBox: null,
//method
initPreview() {
const { showMask, img, viewer } = this.options;
if (!showMask)
return;
if (viewer) {
const canvas = document.createElement("canvas");
canvas.width = this.containerData.width;
canvas.height = this.containerData.height;
this.viewBox.appendChild(canvas);
this.previewBox = canvas;
} else {
const image = document.createElement("img");
image.src = img;
this.viewBox.appendChild(image);
this.previewBox = image;
}
},
renderPreview() {
const { showMask, img, viewer } = this.options;
if (!showMask)
return;
const { containerData, cropBoxData } = this;
const { width, height } = containerData;
const left = cropBoxData.left;
const top = cropBoxData.top;
if (!this.cropped || this.disabled) {
return;
}
(0, import_css.set)(
this.previewBox,
Object.assign(
{
width,
height
},
(0, import_utils.getTransforms)(
Object.assign({
translateX: -left,
translateY: -top
})
)
)
);
}
};

164
packages/meta/lib/ImageEditor/cropper/render.js
View File

@ -1,164 +0,0 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/ImageEditor/cropper/render.ts
var render_exports = {};
__export(render_exports, {
default: () => render_default
});
module.exports = __toCommonJS(render_exports);
var import_css = require("rc-util/lib/Dom/css");
var import_class = require("rc-util/lib/Dom/class");
var import_utils = require("../utils");
var import_constants = require("./constants");
var render_default = {
cropBoxData: null,
viewBoxImage: null,
render() {
this.initContainer();
this.initCropBox();
this.limitCropBox(true, true);
},
initContainer() {
const { element, container } = this;
const containerData = {
width: (0, import_css.getOuterWidth)(element),
height: (0, import_css.getOuterHeight)(element)
};
this.containerData = containerData;
(0, import_css.set)(container, containerData);
},
initCropBox() {
const { containerData, options } = this;
const cropBoxData = {
// width: containerData.width,
// height: containerData.height,
width: 0,
height: 0,
left: 0,
top: 0,
minWidth: 0,
minHeight: 0,
maxWidth: containerData.width,
maxHeight: containerData.height,
minLeft: 0,
maxLeft: containerData.width,
minTop: 0,
maxTop: containerData.height,
oldLeft: 0,
oldTop: 0
};
this.cropBoxData = cropBoxData;
this.limitCropBox(true, true);
},
renderCropBox() {
const { cropBoxData } = this;
if (cropBoxData.width > cropBoxData.maxWidth || cropBoxData.width < cropBoxData.minWidth) {
cropBoxData.left = cropBoxData.oldLeft;
}
if (cropBoxData.height > cropBoxData.maxHeight || cropBoxData.height < cropBoxData.minHeight) {
cropBoxData.top = cropBoxData.oldTop;
}
cropBoxData.width = Math.min(
Math.max(cropBoxData.width, cropBoxData.minWidth),
cropBoxData.maxWidth
);
cropBoxData.height = Math.min(
Math.max(cropBoxData.height, cropBoxData.minHeight),
cropBoxData.maxHeight
);
this.limitCropBox(false, true);
cropBoxData.left = Math.min(
Math.max(cropBoxData.left, cropBoxData.minLeft),
cropBoxData.maxLeft
);
cropBoxData.top = Math.min(Math.max(cropBoxData.top, cropBoxData.minTop), cropBoxData.maxTop);
cropBoxData.oldLeft = cropBoxData.left;
cropBoxData.oldTop = cropBoxData.top;
(0, import_css.set)(
this.cropBox,
Object.assign(
{
width: cropBoxData.width,
height: cropBoxData.height
},
(0, import_utils.getTransforms)({
translateX: cropBoxData.left,
translateY: cropBoxData.top
})
)
);
if (this.options.showMask) {
this.renderPreview();
}
},
clearCropBox() {
if (this.cropped && !this.disabled) {
Object.assign(this.cropBoxData, {
left: 0,
top: 0,
width: 0,
height: 0
});
this.cropped = false;
this.renderCropBox();
(0, import_class.removeClass)(this.dragBox, import_constants.CLASS_MASK);
(0, import_class.addClass)(this.cropBox, import_constants.CLASS_HIDDEN);
}
return this;
},
limitCropBox(sizeLimited, positionLimited) {
const { options, containerData, cropBoxData, limited } = this;
const { cropBoxLimited = {} } = options;
if (sizeLimited) {
let minCropBoxWidth = Number(options.minCropBoxWidth) || 0;
let minCropBoxHeight = Number(options.minCropBoxHeight) || 0;
const maxCropBoxWidth = limited ? Math.min(
containerData.width,
cropBoxLimited.width,
cropBoxLimited.width + cropBoxLimited.left,
containerData.width - cropBoxLimited.left
) : containerData.width;
const maxCropBoxHeight = limited ? Math.min(
containerData.height,
cropBoxLimited.height,
cropBoxLimited.height + cropBoxLimited.top,
containerData.height - cropBoxLimited.top
) : containerData.height;
minCropBoxWidth = Math.min(minCropBoxWidth, containerData.width);
minCropBoxHeight = Math.min(minCropBoxHeight, containerData.height);
cropBoxData.minWidth = Math.min(minCropBoxWidth, maxCropBoxWidth);
cropBoxData.minHeight = Math.min(minCropBoxHeight, maxCropBoxHeight);
cropBoxData.maxWidth = maxCropBoxWidth;
cropBoxData.maxHeight = maxCropBoxHeight;
}
if (positionLimited) {
if (limited) {
cropBoxData.minLeft = Math.max(0, cropBoxLimited.left);
cropBoxData.minTop = Math.max(0, cropBoxLimited.top);
cropBoxData.maxLeft = Math.min(containerData.width, cropBoxLimited.left + cropBoxLimited.width) - cropBoxData.width;
cropBoxData.maxTop = Math.min(containerData.height, cropBoxLimited.top + cropBoxLimited.height) - cropBoxData.height;
} else {
cropBoxData.minLeft = 0;
cropBoxData.minTop = 0;
cropBoxData.maxLeft = containerData.width - cropBoxData.width;
cropBoxData.maxTop = containerData.height - cropBoxData.height;
}
}
}
};

46
packages/meta/lib/ImageEditor/cropper/template.js
View File

@ -1,46 +0,0 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/ImageEditor/cropper/template.js
var template_exports = {};
__export(template_exports, {
default: () => template_default
});
module.exports = __toCommonJS(template_exports);
var import_constants = require("./constants");
var template_default = `
<div class="${import_constants.NAMESPACE}-container" touch-action="none">
<div class="${import_constants.NAMESPACE}-drag-box" data-${import_constants.NAMESPACE}-action="crop"></div>
<div class="${import_constants.NAMESPACE}-crop-box" >
<span class="${import_constants.NAMESPACE}-view-box"></span>
<span class="${import_constants.NAMESPACE}-face" data-${import_constants.NAMESPACE}-action="move"> ></span>
<span class="${import_constants.NAMESPACE}-line line-e" data-${import_constants.NAMESPACE}-action="e"></span>
<span class="${import_constants.NAMESPACE}-line line-n" data-${import_constants.NAMESPACE}-action="n"></span>
<span class="${import_constants.NAMESPACE}-line line-w" data-${import_constants.NAMESPACE}-action="w"></span>
<span class="${import_constants.NAMESPACE}-line line-s" data-${import_constants.NAMESPACE}-action="s"></span>
<span class="${import_constants.NAMESPACE}-point point-e" data-${import_constants.NAMESPACE}-action="e"></span>
<span class="${import_constants.NAMESPACE}-point point-n" data-${import_constants.NAMESPACE}-action="n"></span>
<span class="${import_constants.NAMESPACE}-point point-w" data-${import_constants.NAMESPACE}-action="w"></span>
<span class="${import_constants.NAMESPACE}-point point-s" data-${import_constants.NAMESPACE}-action="s"></span>
<span class="${import_constants.NAMESPACE}-point point-ne" data-${import_constants.NAMESPACE}-action="ne"></span>
<span class="${import_constants.NAMESPACE}-point point-nw" data-${import_constants.NAMESPACE}-action="nw"></span>
<span class="${import_constants.NAMESPACE}-point point-sw" data-${import_constants.NAMESPACE}-action="sw"></span>
<span class="${import_constants.NAMESPACE}-point point-se" data-${import_constants.NAMESPACE}-action="se"></span>
</div>
</div>
`;

93
packages/meta/lib/ImageEditor/cropper/viewerBridge.js
View File

@ -1,93 +0,0 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/ImageEditor/cropper/viewerBridge.ts
var viewerBridge_exports = {};
__export(viewerBridge_exports, {
default: () => viewerBridge_default
});
module.exports = __toCommonJS(viewerBridge_exports);
var import_func = require("@zhst/func");
var import_constants = require("./constants");
var import_constants2 = require("../viewer/constants");
var viewerBridge_default = {
initBridge() {
const { container, element, eventHandleList = [], option } = this;
if (this.options.viewer) {
const viewer = this.options.viewer;
const handleWhele = (0, import_func.addEventListenerWrapper)(container, import_constants.EVENT_WHEEL, this.onWheel.bind(this));
eventHandleList.push(handleWhele);
this.onTransformChange(viewer);
this.limited = true;
const handleTransformChange = (0, import_func.addEventListenerWrapper)(
viewer.element,
import_constants2.EVENT_VIEWER_TRANSFORM_CHANGE,
(event) => {
this.onTransformChange(viewer);
}
);
eventHandleList.push(handleTransformChange);
}
},
onTransformChange(viewer) {
if (!viewer.image)
return;
const { width: imgWidth, height: imgHeight } = viewer.image;
const { rotate = 0 } = viewer.targetTransform || {};
let imgLeftTop = { x: 0, y: 0 };
let imgRightBottom = { x: imgWidth, y: imgHeight };
if (rotate % 180 !== 0) {
const diffx = (imgWidth - imgHeight) / 2;
const diffy = (imgHeight - imgWidth) / 2;
imgLeftTop = {
x: imgLeftTop.x + diffx,
y: imgLeftTop.y + diffy
};
imgRightBottom = {
x: imgRightBottom.x - diffx,
y: imgRightBottom.y - diffy
};
}
const { x: x1, y: y1 } = viewer.originAxisToCanvasAxis({ x: imgLeftTop.x, y: imgLeftTop.y });
const { x: x2, y: y2 } = viewer.originAxisToCanvasAxis({
x: imgRightBottom.x,
y: imgRightBottom.y
});
const limitCropBox = {
left: x1,
top: y1,
width: x2 - x1,
height: y2 - y1
};
this.options.cropBoxLimited = limitCropBox;
this.limitCropBox(true, true);
if (this.previewBox) {
const canvas = this.previewBox;
const ctx = canvas.getContext("2d");
const viewerRender = viewer.renderCanvas.bind(viewer);
viewerRender(ctx);
}
},
onWheel(event) {
const viewer = this.options.viewer;
const onViewerWheelHandler = viewer.onWheel.bind(viewer);
onViewerWheelHandler(event, this.cropped ? this.cropBoxData : null);
},
clearBridge() {
}
};

60
packages/meta/lib/ImageEditor/index.js
View File

@ -1,60 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/ImageEditor/index.ts
var ImageEditor_exports = {};
__export(ImageEditor_exports, {
Cropper: () => import_cropper.default,
EVENT_CROP_CHANGE: () => import_constants.EVENT_CROP_CHANGE,
EVENT_CROP_END: () => import_constants.EVENT_CROP_END,
EVENT_CROP_START: () => import_constants.EVENT_CROP_START,
EVENT_EYE_DONE: () => import_constants2.EVENT_EYE_DONE,
EVENT_SHAPE_SELECT: () => import_constants2.EVENT_SHAPE_SELECT,
EVENT_VIEWER_ERROR: () => import_constants2.EVENT_VIEWER_ERROR,
EVENT_VIEWER_READY: () => import_constants2.EVENT_VIEWER_READY,
EVENT_VIEWER_TRANSFORM_CHANGE: () => import_constants2.EVENT_VIEWER_TRANSFORM_CHANGE,
Viewer: () => import_viewer.default
});
module.exports = __toCommonJS(ImageEditor_exports);
var import_cropper = __toESM(require("./cropper"));
var import_viewer = __toESM(require("./viewer"));
var import_constants = require("./cropper/constants");
var import_constants2 = require("./viewer/constants");
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Cropper,
EVENT_CROP_CHANGE,
EVENT_CROP_END,
EVENT_CROP_START,
EVENT_EYE_DONE,
EVENT_SHAPE_SELECT,
EVENT_VIEWER_ERROR,
EVENT_VIEWER_READY,
EVENT_VIEWER_TRANSFORM_CHANGE,
Viewer
});

3
packages/meta/lib/ImageEditor/interface.d.ts vendored
View File

@ -1,3 +0,0 @@
//@ts-nocheck
export { Option as CropOption } from './cropper';
export { Option as ViewOption } from './viewer';

149
packages/meta/lib/ImageEditor/utils.js
View File

@ -1,149 +0,0 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/ImageEditor/utils.ts
var utils_exports = {};
__export(utils_exports, {
HAS_POINTER_EVENT: () => HAS_POINTER_EVENT,
IS_BROWSER: () => IS_BROWSER,
IS_TOUCH_DEVICE: () => IS_TOUCH_DEVICE,
Mixin: () => Mixin,
WINDOW: () => WINDOW,
dispatchEvent: () => dispatchEvent,
getData: () => getData,
getOffset: () => getOffset,
getPointer: () => getPointer,
getTransforms: () => getTransforms,
toParamCase: () => toParamCase,
toggleClass: () => toggleClass
});
module.exports = __toCommonJS(utils_exports);
var import_func = require("@zhst/func");
var import_class = require("rc-util/lib/Dom/class");
var IS_BROWSER = typeof window !== "undefined" && typeof window.document !== "undefined";
var WINDOW = IS_BROWSER ? window : {};
var IS_TOUCH_DEVICE = IS_BROWSER && WINDOW.document.documentElement ? "ontouchstart" in WINDOW.document.documentElement : false;
var HAS_POINTER_EVENT = IS_BROWSER ? "PointerEvent" in WINDOW : false;
function toHump(name) {
return name.replace(/\-(\w)/g, function(all, letter) {
return letter.toUpperCase();
});
}
var REGEXP_CAMEL_CASE = /([a-z\d])([A-Z])/g;
function toParamCase(value) {
return value.replace(REGEXP_CAMEL_CASE, "$1-$2").toLowerCase();
}
function getData(element, name) {
if ((0, import_func.isObject)(element[name])) {
return element[name];
}
if (element.dataset) {
return element.dataset[toHump(name)];
}
return element.getAttribute(`data-${toParamCase(name)}`);
}
function toggleClass(node, className) {
if ((0, import_class.hasClass)(node, className)) {
(0, import_class.addClass)(node, className);
} else {
(0, import_class.removeClass)(node, className);
}
}
function getPointer({ pageX, pageY }, endOnly) {
const end = {
endX: pageX,
endY: pageY
};
return endOnly ? end : {
startX: pageX,
startY: pageY,
...end
};
}
function getOffset(element) {
const box = element.getBoundingClientRect();
return {
left: box.left + (window.pageXOffset - document.documentElement.clientLeft),
top: box.top + (window.pageYOffset - document.documentElement.clientTop)
};
}
function getTransforms({
rotate,
scaleX,
scaleY,
translateX,
translateY
}) {
const values = [];
if ((0, import_func.isNumber)(translateX) && translateX !== 0) {
values.push(`translateX(${translateX}px)`);
}
if ((0, import_func.isNumber)(translateY) && translateY !== 0) {
values.push(`translateY(${translateY}px)`);
}
if ((0, import_func.isNumber)(rotate) && rotate !== 0) {
values.push(`rotate(${rotate}deg)`);
}
if ((0, import_func.isNumber)(scaleX) && scaleX !== 1) {
values.push(`scaleX(${scaleX})`);
}
if ((0, import_func.isNumber)(scaleY) && scaleY !== 1) {
values.push(`scaleY(${scaleY})`);
}
const transform = values.length ? values.join(" ") : "none";
return {
WebkitTransform: transform,
msTransform: transform,
transform
};
}
function Mixin(...srcs) {
return (target) => {
(0, import_func.assign)(target.prototype, ...srcs);
return target;
};
}
function dispatchEvent(element, type, data) {
let event;
if ((0, import_func.isFunction)(Event) && (0, import_func.isFunction)(CustomEvent)) {
event = new CustomEvent(type, {
detail: data,
bubbles: true,
cancelable: true
});
} else {
event = document.createEvent("CustomEvent");
event.initCustomEvent(type, true, true, data);
}
return element.dispatchEvent(event);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
HAS_POINTER_EVENT,
IS_BROWSER,
IS_TOUCH_DEVICE,
Mixin,
WINDOW,
dispatchEvent,
getData,
getOffset,
getPointer,
getTransforms,
toParamCase,
toggleClass
});

105
packages/meta/lib/ImageEditor/viewer/constants.js
View File

@ -1,105 +0,0 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/ImageEditor/viewer/constants.ts
var constants_exports = {};
__export(constants_exports, {
ACTION_DRAG: () => ACTION_DRAG,
AXIS_TYPE_CANVAS: () => AXIS_TYPE_CANVAS,
AXIS_TYPE_IMAGE: () => AXIS_TYPE_IMAGE,
AXIS_TYPE_ORIGIN: () => AXIS_TYPE_ORIGIN,
CLASS_CANVAS: () => CLASS_CANVAS,
CLASS_MOVE: () => CLASS_MOVE,
EVENT_CLICK: () => EVENT_CLICK,
EVENT_ENTER: () => EVENT_ENTER,
EVENT_EYE_DONE: () => EVENT_EYE_DONE,
EVENT_LEAVEL: () => EVENT_LEAVEL,
EVENT_POINTER_DOWN: () => EVENT_POINTER_DOWN,
EVENT_POINTER_MOVE: () => EVENT_POINTER_MOVE,
EVENT_POINTER_UP: () => EVENT_POINTER_UP,
EVENT_SHAPE_SELECT: () => EVENT_SHAPE_SELECT,
EVENT_TOUCH_END: () => EVENT_TOUCH_END,
EVENT_TOUCH_MOVE: () => EVENT_TOUCH_MOVE,
EVENT_TOUCH_START: () => EVENT_TOUCH_START,
EVENT_VIEWER_ERROR: () => EVENT_VIEWER_ERROR,
EVENT_VIEWER_READY: () => EVENT_VIEWER_READY,
EVENT_VIEWER_TRANSFORM_CHANGE: () => EVENT_VIEWER_TRANSFORM_CHANGE,
EVENT_WHEEL: () => EVENT_WHEEL,
NAMESPACE: () => NAMESPACE,
REGEXP_SPACES: () => REGEXP_SPACES,
SHAPE_TYPE_CIRCLE: () => SHAPE_TYPE_CIRCLE,
SHAPE_TYPE_CUSTOM: () => SHAPE_TYPE_CUSTOM,
SHAPE_TYPE_RECT: () => SHAPE_TYPE_RECT
});
module.exports = __toCommonJS(constants_exports);
var import_utils = require("../utils");
var NAMESPACE = "zhst-viewer";
var ACTION_DRAG = "drag";
var CLASS_CANVAS = `${NAMESPACE}-canvas`;
var CLASS_MOVE = `${NAMESPACE}-move`;
var EVENT_CLICK = "click";
var EVENT_TOUCH_START = import_utils.IS_TOUCH_DEVICE ? "touchstart" : "mousedown";
var EVENT_TOUCH_MOVE = import_utils.IS_TOUCH_DEVICE ? "touchmove" : "mousemove";
var EVENT_TOUCH_END = import_utils.IS_TOUCH_DEVICE ? "touchend touchcancel" : "mouseup";
var EVENT_POINTER_DOWN = import_utils.HAS_POINTER_EVENT ? "pointerdown" : EVENT_TOUCH_START;
var EVENT_POINTER_MOVE = import_utils.HAS_POINTER_EVENT ? "pointermove" : EVENT_TOUCH_MOVE;
var EVENT_POINTER_UP = import_utils.HAS_POINTER_EVENT ? "pointerup pointercancel" : EVENT_TOUCH_END;
var EVENT_WHEEL = "wheel";
var EVENT_LEAVEL = "mouseleave";
var EVENT_ENTER = "mouseenter";
var EVENT_VIEWER_TRANSFORM_CHANGE = "viewer-transform-change";
var EVENT_VIEWER_READY = "viewer-ready";
var EVENT_VIEWER_ERROR = "viewer-error";
var EVENT_SHAPE_SELECT = "shape-select";
var EVENT_EYE_DONE = "eye-done";
var REGEXP_SPACES = /\s\s*/;
var AXIS_TYPE_ORIGIN = 1;
var AXIS_TYPE_CANVAS = 2;
var AXIS_TYPE_IMAGE = 3;
var SHAPE_TYPE_CUSTOM = 1;
var SHAPE_TYPE_RECT = 2;
var SHAPE_TYPE_CIRCLE = 3;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ACTION_DRAG,
AXIS_TYPE_CANVAS,
AXIS_TYPE_IMAGE,
AXIS_TYPE_ORIGIN,
CLASS_CANVAS,
CLASS_MOVE,
EVENT_CLICK,
EVENT_ENTER,
EVENT_EYE_DONE,
EVENT_LEAVEL,
EVENT_POINTER_DOWN,
EVENT_POINTER_MOVE,
EVENT_POINTER_UP,
EVENT_SHAPE_SELECT,
EVENT_TOUCH_END,
EVENT_TOUCH_MOVE,
EVENT_TOUCH_START,
EVENT_VIEWER_ERROR,
EVENT_VIEWER_READY,
EVENT_VIEWER_TRANSFORM_CHANGE,
EVENT_WHEEL,
NAMESPACE,
REGEXP_SPACES,
SHAPE_TYPE_CIRCLE,
SHAPE_TYPE_CUSTOM,
SHAPE_TYPE_RECT
});

202
packages/meta/lib/ImageEditor/viewer/event.js
View File

@ -1,202 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/ImageEditor/viewer/event.ts
var event_exports = {};
__export(event_exports, {
default: () => event_default
});
module.exports = __toCommonJS(event_exports);
var import_func = require("@zhst/func");
var import_class = require("rc-util/lib/Dom/class.js");
var import_guid = __toESM(require("rc-util/lib/guid"));
var import_warn = __toESM(require("rc-util/lib/warn"));
var import_utils = require("../utils");
var import_constants = require("./constants");
var event_default = {
//store
disabled: false,
eventHandleList: [],
wheeling: false,
pointer: null,
action: null,
//method
bind() {
const { canvas, element, eventHandleList = [], options } = this;
const scaleAble = (0, import_func.get)(options, "scaleAble", true);
if (scaleAble) {
const handleWhele = (0, import_func.addEventListenerWrapper)(canvas, import_constants.EVENT_WHEEL, this.onWheel.bind(this));
eventHandleList.push(handleWhele);
}
const dragAble = (0, import_func.get)(options, "dragAble", true);
if (dragAble) {
const handleDragStart = (0, import_func.addEventListenerWrapper)(
canvas,
import_constants.EVENT_POINTER_DOWN,
this.onDragStart.bind(this)
);
eventHandleList.push(import_func.addEventListenerWrapper);
const handleDragMove = (0, import_func.addEventListenerWrapper)(
element.ownerDocument,
import_constants.EVENT_POINTER_MOVE,
this.onDragMove.bind(this)
);
eventHandleList.push(handleDragMove);
import_constants.EVENT_POINTER_UP.trim().split(import_constants.REGEXP_SPACES).forEach((eventName) => {
const handleDragEnd = (0, import_func.addEventListenerWrapper)(
element.ownerDocument,
eventName,
this.onDragEnd.bind(this)
);
eventHandleList.push(handleDragEnd);
});
}
const handleClick = (0, import_func.addEventListenerWrapper)(canvas, import_constants.EVENT_CLICK, this.onClick.bind(this));
eventHandleList.push(handleClick);
},
unbind() {
const { eventHandleList } = this;
for (let index = eventHandleList.length; index > 0; index--) {
const handler = eventHandleList.shift();
try {
handler.remove();
} catch (error) {
(0, import_warn.default)("VIEWER:REMOVE_EVENT_FAIL,", error);
}
}
},
/* 图片事件 */
onWheel(event, cropBox) {
event.stopPropagation();
event.preventDefault();
if (this.wheeling || !this.zoomable) {
return;
}
this.wheeling = true;
setTimeout(() => {
this.wheeling = false;
}, 16);
const ratio = Number(this.options.zoomRatio) || 0.1;
let delta = 1;
if (event.deltaY) {
delta = event.deltaY > 0 ? 1 : -1;
} else if (event.wheelDelta) {
delta = -event.wheelDelta / 120;
} else if (event.detail) {
delta = event.detail > 0 ? 1 : -1;
}
const step = -delta * ratio;
const pos = this.windowToCanvasAxis(event);
this.calcTransform(
{
scaleCenter: {
...pos,
step
}
},
cropBox
);
},
onDragStart(event) {
event.stopPropagation();
event.preventDefault();
const { buttons, button } = event;
if (!this.movable) {
return;
}
if (this.disabled || // Handle mouse event and pointer event and ignore touch event
(event.type === "mousedown" || event.type === "pointerdown" && event.pointerType === "mouse") && // No primary button (Usually the left button)
((0, import_func.isNumber)(buttons) && buttons !== 1 || (0, import_func.isNumber)(button) && button !== 0 || // Open context menu
event.ctrlKey)) {
return;
}
this.pointer = (0, import_utils.getPointer)(event);
this.action = import_constants.ACTION_DRAG;
(0, import_class.addClass)(this.canvas, import_constants.CLASS_MOVE);
},
onDragMove(event) {
event.stopPropagation();
const pointerCenter = this.windowToCanvasAxis(event);
const id = this.calcSelectShape(pointerCenter);
this.hoverShapId = id;
const { action } = this;
if (!action) {
return;
}
this.pointer = Object.assign({}, this.pointer, (0, import_utils.getPointer)(event, true));
event.preventDefault();
const range = {
x: this.pointer.endX - this.pointer.startX,
y: this.pointer.endY - this.pointer.startY
};
this.calcTransform({ translateX: range.x, translateY: range.y });
this.pointer.startX = this.pointer.endX;
this.pointer.startY = this.pointer.endY;
},
onDragEnd(event) {
event.stopPropagation();
const { action } = this;
if (!action) {
return;
}
event.preventDefault();
this.action = null;
this.point = null;
(0, import_class.removeClass)(this.canvas, import_constants.CLASS_MOVE);
},
/* rect事件 */
// onLeavel(event) {
// const pointerCenter = this.windowToCanvasAxis(event);
// this.highlightShape(pointerCenter);
// },
// onEnter(event) {
// this.highlightShape(null);
// },
onClick(event) {
event.stopPropagation();
const pointerCenter = this.windowToCanvasAxis(event);
if (!this.isEyeOpen) {
const id = this.calcSelectShape(pointerCenter);
this.setSelectShapId(id);
} else {
let pointShapeList = this.shapeList.filter((v) => !v["w"]);
if (pointShapeList.length === 5)
return;
const originAxis = this.canvasAxisToOriginAxis(pointerCenter);
const imageAxis = this.originAxisToImgAxis(originAxis);
this.addShape(
{ id: `pointer_${(0, import_guid.default)()}`, selectAble: false, ...imageAxis },
import_constants.SHAPE_TYPE_CIRCLE
);
pointShapeList = this.shapeList.filter((v) => !v["w"]);
if (pointShapeList.length === 5) {
(0, import_utils.dispatchEvent)(this.element, import_constants.EVENT_EYE_DONE);
}
}
}
};

161
packages/meta/lib/ImageEditor/viewer/helper.js
View File

@ -1,161 +0,0 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/ImageEditor/viewer/helper.ts
var helper_exports = {};
__export(helper_exports, {
default: () => helper_default,
setNumberAccuracy: () => setNumberAccuracy
});
module.exports = __toCommonJS(helper_exports);
var import_constants = require("./constants");
var setNumberAccuracy = (originNumber, accuracy = 0, isCeil = true) => {
if (originNumber === 0) {
return 0;
}
let returnData = 0;
if (isCeil) {
returnData = Math.ceil(originNumber / Math.pow(10, accuracy)) * Math.pow(10, accuracy);
} else {
returnData = Math.floor(originNumber / Math.pow(10, accuracy)) * Math.pow(10, accuracy);
}
if (accuracy < 0) {
returnData = Number(returnData.toFixed(-accuracy));
} else {
returnData = Number(returnData.toFixed(0));
}
return returnData;
};
var helper_default = {
windowToCanvasAxis(event) {
const { x, y } = this.canvas.getBoundingClientRect();
return {
x: event.pageX - x,
y: event.pageY - y,
__AXIS_TYPE__: import_constants.AXIS_TYPE_CANVAS
};
},
offsetAxisToCanvasAxis({ x, y }) {
const { targetTransform } = this;
const { translateX, translateY, scale } = targetTransform;
return {
x: (x + translateX) / scale + translateX / scale,
y: y / scale + translateY / scale,
__AXIS_TYPE__: import_constants.AXIS_TYPE_CANVAS
};
},
originAxisToCanvasAxis({ x, y, ...others }) {
const { targetTransform } = this;
const { translateX, translateY, scale } = targetTransform;
const axis = {
x: translateX + x * scale,
y: translateY + y * scale,
...others,
__AXIS_TYPE__: import_constants.AXIS_TYPE_CANVAS
};
return axis;
},
canvasAxisToOriginAxis({ x, y, ...others }) {
const { targetTransform } = this;
const { translateX, translateY, scale } = targetTransform;
const axis = {
x: (x - translateX) / scale,
y: (y - translateY) / scale,
...others,
__AXIS_TYPE__: import_constants.AXIS_TYPE_ORIGIN
};
return axis;
},
imgRectAxisToCanvasAxisRect({ x = 0, y = 0, w = 0, h = 0, ...others }) {
const { width, height } = this.image;
const { targetTransform } = this;
const { rotate } = targetTransform;
const theta = Math.PI / 180 * rotate;
const offsetRect = {
x: width * x,
y: height * y,
x2: width * w + width * x,
y2: height * h + height * y
};
const newX = (offsetRect.x - width / 2) * Math.cos(theta) - (offsetRect.y - height / 2) * Math.sin(theta) + width / 2;
const newY = (offsetRect.x - width / 2) * Math.sin(theta) + (offsetRect.y - height / 2) * Math.cos(theta) + height / 2;
const newX2 = (offsetRect.x2 - width / 2) * Math.cos(theta) - (offsetRect.y2 - height / 2) * Math.sin(theta) + width / 2;
const newY2 = (offsetRect.x2 - width / 2) * Math.sin(theta) + (offsetRect.y2 - height / 2) * Math.cos(theta) + height / 2;
const newAxis1 = this.originAxisToCanvasAxis({ x: newX, y: newY });
const newAxis2 = this.originAxisToCanvasAxis({
x: newX2,
y: newY2
});
return {
x: newAxis1.x,
y: newAxis1.y,
x2: newAxis2.x,
y2: newAxis2.y,
...others,
__AXIS_TYPE__: import_constants.AXIS_TYPE_CANVAS
};
},
originAxisToImgAxis({ x, y, ...others }) {
const { width, height } = this.image;
const { targetTransform } = this;
const { rotate } = targetTransform;
const theta = Math.PI / 180 * (360 - rotate);
const newX = (x - width / 2) * Math.cos(theta) - (y - height / 2) * Math.sin(theta) + width / 2;
const newY = (x - width / 2) * Math.sin(theta) + (y - height / 2) * Math.cos(theta) + height / 2;
return {
x: newX / width,
y: newY / height,
...others,
__AXIS_TYPE__: import_constants.AXIS_TYPE_IMAGE
};
},
imgAxisToOriginAxis({ x: _x, y: _y, ...others }) {
const { width, height } = this.image;
const x = width * _x;
const y = height * _y;
const { targetTransform } = this;
const { rotate } = targetTransform;
const theta = Math.PI / 180 * rotate;
const newX = (x - width / 2) * Math.cos(theta) - (y - height / 2) * Math.sin(theta) + width / 2;
const newY = (x - width / 2) * Math.sin(theta) + (y - height / 2) * Math.cos(theta) + height / 2;
return {
x: newX,
y: newY,
...others,
__AXIS_TYPE__: import_constants.AXIS_TYPE_ORIGIN
};
},
getDataUrlbyOriginAxis({ x = 0, y = 0, w = 0, h = 0, ...others }) {
const ctx = this.canvas.getContext("2d");
const commonCanvas = document.createElement("canvas");
commonCanvas.width = w;
commonCanvas.height = h;
commonCanvas.style.display = "none";
document.body.appendChild(commonCanvas);
const commonCtx = commonCanvas.getContext("2d");
const imageData = ctx.getImageData(x, y, w, h);
commonCtx.putImageData(imageData, 0, 0);
const dataUrl = commonCanvas.toDataURL("image/jpeg");
commonCanvas.parentNode.removeChild(commonCanvas);
return dataUrl;
}
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
setNumberAccuracy
});

93
packages/meta/lib/ImageEditor/viewer/index.js
View File

@ -1,93 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var __decorateClass = (decorators, target, key, kind) => {
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
for (var i = decorators.length - 1, decorator; i >= 0; i--)
if (decorator = decorators[i])
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
if (kind && result)
__defProp(target, key, result);
return result;
};
// src/ImageEditor/viewer/index.ts
var viewer_exports = {};
__export(viewer_exports, {
default: () => viewer_default
});
module.exports = __toCommonJS(viewer_exports);
var import_func = require("@zhst/func");
var import_class = require("rc-util/lib/Dom/class");
var import_utils = require("../utils");
var import_render = __toESM(require("./render"));
var import_event = __toESM(require("./event"));
var import_shape = __toESM(require("./shape"));
var import_helper = __toESM(require("./helper"));
var import_constants = require("./constants");
var import_index = require("./index.scss");
var Viewer = class {
constructor(element, options) {
this.element = element;
this.options = Object.assign({}, (0, import_func.isPlainObject)(options) && options);
this.ready = false;
this.init();
}
async init() {
try {
this.build();
this.bind();
await this.render();
this.ready = true;
(0, import_utils.dispatchEvent)(this.element, import_constants.EVENT_VIEWER_READY);
} catch (error) {
(0, import_utils.dispatchEvent)(this.element, import_constants.EVENT_VIEWER_ERROR);
}
}
build() {
const canvas = document.createElement("canvas");
(0, import_class.addClass)(canvas, import_constants.CLASS_CANVAS);
this.element.appendChild(canvas);
this.canvas = canvas;
}
refleshImage(options) {
this.options = Object.assign({}, (0, import_func.isPlainObject)(options) && options);
this.ready = false;
this.element.removeChild(this.canvas);
this.init();
}
destroy() {
var _a, _b;
window.cancelAnimationFrame(this.animationFrame);
this.unbind();
(_b = (_a = this.element) == null ? void 0 : _a.removeChild) == null ? void 0 : _b.call(_a, this.canvas);
}
};
Viewer = __decorateClass([
(0, import_utils.Mixin)(import_render.default, import_event.default, import_shape.default, import_helper.default)
], Viewer);
var viewer_default = Viewer;

44
packages/meta/lib/ImageEditor/viewer/index.scss
View File

@ -1,44 +0,0 @@
$prefix: zhst;
:global {
// .zhst-cropper-container {
// width: 100px;
// }
.zhst-viewer {
&-canvas {
// cursor: grab;
cursor: pointer;
}
//辅助class
&-invisible {
opacity: 0;
}
&-hide {
position: absolute;
display: block;
width: 0;
height: 0;
}
&-hidden {
display: none !important;
}
&-move {
cursor: move;
}
&-crop {
cursor: crosshair;
}
&-disabled &-drag-box,
&-disabled &-face,
&-disabled &-line,
&-disabled &-point {
cursor: not-allowed;
}
}
}

284
packages/meta/lib/ImageEditor/viewer/render.js
View File

@ -1,284 +0,0 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/ImageEditor/viewer/render.ts
var render_exports = {};
__export(render_exports, {
default: () => render_default
});
module.exports = __toCommonJS(render_exports);
var import_css = require("rc-util/lib/Dom/css");
var import_func = require("@zhst/func");
var import_utils = require("../utils");
var import_constants = require("./constants");
var render_default = {
// store
image: null,
canvas: null,
containerData: {
width: 0,
height: 0
},
animationFrame: null,
backgroundColor: "#fff",
targetTransform: {
translateX: 0,
translateY: 0,
scale: 0,
rotate: 0
// rotate: 90,
},
//method
async render() {
await this.initImg();
this.initCanvas();
this.startRaf();
},
initImg() {
return new Promise((resolve, reject) => {
const { image: propImage } = this.options;
if ((0, import_func.isString)(propImage)) {
const image = new Image();
image.crossOrigin = "anonymous";
image.src = propImage;
image.onload = () => {
this.image = image;
resolve(image);
};
image.onerror = (err) => {
reject(err);
};
} else {
this.image = propImage;
resolve(propImage);
}
});
},
initCanvas() {
if (!this.image)
return;
const { element, canvas, limit = {}, options } = this;
const containerData = {
width: (0, import_css.getOuterWidth)(element),
height: (0, import_css.getOuterHeight)(element)
};
this.containerData = containerData;
(0, import_css.set)(canvas, containerData);
canvas.width = containerData.width;
canvas.height = containerData.height;
const fitTransform = this.calcFitScreen();
this.targetTransform = Object.assign({}, this.targetTransform, fitTransform);
(0, import_utils.dispatchEvent)(this.element, import_constants.EVENT_VIEWER_TRANSFORM_CHANGE, (0, import_func.cloneDeep)(this.targetTransform));
const { fitScaleAsMinScale = false } = options;
if (fitScaleAsMinScale) {
this.limit = Object.assign({ minScale: this.targetTransform.scale }, this.limit);
}
},
startRaf() {
window.cancelAnimationFrame(this.animationFrame);
const loop = () => {
this.renderCanvas();
window.cancelAnimationFrame(this.animationFrame);
this.animationFrame = window.requestAnimationFrame(loop);
};
loop();
},
renderCanvas(_ctx) {
if (!this.image || !this.canvas)
return;
const { containerData, canvas, targetTransform, options } = this;
const { translateX, translateY, scale, rotate } = targetTransform;
const ctx = _ctx ? _ctx : canvas.getContext("2d");
ctx.clearRect(0, 0, containerData.width, containerData.height);
ctx.fillStyle = options.backgroundColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.setTransform(scale, 0, 0, scale, translateX, translateY);
const centerX = this.image.width / 2;
const centerY = this.image.height / 2;
ctx.translate(centerX, centerY);
ctx.rotate(rotate / 180 * Math.PI);
ctx.translate(-centerX, -centerY);
ctx.drawImage(this.image, 0, 0);
ctx.restore();
ctx.save();
this.renderShape(ctx);
ctx.restore();
},
scaleTo(offsetScale) {
const { containerData } = this;
this.calcTransform({
scaleCenter: {
x: containerData.width / 2,
y: containerData.height / 2,
step: offsetScale
}
});
},
//暂时只支持90deg旋转 否则limit 不能做
rotateTo(T) {
if (!this.image)
return;
const { targetTransform } = this;
const { rotate } = targetTransform;
const newDeg = (0, import_func.isFunction)(T) ? T(rotate) : T;
this.calcTransform({
rotate: newDeg
});
},
reset() {
this.targetTransform.rotate = 0;
const fitTransform = this.calcFitScreen();
this.targetTransform = Object.assign({}, this.targetTransform, fitTransform);
(0, import_utils.dispatchEvent)(this.element, import_constants.EVENT_VIEWER_TRANSFORM_CHANGE, (0, import_func.cloneDeep)(this.targetTransform));
},
getImgSize() {
if (!this.image)
return;
return { w: this.image.width, h: this.image.height };
},
calcFitScreen() {
if (!this.image)
return;
const w = this.containerData.width;
const h = this.containerData.height;
const iw = this.image.width;
const ih = this.image.height;
const { rotate = 0 } = this.targetTransform;
const wToh = w / h;
let imgwToh = iw / ih;
if (rotate % 180 !== 0) {
imgwToh = ih / iw;
}
let scale;
let translateX = 0;
let translateY = 0;
if (imgwToh > wToh) {
scale = w / iw;
translateX = 0;
translateY = (h - ih * scale) / 2;
if (rotate % 180 !== 0) {
scale = w / ih;
translateX = (ih - iw) / 2 * scale;
translateY = (h - iw * scale) / 2 + (iw - ih) / 2 * scale;
}
} else {
scale = h / ih;
translateX = (w - iw * scale) / 2;
translateY = 0;
if (rotate % 180 !== 0) {
scale = h / iw;
translateX = (w - ih * scale) / 2 + (ih - iw) / 2 * scale;
translateY = (iw - ih) / 2 * scale;
}
}
const fitTransform = {
translateX,
translateY,
scale
};
return fitTransform;
},
calcTransform(newTransform, cropBox) {
if (!this.image)
return;
const { translateX, translateY, scaleCenter, rotate } = newTransform;
if (!(0, import_func.isNil)(scaleCenter)) {
const { targetTransform: targetTransform2, limit = {} } = this;
let { minScale = 0.1, maxScale = Number.MAX_VALUE } = limit;
if (cropBox) {
let { width: iw, height: ih } = this.image;
if (targetTransform2.rotate % 180 !== 0)
[iw, ih] = [ih, iw];
const { width: cw, height: ch } = cropBox;
const corpMinScale = Math.max(cw / iw, ch / ih);
minScale = Math.max(corpMinScale, minScale);
}
const { x, y, step } = scaleCenter;
const preScale = targetTransform2.scale;
let newScale = targetTransform2.scale + step;
newScale = Math.min(maxScale, Math.max(newScale, minScale));
const newStep = newScale - preScale;
if (newScale != preScale) {
const offsetX = (x - targetTransform2.translateX) / targetTransform2.scale * newStep;
const offsetY = (y - targetTransform2.translateY) / targetTransform2.scale * newStep;
this.targetTransform.translateX = this.targetTransform.translateX - offsetX;
this.targetTransform.translateY = this.targetTransform.translateY - offsetY;
}
this.targetTransform.scale = newScale;
}
if (!(0, import_func.isNil)(translateX)) {
this.targetTransform.translateX += translateX;
}
if (!(0, import_func.isNil)(translateY)) {
this.targetTransform.translateY += translateY;
}
if (!(0, import_func.isNil)(rotate)) {
this.targetTransform.rotate = rotate;
}
const { targetTransform, containerData } = this;
const minMargin = 50;
let imgWidth = this.image.width;
let imgHeight = this.image.height;
if (this.targetTransform.rotate % 180 !== 0) {
imgWidth = this.image.height;
imgHeight = this.image.width;
}
const minX = minMargin - imgWidth * targetTransform.scale;
const maxX = containerData.width - minMargin;
const minY = minMargin - imgHeight * targetTransform.scale;
const maxY = containerData.height - minMargin;
this.targetTransform.translateX = Math.min(
maxX,
Math.max(this.targetTransform.translateX, minX)
);
this.targetTransform.translateY = Math.min(
maxY,
Math.max(this.targetTransform.translateY, minY)
);
if (cropBox) {
const { width: cw, height: ch, top, left } = cropBox;
const { width: iw, height: ih } = this.image;
let imgLeftTop = { x: 0, y: 0 };
let imgRightBottom = { x: iw, y: ih };
if (this.targetTransform.rotate % 180 !== 0) {
imgLeftTop = {
x: (iw - ih) / 2,
y: (ih - iw) / 2
};
imgRightBottom = {
x: (iw + ih) / 2,
y: (iw + ih) / 2
};
}
const maxX2 = left - imgLeftTop.x * this.targetTransform.scale;
const maxY2 = top - imgLeftTop.y * this.targetTransform.scale;
const minX2 = left + cw - imgRightBottom.x * this.targetTransform.scale;
const minY2 = top + ch - imgRightBottom.y * this.targetTransform.scale;
this.targetTransform.translateX = Math.min(
maxX2,
Math.max(this.targetTransform.translateX, minX2)
);
this.targetTransform.translateY = Math.min(
maxY2,
Math.max(this.targetTransform.translateY, minY2)
);
}
(0, import_utils.dispatchEvent)(this.element, import_constants.EVENT_VIEWER_TRANSFORM_CHANGE, (0, import_func.cloneDeep)(this.targetTransform));
}
};

262
packages/meta/lib/ImageEditor/viewer/shape.js
View File

@ -1,262 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/ImageEditor/viewer/shape.ts
var shape_exports = {};
__export(shape_exports, {
default: () => shape_default
});
module.exports = __toCommonJS(shape_exports);
var import_func = require("@zhst/func");
var turf = __toESM(require("@turf/turf"));
var import_boolean_point_in_polygon = __toESM(require("@turf/boolean-point-in-polygon"));
var import_helper = require("./helper");
var import_constants = require("./constants");
var import_utils = require("../utils");
function rectToPolygon(axisRect) {
const polygon2 = turf.polygon([
[
[(0, import_helper.setNumberAccuracy)(axisRect.x, -2), (0, import_helper.setNumberAccuracy)(axisRect.y, -2)],
[(0, import_helper.setNumberAccuracy)(axisRect.x2, -2), (0, import_helper.setNumberAccuracy)(axisRect.y, -2)],
[(0, import_helper.setNumberAccuracy)(axisRect.x2, -2), (0, import_helper.setNumberAccuracy)(axisRect.y2, -2)],
[(0, import_helper.setNumberAccuracy)(axisRect.x, -2), (0, import_helper.setNumberAccuracy)(axisRect.y2, -2)],
[(0, import_helper.setNumberAccuracy)(axisRect.x, -2), (0, import_helper.setNumberAccuracy)(axisRect.y, -2)]
]
]);
return polygon2;
}
var shape_default = {
//store
shapeList: [],
hoverShapId: null,
selectShapId: null,
//是否开启人脸
isEyeOpen: false,
//是否移动
movable: true,
//是否放大缩小
zoomable: true,
//禁止添加shap
disableAdd: false,
//自定义画框的颜色
color: "",
changeEyeModel(isOpen) {
if (isOpen) {
this.isEyeOpen = true;
this.changeMoveAble(false);
this.changeZoonAble(false);
} else {
this.isEyeOpen = false;
this.changeMoveAble(true);
this.changeZoonAble(true);
}
},
//method
addShape(shap, type = import_constants.SHAPE_TYPE_RECT) {
this.color = shap.color ? shap.color : "";
if ((0, import_func.isNil)(shap) || this.disableAdd)
return;
const { shapeList: preShapeList = [] } = this;
let shapList = (0, import_func.isArray)(shap) ? shap : [shap];
shapList = shapList.map((v) => ({ ...v, __SHAPE_TYPE__: type }));
this.shapeList = [...preShapeList, ...shapList];
},
//
setSelectShapId(id) {
this.selectShapId = id;
(0, import_utils.dispatchEvent)(this.element, import_constants.EVENT_SHAPE_SELECT, id);
},
getSelectShape(contain = true) {
const selectShapeList = [];
const selectShape = this.shapeList.find((v) => v["id"] === this.selectShapId);
selectShape && selectShapeList.push(selectShape);
if (contain && selectShape) {
const originFeature = rectToPolygon(this.imgRectAxisToCanvasAxisRect(selectShape));
for (let i = 0; i < this.shapeList.length; i++) {
const shape = this.shapeList[i];
if (shape["id"] !== this.selectShapId) {
const feature = rectToPolygon(this.imgRectAxisToCanvasAxisRect(shape));
const isContain = turf.booleanContains(originFeature, feature);
isContain && selectShapeList.push(shape);
}
}
}
return selectShapeList;
},
replaceShape(shape, type = import_constants.SHAPE_TYPE_RECT) {
if ((0, import_func.isNil)(shape))
return;
const { shapeList: preShapeList = [] } = this;
let _shape;
if ((0, import_func.isFunction)(shape)) {
_shape = shape(preShapeList);
} else {
_shape = shape;
}
let shapList = (0, import_func.isArray)(_shape) ? _shape : [_shape];
shapList = shapList.map((v) => ({ ...v, __SHAPE_TYPE__: type }));
this.shapeList = [...shapList];
},
clearShape() {
this.shapeList = [];
},
calcSelectShape(canvasPoint) {
const { shapeList, image } = this;
const selectAbleShape = shapeList.filter(({ selectAble = true }) => !!selectAble);
let minId = null;
let minDis = Number.MAX_VALUE;
const pt = turf.point([canvasPoint.x, canvasPoint.y]);
for (let i = 0; i < selectAbleShape.length; i++) {
const shape = selectAbleShape[i];
const axisRect = this.imgRectAxisToCanvasAxisRect(shape);
const polygon2 = turf.polygon([
[
[axisRect.x, axisRect.y],
[axisRect.x2, axisRect.y],
[axisRect.x2, axisRect.y2],
[axisRect.x, axisRect.y2],
[axisRect.x, axisRect.y]
]
]);
const isPtInPolygon = (0, import_boolean_point_in_polygon.default)(pt, polygon2);
if (isPtInPolygon) {
const line = turf.polygonToLine(polygon2);
const distance = turf.pointToLineDistance(pt, line, { method: "planar" });
if (distance < minDis) {
minDis = distance;
minId = shape["id"];
}
}
}
return minId;
},
clearSelectShape() {
this.setSelectShapId(null);
},
changeMoveAble(movable = true) {
this.movable = movable;
},
changeZoonAble(zoomable = true) {
this.zoomable = zoomable;
},
disabledAddShap(value = false) {
this.disableAdd = value;
},
renderShape(ctx) {
const { shapeList } = this;
const selectShapeList = [];
const hoverShapeList = [];
const normalShapeList = [];
for (let i = 0; i < shapeList.length; i++) {
const shape = shapeList[i];
const isSelectShape = this.selectShapId === shape["id"];
const isHoverShape = this.hoverShapId === shape["id"];
if (isSelectShape) {
selectShapeList.push(shape);
} else if (isHoverShape) {
hoverShapeList.push(shape);
} else {
normalShapeList.push(shape);
}
}
for (let i = 0; i < normalShapeList.length; i++) {
const shape = normalShapeList[i];
const { __SHAPE_TYPE__ } = shape;
switch (__SHAPE_TYPE__) {
case import_constants.SHAPE_TYPE_RECT:
this.renderRect(ctx, shape, "normal");
break;
case import_constants.SHAPE_TYPE_CIRCLE:
this.renderPoint(ctx, shape, "normal");
break;
default:
break;
}
}
for (let i = 0; i < hoverShapeList.length; i++) {
const shape = hoverShapeList[i];
const { __SHAPE_TYPE__ } = shape;
switch (__SHAPE_TYPE__) {
case import_constants.SHAPE_TYPE_RECT:
this.renderRect(ctx, shape, "hover");
break;
default:
break;
}
}
for (let i = 0; i < selectShapeList.length; i++) {
const shape = selectShapeList[i];
const { __SHAPE_TYPE__ } = shape;
switch (__SHAPE_TYPE__) {
case import_constants.SHAPE_TYPE_RECT:
this.renderRect(ctx, shape, "select");
break;
default:
break;
}
}
},
renderRect(ctx, shape, type) {
const axisRect = this.imgRectAxisToCanvasAxisRect(shape);
const rect = {
x: axisRect.x2 > axisRect.x ? axisRect.x : axisRect.x2,
y: axisRect.y2 > axisRect.y ? axisRect.y : axisRect.y2,
w: Math.abs(axisRect.x2 - axisRect.x),
h: Math.abs(axisRect.y2 - axisRect.y)
};
ctx.save();
if (type === "normal") {
ctx.strokeStyle = this.color ? this.color : "#FFF566";
ctx.lineWidth = 2;
ctx.strokeRect(...Object.values(rect));
}
if (type === "hover") {
ctx.fillStyle = "rgba(0, 153, 255, 0.3)";
ctx.fillRect(...Object.values(rect));
ctx.strokeStyle = "rgba(92, 219, 211, 1)";
ctx.lineWidth = 2;
ctx.strokeRect(...Object.values(rect));
}
if (type === "select") {
ctx.strokeStyle = "rgba(255, 0, 0, 1)";
ctx.lineWidth = 2;
ctx.strokeRect(...Object.values(rect));
}
ctx.restore();
},
renderPoint(ctx, shape) {
const originAxis = this.imgAxisToOriginAxis(shape);
const canvasAxis = this.originAxisToCanvasAxis(originAxis);
ctx.save();
ctx.beginPath();
ctx.arc(canvasAxis.x, canvasAxis.y, 2, 0, 2 * Math.PI);
ctx.fillStyle = "#DF0101";
ctx.fill();
ctx.restore();
}
};

41
packages/meta/lib/Temp/index.js
View File

@ -1,41 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/Temp/index.tsx
var Temp_exports = {};
__export(Temp_exports, {
default: () => Temp_default
});
module.exports = __toCommonJS(Temp_exports);
var import_react = __toESM(require("react"));
var import_antd = require("antd");
var ButtonDemo = (props) => {
const { children } = props;
return /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { ...props }, children);
};
var Temp_default = ButtonDemo;

611
packages/meta/lib/VideoPlayer/VideoPlayer.js
View File

@ -1,611 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/VideoPlayer/VideoPlayer.tsx
var VideoPlayer_exports = {};
__export(VideoPlayer_exports, {
default: () => VideoPlayer_default
});
module.exports = __toCommonJS(VideoPlayer_exports);
var import_react = __toESM(require("react"));
var import_func = require("@zhst/func");
var import_rc_align = __toESM(require("rc-align"));
var import_hooks = require("@zhst/hooks");
var import_classnames = __toESM(require("classnames"));
var import_downloadjs = __toESM(require("downloadjs"));
var import_antd = require("antd");
var import_iconfont = __toESM(require("../iconfont"));
var import_ImageEditor = require("../ImageEditor");
var import_FlvPlayer = __toESM(require("./components/FlvPlayer"));
var import_Progress = __toESM(require("./components/Progress"));
var import_Loading = __toESM(require("./components/Loading"));
var import_ScreenhotButtons = __toESM(require("../BigImagePreview/components/ScreenhotButtons"));
var import_constants = require("../utils/constants");
var import_videoPlayerHelper = require("./videoPlayerHelper");
var import_index = require("./index.less");
var componentName = `zhst-image__video-view`;
var VideoPlayer = (0, import_react.forwardRef)((props, ref) => {
const {
url,
maxDuration = 20,
screenshotButtonAlign = {
points: ["bl", "br"],
offset: [6, 0],
overflow: {
adjustX: true,
adjustY: true
}
},
screenshotButtonRender = (0, import_ScreenhotButtons.default)({
onBigImageActionClick: () => {
},
disableBtn: []
}),
onCropChange,
defautlNormalizationRect: defaultNormalizationRect
} = props;
const videoType = (0, import_react.useMemo)(() => url && url.startsWith("http") ? "mp4" : "flv", [url]);
const containerRef = (0, import_react.useRef)(null);
const videoRef = (0, import_react.useRef)(null);
const videoInsRef = (0, import_react.useRef)(null);
const [playSeq, setPlaySeq] = (0, import_react.useState)(0);
const videoRemoveListener = (0, import_react.useRef)(import_func.noop);
const loadingTimeRef = (0, import_react.useRef)(0);
const delayLoadingTimer = (0, import_react.useRef)(null);
const [isReady, setIsReady] = (0, import_react.useState)(false);
const [isPlay, setIsPlay] = (0, import_react.useState)(false);
const [isEnd, setIsEnd] = (0, import_react.useState)(false);
const [isError, setIsError] = (0, import_react.useState)(false);
const [isVideoLoadFinished, setIsVideoLoadFinish] = (0, import_react.useState)(false);
const [playTime, setPlayTime] = (0, import_react.useState)(0);
const [isLoadingVideo, setIsLoadingVideo] = (0, import_react.useState)(true);
const [isDelayLoading, setIsDelayLoading] = (0, import_react.useState)(false);
const latestIsLoadingVideo = (0, import_hooks.useLatest)(isLoadingVideo);
const setIsLoadingVideoWrapper = (isLoading) => {
setIsLoadingVideo((preLoading) => {
if (!preLoading && isLoading) {
loadingTimeRef.current = (/* @__PURE__ */ new Date()).getTime();
}
if (!isLoading) {
loadingTimeRef.current = null;
}
if (!isLoading) {
setIsDelayLoading(false);
}
if (!delayLoadingTimer.current && preLoading) {
delayLoadingTimer.current = setTimeout(() => {
if (latestIsLoadingVideo.current) {
setIsDelayLoading(true);
}
delayLoadingTimer.current = null;
}, 200);
}
return isLoading;
});
};
(0, import_react.useEffect)(() => {
let timer = setInterval(() => {
if (loadingTimeRef.current) {
if ((/* @__PURE__ */ new Date()).getTime() - loadingTimeRef.current > 1e3 * 30) {
checkIsErr();
}
}
}, 1e3);
return () => {
clearInterval(timer);
};
}, []);
(0, import_hooks.useUpdateEffect)(() => {
var _a, _b;
if (isEnd) {
(_b = (_a = videoInsRef == null ? void 0 : videoInsRef.current) == null ? void 0 : _a.pause) == null ? void 0 : _b.call(_a);
}
}, [isEnd]);
const checkIsErr = () => {
var _a, _b;
setIsError(true);
try {
(_b = (_a = videoInsRef == null ? void 0 : videoInsRef.current) == null ? void 0 : _a.destroy) == null ? void 0 : _b.call(_a);
} catch (error) {
console.error(error);
}
};
const latestMaxDuration = (0, import_hooks.useLatest)(maxDuration);
const initPlayer = (0, import_react.useCallback)((ins, dom) => {
videoRef.current = dom;
videoInsRef.current = ins;
const maxDuration2 = latestMaxDuration.current || 0;
let video = dom;
let errorLister = (e) => {
checkIsErr();
console.error("视频出错了", e, video.currentTime);
};
let waitingListener = (e) => {
setIsLoadingVideoWrapper(true);
console.debug("视频加载等待", e, video.currentTime);
};
let playingListener = (e) => {
setIsLoadingVideoWrapper(false);
setIsError(false);
console.debug("视频从等待中播放", e, video.currentTime);
};
let playLister = (e) => {
setIsPlay(true);
setIsError(false);
console.debug("提示该视频正在播放中", e, video.currentTime);
};
let pauseListener = (e) => {
setIsPlay(false);
console.debug("暂停播放", e, video.currentTime);
};
let endedListner = (e) => {
setIsEnd(true);
setIsVideoLoadFinish(true);
console.debug("视频播放完了", e, video.currentTime);
};
let timeupdateListner = (e) => {
var _a;
console.debug(
"视频播放时间更新",
e,
video.currentTime,
(_a = videoRef.current) == null ? void 0 : _a.duration,
maxDuration2
);
let nowTime = video.currentTime;
if (nowTime >= maxDuration2) {
setIsEnd(true);
setIsVideoLoadFinish(true);
}
setPlayTime(nowTime);
};
let windowErrorHandle = (errorEvent) => {
try {
if (errorEvent["message"] == "Uncaught TypeError: Cannot read property 'flushStashedSamples' of null") {
checkIsErr();
console.error("视频出错了 window监听", errorEvent);
}
} catch (error) {
console.error(error);
}
};
video.addEventListener("error", errorLister);
video.addEventListener("waiting", waitingListener);
video.addEventListener("playing", playingListener);
video.addEventListener("play", playLister);
video.addEventListener("pause", pauseListener);
video.addEventListener("ended", endedListner);
video.addEventListener("timeupdate", timeupdateListner);
window.addEventListener("error", windowErrorHandle);
videoRemoveListener.current = () => {
video.removeEventListener("error", errorLister);
video.removeEventListener("waiting", waitingListener);
video.removeEventListener("playing", playingListener);
video.removeEventListener("play", playLister);
video.removeEventListener("pause", pauseListener);
video.removeEventListener("ended", endedListner);
video.removeEventListener("timeupdate", timeupdateListner);
window.removeEventListener("error", windowErrorHandle);
};
videoInsRef == null ? void 0 : videoInsRef.current.on(import_FlvPlayer.FLV_EVENT.ERROR, (type, errDetail, info) => {
checkIsErr();
console.error("videoInsRef 错误", type, errDetail, info, video.currentTime);
});
let playPromise = videoInsRef == null ? void 0 : videoInsRef.current.play();
setIsReady(true);
playPromise.then(() => {
setIsReady(true);
}).catch((...arg) => {
try {
} catch (error) {
}
console.error("playPromise视频出错了", arg);
});
}, []);
(0, import_hooks.useUnmount)(() => {
try {
videoRemoveListener.current();
} catch (e) {
console.error(e);
}
});
const reload = async () => {
if (videoInsRef.current) {
let oldTime = videoInsRef.current.currentTime;
videoInsRef.current.currentTime = 0;
if (oldTime === videoInsRef.current.currentTime) {
setIsReady(false);
setIsPlay(false);
setIsLoadingVideoWrapper(false);
setIsReady(false);
setIsEnd(false);
setIsVideoLoadFinish(false);
setPlayTime(0);
try {
videoRemoveListener.current();
} catch (error) {
console.error(error);
}
setPlaySeq((pre) => pre + 1);
return;
}
videoInsRef.current.play();
}
setPlayTime(0);
setIsEnd(false);
};
const seek = (v) => {
if (videoInsRef.current && isVideoLoadFinished) {
setPlayTime(parseFloat(v));
videoInsRef.current.currentTime = parseFloat(v);
} else {
import_antd.message.warning("待视频加载完，才可操作进度条");
}
};
const [isFullscreen, { toggleFullscreen }] = (0, import_hooks.useFullscreen)(containerRef, {
pageFullscreen: true
});
const showMaxDuration = !!maxDuration ? maxDuration : (0, import_func.toRealNumber)((0, import_func.get)(videoRef, "current.duration", 0));
const showSlider = videoInsRef.current && isVideoLoadFinished;
const showStatus = (0, import_videoPlayerHelper.getShowStatus)(isDelayLoading, isEnd, isError);
const corpContainerRef = (0, import_react.useRef)();
const cropInsRef = (0, import_react.useRef)(null);
const [showCrop, setShowCrop] = (0, import_react.useState)(false);
const isFirstFlagRef = (0, import_react.useRef)(true);
(0, import_react.useEffect)(() => {
const isFirst = isFirstFlagRef.current;
if (!isLoadingVideo && isReady && isFirst && defaultNormalizationRect && !showStatus) {
(0, import_func.nextTick)(() => {
setShowCrop(true);
});
}
}, [isLoadingVideo, showStatus]);
const alginContainerRef = (0, import_react.useRef)(null);
const alignRef = (0, import_react.useRef)(null);
const [cropRect, setCropRect] = (0, import_react.useState)(null);
(0, import_react.useEffect)(() => {
var _a, _b;
showCrop ? (_a = videoInsRef == null ? void 0 : videoInsRef.current) == null ? void 0 : _a.pause() : (_b = videoInsRef == null ? void 0 : videoInsRef.current) == null ? void 0 : _b.play();
}, [showCrop]);
(0, import_react.useEffect)(() => {
var _a;
let handlerCropStart;
let handlerCropEnd;
setCropRect(null);
if (!isReady)
return;
if (showCrop) {
handlerCropStart = (0, import_func.addEventListenerWrapper)(corpContainerRef.current, import_ImageEditor.EVENT_CROP_START, () => {
setCropRect(null);
});
handlerCropEnd = (0, import_func.addEventListenerWrapper)(corpContainerRef.current, import_ImageEditor.EVENT_CROP_END, (event) => {
var _a2, _b;
const data = event.detail;
setCropRect({
x: data.left,
y: data.top,
w: data.width,
h: data.height
});
(_b = (_a2 = alignRef == null ? void 0 : alignRef.current) == null ? void 0 : _a2.forceAlign) == null ? void 0 : _b.call(_a2);
});
let video = videoRef.current;
let scale = Math.min(
video.offsetWidth / video.videoWidth,
video.offsetHeight / video.videoHeight
);
let finalVideoWidth = video.videoWidth * scale;
let finalVideoHeight = video.videoHeight * scale;
let cropBoxLimited = {
width: finalVideoWidth,
height: finalVideoHeight,
top: (video.offsetHeight - finalVideoHeight) / 2,
left: (video.offsetWidth - finalVideoWidth) / 2
};
let canvas = document.createElement("canvas");
canvas.width = video.offsetWidth;
canvas.height = video.offsetHeight;
canvas.style.display = "none";
document.body.appendChild(canvas);
let ctx = canvas.getContext("2d");
ctx == null ? void 0 : ctx.drawImage(
video,
(video.offsetWidth - finalVideoWidth) / 2,
(video.offsetHeight - finalVideoHeight) / 2,
finalVideoWidth,
finalVideoHeight
);
let imageData = canvas.toDataURL("image/png");
(_a = canvas.parentNode) == null ? void 0 : _a.removeChild(canvas);
const isFirst = isFirstFlagRef.current;
let initialCropBoxData = null;
if (isFirst && defaultNormalizationRect) {
initialCropBoxData = {
left: defaultNormalizationRect.x * finalVideoWidth + cropBoxLimited.left,
top: defaultNormalizationRect.y * finalVideoHeight + cropBoxLimited.top,
width: defaultNormalizationRect.w * finalVideoWidth,
height: defaultNormalizationRect.h * finalVideoHeight
};
}
isFirstFlagRef.current = false;
cropInsRef.current = new import_ImageEditor.Cropper(corpContainerRef.current, {
showMask: true,
cropBoxLimited,
img: imageData,
initialCropBoxData
});
}
return () => {
var _a2, _b;
handlerCropStart == null ? void 0 : handlerCropStart.remove();
handlerCropEnd == null ? void 0 : handlerCropEnd.remove();
(_b = (_a2 = cropInsRef == null ? void 0 : cropInsRef.current) == null ? void 0 : _a2.destroy) == null ? void 0 : _b.call(_a2);
cropInsRef.current = null;
};
}, [showCrop, isReady]);
const latestCropRect = (0, import_hooks.useLatest)(cropRect);
const getCropInfo = async () => {
var _a;
const cropRect2 = latestCropRect.current;
let video = videoRef.current;
if (!video)
return;
let rectList = [];
let extendRectList = [];
let selectIndex = 0;
let scale = Math.min(
video.offsetWidth / video.videoWidth,
video.offsetHeight / video.videoHeight
);
let finalVideoWidth = video.videoWidth * scale;
let finalVideoHeight = video.videoHeight * scale;
let canvas = document.createElement("canvas");
canvas.width = finalVideoWidth;
canvas.height = finalVideoHeight;
canvas.style.display = "none";
document.body.appendChild(canvas);
let ctx = canvas.getContext("2d");
ctx.drawImage(
video,
0,
0,
finalVideoWidth,
finalVideoHeight
);
let base64 = canvas.toDataURL("image/jpeg");
const blobData = (0, import_func.dataURLToBlob)(base64);
(_a = canvas.parentNode) == null ? void 0 : _a.removeChild(canvas);
const file = new window.File([blobData], `${(/* @__PURE__ */ new Date()).getTime()}`);
let newRect = {
w: cropRect2.w / finalVideoWidth,
h: cropRect2.h / finalVideoHeight,
x: (cropRect2.x - (video.offsetWidth - finalVideoWidth) / 2) / finalVideoWidth,
y: (cropRect2.y - (video.offsetHeight - finalVideoHeight) / 2) / finalVideoHeight
};
rectList.push(newRect);
extendRectList.push(newRect);
extendRectList.forEach(async (rect, index) => {
extendRectList[index] = {
...rect
};
});
return {
rectList,
extendRectList,
selectIndex,
file
};
};
(0, import_react.useEffect)(() => {
let normalizationRect = null;
if (showCrop && cropRect) {
let video = videoRef.current;
let scale = Math.min(
video.offsetWidth / video.videoWidth,
video.offsetHeight / video.videoHeight
);
let finalVideoWidth = video.videoWidth * scale;
let finalVideoHeight = video.videoHeight * scale;
let cropBoxLimited = {
width: finalVideoWidth,
height: finalVideoHeight,
top: (video.offsetHeight - finalVideoHeight) / 2,
left: (video.offsetWidth - finalVideoWidth) / 2
};
normalizationRect = {
x: (cropRect.x - cropBoxLimited.left) / cropBoxLimited.width,
y: (cropRect.y - cropBoxLimited.top) / cropBoxLimited.height,
w: cropRect.w / cropBoxLimited.width,
h: cropRect.h / cropBoxLimited.height
};
}
onCropChange == null ? void 0 : onCropChange(showCrop, normalizationRect);
}, [showCrop, cropRect]);
const downloadVideoframe = (0, import_react.useCallback)(async () => {
var _a, _b;
try {
(_b = (_a = videoInsRef == null ? void 0 : videoInsRef.current) == null ? void 0 : _a.pause) == null ? void 0 : _b.call(_a);
let video = videoRef.current;
var canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
let base64;
if (video.readyState === 0) {
ctx == null ? void 0 : ctx.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = video.offsetWidth;
canvas.height = video.offsetHeight;
ctx.fillStyle = "black";
ctx == null ? void 0 : ctx.fillRect(0, 0, canvas.width, canvas.height);
base64 = canvas.toDataURL();
} else {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx == null ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
base64 = canvas.toDataURL("image/png");
}
(0, import_downloadjs.default)(base64);
} catch (error) {
console.error(error);
}
}, []);
const latestIsReady = (0, import_hooks.useLatest)(isReady);
const cropAble = !showStatus && isReady;
(0, import_react.useImperativeHandle)(ref, () => ({
cropAble,
setShowCrop: (dispatch) => {
const isReady2 = latestIsReady.current;
if (!isReady2)
return;
setShowCrop(dispatch);
},
downloadVideoframe
}));
return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}`), ref: containerRef }, url && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
import_FlvPlayer.default,
{
playId: playSeq,
autoPlay: true,
className: (0, import_classnames.default)(`${componentName}-flv`),
type: videoType,
url,
config: {
enableStashBuffer: true,
stashInitialSize: 1024 * 700,
isLive: true,
hasAudio: false,
hasVideo: true
},
onCreat: initPlayer
}
), /* @__PURE__ */ import_react.default.createElement(
"div",
{
className: (0, import_classnames.default)(`${componentName}-crop-container`),
ref: corpContainerRef,
style: {
display: isFullscreen ? "none" : "block"
}
}
), showCrop && cropRect && screenshotButtonRender && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
"div",
{
ref: alginContainerRef,
className: (0, import_classnames.default)(`${componentName}-align`),
style: Object.assign(
{
width: cropRect.w,
height: cropRect.h
},
(0, import_func.getTransforms)({
translateX: cropRect.x,
translateY: cropRect.y
})
)
}
), /* @__PURE__ */ import_react.default.createElement(
import_rc_align.default,
{
ref: alignRef,
monitorWindowResize: true,
align: screenshotButtonAlign,
target: function() {
return alginContainerRef.current;
}
},
screenshotButtonRender({
model: "IMAGE",
getCropInfo,
setShowCrop,
cropType: import_constants.CROP_TYPE["CUSTOM"]
})
)), !showCrop && /* @__PURE__ */ import_react.default.createElement("div", { className: `${componentName}-opt` }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
import_antd.Button,
{
type: "text",
onClick: (e) => {
var _a, _b;
if (!isPlay) {
(_a = videoInsRef == null ? void 0 : videoInsRef.current) == null ? void 0 : _a.play();
setShowCrop(false);
} else {
(_b = videoInsRef == null ? void 0 : videoInsRef.current) == null ? void 0 : _b.pause();
}
}
},
/* @__PURE__ */ import_react.default.createElement(
import_iconfont.default,
{
styles: {
color: "#fff",
display: "flex"
},
color: "#1890ff",
icon: !isPlay ? "icon-shipinbofang" : "icon-shipinzanting"
}
)
)), /* @__PURE__ */ import_react.default.createElement(
"div",
{
className: `${componentName}-opt-range`,
onClick: (e) => {
e.stopPropagation();
}
},
/* @__PURE__ */ import_react.default.createElement(
import_Progress.default,
{
value: playTime,
min: 0,
max: showMaxDuration,
showSlider,
onChange: seek
}
),
/* @__PURE__ */ import_react.default.createElement("div", null, (0, import_func.formatDurationTime)(playTime), "/", (0, import_func.formatDurationTime)(showMaxDuration))
), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
import_antd.Button,
{
type: "text",
onClick: (e) => {
e.stopPropagation();
toggleFullscreen();
}
},
/* @__PURE__ */ import_react.default.createElement(
import_iconfont.default,
{
styles: {
color: "#fff",
display: "flex"
},
size: 18,
icon: isFullscreen ? "icon-cancle_fullscreen" : "icon-fullscreen"
}
)
))), !!showStatus && /* @__PURE__ */ import_react.default.createElement(import_Loading.default, { status: showStatus, reload: () => reload() })));
});
var VideoPlayer_default = VideoPlayer;

144
packages/meta/lib/VideoPlayer/components/FlvPlayer/index.js
View File

@ -1,144 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/VideoPlayer/components/FlvPlayer/index.tsx
var FlvPlayer_exports = {};
__export(FlvPlayer_exports, {
FLV_EVENT: () => FLV_EVENT,
default: () => VideoPlayer
});
module.exports = __toCommonJS(FlvPlayer_exports);
var import_react = __toESM(require("react"));
var import_flv = __toESM(require("flv.js"));
var import_func = require("@zhst/func");
var FLV_EVENT = import_flv.default.Events;
var VideoPlayer = class extends import_react.Component {
constructor() {
super(...arguments);
this.state = {
curPlayUrl: "",
shouldReinit: false
};
this.flvPlayer = null;
this.videoElement = null;
this.initFlv = ($video) => {
this.videoElement = $video;
const { className, autoPlay = true, config = {}, onCreat, playId, ...others } = this.props;
if ($video) {
if (import_flv.default.isSupported() && this.props.url && this.props.url) {
const reload = () => {
if (this.flvPlayer && this.flvPlayer.destroy) {
try {
this.flvPlayer.destroy();
} catch (error) {
console.error(error);
}
}
let flvPlayer = import_flv.default.createPlayer({ ...others }, {
deferLoadAfterSourceOpen: false,
...config
});
flvPlayer.attachMediaElement($video);
flvPlayer.load();
this.flvPlayer = flvPlayer;
let controller = this.flvPlayer._transmuxer._controller;
let wsLoader = controller._ioctl._loader;
const oldWsOnCompleteFunc = wsLoader._onComplete;
wsLoader._onComplete = function() {
if (!controller._remuxer) {
controller._remuxer = {
destroy: () => {
console.log("组件销毁");
},
flushStashedSamples: () => {
console.log("flushStashedSamples");
}
};
}
oldWsOnCompleteFunc();
};
this.flvPlayer.reload = reload;
onCreat && onCreat(this.flvPlayer, $video);
};
reload();
onCreat && onCreat(this.flvPlayer, $video);
}
}
};
}
componentWillUnmount() {
var _a, _b;
if (this.flvPlayer) {
(_a = this.flvPlayer) == null ? void 0 : _a.unload();
(_b = this.flvPlayer) == null ? void 0 : _b.detachMediaElement();
}
}
componentDidUpdate() {
if (this.state.shouldReinit) {
this.setState({ shouldReinit: false });
this.initFlv(this.videoElement);
}
}
render() {
const { className, style } = this.props;
return /* @__PURE__ */ import_react.default.createElement(
"video",
{
muted: true,
preload: "metadata",
className,
style: Object.assign(
{
width: "100%",
height: "100%"
},
style ? style : {}
),
ref: this.initFlv
}
);
}
};
VideoPlayer.getDerivedStateFromProps = (nextProps, prevState) => {
const { playId = 0 } = nextProps;
const { playId: prePlayId = 0 } = prevState;
if (nextProps.url !== void 0) {
if (!(0, import_func.isEqual)(nextProps.url, prevState.curPlayUrl) || !(0, import_func.isEqual)(playId, prePlayId)) {
return {
playId,
curPlayUrl: nextProps.url,
shouldReinit: true
};
}
}
return null;
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
FLV_EVENT
});

84
packages/meta/lib/VideoPlayer/components/Loading/index.js
View File

@ -1,84 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/VideoPlayer/components/Loading/index.tsx
var Loading_exports = {};
__export(Loading_exports, {
default: () => Loading_default
});
module.exports = __toCommonJS(Loading_exports);
var import_react = __toESM(require("react"));
var import_antd = require("antd");
var import_classnames = __toESM(require("classnames"));
var import_iconfont = __toESM(require("../../../iconfont"));
var import_index = require("./index.less");
var componentName = `zhst-image__video-view`;
var Loading = (props) => {
const { status, reload } = props;
return /* @__PURE__ */ import_react.default.createElement(
"div",
{
className: (0, import_classnames.default)(`${componentName}__player-mask`),
onClick: (e) => {
e.stopPropagation();
}
},
status === "LOADING" && /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { tip: "加载中...", spinning: status === "LOADING" }),
status === "END" && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
"div",
{
onClick: () => {
reload();
},
className: (0, import_classnames.default)(`${componentName}__icon-wraper`)
},
/* @__PURE__ */ import_react.default.createElement(
import_iconfont.default,
{
styles: {
fill: "#ffffff",
color: "#ffffff"
},
size: 54,
icon: "icon-shuaxin"
}
)
), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}__player-mask-title`) }, "点击刷新后，将重新播放")),
status === "ERROR" && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}__icon-wraper`) }, /* @__PURE__ */ import_react.default.createElement(
import_iconfont.default,
{
styles: {
color: "#ffffff"
},
size: 54,
icon: "icon-jiazaishibai"
}
)), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}__player-mask-title`) }, "视频加载失败，", /* @__PURE__ */ import_react.default.createElement("a", { onClick: reload }, " ", "刷新")))
);
};
var Loading_default = Loading;

53
packages/meta/lib/VideoPlayer/components/Loading/index.less
View File

@ -1,53 +0,0 @@
.zhst-image__video-view__player-mask {
position: absolute;
width: 100%;
height: 100%;
z-index: 99;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgb(4 4 4 / 70%);
&--bg {
z-index: 999;
background-color: rgb(4 4 4 / 100%);
}
i {
cursor: pointer;
}
&-title {
margin-top: 12px;
color: #fff;
text-align: center;
& a {
color: #09f;
cursor: pointer;
text-decoration: underline;
}
}
}
.zhst-image__video-view__icon-wraper {
display: flex;
width: 80px;
height: 80px;
align-items: center;
justify-content: center;
background-color: rgb(255 255 255 / 10%);
border-radius: 50%;
cursor: pointer;
line-height: 80px;
text-align: center;
// &:hover {
// background: #0099ff;
// }
}

60
packages/meta/lib/VideoPlayer/components/Progress/index.js
View File

@ -1,60 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/VideoPlayer/components/Progress/index.tsx
var Progress_exports = {};
__export(Progress_exports, {
Range: () => Range,
default: () => Progress_default
});
module.exports = __toCommonJS(Progress_exports);
var import_react = __toESM(require("react"));
var import_classnames = __toESM(require("classnames"));
var import_antd = require("antd");
var import_index = require("./index.less");
var componentName = `zhst-image__range`;
var Range = (props) => {
const { className, style, showSlider = true, ...others } = props;
return /* @__PURE__ */ import_react.default.createElement(
"div",
{
style,
className: (0, import_classnames.default)(
`${componentName}`,
!showSlider && `${componentName}--no-slider`,
className
)
},
/* @__PURE__ */ import_react.default.createElement(import_antd.Slider, { ...others })
);
};
var Progress_default = Range;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Range
});

49
packages/meta/lib/VideoPlayer/components/Progress/index.less
View File

@ -1,49 +0,0 @@
.zhst-image__range {
position: relative;
&--no-slider {
.next-range-slider {
display: none;
}
}
& .next-range .next-range-track {
height: 8px;
margin-top: -4px;
border-radius: 8px;
}
& .next-range .next-range-selected {
height: 8px;
margin-top: -4px;
border-radius: 8px;
}
& .next-range .next-range-slider-inner {
width: 14px;
height: 14px;
border-color: #fff;
margin-top: -7px;
margin-left: -7px;
background-color: #0098ff;
}
& .next-range .next-range-slider {
width: 14px;
height: 14px;
margin-top: -7px;
margin-left: -7px;
}
& .next-range.simulation-click>.next-range-slider-inner {
border: 2px solid #fff !important;
}
& .next-range .next-range-frag.next-range-active .next-range-slider .next-range-slider-inner {
border: 2px solid #fff !important;
}
& .next-range .next-range-slider.next-range-slider-moving .next-range-slider-inner {
border: 2px solid #fff !important;
}
}

36
packages/meta/lib/VideoPlayer/index.js
View File

@ -1,36 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/VideoPlayer/index.tsx
var VideoPlayer_exports = {};
__export(VideoPlayer_exports, {
default: () => VideoPlayer_default
});
module.exports = __toCommonJS(VideoPlayer_exports);
var import_VideoPlayer = __toESM(require("./VideoPlayer"));
var VideoPlayer_default = import_VideoPlayer.default;

75
packages/meta/lib/VideoPlayer/index.less
View File

@ -1,75 +0,0 @@
.zhst-image__video-view {
position: relative;
overflow: hidden;
width: 100%;
height: 532px;
background-color: #333;
// &-flv {
// width: 85%;
// }
&-screenshot {
position: absolute;
z-index: 10;
}
&-crop-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
&-align {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
&-opt {
position: absolute;
z-index: 99;
bottom: 0;
display: flex;
width: 100%;
height: 32px;
box-sizing: border-box;
align-items: center;
padding: 0 12px;
background-color: rgb(0 0 0 / 80%);
line-height: 32px;
&>div:first-child {
display: flex;
align-items: center;
margin-right: 12px;
}
&>div:last-child {
display: flex;
align-items: center;
margin-left: 12px;
}
&-range {
display: flex;
height: 32px;
flex: 1;
align-items: center;
line-height: 32px;
text-align: center;
&>div:first-child {
flex: 1;
}
&>div:last-child {
width: 100px;
margin-left: 8px;
color: #fff;
}
}
}
}

41
packages/meta/lib/VideoPlayer/videoPlayerHelper.js
View File

@ -1,41 +0,0 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/VideoPlayer/videoPlayerHelper.ts
var videoPlayerHelper_exports = {};
__export(videoPlayerHelper_exports, {
getShowStatus: () => getShowStatus
});
module.exports = __toCommonJS(videoPlayerHelper_exports);
function getShowStatus(isLoadingVideo, isEnd, isError) {
let status = null;
if (isLoadingVideo) {
status = "LOADING";
}
if (isError) {
status = "ERROR";
}
if (isEnd) {
status = "END";
}
return status;
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
getShowStatus
});

70
packages/meta/lib/doubleClick/index.js
View File

@ -1,70 +0,0 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/doubleClick/index.tsx
var doubleClick_exports = {};
__export(doubleClick_exports, {
default: () => doubleClick_default,
doubleCheck: () => doubleCheck
});
module.exports = __toCommonJS(doubleClick_exports);
var import_func = require("@zhst/func");
var import_antd = require("antd");
var import_hooks = require("@zhst/hooks");
var { confirm } = import_antd.Modal;
var doubleCheck = (title = "警告", option) => {
const {
okFunc = import_func.noop,
cancelFunc = import_func.noop,
doubleCheckKey,
doubleCheckTitle = "不再询问",
...others
} = option || {};
return confirm({
title,
// type: 'warning',
onCancel: async (isOk) => {
if (isOk) {
await okFunc();
} else {
await cancelFunc();
}
},
...doubleCheckKey ? {
renderFooterRight: () => {
const [value, setValue] = (0, import_hooks.useDoubleCheck)(doubleCheckKey);
return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
import_antd.Checkbox,
{
checked: value,
onChange: (v) => {
setValue(v);
}
},
doubleCheckTitle
));
}
} : {},
...others
});
};
var doubleClick_default = doubleCheck;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
doubleCheck
});

1679
packages/meta/lib/iconfont/iconfont.css
View File

File diff suppressed because it is too large Load Diff

36
packages/meta/lib/iconfont/iconfont.js
View File

File diff suppressed because one or more lines are too long

BIN
packages/meta/lib/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
packages/meta/lib/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
packages/meta/lib/iconfont/iconfont.woff2
View File

Binary file not shown.

69
packages/meta/lib/iconfont/index.js
View File

@ -1,69 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/iconfont/index.tsx
var iconfont_exports = {};
__export(iconfont_exports, {
default: () => iconfont_default
});
module.exports = __toCommonJS(iconfont_exports);
var import_react = __toESM(require("react"));
var import_classnames = __toESM(require("classnames"));
var import_iconfont = require("./iconfont.css");
var IconFont = (props) => {
const {
title = "",
className = "",
styles = {},
icon,
size = 14,
onIconClick,
children,
active = false,
color = ""
} = props || {};
return /* @__PURE__ */ import_react.default.createElement(
"i",
{
title,
onClick: (e) => {
onIconClick && onIconClick(e);
},
style: {
...styles,
cursor: "pointer",
fontSize: size,
color,
...active ? { color: "#09f" } : {}
},
className: (0, import_classnames.default)("iconfont", icon, className)
},
children
);
};
var iconfont_default = IconFont;

102
packages/meta/lib/index.js
View File

@ -1,102 +0,0 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.tsx
var src_exports = {};
__export(src_exports, {
BigImagePreview: () => import_BigImagePreview.default,
Button: () => import_button.default,
Calender: () => import_calendar.default,
CheckBox: () => import_checkbox.default,
CompareImage: () => import_CompareImage.default,
ConfigProvider: () => import_config_provider.default,
DatePicker: () => import_date_picker.default,
Empty: () => import_empty.default,
Form: () => import_form.default,
Grid: () => import_grid.default,
Icon: () => import_iconfont.default,
Input: () => import_input.default,
Locale: () => import_locale.default,
Radio: () => import_radio.default,
Select: () => import_select.default,
Space: () => import_space.default,
Switch: () => import_switch.default,
Tabs: () => import_tabs.default,
Theme: () => import_theme.default,
TimePicker: () => import_time_picker.default,
VideoPlayer: () => import_VideoPlayer.default,
doubleClick: () => import_doubleClick.default
});
module.exports = __toCommonJS(src_exports);
var import_doubleClick = __toESM(require("./doubleClick"));
var import_iconfont = __toESM(require("./iconfont"));
var import_CompareImage = __toESM(require("./CompareImage"));
var import_BigImagePreview = __toESM(require("./BigImagePreview"));
var import_VideoPlayer = __toESM(require("./VideoPlayer"));
var import_tabs = __toESM(require("./tabs"));
var import_button = __toESM(require("./button"));
var import_space = __toESM(require("./space"));
var import_switch = __toESM(require("./switch"));
var import_grid = __toESM(require("./grid"));
var import_time_picker = __toESM(require("./time-picker"));
var import_date_picker = __toESM(require("./date-picker"));
var import_calendar = __toESM(require("./calendar"));
var import_empty = __toESM(require("./empty"));
var import_form = __toESM(require("./form"));
var import_select = __toESM(require("./select"));
var import_radio = __toESM(require("./radio"));
var import_checkbox = __toESM(require("./checkbox"));
var import_input = __toESM(require("./input"));
var import_config_provider = __toESM(require("./config-provider"));
var import_theme = __toESM(require("./theme"));
var import_locale = __toESM(require("./locale"));
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
BigImagePreview,
Button,
Calender,
CheckBox,
CompareImage,
ConfigProvider,
DatePicker,
Empty,
Form,
Grid,
Icon,
Input,
Locale,
Radio,
Select,
Space,
Switch,
Tabs,
Theme,
TimePicker,
VideoPlayer,
doubleClick
});

42
packages/meta/lib/utils/constants.js
View File

@ -1,42 +0,0 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/utils/constants.ts
var constants_exports = {};
__export(constants_exports, {
CROP_TYPE: () => CROP_TYPE,
defaultAlignOption: () => defaultAlignOption
});
module.exports = __toCommonJS(constants_exports);
var CROP_TYPE = {
CUSTOM: "CSUTOM",
AUTO: "AUTO"
};
var defaultAlignOption = {
points: ["bl", "br"],
offset: [6, 0],
overflow: {
adjustX: true,
adjustY: true
}
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
CROP_TYPE,
defaultAlignOption
});

0
packages/meta/lib/utils/index.js
View File

6
packages/meta/package.json
View File

@ -40,6 +40,7 @@
"@ant-design/cssinjs": "^1.18.2",
"@ant-design/icons": "^5.2.6",
"@ctrl/tinycolor": "^4.0.2",
"@rc-component/mutate-observer": "^1.1.0",
"@rc-component/trigger": "^1.18.2",
"@turf/boolean-point-in-polygon": "^6.5.0",
"@turf/turf": "^6.5.0",
@ -49,16 +50,20 @@
"antd": "^5.12.5",
"antd-style": "^3.6.1",
"classnames": "^2.5.1",
"copy-to-clipboard": "^3.3.3",
"dayjs": "^1.11.10",
"downloadjs": "^1.4.7",
"flv.js": "^1.6.2",
"rc-align": "^4.0.15",
"rc-checkbox": "^3.1.0",
"rc-dialog": "^9.3.4",
"rc-field-form": "^1.41.0",
"rc-input": "^1.4.3",
"rc-input-number": "^8.6.1",
"rc-motion": "^2.9.0",
"rc-pagination": "^4.0.4",
"rc-picker": "4.0.0-alpha.36",
"rc-resize-observer": "^1.4.0",
"rc-select": "^14.11.0",
"rc-switch": "^4.1.0",
"rc-tabs": "^14.0.0",
@ -67,6 +72,7 @@
"rc-util": "^5.38.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-draggable": "^4.4.6",
"scroll-into-view-if-needed": "^3.1.0"
}
}

85
packages/meta/src/descriptions/Cell.tsx Normal file
View File

@ -0,0 +1,85 @@
import classNames from 'classnames';
import * as React from 'react';
function notEmpty(val: any) {
return val !== undefined && val !== null;
}
export interface CellProps {
itemPrefixCls: string;
span: number;
className?: string;
component: string;
style?: React.CSSProperties;
labelStyle?: React.CSSProperties;
contentStyle?: React.CSSProperties;
bordered?: boolean;
label?: React.ReactNode;
content?: React.ReactNode;
colon?: boolean;
}
const Cell: React.FC<CellProps> = (props) => {
const {
itemPrefixCls,
component,
span,
className,
style,
labelStyle,
contentStyle,
bordered,
label,
content,
colon,
} = props;
const Component = component as keyof JSX.IntrinsicElements;
if (bordered) {
return (
<Component
className={classNames(
{
[`${itemPrefixCls}-item-label`]: notEmpty(label),
[`${itemPrefixCls}-item-content`]: notEmpty(content),
},
className,
)}
style={style}
colSpan={span}
>
{notEmpty(label) && <span style={labelStyle}>{label}</span>}
{notEmpty(content) && <span style={contentStyle}>{content}</span>}
</Component>
);
}
return (
<Component
className={classNames(`${itemPrefixCls}-item`, className)}
style={style}
colSpan={span}
>
<div className={`${itemPrefixCls}-item-container`}>
{(label || label === 0) && (
<span
className={classNames(`${itemPrefixCls}-item-label`, {
[`${itemPrefixCls}-item-no-colon`]: !colon,
})}
style={labelStyle}
>
{label}
</span>
)}
{(content || content === 0) && (
<span className={classNames(`${itemPrefixCls}-item-content`)} style={contentStyle}>
{content}
</span>
)}
</div>
</Component>
);
};
export default Cell;

10
packages/meta/src/descriptions/DescriptionsContext.ts Normal file
View File

@ -0,0 +1,10 @@
import React from 'react';
export interface DescriptionsContextProps {
labelStyle?: React.CSSProperties;
contentStyle?: React.CSSProperties;
}
const DescriptionsContext = React.createContext<DescriptionsContextProps>({});
export default DescriptionsContext;

16
packages/meta/src/descriptions/Item.ts Normal file
View File

@ -0,0 +1,16 @@
import type * as React from 'react';
export interface DescriptionsItemProps {
prefixCls?: string;
className?: string;
style?: React.CSSProperties;
label?: React.ReactNode;
labelStyle?: React.CSSProperties;
contentStyle?: React.CSSProperties;
children: React.ReactNode;
span?: number;
}
const DescriptionsItem: React.FC<DescriptionsItemProps> = ({ children }) => children as JSX.Element;
export default DescriptionsItem;

138
packages/meta/src/descriptions/Row.tsx Normal file
View File

@ -0,0 +1,138 @@
import * as React from 'react';
import type { InternalDescriptionsItemType } from '.';
import Cell from './Cell';
import type { DescriptionsContextProps } from './DescriptionsContext';
import DescriptionsContext from './DescriptionsContext';
interface CellConfig {
component: string | [string, string];
type: string;
showLabel?: boolean;
showContent?: boolean;
}
function renderCells(
items: InternalDescriptionsItemType[],
{ colon, prefixCls, bordered }: RowProps,
{
component,
type,
showLabel,
showContent,
labelStyle: rootLabelStyle,
contentStyle: rootContentStyle,
}: CellConfig & DescriptionsContextProps,
) {
return items.map(
(
{
label,
children,
prefixCls: itemPrefixCls = prefixCls,
className,
style,
labelStyle,
contentStyle,
span = 1,
key,
},
index,
) => {
if (typeof component === 'string') {
return (
<Cell
key={`${type}-${key || index}`}
className={className}
style={style}
labelStyle={{ ...rootLabelStyle, ...labelStyle }}
contentStyle={{ ...rootContentStyle, ...contentStyle }}
span={span}
colon={colon}
component={component}
itemPrefixCls={itemPrefixCls}
bordered={bordered}
label={showLabel ? label : null}
content={showContent ? children : null}
/>
);
}
return [
<Cell
key={`label-${key || index}`}
className={className}
style={{ ...rootLabelStyle, ...style, ...labelStyle }}
span={1}
colon={colon}
component={component[0]}
itemPrefixCls={itemPrefixCls}
bordered={bordered}
label={label}
/>,
<Cell
key={`content-${key || index}`}
className={className}
style={{ ...rootContentStyle, ...style, ...contentStyle }}
span={span * 2 - 1}
component={component[1]}
itemPrefixCls={itemPrefixCls}
bordered={bordered}
content={children}
/>,
];
},
);
}
export interface RowProps {
prefixCls: string;
vertical: boolean;
row: InternalDescriptionsItemType[];
bordered?: boolean;
colon: boolean;
index: number;
children?: React.ReactNode;
}
const Row: React.FC<RowProps> = (props) => {
const descContext = React.useContext(DescriptionsContext);
const { prefixCls, vertical, row, index, bordered } = props;
if (vertical) {
return (
<>
<tr key={`label-${index}`} className={`${prefixCls}-row`}>
{renderCells(row, props, {
component: 'th',
type: 'label',
showLabel: true,
...descContext,
})}
</tr>
<tr key={`content-${index}`} className={`${prefixCls}-row`}>
{renderCells(row, props, {
component: 'td',
type: 'content',
showContent: true,
...descContext,
})}
</tr>
</>
);
}
return (
<tr key={index} className={`${prefixCls}-row`}>
{renderCells(row, props, {
component: bordered ? ['th', 'td'] : 'td',
type: 'item',
showLabel: true,
showContent: true,
...descContext,
})}
</tr>
);
};
export default Row;

2748
packages/meta/src/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap Normal file
View File

File diff suppressed because it is too large Load Diff

2504
packages/meta/src/descriptions/__tests__/__snapshots__/demo.test.ts.snap Normal file
View File

File diff suppressed because it is too large Load Diff

686
packages/meta/src/descriptions/__tests__/__snapshots__/index.test.tsx.snap Normal file
View File

@ -0,0 +1,686 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Descriptions Descriptions support colon 1`] = `
<div
class="ant-descriptions"
>
<div
class="ant-descriptions-view"
>
<table>
<tbody>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label ant-descriptions-item-no-colon"
>
Product
</span>
<span
class="ant-descriptions-item-content"
>
Cloud Database
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
`;
exports[`Descriptions Descriptions support style 1`] = `
<div
class="ant-descriptions"
style="background-color: rgb(232, 232, 232);"
>
<div
class="ant-descriptions-view"
>
<table>
<tbody>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
Cloud Database
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
`;
exports[`Descriptions Descriptions.Item support className 1`] = `
<div
class="ant-descriptions"
>
<div
class="ant-descriptions-view"
>
<table>
<tbody>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item my-class"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Product
</span>
<span
class="ant-descriptions-item-content"
>
Cloud Database
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
`;
exports[`Descriptions column is number 1`] = `
<div
class="ant-descriptions"
>
<div
class="ant-descriptions-view"
>
<table>
<tbody>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Product
</span>
<span
class="ant-descriptions-item-content"
>
Cloud Database
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Billing
</span>
<span
class="ant-descriptions-item-content"
>
Prepaid
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
time
</span>
<span
class="ant-descriptions-item-content"
>
18:00:00
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="3"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Amount
</span>
<span
class="ant-descriptions-item-content"
>
$80.00
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
`;
exports[`Descriptions number 0 should render correct 1`] = `
<div
class="ant-descriptions"
>
<div
class="ant-descriptions-view"
>
<table>
<tbody>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
style="color: red;"
>
0
</span>
<span
class="ant-descriptions-item-content"
style="color: red;"
>
0
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
`;
exports[`Descriptions should items work 1`] = `
<div>
<div
class="ant-descriptions"
>
<div
class="ant-descriptions-view"
>
<table>
<tbody>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
UserName
</span>
<span
class="ant-descriptions-item-content"
>
Zhou Maomao
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Telephone
</span>
<span
class="ant-descriptions-item-content"
>
1810000000
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Live
</span>
<span
class="ant-descriptions-item-content"
>
Hangzhou, Zhejiang
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
`;
exports[`Descriptions should work with React Fragment 1`] = `
<div
class="ant-descriptions"
>
<div
class="ant-descriptions-view"
>
<table>
<tbody>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
bamboo
</span>
<span
class="ant-descriptions-item-content"
>
bamboo
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
bamboo
</span>
<span
class="ant-descriptions-item-content"
>
bamboo
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
bamboo
</span>
<span
class="ant-descriptions-item-content"
>
bamboo
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
`;
exports[`Descriptions vertical layout 1`] = `
<div
class="ant-descriptions"
>
<div
class="ant-descriptions-view"
>
<table>
<tbody>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Product
</span>
</div>
</th>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
Cloud Database
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Billing
</span>
</div>
</th>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
Prepaid
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
time
</span>
</div>
</th>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
18:00:00
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Amount
</span>
</div>
</th>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
$80.00
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
`;
exports[`Descriptions when item is rendered conditionally 1`] = `
<div
class="ant-descriptions"
>
<div
class="ant-descriptions-view"
>
<table>
<tbody>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Product
</span>
<span
class="ant-descriptions-item-content"
>
Cloud Database
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Billing
</span>
<span
class="ant-descriptions-item-content"
>
Prepaid
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
time
</span>
<span
class="ant-descriptions-item-content"
>
18:00:00
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Amount
</span>
<span
class="ant-descriptions-item-content"
>
$80.00
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
`;

3
packages/meta/src/descriptions/__tests__/demo-extend.test.ts Normal file
View File

@ -0,0 +1,3 @@
import { extendTest } from '../../../tests/shared/demoTest';
extendTest('descriptions');

3
packages/meta/src/descriptions/__tests__/demo.test.ts Normal file
View File

@ -0,0 +1,3 @@
import demoTest from '../../../tests/shared/demoTest';
demoTest('descriptions');

26
packages/meta/src/descriptions/__tests__/hooks.test.tsx Normal file
View File

@ -0,0 +1,26 @@
import React from 'react';
import Descriptions from '..';
import { render } from '../../../tests/utils';
import useBreakpoint from '../../grid/hooks/useBreakpoint';
import useItems from '../hooks/useItems';
describe('Descriptions.Hooks', () => {
it('Should Descriptions not throw react key prop error in jsx mode', () => {
const Demo = () => {
const screens = useBreakpoint();
const items = useItems(
screens,
undefined,
<Descriptions.Item key="bamboo" label="UserName">
Bamboo
</Descriptions.Item>,
);
return <p>{(items[0] as any).key}</p>;
};
const { container } = render(<Demo />);
expect(container.querySelector('p')?.textContent).toBe('bamboo');
});
});

5
packages/meta/src/descriptions/__tests__/image.test.ts Normal file
View File

@ -0,0 +1,5 @@
import { imageDemoTest } from '../../../tests/shared/imageTest';
describe('Descriptions image', () => {
imageDemoTest('descriptions');
});

380
packages/meta/src/descriptions/__tests__/index.test.tsx Normal file
View File

@ -0,0 +1,380 @@
import React from 'react';
import MockDate from 'mockdate';
import Descriptions from '..';
import { resetWarned } from '../../_util/warning';
import mountTest from '../../../tests/shared/mountTest';
import { render } from '../../../tests/utils';
import ConfigProvider from '../../config-provider';
describe('Descriptions', () => {
mountTest(Descriptions);
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
afterEach(() => {
MockDate.reset();
errorSpy.mockReset();
});
afterAll(() => {
errorSpy.mockRestore();
});
it('when max-width: 575px, column=1', () => {
const wrapper = render(
<Descriptions>
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
<Descriptions.Item>No-Label</Descriptions.Item>
</Descriptions>,
);
expect(wrapper.container.querySelectorAll('tr')).toHaveLength(5);
expect(wrapper.container.querySelectorAll('.ant-descriptions-item-label')).toHaveLength(4);
wrapper.unmount();
});
it('when max-width: 575px, column=2', () => {
// eslint-disable-next-line global-require
const wrapper = render(
<Descriptions column={{ xs: 2 }}>
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
</Descriptions>,
);
expect(wrapper.container.querySelectorAll('tr')).toHaveLength(2);
wrapper.unmount();
});
it('when max-width: 575px, column=2, span=2', () => {
// eslint-disable-next-line global-require
const { container } = render(
<Descriptions
column={{ xs: 2 }}
items={[
{
label: 'Product',
children: 'Cloud Database',
span: { xs: 2 },
},
{
label: 'Billing',
children: 'Prepaid',
span: { xs: 1 },
},
{
label: 'Time',
children: '18:00:00',
span: { xs: 1 },
},
]}
/>,
);
expect(container.querySelectorAll('.ant-descriptions-item')[0]).toHaveAttribute('colSpan', '2');
expect(container.querySelectorAll('.ant-descriptions-item')[1]).toHaveAttribute('colSpan', '1');
expect(container.querySelectorAll('.ant-descriptions-item')[2]).toHaveAttribute('colSpan', '1');
});
it('column is number', () => {
// eslint-disable-next-line global-require
const wrapper = render(
<Descriptions column={3}>
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
</Descriptions>,
);
expect(wrapper.container.firstChild).toMatchSnapshot();
wrapper.unmount();
});
it('when typeof column is object', () => {
const wrapper = render(
<Descriptions column={{ xs: 8, sm: 16, md: 24 }}>
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
</Descriptions>,
);
expect(
Array.from(wrapper.container.querySelectorAll('td'))
.map((i) => Number(i.getAttribute('colspan')))
.filter(Boolean)
.reduce((total, cur) => total + cur, 0),
).toBe(8);
wrapper.unmount();
});
it('warning if exceed the row span', () => {
resetWarned();
render(
<Descriptions column={3}>
<Descriptions.Item label="Product" span={2}>
Cloud Database
</Descriptions.Item>
<Descriptions.Item label="Billing" span={2}>
Prepaid
</Descriptions.Item>
</Descriptions>,
);
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Descriptions] Sum of column `span` in a line not match `column` of Descriptions.',
);
});
it('when item is rendered conditionally', () => {
const hasDiscount = false;
const wrapper = render(
<Descriptions>
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
{hasDiscount && <Descriptions.Item label="Discount">$20.00</Descriptions.Item>}
</Descriptions>,
);
expect(wrapper.container.firstChild).toMatchSnapshot();
wrapper.unmount();
});
it('vertical layout', () => {
// eslint-disable-next-line global-require
const wrapper = render(
<Descriptions layout="vertical">
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
</Descriptions>,
);
expect(wrapper.container.firstChild).toMatchSnapshot();
wrapper.unmount();
});
it('Descriptions.Item support className', () => {
const wrapper = render(
<Descriptions>
<Descriptions.Item label="Product" className="my-class">
Cloud Database
</Descriptions.Item>
</Descriptions>,
);
expect(wrapper.container.firstChild).toMatchSnapshot();
});
it('Descriptions support colon', () => {
const wrapper = render(
<Descriptions colon={false}>
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
</Descriptions>,
);
expect(wrapper.container.firstChild).toMatchSnapshot();
});
it('Descriptions support style', () => {
const wrapper = render(
<Descriptions style={{ backgroundColor: '#e8e8e8' }}>
<Descriptions.Item>Cloud Database</Descriptions.Item>
</Descriptions>,
);
expect(wrapper.container.firstChild).toMatchSnapshot();
});
it('Descriptions support id', () => {
const wrapper = render(
<Descriptions id="descriptions">
<Descriptions.Item>Cloud Database</Descriptions.Item>
</Descriptions>,
);
const descriptionItemsElement = wrapper.container.querySelector('#descriptions');
expect(descriptionItemsElement).not.toBeNull();
});
it('keep key', () => {
render(
<Descriptions>
<Descriptions.Item key="bamboo">1</Descriptions.Item>
</Descriptions>,
);
expect(jest.spyOn(document, 'createElement')).not.toHaveBeenCalled();
});
// https://github.com/ant-design/ant-design/issues/19887
it('should work with React Fragment', () => {
if (!React.Fragment) {
return;
}
const wrapper = render(
<Descriptions>
<Descriptions.Item label="bamboo">bamboo</Descriptions.Item>
<>
<Descriptions.Item label="bamboo">bamboo</Descriptions.Item>
<Descriptions.Item label="bamboo">bamboo</Descriptions.Item>
</>
</Descriptions>,
);
expect(wrapper.container.firstChild).toMatchSnapshot();
});
// https://github.com/ant-design/ant-design/issues/20255
it('columns 5 with customize', () => {
const wrapper = render(
<Descriptions layout="vertical" column={4}>
{/* 1 1 1 1 */}
<Descriptions.Item label="bamboo">bamboo</Descriptions.Item>
<Descriptions.Item label="bamboo">bamboo</Descriptions.Item>
<Descriptions.Item label="bamboo">bamboo</Descriptions.Item>
<Descriptions.Item label="bamboo">bamboo</Descriptions.Item>
{/* 2 2 */}
<Descriptions.Item label="bamboo" span={2}>
bamboo
</Descriptions.Item>
<Descriptions.Item label="bamboo" span={2}>
bamboo
</Descriptions.Item>
{/* 3 1 */}
<Descriptions.Item label="bamboo" span={3}>
bamboo
</Descriptions.Item>
<Descriptions.Item label="bamboo">bamboo</Descriptions.Item>
</Descriptions>,
);
function matchSpan(rowIndex: number, spans: number[]) {
const trs = Array.from(wrapper.container.querySelectorAll('tr')).at(rowIndex);
const tds = Array.from(trs?.querySelectorAll('th')!);
expect(tds).toHaveLength(spans.length);
tds.forEach((td, index) => {
expect(Number(td.getAttribute('colSpan'))).toEqual(spans[index]);
});
}
matchSpan(0, [1, 1, 1, 1]);
matchSpan(2, [2, 2]);
matchSpan(4, [3, 1]);
});
it('number value should render correct', () => {
const wrapper = render(
<Descriptions bordered>
<Descriptions.Item label={0}>0</Descriptions.Item>
</Descriptions>,
);
expect(wrapper.container.querySelector('th')).toHaveClass('ant-descriptions-item-label');
expect(wrapper.container.querySelector('td')).toHaveClass('ant-descriptions-item-content');
});
it('Descriptions support extra', () => {
const wrapper1 = render(
<Descriptions extra="Edit">
<Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
</Descriptions>,
);
const wrapper2 = render(
<Descriptions>
<Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
</Descriptions>,
);
expect(wrapper1.container.querySelector('.ant-descriptions-extra')).toBeTruthy();
expect(wrapper2.container.querySelector('.ant-descriptions-extra')).toBeFalsy();
});
it('number 0 should render correct', () => {
const wrapper = render(
<Descriptions>
<Descriptions.Item label={0} labelStyle={{ color: 'red' }} contentStyle={{ color: 'red' }}>
{0}
</Descriptions.Item>
</Descriptions>,
);
expect(wrapper.container.firstChild).toMatchSnapshot();
});
it('should pass data-* and accessibility attributes', () => {
const { getByTestId } = render(
<Descriptions data-testid="test-id" data-id="12345" aria-describedby="some-label">
<Descriptions.Item label="banana">banana</Descriptions.Item>
</Descriptions>,
);
const container = getByTestId('test-id');
expect(container).toHaveAttribute('data-id', '12345');
expect(container).toHaveAttribute('aria-describedby', 'some-label');
});
it('Descriptions should inherit the size from ConfigProvider if the componentSize is set', () => {
const { container } = render(
<ConfigProvider componentSize="small">
<Descriptions bordered>
<Descriptions.Item label="small">small</Descriptions.Item>
</Descriptions>
</ConfigProvider>,
);
expect(container.querySelectorAll('.ant-descriptions-small')).toHaveLength(1);
});
it('should items work', () => {
const { container } = render(
<Descriptions
items={[
{
key: '1',
label: 'UserName',
children: 'Zhou Maomao',
},
{
key: '2',
label: 'Telephone',
children: '1810000000',
},
{
key: '3',
label: 'Live',
children: 'Hangzhou, Zhejiang',
},
]}
/>,
);
expect(container.querySelector('.ant-descriptions-item')).toBeTruthy();
expect(container.querySelectorAll('.ant-descriptions-item')).toHaveLength(3);
expect(container).toMatchSnapshot();
});
it('Descriptions nested within an Item are unaffected by the external borderless style', () => {
const { container } = render(
<Descriptions bordered>
<Descriptions.Item>
<Descriptions bordered={false} />
</Descriptions.Item>
</Descriptions>,
);
const nestDesc = container.querySelectorAll('.ant-descriptions')?.[1];
const view = nestDesc.querySelector('.ant-descriptions-view');
expect(getComputedStyle(view!).border).toBeFalsy();
});
it('Should Descriptions not throw react key prop error in jsx mode', () => {
render(
<Descriptions title="User Info">
<Descriptions.Item key="1" label="UserName">
Zhou Maomao
</Descriptions.Item>
<Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
</Descriptions>,
);
expect(errorSpy).not.toHaveBeenCalledWith(
expect.stringContaining('`key` is not a prop'),
expect.anything(),
expect.anything(),
);
});
});

12
packages/meta/src/descriptions/constant.ts Normal file
View File

@ -0,0 +1,12 @@
import type { Breakpoint } from '../_util/responsiveObserver';
const DEFAULT_COLUMN_MAP: Record<Breakpoint, number> = {
xxl: 3,
xl: 3,
lg: 3,
md: 3,
sm: 2,
xs: 1,
};
export default DEFAULT_COLUMN_MAP;

7
packages/meta/src/descriptions/demo/basic.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
简单的展示。
## en-US
Simplest Usage.

35
packages/meta/src/descriptions/demo/basic.tsx Normal file
View File

@ -0,0 +1,35 @@
import React from 'react';
import { Descriptions } from 'antd';
import type { DescriptionsProps } from 'antd';
const items: DescriptionsProps['items'] = [
{
key: '1',
label: 'UserName',
children: 'Zhou Maomao',
},
{
key: '2',
label: 'Telephone',
children: '1810000000',
},
{
key: '3',
label: 'Live',
children: 'Hangzhou, Zhejiang',
},
{
key: '4',
label: 'Remark',
children: 'empty',
},
{
key: '5',
label: 'Address',
children: 'No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China',
},
];
const App: React.FC = () => <Descriptions title="User Info" items={items} />;
export default App;

7
packages/meta/src/descriptions/demo/border.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
带边框和背景颜色列表。
## en-US
Descriptions with border and background color.

77
packages/meta/src/descriptions/demo/border.tsx Normal file
View File

@ -0,0 +1,77 @@
import React from 'react';
import { Badge, Descriptions } from 'antd';
import type { DescriptionsProps } from 'antd';
const items: DescriptionsProps['items'] = [
{
key: '1',
label: 'Product',
children: 'Cloud Database',
},
{
key: '2',
label: 'Billing Mode',
children: 'Prepaid',
},
{
key: '3',
label: 'Automatic Renewal',
children: 'YES',
},
{
key: '4',
label: 'Order time',
children: '2018-04-24 18:00:00',
},
{
key: '5',
label: 'Usage Time',
children: '2019-04-24 18:00:00',
span: 2,
},
{
key: '6',
label: 'Status',
children: <Badge status="processing" text="Running" />,
span: 3,
},
{
key: '7',
label: 'Negotiated Amount',
children: '$80.00',
},
{
key: '8',
label: 'Discount',
children: '$20.00',
},
{
key: '9',
label: 'Official Receipts',
children: '$60.00',
},
{
key: '10',
label: 'Config Info',
children: (
<>
Data disk type: MongoDB
<br />
Database version: 3.4
<br />
Package: dds.mongo.mid
<br />
Storage space: 10 GB
<br />
Replication factor: 3
<br />
Region: East China 1
<br />
</>
),
},
];
const App: React.FC = () => <Descriptions title="User Info" bordered items={items} />;
export default App;

7
packages/meta/src/descriptions/demo/component-token.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
Component Token Debug.
## en-US
Component Token Debug.

143
packages/meta/src/descriptions/demo/component-token.tsx Normal file
View File

@ -0,0 +1,143 @@
import React, { useState } from 'react';
import type { DescriptionsProps, RadioChangeEvent } from 'antd';
import { Button, ConfigProvider, Descriptions, Radio } from 'antd';
const borderedItems: DescriptionsProps['items'] = [
{
key: '1',
label: 'Product',
children: 'Cloud Database',
},
{
key: '2',
label: 'Billing',
children: 'Prepaid',
},
{
key: '3',
label: 'Time',
children: '18:00:00',
},
{
key: '4',
label: 'Amount',
children: '$80.00',
},
{
key: '5',
label: 'Discount',
children: '$20.00',
},
{
key: '6',
label: 'Official',
children: '$60.00',
},
{
key: '7',
label: 'Config Info',
children: (
<>
Data disk type: MongoDB
<br />
Database version: 3.4
<br />
Package: dds.mongo.mid
<br />
Storage space: 10 GB
<br />
Replication factor: 3
<br />
Region: East China 1
<br />
</>
),
},
];
const items: DescriptionsProps['items'] = [
{
key: '1',
label: 'Product',
children: 'Cloud Database',
},
{
key: '2',
label: 'Billing',
children: 'Prepaid',
},
{
key: '3',
label: 'Time',
children: '18:00:00',
},
{
key: '4',
label: 'Amount',
children: '$80.00',
},
{
key: '5',
label: 'Discount',
children: '$20.00',
},
{
key: '6',
label: 'Official',
children: '$60.00',
},
];
const App: React.FC = () => {
const [size, setSize] = useState<'default' | 'middle' | 'small'>('default');
const onChange = (e: RadioChangeEvent) => {
console.log('size checked', e.target.value);
setSize(e.target.value);
};
return (
<ConfigProvider
theme={{
components: {
Descriptions: {
labelBg: 'red',
titleColor: 'red',
titleMarginBottom: 2,
itemPaddingBottom: 8,
colonMarginRight: 10,
colonMarginLeft: 20,
contentColor: 'green',
extraColor: 'blue',
},
},
}}
>
<div>
<Radio.Group onChange={onChange} value={size}>
<Radio value="default">default</Radio>
<Radio value="middle">middle</Radio>
<Radio value="small">small</Radio>
</Radio.Group>
<br />
<br />
<Descriptions
bordered
title="Custom Size"
size={size}
extra={<div>extra color: blue</div>}
items={borderedItems}
/>
<br />
<br />
<Descriptions
title="Custom Size"
size={size}
extra={<Button type="primary">Edit</Button>}
items={items}
/>
</div>
</ConfigProvider>
);
};
export default App;

7
packages/meta/src/descriptions/demo/jsx.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
JSX 风格演示。
## en-US
JSX Style Demo.

16
packages/meta/src/descriptions/demo/jsx.tsx Normal file
View File

@ -0,0 +1,16 @@
import React from 'react';
import { Descriptions } from 'antd';
const App: React.FC = () => (
<Descriptions title="User Info">
<Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
<Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
<Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
<Descriptions.Item label="Remark">empty</Descriptions.Item>
<Descriptions.Item label="Address">
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
</Descriptions.Item>
</Descriptions>
);
export default App;

7
packages/meta/src/descriptions/demo/responsive.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
通过响应式的配置可以实现在小屏幕设备上的完美呈现。
## en-US
Responsive configuration enables perfect presentation on small screen devices.

71
packages/meta/src/descriptions/demo/responsive.tsx Normal file
View File

@ -0,0 +1,71 @@
import React from 'react';
import { Descriptions } from 'antd';
import type { DescriptionsProps } from 'antd';
const items: DescriptionsProps['items'] = [
{
label: 'Product',
children: 'Cloud Database',
},
{
label: 'Billing',
children: 'Prepaid',
},
{
label: 'Time',
children: '18:00:00',
},
{
label: 'Amount',
children: '$80.00',
},
{
label: 'Discount',
span: { xl: 2, xxl: 2 },
children: '$20.00',
},
{
label: 'Official',
span: { xl: 2, xxl: 2 },
children: '$60.00',
},
{
label: 'Config Info',
span: { xs: 1, sm: 2, md: 3, lg: 3, xl: 2, xxl: 2 },
children: (
<>
Data disk type: MongoDB
<br />
Database version: 3.4
<br />
Package: dds.mongo.mid
</>
),
},
{
label: 'Hardware Info',
span: { xs: 1, sm: 2, md: 3, lg: 3, xl: 2, xxl: 2 },
children: (
<>
CPU: 6 Core 3.5 GHz
<br />
Storage space: 10 GB
<br />
Replication factor: 3
<br />
Region: East China 1
</>
),
},
];
const App: React.FC = () => (
<Descriptions
title="Responsive Descriptions"
bordered
column={{ xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4 }}
items={items}
/>
);
export default App;

7
packages/meta/src/descriptions/demo/size.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
自定义尺寸，适应在各种容器中展示。
## en-US
Custom sizes to fit in a variety of containers.

127
packages/meta/src/descriptions/demo/size.tsx Normal file
View File

@ -0,0 +1,127 @@
import React, { useState } from 'react';
import { Button, Descriptions, Radio } from 'antd';
import type { RadioChangeEvent, DescriptionsProps } from 'antd';
const borderedItems: DescriptionsProps['items'] = [
{
key: '1',
label: 'Product',
children: 'Cloud Database',
},
{
key: '2',
label: 'Billing',
children: 'Prepaid',
},
{
key: '3',
label: 'Time',
children: '18:00:00',
},
{
key: '4',
label: 'Amount',
children: '$80.00',
},
{
key: '5',
label: 'Discount',
children: '$20.00',
},
{
key: '6',
label: 'Official',
children: '$60.00',
},
{
key: '7',
label: 'Config Info',
children: (
<>
Data disk type: MongoDB
<br />
Database version: 3.4
<br />
Package: dds.mongo.mid
<br />
Storage space: 10 GB
<br />
Replication factor: 3
<br />
Region: East China 1
<br />
</>
),
},
];
const items: DescriptionsProps['items'] = [
{
key: '1',
label: 'Product',
children: 'Cloud Database',
},
{
key: '2',
label: 'Billing',
children: 'Prepaid',
},
{
key: '3',
label: 'Time',
children: '18:00:00',
},
{
key: '4',
label: 'Amount',
children: '$80.00',
},
{
key: '5',
label: 'Discount',
children: '$20.00',
},
{
key: '6',
label: 'Official',
children: '$60.00',
},
];
const App: React.FC = () => {
const [size, setSize] = useState<'default' | 'middle' | 'small'>('default');
const onChange = (e: RadioChangeEvent) => {
console.log('size checked', e.target.value);
setSize(e.target.value);
};
return (
<div>
<Radio.Group onChange={onChange} value={size}>
<Radio value="default">default</Radio>
<Radio value="middle">middle</Radio>
<Radio value="small">small</Radio>
</Radio.Group>
<br />
<br />
<Descriptions
bordered
title="Custom Size"
size={size}
extra={<Button type="primary">Edit</Button>}
items={borderedItems}
/>
<br />
<br />
<Descriptions
title="Custom Size"
size={size}
extra={<Button type="primary">Edit</Button>}
items={items}
/>
</div>
);
};
export default App;

7
packages/meta/src/descriptions/demo/style.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
自定义 label & wrapper 样式
## en-US
Customize label & wrapper style

82
packages/meta/src/descriptions/demo/style.tsx Normal file
View File

@ -0,0 +1,82 @@
import React, { useState } from 'react';
import { Descriptions, Divider, Radio, Switch } from 'antd';
import type { DescriptionsProps } from 'antd';
const labelStyle: React.CSSProperties = { background: 'red' };
const contentStyle: React.CSSProperties = { background: 'green' };
type LayoutType = 'horizontal' | 'vertical' | undefined;
const items: DescriptionsProps['items'] = [
{
key: '1',
label: 'Product',
children: 'Cloud Database',
labelStyle,
contentStyle,
},
{
key: '2',
label: 'Billing Mode',
children: 'Prepaid',
},
{
key: '3',
label: 'Automatic Renewal',
children: 'YES',
},
];
const rootStyleItems: DescriptionsProps['items'] = [
{
key: '1',
label: 'Product',
children: 'Cloud Database',
},
{
key: '2',
label: 'Billing Mode',
children: 'Prepaid',
},
{
key: '3',
label: 'Automatic Renewal',
children: 'YES',
labelStyle: { color: 'orange' },
contentStyle: { color: 'blue' },
},
];
const App: React.FC = () => {
const [border, setBorder] = useState(true);
const [layout, setLayout] = useState('horizontal' as LayoutType);
return (
<>
<Switch
checkedChildren="Border"
unCheckedChildren="No Border"
checked={border}
onChange={(e) => setBorder(e)}
/>
<Divider />
<Radio.Group onChange={(e) => setLayout(e.target.value)} value={layout}>
<Radio value="horizontal">horizontal</Radio>
<Radio value="vertical">vertical</Radio>
</Radio.Group>
<Divider />
<Descriptions title="User Info" bordered={border} layout={layout} items={items} />
<Divider />
<Descriptions
title="Root style"
labelStyle={labelStyle}
contentStyle={contentStyle}
bordered={border}
layout={layout}
items={rootStyleItems}
/>
</>
);
};
export default App;

7
packages/meta/src/descriptions/demo/text.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
带边框和背景颜色列表。
## en-US
Descriptions with border and background color.

120
packages/meta/src/descriptions/demo/text.tsx Normal file
View File

@ -0,0 +1,120 @@
import React from 'react';
import { Badge, Descriptions, Table } from 'antd';
import type { DescriptionsProps } from 'antd';
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
];
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
];
const items: DescriptionsProps['items'] = [
{
key: '1',
label: 'Product',
children: 'Cloud Database',
},
{
key: '2',
label: <div style={{ display: 'flex' }}>Billing Mode</div>,
children: 'Prepaid',
},
{
key: '3',
label: 'Automatic Renewal',
children: 'YES',
},
{
key: '4',
label: 'Order time',
children: '2018-04-24 18:00:00',
},
{
key: '5',
label: 'Usage Time',
span: 2,
children: '2019-04-24 18:00:00',
},
{
key: '6',
label: 'Status',
span: 3,
children: <Badge status="processing" text="Running" />,
},
{
key: '7',
label: 'Negotiated Amount',
children: '$80.00',
},
{
key: '8',
label: 'Discount',
children: '$20.00',
},
{
key: '9',
label: 'Official Receipts',
children: '$60.00',
},
{
key: '10',
label: 'Config Info',
children: (
<>
Data disk type: MongoDB
<br />
Database version: 3.4
<br />
Package: dds.mongo.mid
<br />
Storage space: 10 GB
<br />
Replication factor: 3
<br />
Region: East China 1
<br />
</>
),
},
{
key: '11',
label: 'Official Receipts',
children: '$60.00',
},
{
key: '12',
label: 'Config Info',
children: <Table size="small" pagination={false} dataSource={dataSource} columns={columns} />,
},
];
const App: React.FC = () => <Descriptions title="User Info" column={2} items={items} />;
export default App;

7
packages/meta/src/descriptions/demo/vertical-border.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
垂直带边框和背景颜色的列表。
## en-US
Descriptions with border and background color.

79
packages/meta/src/descriptions/demo/vertical-border.tsx Normal file
View File

@ -0,0 +1,79 @@
import React from 'react';
import { Badge, Descriptions } from 'antd';
import type { DescriptionsProps } from 'antd';
const items: DescriptionsProps['items'] = [
{
key: '1',
label: 'Product',
children: 'Cloud Database',
},
{
key: '2',
label: 'Billing Mode',
children: 'Prepaid',
},
{
key: '3',
label: 'Automatic Renewal',
children: 'YES',
},
{
key: '4',
label: 'Order time',
children: '2018-04-24 18:00:00',
},
{
key: '5',
label: 'Usage Time',
span: 2,
children: '2019-04-24 18:00:00',
},
{
key: '6',
label: 'Status',
span: 3,
children: <Badge status="processing" text="Running" />,
},
{
key: '7',
label: 'Negotiated Amount',
children: '$80.00',
},
{
key: '8',
label: 'Discount',
children: '$20.00',
},
{
key: '9',
label: 'Official Receipts',
children: '$60.00',
},
{
key: '10',
label: 'Config Info',
children: (
<>
Data disk type: MongoDB
<br />
Database version: 3.4
<br />
Package: dds.mongo.mid
<br />
Storage space: 10 GB
<br />
Replication factor: 3
<br />
Region: East China 1
<br />
</>
),
},
];
const App: React.FC = () => (
<Descriptions title="User Info" layout="vertical" bordered items={items} />
);
export default App;

7
packages/meta/src/descriptions/demo/vertical.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
垂直的列表。
## en-US
Simplest Usage.

36
packages/meta/src/descriptions/demo/vertical.tsx Normal file
View File

@ -0,0 +1,36 @@
import React from 'react';
import { Descriptions } from 'antd';
import type { DescriptionsProps } from 'antd';
const items: DescriptionsProps['items'] = [
{
key: '1',
label: 'UserName',
children: 'Zhou Maomao',
},
{
key: '2',
label: 'Telephone',
children: '1810000000',
},
{
key: '3',
label: 'Live',
children: 'Hangzhou, Zhejiang',
},
{
key: '4',
label: 'Address',
span: 2,
children: 'No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China',
},
{
key: '5',
label: 'Remark',
children: 'empty',
},
];
const App: React.FC = () => <Descriptions title="User Info" layout="vertical" items={items} />;
export default App;

33
packages/meta/src/descriptions/hooks/useItems.ts Normal file
View File

@ -0,0 +1,33 @@
import * as React from 'react';
import toArray from 'rc-util/lib/Children/toArray';
import type { DescriptionsItemType, InternalDescriptionsItemType } from '..';
import { matchScreen, type ScreenMap } from '../../_util/responsiveObserver';
// Convert children into items
const transChildren2Items = (childNodes?: React.ReactNode) =>
toArray(childNodes).map((node) => ({ ...node?.props, key: node.key }));
export default function useItems(
screens: ScreenMap,
items?: DescriptionsItemType[],
children?: React.ReactNode,
) {
const mergedItems = React.useMemo<DescriptionsItemType[]>(
() =>
// Take `items` first or convert `children` into items
items || transChildren2Items(children),
[items, children],
);
const responsiveItems = React.useMemo<InternalDescriptionsItemType[]>(
() =>
mergedItems.map(({ span, ...restItem }) => ({
...restItem,
span: typeof span === 'number' ? span : matchScreen(screens, span),
})),
[mergedItems, screens],
);
return responsiveItems;
}

80
packages/meta/src/descriptions/hooks/useRow.ts Normal file
View File

@ -0,0 +1,80 @@
import { useMemo } from 'react';
import type { InternalDescriptionsItemType } from '..';
import { devUseWarning } from '../../_util/warning';
function getFilledItem(
rowItem: InternalDescriptionsItemType,
rowRestCol: number,
span?: number,
): [item: InternalDescriptionsItemType, exceed: boolean] {
let clone = rowItem;
let exceed = false;
if (span === undefined || span > rowRestCol) {
clone = {
...rowItem,
span: rowRestCol,
};
exceed = span !== undefined;
}
return [clone, exceed];
}
// Calculate the sum of span in a row
function getCalcRows(
rowItems: InternalDescriptionsItemType[],
mergedColumn: number,
): [rows: InternalDescriptionsItemType[][], exceed: boolean] {
const rows: InternalDescriptionsItemType[][] = [];
let tmpRow: InternalDescriptionsItemType[] = [];
let rowRestCol = mergedColumn;
let exceed = false;
rowItems
.filter((n) => n)
.forEach((rowItem, index) => {
const span = rowItem?.span;
const mergedSpan = span || 1;
// Additional handle last one
if (index === rowItems.length - 1) {
const [item, itemExceed] = getFilledItem(rowItem, rowRestCol, span);
exceed = exceed || itemExceed;
tmpRow.push(item);
rows.push(tmpRow);
return;
}
if (mergedSpan < rowRestCol) {
rowRestCol -= mergedSpan;
tmpRow.push(rowItem);
} else {
const [item, itemExceed] = getFilledItem(rowItem, rowRestCol, mergedSpan);
exceed = exceed || itemExceed;
tmpRow.push(item);
rows.push(tmpRow);
rowRestCol = mergedColumn;
tmpRow = [];
}
});
return [rows, exceed];
}
const useRow = (mergedColumn: number, items: InternalDescriptionsItemType[]) => {
const [rows, exceed] = useMemo(() => getCalcRows(items, mergedColumn), [items, mergedColumn]);
if (process.env.NODE_ENV !== 'production') {
const warning = devUseWarning('Descriptions');
warning(!exceed, 'usage', 'Sum of column `span` in a line not match `column` of Descriptions.');
}
return rows;
};
export default useRow;

161
packages/meta/src/descriptions/index.tsx Normal file
View File

@ -0,0 +1,161 @@
/* eslint-disable react/no-array-index-key */
import * as React from 'react';
import classNames from 'classnames';
import type { Breakpoint } from '../_util/responsiveObserver';
import { matchScreen } from '../_util/responsiveObserver';
import { ConfigContext } from '../config-provider';
import useSize from '../config-provider/hooks/useSize';
import useBreakpoint from '../grid/hooks/useBreakpoint';
import DEFAULT_COLUMN_MAP from './constant';
import DescriptionsContext from './DescriptionsContext';
import useItems from './hooks/useItems';
import useRow from './hooks/useRow';
import type { DescriptionsItemProps } from './Item';
import DescriptionsItem from './Item';
import Row from './Row';
import useStyle from './style';
interface CompoundedComponent {
Item: typeof DescriptionsItem;
}
export interface InternalDescriptionsItemType extends DescriptionsItemProps {
key?: React.Key;
}
export interface DescriptionsItemType extends Omit<InternalDescriptionsItemType, 'span'> {
span?: number | { [key in Breakpoint]?: number };
}
export interface DescriptionsProps {
prefixCls?: string;
className?: string;
rootClassName?: string;
style?: React.CSSProperties;
bordered?: boolean;
size?: 'middle' | 'small' | 'default';
/**
* @deprecated use `items` instead
*/
children?: React.ReactNode;
title?: React.ReactNode;
extra?: React.ReactNode;
column?: number | Partial<Record<Breakpoint, number>>;
layout?: 'horizontal' | 'vertical';
colon?: boolean;
labelStyle?: React.CSSProperties;
contentStyle?: React.CSSProperties;
items?: DescriptionsItemType[];
id?: string;
}
const Descriptions: React.FC<DescriptionsProps> & CompoundedComponent = (props) => {
const {
prefixCls: customizePrefixCls,
title,
extra,
column,
colon = true,
bordered,
layout,
children,
className,
rootClassName,
style,
size: customizeSize,
labelStyle,
contentStyle,
items,
...restProps
} = props;
const { getPrefixCls, direction, descriptions } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
const screens = useBreakpoint();
// Column count
const mergedColumn = React.useMemo(() => {
if (typeof column === 'number') {
return column;
}
return (
matchScreen(screens, {
...DEFAULT_COLUMN_MAP,
...column,
}) ?? 3
);
}, [screens, column]);
// Items with responsive
const mergedItems = useItems(screens, items, children);
const mergedSize = useSize(customizeSize);
const rows = useRow(mergedColumn, mergedItems);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
// ======================== Render ========================
const contextValue = React.useMemo(
() => ({ labelStyle, contentStyle }),
[labelStyle, contentStyle],
);
return wrapCSSVar(
<DescriptionsContext.Provider value={contextValue}>
<div
className={classNames(
prefixCls,
descriptions?.className,
{
[`${prefixCls}-${mergedSize}`]: mergedSize && mergedSize !== 'default',
[`${prefixCls}-bordered`]: !!bordered,
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
rootClassName,
hashId,
cssVarCls,
)}
style={{ ...descriptions?.style, ...style }}
{...restProps}
>
{(title || extra) && (
<div className={`${prefixCls}-header`}>
{title && <div className={`${prefixCls}-title`}>{title}</div>}
{extra && <div className={`${prefixCls}-extra`}>{extra}</div>}
</div>
)}
<div className={`${prefixCls}-view`}>
<table>
<tbody>
{rows.map((row, index) => (
<Row
key={index}
index={index}
colon={colon}
prefixCls={prefixCls}
vertical={layout === 'vertical'}
bordered={bordered}
row={row}
/>
))}
</tbody>
</table>
</div>
</div>
</DescriptionsContext.Provider>,
);
};
if (process.env.NODE_ENV !== 'production') {
Descriptions.displayName = 'Descriptions';
}
export type { DescriptionsContextProps } from './DescriptionsContext';
export { DescriptionsContext };
Descriptions.Item = DescriptionsItem;
export default Descriptions;

108
packages/meta/src/descriptions/index.zh-CN.md Normal file
View File

@ -0,0 +1,108 @@
---
category: Components
subtitle: 描述列表
group: 数据展示
title: Descriptions
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fHdlTpif6XQAAAAAAAAAAAAADrJ8AQ/original
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*d27AQJrowGAAAAAAAAAAAAAADrJ8AQ/original
---
成组展示多个只读字段。
## 何时使用
常见于详情页的信息展示。
```tsx | pure
// >= 5.8.0 可用，推荐的写法 ✅
const items: DescriptionsProps['items'] = [
{
key: '1',
label: 'UserName',
children: <p>Zhou Maomao</p>,
},
{
key: '2',
label: 'Telephone',
children: <p>1810000000</p>,
},
{
key: '3',
label: 'Live',
children: <p>Hangzhou, Zhejiang</p>,
},
{
key: '4',
label: 'Remark',
children: <p>empty</p>,
},
{
key: '5',
label: 'Address',
children: <p>No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China</p>,
},
];
<Descriptions title="User Info" items={items} />;
// <5.8.0 可用，>=5.8.0 时不推荐 🙅🏻‍♀️
<Descriptions title="User Info">
<Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
<Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
<Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
<Descriptions.Item label="Remark">empty</Descriptions.Item>
<Descriptions.Item label="Address">
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
</Descriptions.Item>
</Descriptions>;
```
## 代码演示
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">基本</code>
<code src="./demo/border.tsx">带边框的</code>
<code src="./demo/text.tsx" debug>复杂文本的情况</code>
<code src="./demo/size.tsx">自定义尺寸</code>
<code src="./demo/responsive.tsx">响应式</code>
<code src="./demo/vertical.tsx">垂直</code>
<code src="./demo/vertical-border.tsx">垂直带边框的</code>
<code src="./demo/style.tsx" debug>自定义 label & wrapper 样式</code>
<code src="./demo/jsx.tsx" debug>JSX demo</code>
<code src="./demo/component-token.tsx" debug>组件 Token</code>
## API
通用属性参考：[通用属性](/docs/react/common-props)
### Descriptions
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| bordered | 是否展示边框 | boolean | false | |
| colon | 配置 `Descriptions.Item` 的 `colon` 的默认值 | boolean | true | |
| column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number \| [Record<Breakpoint, number>](https://github.com/ant-design/ant-design/blob/84ca0d23ae52e4f0940f20b0e22eabe743f90dca/components/descriptions/index.tsx#L111C21-L111C56) | 3 | |
| contentStyle | 自定义内容样式 | CSSProperties | - | 4.10.0 |
| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
| items | 描述列表项内容 | [DescriptionsItem](#descriptionitem)[] | - | 5.8.0 |
| labelStyle | 自定义标签样式 | CSSProperties | - | 4.10.0 |
| layout | 描述布局 | `horizontal` \| `vertical` | `horizontal` | |
| size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default` \| `middle` \| `small` | - | |
| title | 描述列表的标题，显示在最顶部 | ReactNode | - | |
### DescriptionItem
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| contentStyle | 自定义内容样式 | CSSProperties | - | 4.9.0 |
| label | 内容的描述 | ReactNode | - | |
| labelStyle | 自定义标签样式 | CSSProperties | - | 4.9.0 |
| span | 包含列的数量 | number \| [Screens](/components/grid#col) | 1 | `screens: 5.9.0` |
> span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
## 主题变量（Design Token）
<ComponentTokenTable component="Descriptions"></ComponentTokenTable>

238
packages/meta/src/descriptions/style/index.ts Normal file
View File

@ -0,0 +1,238 @@
import { type CSSObject, unit } from '@ant-design/cssinjs';
import { resetComponent, textEllipsis } from '../../style';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
// Component token here
/**
* @desc 标签背景色
* @descEN Background color of label
*/
labelBg: string;
/**
* @desc 标题文字颜色
* @descEN Text color of title
*/
titleColor: string;
/**
* @desc 标题下间距
* @descEN Bottom margin of title
*/
titleMarginBottom: number;
/**
* @desc 子项下间距
* @descEN Bottom padding of item
*/
itemPaddingBottom: number;
/**
* @desc 冒号右间距
* @descEN Right margin of colon
*/
colonMarginRight: number;
/**
* @desc 冒号左间距
* @descEN Left margin of colon
*/
colonMarginLeft: number;
/**
* @desc 内容区域文字颜色
* @descEN Text color of content
*/
contentColor: string;
/**
* @desc 额外区域文字颜色
* @descEN Text color of extra area
*/
extraColor: string;
}
interface DescriptionsToken extends FullToken<'Descriptions'> {}
const genBorderedStyle = (token: DescriptionsToken): CSSObject => {
const { componentCls, labelBg } = token;
return {
[`&${componentCls}-bordered`]: {
[`> ${componentCls}-view`]: {
border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
'> table': {
tableLayout: 'auto',
borderCollapse: 'collapse',
},
[`${componentCls}-row`]: {
borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
'&:last-child': {
borderBottom: 'none',
},
[`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
padding: `${unit(token.padding)} ${unit(token.paddingLG)}`,
borderInlineEnd: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
'&:last-child': {
borderInlineEnd: 'none',
},
},
[`> ${componentCls}-item-label`]: {
color: token.colorTextSecondary,
backgroundColor: labelBg,
'&::after': {
display: 'none',
},
},
},
},
[`&${componentCls}-middle`]: {
[`${componentCls}-row`]: {
[`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
padding: `${unit(token.paddingSM)} ${unit(token.paddingLG)}`,
},
},
},
[`&${componentCls}-small`]: {
[`${componentCls}-row`]: {
[`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
padding: `${unit(token.paddingXS)} ${unit(token.padding)}`,
},
},
},
},
};
};
const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token) => {
const {
componentCls,
extraColor,
itemPaddingBottom,
colonMarginRight,
colonMarginLeft,
titleMarginBottom,
} = token;
return {
[componentCls]: {
...resetComponent(token),
...genBorderedStyle(token),
[`&-rtl`]: {
direction: 'rtl',
},
[`${componentCls}-header`]: {
display: 'flex',
alignItems: 'center',
marginBottom: titleMarginBottom,
},
[`${componentCls}-title`]: {
...textEllipsis,
flex: 'auto',
color: token.titleColor,
fontWeight: token.fontWeightStrong,
fontSize: token.fontSizeLG,
lineHeight: token.lineHeightLG,
},
[`${componentCls}-extra`]: {
marginInlineStart: 'auto',
color: extraColor,
fontSize: token.fontSize,
},
[`${componentCls}-view`]: {
width: '100%',
borderRadius: token.borderRadiusLG,
table: {
width: '100%',
tableLayout: 'fixed',
},
},
[`${componentCls}-row`]: {
'> th, > td': {
paddingBottom: itemPaddingBottom,
},
'&:last-child': {
borderBottom: 'none',
},
},
[`${componentCls}-item-label`]: {
color: token.colorTextTertiary,
fontWeight: 'normal',
fontSize: token.fontSize,
lineHeight: token.lineHeight,
textAlign: `start`,
'&::after': {
content: '":"',
position: 'relative',
top: -0.5, // magic for position
marginInline: `${unit(colonMarginLeft)} ${unit(colonMarginRight)}`,
},
[`&${componentCls}-item-no-colon::after`]: {
content: '""',
},
},
[`${componentCls}-item-no-label`]: {
'&::after': {
margin: 0,
content: '""',
},
},
[`${componentCls}-item-content`]: {
display: 'table-cell',
flex: 1,
color: token.contentColor,
fontSize: token.fontSize,
lineHeight: token.lineHeight,
wordBreak: 'break-word',
overflowWrap: 'break-word',
},
[`${componentCls}-item`]: {
paddingBottom: 0,
verticalAlign: 'top',
'&-container': {
display: 'flex',
[`${componentCls}-item-label`]: {
display: 'inline-flex',
alignItems: 'baseline',
},
[`${componentCls}-item-content`]: {
display: 'inline-flex',
alignItems: 'baseline',
},
},
},
'&-middle': {
[`${componentCls}-row`]: {
'> th, > td': {
paddingBottom: token.paddingSM,
},
},
},
'&-small': {
[`${componentCls}-row`]: {
'> th, > td': {
paddingBottom: token.paddingXS,
},
},
},
},
};
};
export const prepareComponentToken: GetDefaultToken<'Descriptions'> = (token) => ({
labelBg: token.colorFillAlter,
titleColor: token.colorText,
titleMarginBottom: token.fontSizeSM * token.lineHeightSM,
itemPaddingBottom: token.padding,
colonMarginRight: token.marginXS,
colonMarginLeft: token.marginXXS / 2,
contentColor: token.colorText,
extraColor: token.colorText,
});
// ============================== Export ==============================
export default genStyleHooks(
'Descriptions',
(token) => {
const descriptionToken = mergeToken<DescriptionsToken>(token, {});
return genDescriptionStyles(descriptionToken);
},
prepareComponentToken,
);

307
packages/meta/src/divider/__tests__/__snapshots__/demo-extend.test.ts.snap Normal file
View File

@ -0,0 +1,307 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/divider/demo/component-token.tsx extend context correctly 1`] = `
Array [
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Text
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Left Text
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Right Text
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left ant-divider-no-default-orientation-margin-left"
role="separator"
>
<span
class="ant-divider-inner-text"
style="margin-left: 0px;"
>
Left Text with 0 orientationMargin
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right ant-divider-no-default-orientation-margin-right"
role="separator"
>
<span
class="ant-divider-inner-text"
style="margin-right: 50px;"
>
Right Text with 50px orientationMargin
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
]
`;
exports[`renders components/divider/demo/component-token.tsx extend context correctly 2`] = `[]`;
exports[`renders components/divider/demo/customize-style.tsx extend context correctly 1`] = `
Array [
<div
class="ant-divider ant-divider-horizontal"
role="separator"
style="border-width: 2px; border-color: #7cb305;"
/>,
<div
class="ant-divider ant-divider-horizontal ant-divider-dashed"
role="separator"
style="border-color: #7cb305;"
/>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-dashed"
role="separator"
style="border-color: #7cb305;"
>
<span
class="ant-divider-inner-text"
>
Text
</span>
</div>,
<div
class="ant-divider ant-divider-vertical"
role="separator"
style="height: 60px; border-color: #7cb305;"
/>,
<div
class="ant-divider ant-divider-vertical ant-divider-dashed"
role="separator"
style="height: 60px; border-color: #7cb305;"
/>,
<div
style="display: flex; flex-direction: column; height: 50px; box-shadow: 0 0 1px red;"
>
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
style="background: rgba(0, 255, 0, 0.05);"
>
<span
class="ant-divider-inner-text"
>
Text
</span>
</div>
</div>,
]
`;
exports[`renders components/divider/demo/customize-style.tsx extend context correctly 2`] = `[]`;
exports[`renders components/divider/demo/horizontal.tsx extend context correctly 1`] = `
Array [
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal"
role="separator"
/>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-dashed"
role="separator"
/>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
]
`;
exports[`renders components/divider/demo/horizontal.tsx extend context correctly 2`] = `[]`;
exports[`renders components/divider/demo/plain.tsx extend context correctly 1`] = `
Array [
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-plain"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Text
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left ant-divider-plain"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Left Text
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right ant-divider-plain"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Right Text
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
]
`;
exports[`renders components/divider/demo/plain.tsx extend context correctly 2`] = `[]`;
exports[`renders components/divider/demo/vertical.tsx extend context correctly 1`] = `
Array [
Text,
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>,
<a
href="#"
>
Link
</a>,
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>,
<a
href="#"
>
Link
</a>,
]
`;
exports[`renders components/divider/demo/vertical.tsx extend context correctly 2`] = `[]`;
exports[`renders components/divider/demo/with-text.tsx extend context correctly 1`] = `
Array [
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Text
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Left Text
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Right Text
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left ant-divider-no-default-orientation-margin-left"
role="separator"
>
<span
class="ant-divider-inner-text"
style="margin-left: 0px;"
>
Left Text with 0 orientationMargin
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right ant-divider-no-default-orientation-margin-right"
role="separator"
>
<span
class="ant-divider-inner-text"
style="margin-right: 50px;"
>
Right Text with 50px orientationMargin
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
]
`;
exports[`renders components/divider/demo/with-text.tsx extend context correctly 2`] = `[]`;

295
packages/meta/src/divider/__tests__/__snapshots__/demo.test.ts.snap Normal file
View File

@ -0,0 +1,295 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/divider/demo/component-token.tsx correctly 1`] = `
Array [
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Text
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Left Text
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Right Text
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left ant-divider-no-default-orientation-margin-left"
role="separator"
>
<span
class="ant-divider-inner-text"
style="margin-left:0"
>
Left Text with 0 orientationMargin
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right ant-divider-no-default-orientation-margin-right"
role="separator"
>
<span
class="ant-divider-inner-text"
style="margin-right:50px"
>
Right Text with 50px orientationMargin
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
]
`;
exports[`renders components/divider/demo/customize-style.tsx correctly 1`] = `
Array [
<div
class="ant-divider ant-divider-horizontal"
role="separator"
style="border-width:2px;border-color:#7cb305"
/>,
<div
class="ant-divider ant-divider-horizontal ant-divider-dashed"
role="separator"
style="border-color:#7cb305"
/>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-dashed"
role="separator"
style="border-color:#7cb305"
>
<span
class="ant-divider-inner-text"
>
Text
</span>
</div>,
<div
class="ant-divider ant-divider-vertical"
role="separator"
style="height:60px;border-color:#7cb305"
/>,
<div
class="ant-divider ant-divider-vertical ant-divider-dashed"
role="separator"
style="height:60px;border-color:#7cb305"
/>,
<div
style="display:flex;flex-direction:column;height:50px;box-shadow:0 0 1px red"
>
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
style="background:rgba(0,255,0,0.05)"
>
<span
class="ant-divider-inner-text"
>
Text
</span>
</div>
</div>,
]
`;
exports[`renders components/divider/demo/horizontal.tsx correctly 1`] = `
Array [
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal"
role="separator"
/>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-dashed"
role="separator"
/>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
]
`;
exports[`renders components/divider/demo/plain.tsx correctly 1`] = `
Array [
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-plain"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Text
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left ant-divider-plain"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Left Text
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right ant-divider-plain"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Right Text
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
]
`;
exports[`renders components/divider/demo/vertical.tsx correctly 1`] = `
Array [
Text,
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>,
<a
href="#"
>
Link
</a>,
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>,
<a
href="#"
>
Link
</a>,
]
`;
exports[`renders components/divider/demo/with-text.tsx correctly 1`] = `
Array [
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Text
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Left Text
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Right Text
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left ant-divider-no-default-orientation-margin-left"
role="separator"
>
<span
class="ant-divider-inner-text"
style="margin-left:0"
>
Left Text with 0 orientationMargin
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right ant-divider-no-default-orientation-margin-right"
role="separator"
>
<span
class="ant-divider-inner-text"
style="margin-right:50px"
>
Right Text with 50px orientationMargin
</span>
</div>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>,
]
`;

3
packages/meta/src/divider/__tests__/demo-extend.test.ts Normal file
View File

@ -0,0 +1,3 @@
import { extendTest } from '../../../tests/shared/demoTest';
extendTest('divider');

3
packages/meta/src/divider/__tests__/demo.test.ts Normal file
View File

@ -0,0 +1,3 @@
import demoTest from '../../../tests/shared/demoTest';
demoTest('divider');

Some files were not shown because too many files have changed in this diff Show More