fix(designable-next): fix style and support history (#2007)

alibaba · Aug 13, 2021 · 7e9c9cb · 7e9c9cb
1 parent cd9c215
commit 7e9c9cb
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 18 deletions.
diff --git a/designable/next/playground/main.tsx b/designable/next/playground/main.tsx
@@ -1,13 +1,13 @@
-import React, { useMemo } from 'react'
+import React from 'react'
 import ReactDOM from 'react-dom'
 import {
   Designer,
-  IconWidget,
   DesignerToolsWidget,
   ViewToolsWidget,
   Workspace,
   OutlineTreeWidget,
   DragSourceWidget,
+  HistoryWidget,
   MainPanel,
   CompositePanel,
   WorkspacePanel,
@@ -18,7 +18,12 @@ import {
   ComponentTreeWidget,
 } from '@designable/react'
 import { SettingsForm } from '@designable/react-settings-form'
-import { createDesigner, GlobalRegistry } from '@designable/core'
+import {
+  createDesigner,
+  GlobalRegistry,
+  Shortcut,
+  KeyCode,
+} from '@designable/core'
 import { createDesignableField, createDesignableForm } from '../src'
 import {
   LogoWidget,
@@ -27,6 +32,7 @@ import {
   SchemaEditorWidget,
   MarkupSchemaWidget,
 } from './widgets'
+import { saveSchema } from './service'
 import 'antd/dist/antd.less'
 import '@alifd/next/dist/next.css'
 
@@ -55,27 +61,36 @@ const DesignableField = createDesignableField({
   registryName: 'DesignableField',
 })
 
-const App = () => {
-  const engine = useMemo(() => createDesigner(), [])
+const SaveShortCut = new Shortcut({
+  codes: [
+    [KeyCode.Meta, KeyCode.S],
+    [KeyCode.Control, KeyCode.S],
+  ],
+  handler(ctx) {
+    saveSchema(ctx.engine)
+  },
+})
 
+const engine = createDesigner({
+  shortcuts: [SaveShortCut],
+})
+
+const App = () => {
   return (
     <Designer engine={engine}>
       <MainPanel logo={<LogoWidget />} actions={<ActionsWidget />}>
         <CompositePanel>
-          <CompositePanel.Item
-            title="panels.Component"
-            icon={<IconWidget infer="Component" />}
-          >
+          <CompositePanel.Item title="panels.Component" icon="Component">
             <DragSourceWidget title="sources.Inputs" name="inputs" />
             <DragSourceWidget title="sources.Layouts" name="layouts" />
             <DragSourceWidget title="sources.Arrays" name="arrays" />
           </CompositePanel.Item>
-          <CompositePanel.Item
-            title="panels.OutlinedTree"
-            icon={<IconWidget infer="Outline" />}
-          >
+          <CompositePanel.Item title="panels.OutlinedTree" icon="Outline">
             <OutlineTreeWidget />
           </CompositePanel.Item>
+          <CompositePanel.Item title="panels.History" icon="History">
+            <HistoryWidget />
+          </CompositePanel.Item>
         </CompositePanel>
         <Workspace id="form">
           <WorkspacePanel>

diff --git a/designable/next/src/components/DesignableArrayCards/index.tsx b/designable/next/src/components/DesignableArrayCards/index.tsx
@@ -102,6 +102,7 @@ export const DesignableArrayCards: React.FC<CardProps> = observer((props) => {
       <ArrayBase disabled>
         <ArrayBase.Item index={0}>
           <Card
+            contentHeight="auto"
             {...props}
             title={
               <span>

diff --git a/designable/next/src/components/LoadTemplate/index.tsx b/designable/next/src/components/LoadTemplate/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import { Box, Button } from '@alifd/next'
+import { Button } from '@alifd/next'
+import { Space, Divider } from 'antd'
 import { usePrefix, TextWidget } from '@designable/react'
 import cls from 'classnames'
 import './styles.scss'
@@ -22,7 +23,7 @@ export const LoadTemplate: React.FC<ILoadTemplateProps> = (props) => {
   return (
     <div className={cls(prefix, props.className)} style={props.style}>
       <div className={prefix + '-actions'}>
-        <Box>
+        <Space split={<Divider type="vertical" />}>
           {props.actions?.map((action, key) => {
             return (
               <Button
@@ -39,7 +40,7 @@ export const LoadTemplate: React.FC<ILoadTemplateProps> = (props) => {
               </Button>
             )
           })}
-        </Box>
+        </Space>
       </div>
     </div>
   )

diff --git a/designable/next/src/schemas/Card.ts b/designable/next/src/schemas/Card.ts
@@ -30,9 +30,11 @@ export const Card: ISchema & { Addition?: ISchema } = {
       },
     },
     contentHeight: {
-      type: 'number',
       'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
+      'x-component': 'ValueInput',
+      'x-component-props': {
+        include: ['NUMBER', 'TEXT'],
+      },
     },
     extra: {
       type: 'string',