@alicloud/console-components/demo/demo-animate/const/index.ts

Alibaba Cloud React Components

import {
  EIssueType,
  EIssueConsequence
} from '../../enum';
import {
  IFixing
} from '../../types';

export const FIXING_PROP_CHILDREN: IFixing = {
  propName: 'children',
  codeOld: `interface AnimationProps {
  children?: React.ReactElement<any> | Array<any>;
}`,
  codeNew: `interface AnimationProps {
  children?: null | ReactElement | ReactElement[];
}`,
  issues: [{
    title: '单 child，可能返回 <code>null</code>',
    code: `<Animate>
  {stateVisible ? <ZoomInOut>Div 1</ZoomInOut> : null}
</Animate>`,
    type: EIssueType.TYPE_FALSE_REPORT,
    consequences: [EIssueConsequence.BUILD_FAIL]
  }, {
    title: '多 children，可能返回 <code>null</code>',
    code: `<Animate>
  {stateVisible ? <ZoomInOut key="1">Div 1</ZoomInOut> : null}
  {stateVisible ? <ZoomInOut key="2">Div 2</ZoomInOut> : null}
</Animate>`,
    type: EIssueType.RUNTIME_CRASH,
    consequences: [EIssueConsequence.CRASH],
    error: 'can\'t access property "key", child is null'
  }]
};

export const FIXING_PROP_ANIMATION: IFixing = {
  propName: 'animation',
  codeOld: `interface AnimationProps {
  animation?: string | any;
}`,
  codeNew: `interface AnimationProps {
  animation?: string | {
    appear?: string;
    enter?: string;
    leave?: string;
  };
}`,
  issues: [{
    title: 'leave 错写成 leaving',
    code: `<Animate {...{
  animation: {
    enter: 'enter',
    leaving: 'leaving'
  }
}}} />`,
    type: EIssueType.TYPE_UNPROTECTED,
    consequences: [EIssueConsequence.ABNORMAL, EIssueConsequence.CONFUSING]
  }]
};

export const FIXING_PROP_CALLBACKS: IFixing = {
  propName: '__CALLBACKS__',
  codeOld: `interface AnimationProps {
  beforeAppear?: (node: React.ReactElement<any>) => void;
  onAppear?: (node: React.ReactElement<any>) => void;
  afterAppear?: (node: React.ReactElement<any>) => void;
  beforeEnter?: (node: React.ReactElement<any>) => void;
  onEnter?: (node: React.ReactElement<any>) => void;
  afterEnter?: (node: React.ReactElement<any>) => void;
  beforeLeave?: (node: React.ReactElement<any>) => void;
  onLeave?: (node: React.ReactElement<any>) => void;
  afterLeave?: (node: React.ReactElement<any>) => void;
}`,
  codeNew: `interface AnimationProps {
  beforeAppear?(el: HTMLElement): void;
  onAppear?(el: HTMLElement): void;
  afterAppear?(el: HTMLElement): void;
  beforeEnter?(el: HTMLElement): void;
  onEnter?(el: HTMLElement): void;
  afterEnter?(el: HTMLElement): void;
  beforeLeave?(el: HTMLElement): void;
  onLeave?(el: HTMLElement): void;
  afterLeave?(el: HTMLElement): void;
}`,
  issues: [{
    title: '无法使用的回调参数',
    code: `<Animate {...{
  beforeAppear(node: ReactElement) {
    // 编译能够通过，但无法对 node 进行 DOM 操作，若当成 ReactElement，则可能引起运行时错误
  },
  afterAppear(node: HTMLElement) {
    // 可以对 node 进行 DOM 操作，但无法通过类型检查，编译失败
  }
}}} />`,
    type: EIssueType.TYPE_MISMATCH,
    consequences: [EIssueConsequence.BUILD_FAIL, EIssueConsequence.CRASH],
    error: '有可能引起错误'
  }]
};

export const ANIMATION_ENTER = 'zoom-in';
export const ANIMATION_LEAVE = 'zoom-out';