Merge pull request #83 from sag1v/items-css-api

resolve #82 + public css classes for items

Author: sag1v

doczrc.js

@@ -35,7 +35,8 @@ export default {
         'onPrevEnd',
         'onResize',
         'slideNext / slidePrev',
-        'goTo'
+        'goTo',
+        'Styling'
       ]
     }
   ],

package.json

@@ -61,7 +61,7 @@
     "babel-eslint": "^9.0.0",
     "concurrently": "^4.1.0",
     "cross-env": "^5.1.4",
-    "docz": "^2.3.0-alpha.6",
+    "docz": "^2.3.1",
     "enzyme": "^3.6.0",
     "enzyme-adapter-react-16": "^1.5.0",
     "eslint": "5.12.0",

src/docs/mdx/index.mdx

@@ -10,12 +10,14 @@ import Item from '../components/SimpleItem';
 # Getting started
 
 ## install
-```
+
+```bash
 npm install react-elastic-carousel
 ```
 
 ## Import
-```
+
+```js
 import Carousel from 'react-elastic-carousel'
 ```
 
@@ -34,4 +36,11 @@ import Carousel from 'react-elastic-carousel'
 
 ## Props
 
-<Props of={Carousel} />
+<Props of={Carousel} />
+
+## Styling
+
+Almost every element in `react-elastic-carousel` has a css class with the `rec-` prefix (rec is short React Elastic Carousel).  
+For example: `rec-arrow` for both arrow buttons or `rec-arrow-left` just for the left one. 
+
+You can see a code example [here](/styling).

src/docs/mdx/styling.mdx

@@ -0,0 +1,51 @@
+---
+name: Styling
+route: /styling
+menu: Examples
+---
+
+import {Playground, Props } from 'docz';
+import Carousel from 'react-elastic-carousel';
+import Item from '../components/SimpleItem';
+import '../styles/styling.css';
+
+# Styling
+#### Almost every element in `react-elastic-carousel` has a css class with the `rec-` prefix (rec is short React Elastic Carousel). 
+
+```css
+/* square buttons */
+.rec.rec-arrow {
+    border-radius: 0;
+}
+
+/* round buttons on hover */
+.rec.rec-arrow:hover {
+    border-radius: 50%;
+}
+
+/* hide disabled buttons */
+.rec.rec-arrow:disabled {
+    visibility: hidden;
+}
+
+/* disable default outline on focused items */
+/* add custom outline on focused items */
+.rec-carousel-item:focus {
+    outline: none;
+    box-shadow: inset 0 0 1px 1px lightgrey;
+}
+```
+
+
+<Playground>
+    <div className="styling-example">
+        <Carousel itemsToShow={2}>
+            <Item>1</Item>
+            <Item>2</Item>
+            <Item>3</Item>
+            <Item>4</Item>
+            <Item>5</Item>
+            <Item>6</Item>
+        </Carousel>
+    </div>
+</Playground>

src/docs/styles/styling.css

@@ -0,0 +1,19 @@
+/* square buttons */
+.styling-example .rec.rec-arrow {
+    border-radius: 0;
+}
+
+/* round buttons on hover */
+.styling-example .rec.rec-arrow:hover {
+    border-radius: 50%;
+}
+/* hide disabled buttons */
+.styling-example .rec.rec-arrow:disabled {
+    visibility: hidden;
+}
+/* disable default outline on focused items */
+/* add custom outline on focused items */
+.styling-example .rec-carousel-item:focus {
+    outline: none;
+    box-shadow: inset 0 0 1px 1px lightgrey;
+}

src/react-elastic-carousel/components/ItemWrapperContainer.js

@@ -10,16 +10,14 @@ class ItemWrapperContainer extends React.Component {
     onClick(id);
   };
   render() {
-    const { child, style, itemPosition } = this.props;
+    const { itemPosition, ...restOfProps } = this.props;
     return (
       <ItemWrapper
         onClick={this.onClick}
         className={cssPrefix("item-wrapper")}
         itemPosition={itemPosition}
-        style={style}
-      >
-        {child}
-      </ItemWrapper>
+        {...restOfProps}
+      />
     );
   }
 }
@@ -31,10 +29,9 @@ ItemWrapperContainer.defaultProps = {
 };
 
 ItemWrapperContainer.propTypes = {
-  child: PropTypes.element.isRequired,
+  children: PropTypes.element.isRequired,
   itemPosition: PropTypes.oneOf([consts.START, consts.CENTER, consts.END]),
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  style: PropTypes.object,
   onClick: PropTypes.func
 };
 

src/react-elastic-carousel/components/Track.js

@@ -26,15 +26,18 @@ const Track = ({
     const min = currentItem;
     const max = currentItem + itemsToShow;
     const isVisible = idx >= min && idx < max;
+    // we can't fix the typo (swipable -> swipeable) without a major bump
+    const swipeableClassName = cssPrefix("swipable", `swipable-${idx}`);
     const item = (
       <ItemWrapperContainer
         id={idx}
         itemPosition={itemPosition}
-        child={child}
         style={{ width, padding: paddingStyle }}
         key={idx}
         onClick={onItemClick}
-      />
+      >
+        {child}
+      </ItemWrapperContainer>
     );
     const toRender = enableSwipe ? (
       <Swipeable
@@ -45,14 +48,21 @@ const Track = ({
         onSwipedRight={onSwipedRight}
         onSwipedUp={onSwipedUp}
         onSwipedDown={onSwipedDown}
-        className={cssPrefix(`swipable-${idx}`)}
+        className={swipeableClassName}
       >
         {item}
       </Swipeable>
     ) : (
       item
     );
-    return <div tabIndex={isVisible ? 0 : -1}>{toRender}</div>;
+    return (
+      <div
+        className={cssPrefix("carousel-item", `carousel-item-${idx}`)}
+        tabIndex={isVisible ? 0 : -1}
+      >
+        {toRender}
+      </div>
+    );
   });
   return <React.Fragment>{originalChildren}</React.Fragment>;
 };

src/react-elastic-carousel/utils/__tests__/helpers.test.js

@@ -13,6 +13,11 @@ describe("helpers", () => {
     expect(css).toEqual("rec rec-test");
   });
 
+  it("cssPrefix multi keys", () => {
+    const css = helpers.cssPrefix("test", "test2");
+    expect(css).toEqual("rec rec-test rec-test2");
+  });
+
   it("pipe", () => {
     const inc = num => num + 1;
     const double = num => num * 2;

src/react-elastic-carousel/utils/helpers.js

@@ -2,7 +2,20 @@ export const noop = () => {};
 
 export const numberToArray = n => [...Array(n).keys()];
 
-export const cssPrefix = className => `rec rec-${className}`;
+export const cssPrefix = (...classNames) => {
+  const prefix = "rec";
+  const space = " ";
+  let result = `${prefix}`; // initial it with global prefix;
+
+  // in case of an array we add the class prefix per item;
+  const chainedClasses = classNames.reduce((acc, current) => {
+    acc += `${space}${prefix}-${current}`; // we must keep spaces between class names
+    return acc;
+  }, "");
+  result += chainedClasses;
+
+  return result;
+};
 
 export const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);
 

yarn.lock

@@ -6224,7 +6224,7 @@ docz-utils@^2.3.0:
     unist-util-is "^3.0.0"
     unist-util-visit "^1.4.1"
 
-docz@^2.3.0-alpha.6:
+docz@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/docz/-/docz-2.3.1.tgz#931cd840e2f9a25691fb7c67fa48d4a6ef1476a3"
   integrity sha512-HlbLqpizhieqvjD6xxNr6Nj8sk00vnHbLh4wHabXUpOi8ZkILBDSLmnfGzozAgmT+HN18CbszYMXCOlbcr4MXQ==