From 934b9c3380da71525a35491ead53338c39253b97 Mon Sep 17 00:00:00 2001 From: luhc228 Date: Thu, 16 Sep 2021 15:10:39 +0800 Subject: [PATCH 1/4] feat: support select different materials --- .../web/mocks/material/getData.json | 6 +++ .../web/src/pages/ComponentCreator/index.tsx | 10 ++++ .../web/src/pages/MaterialImporter/index.tsx | 23 ++++++++- .../web/src/pages/PageGenerator/index.tsx | 12 ++++- .../getComponentTypeOptionsByProjectType.ts | 23 +++++++++ .../src/material/getProjectComponentType.ts | 29 +++++++++++ .../material-engine/src/material/index.ts | 4 +- packages/material-ui/demo/usage.md | 34 ++++++++++--- .../src/components/type.module.scss | 11 +++- packages/material-ui/src/components/type.tsx | 50 +++++++++++++++++-- packages/material-ui/src/components/view.tsx | 2 + packages/material-ui/src/index.tsx | 19 ++++++- packages/material-utils/src/types.ts | 7 ++- 13 files changed, 213 insertions(+), 17 deletions(-) create mode 100644 packages/material-engine/src/material/getComponentTypeOptionsByProjectType.ts create mode 100644 packages/material-engine/src/material/getProjectComponentType.ts 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..a32521364 100644 --- a/extensions/material-helper/web/src/pages/ComponentCreator/index.tsx +++ b/extensions/material-helper/web/src/pages/ComponentCreator/index.tsx @@ -20,6 +20,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 { @@ -146,6 +155,7 @@ const Home = () => { onSettingsClick={onSettingsClick} getData={getData} onBlockClick={onSelect} + getComponentTypeOptions={getComponentTypeOptions} selectedBlocks={selectedBlock ? [selectedBlock] : []} dataWhiteList={['blocks']} /> 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 (
{ 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 +64,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' }); } @@ -226,6 +235,7 @@ const Home = () => {
{ + 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..0c6b1b4da 100644 --- a/packages/material-engine/src/material/index.ts +++ b/packages/material-engine/src/material/index.ts @@ -15,9 +15,11 @@ import generateDebugMaterialData from './generateDebugMaterialData'; 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'; +const ICE_MATERIAL_SOURCE = 'https://iceworks.oss-cn-hangzhou.aliyuncs.com/pre-assets/materials/react-materials.json'; const VUE_MATERIAL_SOURCE = 'https://ice.alicdn.com/assets/materials/vue-materials.json'; // const MINI_PROGRAM_MATERIAL_SOURCE = 'https://ice.alicdn.com/assets/materials/miniprogram-materials.json'; const RAX_MATERIAL_SOURCE = 'https://ice.alicdn.com/assets/materials/rax-materials.json'; 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/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..95c92294d 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,44 @@ 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) { + console.log('value==>', value); + console.log('categoryData==>', categoryData); + const newData = filterCategoryData(value); + + setData(newData); + } + + return (
-
+
+