bi-open-menu-sdk
Advanced tools
Comparing version
/** | ||
* @flie 自定义菜单默认模板 | ||
*/ import * as React from 'react'; | ||
export const CUSTOM_MENU_TOOLTIP_EVENT = 'CUSTOM_MENU_TOOLTIP_EVENT'; | ||
export const IconWrapper = (props)=>/*#__PURE__*/ React.createElement("i", props, /*#__PURE__*/ React.createElement("svg", { | ||
viewBox: '0 0 1024 1024', | ||
*/ function _array_like_to_array(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 _array_with_holes(arr) { | ||
if (Array.isArray(arr)) return arr; | ||
} | ||
function _iterable_to_array_limit(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 _non_iterable_rest() { | ||
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); | ||
} | ||
function _sliced_to_array(arr, i) { | ||
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest(); | ||
} | ||
function _unsupported_iterable_to_array(o, minLen) { | ||
if (!o) return; | ||
if (typeof o === "string") return _array_like_to_array(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(n); | ||
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen); | ||
} | ||
import * as React from "react"; | ||
export var CUSTOM_MENU_TOOLTIP_EVENT = "CUSTOM_MENU_TOOLTIP_EVENT"; | ||
export var IconWrapper = function(props) { | ||
return /*#__PURE__*/ React.createElement("i", props, /*#__PURE__*/ React.createElement("svg", { | ||
viewBox: "0 0 1024 1024", | ||
"aria-hidden": "true", | ||
@@ -12,19 +59,24 @@ width: "1em", | ||
}, props.children)); | ||
/** 菜单默认图标 */ export const IconDefault = (props)=>/*#__PURE__*/ React.createElement(IconWrapper, props, /*#__PURE__*/ React.createElement("path", { | ||
}; | ||
/** 菜单默认图标 */ export var IconDefault = function(props) { | ||
return /*#__PURE__*/ React.createElement(IconWrapper, props, /*#__PURE__*/ React.createElement("path", { | ||
d: "M838.193105 907.620131V1023.99744H582.193745a23.193542 23.193542 0 0 1-23.295942-23.295942v-23.449541c0-82.380594-47.206282-139.468451-139.98045-139.468451-91.85257 0-139.673251 57.599856-139.673251 139.468451v23.449541a23.244742 23.244742 0 0 1-23.295942 23.244742H116.377309L0.0512 1023.99744v-116.428509l0.511999-139.673251a23.244742 23.244742 0 0 1 23.244742-23.142342h46.489483c64.10224 0 116.07011-60.262249 116.07011-139.622051 0-80.0766-51.660671-139.673251-116.07011-139.673251H23.654341a23.244742 23.244742 0 0 1-23.295942-23.244742V302.591244c0-23.80794-0.1024-62.617443-0.307199-116.37731h232.703418v-0.204799C232.754618 80.1278 299.314452 0 418.968553 0c116.735708 0 186.930733 82.278194 186.930732 186.009135v0.1536h116.530909c15.564761 0 54.374264 0 116.377309-0.1536v232.857018h22.630344c91.647771 0 162.610793 81.868595 162.610793 186.213934 0 103.730941-71.167822 186.162735-162.610793 186.162735h-23.244742v116.377309z" | ||
})); | ||
/** 菜单 loading 图标 */ export const IconLoading = (props)=>/*#__PURE__*/ React.createElement(IconWrapper, props, /*#__PURE__*/ React.createElement("path", { | ||
}; | ||
/** 菜单 loading 图标 */ export var IconLoading = function(props) { | ||
return /*#__PURE__*/ React.createElement(IconWrapper, props, /*#__PURE__*/ React.createElement("path", { | ||
d: "M960 447.008q-11.008-152.992-120-261.504t-260.992-120.512q-16-0.992-27.488 9.504t-11.488 26.496q0 14.016 9.504 24.512t23.488 11.488q55.008 4 107.008 26.016 60.992 26.016 108.992 73.504t74.016 109.504q22.016 51.008 26.016 106.016 0.992 14.016 11.488 23.488t24.512 9.504q15.008 0 26.016-11.008 11.008-12 8.992-27.008z" | ||
})); | ||
}; | ||
function getComponentInfoByDom(elem) { | ||
if (!elem || elem.nodeName.toUpperCase() === 'BODY') { | ||
if (!elem || elem.nodeName.toUpperCase() === "BODY") { | ||
return { | ||
componentType: '', | ||
name: '' | ||
componentType: "", | ||
name: "" | ||
}; | ||
} | ||
if (typeof elem.hasAttribute === 'function' && elem.hasAttribute('data-custom-component-root')) { | ||
if (typeof elem.hasAttribute === "function" && elem.hasAttribute("data-custom-component-root")) { | ||
return { | ||
componentType: elem.getAttribute('data-custom-component-type'), | ||
name: elem.getAttribute('data-custom-component-name') | ||
componentType: elem.getAttribute("data-custom-component-type"), | ||
name: elem.getAttribute("data-custom-component-name") | ||
}; | ||
@@ -38,15 +90,16 @@ } | ||
* @returns | ||
*/ export const MenuItem = ({ className, style, title, disabled = false, loading = false, hoverTip, onClick, showTitle = true, showIcon = true })=>{ | ||
const [icon, setIcon] = React.useState(''); | ||
const [originTitle, setOriginTitle] = React.useState(''); | ||
const ref = React.useRef(); | ||
React.useEffect(()=>{ | ||
*/ export var MenuItem = function(param) { | ||
var className = param.className, style = param.style, title = param.title, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading, hoverTip = param.hoverTip, onClick = param.onClick, _param_showTitle = param.showTitle, showTitle = _param_showTitle === void 0 ? true : _param_showTitle, _param_showIcon = param.showIcon, showIcon = _param_showIcon === void 0 ? true : _param_showIcon; | ||
var _React_useState = _sliced_to_array(React.useState(""), 2), icon = _React_useState[0], setIcon = _React_useState[1]; | ||
var _React_useState1 = _sliced_to_array(React.useState(""), 2), originTitle = _React_useState1[0], setOriginTitle = _React_useState1[1]; | ||
var ref = React.useRef(); | ||
React.useEffect(function() { | ||
if (ref.current) { | ||
const doc = ref.current.getRootNode(); | ||
const iconElem = doc.querySelector(`#custom-component-icon`); | ||
const { componentType, name } = getComponentInfoByDom(ref.current); | ||
var doc = ref.current.getRootNode(); | ||
var iconElem = doc.querySelector("#custom-component-icon"); | ||
var _getComponentInfoByDom = getComponentInfoByDom(ref.current), componentType = _getComponentInfoByDom.componentType, name = _getComponentInfoByDom.name; | ||
setOriginTitle(name); | ||
// 是否有组件 icon | ||
if (iconElem && iconElem.textContent.indexOf(`.icon-${componentType}`) >= 0) { | ||
setIcon(`icon-${componentType}`); | ||
if (iconElem && iconElem.textContent.indexOf(".icon-".concat(componentType)) >= 0) { | ||
setIcon("icon-".concat(componentType)); | ||
} | ||
@@ -56,10 +109,10 @@ } | ||
// tooltip 在 qbi 实现, 通过事件通信 | ||
const setTip = React.useCallback((visible)=>{ | ||
var setTip = React.useCallback(function(visible) { | ||
if (ref.current) { | ||
const container = ref.current.closest('[data-custom-component-root]'); | ||
if (hoverTip && typeof hoverTip === 'string' && container) { | ||
var container = ref.current.closest("[data-custom-component-root]"); | ||
if (hoverTip && typeof hoverTip === "string" && container) { | ||
container.dispatchEvent(new CustomEvent(CUSTOM_MENU_TOOLTIP_EVENT, { | ||
detail: { | ||
title: hoverTip, | ||
visible | ||
visible: visible | ||
} | ||
@@ -73,3 +126,3 @@ })); | ||
// 默认 icon | ||
let iconContent = /*#__PURE__*/ React.createElement(IconDefault, { | ||
var iconContent = /*#__PURE__*/ React.createElement(IconDefault, { | ||
className: "default-icon" | ||
@@ -80,3 +133,3 @@ }); | ||
iconContent = /*#__PURE__*/ React.createElement("i", { | ||
className: `upload-icon ${icon}` | ||
className: "upload-icon ".concat(icon) | ||
}); | ||
@@ -90,4 +143,4 @@ } | ||
} | ||
const handleClick = React.useCallback((e)=>{ | ||
if (typeof onClick === 'function' && !disabled) { | ||
var handleClick = React.useCallback(function(e) { | ||
if (typeof onClick === "function" && !disabled) { | ||
onClick(e); | ||
@@ -100,3 +153,3 @@ e.stopPropagation(); | ||
]); | ||
const handleMouseEnter = React.useCallback((e)=>{ | ||
var handleMouseEnter = React.useCallback(function(e) { | ||
setTip(true); | ||
@@ -106,3 +159,3 @@ }, [ | ||
]); | ||
const handleMouseLeave = React.useCallback((e)=>{ | ||
var handleMouseLeave = React.useCallback(function(e) { | ||
setTip(false); | ||
@@ -112,6 +165,6 @@ }, [ | ||
]); | ||
const viewTitle = React.useMemo(()=>{ | ||
const propsTitle = typeof title === 'string' ? title : undefined; | ||
var viewTitle = React.useMemo(function() { | ||
var propsTitle = typeof title === "string" ? title : undefined; | ||
var _ref; | ||
return (_ref = propsTitle !== null && propsTitle !== void 0 ? propsTitle : originTitle) !== null && _ref !== void 0 ? _ref : ''; | ||
return (_ref = propsTitle !== null && propsTitle !== void 0 ? propsTitle : originTitle) !== null && _ref !== void 0 ? _ref : ""; | ||
}, [ | ||
@@ -126,3 +179,3 @@ originTitle, | ||
ref: ref, | ||
className: `custom-card-menu ${disabled ? 'disabled' : ''} ${className || ''}`, | ||
className: "custom-card-menu ".concat(disabled ? "disabled" : "", " ").concat(className || ""), | ||
style: style, | ||
@@ -129,0 +182,0 @@ onClick: handleClick, |
@@ -1,4 +0,4 @@ | ||
export { I18n, getStringRealLength, getAliasName, formatNumberWithConfig, formatNumber, transposeData, LATEST_VERSION, CHANGE_LOGS, revisal, OLDEST_VERSION, getRevisalRange } from 'bi-open'; | ||
export { Interfaces } from './interfaces'; | ||
export { createBIComponent } from 'bi-open-react-sdk'; | ||
export { IconDefault, IconLoading, IconWrapper, MenuItem, CUSTOM_MENU_TOOLTIP_EVENT } from './components'; | ||
export { I18n, getStringRealLength, getAliasName, formatNumberWithConfig, formatNumber, transposeData, LATEST_VERSION, CHANGE_LOGS, revisal, OLDEST_VERSION, getRevisalRange } from "bi-open"; | ||
export { Interfaces } from "./interfaces"; | ||
export { createBIComponent } from "bi-open-react-sdk"; | ||
export { IconDefault, IconLoading, IconWrapper, MenuItem, CUSTOM_MENU_TOOLTIP_EVENT } from "./components"; |
/** | ||
* 接口全部来自 bi-open | ||
*/ // eslint-disable-next-line rulesdir/no-useless-export | ||
export { Interfaces } from 'bi-open'; | ||
export { Interfaces } from "bi-open"; |
{ | ||
"name": "bi-open-menu-sdk", | ||
"version": "0.0.11-beta.1", | ||
"version": "0.0.11-beta.2", | ||
"main": "dist/main", | ||
@@ -5,0 +5,0 @@ "peerDependencies": { |
23342
12.23%567
10.53%