diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 3d03c6e..0000000 --- a/.babelrc +++ /dev/null @@ -1,19 +0,0 @@ -{ - "presets": [ - [ - "@babel/preset-env", - { - "useBuiltIns": "usage", - "modules": false, - "corejs": 3, - "targets": "> 0.25%, not dead" - } - ], - "@babel/preset-react", - "@babel/preset-typescript" - ], - "plugins": [ - "@babel/plugin-proposal-class-properties" - ], - "ignore": ["node_modules/**"] -} diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 738496a..0000000 --- a/.eslintignore +++ /dev/null @@ -1,5 +0,0 @@ -node_modules/* -dist/* -example/index.js -webpack.config.js -rollup.config.js \ No newline at end of file diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index a02c007..0000000 --- a/.eslintrc +++ /dev/null @@ -1,19 +0,0 @@ -{ - "parser": "@typescript-eslint/parser", - "parserOptions": { - "sourceType": "module" - }, - "plugins": ["@typescript-eslint", "prettier"], - "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended"], - "rules": { - "prettier/prettier": "error" - }, - "env": { - "browser": true - }, - "settings": { - "react": { - "version": "detect" // https://github.com/yannickcr/eslint-plugin-react#configuration - } - } -} diff --git a/.github/workflows/deploy-example.yml b/.github/workflows/deploy-example.yml deleted file mode 100644 index b93cc8d..0000000 --- a/.github/workflows/deploy-example.yml +++ /dev/null @@ -1,37 +0,0 @@ -name: Deployment CI - -on: - push: - branches: - - master -jobs: - build: - runs-on: ubuntu-latest - - strategy: - matrix: - node-version: [14.x] - - steps: - - uses: actions/checkout@master - - - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v1 - with: - node-version: ${{ matrix.node-version }} - - - name: npm install packages - run: npm install - - - name: build package - run: npm run build - - - name: build example - run: npm run example:build - - - name: deploy to S3 - env: - AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} - AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} - S3_BUCKET: ${{ secrets.S3_BUCKET }} - run: aws s3 cp ./example s3://$S3_BUCKET --acl public-read --recursive --region ap-northeast-2 diff --git a/.gitignore b/.gitignore deleted file mode 100644 index f5aef63..0000000 --- a/.gitignore +++ /dev/null @@ -1,9 +0,0 @@ -.DS_Store -.vscode - -dist -node_modules - -npm-debug.log -yarn-debug.log -yarn-error.log \ No newline at end of file diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 7e3310d..0000000 --- a/.npmignore +++ /dev/null @@ -1,14 +0,0 @@ -.DS_Store -.vscode -.git* - -src -example -node_modules -npm-debug.log -yarn-debug.log -yarn-error.log -demo.gif -rollup.config.js -webpack.config.js -tsconfig.json \ No newline at end of file diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 5ab1d28..0000000 --- a/.prettierignore +++ /dev/null @@ -1,4 +0,0 @@ -dist -example/index.js -*.json -.babelrc \ No newline at end of file diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 8424f8c..0000000 --- a/.prettierrc +++ /dev/null @@ -1,14 +0,0 @@ -{ - "tabWidth": 2, - "singleQuote": true, - "printWidth": 150, - "bracketSpacing": true, - "jsxBracketSameLine": true, - "useTabs": false, - "semi": true, - "requirePragma": false, - "proseWrap": "preserve", - "htmlWhitespaceSensitivity": "ignore", - "endOfLine": "auto", - "trailingComma": "none" -} diff --git a/example/App.tsx b/App.tsx similarity index 97% rename from example/App.tsx rename to App.tsx index a28dfdd..1173b95 100644 --- a/example/App.tsx +++ b/App.tsx @@ -24,7 +24,6 @@ type SliderOptions = { loop: boolean; autoPlay: boolean; autoPlayDelay: number; - startIndex: number; navStyle: 1 | 2; navSize: number; navMargin: number; @@ -40,7 +39,6 @@ const App: React.FC = () => { loop: true, autoPlay: true, autoPlayDelay: 2, - startIndex: 3, navStyle: 1, navSize: 50, navMargin: 30, @@ -120,7 +118,7 @@ const App: React.FC = () => { loop={sliderOptions.loop} autoPlay={sliderOptions.autoPlay} autoPlayDelay={sliderOptions.autoPlayDelay} - startIndex={sliderOptions.startIndex} + startIndex={0} useGPURender={sliderOptions.useGPURender} navStyle={sliderOptions.navStyle} navSize={sliderOptions.navSize} @@ -133,7 +131,7 @@ const App: React.FC = () => { onCompleteSlide={onCompleteSlide} /> -
{slideIndexText || `${sliderOptions.startIndex + 1} / ${IMAGES.length}`}
+
{slideIndexText || `${1} / ${IMAGES.length}`}
string or number ) - - can set value like this. '100%' or '100px' or 100 - -### 1.0.2 (October 08, 2018) - -- add index.d.ts (for typescript). - -### 1.0.1 (September 20, 2018) - -- release component. - -### 1.0.0 (September 7, 2018) - -- initial setup for development environment. -- config rollup for making react component. -- config webpack for local testing. diff --git a/LICENSE b/LICENSE deleted file mode 100644 index adff029..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2018 kimcoder - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md deleted file mode 100644 index 1253484..0000000 --- a/README.md +++ /dev/null @@ -1,152 +0,0 @@ -# react-simple-image-slider - -[![ReactJs][react-image]][react-url] -[![Download Count][download-image]][download-url] -[![GitHub license][license-image]][license-url] - -[react-image]: https://img.shields.io/badge/ReactJS-%5E17.x-blue.svg -[react-url]: https://reactjs.org -[download-image]: http://img.shields.io/npm/dm/react-simple-image-slider.svg?style=flat -[download-url]: http://www.npmjs.com/package/react-simple-image-slider -[license-image]: https://img.shields.io/badge/license-MIT-blue.svg -[license-url]: https://github.com/kimcoder/react-simple-image-slider/blob/master/LICENSE - -Simple ImageSlider Component for ReactJS v17
- -- Just Two Elements will be used. (for display images) -- Support GPU Render, by default. -- Support Image Preload. -- Support SSR. ( server-side-rendering ) -- Selectable Navigation Styles. - -# Live demo - -- Go to Site

- ![demo gif](https://github.com/kimcoder/react-simple-image-slider/raw/master/demo.gif) - -# Install - -``` -// npm -npm install react-simple-image-slider --save - -// yarn -yarn add react-simple-image-slider -``` - -# Usage - -``` -import SimpleImageSlider from "react-simple-image-slider"; - -const images = [ - { url: "images/1.jpg" }, - { url: "images/2.jpg" }, - { url: "images/3.jpg" }, - { url: "images/4.jpg" }, - { url: "images/5.jpg" }, - { url: "images/6.jpg" }, - { url: "images/7.jpg" }, -]; - -const App = () => { - return ( -
- -
- ); -} -``` - -If You want to see more detail source,
- -- [`example/App.tsx`](https://github.com/kimcoder/react-simple-image-slider/blob/master/example/App.tsx)
- -# Props - -| Name | Type | Required | Description | Default | -| :-----------------: | :--------: | :--------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------- | -| **width** | `Number` | `Required` | Image Slider Width | | -| **height** | `Number` | `Required` | Image Slider Height | | -| **images** | `Array` | `Required` | Images,
Array Elements should be like this structure,
{ url: "" } or string[] | | -| **style** | `String` | `Optional` | css object | | -| **slideDuration** | `Number` | `Optional` | css transition-duration property | `0.5` | -| **navStyle** | `Number` | `Optional` | Arrow Navgation Style,
1 or 2 | `1` | -| **navSize** | `Number` | `Optional` | Arrow Size | 50 | -| **navMargin** | `Number` | `Optional` | Arrow Margin | 30 | -| **showNavs** | `Boolean` | `Required` | Toggle Arrow | -| **startIndex** | `Number` | `Optional` | start Index of Slide | 0 | -| **showBullets** | `Boolean` | `Required` | Toggle Bullets | `true` | -| **loop** | `Boolean` | `Optional` | looping slider | `true` | -| **autoPlay** | `Boolean` | `Optional` | auto play | `false` | -| **autoPlayDelay** | `Boolean` | `Optional` | auto play delay | 2.0 | -| **useGPURender** | `Boolean` | `Optional` | Toggle GPU Render | `true` | -| **bgColor** | `String` | `Optional` | slider container's css background-color property | `#000000` | -| **onClick** | `Function` | `Optional` | Image Click Callback function,
`onClick = (idx, event) => { }`
idx : number : clicked bullet index (begin from 0) | | -| **onClickNav** | `Function` | `Optional` | Arrow Navigation Callback function,
`onClickNav = (toRight) => { }`
toRight : Boolean : slide direction | | -| **onClickBullets** | `Function` | `Optional` | Bullets Callback function,
`onClickBullets = (idx) => { }`
idx : Number : clicked bullet index (begin from 0) | | -| **onStartSlide** | `Function` | `Optional` | Slide Transition Start function,
`onStartSlide = (idx, length) => { }`
idx : Number : start index (begin from 1)
length : Number : image length | | -| **onCompleteSlide** | `Function` | `Optional` | Slide TransitionEnd Callback function,
`onCompleteSlide = (idx, length) => { }`
idx : Number : start index (begin from 1)
length : Number : image length | | - -If You want to see more detail,
- -- [`example/app.tsx`](https://github.com/kimcoder/react-simple-image-slider/blob/master/example/App.tsx)
- -# Style customize - -- can customize by className with `!important`; - -``` -.your-app { - .rsis-container { - // do something - } -} - -.your-app { - .rsis-image { - background-size: contain !important; - } -} - -``` - -# Development - -### directory & source - -- `./example/` : demo site souce for testing component -- `./src/` : image slider component source -- `./dist/` : image slider component distribution -- `./babelrc` : babel configure. (version 7.x) -- `./webpack.config.js` : webpack configure. (version 4.x) -- `./rollup.config.js` : rollup configure. - -### scripts - -``` -// npm -npm run example // run a test app(demo) by webpack dev server -npm run build // build the image slider component by rollup -npm run dev // build watch mode - -// yarn -yarn example -yarn build -yarn dev -``` - -If you want to run a test app, should build before do that.
- -After run example by webpack dev server,
-open `http://localhost:8080/` in a browser
- -# License - -MIT diff --git a/example/app.scss b/app.scss similarity index 100% rename from example/app.scss rename to app.scss diff --git a/demo.gif b/demo.gif deleted file mode 100644 index 70158cd..0000000 Binary files a/demo.gif and /dev/null differ diff --git a/example/index.js b/example/index.js deleted file mode 100644 index 6ff5f87..0000000 --- a/example/index.js +++ /dev/null @@ -1,45 +0,0 @@ -!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=21)}([function(e,t,n){"use strict";e.exports=n(22)},function(e,t,n){e.exports=n(26)()},,function(e,t,n){"use strict";!function e(){if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE){0;try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(e){console.error(e)}}}(),e.exports=n(23)},function(e,t){e.exports=function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}},function(e,t){e.exports=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}},function(e,t,n){"use strict";e.exports=n(30)},,,function(e,t,n){"use strict"; -/* -object-assign -(c) Sindre Sorhus -@license MIT -*/var r=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;function a(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,l,u=a(e),s=1;sN.length&&N.push(e)}function M(e,t,n){return null==e?0:function e(t,n,r,o){var l=typeof t;"undefined"!==l&&"boolean"!==l||(t=null);var u=!1;if(null===t)u=!0;else switch(l){case"string":case"number":u=!0;break;case"object":switch(t.$$typeof){case i:case a:u=!0}}if(u)return r(o,t,""===n?"."+_(t,0):n),1;if(u=0,n=""===n?".":n+":",Array.isArray(t))for(var s=0;s