open-library
Version:
开放组件库
860 lines (739 loc) • 38.1 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var classNames = require('classnames');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
var defaultGetPrefixCls = function defaultGetPrefixCls(suffixCls) {
return suffixCls ? "open-".concat(suffixCls) : 'open';
};
var ConfigContext = /*#__PURE__*/React__default['default'].createContext(defaultGetPrefixCls);
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = "";
styleInject(css_248z);
/**
* 通用代码模板
*/
var Index = function Index(props) {
var classname = props.classname;
var getPrefixCls = React.useContext(ConfigContext);
var prefixCls = getPrefixCls('');
var wrapClassname = classNames__default['default']({
prefixCls: prefixCls,
classname: classname
});
return /*#__PURE__*/React__default['default'].createElement("div", {
className: wrapClassname
});
};
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _typeof(obj) {
"@babel/helpers - typeof";
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof = function (obj) {
return typeof obj;
};
} else {
_typeof = function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
}
return _typeof(obj);
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var css_248z$1 = "/**\n公共样式\n**/\n/*通用样式*/\nhtml,\nbody,\n#root {\n height: 100%;\n}\nli {\n list-style: none;\n}\nbody,\nul,\np {\n padding: 0;\n margin: 0;\n}\n.open-scroll-image {\n width: inherit;\n overflow: hidden;\n position: relative;\n}\n.open-scroll-image:hover .open-scroll-left-right-icon span {\n display: inline-block;\n}\n.open-scroll-image:hover .open-scroll-left-right-icon > .open-scroll-arrow-visible-none {\n display: none;\n}\n.open-scroll-image .open-scroll-left-right-icon {\n position: absolute;\n width: 100%;\n}\n.open-scroll-image .open-scroll-left-right-icon span {\n cursor: pointer;\n z-index: 11;\n position: absolute;\n display: none;\n background-color: rgba(0, 0, 0, 0.3);\n top: 0;\n bottom: 0;\n margin: auto;\n height: 44px;\n line-height: 50px;\n width: 26px;\n text-align: center;\n color: white;\n transition: 0.2s;\n}\n.open-scroll-image .open-scroll-left-right-icon span:hover {\n background-color: rgba(0, 0, 0, 0.7);\n}\n.open-scroll-image .open-scroll-left-right-icon span::before {\n content: '';\n background: url('./static/jiantou.png') no-repeat;\n height: 20px;\n width: 20px;\n position: absolute;\n background-size: 17px;\n bottom: 10px;\n right: 3px;\n}\n.open-scroll-image .open-scroll-left-right-icon .open-scroll-prev-icon {\n left: 0;\n line-height: inherit;\n border-radius: 0 26px 26px 0;\n}\n.open-scroll-image .open-scroll-left-right-icon .open-scroll-next-icon {\n right: 0;\n line-height: inherit;\n border-radius: 26px 0 0 26px;\n}\n.open-scroll-image .open-scroll-left-right-icon .open-scroll-next-icon::before {\n transform: rotateY(180deg);\n}\n.open-scroll-image ul {\n z-index: 10;\n height: inherit;\n white-space: nowrap;\n position: absolute;\n transition: all 1s ease-in-out 0s;\n -moz-transition: all 1s ease-in-out 0s;\n -webkit-transition: all 1s ease-in-out 0s;\n -o-transition: all 1s ease-in-out 0s;\n margin-right: -1%;\n}\n.open-scroll-image ul li {\n height: 100%;\n display: inline-block;\n overflow: hidden;\n}\n.open-scroll-image ul li .open-scroll-img {\n border-radius: 6px;\n overflow: hidden;\n cursor: pointer;\n width: 100%;\n background: #e8e8e8;\n}\n.open-scroll-image ul li .open-scroll-img img {\n transition: all 0.3s;\n width: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n}\n.open-scroll-image ul li .open-scroll-image-cache {\n background: #f6f7f8;\n background-image: linear-gradient(90deg, #cce5f8 0, #fdfdfd 20%, #cce5f8 40%, #f6f7f8);\n background-repeat: no-repeat;\n background-size: 800px 304px;\n -webkit-animation-duration: 1s;\n animation-duration: 1s;\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-name: mymove;\n animation-name: mymove;\n -webkit-animation-timing-function: linear;\n animation-timing-function: linear;\n}\n.open-scroll-image ul li:hover img {\n transform: scale(1.07);\n}\n.open-scroll-image .open-scroll-ul-ease-in-out {\n transition-timing-function: ease-in-out;\n -o-transition-timing-function: ease-in-out;\n -webkit-transition-timing-function: ease-in-out;\n}\n.open-scroll-image .open-scroll-ul-linear {\n transition-timing-function: linear;\n -webkit-transition-timing-function: linear;\n -o-transition-timing-function: linear;\n}\n.open-scroll-image .open-scroll-ul-ease {\n transition-timing-function: ease;\n -webkit-transition-timing-function: ease;\n -o-transition-timing-function: ease;\n}\n.open-scroll-image .open-scroll-ul-ease-in {\n transition-timing-function: ease-in;\n -webkit-transition-timing-function: ease-in;\n -o-transition-timing-function: ease-in;\n}\n.open-scroll-image .open-scroll-ul-ease-out {\n transition-timing-function: ease-out;\n -webkit-transition-timing-function: ease-out;\n -o-transition-timing-function: ease-out;\n}\n.open-scroll-image .open-scroll-text {\n margin-top: 5px;\n width: 100%;\n max-height: 44px;\n overflow: hidden;\n z-index: 10;\n}\n.open-scroll-image .open-scroll-text-title {\n cursor: pointer;\n}\n.open-scroll-image .open-scroll-text-title a {\n height: 22px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-height: 22px;\n line-height: 22px;\n font-size: 16px;\n display: block;\n color: #0a0909;\n}\n.open-scroll-image .open-scroll-text .open-scroll-desc {\n color: #959595;\n margin-top: 4px;\n height: 20px;\n line-height: 20px;\n font-size: 14px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n@-webkit-keyframes mymove {\n from {\n background-position: right;\n }\n to {\n background-position: left;\n }\n}\n@keyframes mymove {\n from {\n background-position: right;\n }\n to {\n background-position: left;\n }\n}\n";
styleInject(css_248z$1);
/**
* 参数转为样式可识别的像素
* @param number
* @returns
*/
var translateNumberOrToPx = function translateNumberOrToPx(number) {
return typeof number === 'string' && number.indexOf('%') !== -1 ? number : typeof number === 'number' ? number + 'px' : number;
};
/**
* 像素或字符串转为具体数字类型
* @param prefixCls
* @returns
*/
var pxOrStrToNumber = function pxOrStrToNumber(prefixCls) {
return typeof prefixCls === 'string' && prefixCls.indexOf('px') !== -1 ? Number(prefixCls.replace(/px/, '')) : Number(prefixCls);
};
var ImageScrollYouKu = function ImageScrollYouKu(props) {
var _onClick = props.onClick,
prev = props.prev,
next = props.next,
_props$imgList = props.imgList,
imgList = _props$imgList === void 0 ? [] : _props$imgList,
className = props.className,
_props$style = props.style,
style = _props$style === void 0 ? {} : _props$style,
_props$showText = props.showText,
showText = _props$showText === void 0 ? false : _props$showText,
_props$animationBuffe = props.animationBuffer,
animationBuffer = _props$animationBuffe === void 0 ? false : _props$animationBuffe,
_props$keepArrowVisib = props.keepArrowVisible,
keepArrowVisible = _props$keepArrowVisib === void 0 ? false : _props$keepArrowVisib,
_props$number = props.number,
number = _props$number === void 0 ? 4 : _props$number,
_props$scrollImageNum = props.scrollImageNumber,
scrollImageNumber = _props$scrollImageNum === void 0 ? number : _props$scrollImageNum,
_props$width = props.width,
width = _props$width === void 0 ? 800 : _props$width,
_props$imageHeight = props.imageHeight,
imageHeight = _props$imageHeight === void 0 ? 200 : _props$imageHeight,
_props$space = props.space,
space = _props$space === void 0 ? '1%' : _props$space,
_props$easing = props.easing,
easing = _props$easing === void 0 ? 'ease-in-out' : _props$easing;
var ref = React.useRef();
var refImage = React.useRef();
var imageSpace = translateNumberOrToPx(space);
var _useState = React.useState(0),
_useState2 = _slicedToArray(_useState, 2),
translateX = _useState2[0],
setTranslateX = _useState2[1]; //每次偏移数值
var _useState3 = React.useState(true),
_useState4 = _slicedToArray(_useState3, 2),
buffer = _useState4[0],
setBuffer = _useState4[1]; //动画缓冲
var _useState5 = React.useState(0),
_useState6 = _slicedToArray(_useState5, 2),
scrollTimes = _useState6[0],
setScrollTimes = _useState6[1];
React.useEffect(function () {
computedScrollTimes();
var timeFun;
window.onresize = function () {
setTranslateX(0);
};
var time = 0;
timeFun = animationBuffer && setInterval(function () {
time++;
if (time > 3) {
setBuffer(false);
}
}, 1000);
return function () {
clearInterval(timeFun);
window.onresize = null;
};
}, []);
var computedScrollTimes = function computedScrollTimes() {
var imageLength = imgList.length;
var scrollTimes = Math.ceil(Number(imageLength / scrollImageNumber));
setScrollTimes(scrollTimes - 1);
};
/**
* 点击右侧按钮
*/
var clickNextIcon = function clickNextIcon(event) {
event.stopPropagation();
setScrollTimes(function (data) {
//到最后一页时候需要停止点击按钮
if (data >= 1) {
var defaultScrollWidth = ref.current.offsetWidth * (scrollImageNumber / number);
setTranslateX(translateX - defaultScrollWidth); //每次滚动可见区域宽度
return data - 1;
} else {
return data;
}
});
next && next();
};
/**
* 点击左侧按钮
*/
var clickPrevIcon = function clickPrevIcon(event) {
event.stopPropagation();
if (translateX === 0) return;
var defaultScrollWidth = ref.current.offsetWidth * (scrollImageNumber / number);
setTranslateX(translateX + defaultScrollWidth);
setScrollTimes(function (data) {
return data + 1;
});
prev && prev();
};
var getWidth = function getWidth() {
return "calc((100% - ".concat(imageSpace, " * ").concat(Number(number), ") / ").concat(Number(number), ")");
};
var classString = classNames__default['default']({
'open-scroll-image-cache': animationBuffer && buffer,
'open-scroll-img': true
});
var classWrap = classNames__default['default']({
'open-scroll-image': true
}, className);
var spanPrevClass = classNames__default['default']({
'open-scroll-prev-icon': true,
'open-scroll-arrow-visible-none': keepArrowVisible ? false : translateX === 0
});
var spanNextClass = classNames__default['default']({
'open-scroll-next-icon': true,
'open-scroll-arrow-visible-none': keepArrowVisible ? false : scrollTimes <= 0
});
var ulClass = classNames__default['default'](_defineProperty({}, "open-scroll-ul-".concat(easing), true));
var renderImageList = imgList && imgList.map(function (item, index) {
return /*#__PURE__*/React__default['default'].createElement("li", {
style: {
marginRight: imageSpace,
width: getWidth(),
minWidth: getWidth()
},
key: item.imgUrl + index
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: classString,
ref: refImage,
style: {
height: imageHeight,
cursor: _onClick ? 'pointer' : 'default'
},
onClick: function onClick() {
return _onClick && _onClick(item, index);
}
}, /*#__PURE__*/React__default['default'].createElement("img", {
draggable: false,
src: item.imgUrl,
title: item.name,
alt: item.name,
style: {
height: imageHeight
}
})), showText && /*#__PURE__*/React__default['default'].createElement("div", {
className: 'open-scroll-text'
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: 'open-scroll-text-title'
}, /*#__PURE__*/React__default['default'].createElement("a", {
onClick: function onClick() {
return _onClick && _onClick(item, index);
},
style: {
cursor: _onClick ? 'pointer' : 'default'
}
}, item.name)), /*#__PURE__*/React__default['default'].createElement("div", {
className: 'open-scroll-desc'
}, item.desc)));
});
return /*#__PURE__*/React__default['default'].createElement("div", {
className: classWrap,
style: Object.assign(style, {
width: width,
height: imageHeight + (showText ? 60 : 0)
})
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: 'open-scroll-left-right-icon',
style: {
height: imageHeight,
lineHeight: translateNumberOrToPx(imageHeight)
}
}, /*#__PURE__*/React__default['default'].createElement("span", {
className: spanPrevClass,
onClick: clickPrevIcon
}), /*#__PURE__*/React__default['default'].createElement("span", {
className: spanNextClass,
onClick: clickNextIcon
})), /*#__PURE__*/React__default['default'].createElement("ul", {
style: {
transform: "translateX(".concat(translateX, "px)"),
width: "calc(100% + ".concat(imageSpace, ")")
},
className: ulClass,
ref: ref
}, renderImageList));
};
var css_248z$2 = "/**\n公共样式\n**/\n/*通用样式*/\nhtml,\nbody,\n#root {\n height: 100%;\n}\nli {\n list-style: none;\n}\nbody,\nul,\np {\n padding: 0;\n margin: 0;\n}\n.open-scale-bar {\n color: #177ddc;\n padding: 5px 0px;\n width: 350px;\n justify-content: space-between;\n}\n.open-scale-bar-title {\n color: rgba(0, 0, 0, 0.65);\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n font-size: 18px;\n padding-bottom: 5px;\n}\n.open-scale-bar-item {\n position: relative;\n width: 100%;\n margin-left: 1px;\n margin-right: 1px;\n overflow: hidden;\n padding-top: 10px;\n}\n.open-scale-bar-item-arrow {\n left: calc(50% - 4px);\n display: inline-block;\n position: absolute;\n border: 8px solid transparent;\n top: -1px;\n width: 0px;\n height: 0px;\n border-top-color: gray;\n}\n.open-scale-bar-item .open-scale-bar-item-span {\n position: relative;\n width: inherit;\n height: 12px;\n display: inline-block;\n background-color: #dcdfe6;\n}\n.open-scale-bar-item .open-scale-bar-item-span-active::before {\n width: 100%;\n height: inherit;\n content: '';\n border-radius: inherit;\n position: absolute;\n top: 0px;\n bottom: 0px;\n right: 0px;\n left: 0px;\n opacity: 0;\n background: white;\n -webkit-animation: open-scale-bar-stroke-active 2s infinite;\n animation: open-scale-bar-stroke-active 2s infinite;\n}\n.open-scale-bar-item .open-scale-bar-item-span-background {\n background-color: #177ddc;\n}\n.open-scale-bar-item .open-scale-bar-item-span-first {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n}\n.open-scale-bar-item .open-scale-bar-item-span-last {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n}\n.open-scale-bar-item-text {\n color: rgba(0, 0, 0, 0.65);\n font-size: 14px;\n text-align: center;\n}\n.open-scale-bar-item-text-color {\n color: inherit;\n}\n.open-scale-bar-degree {\n width: 100%;\n height: 12px;\n position: relative;\n border-radius: 6px;\n overflow: hidden;\n}\n.open-scale-bar-degree-placeholder {\n width: 100%;\n height: inherit;\n position: absolute;\n top: 0;\n bottom: 0;\n display: flex;\n justify-content: space-between;\n z-index: 2;\n}\n.open-scale-bar-degree-placeholder span {\n display: inline-block;\n height: inherit;\n width: 1.5px;\n background-color: white;\n}\n.open-scale-bar-degree-placeholder span:first-child {\n visibility: hidden;\n}\n.open-scale-bar-degree-placeholder span:last-child {\n visibility: hidden;\n}\n.open-scale-bar-degree-background {\n width: 100%;\n height: inherit;\n background-color: #dcdfe6;\n position: absolute;\n top: 0;\n bottom: 0;\n}\n.open-scale-bar-degree-stroke {\n width: 100%;\n height: inherit;\n border-radius: inherit;\n z-index: 1;\n position: absolute;\n top: 0;\n bottom: 0;\n background-image: linear-gradient(to right, #108ee9 0%, #87d068 100%);\n}\n.open-scale-bar-degree-stroke-active::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n top: 0px;\n bottom: 0px;\n right: 0px;\n left: 0px;\n opacity: 0;\n background: white;\n -webkit-animation: open-scale-bar-stroke-active 2.4s infinite;\n animation: open-scale-bar-stroke-active 2.4s infinite;\n}\n.open-scale-bar-degree-text {\n color: rgba(0, 0, 0, 0.65);\n}\n.open-scale-bar-content {\n font-size: 14px;\n margin: 8px -10px;\n display: flex;\n justify-content: space-between;\n}\n.open-scale-bar-flex {\n display: inline-flex;\n width: 100%;\n}\n/**动画**/\n@-webkit-keyframes open-scale-bar-stroke-active {\n 0% {\n transform: translateX(-100%) scaleX(0);\n opacity: 0.2;\n }\n 30% {\n transform: translateX(-100%) scaleX(0);\n opacity: 0.6;\n }\n 100% {\n transform: translateX(0) scaleX(1);\n opacity: 0;\n }\n}\n@keyframes open-scale-bar-stroke-active {\n 0% {\n transform: translateX(-100%) scaleX(0);\n opacity: 0.2;\n }\n 30% {\n transform: translateX(-100%) scaleX(0);\n opacity: 0.6;\n }\n 100% {\n transform: translateX(0) scaleX(1);\n opacity: 0;\n }\n}\n";
styleInject(css_248z$2);
var ScaleBar = function ScaleBar(props) {
var uuid = 0;
var getPrefixCls = React.useContext(ConfigContext);
var prefixCls = getPrefixCls('scale-bar');
var _props$type = props.type,
type = _props$type === void 0 ? 'quota' : _props$type,
_props$textareaPositi = props.textareaPosition,
textareaPosition = _props$textareaPositi === void 0 ? 'bottom' : _props$textareaPositi,
heightLightColor = props.heightLightColor,
height = props.height,
animation = props.animation,
_props$current = props.current,
current = _props$current === void 0 ? 0 : _props$current,
_props$textarea = props.textarea,
textarea = _props$textarea === void 0 ? ['一般', '正常', '良好', '极佳'] : _props$textarea,
_props$intervalColor = props.intervalColor,
intervalColor = _props$intervalColor === void 0 ? [] : _props$intervalColor,
textareaColor = props.textareaColor,
strokeColor = props.strokeColor,
trailColor = props.trailColor,
percent = props.percent,
_props$className = props.className,
className = _props$className === void 0 ? 'test' : _props$className,
title = props.title,
progressDot = props.progressDot,
children = props.children;
var spanClassname = function spanClassname(index) {
var _classNames;
return classNames__default['default']((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-item-span"), true), _defineProperty(_classNames, "".concat(prefixCls, "-item-span-first"), index === 0), _defineProperty(_classNames, "".concat(prefixCls, "-item-span-last"), index === textarea.length - 1), _defineProperty(_classNames, "".concat(prefixCls, "-item-span-background"), index === current), _defineProperty(_classNames, "".concat(prefixCls, "-item-span-active"), !!animation && index === current), _classNames));
};
var heightLightColorSty = function heightLightColorSty(index) {
var diffTrailColor = index !== current && trailColor ? trailColor : null;
return intervalColor.length > 0 ? intervalColor[index] : index === current ? heightLightColor : diffTrailColor ? diffTrailColor : '';
};
var arrowClassname = function arrowClassname(index) {
return classNames__default['default'](_defineProperty({}, "".concat(prefixCls, "-item-arrow"), intervalColor.length > 0 ? index === current : false));
};
var wrapClassname = classNames__default['default'](prefixCls, className);
var textClassname = function textClassname(index) {
return classNames__default['default']("".concat(prefixCls, "-item-text"), _defineProperty({}, "".concat(prefixCls, "-item-text-color"), intervalColor.length > 0 ? true : index === current));
};
var renderQuotaType = function renderQuotaType() {
return textarea.map(function (item, index) {
var text = /*#__PURE__*/React__default['default'].createElement("div", {
className: textClassname(index)
}, item);
return /*#__PURE__*/React__default['default'].createElement("div", {
className: "".concat(prefixCls, "-item"),
key: item + "".concat(index),
style: _defineProperty({}, heightLightColorSty(index) ? "color" : '', heightLightColorSty(index))
}, textareaPosition === 'top' && text, /*#__PURE__*/React__default['default'].createElement("span", {
className: arrowClassname(index),
style: {
borderTopColor: intervalColor[index]
}
}), /*#__PURE__*/React__default['default'].createElement("span", {
className: spanClassname(index),
style: {
height: height,
backgroundColor: heightLightColorSty(index)
}
}), textareaPosition === 'bottom' && text);
});
};
var sortGradient = function sortGradient(gradients) {
var tempArr = [];
Object.keys(gradients).forEach(function (key) {
var formattedKey = parseFloat(key.replace(/%/g, ''));
if (!isNaN(formattedKey)) {
tempArr.push({
key: formattedKey,
value: gradients[key]
});
}
});
tempArr = tempArr.sort(function (a, b) {
return a.key - b.key;
});
return tempArr.map(function (_ref) {
var key = _ref.key,
value = _ref.value;
return "".concat(value, " ").concat(key, "%");
}).join(', ');
};
var strokeSty = function strokeSty() {
if (!strokeColor) return {};
var bcColor = typeof strokeColor === 'string';
if (bcColor) {
return _defineProperty({}, 'backgroundColor', strokeColor);
} else if (_typeof(strokeColor) === 'object') {
return _defineProperty({}, 'backgroundImage', "linear-gradient(to right, ".concat(sortGradient(strokeColor), ")"));
}
};
var getKey = function getKey() {
return uuid++;
};
var strokeClassname = classNames__default['default'](["".concat(prefixCls, "-degree-stroke")], _defineProperty({}, "".concat(prefixCls, "-degree-stroke-active"), type === 'degree' || !!animation));
var renderDegreeType = function renderDegreeType() {
var text = /*#__PURE__*/React__default['default'].createElement("div", {
className: "".concat(prefixCls, "-content")
}, textarea.map(function (item) {
return /*#__PURE__*/React__default['default'].createElement("div", {
className: "".concat(prefixCls, "-degree-text"),
style: {
color: textareaColor
},
key: getKey()
}, item);
}));
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, textareaPosition === 'top' && text, /*#__PURE__*/React__default['default'].createElement("div", {
className: "".concat(prefixCls, "-degree"),
style: {
height: height
}
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: "".concat(prefixCls, "-degree-placeholder")
}, textarea.map(function (i, idx) {
return /*#__PURE__*/React__default['default'].createElement("span", {
key: idx
});
})), /*#__PURE__*/React__default['default'].createElement("div", {
className: strokeClassname,
style: _objectSpread2({
width: "".concat(percent, "%")
}, strokeSty())
}), /*#__PURE__*/React__default['default'].createElement("div", {
className: "".concat(prefixCls, "-degree-background"),
style: {
backgroundColor: trailColor
}
})), textareaPosition === 'bottom' && text);
};
var renderNode = type === 'quota' ? renderQuotaType() : type === 'degree' ? renderDegreeType() : null;
var titleNode = title && /*#__PURE__*/React__default['default'].createElement("div", {
className: "".concat(prefixCls, "-title")
}, title);
return /*#__PURE__*/React__default['default'].createElement("div", {
className: wrapClassname
}, titleNode, /*#__PURE__*/React__default['default'].createElement("div", {
className: type === 'quota' ? "".concat(prefixCls, "-flex") : ''
}, renderNode));
};
var css_248z$3 = "/**\n公共样式\n**/\n/*通用样式*/\nhtml,\nbody,\n#root {\n height: 100%;\n}\nli {\n list-style: none;\n}\nbody,\nul,\np {\n padding: 0;\n margin: 0;\n}\n.open-loupe {\n position: relative;\n}\n.open-loupe-img-container {\n cursor: move;\n position: relative;\n width: inherit;\n height: inherit;\n}\n.open-loupe-img-container img {\n width: 100%;\n height: 100%;\n}\n.open-loupe-img-container .open-loupe-img-mask {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 100;\n width: 100%;\n height: 100%;\n}\n.open-loupe-img-container .open-loupe-mouse-mask {\n position: absolute;\n top: 0;\n left: 0;\n background-color: rgba(0, 0, 0, 0.2);\n}\n.open-loupe-scale {\n position: absolute;\n top: 0;\n z-index: 200;\n overflow: hidden;\n}\n.open-loupe-scale img {\n position: absolute;\n top: 0;\n left: 0;\n transform-origin: top left;\n}\n";
styleInject(css_248z$3);
var _excluded = ["src", "position", "scale", "maskBlockStyle", "zIndex", "width", "height", "alt", "distance", "maskBlockClassName", "fallback", "loupe", "onError"];
var Index$1 = function Index(props) {
var _classNames;
var src = props.src,
_props$position = props.position,
position = _props$position === void 0 ? 'right' : _props$position,
_props$scale = props.scale,
scale = _props$scale === void 0 ? 2 : _props$scale,
_props$maskBlockStyle = props.maskBlockStyle,
maskBlockStyle = _props$maskBlockStyle === void 0 ? {} : _props$maskBlockStyle,
_props$zIndex = props.zIndex,
zIndex = _props$zIndex === void 0 ? 200 : _props$zIndex,
_props$width = props.width,
width = _props$width === void 0 ? 300 : _props$width,
_props$height = props.height,
height = _props$height === void 0 ? 300 : _props$height,
alt = props.alt,
_props$distance = props.distance,
distance = _props$distance === void 0 ? 14 : _props$distance,
maskBlockClassName = props.maskBlockClassName,
fallback = props.fallback,
_props$loupe = props.loupe,
loupe = _props$loupe === void 0 ? true : _props$loupe,
onImageError = props.onError,
imgPorps = _objectWithoutProperties(props, _excluded);
var getPrefixCls = React.useContext(ConfigContext);
var prefixCls = getPrefixCls('loupe');
var PARAMS = {
scale: scale,
width: pxOrStrToNumber(width),
height: pxOrStrToNumber(height)
};
var mouseRadiusW = PARAMS.width / PARAMS.scale / 2;
var mouseRadiusH = PARAMS.height / PARAMS.scale / 2;
var ClassObj = {
imgContainer: {
width: "".concat(PARAMS.width, "px"),
height: "".concat(PARAMS.height, "px")
},
mouseBlock: {
width: "".concat(mouseRadiusW * 2, "px"),
height: "".concat(mouseRadiusH * 2, "px")
},
magnifierContainer: {
left: "".concat(PARAMS.width, "px"),
width: "".concat(PARAMS.width, "px"),
height: "".concat(PARAMS.height, "px")
},
imgStyle: {
width: "".concat(PARAMS.width, "px"),
height: "".concat(PARAMS.height, "px"),
transform: "scale(".concat(PARAMS.scale, ")")
}
};
var isLoaded = React__default['default'].useRef(false);
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
showLoupe = _useState2[0],
setShowLoupe = _useState2[1];
var _useState3 = React.useState({
mouseBlock: ClassObj.mouseBlock,
imgStyle: ClassObj.imgStyle
}),
_useState4 = _slicedToArray(_useState3, 2),
_useState4$ = _useState4[0],
mouseBlock = _useState4$.mouseBlock,
imgStyle = _useState4$.imgStyle,
setMouseImg = _useState4[1];
var _useState5 = React.useState({
mouseX: 0,
mouseY: 0
}),
_useState6 = _slicedToArray(_useState5, 2),
_useState6$ = _useState6[0],
mouseX = _useState6$.mouseX,
mouseY = _useState6$.mouseY,
setMousePosition = _useState6[1];
var _useState7 = React.useState('error'),
_useState8 = _slicedToArray(_useState7, 2),
status = _useState8[0],
setStatus = _useState8[1];
var isError = status === 'error';
var calculationBlock = function calculationBlock(offsetX, offsetY) {
var cssStyle = {
mouseBlock: _objectSpread2({}, mouseBlock),
imgStyle: _objectSpread2({}, imgStyle)
};
var offsetW = offsetX;
var offsetH = offsetY;
if (offsetX < mouseRadiusW) {
offsetW = mouseRadiusW;
} else if (offsetX > PARAMS.width - mouseRadiusW) {
offsetW = PARAMS.width - mouseRadiusW;
}
if (offsetY < mouseRadiusH) {
offsetH = mouseRadiusH;
} else if (offsetY > PARAMS.height - mouseRadiusH) {
offsetH = PARAMS.height - mouseRadiusH;
}
var left = offsetW - mouseRadiusW;
var top = offsetH - mouseRadiusH;
cssStyle.mouseBlock.left = left;
cssStyle.mouseBlock.top = top;
cssStyle.imgStyle.left = -left * PARAMS.scale;
cssStyle.imgStyle.top = -top * PARAMS.scale;
setMouseImg(cssStyle);
};
var onLoad = function onLoad() {
setStatus('normal');
};
var getImgRef = function getImgRef(img) {
isLoaded.current = false;
if (status !== 'loading') return;
if ((img === null || img === void 0 ? void 0 : img.complete) && (img.naturalWidth || img.naturalHeight)) {
isLoaded.current = true;
onLoad();
}
};
React__default['default'].useEffect(function () {
if (isError) {
setStatus('normal');
}
if (!isLoaded.current) {
setStatus('loading');
}
}, [src]);
var mouseEnter = function mouseEnter() {
setShowLoupe(true);
};
var mouseLeave = function mouseLeave() {
setShowLoupe(false);
};
var mouseMove = function mouseMove(event) {
var e = event.nativeEvent;
setMousePosition({
mouseX: e.offsetX,
mouseY: e.offsetY
});
};
React.useMemo(function () {
calculationBlock(mouseX, mouseY);
}, [mouseX, mouseY]);
var magnifierMemo = React.useMemo(function () {
var translateDis = pxOrStrToNumber(distance);
var positionObj = {};
switch (position) {
case 'left':
positionObj['left'] = -translateDis - pxOrStrToNumber(width) + "px";
break;
case 'right':
positionObj['left'] = translateDis + pxOrStrToNumber(width) + "px";
break;
case 'top':
positionObj['top'] = -translateDis - pxOrStrToNumber(width) + "px";
positionObj['left'] = "0px";
break;
case 'bottom':
positionObj['bottom'] = -distance - Number(width) + "px";
positionObj['top'] = 'auto';
positionObj['left'] = 0;
break;
}
return _objectSpread2(_objectSpread2({}, ClassObj.magnifierContainer), positionObj);
}, [position]);
var onError = function onError(e) {
if (onImageError) {
onImageError(e);
}
setStatus('error');
};
var maskBlockClass = classNames__default['default']((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-mouse-mask"), true), _defineProperty(_classNames, "maskBlockClassName", maskBlockClassName ? maskBlockClassName : ''), _classNames));
var wrapClassname = classNames__default['default'](_defineProperty({}, "".concat(prefixCls), true));
var image = /*#__PURE__*/React__default['default'].createElement("img", _objectSpread2(_objectSpread2(_objectSpread2({
alt: alt
}, imgPorps), isError && fallback ? {
src: fallback
} : {
onLoad: onLoad,
onError: onError,
src: src
}), {}, {
ref: getImgRef
}));
return /*#__PURE__*/React__default['default'].createElement("div", {
className: wrapClassname,
style: ClassObj.imgContainer
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: "".concat(prefixCls, "-img-container"),
style: {
cursor: loupe ? 'move' : 'default'
}
}, image, /*#__PURE__*/React__default['default'].createElement("div", {
className: "".concat(prefixCls, "-img-mask"),
onMouseEnter: mouseEnter,
onMouseLeave: mouseLeave,
onMouseMove: mouseMove
}), showLoupe && loupe && /*#__PURE__*/React__default['default'].createElement("div", {
style: _objectSpread2(_objectSpread2({}, mouseBlock), maskBlockStyle),
className: maskBlockClass
})), showLoupe && loupe && /*#__PURE__*/React__default['default'].createElement("div", {
style: Object.assign(_objectSpread2({}, magnifierMemo), {
zIndex: zIndex
}),
className: "".concat(prefixCls, "-scale")
}, /*#__PURE__*/React__default['default'].createElement("img", {
style: imgStyle,
alt: alt,
src: isError && fallback ? fallback : src
})));
};
exports.Foo = Index;
exports.ImageScrollYouKu = ImageScrollYouKu;
exports.Loupe = Index$1;
exports.ScaleBar = ScaleBar;