From 13690b7dc97d0c9e76e9f23a8eb406c192916f16 Mon Sep 17 00:00:00 2001 From: Jeroen Aalders Date: Mon, 14 Mar 2022 12:44:20 +0100 Subject: [PATCH 1/8] Hide footer or change footer content --- README.md | 3 ++ package.json | 10 +++--- src/AutoRotatingCarousel.js | 62 ++++++++++++++++++++++++------------- src/Slide.js | 40 ++++++++++++++---------- 4 files changed, 73 insertions(+), 42 deletions(-) diff --git a/README.md b/README.md index 12c07fd..59d4f50 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,8 @@ npm i --save react-swipeable-views |onChange | `function` | | Fired when the index changed. Returns current index. |onClose | `function` | | Fired when the gray background of the popup is pressed when it is open. |onStart | `function` | | Fired when the user clicks the getting started button. +|footer | `node` | | Object to display in the bottom half. +|currentIndex | `number` | | Set the current index of the carousel. ### Slide Properties @@ -48,6 +50,7 @@ npm i --save react-swipeable-views |style | `object` | | Override the inline-styles of the slide. |subtitle* | `string` | | Subtitle for the slide. |title* | `string` | | Title for the slide. +|noFooter | `bool` | | If `true`, the slide will not have a footer. \* required property diff --git a/package.json b/package.json index 54f5992..829d8ff 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "material-auto-rotating-carousel", - "version": "3.0.2", + "version": "3.1.2", "description": "Introduce new users to your app with this material style carousel", "main": "lib/index.js", "scripts": { @@ -12,7 +12,7 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/TeamWertarbyte/material-auto-rotating-carousel.git" + "url": "git+https://github.com/InvensoGroup/material-auto-rotating-carousel" }, "keywords": [ "react", @@ -21,12 +21,12 @@ "intro", "react-component" ], - "author": "Wertarbyte (https://wertarbyte.com)", + "author": "Invenso (https://invenso.nl)", "license": "MIT", "bugs": { - "url": "https://github.com/TeamWertarbyte/material-auto-rotating-carousel/issues" + "url": "https://github.com/InvensoGroup/material-auto-rotating-carousel/issues" }, - "homepage": "https://github.com/TeamWertarbyte/material-auto-rotating-carousel#readme", + "homepage": "https://github.com/InvensoGroup/material-auto-rotating-carousel#readme", "devDependencies": { "@babel/cli": "^7.11.6", "@babel/core": "^7.11.6", diff --git a/src/AutoRotatingCarousel.js b/src/AutoRotatingCarousel.js index 45ea7c3..f371b1f 100644 --- a/src/AutoRotatingCarousel.js +++ b/src/AutoRotatingCarousel.js @@ -15,6 +15,7 @@ import Dots from 'material-ui-dots' import classNames from 'classnames' import Carousel from './SwipableCarouselView' import { modulo } from './util' +import { Typography } from '@material-ui/core' const styles = { root: { @@ -114,6 +115,12 @@ class AutoRotatingCarousel extends Component { slideIndex: 0 } + componentDidUpdate(prevProps) { + if(prevProps.currentIndex !== this.props.currentIndex) { + this.handleChange(this.props.currentIndex); + } + } + handleContentClick = (e) => e.stopPropagation() || e.preventDefault() handleChange = (slideIndex) => { @@ -157,7 +164,8 @@ class AutoRotatingCarousel extends Component { ModalProps, open, onClose, - onStart + onStart, + footer, } = this.props const landscape = mobile && landscapeProp const transitionDuration = { enter: duration.enteringScreen, exit: duration.leavingScreen } @@ -216,25 +224,33 @@ class AutoRotatingCarousel extends Component { [classes.footerMobileLandscape]: landscape })} > - {label && } - { - hasMultipleChildren && - - } + {!!footer ? ( + <> + {footer} + + ) : ( + <> + {label && } + { + hasMultipleChildren && + + } + + )} {!mobile && !hideArrows && hasMultipleChildren && ( @@ -296,7 +312,11 @@ AutoRotatingCarousel.propTypes = { /** Controls whether the AutoRotatingCarousel is opened or not. */ open: PropTypes.bool, /** If `true`, the left and right arrows are hidden in the desktop version. */ - hideArrows: PropTypes.bool + hideArrows: PropTypes.bool, + /** Object to display in the bottom half. */ + footer: PropTypes.node, + /** Index of the image. */ + currentIndex: PropTypes.number } export default withStyles(styles)(AutoRotatingCarousel) diff --git a/src/Slide.js b/src/Slide.js index bcff2e8..73e1b0b 100644 --- a/src/Slide.js +++ b/src/Slide.js @@ -92,6 +92,7 @@ function Slide (props) { title, mobile, landscape, + noFooter = false, ...other } = props @@ -119,19 +120,21 @@ function Slide (props) { {media} -
- - {title} - - - {subtitle} - -
+ {!noFooter && ( +
+ + {title} + + + {subtitle} + +
+ )} ) } @@ -152,11 +155,11 @@ Slide.propTypes = { /** * Subtitle of the slide. */ - subtitle: PropTypes.string.isRequired, + subtitle: PropTypes.string, /** * Title of the slide. */ - title: PropTypes.string.isRequired, + title: PropTypes.string, /** * If `true`, the screen width and height is filled. * @ignore @@ -166,7 +169,12 @@ Slide.propTypes = { * If `true`, slide will adjust content for wide mobile screens. * @ignore */ - landscape: PropTypes.bool + landscape: PropTypes.bool, + /** + * If `true`, slide will not have any footer + * @ignore + */ + noFooter: PropTypes.bool } export default withStyles(styles)(Slide) From c98b39e07e664bef56fdf2b0990ae538978475c5 Mon Sep 17 00:00:00 2001 From: InvensoGroup <101555116+InvensoGroup@users.noreply.github.com> Date: Wed, 16 Mar 2022 14:03:46 +0100 Subject: [PATCH 2/8] Create build.yml --- .github/workflows/build.yml | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 .github/workflows/build.yml diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml new file mode 100644 index 0000000..d05ef2c --- /dev/null +++ b/.github/workflows/build.yml @@ -0,0 +1,31 @@ +# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node +# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions + +name: Node.js CI + +on: + push: + branches: [ master ] + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [14.x, 16.x] + # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node-version }} + cache: 'npm' + - run: npm ci + - run: npm run build --if-present + - run: npm test From 910e00054f387b9578c5a8030675f9790cd6c4f6 Mon Sep 17 00:00:00 2001 From: InvensoGroup <101555116+InvensoGroup@users.noreply.github.com> Date: Wed, 16 Mar 2022 14:08:35 +0100 Subject: [PATCH 3/8] Update build.yml --- .github/workflows/build.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index d05ef2c..3593821 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -28,4 +28,3 @@ jobs: cache: 'npm' - run: npm ci - run: npm run build --if-present - - run: npm test From 8c4ebed2256427105bc0898e2e4700dc17fa9c52 Mon Sep 17 00:00:00 2001 From: InvensoGroup <101555116+InvensoGroup@users.noreply.github.com> Date: Wed, 16 Mar 2022 14:45:52 +0100 Subject: [PATCH 4/8] Create publish.yml --- .github/workflows/publish.yml | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 .github/workflows/publish.yml diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml new file mode 100644 index 0000000..dd69f32 --- /dev/null +++ b/.github/workflows/publish.yml @@ -0,0 +1,22 @@ +on: + push: + # Sequence of patterns matched against refs/heads + branches: + - master + # Sequence of patterns matched against refs/tags + tags: + - v* + +jobs: + publish: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v1 + - uses: actions/setup-node@v1 + with: + node-version: 10 + - run: npm install + # - run: npm test + - uses: JS-DevTools/npm-publish@v1 + with: + token: ${{ secrets.NPM_TOKEN }} From d771ed500788ab0e90ec71291d9531b7fcfa3da6 Mon Sep 17 00:00:00 2001 From: InvensoGroup <101555116+InvensoGroup@users.noreply.github.com> Date: Wed, 16 Mar 2022 14:50:40 +0100 Subject: [PATCH 5/8] Update publish.yml --- .github/workflows/publish.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index dd69f32..3f271f3 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -19,4 +19,4 @@ jobs: # - run: npm test - uses: JS-DevTools/npm-publish@v1 with: - token: ${{ secrets.NPM_TOKEN }} + token: ${{ secrets.NPM }} From aa51531f90c0da9b582878eab1d2d19b08295b14 Mon Sep 17 00:00:00 2001 From: Jeroen Aalders Date: Wed, 8 Mar 2023 12:59:55 +0100 Subject: [PATCH 6/8] make node 18 compatible --- .github/FUNDING.yml | 3 --- README.md | 7 +++++++ package.json | 19 +++++++++++-------- src/AutoRotatingCarousel.js | 10 +++++----- 4 files changed, 23 insertions(+), 16 deletions(-) delete mode 100644 .github/FUNDING.yml diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml deleted file mode 100644 index 4440a85..0000000 --- a/.github/FUNDING.yml +++ /dev/null @@ -1,3 +0,0 @@ -# These are supported funding model platforms - -github: [leMaik,saschb2b] diff --git a/README.md b/README.md index 59d4f50..25c374f 100644 --- a/README.md +++ b/README.md @@ -62,3 +62,10 @@ npm i --save react-swipeable-views The files included in this repository are licensed under the MIT license. [legacy]: https://github.com/TeamWertarbyte/material-auto-rotating-carousel/tree/legacy + + +## Build and deploy + +npm run prepublish + +npm publish \ No newline at end of file diff --git a/package.json b/package.json index 829d8ff..b5c8c1f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "material-auto-rotating-carousel", - "version": "3.1.2", + "name": "@invenso/material-rotating-carousel", + "version": "3.2.0", "description": "Introduce new users to your app with this material style carousel", "main": "lib/index.js", "scripts": { @@ -12,7 +12,7 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/InvensoGroup/material-auto-rotating-carousel" + "url": "git+https://github.com/InvensoGroup/material-rotating-carousel.git" }, "keywords": [ "react", @@ -24,9 +24,9 @@ "author": "Invenso (https://invenso.nl)", "license": "MIT", "bugs": { - "url": "https://github.com/InvensoGroup/material-auto-rotating-carousel/issues" + "url": "https://github.com/InvensoGroup/material-rotating-carousel/issues" }, - "homepage": "https://github.com/InvensoGroup/material-auto-rotating-carousel#readme", + "homepage": "https://github.com/InvensoGroup/material-rotating-carousel#readme", "devDependencies": { "@babel/cli": "^7.11.6", "@babel/core": "^7.11.6", @@ -40,7 +40,7 @@ "react": "^16.9.0", "react-dom": "^16.9.0", "react-styleguidist": "^11.1.0", - "react-swipeable-views": "^0.13.3", + "react-swipeable-views": "^0.14.0", "standard": "^10.0.2", "webpack": "^4.44.2" }, @@ -49,8 +49,8 @@ "@material-ui/icons": "^3.0.0 || ^4.0.0", "react": "^16.3.0", "react-dom": "^16.3.0", - "react-swipeable-views": "^0.13.3", - "react-swipeable-views-utils": "^0.13.3" + "react-swipeable-views": "^0.14.0", + "react-swipeable-views-utils": "^0.14.0" }, "dependencies": { "classnames": "^2.2.5", @@ -59,5 +59,8 @@ }, "standard": { "parser": "babel-eslint" + }, + "directories": { + "lib": "lib" } } diff --git a/src/AutoRotatingCarousel.js b/src/AutoRotatingCarousel.js index f371b1f..80116cc 100644 --- a/src/AutoRotatingCarousel.js +++ b/src/AutoRotatingCarousel.js @@ -15,7 +15,7 @@ import Dots from 'material-ui-dots' import classNames from 'classnames' import Carousel from './SwipableCarouselView' import { modulo } from './util' -import { Typography } from '@material-ui/core' +import { Fragment } from '@material-ui/core' const styles = { root: { @@ -225,11 +225,11 @@ class AutoRotatingCarousel extends Component { })} > {!!footer ? ( - <> + {footer} - + ) : ( - <> + {label &&