chore(antd/next): compat antd@4.17 and remove antd-icons from fusion …

…package (#2492)
alibaba · Nov 24, 2021 · cc32569 · cc32569
1 parent b0ca732
commit cc32569
Show file tree

Hide file tree

Showing 19 changed files with 555 additions and 457 deletions.
diff --git a/packages/antd/src/array-base/style.less b/packages/antd/src/array-base/style.less
@@ -1,4 +1,5 @@
-@import '~antd/lib/style/themes/default.less';
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
 
 @array-base-prefix-cls: ~'@{ant-prefix}-formily-array-base';
 

diff --git a/packages/antd/src/array-cards/style.less b/packages/antd/src/array-cards/style.less
@@ -1,4 +1,5 @@
-@import '~antd/lib/style/themes/default.less';
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
 
 @array-cards-prefix-cls: ~'@{ant-prefix}-formily-array-cards';
 

diff --git a/packages/antd/src/array-collapse/style.less b/packages/antd/src/array-collapse/style.less
@@ -1,4 +1,5 @@
-@import '~antd/lib/style/themes/default.less';
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
 
 @array-collapse-prefix-cls: ~'@{ant-prefix}-formily-array-collapse';
 

diff --git a/packages/antd/src/array-items/style.less b/packages/antd/src/array-items/style.less
@@ -1,4 +1,5 @@
-@import '~antd/lib/style/themes/default.less';
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
 
 @array-items-prefix-cls: ~'@{ant-prefix}-formily-array-items';
 

diff --git a/packages/antd/src/array-table/style.less b/packages/antd/src/array-table/style.less
@@ -1,4 +1,5 @@
-@import '~antd/lib/style/themes/default.less';
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
 
 @array-table-prefix-cls: ~'@{ant-prefix}-formily-array-table';
 

diff --git a/packages/antd/src/cascader/index.tsx b/packages/antd/src/cascader/index.tsx
@@ -1,11 +1,23 @@
 import React from 'react'
 import { connect, mapReadPretty, mapProps } from '@formily/react'
-import { Cascader as AntdCascader } from 'antd'
+import { Cascader as AntdCascader, CascaderProps } from 'antd'
 import { PreviewText } from '../preview-text'
 import { LoadingOutlined } from '@ant-design/icons'
 
+interface CascaderRef {
+  focus: () => void
+  blur: () => void
+}
+
+type FixAntdCascaderType = React.ForwardRefExoticComponent<
+  CascaderProps &
+    React.RefAttributes<CascaderRef> & {
+      suffixIcon?: React.ReactNode
+    }
+>
+
 export const Cascader = connect(
-  AntdCascader,
+  AntdCascader as FixAntdCascaderType,
   mapProps(
     {
       dataSource: 'options',

diff --git a/packages/antd/src/editable/style.less b/packages/antd/src/editable/style.less
@@ -1,4 +1,5 @@
-@import '~antd/lib/style/themes/default.less';
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
 
 @editable-prefix-cls: ~'@{ant-prefix}-formily-editable';
 

diff --git a/packages/antd/src/form-button-group/style.less b/packages/antd/src/form-button-group/style.less
@@ -1,4 +1,5 @@
-@import '~antd/lib/style/themes/default.less';
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
 
 @btn-group-prefix-cls: ~'@{ant-prefix}-formily-button-group';
 

diff --git a/packages/antd/src/form-grid/style.less b/packages/antd/src/form-grid/style.less
@@ -1,4 +1,5 @@
-@import '~antd/lib/style/themes/default.less';
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
 
 @form-grid-prefix-cls: ~'@{ant-prefix}-formily-grid';
 

diff --git a/packages/antd/src/form-item/style.less b/packages/antd/src/form-item/style.less
@@ -1,5 +1,6 @@
-@import '~antd/lib/style/themes/default.less';
-@import '~antd/lib/input/style/mixin.less';
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+@import (reference) '~antd/lib/input/style/mixin.less';
 @import './grid.less';
 @import './animation.less';
 
@@ -369,6 +370,7 @@
 
   .@{ant-prefix}-input-number {
     font-size: @font-size-lg;
+
     input {
       height: @height-lg - 2;
     }

diff --git a/packages/antd/src/preview-text/style.less b/packages/antd/src/preview-text/style.less
@@ -1,4 +1,5 @@
-@import '~antd/lib/style/themes/default.less';
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
 
 @form-text-prefix-cls: ~'@{ant-prefix}-form-text';
 

diff --git a/packages/antd/src/radio/style.less b/packages/antd/src/radio/style.less
@@ -1,4 +1,5 @@
-@import '~antd/lib/style/themes/default.less';
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
 
 .@{ant-prefix}-radio-button-wrapper-checked:not([class*=' @{ant-prefix}-radio-button-wrapper-disabled']).@{ant-prefix}-radio-button-wrapper:first-child {
   border-right-color: inherit !important;

diff --git a/packages/antd/src/upload/index.tsx b/packages/antd/src/upload/index.tsx
@@ -14,13 +14,13 @@ import { isArr, toArr } from '@formily/shared'
 import { UPLOAD_PLACEHOLDER } from './placeholder'
 import { usePrefixCls } from '../__builtins__'
 
-type UploadProps = Omit<AntdUploadProps, 'onChange'> & {
+export type UploadProps = Omit<AntdUploadProps, 'onChange'> & {
   textContent?: React.ReactNode
   onChange?: (fileList: UploadFile[]) => void
   serviceErrorMessage?: string
 }
 
-type DraggerProps = Omit<AntdDraggerProps, 'onChange'> & {
+export type DraggerProps = Omit<AntdDraggerProps, 'onChange'> & {
   textContent?: React.ReactNode
   onChange?: (fileList: UploadFile[]) => void
   serviceErrorMessage?: string
@@ -76,15 +76,13 @@ const getThumbURL = (target: any) => {
 }
 
 const getErrorMessage = (target: any) => {
-  return target?.errorMessage ||
+  return (
+    target?.errorMessage ||
     target?.errMsg ||
     target?.errorMsg ||
     target?.message ||
-    (
-      typeof target?.error === 'string'
-      ? target.error
-      : ''
-    )
+    (typeof target?.error === 'string' ? target.error : '')
+  )
 }
 
 const getState = (target: any) => {

diff --git a/packages/next/package.json b/packages/next/package.json
@@ -51,7 +51,6 @@
     "dumi": "^1.1.0-rc.8"
   },
   "dependencies": {
-    "@ant-design/icons": "^4.0.0",
     "@formily/core": "2.0.0",
     "@formily/grid": "2.0.0",
     "@formily/json-schema": "2.0.0",

diff --git a/packages/next/src/__builtins__/icons.tsx b/packages/next/src/__builtins__/icons.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import cls from 'classnames'
+import { usePrefixCls } from './hooks/usePrefixCls'
+export type IconProps = React.HTMLAttributes<SVGSVGElement> & {
+  ref?: React.ForwardedRef<SVGSVGElement>
+}
+
+export type IconType = React.ForwardRefExoticComponent<IconProps>
+
+export const Icon: IconType = React.forwardRef((props, ref) => {
+  const prefix = usePrefixCls('formily-icon')
+  return (
+    <svg
+      {...props}
+      ref={ref}
+      className={cls(prefix, props.className)}
+      style={{
+        ...props.style,
+        cursor: props.onClick ? 'pointer' : '',
+        display: 'inline-block',
+        verticalAlign: 'middle',
+      }}
+      viewBox="64 64 896 896"
+      fill="currentColor"
+      width="1em"
+      height="1em"
+      focusable="false"
+      aria-hidden="true"
+    >
+      {props.children}
+    </svg>
+  )
+})
+
+export const MenuOutlinedIcon: IconType = React.forwardRef((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"></path>
+  </Icon>
+))
+
+export const PlusOutlinedIcon: IconType = React.forwardRef((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path>
+    <path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path>
+  </Icon>
+))
+
+export const UpOutlinedIcon: IconType = React.forwardRef((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path>
+  </Icon>
+))
+
+export const DownOutlinedIcon: IconType = React.forwardRef((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+  </Icon>
+))
+
+export const DeleteOutlinedIcon: IconType = React.forwardRef((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path>
+  </Icon>
+))
diff --git a/packages/next/src/__builtins__/index.ts b/packages/next/src/__builtins__/index.ts
@@ -7,3 +7,4 @@ export * from './empty'
 export * from './loading'
 export * from './portal'
 export * from './pickDataProps'
+export * from './icons'
diff --git a/packages/next/src/array-base/index.tsx b/packages/next/src/array-base/index.tsx
@@ -1,19 +1,19 @@
 import React, { createContext, useContext } from 'react'
 import { Button } from '@alifd/next'
-import {
-  DeleteOutlined,
-  DownOutlined,
-  UpOutlined,
-  PlusOutlined,
-  MenuOutlined,
-} from '@ant-design/icons'
 import { isValid, clone } from '@formily/shared'
-import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon'
 import { ButtonProps } from '@alifd/next/lib/button'
 import { ArrayField } from '@formily/core'
 import { useField, useFieldSchema, Schema, JSXComponent } from '@formily/react'
 import { SortableHandle } from 'react-sortable-hoc'
-import { usePrefixCls } from '../__builtins__'
+import {
+  usePrefixCls,
+  PlusOutlinedIcon,
+  DeleteOutlinedIcon,
+  DownOutlinedIcon,
+  UpOutlinedIcon,
+  MenuOutlinedIcon,
+  IconProps,
+} from '../__builtins__'
 import cls from 'classnames'
 
 export interface IArrayBaseAdditionProps extends ButtonProps {
@@ -35,10 +35,10 @@ export interface IArrayBaseItemProps {
 
 export type ArrayBaseMixins = {
   Addition?: React.FC<IArrayBaseAdditionProps>
-  Remove?: React.FC<AntdIconProps & { index?: number }>
-  MoveUp?: React.FC<AntdIconProps & { index?: number }>
-  MoveDown?: React.FC<AntdIconProps & { index?: number }>
-  SortHandle?: React.FC<AntdIconProps & { index?: number }>
+  Remove?: React.FC<IconProps & { index?: number }>
+  MoveUp?: React.FC<IconProps & { index?: number }>
+  MoveDown?: React.FC<IconProps & { index?: number }>
+  SortHandle?: React.FC<IconProps & { index?: number }>
   Index?: React.FC
   useArray?: () => IArrayBaseContext
   useIndex?: () => number
@@ -108,7 +108,7 @@ ArrayBase.Item = ({ children, ...props }) => {
 const SortHandle = SortableHandle((props: any) => {
   const prefixCls = usePrefixCls('formily-array-base')
   return (
-    <MenuOutlined
+    <MenuOutlinedIcon
       {...props}
       className={cls(`${prefixCls}-sort-handle`, props.className)}
       style={{ ...props.style }}
@@ -165,7 +165,7 @@ ArrayBase.Addition = (props) => {
         }
       }}
     >
-      <PlusOutlined />
+      <PlusOutlinedIcon />
       {props.title || self.title}
     </Button>
   )
@@ -178,7 +178,7 @@ ArrayBase.Remove = React.forwardRef((props, ref) => {
   if (!array) return null
   if (array.field?.pattern !== 'editable') return null
   return (
-    <DeleteOutlined
+    <DeleteOutlinedIcon
       {...props}
       className={cls(`${prefixCls}-remove`, props.className)}
       ref={ref}
@@ -202,7 +202,7 @@ ArrayBase.MoveDown = React.forwardRef((props, ref) => {
   if (!array) return null
   if (array.field?.pattern !== 'editable') return null
   return (
-    <DownOutlined
+    <DownOutlinedIcon
       {...props}
       className={cls(`${prefixCls}-move-down`, props.className)}
       ref={ref}
@@ -226,7 +226,7 @@ ArrayBase.MoveUp = React.forwardRef((props, ref) => {
   if (!array) return null
   if (array.field?.pattern !== 'editable') return null
   return (
-    <UpOutlined
+    <UpOutlinedIcon
       {...props}
       className={cls(`${prefixCls}-move-up`, props.className)}
       ref={ref}

diff --git a/packages/next/src/form-item/main.scss b/packages/next/src/form-item/main.scss
@@ -169,6 +169,7 @@
         height: 100%;
         padding-left: 2px;
       }
+
       .#{$css-prefix}transfer {
         display: flex;
         align-items: center;
@@ -354,7 +355,7 @@
   > .#{$form-item-cls}-control {
     > .#{$form-item-cls}-control-content {
       > .#{$form-item-cls}-control-content-component {
-        > *:first-child:not(.#{$css-prefix}switch, .#{$css-prefix}icon, .anticon) {
+        > *:first-child:not(.#{$css-prefix}switch, .#{$css-prefix}icon, .#{$css-prefix}formily-icon, .anticon) {
           width: 100%;
         }
       }