diff --git a/CHANGELOG.md b/CHANGELOG.md index 8973cf9..bdceae8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] ### Added - Support specifying item elements and scrollable container element, by [@compulim](https://github.com/compulim) in PR [#21](https://github.com/spyip/react-film/pull/21). +- Fix [#22](https://github.com/spyip/react-film/issues/22). Added style options to hide "cursor: pointer" style, by [@compulim](https://github.com/compulim) in PR [#25](https://github.com/spyip/react-film/pull/25). ### Changed - For performance reason, deep-customizing component will now need to pass `numItems` prop to ``, by [@compulim](https://github.com/compulim) in PR [#21](https://github.com/spyip/react-film/pull/21). diff --git a/README.md b/README.md index 4091750..346e61e 100644 --- a/README.md +++ b/README.md @@ -148,15 +148,16 @@ export default props => Sometimes, just increasing some paddings are more than enough for your styling need. When calling `createBasicStyleSet(options)`, you can specify the following options: -| Name | Default | Description | -|-------------------|---------|-------------------------------| -| `autoHide` | `true` | Auto-hide controls | -| `dotBoxSize` | `20` | Hit box size of every dot | -| `dotSize` | `6` | Visible dot size | -| `flipperBoxWidth` | `60` | Hit box size of flippers | -| `flipperSize` | `40` | Visible flipper size (circle) | -| `scrollBarHeight` | `8` | Scroll bar handler height | -| `scrollBarMargin` | `4` | Margin around scroll bar | +| Name | Default | Description | +|-------------------|-----------|-----------------------------------| +| `autoHide` | `true` | Auto-hide controls | +| `cursor` | `pointer` | Cursor style on dots and flippers | +| `dotBoxSize` | `20` | Hit box size of every dot | +| `dotSize` | `6` | Visible dot size | +| `flipperBoxWidth` | `60` | Hit box size of flippers | +| `flipperSize` | `40` | Visible flipper size (circle) | +| `scrollBarHeight` | `8` | Scroll bar handler height | +| `scrollBarMargin` | `4` | Margin around scroll bar | # Deep-customization diff --git a/packages/component/src/Dots.js b/packages/component/src/Dots.js index ff00369..78cf05e 100644 --- a/packages/component/src/Dots.js +++ b/packages/component/src/Dots.js @@ -15,7 +15,6 @@ const DOT_CSS = css({ position: 'relative', '& > input': { - cursor: 'pointer', height: '100%', left: 0, margin: 0, diff --git a/packages/component/src/createBasicStyleSet.js b/packages/component/src/createBasicStyleSet.js index 4e9116a..46c45ba 100644 --- a/packages/component/src/createBasicStyleSet.js +++ b/packages/component/src/createBasicStyleSet.js @@ -11,7 +11,7 @@ const createDotsBoxCSS = ({ height }) => css({ width: '100%' }); -const createDotsItemCSS = ({ boxSize, size }) => css({ +const createDotsItemCSS = ({ boxSize, cursor, size }) => css({ alignItems: 'center', display: 'flex', height: boxSize, @@ -19,7 +19,8 @@ const createDotsItemCSS = ({ boxSize, size }) => css({ width: boxSize, '& > input': { - cursor: 'pointer', + ...cursor ? { cursor } : {}, + height: '100%', left: 0, margin: 0, @@ -52,9 +53,10 @@ const createDotsItemCSS = ({ boxSize, size }) => css({ const FLIPPER_BOX_WIDTH = 60; const FLIPPER_SIZE = 40; -const createFlipperBoxCSS = ({ boxWidth, size }) => css({ +const createFlipperBoxCSS = ({ boxWidth, cursor, size }) => css({ + ...cursor ? { cursor } : {}, + background: 'Transparent', - cursor: 'pointer', height: '100%', position: 'absolute', top: 0, @@ -115,7 +117,7 @@ const createRightFlipperCSS = options => css({ const SCROLL_BAR_HEIGHT = 8; const SCROLL_BAR_MARGIN = 4; -const createScrollBarBoxCSS = ({ height, margin }) => css({ +const createScrollBarBoxCSS = ({ margin }) => css({ bottom: 0, padding: margin, position: 'absolute', @@ -125,15 +127,16 @@ const createScrollBarBoxCSS = ({ height, margin }) => css({ width: '100%' }); -const createScrollBarHandlerCSS = ({ height, margin }) => css({ +const createScrollBarHandlerCSS = ({ height }) => css({ backdropFilter: 'blur(4px)', background: 'rgba(255, 255, 255, .4)', borderRadius: height / 2, - height: height + height }); export default function ({ autoHide = true, + cursor = 'pointer', dotBoxSize = DOT_BOX_SIZE, dotSize = DOT_SIZE, flipperBoxWidth = FLIPPER_BOX_WIDTH, @@ -144,11 +147,11 @@ export default function ({ const styles = { carousel : '', dotsBox : createDotsBoxCSS({ height: dotBoxSize }), - dotsItem : createDotsItemCSS({ boxSize: dotBoxSize, size: dotSize }), - leftFlipper : createLeftFlipperCSS({ boxWidth: flipperBoxWidth, size: flipperSize }), - rightFlipper : createRightFlipperCSS({ boxWidth: flipperBoxWidth, size: flipperSize }), - scrollBarBox : createScrollBarBoxCSS({ height: scrollBarHeight, margin: scrollBarMargin }), - scrollBarHandler: createScrollBarHandlerCSS({ height: scrollBarHeight, margin: scrollBarMargin }) + dotsItem : createDotsItemCSS({ boxSize: dotBoxSize, cursor, size: dotSize }), + leftFlipper : createLeftFlipperCSS({ boxWidth: flipperBoxWidth, cursor, size: flipperSize }), + rightFlipper : createRightFlipperCSS({ boxWidth: flipperBoxWidth, cursor, size: flipperSize }), + scrollBarBox : createScrollBarBoxCSS({ margin: scrollBarMargin }), + scrollBarHandler: createScrollBarHandlerCSS({ height: scrollBarHeight }) }; // This is for overriding existing rules with auto-hide CSS transitions diff --git a/packages/playground/src/App.js b/packages/playground/src/App.js index f2fd59e..e8f2943 100644 --- a/packages/playground/src/App.js +++ b/packages/playground/src/App.js @@ -11,7 +11,7 @@ const LIST_FILM_ITEM_CSS = css({ width: 200 }); -const styleSet = createBasicStyleSet({ autoHide: false }); +const styleSet = createBasicStyleSet({ autoHide: false, cursor: null }); const myStyleSet = { ...styleSet, scrollBarHandler: styleSet.scrollBarHandler + ' ' + css({ backgroundColor: 'Red' })