@formily-design/react 1.0.0

package/src/widgets/OutlineWidget/styles.less

@@ -0,0 +1,195 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-outline-tree {
+  &-container {
+    position: relative;
+    min-height: 100px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    background-color: var(--dn-outline-tree-bg-color);
+  }
+
+  &-header {
+    display: flex;
+    padding: 8px;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--dn-outline-tree-header-border-color);
+    color: var(--dn-outline-tree-color);
+  }
+
+  &-title {
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  &-close {
+    display: flex;
+    align-items: center;
+    transform: scale(1.6);
+    cursor: pointer;
+  }
+
+  &-content {
+    position: relative;
+    flex-grow: 1;
+    height: 100%;
+    width: 100%;
+    padding-bottom: 20px;
+    overflow: overlay;
+  }
+
+  &-aux {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &-insertion {
+    background-color: var(--dn-outline-tree-insertion-bg-color);
+  }
+
+  &-node {
+    position: relative;
+    user-select: none;
+    width: fit-content;
+    min-width: 100%;
+
+    &.expanded {
+      & > .@{prefix-cls}-outline-tree-node-header {
+        .@{prefix-cls}-outline-tree-node-expand {
+          transform: rotate(0);
+        }
+      }
+
+      & > .@{prefix-cls}-outline-tree-node-children {
+        display: block;
+      }
+    }
+
+    &.selected {
+      & > .@{prefix-cls}-outline-tree-node-header {
+        background-color: var(--dn-panel-active-bg-color);
+
+        .@{prefix-cls}-outline-tree-node-header-head {
+          background-color: var(--dn-panel-active-bg-color);
+        }
+      }
+    }
+
+    &.droppable {
+      & > .@{prefix-cls}-outline-tree-node-header {
+        .@{prefix-cls}-outline-tree-node-header-content {
+          .@{prefix-cls}-outline-tree-node-header-base {
+            & > .@{prefix-cls}-outline-tree-node-icon {
+              transform: scale(1.2);
+            }
+          }
+        }
+      }
+    }
+
+    &-hidden-icon:not(.hidden) {
+      display: none;
+    }
+
+    &-header {
+      display: flex;
+      min-height: 32px;
+      width: fit-content;
+      min-width: 100%;
+      align-items: center;
+      color: var(--dn-outline-tree-node-header-color);
+      position: relative;
+      padding-left: 8px;
+
+      &:hover {
+        .@{prefix-cls}-outline-tree-node-header-content {
+          color: var(--dn-outline-tree-node-hover-color);
+        }
+
+        .@{prefix-cls}-outline-tree-node-hidden-icon {
+          display: block;
+        }
+      }
+    }
+
+    &-header-head {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      pointer-events: none;
+    }
+
+    &-header-content {
+      display: flex;
+      align-items: center;
+      transition: all 0.15s ease-in;
+      transform-origin: left;
+      width: fit-content;
+      min-width: 100%;
+      height: 100%;
+      justify-content: space-between;
+      font-size: 12px;
+    }
+
+    &-header-base {
+      display: flex;
+      align-items: center;
+    }
+
+    &-header-actions {
+      display: flex;
+      align-items: center;
+      margin-right: 8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &-expand {
+      display: flex;
+      align-items: center;
+      transition: all 0.15s ease-out;
+      transform: rotate(-90deg);
+      margin-right: 3px;
+      width: 12px;
+    }
+
+    &-icon {
+      margin-right: 5px;
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    &-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-right: 100px;
+    }
+
+    &-actions {
+      font-size: 12px;
+      flex-grow: 2;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &-children {
+      padding-left: 16px;
+      display: none;
+      width: fit-content;
+      min-width: 100%;
+    }
+  }
+}

package/src/widgets/ResourceWidget/index.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react'
+import {
+  isResourceHost,
+  isResourceList,
+  IResourceLike,
+  IResource,
+} from '@formily-design/core'
+import { isFn } from '@formily-design/shared'
+import { observer } from '@formily/reactive-react'
+import { usePrefix } from '../../hooks'
+import { IconWidget } from '../IconWidget'
+import { TextWidget } from '../TextWidget'
+import cls from 'classnames'
+import './styles.less'
+
+export type SourceMapper = (resource: IResource) => React.ReactChild
+
+export interface IResourceWidgetProps {
+  title: React.ReactNode
+  sources?: IResourceLike[]
+  className?: string
+  defaultExpand?: boolean
+  children?: SourceMapper | React.ReactElement
+}
+
+export const ResourceWidget: React.FC<IResourceWidgetProps> = observer(
+  (props) => {
+    const prefix = usePrefix('resource')
+    const [expand, setExpand] = useState(props.defaultExpand)
+    const renderNode = (source: IResource) => {
+      const { node, icon, title, thumb, span } = source
+      return (
+        <div
+          className={prefix + '-item'}
+          style={{ gridColumnStart: `span ${span || 1}` }}
+          key={node.id}
+          data-designer-source-id={node.id}
+        >
+          {thumb && <img className={prefix + '-item-thumb'} src={thumb} />}
+          {icon && React.isValidElement(icon) ? (
+            <>{icon}</>
+          ) : (
+            <IconWidget
+              className={prefix + '-item-icon'}
+              infer={icon}
+              style={{ width: 150, height: 40 }}
+            />
+          )}
+          <span className={prefix + '-item-text'}>
+            {
+              <TextWidget>
+                {title || node.children[0]?.getMessage('title')}
+              </TextWidget>
+            }
+          </span>
+        </div>
+      )
+    }
+    const sources = props.sources.reduce<IResource[]>((buf, source) => {
+      if (isResourceList(source)) {
+        return buf.concat(source)
+      } else if (isResourceHost(source)) {
+        return buf.concat(source.Resource)
+      }
+      return buf
+    }, [])
+    const remainItems =
+      sources.reduce((length, source) => {
+        return length + (source.span ?? 1)
+      }, 0) % 3
+    return (
+      <div
+        className={cls(prefix, props.className, {
+          expand,
+        })}
+      >
+        <div
+          className={prefix + '-header'}
+          onClick={(e) => {
+            e.stopPropagation()
+            e.preventDefault()
+            setExpand(!expand)
+          }}
+        >
+          <div className={prefix + '-header-expand'}>
+            <IconWidget infer="Expand" size={10} />
+          </div>
+          <div className={prefix + '-header-content'}>
+            <TextWidget>{props.title}</TextWidget>
+          </div>
+        </div>
+        <div className={prefix + '-content-wrapper'}>
+          <div className={prefix + '-content'}>
+            {sources.map(isFn(props.children) ? props.children : renderNode)}
+            {remainItems ? (
+              <div
+                className={prefix + '-item-remain'}
+                style={{ gridColumnStart: `span ${3 - remainItems}` }}
+              ></div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+
+ResourceWidget.defaultProps = {
+  defaultExpand: true,
+}

package/src/widgets/ResourceWidget/styles.less

@@ -0,0 +1,87 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-resource {
+  flex-wrap: wrap;
+  overflow: hidden;
+
+  &-header {
+    display: flex;
+    align-items: center;
+    padding: 5px 8px;
+    color: var(--dn-collapse-header-color);
+    border-bottom: 1px solid var(--dn-panel-border-color);
+    background-color: var(--dn-panel-active-bg-color);
+    cursor: pointer;
+    transition: all 0.25s ease-in-out;
+    font-size: 13px;
+
+    &-expand {
+      transform: rotate(-90deg);
+      font-size: 12px;
+      transition: all 0.15s ease-in-out;
+      margin-right: 3px;
+    }
+  }
+
+  &-content-wrapper {
+    display: flex;
+    justify-content: center;
+    background: var(--dn-resource-content-bg-color);
+  }
+
+  &-content {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    display: none;
+  }
+
+  &.expand {
+    .@{prefix-cls}-resource-content {
+      display: grid;
+      grid-template-columns: repeat(3, 33.3333%);
+      grid-gap: 1px;
+      background-color: var(--dn-panel-border-color);
+      border-bottom: 1px solid var(--dn-panel-border-color);
+    }
+
+    .@{prefix-cls}-resource-header-expand {
+      transform: rotate(0);
+    }
+  }
+
+  &-item {
+    position: relative;
+    user-select: none;
+    background: var(--dn-resource-content-bg-color);
+    min-height: 40px;
+    color: var(--dn-resource-item-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    cursor: grab;
+    transition: color 0.1s ease-out;
+
+    &:hover {
+      color: var(--dn-resource-item-hover-color);
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      z-index: 1;
+    }
+
+    &-icon {
+      margin: 12px 0;
+    }
+
+    &-text {
+      text-align: center;
+      font-size: 12px;
+      line-height: 1;
+      margin-bottom: 12px;
+    }
+
+    &-remain {
+      background: var(--dn-resource-content-bg-color);
+    }
+  }
+}

package/src/widgets/TextWidget/index.tsx

@@ -0,0 +1,43 @@
+import React, { Fragment } from 'react'
+import { isStr, isPlainObj } from '@formily-design/shared'
+import { GlobalRegistry, IDesignerMiniLocales } from '@formily-design/core'
+import { observer } from '@formily/reactive-react'
+
+export interface ITextWidgetProps {
+  children?: React.ReactNode
+  componentName?: string
+  sourceName?: string
+  token?: string | IDesignerMiniLocales
+  defaultMessage?: string | IDesignerMiniLocales
+}
+
+export const TextWidget: React.FC<ITextWidgetProps> = observer((props) => {
+  const takeLocale = (
+    message: string | IDesignerMiniLocales
+  ): React.ReactNode => {
+    if (isStr(message)) return message
+    if (isPlainObj(message)) {
+      const lang = GlobalRegistry.getDesignerLanguage()
+      for (let key in message) {
+        if (key.toLocaleLowerCase() === lang) return message[key]
+      }
+      return
+    }
+    return message
+  }
+  const takeMessage = (token: any) => {
+    if (!token) return
+    const message = isStr(token)
+      ? GlobalRegistry.getDesignerMessage(token)
+      : token
+    if (message) return takeLocale(message)
+    return token
+  }
+  return (
+    <Fragment>
+      {takeMessage(props.children) ||
+        takeMessage(props.token) ||
+        takeMessage(props.defaultMessage)}
+    </Fragment>
+  )
+})

package/src/widgets/ViewToolsWidget/index.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { Button } from 'antd'
+import { observer } from '@formily/reactive-react'
+import { WorkbenchTypes } from '@formily-design/core'
+import { IconWidget } from '../IconWidget'
+import { usePrefix, useWorkbench } from '../../hooks'
+import cls from 'classnames'
+
+export interface IViewToolsWidget {
+  use?: WorkbenchTypes[]
+  style?: React.CSSProperties
+  className?: string
+}
+
+export const ViewToolsWidget: React.FC<IViewToolsWidget> = observer(
+  ({ use, style, className }) => {
+    const workbench = useWorkbench()
+    const prefix = usePrefix('view-tools')
+    return (
+      <Button.Group style={style} className={cls(prefix, className)}>
+        {use.includes('DESIGNABLE') && (
+          <Button
+            disabled={workbench.type === 'DESIGNABLE'}
+            onClick={() => {
+              workbench.type = 'DESIGNABLE'
+            }}
+            size="small"
+          >
+            <IconWidget infer="Design" />
+          </Button>
+        )}
+        {use.includes('JSONTREE') && (
+          <Button
+            disabled={workbench.type === 'JSONTREE'}
+            onClick={() => {
+              workbench.type = 'JSONTREE'
+            }}
+            size="small"
+          >
+            <IconWidget infer="JSON" />
+          </Button>
+        )}
+        {use.includes('MARKUP') && (
+          <Button
+            disabled={workbench.type === 'MARKUP'}
+            onClick={() => {
+              workbench.type = 'MARKUP'
+            }}
+            size="small"
+          >
+            <IconWidget infer="Code" />
+          </Button>
+        )}
+        {use.includes('PREVIEW') && (
+          <Button
+            disabled={workbench.type === 'PREVIEW'}
+            onClick={() => {
+              workbench.type = 'PREVIEW'
+            }}
+            size="small"
+          >
+            <IconWidget infer="Play" />
+          </Button>
+        )}
+      </Button.Group>
+    )
+  }
+)
+
+ViewToolsWidget.defaultProps = {
+  use: ['DESIGNABLE', 'JSONTREE', 'PREVIEW'],
+}

package/src/widgets/index.ts

@@ -0,0 +1,15 @@
+export * from './AuxToolWidget'
+export * from './ComponentTreeWidget'
+export * from './DesignerToolsWidget'
+export * from './ViewToolsWidget'
+export * from './ResourceWidget'
+export * from './GhostWidget'
+export * from './EmptyWidget'
+export * from './OutlineWidget'
+export * from './IconWidget'
+export * from './TextWidget'
+export * from './HistoryWidget'
+export * from './NodePathWidget'
+export * from './NodeTitleWidget'
+export * from './DroppableWidget'
+export * from './NodeActionsWidget'

package/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./lib",
+    "paths": {
+      "@formily-design/*": ["../*"]
+    },
+    "declaration": true
+  }
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"],
+  "exclude": ["./src/__tests__/*", "./esm/*", "./lib/*"]
+}