Add cursor style option (#25)

* Remove cursor * Add entry * Add pointerCursor * Add pointerCursor * Add pointerCursor * Clean up * Prefer cursor over pointerCursor
spyip · Apr 24, 2019 · db29968 · db29968
1 parent ffe82f4
commit db29968
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 23 deletions.
diff --git 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 `<Composer>`, 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
@@ -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
@@ -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
@@ -11,15 +11,16 @@ const createDotsBoxCSS = ({ height }) => css({
   width: '100%'
 });
 
-const createDotsItemCSS = ({ boxSize, size }) => css({
+const createDotsItemCSS = ({ boxSize, cursor, size }) => css({
   alignItems: 'center',
   display: 'flex',
   height: boxSize,
   justifyContent: 'center',
   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
@@ -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' })