fix: check local component prototypes (#160)

* fix: prototype undefined bug

* fix: logic bug

* fix: components grid item ui

* fix: ui bug

* fix: update local file

apps/playground/src/helpers/mock-files.ts

@@ -161,6 +161,8 @@ import {
 } from "@music163/antd";
 import { Space } from "@music163/antd";
 import { LocalButton } from "../components";
+import { OutButton } from "../components";
+
 class App extends React.Component {
   render() {
     return (
@@ -181,6 +183,7 @@ class App extends React.Component {
         <Section tid="section2">
           <Space tid="space1">
             <LocalButton />
+            <OutButton />
             <Button tid="button1">button</Button>
           </Space>
         </Section>
@@ -290,6 +293,14 @@ registerComponentPrototype({
 });
 `;
 
+const outButtonCode = `
+import React from 'react';
+
+export default function OutButton(props) {
+  return <button {...props}>Out button (from other file)</button>
+}
+`;
+
 const componentsInputCode = `
 import React from 'react';
 import { registerComponentPrototype } from '../utils';
@@ -312,6 +323,7 @@ registerComponentPrototype({
 const componentsEntryCode = `
 export { default as LocalButton } from './button';
 export { default as LocalInput } from './input';
+export { default as OutButton } from './out-button';
 `;
 
 const storeApp = `
@@ -412,6 +424,7 @@ export const sampleFiles = [
   { filename: '/src/pages/list.js', code: viewHomeCode },
   { filename: '/src/pages/detail.js', code: emptyPageCode },
   { filename: '/src/components/button.js', code: componentsButtonCode },
+  { filename: '/src/components/out-button.js', code: outButtonCode },
   { filename: '/src/components/input.js', code: componentsInputCode },
   { filename: '/src/components/index.js', code: componentsEntryCode },
   { filename: '/src/routes.js', code: routesCode },

packages/designer/src/sidebar/components-panel.tsx

@@ -289,6 +289,10 @@ const StyledCommonGridItem = styled.div`
     transition: 0.15s ease-in-out;
     transition-property: transform;
     will-change: transform;
+    img {
+      width: unset;
+      height: 85%;
+    }
   }
 
   .info {
@@ -355,6 +359,15 @@ function MaterialGrid({ data }: MaterialProps) {
   };
 
   const icon = data.icon || 'icon-placeholder';
+
+  const iconNode = icon.startsWith('icon-') ? (
+    <IconFont className="material-icon" type={data.icon || 'icon-placeholder'} />
+  ) : (
+    <Box className="material-icon">
+      <img src={icon} alt={data.name} />
+    </Box>
+  );
+
   if (isLine) {
     return (
       <Box
@@ -380,11 +393,7 @@ function MaterialGrid({ data }: MaterialProps) {
           alignItems="center"
           justifyContent="center"
         >
-          {icon.startsWith('icon-') ? (
-            <IconFont className="material-icon" type={data.icon || 'icon-placeholder'} />
-          ) : (
-            <img className="material-icon" src={icon} alt={data.name} />
-          )}
+          {iconNode}
         </Box>
         <Box flex={1}>
           <Box fontWeight="500" display="flex" justifyContent="space-between">
@@ -417,11 +426,7 @@ function MaterialGrid({ data }: MaterialProps) {
       onDragEnd={handleDragEnd}
       onClick={handleSelect}
     >
-      {icon.startsWith('icon-') ? (
-        <IconFont className="material-icon" type={data.icon || 'icon-placeholder'} />
-      ) : (
-        <img className="material-icon" src={icon} alt={data.name} />
-      )}
+      {iconNode}
       <Text fontSize="12px" marginTop="4px">
         {data.title ?? data.name}
       </Text>

packages/designer/src/simulator/selection.tsx

@@ -198,7 +198,7 @@ function SelectionBox({ showActions, actions, data }: SelectionBoxProps) {
             }
           />
           <SelectionToolSet>{!isPage && actions}</SelectionToolSet>
-          {prototype.hasChildren !== false && (
+          {isFromCurrentFile && prototype?.hasChildren !== false && (
             <ComponentsPopover>
               <Tooltip title="快捷添加子元素">
                 <SelectionHelper icon={<PlusOutlined />} />