diff --git a/.eslintrc b/.eslintrc index 4a5249a..a4a3eb1 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,7 @@ 'parser': 'babel-eslint', 'rules': { - 'indent': [2, 4, { + 'indent': [2, 2, { SwitchCase: 1, }], 'prefer-const': 0, @@ -13,14 +13,15 @@ allowAfterSuper: true, }], 'react/jsx-filename-extension': 0, - 'react/jsx-indent': [2, 4], - 'react/jsx-indent-props': [2, 4], + 'react/jsx-indent': [2, 2], + 'react/jsx-indent-props': [2, 2], 'class-methods-use-this': "off", // concerned 'react/forbid-prop-types': "off", 'react/no-unused-prop-types': "off", 'no-plusplus': "off", 'no-bitwise': "off", + 'react/destructuring-assignment': "off" }, 'globals': { diff --git a/package.json b/package.json index 8fddd48..ff3e60a 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "build:lib": "babel src --out-dir lib && copyfiles src/index.d.ts lib -u 1", "build:umd": "cross-env NODE_ENV=development webpack --bail", "build:umd:min": "cross-env NODE_ENV=production webpack --bail", - "build": "npm run clean && npm update && npm run lint && npm run build:lib && npm run build:umd && npm run build:umd:min", + "build": "npm run clean && npm run lint && npm run build:lib && npm run build:umd && npm run build:umd:min", "example": "webpack-dev-server --content-base example/ --config example/webpack.config.js", "lint": "eslint src", "test": "echo \"Test: TBD\"", diff --git a/src/scrollbar.js b/src/scrollbar.js index 07320e3..47afdfe 100644 --- a/src/scrollbar.js +++ b/src/scrollbar.js @@ -3,103 +3,106 @@ import { PropTypes } from 'prop-types'; import PerfectScrollbar from 'perfect-scrollbar'; const handlerNameByEvent = { - 'ps-scroll-y': 'onScrollY', - 'ps-scroll-x': 'onScrollX', - 'ps-scroll-up': 'onScrollUp', - 'ps-scroll-down': 'onScrollDown', - 'ps-scroll-left': 'onScrollLeft', - 'ps-scroll-right': 'onScrollRight', - 'ps-y-reach-start': 'onYReachStart', - 'ps-y-reach-end': 'onYReachEnd', - 'ps-x-reach-start': 'onXReachStart', - 'ps-x-reach-end': 'onXReachEnd', + 'ps-scroll-y': 'onScrollY', + 'ps-scroll-x': 'onScrollX', + 'ps-scroll-up': 'onScrollUp', + 'ps-scroll-down': 'onScrollDown', + 'ps-scroll-left': 'onScrollLeft', + 'ps-scroll-right': 'onScrollRight', + 'ps-y-reach-start': 'onYReachStart', + 'ps-y-reach-end': 'onYReachEnd', + 'ps-x-reach-start': 'onXReachStart', + 'ps-x-reach-end': 'onXReachEnd', }; Object.freeze(handlerNameByEvent); export default class ScrollBar extends Component { - constructor(props) { - super(props); + constructor(props) { + super(props); - this.handleRef = this.handleRef.bind(this); - this._handlerByEvent = new Map(); - } + this.handleRef = this.handleRef.bind(this); + this._handlerByEvent = new Map(); + } - componentDidMount() { - this._ps = new PerfectScrollbar(this._container, this.props.option); - // hook up events - Object.keys(handlerNameByEvent).forEach((key) => { - const callback = this.props[handlerNameByEvent[key]]; - if (callback) { - const handler = () => callback(this._container); - this._handlerByEvent.set(key, handler); - this._container.addEventListener(key, handler, false); - } - }); - } + componentDidMount() { + this._ps = new PerfectScrollbar(this._container, this.props.option); + // hook up events + Object.keys(handlerNameByEvent).forEach((key) => { + const callback = this.props[handlerNameByEvent[key]]; + if (callback) { + const handler = () => callback(this._container); + this._handlerByEvent.set(key, handler); + this._container.addEventListener(key, handler, false); + } + }); + } - componentDidUpdate() { - this._ps.update(); - } + componentDidUpdate() { + this._ps.update(); + } - componentWillUnmount() { - // unhook up evens - Object.keys(this._handlerByEvent).forEach((value, key) => { - this._container.removeEventListener(key, value, false); - }); - this._handlerByEvent.clear(); - this._ps.destroy(); - this._ps = null; - } + componentWillUnmount() { + // unhook up evens + Object.keys(this._handlerByEvent).forEach((value, key) => { + this._container.removeEventListener(key, value, false); + }); + this._handlerByEvent.clear(); + this._ps.destroy(); + this._ps = null; + } - updateScroll() { - this._ps.update(); - } + updateScroll() { + this._ps.update(); + } - handleRef(ref) { - this._container = ref; - this.props.containerRef(ref); - } + handleRef(ref) { + this._container = ref; + this.props.containerRef(ref); + } - render() { - const { children, className } = this.props; + render() { + const { children, className } = this.props; - return ( -
- {children} -
- ); - } + return ( +
+ {children} +
+ ); + } } ScrollBar.defaultProps = { - className: '', - option: undefined, - containerRef: () => { }, - onScrollY: undefined, - onScrollX: undefined, - onScrollUp: undefined, - onScrollDown: undefined, - onScrollLeft: undefined, - onScrollRight: undefined, - onYReachStart: undefined, - onYReachEnd: undefined, - onXReachStart: undefined, - onXReachEnd: undefined, + className: '', + option: undefined, + containerRef: () => { }, + onScrollY: undefined, + onScrollX: undefined, + onScrollUp: undefined, + onScrollDown: undefined, + onScrollLeft: undefined, + onScrollRight: undefined, + onYReachStart: undefined, + onYReachEnd: undefined, + onXReachStart: undefined, + onXReachEnd: undefined, }; ScrollBar.propTypes = { - children: PropTypes.node.isRequired, - className: PropTypes.string, - option: PropTypes.object, - containerRef: PropTypes.func, - onScrollY: PropTypes.func, - onScrollX: PropTypes.func, - onScrollUp: PropTypes.func, - onScrollDown: PropTypes.func, - onScrollLeft: PropTypes.func, - onScrollRight: PropTypes.func, - onYReachStart: PropTypes.func, - onYReachEnd: PropTypes.func, - onXReachStart: PropTypes.func, - onXReachEnd: PropTypes.func, + children: PropTypes.node.isRequired, + className: PropTypes.string, + option: PropTypes.object, + containerRef: PropTypes.func, + onScrollY: PropTypes.func, + onScrollX: PropTypes.func, + onScrollUp: PropTypes.func, + onScrollDown: PropTypes.func, + onScrollLeft: PropTypes.func, + onScrollRight: PropTypes.func, + onYReachStart: PropTypes.func, + onYReachEnd: PropTypes.func, + onXReachStart: PropTypes.func, + onXReachEnd: PropTypes.func, };