From 68de5f07c7f0d25766427070e118a9f5635b46cc Mon Sep 17 00:00:00 2001 From: sperry94 Date: Mon, 25 Mar 2019 21:17:12 -0600 Subject: [PATCH 1/2] [docs] Add TS demos for Tabs components --- docs/src/pages/demos/tabs/CenteredTabs.tsx | 38 +++++ docs/src/pages/demos/tabs/CustomizedTabs.tsx | 133 ++++++++++++++++++ docs/src/pages/demos/tabs/DisabledTabs.tsx | 24 ++++ docs/src/pages/demos/tabs/FullWidthTabs.tsx | 76 ++++++++++ docs/src/pages/demos/tabs/IconLabelTabs.tsx | 42 ++++++ docs/src/pages/demos/tabs/IconTabs.tsx | 42 ++++++ docs/src/pages/demos/tabs/NavTabs.tsx | 68 +++++++++ .../demos/tabs/ScrollableTabsButtonAuto.tsx | 72 ++++++++++ .../demos/tabs/ScrollableTabsButtonForce.tsx | 79 +++++++++++ .../tabs/ScrollableTabsButtonPrevent.tsx | 72 ++++++++++ docs/src/pages/demos/tabs/SimpleTabs.tsx | 56 ++++++++ .../src/pages/demos/tabs/TabsWrappedLabel.tsx | 56 ++++++++ packages/material-ui/src/Tab/Tab.d.ts | 2 + 13 files changed, 760 insertions(+) create mode 100644 docs/src/pages/demos/tabs/CenteredTabs.tsx create mode 100644 docs/src/pages/demos/tabs/CustomizedTabs.tsx create mode 100644 docs/src/pages/demos/tabs/DisabledTabs.tsx create mode 100644 docs/src/pages/demos/tabs/FullWidthTabs.tsx create mode 100644 docs/src/pages/demos/tabs/IconLabelTabs.tsx create mode 100644 docs/src/pages/demos/tabs/IconTabs.tsx create mode 100644 docs/src/pages/demos/tabs/NavTabs.tsx create mode 100644 docs/src/pages/demos/tabs/ScrollableTabsButtonAuto.tsx create mode 100644 docs/src/pages/demos/tabs/ScrollableTabsButtonForce.tsx create mode 100644 docs/src/pages/demos/tabs/ScrollableTabsButtonPrevent.tsx create mode 100644 docs/src/pages/demos/tabs/SimpleTabs.tsx create mode 100644 docs/src/pages/demos/tabs/TabsWrappedLabel.tsx diff --git a/docs/src/pages/demos/tabs/CenteredTabs.tsx b/docs/src/pages/demos/tabs/CenteredTabs.tsx new file mode 100644 index 00000000000000..07a4ccd5463939 --- /dev/null +++ b/docs/src/pages/demos/tabs/CenteredTabs.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import Paper from '@material-ui/core/Paper'; +import Tabs from '@material-ui/core/Tabs'; +import Tab from '@material-ui/core/Tab'; + +const useStyles = makeStyles({ + root: { + flexGrow: 1, + }, +}); + +function CenteredTabs() { + const classes = useStyles(); + const [value, setValue] = React.useState(0); + + function handleChange(event: React.ChangeEvent<{}>, newValue: number) { + setValue(newValue); + } + + return ( + + + + + + + + ); +} + +export default CenteredTabs; diff --git a/docs/src/pages/demos/tabs/CustomizedTabs.tsx b/docs/src/pages/demos/tabs/CustomizedTabs.tsx new file mode 100644 index 00000000000000..12b4a3f355068e --- /dev/null +++ b/docs/src/pages/demos/tabs/CustomizedTabs.tsx @@ -0,0 +1,133 @@ +import React from 'react'; +import { makeStyles, withStyles } from '@material-ui/styles'; +import Tabs from '@material-ui/core/Tabs'; +import Tab from '@material-ui/core/Tab'; +import Typography from '@material-ui/core/Typography'; +import { Theme } from '@material-ui/core/styles'; + +interface StyledTabsProps { + value: number; + onChange: (event: React.ChangeEvent<{}>, newValue: number) => void; +} + +const StyledTabs = withStyles({ + indicator: { + display: 'flex', + justifyContent: 'center', + backgroundColor: 'transparent', + '& > div': { + maxWidth: 40, + width: '100%', + backgroundColor: '#635ee7', + }, + }, +})((props: StyledTabsProps) => }} />); + +interface StyledTabProps { + label: string; +} + +const StyledTab = withStyles((theme: Theme) => ({ + root: { + textTransform: 'initial', + color: '#fff', + fontWeight: theme.typography.fontWeightRegular, + fontSize: theme.typography.pxToRem(15), + marginRight: theme.spacing(1), + }, +}))((props: StyledTabProps) => ); + +const useStyles = makeStyles((theme: Theme) => ({ + root: { + flexGrow: 1, + backgroundColor: theme.palette.background.paper, + }, + tabsRoot: { + borderBottom: '1px solid #e8e8e8', + }, + tabsIndicator: { + backgroundColor: '#1890ff', + }, + tabRoot: { + textTransform: 'initial', + minWidth: 72, + fontWeight: theme.typography.fontWeightRegular, + marginRight: theme.spacing(4), + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + '&:hover': { + color: '#40a9ff', + opacity: 1, + }, + '&$tabSelected': { + color: '#1890ff', + fontWeight: theme.typography.fontWeightMedium, + }, + '&:focus': { + color: '#40a9ff', + }, + }, + tabSelected: {}, + typography: { + padding: theme.spacing(3), + }, + demo2: { + backgroundColor: '#2e1534', + }, +})); + +function CustomizedTabs() { + const classes = useStyles(); + const [value, setValue] = React.useState(0); + + function handleChange(event: React.ChangeEvent<{}>, newValue: number) { + setValue(newValue); + } + + return ( +
+ + + + + + Ant Design UI powered by Material-UI +
+ + + + + + +
+
+ ); +} + +export default CustomizedTabs; diff --git a/docs/src/pages/demos/tabs/DisabledTabs.tsx b/docs/src/pages/demos/tabs/DisabledTabs.tsx new file mode 100644 index 00000000000000..ece1e6a6ae933e --- /dev/null +++ b/docs/src/pages/demos/tabs/DisabledTabs.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import Paper from '@material-ui/core/Paper'; +import Tabs from '@material-ui/core/Tabs'; +import Tab from '@material-ui/core/Tab'; + +function DisabledTabs() { + const [value, setValue] = React.useState(2); + + function handleChange(event: React.ChangeEvent<{}>, newValue: number) { + setValue(newValue); + } + + return ( + + + + + + + + ); +} + +export default DisabledTabs; diff --git a/docs/src/pages/demos/tabs/FullWidthTabs.tsx b/docs/src/pages/demos/tabs/FullWidthTabs.tsx new file mode 100644 index 00000000000000..19ada3b4603c2c --- /dev/null +++ b/docs/src/pages/demos/tabs/FullWidthTabs.tsx @@ -0,0 +1,76 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import SwipeableViews from 'react-swipeable-views'; +import { makeStyles, Theme, useTheme } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Tabs from '@material-ui/core/Tabs'; +import Tab from '@material-ui/core/Tab'; +import Typography from '@material-ui/core/Typography'; + +interface TabContainerProps { + children?: React.ReactNode; + dir?: string; +} + +function TabContainer({ children, dir }: TabContainerProps) { + return ( + + {children} + + ); +} + +TabContainer.propTypes = { + children: PropTypes.node.isRequired, + dir: PropTypes.string.isRequired, +}; + +const useStyles = makeStyles((theme: Theme) => ({ + root: { + backgroundColor: theme.palette.background.paper, + width: 500, + }, +})); + +function FullWidthTabs() { + const classes = useStyles(); + const theme = useTheme(); + const [value, setValue] = React.useState(0); + + function handleChange(event: React.ChangeEvent<{}>, newValue: number) { + setValue(newValue); + } + + function handleChangeIndex(index: number) { + setValue(index); + } + + return ( +
+ + + + + + + + + Item One + Item Two + Item Three + +
+ ); +} + +export default FullWidthTabs; diff --git a/docs/src/pages/demos/tabs/IconLabelTabs.tsx b/docs/src/pages/demos/tabs/IconLabelTabs.tsx new file mode 100644 index 00000000000000..ca1da657799f15 --- /dev/null +++ b/docs/src/pages/demos/tabs/IconLabelTabs.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import Paper from '@material-ui/core/Paper'; +import { makeStyles } from '@material-ui/core/styles'; +import Tabs from '@material-ui/core/Tabs'; +import Tab from '@material-ui/core/Tab'; +import PhoneIcon from '@material-ui/icons/Phone'; +import FavoriteIcon from '@material-ui/icons/Favorite'; +import PersonPinIcon from '@material-ui/icons/PersonPin'; + +const useStyles = makeStyles({ + root: { + flexGrow: 1, + maxWidth: 500, + }, +}); + +function IconLabelTabs() { + const classes = useStyles(); + const [value, setValue] = React.useState(0); + + function handleChange(event: React.ChangeEvent<{}>, newValue: number) { + setValue(newValue); + } + + return ( + + + } label="RECENTS" /> + } label="FAVORITES" /> + } label="NEARBY" /> + + + ); +} + +export default IconLabelTabs; diff --git a/docs/src/pages/demos/tabs/IconTabs.tsx b/docs/src/pages/demos/tabs/IconTabs.tsx new file mode 100644 index 00000000000000..65f1e4fe95f04f --- /dev/null +++ b/docs/src/pages/demos/tabs/IconTabs.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import Paper from '@material-ui/core/Paper'; +import Tabs from '@material-ui/core/Tabs'; +import Tab from '@material-ui/core/Tab'; +import PhoneIcon from '@material-ui/icons/Phone'; +import FavoriteIcon from '@material-ui/icons/Favorite'; +import PersonPinIcon from '@material-ui/icons/PersonPin'; + +const useStyles = makeStyles({ + root: { + flexGrow: 1, + maxWidth: 500, + }, +}); + +function IconTabs() { + const classes = useStyles(); + const [value, setValue] = React.useState(0); + + function handleChange(event: React.ChangeEvent<{}>, newValue: number) { + setValue(newValue); + } + + return ( + + + } /> + } /> + } /> + + + ); +} + +export default IconTabs; diff --git a/docs/src/pages/demos/tabs/NavTabs.tsx b/docs/src/pages/demos/tabs/NavTabs.tsx new file mode 100644 index 00000000000000..8e543376d39a82 --- /dev/null +++ b/docs/src/pages/demos/tabs/NavTabs.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { makeStyles, Theme } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Tabs from '@material-ui/core/Tabs'; +import NoSsr from '@material-ui/core/NoSsr'; +import Tab from '@material-ui/core/Tab'; +import Typography from '@material-ui/core/Typography'; + +interface TabContainerProps { + children?: React.ReactNode; +} + +function TabContainer(props: TabContainerProps) { + return ( + + {props.children} + + ); +} + +TabContainer.propTypes = { + children: PropTypes.node.isRequired, +}; + +interface LinkTabProps { + label?: string; + href?: string; +} + +function LinkTab(props: LinkTabProps) { + return ) => event.preventDefault()} {...props} />; +} + +const useStyles = makeStyles((theme: Theme) => ({ + root: { + flexGrow: 1, + backgroundColor: theme.palette.background.paper, + }, +})); + +function NavTabs() { + const classes = useStyles(); + const [value, setValue] = React.useState(0); + + function handleChange(event: React.ChangeEvent<{}>, newValue: number) { + setValue(newValue); + } + + return ( + +
+ + + + + + + + {value === 0 && Page One} + {value === 1 && Page Two} + {value === 2 && Page Three} +
+ + ); +} + +export default NavTabs; diff --git a/docs/src/pages/demos/tabs/ScrollableTabsButtonAuto.tsx b/docs/src/pages/demos/tabs/ScrollableTabsButtonAuto.tsx new file mode 100644 index 00000000000000..457f9be6d9f3b9 --- /dev/null +++ b/docs/src/pages/demos/tabs/ScrollableTabsButtonAuto.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { makeStyles, Theme } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Tabs from '@material-ui/core/Tabs'; +import Tab from '@material-ui/core/Tab'; +import Typography from '@material-ui/core/Typography'; + +interface TabContainerProps { + children?: React.ReactNode; +} + +function TabContainer(props: TabContainerProps) { + return ( + + {props.children} + + ); +} + +TabContainer.propTypes = { + children: PropTypes.node.isRequired, +}; + +const useStyles = makeStyles((theme: Theme) => ({ + root: { + flexGrow: 1, + width: '100%', + backgroundColor: theme.palette.background.paper, + }, +})); + +function ScrollableTabsButtonAuto() { + const classes = useStyles(); + const [value, setValue] = React.useState(0); + + function handleChange(event: React.ChangeEvent<{}>, newValue: number) { + setValue(newValue); + } + + return ( +
+ + + + + + + + + + + + {value === 0 && Item One} + {value === 1 && Item Two} + {value === 2 && Item Three} + {value === 3 && Item Four} + {value === 4 && Item Five} + {value === 5 && Item Six} + {value === 6 && Item Seven} +
+ ); +} + +export default ScrollableTabsButtonAuto; diff --git a/docs/src/pages/demos/tabs/ScrollableTabsButtonForce.tsx b/docs/src/pages/demos/tabs/ScrollableTabsButtonForce.tsx new file mode 100644 index 00000000000000..0e86ba77b16cff --- /dev/null +++ b/docs/src/pages/demos/tabs/ScrollableTabsButtonForce.tsx @@ -0,0 +1,79 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { makeStyles, Theme } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Tabs from '@material-ui/core/Tabs'; +import Tab from '@material-ui/core/Tab'; +import PhoneIcon from '@material-ui/icons/Phone'; +import FavoriteIcon from '@material-ui/icons/Favorite'; +import PersonPinIcon from '@material-ui/icons/PersonPin'; +import HelpIcon from '@material-ui/icons/Help'; +import ShoppingBasket from '@material-ui/icons/ShoppingBasket'; +import ThumbDown from '@material-ui/icons/ThumbDown'; +import ThumbUp from '@material-ui/icons/ThumbUp'; +import Typography from '@material-ui/core/Typography'; + +interface TabContainerProps { + children?: React.ReactNode; +} + +function TabContainer(props: TabContainerProps) { + return ( + + {props.children} + + ); +} + +TabContainer.propTypes = { + children: PropTypes.node.isRequired, +}; + +const useStyles = makeStyles((theme: Theme) => ({ + root: { + flexGrow: 1, + width: '100%', + backgroundColor: theme.palette.background.paper, + }, +})); + +function ScrollableTabsButtonForce() { + const classes = useStyles(); + const [value, setValue] = React.useState(0); + + function handleChange(event: React.ChangeEvent<{}>, newValue: number) { + setValue(newValue); + } + + return ( +
+ + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + {value === 0 && Item One} + {value === 1 && Item Two} + {value === 2 && Item Three} + {value === 3 && Item Four} + {value === 4 && Item Five} + {value === 5 && Item Six} + {value === 6 && Item Seven} +
+ ); +} + +export default ScrollableTabsButtonForce; diff --git a/docs/src/pages/demos/tabs/ScrollableTabsButtonPrevent.tsx b/docs/src/pages/demos/tabs/ScrollableTabsButtonPrevent.tsx new file mode 100644 index 00000000000000..82aafa5155fa4a --- /dev/null +++ b/docs/src/pages/demos/tabs/ScrollableTabsButtonPrevent.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { makeStyles, Theme } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Tabs from '@material-ui/core/Tabs'; +import Tab from '@material-ui/core/Tab'; +import PhoneIcon from '@material-ui/icons/Phone'; +import FavoriteIcon from '@material-ui/icons/Favorite'; +import PersonPinIcon from '@material-ui/icons/PersonPin'; +import HelpIcon from '@material-ui/icons/Help'; +import ShoppingBasket from '@material-ui/icons/ShoppingBasket'; +import ThumbDown from '@material-ui/icons/ThumbDown'; +import ThumbUp from '@material-ui/icons/ThumbUp'; +import Typography from '@material-ui/core/Typography'; + +interface TabContainerProps { + children?: React.ReactNode; +} + +function TabContainer(props: TabContainerProps) { + return ( + + {props.children} + + ); +} + +TabContainer.propTypes = { + children: PropTypes.node.isRequired, +}; + +const useStyles = makeStyles((theme: Theme) => ({ + root: { + flexGrow: 1, + width: '100%', + backgroundColor: theme.palette.background.paper, + }, +})); + +function ScrollableTabsButtonPrevent() { + const classes = useStyles(); + const [value, setValue] = React.useState(0); + + function handleChange(event: React.ChangeEvent<{}>, newValue: number) { + setValue(newValue); + } + + return ( +
+ + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + {value === 0 && Item One} + {value === 1 && Item Two} + {value === 2 && Item Three} + {value === 3 && Item Four} + {value === 4 && Item Five} + {value === 5 && Item Six} + {value === 6 && Item Seven} +
+ ); +} + +export default ScrollableTabsButtonPrevent; diff --git a/docs/src/pages/demos/tabs/SimpleTabs.tsx b/docs/src/pages/demos/tabs/SimpleTabs.tsx new file mode 100644 index 00000000000000..c17e44d3fd37af --- /dev/null +++ b/docs/src/pages/demos/tabs/SimpleTabs.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { makeStyles, Theme } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Tabs from '@material-ui/core/Tabs'; +import Tab from '@material-ui/core/Tab'; +import Typography from '@material-ui/core/Typography'; + +interface TabContainerProps { + children?: React.ReactNode; +} + +function TabContainer(props: TabContainerProps) { + return ( + + {props.children} + + ); +} + +TabContainer.propTypes = { + children: PropTypes.node.isRequired, +}; + +const useStyles = makeStyles((theme: Theme) => ({ + root: { + flexGrow: 1, + backgroundColor: theme.palette.background.paper, + }, +})); + +function SimpleTabs() { + const classes = useStyles(); + const [value, setValue] = React.useState(0); + + function handleChange(event: React.ChangeEvent<{}>, newValue: number) { + setValue(newValue); + } + + return ( +
+ + + + + + + + {value === 0 && Item One} + {value === 1 && Item Two} + {value === 2 && Item Three} +
+ ); +} + +export default SimpleTabs; diff --git a/docs/src/pages/demos/tabs/TabsWrappedLabel.tsx b/docs/src/pages/demos/tabs/TabsWrappedLabel.tsx new file mode 100644 index 00000000000000..ce55a44e434b6f --- /dev/null +++ b/docs/src/pages/demos/tabs/TabsWrappedLabel.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { makeStyles, Theme } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Tabs from '@material-ui/core/Tabs'; +import Tab from '@material-ui/core/Tab'; +import Typography from '@material-ui/core/Typography'; + +interface TabContainerProps { + children?: React.ReactNode; +} + +function TabContainer(props: TabContainerProps) { + return ( + + {props.children} + + ); +} + +TabContainer.propTypes = { + children: PropTypes.node.isRequired, +}; + +const useStyles = makeStyles((theme: Theme) => ({ + root: { + flexGrow: 1, + backgroundColor: theme.palette.background.paper, + }, +})); + +function TabsWrappedLabel() { + const classes = useStyles(); + const [value, setValue] = React.useState('one'); + + function handleChange(event: React.ChangeEvent<{}>, newValue: string) { + setValue(newValue); + } + + return ( +
+ + + + + + + + {value === 'one' && Item One} + {value === 'two' && Item Two} + {value === 'three' && Item Three} +
+ ); +} + +export default TabsWrappedLabel; diff --git a/packages/material-ui/src/Tab/Tab.d.ts b/packages/material-ui/src/Tab/Tab.d.ts index 51c23cada5b647..dec5bb06a450b4 100644 --- a/packages/material-ui/src/Tab/Tab.d.ts +++ b/packages/material-ui/src/Tab/Tab.d.ts @@ -7,6 +7,7 @@ declare const Tab: ExtendButtonBase<{ disabled?: boolean; fullWidth?: boolean; icon?: string | React.ReactElement; + indicator?: React.ReactNode; value?: any; label?: React.ReactNode; onChange?: (event: React.ChangeEvent<{ checked: boolean }>, value: any) => void; @@ -14,6 +15,7 @@ declare const Tab: ExtendButtonBase<{ selected?: boolean; style?: React.CSSProperties; textColor?: string | 'secondary' | 'primary' | 'inherit'; + wrapped?: boolean; }; defaultComponent: 'div'; classKey: TabClassKey; From 326bd1931a273d28a4e46f75f42351e3dfde4835 Mon Sep 17 00:00:00 2001 From: sperry94 Date: Mon, 25 Mar 2019 21:22:52 -0600 Subject: [PATCH 2/2] running prettier for NavTabs --- docs/src/pages/demos/tabs/NavTabs.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/src/pages/demos/tabs/NavTabs.tsx b/docs/src/pages/demos/tabs/NavTabs.tsx index 8e543376d39a82..752e9c28b623c5 100644 --- a/docs/src/pages/demos/tabs/NavTabs.tsx +++ b/docs/src/pages/demos/tabs/NavTabs.tsx @@ -29,7 +29,13 @@ interface LinkTabProps { } function LinkTab(props: LinkTabProps) { - return ) => event.preventDefault()} {...props} />; + return ( + ) => event.preventDefault()} + {...props} + /> + ); } const useStyles = makeStyles((theme: Theme) => ({