Feat: support select different material

extensions/material-helper/web/mocks/material/getData.json

@@ -36,6 +36,7 @@
       "dependencies": {
         "prop-types": "^15.5.8"
       },
+      "componentType": "fusion",
       "screenshots": ["https://unpkg.com/@alifd/fusion-advanced-detail/screenshot.png"],
       "publishTime": "2019-11-28T11:30:32.213Z",
       "updateTime": "2020-03-31T12:36:39.300Z"
@@ -66,6 +67,7 @@
       "dependencies": {
         "prop-types": "^15.5.8"
       },
+      "componentType": "fusion",
       "screenshots": ["https://unpkg.com/@alifd/fusion-basic-detail/screenshot.png"],
       "publishTime": "2019-11-28T11:38:31.720Z",
       "updateTime": "2020-03-31T12:52:50.478Z"
@@ -96,6 +98,7 @@
       "dependencies": {
         "prop-types": "^15.5.8"
       },
+      "componentType": "fusion",
       "screenshots": ["https://unpkg.com/@alifd/fusion-basic-detail/screenshot.png"],
       "publishTime": "2019-11-28T11:38:31.720Z",
       "updateTime": "2020-03-31T12:52:50.478Z"
@@ -126,6 +129,7 @@
       "dependencies": {
         "prop-types": "^15.5.8"
       },
+      "componentType": "antd",
       "screenshots": ["https://unpkg.com/@alifd/fusion-basic-detail/screenshot.png"],
       "publishTime": "2019-11-28T11:38:31.720Z",
       "updateTime": "2020-03-31T12:52:50.478Z"
@@ -150,6 +154,7 @@
         "classnames": "^2.2.6",
         "prop-types": "^15.5.8"
       },
+      "componentType": "fusion",
       "screenshot": "",
       "screenshots": "",
       "publishTime": "2019-07-02T13:50:26.135Z",
@@ -173,6 +178,7 @@
         "@alifd/next": "^1.x",
         "prop-types": "^15.5.8"
       },
+      "componentType": "fusion",
       "screenshot": "",
       "screenshots": "",
       "publishTime": "2018-01-17T12:37:35.249Z",

extensions/material-helper/web/src/pages/ComponentCreator/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Notification, Button, Input } from '@alifd/next';
 import Material from '@appworks/material-ui';
 import { LocaleProvider } from '@/i18n';
@@ -11,6 +11,7 @@ const Home = () => {
   const [selectedBlock, setSelectedBlock] = useState({});
   const [componentName, setComponentName] = useState('');
   const [isCreating, setIsCreating] = useState(false);
+  const [projectComponentType, setProjectComponentType] = useState('');
 
   async function onSettingsClick() {
     try {
@@ -20,6 +21,15 @@ const Home = () => {
     }
   }
 
+  async function getComponentTypeOptions() {
+    try {
+      const componentTypeOptions = await callService('material', 'getComponentTypeOptionsByProjectType');
+      return componentTypeOptions;
+    } catch (e) {
+      Notification.error({ content: e.message });
+    }
+  }
+
   async function getSources() {
     let sources = [];
     try {
@@ -115,6 +125,12 @@ const Home = () => {
       await callService('common', 'showTextDocument', blockIndexPath);
     }
   }
+
+  useEffect(() => {
+    callService('material', 'getProjectComponentType').then((res: string) => {
+      setProjectComponentType(res);
+    });
+  }, []);
   return (
     <div className={styles.wrap}>
       <div className={styles.list}>
@@ -146,8 +162,10 @@ const Home = () => {
               onSettingsClick={onSettingsClick}
               getData={getData}
               onBlockClick={onSelect}
+              getComponentTypeOptions={getComponentTypeOptions}
               selectedBlocks={selectedBlock ? [selectedBlock] : []}
               dataWhiteList={['blocks']}
+              projectComponentType={projectComponentType}
             />
           </div>
         </div>

extensions/material-helper/web/src/pages/MaterialImporter/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Notification } from '@alifd/next';
 import callService from '@/callService';
 import Material from '@appworks/material-ui';
@@ -7,8 +7,10 @@ import { useIntl } from 'react-intl';
 import styles from './index.module.scss';
 import { LocaleProvider } from '../../i18n';
 
-const Home: React.FC<any> = () => {
+const Home = () => {
+  const [projectComponentType, setProjectComponentType] = useState('');
   const intl = useIntl();
+
   async function onSettingsClick() {
     try {
       await callService('common', 'openMaterialsSettings');
@@ -17,6 +19,15 @@ const Home: React.FC<any> = () => {
     }
   }
 
+  async function getComponentTypeOptions() {
+    try {
+      const componentTypeOptions = await callService('material', 'getComponentTypeOptionsByProjectType');
+      return componentTypeOptions;
+    } catch (e) {
+      Notification.error({ content: e.message });
+    }
+  }
+
   async function getSources() {
     let sources = [];
     try {
@@ -70,14 +81,22 @@ const Home: React.FC<any> = () => {
       Notification.error({ content: e.message });
     }
   };
+
+  useEffect(() => {
+    callService('material', 'getProjectComponentType').then((res: string) => {
+      setProjectComponentType(res);
+    });
+  }, []);
   return (
     <div className={styles.container}>
       <Material
         disableLazyLoad
         onSettingsClick={onSettingsClick}
         getSources={getSources}
+        getComponentTypeOptions={getComponentTypeOptions}
         refreshSources={refreshSources}
         getData={getData}
+        projectComponentType={projectComponentType}
         onBlockClick={onBlockClick}
         onBaseClick={onBaseClick}
         onComponentClick={onComponentClick}

extensions/material-helper/web/src/pages/PageGenerator/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Grid, Notification, Button } from '@alifd/next';
 import { arrayMove } from 'react-sortable-hoc';
 import Material from '@appworks/material-ui';
@@ -21,6 +21,7 @@ const Home = () => {
   const [visible, setVisible] = useState(false);
   const [routerConfig, setRouterConfig] = useState<IRouter[]>([]);
   const [isConfigurableRouter, setIsConfigurableRouter] = useState(true);
+  const [projectComponentType, setProjectComponentType] = useState('');
 
   async function getSources() {
     let sources = [];
@@ -34,6 +35,15 @@ const Home = () => {
     return sources;
   }
 
+  async function getComponentTypeOptions() {
+    try {
+      const componentTypeOptions = await callService('material', 'getComponentTypeOptionsByProjectType');
+      return componentTypeOptions;
+    } catch (e) {
+      Notification.error({ content: e.message });
+    }
+  }
+
   async function refreshSources() {
     await callService('material', 'cleanCache');
     return await getSources();
@@ -55,7 +65,7 @@ const Home = () => {
       return intl.formatMessage({ id: 'web.iceworksMaterialHelper.pageGenerater.selectBlocks' });
     }
     // validate if there is a block with the same name
-    const blockNames = blocks.map(block => block.name);
+    const blockNames = blocks.map((block) => block.name);
     if (blockNames.length !== new Set(blockNames).size) {
       return intl.formatMessage({ id: 'web.iceworksMaterialHelper.pageGenerater.blackName.cannotBeDuplicated' });
     }
@@ -203,6 +213,11 @@ const Home = () => {
     }
   }
 
+  useEffect(() => {
+    callService('material', 'getProjectComponentType').then((res: string) => {
+      setProjectComponentType(res);
+    });
+  }, []);
   return (
     <div className={styles.wrap}>
       <div className={styles.label}>
@@ -226,13 +241,15 @@ const Home = () => {
           <Col span={8} className={styles.col}>
             <div className={styles.material}>
               <Material
+                getComponentTypeOptions={getComponentTypeOptions}
                 disableLazyLoad
                 getSources={getSources}
                 refreshSources={refreshSources}
                 onSettingsClick={onSettingsClick}
                 getData={getData}
                 onBlockClick={onAdd}
                 dataWhiteList={['blocks']}
+                projectComponentType={projectComponentType}
               />
             </div>
           </Col>

extensions/material-helper/web/src/typings.d.ts

@@ -0,0 +1,14 @@
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}

package.json

@@ -41,7 +41,8 @@
     "env": "node ./scripts/env.js"
   },
   "resolutions": {
-    "eslint-plugin-import": "2.20.2"
+    "eslint-plugin-import": "2.20.2",
+    "@typescript-eslint/parser": "^4.31.2"
   },
   "repository": {
     "type": "git",

packages/common-service/src/material.ts

@@ -28,7 +28,7 @@ export const bulkDownloadMaterials = async function (
       if (material.source.type === 'debug') {
         try {
           await fse.copy(material.source.path, downloadPath, {
-            filter: srcPath => {
+            filter: (srcPath) => {
               return !srcPath.includes('node_modules');
             },
           });

packages/material-engine/package.json

@@ -34,11 +34,13 @@
     "lodash.lowercase": "^4.3.0",
     "lodash.startcase": "^4.4.0",
     "prettier": "^2.1.2",
+    "semver": "^7.3.5",
     "transform-ts-to-js": "0.1.0",
     "typescript": "^3.8.3",
     "uppercamelcase": "^3.0.0"
   },
   "devDependencies": {
+    "@types/semver": "^7.3.8",
     "@types/vscode": "^1.45.0"
   },
   "publishConfig": {

packages/material-engine/src/component/index.ts

@@ -1,6 +1,7 @@
 import * as vscode from 'vscode';
 import * as path from 'path';
 import * as fsExtra from 'fs-extra';
+import * as semver from 'semver';
 import { IMaterialComponent } from '@appworks/material-utils';
 import {
   getLastAcitveTextEditor,
@@ -102,7 +103,8 @@ export async function addCode(dataSource: IMaterialComponent) {
   const packageJSONPath = path.join(projectPath, dependencyDir, npm, packageJSONFilename);
   try {
     const packageJSON = await fsExtra.readJson(packageJSONPath);
-    if (packageJSON.version === version) {
+    console.log('semver.satisfies(packageJSON.version, version)', semver.satisfies(packageJSON.version, version));
+    if (semver.satisfies(packageJSON.version, version)) {
       return;
     }
   } catch {

packages/material-engine/src/material/constants.ts

@@ -0,0 +1 @@
+export const DEBUG_PREFIX = 'DEBUG:';

packages/material-engine/src/material/generateDebugMaterialData.ts

@@ -3,7 +3,7 @@ import * as path from 'path';
 import * as glob from 'glob';
 import * as BluebirdPromise from 'bluebird';
 import { IMaterialData } from '@appworks/material-utils';
-import { DEBUG_PREFIX } from './index';
+import { DEBUG_PREFIX } from './constants';
 import { getProjectLanguageType } from '@appworks/project-service';
 import * as imageToBase64 from 'image-to-base64';
 
@@ -54,7 +54,7 @@ export default async function generateDebugMaterialData(materialPath: string): P
   const componentsData: any[] = [];
   const scaffoldsData: any[] = [];
   const pagesData: any[] = [];
-  materialsData.forEach(item => {
+  materialsData.forEach((item) => {
     const { materialType, materialData } = item;
     if (materialType === 'block') {
       blocksData.push(materialData);

packages/material-engine/src/material/getComponentTypeOptionsByProjectType.ts

@@ -0,0 +1,23 @@
+import { getProjectType } from '@appworks/project-service';
+
+const commonOptions = [{ value: '', label: '全部' }];
+
+const PCOptions = [
+  { value: 'fusion', label: 'fusion' },
+  { value: 'antd', label: 'antd' },
+].concat(commonOptions);
+
+const mobileOptions = [
+  { value: 'fusion-mobile', label: 'fusion-mobile' },
+].concat(commonOptions);
+
+const componentTypeOptionsMap = {
+  react: PCOptions,
+  rax: mobileOptions,
+  default: commonOptions,
+};
+
+export async function getComponentTypeOptionsByProjectType() {
+  const projectType = await getProjectType();
+  return componentTypeOptionsMap[projectType] || componentTypeOptionsMap['default'];
+}

packages/material-engine/src/material/getProjectComponentType.ts

@@ -0,0 +1,29 @@
+import * as path from 'path';
+import * as fse from 'fs-extra';
+import {
+  projectPath,
+  packageJSONFilename,
+} from '@appworks/project-service';
+
+const packageJSONPath = path.join(projectPath, packageJSONFilename);
+const componentType = {
+  '@alifd/next': 'fusion',
+  '@alife/next': 'fusion',
+  '@icedesign/base': 'fusion',
+  antd: 'antd',
+  '@alifd/meet': 'fusion-mobile',
+};
+
+export function getProjectComponentType() {
+  if (!fse.pathExistsSync(packageJSONPath)) {
+    return '';
+  }
+
+  const { dependencies = {}, devDependencies = {}, peerDependencies = {} } = fse.readJsonSync(packageJSONPath);
+  const deps = Object.assign(dependencies, devDependencies, peerDependencies);
+  const componentName = Object.keys(componentType).find((key: string) => {
+    return deps[key];
+  });
+
+  return componentType[componentName] || '';
+}