mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-13 04:53:11 +08:00
refactor: support noImplicitAny in Alert (#5836)
* refactor(alert): Enable noImplicitAny * refactor(anchor): enable noImplicitAny #5627 * chore: coding style
This commit is contained in:
parent
6cd05d8be5
commit
e7053c1b39
@ -4,7 +4,7 @@ import Animate from 'rc-animate';
|
|||||||
import Icon from '../icon';
|
import Icon from '../icon';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
|
||||||
function noop() {}
|
function noop() { }
|
||||||
|
|
||||||
export interface AlertProps {
|
export interface AlertProps {
|
||||||
/**
|
/**
|
||||||
@ -20,7 +20,7 @@ export interface AlertProps {
|
|||||||
/** Additional content of Alert */
|
/** Additional content of Alert */
|
||||||
description?: React.ReactNode;
|
description?: React.ReactNode;
|
||||||
/** Callback when close Alert */
|
/** Callback when close Alert */
|
||||||
onClose?: React.MouseEventHandler<any>;
|
onClose?: React.MouseEventHandler<HTMLAnchorElement>;
|
||||||
/** Whether to show icon */
|
/** Whether to show icon */
|
||||||
showIcon?: boolean;
|
showIcon?: boolean;
|
||||||
style?: React.CSSProperties;
|
style?: React.CSSProperties;
|
||||||
@ -30,14 +30,14 @@ export interface AlertProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default class Alert extends React.Component<AlertProps, any> {
|
export default class Alert extends React.Component<AlertProps, any> {
|
||||||
constructor(props) {
|
constructor(props: AlertProps) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
closing: true,
|
closing: true,
|
||||||
closed: false,
|
closed: false,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
handleClose = (e) => {
|
handleClose = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
let dom = ReactDOM.findDOMNode(this) as HTMLElement;
|
let dom = ReactDOM.findDOMNode(this) as HTMLElement;
|
||||||
dom.style.height = `${dom.offsetHeight}px`;
|
dom.style.height = `${dom.offsetHeight}px`;
|
||||||
|
@ -31,7 +31,7 @@ export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
|
|||||||
anchorHelper: AnchorHelper;
|
anchorHelper: AnchorHelper;
|
||||||
};
|
};
|
||||||
|
|
||||||
private _component: Element;
|
private _component: HTMLAnchorElement;
|
||||||
|
|
||||||
setActiveAnchor() {
|
setActiveAnchor() {
|
||||||
const { bounds, offsetTop, href, affix } = this.props;
|
const { bounds, offsetTop, href, affix } = this.props;
|
||||||
@ -50,25 +50,28 @@ export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
|
|||||||
this.setActiveAnchor();
|
this.setActiveAnchor();
|
||||||
}
|
}
|
||||||
|
|
||||||
renderAnchorLink = (child) => {
|
renderAnchorLink = (child: React.ReactChild) => {
|
||||||
const { href } = child.props;
|
// Here child is a ReactChild type
|
||||||
if (href) {
|
if (typeof child !== 'string' && typeof child !== 'number') {
|
||||||
this.context.anchorHelper.addLink(href);
|
const { href } = child.props;
|
||||||
return React.cloneElement(child, {
|
if (href) {
|
||||||
onClick: this.props.onClick,
|
this.context.anchorHelper.addLink(href);
|
||||||
prefixCls: this.props.prefixCls,
|
return React.cloneElement(child, {
|
||||||
affix: this.props.affix,
|
onClick: this.props.onClick,
|
||||||
offsetTop: this.props.offsetTop,
|
prefixCls: this.props.prefixCls,
|
||||||
});
|
affix: this.props.affix,
|
||||||
|
offsetTop: this.props.offsetTop,
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return child;
|
return child;
|
||||||
}
|
}
|
||||||
|
|
||||||
refsTo = (component) => {
|
refsTo = (component: HTMLAnchorElement) => {
|
||||||
this._component = component;
|
this._component = component;
|
||||||
}
|
}
|
||||||
|
|
||||||
scrollTo = (e) => {
|
scrollTo = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const { onClick, href } = this.props;
|
const { onClick, href } = this.props;
|
||||||
const { anchorHelper } = this.context;
|
const { anchorHelper } = this.context;
|
||||||
|
@ -3,7 +3,7 @@ import getRequestAnimationFrame from '../_util/getRequestAnimationFrame';
|
|||||||
|
|
||||||
export const reqAnimFrame = getRequestAnimationFrame();
|
export const reqAnimFrame = getRequestAnimationFrame();
|
||||||
|
|
||||||
export const easeInOutCubic = (t, b, c, d) => {
|
export const easeInOutCubic = (t: number, b: number, c: number, d: number) => {
|
||||||
const cc = c - b;
|
const cc = c - b;
|
||||||
t /= d / 2;
|
t /= d / 2;
|
||||||
if (t < 1) {
|
if (t < 1) {
|
||||||
@ -17,7 +17,7 @@ export function getDefaultTarget() {
|
|||||||
window : null;
|
window : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getOffsetTop(element): number {
|
export function getOffsetTop(element: HTMLElement): number {
|
||||||
if (!element) {
|
if (!element) {
|
||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
@ -28,10 +28,10 @@ export function getOffsetTop(element): number {
|
|||||||
|
|
||||||
const rect = element.getBoundingClientRect();
|
const rect = element.getBoundingClientRect();
|
||||||
|
|
||||||
if ( rect.width || rect.height ) {
|
if (rect.width || rect.height) {
|
||||||
const doc = element.ownerDocument;
|
const doc = element.ownerDocument;
|
||||||
const docElem = doc.documentElement;
|
const docElem = doc.documentElement;
|
||||||
return rect.top - docElem.clientTop;
|
return rect.top - docElem.clientTop;
|
||||||
}
|
}
|
||||||
|
|
||||||
return rect.top;
|
return rect.top;
|
||||||
@ -43,7 +43,7 @@ export type Section = {
|
|||||||
section: any;
|
section: any;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function scrollTo(href, offsetTop = 0, target = getDefaultTarget, callback = () => {}) {
|
export function scrollTo(href: string, offsetTop = 0, target = getDefaultTarget, callback = () => { }) {
|
||||||
const scrollTop = getScroll(target(), true);
|
const scrollTop = getScroll(target(), true);
|
||||||
const targetElement = document.getElementById(href.substring(1));
|
const targetElement = document.getElementById(href.substring(1));
|
||||||
if (!targetElement) {
|
if (!targetElement) {
|
||||||
@ -68,7 +68,7 @@ export function scrollTo(href, offsetTop = 0, target = getDefaultTarget, callbac
|
|||||||
|
|
||||||
class AnchorHelper {
|
class AnchorHelper {
|
||||||
private links: Array<string>;
|
private links: Array<string>;
|
||||||
private currentAnchor: HTMLElement | null;
|
private currentAnchor: HTMLAnchorElement | null;
|
||||||
private _activeAnchor: string;
|
private _activeAnchor: string;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
@ -77,17 +77,17 @@ class AnchorHelper {
|
|||||||
this._activeAnchor = '';
|
this._activeAnchor = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
addLink(link) {
|
addLink(link: string) {
|
||||||
if (this.links.indexOf(link) === -1) {
|
if (this.links.indexOf(link) === -1) {
|
||||||
this.links.push(link);
|
this.links.push(link);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
getCurrentActiveAnchor(): HTMLElement | null {
|
getCurrentActiveAnchor(): HTMLAnchorElement | null {
|
||||||
return this.currentAnchor;
|
return this.currentAnchor;
|
||||||
}
|
}
|
||||||
|
|
||||||
setActiveAnchor(component) {
|
setActiveAnchor(component: HTMLAnchorElement) {
|
||||||
this.currentAnchor = component;
|
this.currentAnchor = component;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -98,21 +98,21 @@ class AnchorHelper {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const linksPositions = (this.links
|
const linksPositions = (this.links
|
||||||
.map(section => {
|
.map(section => {
|
||||||
const target = document.getElementById(section.substring(1));
|
const target = document.getElementById(section.substring(1));
|
||||||
if (target && getOffsetTop(target) < offsetTop + bounds) {
|
if (target && getOffsetTop(target) < offsetTop + bounds) {
|
||||||
const top = getOffsetTop(target);
|
const top = getOffsetTop(target);
|
||||||
if (top <= offsetTop + bounds) {
|
if (top <= offsetTop + bounds) {
|
||||||
return {
|
return {
|
||||||
section,
|
section,
|
||||||
top,
|
top,
|
||||||
bottom: top + target.clientHeight,
|
bottom: top + target.clientHeight,
|
||||||
};
|
};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
return null;
|
||||||
return null;
|
})
|
||||||
})
|
.filter(section => section !== null) as Array<Section>);
|
||||||
.filter(section => section !== null) as Array<Section>);
|
|
||||||
|
|
||||||
if (linksPositions.length) {
|
if (linksPositions.length) {
|
||||||
const maxSection = linksPositions.reduce((prev, curr) => curr.top > prev.top ? curr : prev);
|
const maxSection = linksPositions.reduce((prev, curr) => curr.top > prev.top ? curr : prev);
|
||||||
@ -121,7 +121,7 @@ class AnchorHelper {
|
|||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
|
|
||||||
scrollTo(href, offsetTop, target = getDefaultTarget, callback = () => {}) {
|
scrollTo(href: string, offsetTop: number | undefined, target = getDefaultTarget, callback = () => { }) {
|
||||||
scrollTo(href, offsetTop, target, callback);
|
scrollTo(href, offsetTop, target, callback);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -39,7 +39,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
|
|||||||
private anchorHelper: AnchorHelper;
|
private anchorHelper: AnchorHelper;
|
||||||
private _avoidInk: boolean;
|
private _avoidInk: boolean;
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props: AnchorProps) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
activeAnchor: null,
|
activeAnchor: null,
|
||||||
@ -85,7 +85,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
clickAnchorLink = (href, component) => {
|
clickAnchorLink = (href: string, component: HTMLElement) => {
|
||||||
this._avoidInk = true;
|
this._avoidInk = true;
|
||||||
this.refs.ink.style.top = `${component.offsetTop + component.clientHeight / 2 - 4.5}px`;
|
this.refs.ink.style.top = `${component.offsetTop + component.clientHeight / 2 - 4.5}px`;
|
||||||
this.anchorHelper.scrollTo(href, this.props.offsetTop, getDefaultTarget, () => {
|
this.anchorHelper.scrollTo(href, this.props.offsetTop, getDefaultTarget, () => {
|
||||||
@ -93,10 +93,10 @@ export default class Anchor extends React.Component<AnchorProps, any> {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
renderAnchorLink = (child) => {
|
renderAnchorLink = (child: React.ReactElement<any>) => {
|
||||||
|
|
||||||
const { href } = child.props;
|
const { href } = child.props;
|
||||||
if (child.type.__ANT_ANCHOR_LINK && href) {
|
const { type } = child as any;
|
||||||
|
if (type.__ANT_ANCHOR_LINK && href) {
|
||||||
this.anchorHelper.addLink(href);
|
this.anchorHelper.addLink(href);
|
||||||
return React.cloneElement(child, {
|
return React.cloneElement(child, {
|
||||||
onClick: this.clickAnchorLink,
|
onClick: this.clickAnchorLink,
|
||||||
|
Loading…
Reference in New Issue
Block a user