jjb-lc-designable
Version:
基于alibaba-designable源码二次封装的表单设计器。
116 lines • 4.25 kB
JavaScript
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { createContext, useContext, useEffect, useRef } from 'react';
import { isStr, isFn, isObj, isPlainObj } from 'jjb-lc-designable/shared';
import { observer } from 'jjb-lc-formily/reactive-react';
import { Tooltip } from 'antd';
import { usePrefix, useRegistry, useTheme } from '../../hooks';
import cls from 'classnames';
import './styles.less';
const IconContext = /*#__PURE__*/createContext(null);
const isNumSize = val => /^[\d.]+$/.test(val);
export const IconWidget = observer(props => {
const theme = useTheme();
const context = useContext(IconContext);
const registry = useRegistry();
const prefix = usePrefix('icon');
const size = props.size || '1em';
const height = props.style?.height || size;
const width = props.style?.width || size;
const takeIcon = infer => {
if (isStr(infer)) {
const finded = registry.getDesignerIcon(infer);
if (finded) {
return takeIcon(finded);
}
return /*#__PURE__*/React.createElement("img", {
src: infer,
height: height,
width: width
});
} else if (isFn(infer)) {
return /*#__PURE__*/React.createElement(infer, {
height,
width,
fill: 'currentColor'
});
} else if ( /*#__PURE__*/React.isValidElement(infer)) {
if (infer.type === 'svg') {
return /*#__PURE__*/React.cloneElement(infer, {
// @ts-ignore
height,
width,
fill: 'currentColor',
viewBox: infer.props.viewBox || '0 0 1024 1024',
focusable: 'false',
'aria-hidden': 'true'
});
} else if (infer.type === 'path' || infer.type === 'g') {
return /*#__PURE__*/React.createElement("svg", {
viewBox: "0 0 1024 1024",
height: height,
width: width,
fill: "currentColor",
focusable: "false",
"aria-hidden": "true"
}, infer);
}
return infer;
} else if (isPlainObj(infer)) {
if (infer[theme]) {
return takeIcon(infer[theme]);
} else if (infer['shadow']) {
return /*#__PURE__*/React.createElement(IconWidget.ShadowSVG, {
width: width,
height: height,
content: infer['shadow']
});
}
return null;
}
};
const renderTooltips = children => {
if (!isStr(props.infer) && context?.tooltip) return children;
const tooltip = props.tooltip || registry.getDesignerMessage(`icons.${props.infer}`);
if (tooltip) {
const title = /*#__PURE__*/React.isValidElement(tooltip) || isStr(tooltip) ? tooltip : tooltip.title;
const props = /*#__PURE__*/React.isValidElement(tooltip) || isStr(tooltip) ? {} : isObj(tooltip) ? tooltip : {};
return /*#__PURE__*/React.createElement(Tooltip, _extends({}, props, {
title: title
}), children);
}
return children;
};
if (!props.infer) return null;
return renderTooltips( /*#__PURE__*/React.createElement("span", _extends({}, props, {
className: cls(prefix, props.className),
style: {
...props.style,
cursor: props.onClick ? 'pointer' : props.style?.cursor
}
}), takeIcon(props.infer)));
});
IconWidget.ShadowSVG = props => {
const ref = useRef();
const width = isNumSize(props.width) ? `${props.width}px` : props.width;
const height = isNumSize(props.height) ? `${props.height}px` : props.height;
useEffect(() => {
if (ref.current) {
const root = ref.current.attachShadow({
mode: 'open'
});
root.innerHTML = `<svg viewBox="0 0 1024 1024" style="width:${width};height:${height}">${props.content}</svg>`;
}
}, []);
return /*#__PURE__*/React.createElement("div", {
ref: ref
});
};
IconWidget.Provider = props => {
return (
/*#__PURE__*/
// @ts-ignore
React.createElement(IconContext.Provider, {
value: props
}, props.children)
);
};