@vtx/cs-map
Version:
React components for Vortex
141 lines (137 loc) • 8.42 kB
JavaScript
;
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = _default;
var _react = _interopRequireWildcard(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _ahooks = require("ahooks");
var _useProps2 = _interopRequireDefault(require("../use-props"));
var _Dom = _interopRequireDefault(require("./Dom"));
var _excluded = ["data", "getParentContainer", "style", "cssText", "show", "children"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
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 _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; }
// 将 jsx 的 style 小驼峰的 key 属性，转化为 cssText 的 -
var convertCamelToCSS = function convertCamelToCSS(style) {
var cssText = '';
for (var property in style) {
if (style.hasOwnProperty(property)) {
var value = style[property];
if (value && typeof value === 'number' && !isNaN(value)) {
value = value + 'px';
}
var cssProperty = property.replace(/([A-Z])/g, '-$1').toLowerCase();
cssText += "".concat(cssProperty, ": ").concat(value, "; ");
}
}
return cssText;
};
function _default(props) {
var data = props.data,
getParentContainer = props.getParentContainer,
style = props.style,
cssText = props.cssText,
_props$show = props.show,
show = _props$show === void 0 ? true : _props$show,
children = props.children,
otherProps = _objectWithoutProperties(props, _excluded);
var _useProps = (0, _useProps2["default"])(),
map = _useProps.map;
var domRef = (0, _react.useRef)(document.createElement('div'));
var overlay = (0, _react.useRef)();
(0, _react.useEffect)(function () {
setStyle(cssText, style);
overlay.current = new _Dom["default"](_objectSpread({
map: map,
position: data,
element: domRef.current,
positioning: "bottom-center",
offset: [0, -10]
}, otherProps));
var parentDom = getParentContainer ? getParentContainer() : map._element;
parentDom.appendChild(domRef.current);
return function () {
overlay.current.destroy();
parentDom.removeChild(domRef.current);
};
}, []);
(0, _ahooks.useUpdateEffect)(function () {
setStyle(cssText, style);
}, [cssText, JSON.stringify(style)]);
(0, _ahooks.useUpdateEffect)(function () {
overlay.current.setPosition(data);
}, [JSON.stringify(data)]);
(0, _ahooks.useUpdateEffect)(function () {
domRef.current.style.display = show ? 'block' : 'none';
}, [show]);
var setStyle = function setStyle(_cssText, _style) {
var _domRef$current;
var cssText = ((_domRef$current = domRef.current) === null || _domRef$current === void 0 || (_domRef$current = _domRef$current.style) === null || _domRef$current === void 0 ? void 0 : _domRef$current.cssText) || "\n display: ".concat(show ? 'block' : 'none', ";\n position: absolute;\n user-select: none;\n pointer-events: none;\n ");
// 兼容css未加;
if (_cssText) {
var lastStr = _cssText[_cssText.length - 1];
if (lastStr !== ';') {
_cssText = "".concat(_cssText, "; ");
}
cssText = "\n ".concat(cssText, "\n ").concat(_cssText, "\n ");
}
if (_style) {
// 转换为CSS文本
var styleToCss = convertCamelToCSS(_style);
cssText = "\n ".concat(cssText, "\n ").concat(styleToCss, "\n ");
}
domRef.current.style.cssText = cssText;
};
return /*#__PURE__*/_reactDom["default"].createPortal(children, domRef.current);
}
// export default function (props) {
// const {data, style, show = true, children, ...otherProps} = props;
// const {map} = useProps();
//
// const domRef = useRef();
// const overlay = useRef();
//
// useEffect(() => {
// overlay.current = new Dom({
// map,
// position: data,
// element: domRef.current,
// positioning: "bottom-center",
// offset: [0, -10],
// ...otherProps
// });
//
// return () => {
// overlay.current.destroy();
// }
// }, []);
//
// useUpdateEffect(() => {
// overlay.current.setPosition(data)
// }, [JSON.stringify(data)])
//
// return (
// <div
// ref={domRef}
// style={{
// display: show ? 'block' : 'none',
// position: 'absolute',
// userSelect: 'none',
// pointerEvents: 'none',
// ...style
// }}
// >
// {children}
// </div>
// )
// }
//# sourceMappingURL=index.js.map