From b23bcd754b4673269727cd48a268d91c32a0920f Mon Sep 17 00:00:00 2001 From: yangfan <18767120422@163.com> Date: Wed, 29 Sep 2021 15:41:52 +0800 Subject: [PATCH] Release 1.4.2 (#956) * feat: update (#953) * feat: update (#954) * Feat: support select different material (#955) * feat: support select different materials * feat: support select different base component * feat: support install material deps * feat: support componentCreator and pageGenerator * Fix: doctor ts error (#957) * chore: version and changelog (#959) * feat: update (#958) Co-authored-by: Hengchang Lu <44047106+luhc228@users.noreply.github.com> --- extensions/application-manager/CHANGELOG.md | 4 + extensions/application-manager/package.json | 2 +- .../src/quickPicks/options.ts | 4 +- .../src/views/quickEntriesView.ts | 2 +- extensions/appworks/CHANGELOG.md | 7 ++ extensions/appworks/package.json | 2 +- extensions/doctor/CHANGELOG.md | 4 + extensions/doctor/package.json | 2 +- extensions/doctor/src/codemod.ts | 9 ++- extensions/material-helper/CHANGELOG.md | 5 ++ extensions/material-helper/package.json | 2 +- .../web/mocks/material/getData.json | 6 ++ .../web/src/pages/ComponentCreator/index.tsx | 20 ++++- .../web/src/pages/MaterialImporter/index.tsx | 23 +++++- .../web/src/pages/PageGenerator/index.tsx | 21 +++++- .../material-helper/web/src/typings.d.ts | 14 ++++ package.json | 3 +- packages/common-service/src/material.ts | 2 +- packages/material-engine/CHANGELOG.md | 4 + packages/material-engine/package.json | 4 +- .../material-engine/src/component/index.ts | 3 +- .../material-engine/src/material/constants.ts | 1 + .../src/material/generateDebugMaterialData.ts | 4 +- .../getComponentTypeOptionsByProjectType.ts | 23 ++++++ .../src/material/getProjectComponentType.ts | 29 ++++++++ .../material-engine/src/material/index.ts | 13 ++-- packages/material-ui/CHANGELOG.md | 5 ++ packages/material-ui/demo/usage.md | 34 +++++++-- packages/material-ui/package.json | 2 +- .../src/components/type.module.scss | 11 ++- packages/material-ui/src/components/type.tsx | 48 +++++++++++- packages/material-ui/src/components/view.tsx | 2 + packages/material-ui/src/index.tsx | 19 ++++- packages/material-utils/CHANGELOG.md | 4 + packages/material-utils/package.json | 2 +- packages/material-utils/src/types.ts | 19 +++-- yarn.lock | 74 ++++++++++++------- 37 files changed, 358 insertions(+), 75 deletions(-) create mode 100644 extensions/material-helper/web/src/typings.d.ts create mode 100644 packages/material-engine/src/material/constants.ts create mode 100644 packages/material-engine/src/material/getComponentTypeOptionsByProjectType.ts create mode 100644 packages/material-engine/src/material/getProjectComponentType.ts create mode 100644 packages/material-ui/CHANGELOG.md diff --git a/extensions/application-manager/CHANGELOG.md b/extensions/application-manager/CHANGELOG.md index 8cadfb112..fb77224d9 100644 --- a/extensions/application-manager/CHANGELOG.md +++ b/extensions/application-manager/CHANGELOG.md @@ -1,5 +1,9 @@ # Change Log +## 1.0.8 + +- feat: quick entries add 'doctor' + ## 1.0.7 - fix: actions view error diff --git a/extensions/application-manager/package.json b/extensions/application-manager/package.json index 746078a3d..1c9a736a9 100644 --- a/extensions/application-manager/package.json +++ b/extensions/application-manager/package.json @@ -3,7 +3,7 @@ "displayName": "Application Manager", "description": "Quick view your Universal Application(React/Rax/Vue, etc).", "publisher": "iceworks-team", - "version": "1.0.7", + "version": "1.0.8", "engines": { "vscode": "^1.41.0" }, diff --git a/extensions/application-manager/src/quickPicks/options.ts b/extensions/application-manager/src/quickPicks/options.ts index d9f4aa430..a1d767856 100644 --- a/extensions/application-manager/src/quickPicks/options.ts +++ b/extensions/application-manager/src/quickPicks/options.ts @@ -47,9 +47,7 @@ export default [ detail: i18n.format('extension.applicationManager.showEntriesQuickPick.doctor.detail'), command: 'doctor.dashboard', async condition() { - const isInstalledDoctor = checkIsInstalledDoctor(); - const isTargetProjectType = await checkIsTargetProjectType(); - return isInstalledDoctor && isTargetProjectType; + return checkIsInstalledDoctor(); }, }, { diff --git a/extensions/application-manager/src/views/quickEntriesView.ts b/extensions/application-manager/src/views/quickEntriesView.ts index 501fec07b..f3b8b5c97 100644 --- a/extensions/application-manager/src/views/quickEntriesView.ts +++ b/extensions/application-manager/src/views/quickEntriesView.ts @@ -11,7 +11,7 @@ const entryOptions = options.filter(({ command }) => { return [ 'project-creator.create-project.start', 'applicationManager.dashboard.start', - 'applicationManager.welcome.start', + 'doctor.dashboard', 'applicationManager.configHelper.start', ].includes(command); }).concat([ diff --git a/extensions/appworks/CHANGELOG.md b/extensions/appworks/CHANGELOG.md index 2ef436ddf..8f4d6ba4e 100644 --- a/extensions/appworks/CHANGELOG.md +++ b/extensions/appworks/CHANGELOG.md @@ -1,5 +1,12 @@ # Change Log +## [1.4.2](https://github.com/appworks-lab/appworks/releases/tag/v1.4.2) + +- feat: add quick entries for 'doctor' [#953](https://github.com/appworks-lab/appworks/pull/953) +- feat: add showInformationMessage for CodeMod result [#954](https://github.com/appworks-lab/appworks/pull/954) +- feat: support antd and fusion material select [#955](https://github.com/appworks-lab/appworks/pull/955) +- feat: add 'tao.def-basic-kit' for O2 [#951](https://github.com/appworks-lab/appworks/pull/951) + ## [1.4.1](https://github.com/appworks-lab/appworks/releases/tag/v1.4.1) - feat: update feedback link [#940](https://github.com/appworks-lab/appworks/pull/940) diff --git a/extensions/appworks/package.json b/extensions/appworks/package.json index 4c7ea2b07..460171f52 100644 --- a/extensions/appworks/package.json +++ b/extensions/appworks/package.json @@ -3,7 +3,7 @@ "displayName": "AppWorks", "description": "Application Development Pack, provide visualization and intelligent technology to build Universal Application faster and better, support Web / H5 / MiniProgram(小程序) Application.", "publisher": "iceworks-team", - "version": "1.4.1", + "version": "1.4.2", "engines": { "vscode": "^1.41.0" }, diff --git a/extensions/doctor/CHANGELOG.md b/extensions/doctor/CHANGELOG.md index a2f57ef90..27ca91c40 100644 --- a/extensions/doctor/CHANGELOG.md +++ b/extensions/doctor/CHANGELOG.md @@ -1,9 +1,13 @@ # Change Log +# 1.1.6 + +- feat: add showInformationMessage for codemod result # 1.1.5 - fix: windows get empty files + # 1.1.4 - fix: codemod 100 score show result diff --git a/extensions/doctor/package.json b/extensions/doctor/package.json index b926768ab..1a2fbe08c 100644 --- a/extensions/doctor/package.json +++ b/extensions/doctor/package.json @@ -3,7 +3,7 @@ "displayName": "Doctor", "description": "A free security and quality audit tool for modern DevOps teams", "publisher": "iceworks-team", - "version": "1.1.5", + "version": "1.1.6", "engines": { "vscode": "^1.41.0" }, diff --git a/extensions/doctor/src/codemod.ts b/extensions/doctor/src/codemod.ts index a09e54e18..4ebd95b7b 100644 --- a/extensions/doctor/src/codemod.ts +++ b/extensions/doctor/src/codemod.ts @@ -18,6 +18,9 @@ const SCAN_OPTIONS = { export async function runCodemod(transform: string) { const result = await doctor.scan(projectPath, Object.assign({ transforms: [transform] }, SCAN_OPTIONS)); + const { env, window } = vscode; + const isEn = env.language === 'en'; + window.showInformationMessage(`${isEn ? 'Codemod run success, logs shows in the OUTPUT.' : 'Codemod 运行成功，运行日志将在 “输出” 中展示。'}`); setOutput(result.codemod?.reports[0].output || ''); return result; } @@ -40,9 +43,9 @@ export async function activateCodemod(context: vscode.ExtensionContext) { if (codemod.npm_deprecate) { const { name, version } = parse(codemod.npm_deprecate); - const dependence = (packageJSON.dependencies || {})[name] || (packageJSON.devDependencies || {})[name]; - - if (dependence && semver.satisfies(semver.coerce(dependence), version || '*')) { + const dependencyVersion = (packageJSON.dependencies || {})[name] || (packageJSON.devDependencies || {})[name]; + const dependencySemver = semver.coerce(dependencyVersion); + if (dependencySemver && semver.satisfies(dependencySemver, version || '*')) { deprecatedPackageConfig[name] = { ...codemod, name, diff --git a/extensions/material-helper/CHANGELOG.md b/extensions/material-helper/CHANGELOG.md index 57452f127..a54bb6f80 100644 --- a/extensions/material-helper/CHANGELOG.md +++ b/extensions/material-helper/CHANGELOG.md @@ -1,6 +1,11 @@ # Change Log +## 1.1.1 + +- feat: support select different component type + ## 1.1.0 + - chore: add iceworks-refactor to extensionDependencies - fix: the babel plugin's flow will cause error, when babel parse typescript files. - fix: import duplicate components when add routers diff --git a/extensions/material-helper/package.json b/extensions/material-helper/package.json index 91b34ba80..012aa7a3a 100644 --- a/extensions/material-helper/package.json +++ b/extensions/material-helper/package.json @@ -3,7 +3,7 @@ "displayName": "Component Helper", "description": "Easily use Component in React/Vue/Rax.", "publisher": "iceworks-team", - "version": "1.1.0", + "version": "1.1.1", "main": "./build/extension.js", "engines": { "vscode": "^1.41.0" diff --git a/extensions/material-helper/web/mocks/material/getData.json b/extensions/material-helper/web/mocks/material/getData.json index 3ce2530c0..ea3495929 100644 --- a/extensions/material-helper/web/mocks/material/getData.json +++ b/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", diff --git a/extensions/material-helper/web/src/pages/ComponentCreator/index.tsx b/extensions/material-helper/web/src/pages/ComponentCreator/index.tsx index a1d0de8a7..5b8cb407c 100644 --- a/extensions/material-helper/web/src/pages/ComponentCreator/index.tsx +++ b/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 (
@@ -146,8 +162,10 @@ const Home = () => { onSettingsClick={onSettingsClick} getData={getData} onBlockClick={onSelect} + getComponentTypeOptions={getComponentTypeOptions} selectedBlocks={selectedBlock ? [selectedBlock] : []} dataWhiteList={['blocks']} + projectComponentType={projectComponentType} />
diff --git a/extensions/material-helper/web/src/pages/MaterialImporter/index.tsx b/extensions/material-helper/web/src/pages/MaterialImporter/index.tsx index e657f4494..669caab37 100644 --- a/extensions/material-helper/web/src/pages/MaterialImporter/index.tsx +++ b/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 = () => { +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 = () => { } } + 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 = () => { Notification.error({ content: e.message }); } }; + + useEffect(() => { + callService('material', 'getProjectComponentType').then((res: string) => { + setProjectComponentType(res); + }); + }, []); return (
{ const [visible, setVisible] = useState(false); const [routerConfig, setRouterConfig] = useState([]); 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 (
@@ -226,6 +241,7 @@ const Home = () => {
{ getData={getData} onBlockClick={onAdd} dataWhiteList={['blocks']} + projectComponentType={projectComponentType} />
diff --git a/extensions/material-helper/web/src/typings.d.ts b/extensions/material-helper/web/src/typings.d.ts new file mode 100644 index 000000000..70b1367a2 --- /dev/null +++ b/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; +} diff --git a/package.json b/package.json index b8717c4f2..b3f8b10a3 100644 --- a/package.json +++ b/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", diff --git a/packages/common-service/src/material.ts b/packages/common-service/src/material.ts index fff47d9b7..5703adcbb 100644 --- a/packages/common-service/src/material.ts +++ b/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'); }, }); diff --git a/packages/material-engine/CHANGELOG.md b/packages/material-engine/CHANGELOG.md index c36fcbea5..5d0092df4 100644 --- a/packages/material-engine/CHANGELOG.md +++ b/packages/material-engine/CHANGELOG.md @@ -1,5 +1,9 @@ # CHANGELOG +## 0.2.1 + +- feat: support get component type + ## 0.2.0 - fix: import duplicate components when add routers diff --git a/packages/material-engine/package.json b/packages/material-engine/package.json index 948a3deec..473e0501f 100644 --- a/packages/material-engine/package.json +++ b/packages/material-engine/package.json @@ -1,6 +1,6 @@ { "name": "@appworks/material-engine", - "version": "0.2.0", + "version": "0.2.1", "description": "AppWorks Material Engine for VSCode extension.", "files": [ "lib" @@ -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": { diff --git a/packages/material-engine/src/component/index.ts b/packages/material-engine/src/component/index.ts index e6d10b687..af4348d09 100644 --- a/packages/material-engine/src/component/index.ts +++ b/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,7 @@ 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) { + if (semver.satisfies(packageJSON.version, version)) { return; } } catch { diff --git a/packages/material-engine/src/material/constants.ts b/packages/material-engine/src/material/constants.ts new file mode 100644 index 000000000..327871eaf --- /dev/null +++ b/packages/material-engine/src/material/constants.ts @@ -0,0 +1 @@ +export const DEBUG_PREFIX = 'DEBUG:'; diff --git a/packages/material-engine/src/material/generateDebugMaterialData.ts b/packages/material-engine/src/material/generateDebugMaterialData.ts index 8522c94ee..4247add23 100644 --- a/packages/material-engine/src/material/generateDebugMaterialData.ts +++ b/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); diff --git a/packages/material-engine/src/material/getComponentTypeOptionsByProjectType.ts b/packages/material-engine/src/material/getComponentTypeOptionsByProjectType.ts new file mode 100644 index 000000000..9231aff32 --- /dev/null +++ b/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']; +} diff --git a/packages/material-engine/src/material/getProjectComponentType.ts b/packages/material-engine/src/material/getProjectComponentType.ts new file mode 100644 index 000000000..74dbc5881 --- /dev/null +++ b/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] || ''; +} diff --git a/packages/material-engine/src/material/index.ts b/packages/material-engine/src/material/index.ts index 3bdaa8f3e..8b623a280 100644 --- a/packages/material-engine/src/material/index.ts +++ b/packages/material-engine/src/material/index.ts @@ -12,9 +12,11 @@ import { IMaterialSource, IMaterialData, IMaterialBase } from '@appworks/materia import { getProjectType } from '@appworks/project-service'; import i18n from './i18n'; import generateDebugMaterialData from './generateDebugMaterialData'; +import { DEBUG_PREFIX } from './constants'; -export const DEBUG_PREFIX = 'DEBUG:'; export { generateDebugMaterialData }; +export * from './getProjectComponentType'; +export * from './getComponentTypeOptionsByProjectType'; // material source const ICE_MATERIAL_SOURCE = 'https://ice.alicdn.com/assets/materials/react-materials.json'; @@ -150,7 +152,7 @@ export const getData = async function (source: string): Promise { if (isRaxMaterial(source)) { // handle with fusion-mobile components - materialData.components = getBaseMaterials(materialData.components, '@alifd/meet', '2.2.6'); + materialData.components = getBaseMaterials(materialData.components, '@alifd/meet', '2.x', 'fusion-mobile'); } // base materials @@ -158,9 +160,9 @@ export const getData = async function (source: string): Promise { try { if (isIceMaterial(source)) { const fusionBaseResult = await axios({ url: FUSION_PC_COMPONENTS_SOURCE }); - const fusionBaseMaterials = getBaseMaterials(fusionBaseResult.data, '@alifd/next', '1.18.16'); + const fusionBaseMaterials = getBaseMaterials(fusionBaseResult.data, '@alifd/next', '1.x', 'fusion'); const antdBaseResult = await axios({ url: ANTD_PC_COMPONENTS_SOURCE }); - const antdBaseMaterials = getBaseMaterials(antdBaseResult.data, 'antd', '4.16.5'); + const antdBaseMaterials = getBaseMaterials(antdBaseResult.data, 'antd', '4.x', 'antd'); bases = [...fusionBaseMaterials, ...antdBaseMaterials]; } else if (isRaxMaterial(source)) { const baseResult = await axios({ url: RAX_BASE_COMPONENTS_SOURCE }); @@ -184,7 +186,7 @@ export const getData = async function (source: string): Promise { return data; }; -function getBaseMaterials(data, npm?, version?) { +function getBaseMaterials(data: any[], npm: string, version: string, componentType: string) { const componentSourceDetail = componentSourceDetails.find((item) => item.npm === npm) || {} as any; const { homeUrl, repositoryUrl, componentNameFormatFunc } = componentSourceDetail; @@ -203,6 +205,7 @@ function getBaseMaterials(data, npm?, version?) { version, registry: 'https://registry.npmjs.com', }, + componentType, }; }); } diff --git a/packages/material-ui/CHANGELOG.md b/packages/material-ui/CHANGELOG.md new file mode 100644 index 000000000..8726262f2 --- /dev/null +++ b/packages/material-ui/CHANGELOG.md @@ -0,0 +1,5 @@ +# CHANGELOG + +## 0.1.1 + +- feat: support select different component type diff --git a/packages/material-ui/demo/usage.md b/packages/material-ui/demo/usage.md index 7588fd4c0..9201d3bba 100644 --- a/packages/material-ui/demo/usage.md +++ b/packages/material-ui/demo/usage.md @@ -12,7 +12,7 @@ async function wait(time) { await new Promise((resolve) => setTimeout(resolve, time)); } -const bloks = [ +const blocks = [ { "name": "AdvancedDetailHead", "title": "AdvancedDetailHead", @@ -29,7 +29,27 @@ const bloks = [ "npm": "@alifd/fusion-advanced-detail", "version": "0.1.9", "registry": "https://registry.npmjs.org" - } + }, + "componentType": "antd" + }, + { + "name": "AdvancedDetailHeadFusionPC", + "title": "AdvancedDetailHeadFusionPC", + "category": "Information", + "screenshot": "https://unpkg.com/@alifd/fusion-advanced-detail/screenshot.png", + "description": "intro block", + "homepage": "https://unpkg.com/@alifd/fusion-advanced-detail@0.1.9/build/index.html", + "categories": [ + "Information" + ], + "repository": "https://github.com/alibaba-fusion/materials/tree/master/blocks/AdvancedDetail", + "source": { + "type": "npm", + "npm": "@alifd/fusion-advanced-detail", + "version": "0.1.9", + "registry": "https://registry.npmjs.org" + }, + "componentType": "fusion" }, ]; @@ -87,7 +107,8 @@ const components = [ "npm": "@alifd/biz-anchor", "version": "1.1.7", "registry": "http://registry.npmjs.org" - } + }, + "componentType": "fusion" }, ]; @@ -111,7 +132,8 @@ const scaffolds = [ }, "screenshots": [ "https://img.alicdn.com/tfs/TB16ftixUY1gK0jSZFMXXaWcVXa-2880-1800.png" - ] + ], + "componentType": "fusion" } ]; @@ -131,7 +153,7 @@ class App extends Component { "type": "react", "name": "materials", "description": "基于 Fusion 基础组件和 ICE 脚手架的官方物料", - "blocks": bloks, + "blocks": blocks, "components": components, "scaffolds": scaffolds }; @@ -140,7 +162,7 @@ class App extends Component { await wait(2000); return sources; }} - selectedBlocks={bloks} + selectedBlocks={blocks} onBlockClick={function() { alert('block click!!!'); }} />
diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json index 4d597515b..e2a958ef0 100644 --- a/packages/material-ui/package.json +++ b/packages/material-ui/package.json @@ -1,6 +1,6 @@ { "name": "@appworks/material-ui", - "version": "0.1.0", + "version": "0.1.1", "description": "Material panel for display and select materials.", "files": [ "demo/", diff --git a/packages/material-ui/src/components/type.module.scss b/packages/material-ui/src/components/type.module.scss index 26d7c9f5f..388a9dfc3 100644 --- a/packages/material-ui/src/components/type.module.scss +++ b/packages/material-ui/src/components/type.module.scss @@ -29,9 +29,18 @@ flex-direction: column; height: 100%; - .search { + .operation { margin: 0 12px; + > span { + margin-top: 12px; + width: 100%; + } + + span:nth-of-type(1) { + margin-top: 0; + } + :global(.next-search) { width: 100%; } diff --git a/packages/material-ui/src/components/type.tsx b/packages/material-ui/src/components/type.tsx index 77255b68a..a075ed93f 100644 --- a/packages/material-ui/src/components/type.tsx +++ b/packages/material-ui/src/components/type.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Search, ResponsiveGrid, Radio, Loading } from '@alifd/next'; +import { Search, ResponsiveGrid, Radio, Loading, Select } from '@alifd/next'; import LazyLoad from 'react-lazyload'; import { IMaterialTypeDatum, @@ -9,6 +9,7 @@ import { IMaterialBase, CUSTOM_CATEGORY, IMaterialPage, + IMaterialCategoryDatum } from '@appworks/material-utils'; import { MaterialScaffold } from './scaffold'; import { MaterialBlock } from './block'; @@ -20,6 +21,7 @@ import styles from './type.module.scss'; const { Cell } = ResponsiveGrid; interface ContentProps extends IMaterialTypeDatum { + categoryData: IMaterialCategoryDatum[], scrollId?: string; typeId: string; colSpan: number; @@ -27,6 +29,8 @@ interface ContentProps extends IMaterialTypeDatum { selectedComponents?: IMaterialComponent[]; selectedBases?: IMaterialBase[]; selectedPages?: IMaterialPage[]; + projectComponentType: string; + componentTypeOptions: Array<{value: string, label: string}>; onComponentClick?: (dataSource: IMaterialComponent) => void; onBaseClick?: (dataSource: IMaterialBase) => void; onBlockClick?: (dataSource: IMaterialBlock) => void; @@ -43,6 +47,8 @@ const Content: React.FC = ({ selectedPages, selectedComponents, selectedBases, + componentTypeOptions, + projectComponentType, onComponentClick, onBaseClick, onPageClick, @@ -51,10 +57,10 @@ const Content: React.FC = ({ }) => { const [data, setData] = React.useState(categoryData); React.useEffect(() => { - setData(categoryData); + setData(filterCategoryData(projectComponentType)); }, [categoryData]); - async function handeSearchSubmit(keyword) { + async function handeSearchSubmit(keyword: string) { const newData = categoryData.map((item) => { const { list } = item; return { @@ -72,10 +78,42 @@ const Content: React.FC = ({ setData(newData); } + /** + * filter category data by the component type + * @param currentComponentType + * @returns + */ + function filterCategoryData(currentComponentType?: string) { + if (!currentComponentType) { + return categoryData + } + return categoryData.map((item) => { + const { list } = item; + return { + ...item, + list: list.filter((materialItem) => { + return materialItem.componentType === currentComponentType; + }) + } + }) + } + async function handleSelectSubmit(value: string) { + const newData = filterCategoryData(value); + + setData(newData); + } + + return (
-
+
+