@mpxjs/webpack-plugin
Version:
mpx compile core
56 lines (55 loc) • 2.3 kB
JSX
/**
* ✔ type
* ✔ size
* ✔ color
*/
import { forwardRef, useRef, createElement } from 'react';
import { Image } from 'react-native';
import useInnerProps from '../getInnerListeners';
import useNodesRef from '../useNodesRef';
import { useLayout, useTransformStyle, extendObject } from '../utils';
import Success from './icons/success.png';
import SuccessNoCircle from './icons/success_no_circle.png';
import Info from './icons/info.png';
import Warn from './icons/warn.png';
import Waiting from './icons/waiting.png';
import Cancel from './icons/cancel.png';
import Download from './icons/download.png';
import Search from './icons/search.png';
import Clear from './icons/clear.png';
import Portal from '../mpx-portal';
const IconTypeMap = new Map([
['success', Success],
['success_no_circle', SuccessNoCircle],
['info', Info],
['warn', Warn],
['waiting', Waiting],
['cancel', Cancel],
['download', Download],
['search', Search],
['clear', Clear]
]);
const Icon = forwardRef((props, ref) => {
const { type, size = 23, color, style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
const source = IconTypeMap.get(type);
const defaultStyle = { width: ~~size, height: ~~size };
const styleObj = extendObject({}, defaultStyle, style);
const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
const nodeRef = useRef(null);
useNodesRef(props, ref, nodeRef, { style: normalStyle });
const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
ref: nodeRef,
source,
style: extendObject({}, normalStyle, layoutStyle, { tintColor: color })
}), [], {
layoutRef
});
const finalComponent = createElement(Image, innerProps);
if (hasPositionFixed) {
return createElement(Portal, null, finalComponent);
}
return finalComponent;
});
Icon.displayName = 'MpxIcon';
export default Icon;