fix(next): fix the antd-icons is not removed cleanly

alibaba · Nov 26, 2021 · 4e7a462 · 4e7a462
1 parent 5ad3fdd
commit 4e7a462
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 18 deletions.
diff --git a/packages/core/src/__tests__/field.spec.ts b/packages/core/src/__tests__/field.spec.ts
@@ -1791,3 +1791,22 @@ test('field setValidator repeat call', async () => {
   await form.validate()
   expect(validator1).toBeCalledTimes(1)
 })
+
+test('custom validator to get ctx.field', async () => {
+  const form = attach(createForm())
+  let ctxField = null
+  let ctxForm = null
+  attach(
+    form.createField({
+      name: 'aaa',
+      validator(value, rule, ctx) {
+        ctxField = ctx.field
+        ctxForm = ctx.form
+        return ''
+      },
+    })
+  )
+  await form.submit()
+  expect(!!ctxField).toBeTruthy()
+  expect(!!ctxForm).toBeTruthy()
+})
diff --git a/packages/next/src/__builtins__/icons.tsx b/packages/next/src/__builtins__/icons.tsx
@@ -62,3 +62,47 @@ export const DeleteOutlinedIcon: IconType = React.forwardRef((props, 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>
 ))
+
+export const QuestionCircleOutlinedIcon: IconType = React.forwardRef(
+  (props, ref) => (
+    <Icon {...props} ref={ref}>
+      <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
+      <path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"></path>
+    </Icon>
+  )
+)
+export const CloseCircleOutlinedIcon: IconType = React.forwardRef(
+  (props, ref) => (
+    <Icon {...props} ref={ref}>
+      <path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"></path>
+      <path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
+    </Icon>
+  )
+)
+export const CheckCircleOutlinedIcon: IconType = React.forwardRef(
+  (props, ref) => (
+    <Icon {...props} ref={ref}>
+      <path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0051.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path>
+      <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
+    </Icon>
+  )
+)
+export const ExclamationCircleOutlinedIcon: IconType = React.forwardRef(
+  (props, ref) => <Icon {...props} ref={ref}></Icon>
+)
+
+export const EditOutlinedIcon: IconType = React.forwardRef((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path>{' '}
+  </Icon>
+))
+export const CloseOutlinedIcon: IconType = React.forwardRef((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
+  </Icon>
+))
+export const MessageOutlinedIcon: IconType = React.forwardRef((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d="M464 512a48 48 0 1096 0 48 48 0 10-96 0zm200 0a48 48 0 1096 0 48 48 0 10-96 0zm-400 0a48 48 0 1096 0 48 48 0 10-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 00-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 00-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 00112 714v152a46 46 0 0046 46h152.1A449.4 449.4 0 00510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 00142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"></path>
+  </Icon>
+))
diff --git a/packages/next/src/editable/index.tsx b/packages/next/src/editable/index.tsx
@@ -2,10 +2,15 @@ import React, { useLayoutEffect, useRef, useState } from 'react'
 import { isVoidField, Field } from '@formily/core'
 import { useField, observer } from '@formily/react'
 import { Balloon } from '@alifd/next'
-import { EditOutlined, CloseOutlined, MessageOutlined } from '@ant-design/icons'
 import { BalloonProps as PopoverProps } from '@alifd/next/lib/balloon'
 import { BaseItem, IFormItemProps } from '../form-item'
-import { useClickAway, usePrefixCls } from '../__builtins__'
+import {
+  useClickAway,
+  usePrefixCls,
+  EditOutlinedIcon,
+  CloseOutlinedIcon,
+  MessageOutlinedIcon,
+} from '../__builtins__'
 /**
  * 默认Inline展示
  */
@@ -75,10 +80,10 @@ export const Editable: ComposedEditable = observer((props) => {
     return (
       <BaseItem {...props} {...itemProps}>
         {pattern === 'editable' && (
-          <EditOutlined className={`${prefixCls}-edit-btn`} />
+          <EditOutlinedIcon className={`${prefixCls}-edit-btn`} />
         )}
         {pattern !== 'editable' && (
-          <MessageOutlined className={`${prefixCls}-edit-btn`} />
+          <MessageOutlinedIcon className={`${prefixCls}-edit-btn`} />
         )}
       </BaseItem>
     )
@@ -88,7 +93,7 @@ export const Editable: ComposedEditable = observer((props) => {
     if (!editable) return
     return (
       <BaseItem {...props}>
-        <CloseOutlined className={`${prefixCls}-close-btn`} />
+        <CloseOutlinedIcon className={`${prefixCls}-close-btn`} />
       </BaseItem>
     )
   }
@@ -173,10 +178,10 @@ Editable.Popover = observer(({ ...props }) => {
                 {props.title || field.title}
               </span>
               {pattern === 'editable' && (
-                <EditOutlined className={`${prefixCls}-edit-btn`} />
+                <EditOutlinedIcon className={`${prefixCls}-edit-btn`} />
               )}
               {pattern !== 'editable' && (
-                <MessageOutlined className={`${prefixCls}-edit-btn`} />
+                <MessageOutlinedIcon className={`${prefixCls}-edit-btn`} />
               )}
             </div>
           </BaseItem>

diff --git a/packages/next/src/form-item/index.tsx b/packages/next/src/form-item/index.tsx
@@ -1,16 +1,17 @@
 import React, { useState, useRef, useEffect } from 'react'
 import cls from 'classnames'
-import { usePrefixCls, pickDataProps } from '../__builtins__'
+import {
+  usePrefixCls,
+  pickDataProps,
+  QuestionCircleOutlinedIcon,
+  CloseCircleOutlinedIcon,
+  CheckCircleOutlinedIcon,
+  ExclamationCircleOutlinedIcon,
+} from '../__builtins__'
 import { isVoidField } from '@formily/core'
 import { connect, mapProps } from '@formily/react'
 import { useFormLayout, FormLayoutShallowContext } from '../form-layout'
 import { Balloon } from '@alifd/next'
-import {
-  QuestionCircleOutlined,
-  CloseCircleOutlined,
-  CheckCircleOutlined,
-  ExclamationCircleOutlined,
-} from '@ant-design/icons'
 
 export interface IFormItemProps {
   className?: string
@@ -77,7 +78,7 @@ const useFormItemLayout = (props: IFormItemProps) => {
     feedbackLayout: props.feedbackLayout ?? layout.feedbackLayout ?? 'loose',
     tooltipLayout: props.tooltipLayout ?? layout.tooltipLayout ?? 'icon',
     tooltipIcon: props.tooltipIcon ?? layout.tooltipIcon ?? (
-      <QuestionCircleOutlined />
+      <QuestionCircleOutlinedIcon />
     ),
   }
 }
@@ -110,9 +111,9 @@ function useOverflow<
 }
 
 const ICON_MAP = {
-  error: <CloseCircleOutlined />,
-  success: <CheckCircleOutlined />,
-  warning: <ExclamationCircleOutlined />,
+  error: <CloseCircleOutlinedIcon />,
+  success: <CheckCircleOutlinedIcon />,
+  warning: <ExclamationCircleOutlinedIcon />,
 }
 
 export const BaseItem: React.FC<IFormItemProps> = (props) => {