@formily-design/react 1.0.0 → 1.0.1

package/src/panels/ViewPanel.tsx

@@ -1,62 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { TreeNode, ITreeNode, WorkbenchTypes } from '@formily-design/core'
-import { observer } from '@formily/reactive-react'
-import { useTree, useWorkbench } from '../hooks'
-import { Viewport } from '../containers'
-import { requestIdle } from '@formily-design/shared'
-
-export interface IViewPanelProps {
-  type: WorkbenchTypes
-  children: (
-    tree: TreeNode,
-    onChange: (tree: ITreeNode) => void
-  ) => React.ReactElement
-  scrollable?: boolean
-  dragTipsDirection?: 'left' | 'right'
-}
-
-export const ViewPanel: React.FC<IViewPanelProps> = observer((props) => {
-  const [visible, setVisible] = useState(true)
-  const workbench = useWorkbench()
-  const tree = useTree()
-  useEffect(() => {
-    if (workbench.type === props.type) {
-      requestIdle(() => {
-        requestAnimationFrame(() => {
-          setVisible(true)
-        })
-      })
-    } else {
-      setVisible(false)
-    }
-  }, [workbench.type])
-  if (workbench.type !== props.type) return null
-  const render = () => {
-    return props.children(tree, (payload) => {
-      tree.from(payload)
-      tree.takeSnapshot()
-    })
-  }
-  if (workbench.type === 'DESIGNABLE')
-    return (
-      <Viewport dragTipsDirection={props.dragTipsDirection}>
-        {render()}
-      </Viewport>
-    )
-  return (
-    <div
-      style={{
-        overflow: props.scrollable ? 'overlay' : 'hidden',
-        height: '100%',
-        cursor: 'auto',
-        userSelect: 'text',
-      }}
-    >
-      {visible && render()}
-    </div>
-  )
-})
-
-ViewPanel.defaultProps = {
-  scrollable: true,
-}

package/src/panels/ViewportPanel.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import { WorkspacePanel, IWorkspaceItemProps } from './WorkspacePanel'
-import { Simulator } from '../containers'
-export const ViewportPanel: React.FC<IWorkspaceItemProps> = (props) => {
-  return (
-    <WorkspacePanel.Item {...props} flexable>
-      <Simulator>{props.children}</Simulator>
-    </WorkspacePanel.Item>
-  )
-}

package/src/panels/WorkspacePanel.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import { usePrefix } from '../hooks'
-
-export interface IWorkspaceItemProps {
-  children?: React.ReactNode
-  style?: React.CSSProperties
-  flexable?: boolean
-}
-
-export const WorkspacePanel: React.FC<{ children?: React.ReactNode }> & {
-  Item?: React.FC<IWorkspaceItemProps>
-} = (props) => {
-  const prefix = usePrefix('workspace-panel')
-  return <div className={prefix}>{props.children}</div>
-}
-
-WorkspacePanel.Item = (props) => {
-  const prefix = usePrefix('workspace-panel-item')
-  return (
-    <div
-      className={prefix}
-      style={{
-        ...props.style,
-        flexGrow: props.flexable ? 1 : 0,
-        flexShrink: props.flexable ? 1 : 0,
-      }}
-    >
-      {props.children}
-    </div>
-  )
-}

package/src/panels/index.ts

@@ -1,8 +0,0 @@
-import './styles.less'
-export * from './StudioPanel'
-export * from './CompositePanel'
-export * from './SettingsPanel'
-export * from './WorkspacePanel'
-export * from './ToolbarPanel'
-export * from './ViewportPanel'
-export * from './ViewPanel'

package/src/panels/styles.less

@@ -1,331 +0,0 @@
-@import '../variables.less';
-
-.@{prefix-cls}-main-panel {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex: 1;
-  min-height: 0;
-  position: relative;
-  overflow: hidden;
-
-  &-container {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-
-    &.root {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
-    &.absolute {
-      position: absolute;
-    }
-    &.relative {
-      position: relative;
-    }
-  }
-
-  &-header {
-    display: flex;
-    align-items: center;
-    flex-grow: 0;
-    flex-shrink: 0;
-    justify-content: space-between;
-    background: var(--dn-main-panel-header-bg-color);
-    border-bottom: 1px solid var(--dn-panel-border-color);
-    padding: 4px;
-
-    &-logo {
-      display: flex;
-      align-items: center;
-    }
-
-    &-actions {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-    }
-  }
-
-  &.root {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-}
-
-.@{prefix-cls}-composite-panel {
-  flex-grow: 0;
-  flex-shrink: 0;
-  display: flex;
-  position: relative;
-  user-select: none;
-  z-index: 2;
-
-  &-tabs {
-    display: flex;
-    flex-direction: column;
-    border-right: 1px solid var(--dn-panel-border-color);
-    background-color: var(--dn-composite-panel-tabs-bg-color);
-    z-index: 2;
-    position: relative;
-
-    &-pane {
-      color: var(--dn-composite-panel-tabs-color);
-      min-height: 48px;
-      min-width: 48px;
-      padding: 10px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      position: relative;
-      font-size: 20px;
-      flex-direction: column;
-
-      &-title {
-        font-size: 10px;
-        margin-top: 6px;
-      }
-
-      &:hover {
-        color: var(--dn-composite-panel-tabs-hover-color);
-      }
-
-      &.active {
-        color: var(--dn-composite-panel-tabs-hover-color);
-
-        &::after {
-          position: absolute;
-          top: 0;
-          left: 0;
-          display: block;
-          content: '';
-          width: 3px;
-          height: 100%;
-          background-color: var(--dn-composite-panel-tabs-hover-color);
-        }
-      }
-    }
-
-    &-content {
-      width: 300px;
-      border-right: 1px solid var(--dn-panel-border-color);
-      background: var(--dn-composite-panel-tabs-content-bg-color);
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      box-sizing: content-box;
-
-      &.pinning {
-        position: absolute;
-        z-index: 1;
-        left: 100%;
-        top: 0;
-        border-right: 1px solid transparent;
-        box-shadow: -2px 5px 10px rgba(102, 102, 102, 0.42);
-      }
-    }
-
-    &-header {
-      padding: 14px 7px;
-      color: var(--dn-composite-panel-tabs-header-color);
-      line-height: 18px;
-      font-size: 16px;
-      border-bottom: 1px solid var(--dn-panel-border-color);
-      display: flex;
-      justify-content: space-between;
-
-      &-actions {
-        display: flex;
-        align-items: center;
-
-        & > * {
-          margin-right: 8px;
-
-          &:last-child {
-            margin-right: 0;
-          }
-        }
-      }
-
-      &-pin {
-        transition: all 0.15s ease-in-out;
-
-        &:hover {
-          transform: scale(1.1);
-        }
-      }
-
-      &-title {
-        font-size: 20px;
-      }
-
-      &-close {
-        transition: all 0.15s ease-in-out;
-
-        &:hover {
-          transform: rotate(90deg);
-        }
-      }
-    }
-
-    &-body {
-      flex-grow: 2;
-      flex-shrink: 2;
-      overflow: overlay;
-      overflow-x: hidden;
-      height: 100%;
-    }
-  }
-
-  &.direction-right {
-    flex-direction: row-reverse;
-
-    .@{prefix-cls}-composite-panel-tabs-pane.active:after {
-      left: auto;
-      right: -1px;
-    }
-
-    .@{prefix-cls}-composite-panel-tabs-content.pinning {
-      left: auto;
-      right: 100%;
-      top: 0;
-    }
-
-    .@{prefix-cls}-composite-panel-tabs-content {
-      border-right: none;
-      border-left: 1px solid var(--dn-panel-border-color);
-    }
-    .@{prefix-cls}-composite-panel-tabs {
-      border-left: 1px solid var(--dn-panel-border-color);
-    }
-  }
-}
-
-.@{prefix-cls}-workspace-panel {
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  padding: 4px;
-  overflow: hidden;
-  box-sizing: border-box;
-  background-color: var(--dn-workspace-panel-bg-color);
-  position: relative;
-  z-index: 1;
-
-  &-item {
-    position: relative;
-  }
-
-  button[disabled] {
-    pointer-events: none !important;
-  }
-}
-
-.@{prefix-cls}-settings-panel {
-  flex-grow: 0;
-  flex-shrink: 0;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  z-index: 2;
-  width: 300px;
-  background: var(--dn-composite-panel-tabs-content-bg-color);
-  border-left: 1px solid var(--dn-panel-border-color);
-  height: 100%;
-  box-sizing: content-box;
-  user-select: none;
-
-  &.pinning {
-    position: absolute;
-    z-index: 10;
-    top: 0;
-    right: 0;
-    box-shadow: 2px 5px 10px rgba(102, 102, 102, 0.52);
-    border-left: 1px solid transparent;
-  }
-
-  &-header {
-    padding: 14px 7px;
-    color: var(--dn-composite-panel-tabs-header-color);
-    line-height: 18px;
-    font-size: 16px;
-    border-bottom: 1px solid var(--dn-panel-border-color);
-    display: flex;
-    justify-content: space-between;
-
-    &-actions {
-      display: flex;
-      align-items: center;
-
-      & > * {
-        margin-right: 8px;
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-    }
-
-    &-pin {
-      transition: all 0.15s ease-in-out;
-
-      &:hover {
-        transform: scale(1.1);
-      }
-    }
-
-    &-title {
-      font-size: 20px;
-    }
-
-    &-close {
-      transition: all 0.15s ease-in-out;
-
-      &:hover {
-        transform: rotate(90deg);
-      }
-    }
-  }
-
-  &-body {
-    flex-grow: 2;
-    flex-shrink: 2;
-    overflow: overlay;
-    height: 100%;
-  }
-
-  &-opener {
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 2;
-    background: var(--dn-composite-panel-tabs-content-bg-color);
-    border: 1px solid var(--dn-panel-border-color);
-    color: var(--dn-composite-panel-tabs-color);
-    box-shadow: 0 0 6px rgb(0 0 0 / 10%);
-    border-radius: 3px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    cursor: pointer;
-
-    .dn-icon {
-      transition: all 0.15s ease-in-out;
-    }
-
-    &:hover .dn-icon {
-      transform: rotate(45deg);
-    }
-  }
-}

package/src/simulators/MobileSimulator/body.tsx

@@ -1,78 +0,0 @@
-import { observer } from '@formily/reactive-react'
-import React from 'react'
-import { useScreen, usePrefix, useTheme } from '../../hooks'
-
-export interface IMobileBodyProps {}
-
-const MockupImages = {
-  dark: [
-    '//img.alicdn.com/imgextra/i3/O1CN01zXMc8W26oJZGUaCK1_!!6000000007708-55-tps-946-459.svg',
-    '//img.alicdn.com/imgextra/i3/O1CN012KWk2i1DLduN7InSK_!!6000000000200-55-tps-459-945.svg',
-  ],
-  light: [
-    '//img.alicdn.com/imgextra/i4/O1CN01vuXGe31tEy00v2xBx_!!6000000005871-55-tps-946-459.svg',
-    '//img.alicdn.com/imgextra/i4/O1CN01ehfzMc1QPqY6HONTJ_!!6000000001969-55-tps-459-945.svg',
-  ],
-}
-
-export const MobileBody: React.FC<IMobileBodyProps> = observer((props) => {
-  const screen = useScreen()
-  const theme = useTheme()
-  const prefix = usePrefix('mobile-simulator-body')
-  const getContentStyles = (): React.CSSProperties => {
-    if (screen.flip) {
-      return {
-        position: 'absolute',
-        width: 736,
-        height: 414,
-        top: 43.3333,
-        left: 106.667,
-        overflow: 'hidden',
-      }
-    }
-    return {
-      position: 'absolute',
-      width: 414,
-      height: 736,
-      top: 126.667,
-      left: 23.3333,
-      overflow: 'hidden',
-    }
-  }
-
-  return (
-    <div
-      className={prefix}
-      style={{
-        alignItems: screen.flip ? 'center' : '',
-        minWidth: screen.flip ? 1000 : 0,
-      }}
-    >
-      <div
-        className={prefix + '-wrapper'}
-        style={{
-          position: 'relative',
-          minHeight: screen.flip ? 0 : 1000,
-        }}
-      >
-        <img
-          src={screen.flip ? MockupImages[theme][0] : MockupImages[theme][1]}
-          style={{
-            display: 'block',
-            margin: '20px 0',
-            width: screen.flip ? 946.667 : 460,
-            height: screen.flip ? 460 : 946.667,
-            boxShadow: '0 0 20px #0000004d',
-            borderRadius: 60,
-            backfaceVisibility: 'hidden',
-          }}
-        ></img>
-        <div className={prefix + '-content'} style={getContentStyles()}>
-          {props.children}
-        </div>
-      </div>
-    </div>
-  )
-})
-
-MobileBody.defaultProps = {}

package/src/simulators/MobileSimulator/index.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import { MobileBody } from './body'
-import { usePrefix } from '../../hooks'
-import cls from 'classnames'
-import './styles.less'
-export interface IMobileSimulatorProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  className?: string
-  style?: React.CSSProperties
-}
-
-export const MobileSimulator: React.FC<IMobileSimulatorProps> = (props) => {
-  const prefix = usePrefix('mobile-simulator')
-  return (
-    <div {...props} className={cls(prefix, props.className)}>
-      <div className={prefix + '-content'}>
-        <MobileBody>{props.children}</MobileBody>
-      </div>
-    </div>
-  )
-}

package/src/simulators/MobileSimulator/styles.less

@@ -1,29 +0,0 @@
-@import '../../variables.less';
-
-.@{prefix-cls}-mobile-simulator {
-  position: relative;
-  min-height: 100px;
-  height: 100%;
-  width: 100%;
-  background-color: var(--dn-mobile-simulator-bg-color);
-
-  &-content {
-    width: 100%;
-    top: 0;
-    left: 0;
-    height: 100%;
-    position: absolute;
-    overflow: overlay;
-  }
-
-  &-body {
-    display: flex;
-    justify-content: center;
-    height: 100%;
-
-    &-content {
-      background-color: var(--dn-mobile-simulator-body-bg-color);
-      border: 3px solid var(--dn-mobile-simulator-border-color);
-    }
-  }
-}

package/src/simulators/PCSimulator/index.tsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import cls from 'classnames'
-import { usePrefix } from '../../hooks'
-import './styles.less'
-export interface IPCSimulatorProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  className?: string
-  style?: React.CSSProperties
-}
-export const PCSimulator: React.FC<IPCSimulatorProps> = (props) => {
-  const prefix = usePrefix('pc-simulator')
-  return (
-    <div {...props} className={cls(prefix, props.className)}>
-      {props.children}
-    </div>
-  )
-}

package/src/simulators/PCSimulator/styles.less

@@ -1,11 +0,0 @@
-@import '../../variables.less';
-
-.@{prefix-cls}-pc-simulator {
-  background-color: var(--dn-pc-simulator-bg-color);
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  box-sizing: border-box;
-}

package/src/simulators/ResponsiveSimulator/handle.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import { useDesigner, usePrefix } from '../../hooks'
-import cls from 'classnames'
-export enum ResizeHandleType {
-  Resize = 'RESIZE',
-  ResizeWidth = 'RESIZE_WIDTH',
-  ResizeHeight = 'RESIZE_HEIGHT',
-}
-
-export interface IResizeHandleProps {
-  children?: React.ReactNode
-  type?: ResizeHandleType
-}
-
-export const ResizeHandle: React.FC<IResizeHandleProps> = (props) => {
-  const prefix = usePrefix('resize-handle')
-  const designer = useDesigner()
-  return (
-    <div
-      {...props}
-      {...{ [designer.props.screenResizeHandlerAttrName]: props.type }}
-      className={cls(prefix, {
-        [`${prefix}-${props.type}`]: !!props.type,
-      })}
-    >
-      {props.children}
-    </div>
-  )
-}