This is an automated email from the ASF dual-hosted git repository.
erikrit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new 4b3d6d1 chore: migrated Menu component to tsx (#10426)
4b3d6d1 is described below
commit 4b3d6d1fbdd7622439c3133bdc8d4f448593f773
Author: Tanmay Laud <31733620+tanmayl...@users.noreply.github.com>
AuthorDate: Mon Jul 27 21:33:24 2020 +0530
chore: migrated Menu component to tsx (#10426)
* migrated LanguagePicker.jsx to tsx
* Migrated Menu.jsx to tsx
* migrated MenuObject.jsx to tsx
* migrated NewMenu.jsx to tsx
* Migrated UserMenu.jsx to tsx
* removed unnecessary export from UserMenu
* added language definition in LanguagePicker
* removed unnecessary exports from Menu.tsx
* used typeof guard for childs
* changed LanguageProps to Languages
* removed unnecessary type casting
* fixed linting errors
---
.../{LanguagePicker.jsx => LanguagePicker.tsx} | 24 +++++---
.../src/components/Menu/{Menu.jsx => Menu.tsx} | 62 ++++++++++-----------
.../Menu/{MenuObject.jsx => MenuObject.tsx} | 65 +++++++++++++---------
.../components/Menu/{NewMenu.jsx => NewMenu.tsx} | 4 --
.../components/Menu/{UserMenu.jsx => UserMenu.tsx} | 17 +++---
5 files changed, 92 insertions(+), 80 deletions(-)
diff --git a/superset-frontend/src/components/Menu/LanguagePicker.jsx
b/superset-frontend/src/components/Menu/LanguagePicker.tsx
similarity index 84%
rename from superset-frontend/src/components/Menu/LanguagePicker.jsx
rename to superset-frontend/src/components/Menu/LanguagePicker.tsx
index d2806c9..d634265 100644
--- a/superset-frontend/src/components/Menu/LanguagePicker.jsx
+++ b/superset-frontend/src/components/Menu/LanguagePicker.tsx
@@ -17,15 +17,25 @@
* under the License.
*/
import React from 'react';
-import PropTypes from 'prop-types';
import { NavDropdown, MenuItem } from 'react-bootstrap';
-const propTypes = {
- locale: PropTypes.string.isRequired,
- languages: PropTypes.object.isRequired,
-};
+export interface Languages {
+ [key: string]: {
+ flag: string;
+ url: string;
+ name: string;
+ };
+}
+
+interface LanguagePickerProps {
+ locale: string;
+ languages: Languages;
+}
-export default function LanguagePicker({ locale, languages }) {
+export default function LanguagePicker({
+ locale,
+ languages,
+}: LanguagePickerProps) {
return (
<NavDropdown
id="locale-dropdown"
@@ -49,5 +59,3 @@ export default function LanguagePicker({ locale, languages })
{
</NavDropdown>
);
}
-
-LanguagePicker.propTypes = propTypes;
diff --git a/superset-frontend/src/components/Menu/Menu.jsx
b/superset-frontend/src/components/Menu/Menu.tsx
similarity index 77%
rename from superset-frontend/src/components/Menu/Menu.jsx
rename to superset-frontend/src/components/Menu/Menu.tsx
index 0902c8d..193347f 100644
--- a/superset-frontend/src/components/Menu/Menu.jsx
+++ b/superset-frontend/src/components/Menu/Menu.tsx
@@ -17,41 +17,43 @@
* under the License.
*/
import React from 'react';
-import PropTypes from 'prop-types';
import { t } from '@superset-ui/translation';
import { Nav, Navbar, NavItem } from 'react-bootstrap';
import styled from '@superset-ui/style';
-import MenuObject from './MenuObject';
+import MenuObject, { MenuObjectProps } from './MenuObject';
import NewMenu from './NewMenu';
import UserMenu from './UserMenu';
-import LanguagePicker from './LanguagePicker';
+import LanguagePicker, { Languages } from './LanguagePicker';
import './Menu.less';
-const propTypes = {
- data: PropTypes.shape({
- menu: PropTypes.arrayOf(PropTypes.object).isRequired,
- brand: PropTypes.shape({
- path: PropTypes.string.isRequired,
- icon: PropTypes.string.isRequired,
- alt: PropTypes.string.isRequired,
- width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
- .isRequired,
- }).isRequired,
- navbar_right: PropTypes.shape({
- bug_report_url: PropTypes.string,
- version_string: PropTypes.string,
- version_sha: PropTypes.string,
- documentation_url: PropTypes.string,
- languages: PropTypes.object,
- show_language_picker: PropTypes.bool.isRequired,
- user_is_anonymous: PropTypes.bool.isRequired,
- user_info_url: PropTypes.string.isRequired,
- user_login_url: PropTypes.string.isRequired,
- user_logout_url: PropTypes.string.isRequired,
- locale: PropTypes.string.isRequired,
- }).isRequired,
- }).isRequired,
-};
+interface BrandProps {
+ path: string;
+ icon: string;
+ alt: string;
+ width: string | number;
+}
+
+interface NavBarProps {
+ bug_report_url?: string;
+ version_string?: string;
+ version_sha?: string;
+ documentation_url?: string;
+ languages: Languages;
+ show_language_picker: boolean;
+ user_is_anonymous: boolean;
+ user_info_url: string;
+ user_login_url: string;
+ user_logout_url: string;
+ locale: string;
+}
+
+export interface MenuProps {
+ data: {
+ menu: MenuObjectProps[];
+ brand: BrandProps;
+ navbar_right: NavBarProps;
+ };
+}
const StyledHeader = styled.header`
.navbar-brand {
@@ -85,7 +87,7 @@ const StyledHeader = styled.header`
export default function Menu({
data: { menu, brand, navbar_right: navbarRight },
-}) {
+}: MenuProps) {
return (
<StyledHeader className="top" id="main-menu">
<Navbar inverse fluid staticTop role="navigation">
@@ -149,5 +151,3 @@ export default function Menu({
</StyledHeader>
);
}
-
-Menu.propTypes = propTypes;
diff --git a/superset-frontend/src/components/Menu/MenuObject.jsx
b/superset-frontend/src/components/Menu/MenuObject.tsx
similarity index 57%
rename from superset-frontend/src/components/Menu/MenuObject.jsx
rename to superset-frontend/src/components/Menu/MenuObject.tsx
index ed30b9a..8de30ed 100644
--- a/superset-frontend/src/components/Menu/MenuObject.jsx
+++ b/superset-frontend/src/components/Menu/MenuObject.tsx
@@ -17,20 +17,30 @@
* under the License.
*/
import React from 'react';
-import PropTypes from 'prop-types';
import { NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
-const propTypes = {
- label: PropTypes.string.isRequired,
- icon: PropTypes.string.isRequired,
- index: PropTypes.number.isRequired,
- url: PropTypes.string,
- childs: PropTypes.arrayOf(
- PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
- ),
-};
+interface MenuObjectChildProps {
+ label: string;
+ icon: string;
+ index: number;
+ url?: string;
+}
+
+export interface MenuObjectProps {
+ label?: string;
+ icon?: string;
+ index: number;
+ url?: string;
+ childs?: (MenuObjectChildProps | string)[];
+}
-export default function MenuObject({ label, icon, childs, url, index }) {
+export default function MenuObject({
+ label,
+ icon,
+ childs,
+ url,
+ index,
+}: MenuObjectProps) {
if (url) {
return (
<NavItem eventKey={index} href={url}>
@@ -51,22 +61,23 @@ export default function MenuObject({ label, icon, childs,
url, index }) {
eventKey={index}
title={navTitle}
>
- {childs.map((child, index1) =>
- child === '-' ? (
- <MenuItem key={`$${index1}`} divider />
- ) : (
- <MenuItem
- key={`${child.label}`}
- href={child.url}
- eventKey={parseFloat(`${index}.${index1}`)}
- >
- <i className={`fa ${child.icon}`} />
- {child.label}
- </MenuItem>
- ),
- )}
+ {childs?.map((child: MenuObjectChildProps | string, index1: number) => {
+ if (typeof child === 'string' && child === '-') {
+ return <MenuItem key={`$${index1}`} divider />;
+ } else if (typeof child !== 'string') {
+ return (
+ <MenuItem
+ key={`${child.label}`}
+ href={child.url}
+ eventKey={parseFloat(`${index}.${index1}`)}
+ >
+ <i className={`fa ${child.icon}`} />
+ {child.label}
+ </MenuItem>
+ );
+ }
+ return null;
+ })}
</NavDropdown>
);
}
-
-MenuObject.propTypes = propTypes;
diff --git a/superset-frontend/src/components/Menu/NewMenu.jsx
b/superset-frontend/src/components/Menu/NewMenu.tsx
similarity index 97%
rename from superset-frontend/src/components/Menu/NewMenu.jsx
rename to superset-frontend/src/components/Menu/NewMenu.tsx
index 92b939a..1973652 100644
--- a/superset-frontend/src/components/Menu/NewMenu.jsx
+++ b/superset-frontend/src/components/Menu/NewMenu.tsx
@@ -19,8 +19,6 @@
import React from 'react';
import { t } from '@superset-ui/translation';
-const propTypes = {};
-
const buttonStyle = {
marginTop: '12px',
marginRight: '30px',
@@ -60,5 +58,3 @@ export default function NewMenu() {
</li>
);
}
-
-NewMenu.propTypes = propTypes;
diff --git a/superset-frontend/src/components/Menu/UserMenu.jsx
b/superset-frontend/src/components/Menu/UserMenu.tsx
similarity index 86%
rename from superset-frontend/src/components/Menu/UserMenu.jsx
rename to superset-frontend/src/components/Menu/UserMenu.tsx
index d70c579..4712d49 100644
--- a/superset-frontend/src/components/Menu/UserMenu.jsx
+++ b/superset-frontend/src/components/Menu/UserMenu.tsx
@@ -17,23 +17,22 @@
* under the License.
*/
import React from 'react';
-import PropTypes from 'prop-types';
import { NavDropdown, MenuItem } from 'react-bootstrap';
import { t } from '@superset-ui/translation';
-const propTypes = {
- userInfoUrl: PropTypes.string.isRequired,
- userLogoutUrl: PropTypes.string.isRequired,
- versionString: PropTypes.string,
- versionSha: PropTypes.string,
-};
+interface UserMenuProps {
+ userInfoUrl: string;
+ userLogoutUrl: string;
+ versionString?: string;
+ versionSha?: string;
+}
export default function UserMenu({
userInfoUrl,
userLogoutUrl,
versionString,
versionSha,
-}) {
+}: UserMenuProps) {
return (
<NavDropdown
id="user-menu-dropwn"
@@ -60,5 +59,3 @@ export default function UserMenu({
</NavDropdown>
);
}
-
-UserMenu.propTypes = propTypes;
