@formily-design/react 1.0.0

package/src/icons/text.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+export const Text = (
+  <svg>
+    <path d="M812,190 C834.09139,190 852,207.90861 852,230 L852,280 C852,302.09139 834.09139,320 812,320 C789.90861,320 772,302.09139 772,280 L772,270 L552,270 L552,754 L672,754 C694.09139,754 712,771.90861 712,794 C712,816.09139 694.09139,834 672,834 L352,834 C329.90861,834 312,816.09139 312,794 C312,771.90861 329.90861,754 352,754 L472,754 L472,269.999 L252,269.999 L252,290 C252,312.09139 234.09139,330 212,330 C189.90861,330 172,312.09139 172,290 L172,230 C172,207.90861 189.90861,190 212,190 L812,190 L812,190 Z"></path>
+  </svg>
+)
+
+export const RichText = (
+  <svg>
+    <path d="M100,189.5 C102.155215,189.5 104.27062,189.67045 106.333468,189.998605 L580,190 L580,190 C602.09139,190 620,207.90861 620,230 L620,280 C620,302.09139 602.09139,320 580,320 C557.90861,320 540,302.09139 540,280 L540,270 L380,270 L380,753 L500,753 C522.09139,753 540,770.90861 540,793 C540,815.09139 522.09139,833 500,833 L180,833 C157.90861,833 140,815.09139 140,793 C140,770.90861 157.90861,753 180,753 L300,753 L300,269.999 L140,269.999 L140,279.5 C140,301.59139 122.09139,319.5 100,319.5 C77.90861,319.5 60,301.59139 60,279.5 L60,229.5 C60,207.40861 77.90861,189.5 100,189.5 Z M652,833 C629.90861,833 612,815.09139 612,793 C612,770.90861 629.90861,753 652,753 L712,753 L712,541 L620,541 L620,551 C620,573.09139 602.09139,591 580,591 C557.90861,591 540,573.09139 540,551 L540,501 C540,478.90861 557.90861,461 580,461 L924,461 L924,461 C946.09139,461 964,478.90861 964,501 L964,551 C964,573.09139 946.09139,591 924,591 C901.90861,591 884,573.09139 884,551 L884,541 L792,541 L792,753 L852,753 C874.09139,753 892,770.90861 892,793 C892,815.09139 874.09139,833 852,833 L652,833 Z"></path>
+  </svg>
+)

package/src/icons/undo.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const Undo = (
+  <svg viewBox="0 0 1024 1024">
+    <path d="M629.44 291.712V0S0 394.56 0 458.24c0 63.744 629.44 416.64 629.44 416.64V625.088s289.344 4.672 370.304 374.976c84.48-279.104-54.912-693.824-370.304-708.352z m176.768 337.92c-91.392-52.544-172.736-54.464-176.064-54.592l-47.232-0.704V792.192c-229.76-131.2-461.568-275.584-525.44-334.72 62.848-62.912 294.656-222.848 525.44-369.984v252.096l44.544 2.048c132.352 6.144 214.144 90.944 259.52 161.024 55.488 85.952 86.912 195.52 90.432 303.232-51.584-91.328-116.8-144.96-171.2-176.256z"></path>
+  </svg>
+)

package/src/icons/upload.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+
+export const CloudUpload = (
+  <svg viewBox="64 64 896 896">
+    <path d="M518.3 459a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V856c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V613.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 459z"></path>
+    <path d="M811.4 366.7C765.6 245.9 648.9 160 512.2 160S258.8 245.8 213 366.6C127.3 389.1 64 467.2 64 560c0 110.5 89.5 200 199.9 200H304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8h-40.1c-33.7 0-65.4-13.4-89-37.7-23.5-24.2-36-56.8-34.9-90.6.9-26.4 9.9-51.2 26.2-72.1 16.7-21.3 40.1-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0152.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10C846.1 454.5 884 503.8 884 560c0 33.1-12.9 64.3-36.3 87.7a123.07 123.07 0 01-87.6 36.3H720c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h40.1C870.5 760 960 670.5 960 560c0-92.7-63.1-170.7-148.6-193.3z"></path>
+  </svg>
+)

package/src/index.ts

@@ -0,0 +1,9 @@
+import './locales'
+import './theme.less'
+export * from './panels'
+export * from './widgets'
+export * from './context'
+export * from './hooks'
+export * from './containers'
+export * from './simulators'
+export * from './types'

package/src/locales/global.ts

@@ -0,0 +1,16 @@
+export default {
+  'zh-CN': {
+    save: '保存',
+    submit: '提交',
+    cancel: '取消',
+    reset: '重置',
+    publish: '发布',
+  },
+  'en-US': {
+    save: 'Save',
+    submit: 'Submit',
+    cancel: 'Cancel',
+    reset: 'Reset',
+    publish: 'Publish',
+  },
+}

package/src/locales/icons.ts

@@ -0,0 +1,132 @@
+export default {
+  'zh-CN': {
+    icons: {
+      Image: '图片',
+      ImageSize: '图片尺寸',
+      Position: '位置',
+      Number: '数字',
+      Text: '文本',
+      Expression: '表达式',
+      RichText: '富文本',
+      Boolean: '布尔',
+      Repeat: '重复',
+      Top: '上',
+      Left: '左',
+      Right: '右',
+      Bottom: '下',
+      TopLeft: '左上',
+      TopRight: '右上',
+      BottomRight: '右下',
+      BottomLeft: '左下',
+      DisplayBlock: '区块',
+      DisplayInlineBlock: '内联区块',
+      DisplayInline: '文本内联',
+      DisplayFlex: '弹性盒子',
+      FlexDirectionRow: '横向',
+      FlexDirectionColumn: '纵向',
+      FlexAlignContentCenter: '居中',
+      FlexAlignContentStart: '头部',
+      FlexAlignContentEnd: '尾部',
+      FlexAlignContentSpaceAround: 'Space Around',
+      FlexAlignContentSpaceBetween: 'Space Between',
+      FlexAlignContentStretch: 'Stretch',
+      FlexJustifyCenter: '居中',
+      FlexJustifyStart: '头部',
+      FlexJustifyEnd: '尾部',
+      FlexJustifySpaceBetween: 'Space Between',
+      FlexJustifySpaceAround: 'Space Around',
+      FlexJustifySpaceEvenly: 'Space Evenly',
+      FlexAlignItemsCenter: '居中',
+      FlexAlignItemsStart: '头部',
+      FlexAlignItemsEnd: '尾部',
+      FlexAlignItemsStretch: 'Stretch',
+      FlexAlignItemsBaseline: 'Baseline',
+      FlexNoWrap: '不换行',
+      FlexWrap: '换行',
+      AxisX: 'X轴',
+      AxisY: 'Y轴',
+      Blur: '模糊度',
+      Shadow: '阴影扩展',
+      FontWeight: '字重',
+      FontStyle: '风格',
+      NormalFontStyle: '标准',
+      ItalicFontStyle: '斜体',
+      FontColor: '颜色',
+      FontSize: '大小',
+      LineHeight: '行高',
+      TextDecoration: '修饰',
+      TextUnderline: '下划线',
+      TextLineThrough: '中横线',
+      TextAlign: '对齐',
+      TextAlignLeft: '左对齐',
+      TextAlignCenter: '居中',
+      TextAlignRight: '右对齐',
+      TextAlignJustify: '自适应',
+    },
+  },
+  'en-US': {
+    icons: {
+      Image: 'Image',
+      ImageSize: 'Image Size',
+      Boolean: 'Boolean',
+      Number: 'Number',
+      Text: 'Text',
+      Expression: 'Expression',
+      RichText: 'Rich Text',
+      Position: 'Position',
+      Repeat: 'Repeat',
+      Top: 'Top',
+      Left: 'Left',
+      Right: 'Right',
+      Bottom: 'Bottom',
+      TopLeft: 'Top Left',
+      TopRight: 'Top Right',
+      BottomRight: 'Bottom Right',
+      BottomLeft: 'Bottom Left',
+      DisplayBlock: 'Block',
+      DisplayInlineBlock: 'Inline Block',
+      DisplayInline: 'Inline',
+      DisplayFlex: 'Flex',
+      FlexDirectionRow: 'Horizontal',
+      FlexDirectionColumn: 'Vertical',
+      FlexAlignContentCenter: 'Center',
+      FlexAlignContentStart: 'Start',
+      FlexAlignContentEnd: 'End',
+      FlexAlignContentSpaceAround: 'Space Around',
+      FlexAlignContentSpaceBetween: 'Space Between',
+      FlexAlignContentStretch: 'Stretch',
+      FlexJustifyCenter: 'Center',
+      FlexJustifyStart: 'Start',
+      FlexJustifyEnd: 'End',
+      FlexJustifySpaceBetween: 'Space Between',
+      FlexJustifySpaceAround: 'Space Around',
+      FlexJustifySpaceEvenly: 'Space Evenly',
+      FlexAlignItemsCenter: 'Center',
+      FlexAlignItemsStart: 'Start',
+      FlexAlignItemsEnd: 'End',
+      FlexAlignItemsStretch: 'Stretch',
+      FlexAlignItemsBaseline: 'Baseline',
+      FlexNoWrap: 'No Wrap',
+      FlexWrap: 'Wrap',
+      AxisX: 'X Axis',
+      AxisY: 'Y Axis',
+      Blur: 'Blur',
+      Shadow: 'Shadow Spread',
+      FontWeight: 'Font Weight',
+      FontStyle: 'Font Style',
+      NormalFontStyle: 'Normal',
+      ItalicFontStyle: 'Italic',
+      FontColor: 'Color',
+      FontSize: 'Font Size',
+      LineHeight: 'Line Height',
+      TextDecoration: 'Decoration',
+      TextUnderline: 'Underline',
+      TextLineThrough: 'Line Through',
+      TextAlign: 'Align',
+      TextAlignLeft: 'Left',
+      TextAlignCenter: 'Center',
+      TextAlignRight: 'Right',
+      TextAlignJustify: 'Justify',
+    },
+  },
+}

package/src/locales/index.ts

@@ -0,0 +1,7 @@
+import { GlobalRegistry } from '@formily-design/core'
+import icons from './icons'
+import panels from './panels'
+import global from './global'
+import operations from './operations'
+
+GlobalRegistry.registerDesignerLocales(icons, panels, global, operations)

package/src/locales/operations.ts

@@ -0,0 +1,50 @@
+export default {
+  'zh-CN': {
+    operations: {
+      default_state: '缺省态',
+      append_node: '追加节点',
+      prepend_node: '头部追加',
+      clone_node: '复制节点',
+      update_node_props: '属性更改',
+      insert_after: '后置插入',
+      insert_before: '前置插入',
+      insert_children: '插入子节点',
+      update_children: '覆盖子节点',
+      remove_node: '删除节点',
+      wrap_node: '包装节点',
+      from_node: '子树更新',
+    },
+  },
+  'en-US': {
+    operations: {
+      default_state: 'Default State',
+      append_node: 'Append Node',
+      prepend_node: 'Prepend Node',
+      clone_node: 'Clone Node',
+      update_node_props: 'Update Node Props',
+      insert_after: 'Insert Node After',
+      insert_before: 'Insert Node Before',
+      insert_children: 'Insert Node Children',
+      update_children: 'Update Children',
+      remove_node: 'Remove Node',
+      wrap_node: 'Wrap Node',
+      from_node: 'Update Child Tree',
+    },
+  },
+  'ko-KR': {
+    operations: {
+      default_state: '초기 상태',
+      append_node: '노드 추가',
+      prepend_node: '노드 삽입',
+      clone_node: '노드 복제',
+      update_node_props: '노드 속성 수정',
+      insert_after: '뒤쪽 노드 삽입',
+      insert_before: '앞쪽 노드 삽입',
+      insert_children: '자식 노드 삽입',
+      update_children: '자식 노드 수정',
+      remove_node: '노드 삭제',
+      wrap_node: '노드 랩핑',
+      from_node: '자식 노드 트리 수정',
+    },
+  },
+}

package/src/locales/panels.ts

@@ -0,0 +1,26 @@
+export default {
+  'zh-CN': {
+    panels: {
+      Component: '组件',
+      OutlinedTree: '大纲树',
+      PropertySettings: '属性配置',
+      History: '历史记录',
+    },
+  },
+  'en-US': {
+    panels: {
+      Component: 'Component',
+      OutlinedTree: 'Outlined Tree',
+      PropertySettings: 'Property Settings',
+      History: 'History',
+    },
+  },
+  'ko-KR': {
+    panels: {
+      Component: '컴포넌트',
+      OutlinedTree: '트리 노드',
+      PropertySettings: '속성 설정',
+      History: '기록',
+    },
+  },
+}

package/src/panels/CompositePanel.tsx

@@ -0,0 +1,195 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { isValid } from '@formily-design/shared'
+import cls from 'classnames'
+import { IconWidget, TextWidget } from '../widgets'
+import { usePrefix } from '../hooks'
+
+export interface ICompositePanelProps {
+  children?: React.ReactNode
+  direction?: 'left' | 'right'
+  showNavTitle?: boolean
+  defaultOpen?: boolean
+  defaultPinning?: boolean
+  defaultActiveKey?: number
+  activeKey?: number | string
+  onChange?: (activeKey: number | string) => void
+}
+export interface ICompositePanelItemProps {
+  children?: React.ReactNode
+  shape?: 'tab' | 'button' | 'link'
+  title?: React.ReactNode
+  icon?: React.ReactNode
+  key?: number | string
+  href?: string
+  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  extra?: React.ReactNode
+}
+
+const parseItems = (
+  children: React.ReactNode
+): React.PropsWithChildren<ICompositePanelItemProps>[] => {
+  const items = []
+  React.Children.forEach(children, (child, index) => {
+    if (child?.['type'] === CompositePanel.Item) {
+      items.push({ key: child['key'] ?? index, ...child['props'] })
+    }
+  })
+  return items
+}
+
+const findItem = (
+  items: React.PropsWithChildren<ICompositePanelItemProps>[],
+  key: string | number
+) => {
+  for (let index = 0; index < items.length; index++) {
+    const item = items[index]
+    if (key === index) return item
+    if (key === item.key) return item
+  }
+}
+
+const getDefaultKey = (children: React.ReactNode) => {
+  const items = parseItems(children)
+  return items?.[0].key
+}
+
+export const CompositePanel: React.FC<ICompositePanelProps> & {
+  Item: React.FC<ICompositePanelItemProps>
+} = (props) => {
+  const prefix = usePrefix('composite-panel')
+  const [activeKey, setActiveKey] = useState<string | number>(
+    props.defaultActiveKey ?? getDefaultKey(props.children)
+  )
+  const activeKeyRef = useRef(null)
+  const [pinning, setPinning] = useState(props.defaultPinning ?? false)
+  const [visible, setVisible] = useState(props.defaultOpen ?? true)
+  const items = parseItems(props.children)
+  const currentItem = findItem(items, activeKey)
+  const content = currentItem?.children
+
+  activeKeyRef.current = activeKey
+
+  useEffect(() => {
+    if (isValid(props.activeKey)) {
+      if (props.activeKey !== activeKeyRef.current) {
+        setActiveKey(props.activeKey)
+      }
+    }
+  }, [props.activeKey])
+
+  const renderContent = () => {
+    if (!content || !visible) return
+    return (
+      <div
+        className={cls(prefix + '-tabs-content', {
+          pinning,
+        })}
+      >
+        <div className={prefix + '-tabs-header'}>
+          <div className={prefix + '-tabs-header-title'}>
+            <TextWidget>{currentItem.title}</TextWidget>
+          </div>
+          <div className={prefix + '-tabs-header-actions'}>
+            <div className={prefix + '-tabs-header-extra'}>
+              {currentItem.extra}
+            </div>
+            {!pinning && (
+              <IconWidget
+                infer="PushPinOutlined"
+                className={prefix + '-tabs-header-pin'}
+                onClick={() => {
+                  setPinning(!pinning)
+                }}
+              />
+            )}
+            {pinning && (
+              <IconWidget
+                infer="PushPinFilled"
+                className={prefix + '-tabs-header-pin-filled'}
+                onClick={() => {
+                  setPinning(!pinning)
+                }}
+              />
+            )}
+            <IconWidget
+              infer="Close"
+              className={prefix + '-tabs-header-close'}
+              onClick={() => {
+                setVisible(false)
+              }}
+            />
+          </div>
+        </div>
+        <div className={prefix + '-tabs-body'}>{content}</div>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={cls(prefix, {
+        [`direction-${props.direction}`]: !!props.direction,
+      })}
+    >
+      <div className={prefix + '-tabs'}>
+        {items.map((item, index) => {
+          const takeTab = () => {
+            if (item.href) {
+              return <a href={item.href}>{item.icon}</a>
+            }
+            return (
+              <IconWidget
+                tooltip={
+                  props.showNavTitle
+                    ? null
+                    : {
+                        title: <TextWidget>{item.title}</TextWidget>,
+                        placement:
+                          props.direction === 'right' ? 'left' : 'right',
+                      }
+                }
+                infer={item.icon}
+              />
+            )
+          }
+          const shape = item.shape ?? 'tab'
+          const Comp = shape === 'link' ? 'a' : 'div'
+          return (
+            <Comp
+              className={cls(prefix + '-tabs-pane', {
+                active: activeKey === item.key,
+              })}
+              key={index}
+              href={item.href}
+              onClick={(e: any) => {
+                if (shape === 'tab') {
+                  if (activeKey === item.key) {
+                    setVisible(!visible)
+                  } else {
+                    setVisible(true)
+                  }
+                  if (!props?.activeKey || !props?.onChange)
+                    setActiveKey(item.key)
+                }
+                item.onClick?.(e)
+                props.onChange?.(item.key)
+              }}
+            >
+              {takeTab()}
+              {props.showNavTitle && item.title ? (
+                <div className={prefix + '-tabs-pane-title'}>
+                  <TextWidget>{item.title}</TextWidget>
+                </div>
+              ) : null}
+            </Comp>
+          )
+        })}
+      </div>
+      {renderContent()}
+    </div>
+  )
+}
+
+CompositePanel.Item = () => {
+  return <React.Fragment />
+}

package/src/panels/SettingsPanel.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react'
+import { requestIdle } from '@formily-design/shared'
+import { observer } from '@formily/reactive-react'
+import { TextWidget, IconWidget } from '../widgets'
+import { usePrefix, useWorkbench } from '../hooks'
+import cls from 'classnames'
+export interface ISettingPanelProps {
+  children?: React.ReactNode
+  title?: React.ReactNode
+  extra?: React.ReactNode
+}
+
+export const SettingsPanel: React.FC<ISettingPanelProps> = observer((props) => {
+  const prefix = usePrefix('settings-panel')
+  const workbench = useWorkbench()
+  const [innerVisible, setInnerVisible] = useState(true)
+  const [pinning, setPinning] = useState(false)
+  const [visible, setVisible] = useState(true)
+  useEffect(() => {
+    if (visible || workbench.type === 'DESIGNABLE') {
+      if (!innerVisible) {
+        requestIdle(() => {
+          requestAnimationFrame(() => {
+            setInnerVisible(true)
+          })
+        })
+      }
+    }
+  }, [visible, workbench.type])
+  if (workbench.type !== 'DESIGNABLE') {
+    if (innerVisible) setInnerVisible(false)
+    return null
+  }
+  if (!visible) {
+    if (innerVisible) setInnerVisible(false)
+    return (
+      <div
+        className={prefix + '-opener'}
+        onClick={() => {
+          setVisible(true)
+        }}
+      >
+        <IconWidget infer="Setting" size={20} />
+      </div>
+    )
+  }
+  return (
+    <div className={cls(prefix, { pinning })}>
+      <div className={prefix + '-header'}>
+        <div className={prefix + '-header-title'}>
+          <TextWidget>{props.title}</TextWidget>
+        </div>
+        <div className={prefix + '-header-actions'}>
+          <div className={prefix + '-header-extra'}>{props.extra}</div>
+          {!pinning && (
+            <IconWidget
+              infer="PushPinOutlined"
+              className={prefix + '-header-pin'}
+              onClick={() => {
+                setPinning(!pinning)
+              }}
+            />
+          )}
+          {pinning && (
+            <IconWidget
+              infer="PushPinFilled"
+              className={prefix + '-pin-filled'}
+              onClick={() => {
+                setPinning(!pinning)
+              }}
+            />
+          )}
+          <IconWidget
+            infer="Close"
+            className={prefix + '-header-close'}
+            onClick={() => {
+              setVisible(false)
+            }}
+          />
+        </div>
+      </div>
+      <div className={prefix + '-body'}>{innerVisible && props.children}</div>
+    </div>
+  )
+})

package/src/panels/StudioPanel.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { usePrefix, usePosition } from '../hooks'
+import { Layout } from '../containers'
+import cls from 'classnames'
+export interface IStudioPanelProps {
+  children?: React.ReactNode
+  style?: React.CSSProperties
+  className?: string
+  logo?: React.ReactNode
+  actions?: React.ReactNode
+  prefixCls?: string
+  theme?: string
+  position?: React.ComponentProps<typeof Layout>['position']
+}
+
+const StudioPanelInternal: React.FC<IStudioPanelProps> = ({
+  logo,
+  actions,
+  ...props
+}) => {
+  const prefix = usePrefix('main-panel')
+  const position = usePosition()
+  const classNameBase = cls('root', position, props.className)
+  if (logo || actions) {
+    return (
+      <div {...props} className={cls(`${prefix}-container`, classNameBase)}>
+        <div className={prefix + '-header'}>
+          <div className={prefix + '-header-logo'}>{logo}</div>
+          <div className={prefix + '-header-actions'}>{actions}</div>
+        </div>
+        <div className={prefix}>{props.children}</div>
+      </div>
+    )
+  }
+  return (
+    <div {...props} className={cls(prefix, classNameBase)}>
+      {props.children}
+    </div>
+  )
+}
+
+export const StudioPanel: React.FC<IStudioPanelProps> = (props) => {
+  return (
+    <Layout
+      theme={props.theme}
+      prefixCls={props.prefixCls}
+      position={props.position}
+      className={props.className}
+      style={props.style}
+    >
+      <StudioPanelInternal {...props} />
+    </Layout>
+  )
+}

package/src/panels/ToolbarPanel.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { WorkspacePanel, IWorkspaceItemProps } from './WorkspacePanel'
+
+export const ToolbarPanel: React.FC<IWorkspaceItemProps> = (props) => {
+  return (
+    <WorkspacePanel.Item
+      {...props}
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        marginBottom: 4,
+        padding: '0 4px',
+        ...props.style,
+      }}
+    >
+      {props.children}
+    </WorkspacePanel.Item>
+  )
+}