Skip to content

Commit

Permalink
Showing 11 changed files with 547 additions and 940 deletions.
2 changes: 1 addition & 1 deletion .browserslistrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
>0.25%, not ie 11
>0.25%, not dead, not ie 11
7 changes: 6 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
@@ -4,7 +4,12 @@
"es2021": true,
"node": true
},
"extends": ["plugin:react/recommended", "airbnb"],
"extends": [
"plugin:react/recommended",
"airbnb",
"prettier",
"prettier/react"
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
18 changes: 10 additions & 8 deletions .github/ISSUE_TEMPLATE/bug_report.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
name: Bug report
about: Create a report to help us improve

---

**Describe the bug**
A clear and concise description of what the bug is.

**To Reproduce**
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
@@ -21,15 +21,17 @@ A clear and concise description of what you expected to happen.
If applicable, add screenshots to help explain your problem.

**Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]

- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]

**Smartphone (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]

- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]

**Additional context**
Add any other context about the problem here.
1 change: 0 additions & 1 deletion .github/ISSUE_TEMPLATE/feature_request.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
name: Feature request
about: Suggest an idea for this project

---

**Is your feature request related to a problem? Please describe.**
20 changes: 10 additions & 10 deletions CODE_OF_CONDUCT.md
Original file line number Diff line number Diff line change
@@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo

Examples of behavior that contributes to creating a positive environment include:

* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members

Examples of unacceptable behavior by participants include:

* The use of sexualized language or imagery and unwelcome sexual attention or advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a professional setting
- The use of sexualized language or imagery and unwelcome sexual attention or advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a professional setting

## Our Responsibilities

64 changes: 32 additions & 32 deletions README.md
Original file line number Diff line number Diff line change
@@ -8,10 +8,10 @@ Simple && small controlled React.js carousel component (touch enabled, infnite a

## Table of contents

* [Installation](#installation)
* [Usage](#usage)
* [Props](#props)
* [Demo](#demo)
- [Installation](#installation)
- [Usage](#usage)
- [Props](#props)
- [Demo](#demo)

## Installation

@@ -32,19 +32,19 @@ yarn add react-simply-carousel
#### Basic Example:

```js
import React, { Component } from 'react';
import Carousel from 'react-simply-carousel';
import React, { Component } from "react";
import Carousel from "react-simply-carousel";

class App extends Component {
state = {
activeSlideIndex: 0,
}
};

setActiveSlideIndex = (newActiveSlideIndex) => {
this.setState({
activeSlideIndex: newActiveSlideIndex
activeSlideIndex: newActiveSlideIndex,
});
}
};

render() {
return (
@@ -72,29 +72,29 @@ class App extends Component {

## Props

Name | Type | Default Value | Description
---- | ---- | ------------- | --------------
activeSlideIndex | number | | Index of first visible children (slide)
activeSlideProps | object | {} | DOM props for first visible slide element
autoplay | boolean | false | Boolean indicating if the carousel should be updated automatically
autoplayDirection | string ('forward' or 'backward') | 'forward' | Direction of automatically updates
backwardBtnProps | object | {} | Contain DOM props for carousel backward button element, boolean prop `show` (for toggle button render) and node prop `children` (for render button childrens)
children | node | null | Array of slides
containerProps | object | {} | DOM props for container div element
delay | number | 0 | Slide change delay (css transition delay) in ms
disableNavIfAllVisible | boolean | true | Boolean indicating if the carousel nav (by nav buttons, click on slide item, mouse move or touch move) should be disabled if all slides is visible
easing | string | 'linear' | Slide change easing (css transition easing)
forwardBtnProps | object | {} | Contain DOM props for carousel forward button element, boolean prop `show` (for toggle button render) and node prop `children` (for render button childrens)
hideNavIfAllVisible | boolean | true | Boolean indicating if the carousel nav buttons should be hidden if all slides is visible
innerProps | object | {} | DOM props for inner div element
itemsListProps | object | {} | DOM props for items list div element
itemsToScroll | number | 1 | number of slides that should be scrolled to hidden part of carousel
itemsToShow | number | 0 (automaticaly calculated) | number of slides that should be visible
onAfterChange | function | null | Function that will be run after all updates is done and carousel moving is end
onRequestChange | function | | Function that will be run when the activeSlideIndex is requested to be changed (either by clicking on navigation button, clicking on slide (if prop `updateOnItemClick` value is `true` ), or after drag slides)
responsiveProps | Array of objects | [] | carousel props for different window width. For example: `[{minWidth: 768, maxWidth: 992, itemsToShow: 3}, {maxWidth: 767, itemsToShow: 1}]` will show only one slide when window width is less than 767px and show 3 slides when window width is >= 768px and < 992px
speed | number | 0 | Slide change speed (css transition speed) in ms
updateOnItemClick | boolean | false | Boolean indicating if the `onRequestChange` prop should be called after click on some slide
| Name | Type | Default Value | Description |
| ---------------------- | -------------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| activeSlideIndex | number | | Index of first visible children (slide) |
| activeSlideProps | object | {} | DOM props for first visible slide element |
| autoplay | boolean | false | Boolean indicating if the carousel should be updated automatically |
| autoplayDirection | string ('forward' or 'backward') | 'forward' | Direction of automatically updates |
| backwardBtnProps | object | {} | Contain DOM props for carousel backward button element, boolean prop `show` (for toggle button render) and node prop `children` (for render button childrens) |
| children | node | null | Array of slides |
| containerProps | object | {} | DOM props for container div element |
| delay | number | 0 | Slide change delay (css transition delay) in ms |
| disableNavIfAllVisible | boolean | true | Boolean indicating if the carousel nav (by nav buttons, click on slide item, mouse move or touch move) should be disabled if all slides is visible |
| easing | string | 'linear' | Slide change easing (css transition easing) |
| forwardBtnProps | object | {} | Contain DOM props for carousel forward button element, boolean prop `show` (for toggle button render) and node prop `children` (for render button childrens) |
| hideNavIfAllVisible | boolean | true | Boolean indicating if the carousel nav buttons should be hidden if all slides is visible |
| innerProps | object | {} | DOM props for inner div element |
| itemsListProps | object | {} | DOM props for items list div element |
| itemsToScroll | number | 1 | number of slides that should be scrolled to hidden part of carousel |
| itemsToShow | number | 0 (automaticaly calculated) | number of slides that should be visible |
| onAfterChange | function | null | Function that will be run after all updates is done and carousel moving is end |
| onRequestChange | function | | Function that will be run when the activeSlideIndex is requested to be changed (either by clicking on navigation button, clicking on slide (if prop `updateOnItemClick` value is `true` ), or after drag slides) |
| responsiveProps | Array of objects | [] | carousel props for different window width. For example: `[{minWidth: 768, maxWidth: 992, itemsToShow: 3}, {maxWidth: 767, itemsToShow: 1}]` will show only one slide when window width is less than 767px and show 3 slides when window width is >= 768px and < 992px |
| speed | number | 0 | Slide change speed (css transition speed) in ms |
| updateOnItemClick | boolean | false | Boolean indicating if the `onRequestChange` prop should be called after click on some slide |

## Demo

26 changes: 5 additions & 21 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,16 @@
module.exports = {
presets: [
'@babel/preset-react',
'@babel/preset-env',
],
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: [
'@babel/plugin-transform-runtime',
'@babel/plugin-proposal-export-default-from',
['@babel/plugin-proposal-class-properties', { loose: true }],

'transform-inline-consecutive-adds',
'minify-constant-folding',
'minify-dead-code-elimination',
'minify-guarded-expressions',
'minify-numeric-literals',
'minify-type-constructors',
"@babel/plugin-transform-runtime",

[
'transform-react-remove-prop-types',
"transform-react-remove-prop-types",
{
removeImport: true,
classNameMatchers: ['Component', 'PureComponent'],
additionalLibraries: ['prop-types'],
additionalLibraries: ["prop-types"],
},
],

['@babel/plugin-transform-react-constant-elements'],
['@babel/plugin-transform-react-inline-elements'],
['transform-remove-console', { exclude: ['error', 'warn'] }],
['babel-plugin-loop-optimizer'],
["transform-remove-console", { exclude: ["error", "warn"] }],
],
};
36 changes: 12 additions & 24 deletions package.json
Original file line number Diff line number Diff line change
@@ -10,9 +10,8 @@
"module": "dist/index.js",
"sideEffects": false,
"scripts": {
"build": "webpack",
"lint": "eslint . --ignore-path .gitignore --ext .js,.jsx",
"lint:fix": "eslint . --ignore-path .gitignore --ext .js,.jsx --fix",
"build": "webpack --mode=production",
"lint": "eslint --ext .js,.jsx --fix && prettier --write .",
"prepublish": "yarn run lint && yarn run build"
},
"husky": {
@@ -21,8 +20,13 @@
}
},
"lint-staged": {
"*.jsx": [
"eslint --fix",
"prettier --write"
],
"*.js": [
"eslint --fix"
"eslint --fix",
"prettier --write"
]
},
"keywords": [
@@ -50,31 +54,18 @@
"devDependencies": {
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-export-default-from": "^7.12.1",
"@babel/plugin-transform-react-constant-elements": "^7.12.1",
"@babel/plugin-transform-react-display-name": "^7.12.1",
"@babel/plugin-transform-react-inline-elements": "^7.12.1",
"@babel/plugin-transform-runtime": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"autoprefixer": "^10.1.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"babel-plugin-loop-optimizer": "^1.4.1",
"babel-plugin-minify-constant-folding": "^0.5.0",
"babel-plugin-minify-dead-code-elimination": "^0.5.1",
"babel-plugin-minify-guarded-expressions": "^0.4.4",
"babel-plugin-minify-numeric-literals": "^0.4.3",
"babel-plugin-minify-type-constructors": "^0.4.3",
"babel-plugin-transform-inline-consecutive-adds": "^0.4.3",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"babel-plugin-transform-remove-console": "^6.9.4",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"eslint": "^7.16.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^7.1.0",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.22.1",
@@ -83,12 +74,9 @@
"eslint-plugin-react-hooks": "^4.2.0",
"husky": "^4.3.6",
"jest": "^26.6.3",
"less": "^4.0.0",
"less-loader": "^7.2.1",
"lint-staged": "^10.5.3",
"path": "^0.12.7",
"postcss-loader": "^4.1.0",
"style-loader": "^2.0.0",
"prettier": "^2.2.1",
"webpack": "^5.11.1",
"webpack-bundle-analyzer": "^4.3.0",
"webpack-cli": "^4.3.0"
@@ -99,7 +87,7 @@
"prop-types": "^15.7.2"
},
"peerDependencies": {
"react": "^16 || ^17",
"react-dom": "^16 || ^17"
"react": "^16.8.0",
"react-dom": "^16.8.0"
}
}
879 changes: 416 additions & 463 deletions src/index.jsx

Large diffs are not rendered by default.

51 changes: 25 additions & 26 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,48 +1,47 @@
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
mode: 'production',
target: 'web',
entry: './src/index.jsx',
target: "web",
entry: "./src/index.jsx",
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist'),
library: 'ReactSimplyCarousel',
libraryTarget: 'umd',
globalObject: 'this',
filename: "index.js",
path: path.resolve(__dirname, "dist"),
library: "ReactSimplyCarousel",
libraryTarget: "umd",
globalObject: "this",
},
externals: {
react: {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react',
umd: 'react',
root: "React",
commonjs2: "react",
commonjs: "react",
amd: "react",
umd: "react",
},
'react-dom': {
root: 'ReactDOM',
commonjs2: 'react-dom',
commonjs: 'react-dom',
amd: 'react-dom',
umd: 'react-dom',
"react-dom": {
root: "ReactDOM",
commonjs2: "react-dom",
commonjs: "react-dom",
amd: "react-dom",
umd: "react-dom",
},
},
resolve: {
extensions: ['.js', '.jsx'],
modules: [path.resolve(__dirname, './src'), 'node_modules'],
extensions: [".js", ".jsx"],
modules: [path.resolve(__dirname, "./src"), "node_modules"],
},
plugins: [new CleanWebpackPlugin()],
module: {
rules: [
{
enforce: 'pre',
enforce: "pre",
test: /\.jsx?$/,
use: 'eslint-loader',
use: "eslint-loader",
},
{
test: /\.jsx?$/,
use: 'babel-loader',
use: "babel-loader",
exclude: /node_modules/,
},
],
383 changes: 30 additions & 353 deletions yarn.lock

Large diffs are not rendered by default.

0 comments on commit a27bf43

Please sign in to comment.