diff --git a/packages/gi-assets-basic/src/components/ConciseContainer/Component.tsx b/packages/gi-assets-basic/src/components/ConciseContainer/Component.tsx deleted file mode 100644 index e55b40be1..000000000 --- a/packages/gi-assets-basic/src/components/ConciseContainer/Component.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import './index.less'; - -const ConciseContainer = props => { - const { children } = props; - // const context = useContext(); - // const { config, assets, HAS_GRAPH } = context; - - /** - * hack start - * - * 不应该修改 registerMeta 原有的containers 数据结构 - * 1. 先把追加的 GI_FreeContainer 移除 - * 2. 把 GI_CONTAINER 中的 数组对象 改为字符串 - * - * TODO： - * 需要在gi-site层修改这个containers的值 - * - */ - // const containers = props.containers.slice(0, -1).map(item => { - // return { - // ...item, - // GI_CONTAINER: item.GI_CONTAINER.map(item => item.value), - // }; - // }); - /** hack end */ - - // const Containers = useContainer(context, containers); - - // const [header, panel] = Containers; - // console.log('containers', containers, Containers); - - return
{children}
; -}; - -export default ConciseContainer; diff --git a/packages/gi-assets-basic/src/components/ConciseContainer/index.less b/packages/gi-assets-basic/src/components/ConciseContainer/index.less deleted file mode 100644 index 7d985f073..000000000 --- a/packages/gi-assets-basic/src/components/ConciseContainer/index.less +++ /dev/null @@ -1,34 +0,0 @@ -@panel-width: 600px; -.gi-xlab { - position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; - display: block; - .xlab-header { - top: 0px; - right: 0px; - left: 0px; - flex: 80px; - height: 80px; - padding: 8px; - line-height: 80px; - background: green; - } - .xlab-canvas { - position: absolute; - top: 100px; - right: @panel-width; - bottom: 0px; - left: 0px; - } - .xlab-properties { - position: absolute; - top: 100px; - right: 0px; - bottom: 0px; - width: @panel-width; - background: blueviolet; - } -} diff --git a/packages/gi-assets-basic/src/components/ConciseContainer/registerMeta.ts b/packages/gi-assets-basic/src/components/ConciseContainer/registerMeta.ts deleted file mode 100644 index 6dbf8abb8..000000000 --- a/packages/gi-assets-basic/src/components/ConciseContainer/registerMeta.ts +++ /dev/null @@ -1,27 +0,0 @@ -const registerMeta = context => { - const { GIAC_CONTENT_ITEMS } = context; - return { - // containers: [ - // { - // id: 'GI_CONTAINER_SIDE', - // name: $i18n.get({ id: 'basic.components.SegmentedLayout.registerMeta.SideContainer', dm: '侧边容器' }), - // required: true, - // GI_CONTAINER: { - // title: $i18n.get({ - // id: 'basic.components.SegmentedLayout.registerMeta.IntegratedComponents', - // dm: '集成组件', - // }), - // type: 'string', - // 'x-decorator': 'FormItem', - // 'x-component': 'Select', - // 'x-component-props': { - // mode: 'multiple', - // }, - // enum: GIAC_CONTENT_ITEMS, - // default: [], - // }, - // }, - // ], - }; -}; -export default registerMeta; diff --git a/packages/gi-assets-basic/src/components/RichContainer/Component.tsx b/packages/gi-assets-basic/src/components/RichContainer/Component.tsx new file mode 100644 index 000000000..7c56a8d72 --- /dev/null +++ b/packages/gi-assets-basic/src/components/RichContainer/Component.tsx @@ -0,0 +1,26 @@ +import { useContainer, useContext } from '@antv/gi-sdk'; +import React from 'react'; +import './index.less'; + +const ConciseContainer = props => { + const { children } = props; + const context = useContext(); + const { config, assets, HAS_GRAPH } = context; + const Containers = useContainer(context); + + const [NavbarArea, ViewArea, DataArea, StylingArea, CanvasArea] = Containers; + console.log('containers', Containers); + + return ( +
+
{NavbarArea.children.map(item => item.component)}
+
,,,,,,
+
+
+
{children}
+
+
+ ); +}; + +export default ConciseContainer; diff --git a/packages/gi-assets-basic/src/components/RichContainer/index.less b/packages/gi-assets-basic/src/components/RichContainer/index.less new file mode 100644 index 000000000..c8851e246 --- /dev/null +++ b/packages/gi-assets-basic/src/components/RichContainer/index.less @@ -0,0 +1,43 @@ +@panel-width: 600px; +.gi-rich-container { + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + display: block; + + .gi-rich-container-navbar { + position: relative; + height: 54px; + width: 100%; + background: green; + } + .gi-rich-container-toolbar { + position: relative; + height: 44px; + width: 100%; + background: #f3f5f9; + border-bottom: 1px solid #ddd; + } + .gi-rich-container-content { + position: absolute; + bottom: 0px; + top: 98px; + left: 0px; + right: 0px; + display: flex; + .gi-rich-container-side { + width: 400px; + height: 100%; + background: #f3f5f9; + } + .gi-rich-container-canvas { + position: absolute; + top: 0px; + bottom: 0px; + left: 400px; + right: 0px; + } + } +} diff --git a/packages/gi-assets-basic/src/components/ConciseContainer/index.tsx b/packages/gi-assets-basic/src/components/RichContainer/index.tsx similarity index 100% rename from packages/gi-assets-basic/src/components/ConciseContainer/index.tsx rename to packages/gi-assets-basic/src/components/RichContainer/index.tsx diff --git a/packages/gi-assets-basic/src/components/ConciseContainer/info.ts b/packages/gi-assets-basic/src/components/RichContainer/info.ts similarity index 66% rename from packages/gi-assets-basic/src/components/ConciseContainer/info.ts rename to packages/gi-assets-basic/src/components/RichContainer/info.ts index 12f6d56b9..6e3506bf5 100644 --- a/packages/gi-assets-basic/src/components/ConciseContainer/info.ts +++ b/packages/gi-assets-basic/src/components/RichContainer/info.ts @@ -1,7 +1,7 @@ const info = { - id: 'ConciseContainer', - name: '极简布局', - desc: '极简布局', + id: 'RichContainer', + name: '中台布局', + desc: '中台布局', cover: 'http://xxx.jpg', category: 'system-interaction', icon: 'icon-home', diff --git a/packages/gi-assets-basic/src/components/RichContainer/registerMeta.ts b/packages/gi-assets-basic/src/components/RichContainer/registerMeta.ts new file mode 100644 index 000000000..c1c52741d --- /dev/null +++ b/packages/gi-assets-basic/src/components/RichContainer/registerMeta.ts @@ -0,0 +1,88 @@ +const registerMeta = context => { + const { GIAC_CONTENT_ITEMS = [], GIAC_ITEMS = [] } = context; + return { + containers: [ + { + id: 'navbar', + name: '顶部导航', + required: true, + GI_CONTAINER: { + title: '集成组件', + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Select', + 'x-component-props': { + mode: 'multiple', + }, + enum: GIAC_ITEMS, + default: [], + }, + }, + { + id: 'view-mode', + name: '模式展示', + required: true, + GI_CONTAINER: { + title: '集成组件', + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Select', + 'x-component-props': { + mode: 'multiple', + }, + enum: GIAC_CONTENT_ITEMS, + default: [], + }, + }, + { + id: 'data-query', + name: '数据查询', + required: true, + GI_CONTAINER: { + title: '集成组件', + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Select', + 'x-component-props': { + mode: 'multiple', + }, + enum: GIAC_CONTENT_ITEMS, + default: [], + }, + }, + { + id: 'canvas-operator', + name: '画布操作', + required: true, + GI_CONTAINER: { + title: '集成组件', + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Select', + 'x-component-props': { + mode: 'multiple', + }, + enum: GIAC_ITEMS, + default: [], + }, + }, + { + id: 'styling-setting', + name: '布局样式', + required: true, + GI_CONTAINER: { + title: '集成组件', + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Select', + 'x-component-props': { + mode: 'multiple', + }, + enum: GIAC_CONTENT_ITEMS, + default: [], + }, + }, + ], + }; +}; +export default registerMeta; diff --git a/packages/gi-assets-basic/src/components/SideTabs.bak/CollapseContainer.tsx b/packages/gi-assets-basic/src/components/SideTabs.bak/CollapseContainer.tsx new file mode 100644 index 000000000..d646c9e41 --- /dev/null +++ b/packages/gi-assets-basic/src/components/SideTabs.bak/CollapseContainer.tsx @@ -0,0 +1,48 @@ +import { Handler } from '@antv/gi-common-components'; +import { utils } from '@antv/gi-sdk'; +import * as React from 'react'; +import type { ContainerProps } from './typing'; + +const CollapseContainer: React.FunctionComponent = props => { + const { placement, offset, width, height, defaultVisible } = props; + + const [state, setState] = React.useState({ + visible: typeof defaultVisible === 'boolean' ? defaultVisible : true, + }); + + const handleToggle = () => { + setState(preState => { + return { + visible: !preState.visible, + }; + }); + }; + + const postionStyles = utils.getPositionStyles(placement, offset); + + const baseStyle = { + ...postionStyles, + height, + width, + padding: '8px', + transition: 'all 0.3s ease', + overflow: 'visible', + }; + const styles = state.visible ? baseStyle : { ...baseStyle, width: '0px', padding: '0' }; + + const { children } = props; + return ( +
+ +
+ {children} +
+
+ ); +}; +export default CollapseContainer; diff --git a/packages/gi-assets-basic/src/components/SideTabs.bak/Component.tsx b/packages/gi-assets-basic/src/components/SideTabs.bak/Component.tsx new file mode 100755 index 000000000..7ed1c8ae4 --- /dev/null +++ b/packages/gi-assets-basic/src/components/SideTabs.bak/Component.tsx @@ -0,0 +1,144 @@ +import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'; +import { GIComponentAssets, GIComponentConfig } from '@antv/gi-sdk'; +import { Button, Tabs, Tooltip } from 'antd'; +import * as React from 'react'; +import ReactDOM from 'react-dom'; +import CollapseContainer from './CollapseContainer'; +import './index.less'; +import SideContainer from './SideContainer'; +import type { ContainerProps } from './typing'; +import WrapTab from './WrapTab'; +import $i18n from '../../i18n'; +const { TabPane } = Tabs; +const defaultVisibleKey = 'side-tabs-default-visible'; +export interface SideTabsProps extends ContainerProps { + GI_CONTAINER: string[]; + components: GIComponentConfig[]; + assets: GIComponentAssets; + tabPosition: 'left' | 'right' | 'top' | 'bottom'; + /** + * 是否在画布的外围 + */ + outSideFromCanvas: boolean; + flexDirection: 'row' | 'column'; + GISDK_ID: string; +} + +const SideTabs: React.FunctionComponent = props => { + const { + components, + assets, + placement, + offset, + width, + height, + defaultVisible, + outSideFromCanvas, + GISDK_ID, + tabPosition, + } = props; + + // 独立 DOM 状态下是否可见 + const [visible, setVisible] = React.useState(() => { + const defaultVisibleValue = localStorage.getItem(defaultVisibleKey); + if (defaultVisibleValue === null) { + return defaultVisible; + } + return defaultVisibleValue === 'true' ? true : false; + }); + + const sortedComponents = React.useMemo(() => { + return ( + components + //@ts-ignore + .sort((a, b) => a.props.GI_CONTAINER_INDEX - b.props.GI_CONTAINER_INDEX) + .filter(item => item && item.props && item.props.GIAC_CONTENT) + ); + }, [components]); + + const panes = React.useMemo(() => { + return sortedComponents.map((item, index) => { + if (!item) { + console.warn(`config not found, index: ${index}`); + return null; + } + const { props: itemProps, id: itemId } = item; + const asset = assets[itemId]; + if (!asset) { + console.warn(`asset: ${itemId} not found`); + return null; + } + + const { component: Component } = asset; + return ( + }> + {/* @ts-ignore */} + + + ); + }); + }, [sortedComponents]); + + const toggleVisible = () => { + setVisible(preState => { + localStorage.setItem(defaultVisibleKey, String(!preState)); + return !preState; + }); + }; + + const tabBarExtraContent = ( + +