@mint-ui/map
Version:
- React map library - Control various map with one interface - Google, Naver, Kakao map supported now - Typescript supported - Canvas marker supported
258 lines (242 loc) • 10.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var classNames = require('classnames/bind');
var MintMap_module = require('../../MintMap.module.scss.js');
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 cn = classNames__default["default"].bind(MintMap_module);
function PointLoading(_a) {
var _b = _a.text,
text = _b === void 0 ? 'Loading' : _b,
_c = _a.pointCount,
pointCount = _c === void 0 ? 4 : _c,
_d = _a.speedMs,
speedMs = _d === void 0 ? 200 : _d;
var pointStringPool = React.useState(Array.from(Array(pointCount)).map(function (_el, idx) {
return Array.from(Array(idx + 1)).map(function () {
return '.';
}).join('');
}))[0];
var _e = React.useState(''),
pointString = _e[0],
setPointString = _e[1];
React.useEffect(function () {
var pointStringIndex = 0;
var interval = setInterval(function () {
pointStringIndex += 1;
if (pointStringIndex >= pointCount) {
pointStringIndex = 0;
}
setPointString(pointStringPool[pointStringIndex]);
}, speedMs);
return function () {
interval && clearInterval(interval);
};
}, []);
return React__default["default"].createElement("div", {
className: cn('loading-point-container')
}, React__default["default"].createElement("div", {
style: {
width: '300px',
fontSize: '16px',
fontWeight: 600,
color: 'gray',
transform: 'translateX(130px)'
}
}, "".concat(text, " ").concat(pointString)));
}
function MapLoadingWithImage(_a) {
var _b = _a.size,
size = _b === void 0 ? 256 : _b;
var _c = React.useState(),
width = _c[0],
setWidth = _c[1];
var _d = React.useState(),
height = _d[0],
setHeight = _d[1];
var render = React.useMemo(function () {
if (!height || !width) {
return;
}
var row = Math.ceil(height / size);
var col = Math.ceil(width / size);
console.log('re render', width, height, row, col);
return Array.from(Array(row)).map(function () {
return React__default["default"].createElement("div", {
style: {
display: 'flex'
}
}, Array.from(Array(col)).map(function () {
var duration = Number((Math.random() * 4).toFixed(1)) + 1;
var delay = Number((Math.random() * 4).toFixed(1)) + 2;
return React__default["default"].createElement(LoadingImage, {
size: size,
duration: duration,
delay: delay
});
}));
});
}, [width, height]);
return React__default["default"].createElement("div", {
ref: function (refs) {
setWidth(refs === null || refs === void 0 ? void 0 : refs.offsetWidth);
setHeight(refs === null || refs === void 0 ? void 0 : refs.offsetHeight);
},
style: {
width: '100%',
height: '100%',
overflow: 'hidden'
}
}, render);
}
function LoadingImage(_a) {
var _b = _a.size,
size = _b === void 0 ? 256 : _b,
_c = _a.duration,
duration = _c === void 0 ? 1 : _c,
_d = _a.delay,
delay = _d === void 0 ? 1 : _d;
var scale = 256 / 4000;
return React__default["default"].createElement("svg", {
className: cn("ani-fade-in"),
style: {
flex: "0 0 ".concat(size, "px"),
opacity: 0,
animationDelay: "".concat(delay, "s"),
animationDuration: "".concat(duration, "s"),
animationFillMode: 'forwards'
},
width: size,
height: size,
viewBox: "0 0 ".concat(size, " ").concat(size),
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, React__default["default"].createElement("g", {
transform: "scale(".concat(scale, ")"),
"clip-path": "url(#clip0_5_701)"
}, React__default["default"].createElement("rect", {
width: "4000",
height: "4000",
transform: "translate(0 4000) rotate(-90)",
fill: "#F8F8F8"
}), React__default["default"].createElement("path", {
d: "M2996.5 780L3624 309L3928.5 789.5L3422 1080.5L2996.5 780Z",
fill: "#E6E6E6"
}), React__default["default"].createElement("path", {
d: "M522.5 449.5L1156.5 48.4999L1197.5 64.4999L1502.5 485.5L822.5 918L522.5 449.5Z",
fill: "#F6E4DD"
}), React__default["default"].createElement("path", {
d: "M1149.5 1386.5L2468 516L2931.5 1286.5L2966 1415L1650.5 2248L1149.5 1386.5Z",
fill: "#DCEACA"
}), React__default["default"].createElement("path", {
d: "M1840.5 2838.5L2609 2313L3047.5 2599.5L3073.5 2745.5L2176.5 3311L1840.5 2838.5Z",
fill: "#E6E6E6"
}), React__default["default"].createElement("path", {
d: "M594 3013.5L1080.5 2681.5L1744 3615L1162.5 4002.5L594 3013.5Z",
fill: "#DCEACA"
}), React__default["default"].createElement("path", {
d: "M2094.05 1450.88C2127.97 1531.67 2192.23 1496.11 2250.02 1514.4C2567.73 1559.37 2608.68 1362.05 2668.2 1302.01C2736.79 1232.83 2612.15 1065.8 2523.28 1090.46C2434.42 1115.13 2432.96 1150.53 2415.25 1229.76C2397.53 1308.98 2233.45 1247.46 2177.4 1257.03C2121.35 1266.61 2051.65 1349.89 2094.05 1450.88Z",
fill: "#A2CAEE"
}), React__default["default"].createElement("circle", {
cx: "958",
cy: "3092",
r: "95",
fill: "#A2CAEE"
}), React__default["default"].createElement("circle", {
cx: "1127",
cy: "3176",
r: "56",
fill: "#A2CAEE"
}), React__default["default"].createElement("path", {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M3459.68 1085.96L4058.54 2069.19L4001.32 2104.04L3402.46 1120.82L3459.68 1085.96Z",
fill: "white"
}), React__default["default"].createElement("path", {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M-317.721 1447.99L595.333 2953.94L1201.76 4004.26L1143.74 4037.76L537.668 2988.06L-375.013 1482.72L-317.721 1447.99ZM1058.06 1406.15L1789.22 920.04L1109.17 -5.66436L1163.17 -45.3311L1844.92 882.695L2486.62 448.527L3047.72 1427.91L2989.59 1461.22L2464.38 544.474L1855.66 956.322L1855.55 956.398L1095.15 1461.94L1058.06 1406.15ZM1384.39 3114.5L2197.8 2552.05L1838.4 2105.93L1890.57 2063.9L2253.06 2513.84L2642 2244.89L2680.11 2300L1883.89 2850.56L2238.69 3352.52L2183.98 3391.19L1828.78 2888.67L1422.5 3169.61L1384.39 3114.5Z",
fill: "white"
}), React__default["default"].createElement("path", {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M-100.246 749.04L1266.96 -152.746L1346.25 -32.5396L-20.9597 869.247L-100.246 749.04Z",
fill: "#FBEDB1"
}), React__default["default"].createElement("path", {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M5229.83 1392.22L2830.78 2477.33L2803.17 2416.28L5202.22 1331.17L5229.83 1392.22Z",
fill: "white"
}), React__default["default"].createElement("path", {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M2486.94 449.315L3519.19 1097.44L3483.56 1154.18L2451.32 506.057L2486.94 449.315Z",
fill: "white"
}), React__default["default"].createElement("path", {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M2352.16 -273.141L2533.64 518.164L2468.34 533.141L2286.86 -258.164L2352.16 -273.141Z",
fill: "white"
}), React__default["default"].createElement("path", {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M2237.62 3336.43L2440.07 4086.61L2375.39 4104.07L2172.93 3353.89L2237.62 3336.43Z",
fill: "white"
}), React__default["default"].createElement("path", {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M1204.91 1396.51L-54.5055 1973.41L-82.4082 1912.49L1177.01 1335.59L1204.91 1396.51Z",
fill: "white"
}), React__default["default"].createElement("path", {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M2694.5 2950.14L4158.86 4928.5L4105.01 4968.36L2640.64 2990L2694.5 2950.14Z",
fill: "white"
}), React__default["default"].createElement("path", {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M3441.72 -42.6462L3995.65 846.725L3938.77 882.146L3384.85 -7.2254L3441.72 -42.6462Z",
fill: "white"
}), React__default["default"].createElement("path", {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M2282.81 3631.14L2925.81 3304.14L2956.19 3363.86L2313.19 3690.86L2282.81 3631.14Z",
fill: "white"
}), React__default["default"].createElement("path", {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M466.178 1695.89L522.822 1660.11L813.709 2120.58L1365.65 1773.15L1401.35 1829.85L849.492 2177.23L1140.32 2637.61L1083.68 2673.39L466.178 1695.89Z",
fill: "white"
}), React__default["default"].createElement("path", {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M790.24 914.745L1475.24 451.745L1512.76 507.255L827.76 970.255L790.24 914.745Z",
fill: "white"
}), React__default["default"].createElement("path", {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M3410.6 2192.45L2986.6 1469.45L3044.4 1435.55L3468.4 2158.55L3410.6 2192.45Z",
fill: "white"
}), React__default["default"].createElement("path", {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M3637.26 329.182L3012.26 803.682L2971.74 750.318L3596.74 275.818L3637.26 329.182Z",
fill: "white"
}), React__default["default"].createElement("path", {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M-102.531 3333.52L1563.16 2259.21L418.867 413.751L541.25 337.866L1684.19 2181.14L4025.32 666.934L4103.57 787.82L2336.63 1931.51L3187.41 2659.17L4104.73 3340.1L4018.9 3455.73L3139.75 2803.13L956.929 4221.62L878.381 4100.93L1666.1 3588.26L1086.77 2737.81L-24.4816 3454.53L-102.531 3333.52ZM1207.82 2659.74L1786.86 3509.76L3022.47 2707.58L2210.46 2013.07L1207.82 2659.74Z",
fill: "#FBEDB1"
})), React__default["default"].createElement("defs", null, React__default["default"].createElement("clipPath", {
id: "clip0_5_701"
}, React__default["default"].createElement("rect", {
width: "4000",
height: "4000",
fill: "white",
transform: "translate(0 4000) rotate(-90)"
}))));
}
exports.MapLoadingWithImage = MapLoadingWithImage;
exports.PointLoading = PointLoading;