From 7bd69b833bba67f01dabfcd0acecf742348d1e72 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 22 Nov 2019 14:52:05 +0100 Subject: [PATCH 1/2] [docs] Add SwipeableTextMobileStepper demo --- .../steppers/SwipeableTextMobileStepper.tsx | 122 ++++++++++++++++++ docs/types/react-swipeable-views-utils.d.ts | 23 ++++ 2 files changed, 145 insertions(+) create mode 100644 docs/src/pages/components/steppers/SwipeableTextMobileStepper.tsx create mode 100644 docs/types/react-swipeable-views-utils.d.ts diff --git a/docs/src/pages/components/steppers/SwipeableTextMobileStepper.tsx b/docs/src/pages/components/steppers/SwipeableTextMobileStepper.tsx new file mode 100644 index 00000000000000..647af09b9df5d3 --- /dev/null +++ b/docs/src/pages/components/steppers/SwipeableTextMobileStepper.tsx @@ -0,0 +1,122 @@ +import React from 'react'; +import { makeStyles, useTheme } from '@material-ui/core/styles'; +import MobileStepper from '@material-ui/core/MobileStepper'; +import Paper from '@material-ui/core/Paper'; +import Typography from '@material-ui/core/Typography'; +import Button from '@material-ui/core/Button'; +import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'; +import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'; +import SwipeableViews from 'react-swipeable-views'; +import { autoPlay } from 'react-swipeable-views-utils'; + +const AutoPlaySwipeableViews = autoPlay(SwipeableViews); + +const tutorialSteps = [ + { + label: 'San Francisco – Oakland Bay Bridge, United States', + imgPath: + 'https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60', + }, + { + label: 'Bird', + imgPath: + 'https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60', + }, + { + label: 'Bali, Indonesia', + imgPath: + 'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=80', + }, + { + label: 'NeONBRAND Digital Marketing, Las Vegas, United States', + imgPath: + 'https://images.unsplash.com/photo-1518732714860-b62714ce0c59?auto=format&fit=crop&w=400&h=250&q=60', + }, + { + label: 'Goč, Serbia', + imgPath: + 'https://images.unsplash.com/photo-1512341689857-198e7e2f3ca8?auto=format&fit=crop&w=400&h=250&q=60', + }, +]; + +const useStyles = makeStyles(theme => ({ + root: { + maxWidth: 400, + flexGrow: 1, + }, + header: { + display: 'flex', + alignItems: 'center', + height: 50, + paddingLeft: theme.spacing(4), + backgroundColor: theme.palette.background.default, + }, + img: { + height: 255, + display: 'block', + maxWidth: 400, + overflow: 'hidden', + width: '100%', + }, +})); + +function SwipeableTextMobileStepper() { + const classes = useStyles(); + const theme = useTheme(); + const [activeStep, setActiveStep] = React.useState(0); + const maxSteps = tutorialSteps.length; + + const handleNext = () => { + setActiveStep(prevActiveStep => prevActiveStep + 1); + }; + + const handleBack = () => { + setActiveStep(prevActiveStep => prevActiveStep - 1); + }; + + const handleStepChange = (step: number) => { + setActiveStep(step); + }; + + return ( +
+ + {tutorialSteps[activeStep].label} + + + {tutorialSteps.map((step, index) => ( +
+ {Math.abs(activeStep - index) <= 2 ? ( + {step.label} + ) : null} +
+ ))} + + + Next + {theme.direction === 'rtl' ? : } + + } + backButton={ + + } + /> +
+ ); +} + +export default SwipeableTextMobileStepper; diff --git a/docs/types/react-swipeable-views-utils.d.ts b/docs/types/react-swipeable-views-utils.d.ts new file mode 100644 index 00000000000000..99e54b36c96a1e --- /dev/null +++ b/docs/types/react-swipeable-views-utils.d.ts @@ -0,0 +1,23 @@ +// TODO: upstream + +declare module 'react-swipeable-views-utils' { + import * as React from 'react'; + import { ConsistentWith, Omit, PropInjector } from '@material-ui/types'; + import { OnChangeIndexCallback, OnSwitchingCallback } from 'react-swipeable-views'; + + export interface WithAutoPlay { + index: number; + onChangeIndex: OnChangeIndexCallback; + onSwitching?: OnSwitchingCallback; + } + export interface WithAutoPlayProps { + autoplay?: boolean; + direction?: 'incremental' | 'decremental'; + index: number; + interval?: number; + onChangeIndex: OnChangeIndexCallback; + slideCount?: number; + } + + export const autoPlay: PropInjector; +} From c453e1e79153e57d7cf8d43be525432bf122ec88 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 1 Feb 2020 18:28:43 +0100 Subject: [PATCH 2/2] use dependency --- docs/package.json | 1 + docs/types/react-swipeable-views-utils.d.ts | 23 --------------------- yarn.lock | 13 ++++++++++-- 3 files changed, 12 insertions(+), 25 deletions(-) delete mode 100644 docs/types/react-swipeable-views-utils.d.ts diff --git a/docs/package.json b/docs/package.json index b065c43b598aa0..d568b40a540795 100644 --- a/docs/package.json +++ b/docs/package.json @@ -40,6 +40,7 @@ "@types/react-dom": "^16.9.1", "@types/react-router-dom": "^5.1.0", "@types/react-swipeable-views": "^0.13.0", + "@types/react-swipeable-views-utils": "^0.13.0", "@types/react-text-mask": "^5.4.6", "@types/react-virtualized": "^9.21.4", "@types/react-window": "^1.7.0", diff --git a/docs/types/react-swipeable-views-utils.d.ts b/docs/types/react-swipeable-views-utils.d.ts deleted file mode 100644 index 99e54b36c96a1e..00000000000000 --- a/docs/types/react-swipeable-views-utils.d.ts +++ /dev/null @@ -1,23 +0,0 @@ -// TODO: upstream - -declare module 'react-swipeable-views-utils' { - import * as React from 'react'; - import { ConsistentWith, Omit, PropInjector } from '@material-ui/types'; - import { OnChangeIndexCallback, OnSwitchingCallback } from 'react-swipeable-views'; - - export interface WithAutoPlay { - index: number; - onChangeIndex: OnChangeIndexCallback; - onSwitching?: OnSwitchingCallback; - } - export interface WithAutoPlayProps { - autoplay?: boolean; - direction?: 'incremental' | 'decremental'; - index: number; - interval?: number; - onChangeIndex: OnChangeIndexCallback; - slideCount?: number; - } - - export const autoPlay: PropInjector; -} diff --git a/yarn.lock b/yarn.lock index ac7ca950a62a80..6929a6cb88ba7c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1807,7 +1807,7 @@ loose-envify "^1.4.0" prop-types "^15.6.2" -"@material-ui/types@^4.1.1": +"@material-ui/types@^4.0.0", "@material-ui/types@^4.1.1": version "4.1.1" resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-4.1.1.tgz#b65e002d926089970a3271213a3ad7a21b17f02b" integrity sha512-AN+GZNXytX9yxGi0JOfxHrRTbhFybjUJ05rnsBVjcB+16e466Z0Xe5IxawuOayVZgTBNDxmPKo5j4V6OnMtaSQ== @@ -2234,7 +2234,16 @@ "@types/history" "*" "@types/react" "*" -"@types/react-swipeable-views@^0.13.0": +"@types/react-swipeable-views-utils@^0.13.0": + version "0.13.0" + resolved "https://registry.yarnpkg.com/@types/react-swipeable-views-utils/-/react-swipeable-views-utils-0.13.0.tgz#d65650e177d25df3b9c1d5c059b5252525b04e6e" + integrity sha512-NhMLpJLCrZ61Ybdk4K3mDi0me6lrYtriu1o+J7N+mSc5pxbtZX1cqm2J2CLdz0WnGbJ4WeW2U/w6CLXBxg8VHw== + dependencies: + "@material-ui/types" "^4.0.0" + "@types/react" "*" + "@types/react-swipeable-views" "*" + +"@types/react-swipeable-views@*", "@types/react-swipeable-views@^0.13.0": version "0.13.0" resolved "https://registry.yarnpkg.com/@types/react-swipeable-views/-/react-swipeable-views-0.13.0.tgz#9e5f2efa51380886f3f73014ac8b15546d337210" integrity sha512-orrreCcXev6IUXDuHf07RDDCAoIZRMSr95eyWmYNRfjic7w/O+68iPu0NCysVls+UygRNvoqZMuXI72N/58E1w==