;
}
-HeaderArea.propTypes = {
- content: PropTypes.oneOfType([
- PropTypes.node,
- PropTypes.oneOf([false]),
- ]),
-};
-
HeaderArea.defaultProps = {
content: undefined,
};
+type OwnHeaderRowProps = {
+ left?: any; // TODO: HeaderArea.propTypes.content
+ center?: any; // TODO: HeaderArea.propTypes.content
+ right?: any; // TODO: HeaderArea.propTypes.content
+};
+
+type HeaderRowProps = OwnHeaderRowProps & typeof HeaderRow.defaultProps;
+
// --------------------
// Main Component
// --------------------
function HeaderRow({
- left,
- center,
- right,
+ left, center, right,
// React props
- className,
- children,
- ...otherProps
-}) {
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'className' does not exist on type 'Heade... Remove this comment to see the full error message
+ className, children, ...otherProps
+}: HeaderRowProps) {
const rootClassName = classNames(
BEM.root.toString(),
className,
@@ -57,20 +60,17 @@ function HeaderRow({
return (
+ {/* @ts-expect-error ts-migrate(2322) FIXME: Property 'className' does not exist on type 'Intri... Remove this comment to see the full error message */}
+ {/* @ts-expect-error ts-migrate(2322) FIXME: Property 'className' does not exist on type 'Intri... Remove this comment to see the full error message */}
+ {/* @ts-expect-error ts-migrate(2322) FIXME: Property 'className' does not exist on type 'Intri... Remove this comment to see the full error message */}
{children}
);
}
-HeaderRow.propTypes = {
- left: HeaderArea.propTypes.content,
- center: HeaderArea.propTypes.content,
- right: HeaderArea.propTypes.content,
-};
-
HeaderRow.defaultProps = {
left: undefined,
center: undefined,
diff --git a/packages/core/src/Icon.js b/packages/core/src/Icon.tsx
similarity index 80%
rename from packages/core/src/Icon.js
rename to packages/core/src/Icon.tsx
index dfcad2be..390860a2 100644
--- a/packages/core/src/Icon.js
+++ b/packages/core/src/Icon.tsx
@@ -1,5 +1,4 @@
import React from 'react';
-import PropTypes from 'prop-types';
import classNames from 'classnames';
import icBEM from './utils/icBEM';
@@ -16,6 +15,7 @@ const ROOT_BEM = icBEM(COMPONENT_NAME);
const GRAY = 'gray';
const BLUE = 'blue';
const RED = 'red';
+const colors = [GRAY, BLUE, RED] as const;
const COLORS = {
blue: '#45b0e6',
@@ -41,15 +41,22 @@ function getSvgFill({ colorType, wrapperProps }) {
return null;
}
+type OwnProps = {
+ type: string;
+ color?: typeof colors;
+ large?: boolean;
+ spinning?: boolean;
+ svgProps?: {
+ [key: string]: any;
+ };
+};
+
+type Props = OwnProps & typeof Icon.defaultProps;
+
function Icon({
- type,
- color,
- large,
- spinning,
- className,
- svgProps,
- ...otherProps
-}) {
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'className' does not exist on type 'Props... Remove this comment to see the full error message
+ type, color, large, spinning, className, svgProps, ...otherProps
+}: Props) {
let bemClass = ROOT_BEM
.modifier('large', large)
.modifier('spin', spinning);
@@ -80,21 +87,12 @@ function Icon({
+ {...otherProps}>
{SvgComponent && }
);
}
-Icon.propTypes = {
- type: PropTypes.string.isRequired,
- color: PropTypes.oneOf([GRAY, BLUE, RED]),
- large: PropTypes.bool,
- spinning: PropTypes.bool,
- svgProps: PropTypes.objectOf(PropTypes.any),
-};
-
Icon.defaultProps = {
color: undefined,
large: false,
diff --git a/packages/core/src/IconButton.js b/packages/core/src/IconButton.tsx
similarity index 51%
rename from packages/core/src/IconButton.js
rename to packages/core/src/IconButton.tsx
index a6a6144e..ac898ec2 100644
--- a/packages/core/src/IconButton.js
+++ b/packages/core/src/IconButton.tsx
@@ -1,13 +1,22 @@
import React from 'react';
-import PropTypes from 'prop-types';
import classNames from 'classnames';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
import EnhancedPropTypes from './utils/enhancedPropTypes';
import icBEM from './utils/icBEM';
import Button, { COMPONENT_NAME } from './Button';
import IconLayout from './IconLayout';
+type OwnProps = {
+ icon: string | React.ReactElement;
+ tinted?: boolean;
+ color?: any; // TODO: EnhancedPropTypes.isEmpty
+ solid?: any; // TODO: EnhancedPropTypes.isEmpty
+};
+
+type Props = OwnProps & typeof IconButton.defaultProps;
+
/**
*
* ===
@@ -17,14 +26,11 @@ import IconLayout from './IconLayout';
* However, `color` & `solid` props are invalid in ``
*/
function IconButton({
- icon,
- tinted,
- color,
- solid,
+ icon, tinted, color, solid,
// React props
- className,
- ...buttonProps
-}) {
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'className' does not exist on type 'Props... Remove this comment to see the full error message
+ className, ...buttonProps
+}: Props) {
const bemClass = icBEM(COMPONENT_NAME)
.modifier('icon-only')
.modifier('tinted', tinted)
@@ -33,22 +39,14 @@ function IconButton({
const rootClass = classNames(bemClass, className);
return (
+ // @ts-expect-error ts-migrate(2769) FIXME: Property 'className' does not exist on type 'Intri... Remove this comment to see the full error message
);
}
-IconButton.propTypes = {
- icon: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.element
- ]).isRequired,
- tinted: PropTypes.bool,
- color: EnhancedPropTypes.isEmpty,
- solid: EnhancedPropTypes.isEmpty,
-};
-
IconButton.defaultProps = {
tinted: false,
color: undefined,
diff --git a/packages/core/src/IconCheckbox.js b/packages/core/src/IconCheckbox.tsx
similarity index 79%
rename from packages/core/src/IconCheckbox.js
rename to packages/core/src/IconCheckbox.tsx
index 368f0f43..da052a7e 100644
--- a/packages/core/src/IconCheckbox.js
+++ b/packages/core/src/IconCheckbox.tsx
@@ -10,6 +10,7 @@ import Checkbox, { CHECKBOX_BUTTON } from './Checkbox';
* `` is a variant of ``.
*/
function IconCheckbox(props) {
+ // @ts-expect-error ts-migrate(2769) FIXME: Property 'icon' does not exist on type 'IntrinsicA... Remove this comment to see the full error message
const buttonWithStatus = ;
return (
diff --git a/packages/core/src/IconLayout.js b/packages/core/src/IconLayout.tsx
similarity index 61%
rename from packages/core/src/IconLayout.js
rename to packages/core/src/IconLayout.tsx
index 0160e710..060ff700 100644
--- a/packages/core/src/IconLayout.js
+++ b/packages/core/src/IconLayout.tsx
@@ -1,6 +1,6 @@
import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
import withStatus, { withStatusPropTypes } from './mixins/withStatus';
import wrapIfNotElement from './utils/wrapIfNotElement';
import prefixClass from './utils/prefixClass';
@@ -11,29 +11,32 @@ import Icon from './Icon';
import { STATUS_POSITION } from './StatusIcon';
-export const COMPONENT_NAME = prefixClass('iconlayout'); // Prevent from affected by 'gyp-icon-*' styles
+export const COMPONENT_NAME = prefixClass('iconlayout');
+
+/*
+(ts-migrate) TODO: Migrate the remaining prop types
+...withStatusPropTypes
+*/
+type OwnProps = {
+ icon: string | React.ReactElement;
+ tooltip?: boolean;
+};
+
+type State = any;
+
+type Props = OwnProps & typeof IconLayout.defaultProps; // Prevent from affected by 'gyp-icon-*' styles
/**
* needs to be a valid React Component to maintain a ref
* to its container node, so an anchored can find its position.
*/
-class IconLayout extends PureComponent {
- static propTypes = {
- icon: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.element
- ]).isRequired,
- tooltip: PropTypes.bool,
-
- ...withStatusPropTypes,
- // statusIcon,
- // errorMsg,
- };
-
+class IconLayout extends PureComponent {
static defaultProps = {
tooltip: true,
};
+ nodeRef: any;
+
state = {
showTooltip: false,
};
@@ -47,6 +50,7 @@ class IconLayout extends PureComponent {
}
renderTooltip() {
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'errorMsg' does not exist on type 'Readon... Remove this comment to see the full error message
const { tooltip, errorMsg } = this.props;
if (!errorMsg || !tooltip) {
@@ -59,14 +63,17 @@ class IconLayout extends PureComponent {
*/
return (
+ {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'errorMsg' does not exist on type 'Readon... Remove this comment to see the full error message */}
{this.props.errorMsg}
);
}
render() {
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'statusIcon' does not exist on type 'Read... Remove this comment to see the full error message
const { icon, statusIcon } = this.props;
const { showTooltip } = this.state;
const iconElement = wrapIfNotElement(icon, { with: Icon, via: 'type' });
@@ -85,5 +92,6 @@ class IconLayout extends PureComponent {
}
}
+// @ts-expect-error ts-migrate(2345) FIXME: Object literal may only specify known properties, ... Remove this comment to see the full error message
export default withStatus({ position: STATUS_POSITION.CORNER })(IconLayout);
export { IconLayout as PureIconLayout };
diff --git a/packages/core/src/InfiniteScroll.js b/packages/core/src/InfiniteScroll.tsx
similarity index 83%
rename from packages/core/src/InfiniteScroll.js
rename to packages/core/src/InfiniteScroll.tsx
index 314141c2..51e370fb 100644
--- a/packages/core/src/InfiniteScroll.js
+++ b/packages/core/src/InfiniteScroll.tsx
@@ -1,5 +1,4 @@
import React, { PureComponent, isValidElement } from 'react';
-import PropTypes from 'prop-types';
import classNames from 'classnames';
import documentOffset from 'document-offset';
@@ -23,6 +22,20 @@ const FILL_SPACE_TYPE = {
MANUAL: 'manual'
};
+type OwnProps = {
+ onLoadMore: (...args: any[]) => any;
+ threshold?: number;
+ isLoading?: boolean;
+ hasMore?: boolean;
+ usePageAsContainer?: boolean;
+ fillSpace?: any; // TODO: PropTypes.oneOf(Object.values(FILL_SPACE_TYPE))
+ loadingLabel?: React.ReactNode;
+ showMoreButton?: React.ReactNode;
+ noNewestButton?: React.ReactNode;
+};
+
+type Props = OwnProps & typeof InfiniteScroll.defaultProps;
+
/**
*
@@ -32,21 +45,7 @@ const FILL_SPACE_TYPE = {
*
* @ref https://github.com/CassetteRocks/react-infinite-scroller
*/
-class InfiniteScroll extends PureComponent {
- static propTypes = {
- onLoadMore: PropTypes.func.isRequired,
- threshold: PropTypes.number, // Distance in px before the end of items
- isLoading: PropTypes.bool,
- hasMore: PropTypes.bool,
- usePageAsContainer: PropTypes.bool,
- fillSpace: PropTypes.oneOf(Object.values(FILL_SPACE_TYPE)),
-
- // Footer children
- loadingLabel: PropTypes.node,
- showMoreButton: PropTypes.node,
- noNewestButton: PropTypes.node
- };
-
+class InfiniteScroll extends PureComponent {
static defaultProps = {
threshold: 100,
isLoading: false,
@@ -59,13 +58,19 @@ class InfiniteScroll extends PureComponent {
noNewestButton: null
}
+ scrollContainer: any;
+
+ scrollNode: any;
+
componentDidMount() {
this.attachScrollListener();
+ // @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
this.loadMoreToFillSpace();
}
componentDidUpdate() {
// Auto trigger onLoadMore
+ // @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
this.loadMoreToFillSpace();
}
@@ -123,6 +128,7 @@ class InfiniteScroll extends PureComponent {
const windowBodyElement = document.documentElement
|| document.body.parentNode
|| document.body;
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'scrollTop' does not exist on type 'Node ... Remove this comment to see the full error message
return window.pageYOffset || windowBodyElement.scrollTop;
}
@@ -244,6 +250,7 @@ class InfiniteScroll extends PureComponent {
return (