@formily-design/react 1.0.0 → 1.0.2

package/src/widgets/OutlineWidget/styles.less

@@ -1,195 +0,0 @@
-@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

@@ -1,110 +0,0 @@
-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

@@ -1,87 +0,0 @@
-@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

@@ -1,43 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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

package/tsconfig.json

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