implement core helpers

.eslintrc.json

@@ -22,6 +22,7 @@
     "func-names": 0,
     "no-console": 0,
     "class-methods-use-this": 0,
+    "object-curly-newline": 0,
     "react/jsx-filename-extension": 0,
     "react/forbid-prop-types": 0,
     "react/no-unused-prop-types": 0,

demo/examples/example/captioned.js

@@ -123,7 +123,7 @@ const slider = (
     },
     {
       title: 'Captioned Component',
-      description: 'For this specific example I\'m using the Captioned component which is a basic styled wrapper that applies a simple caption strategy. You can check out all the available components <a target="_blank" href="https://github.com/rcaferati/react-awesome-slider/tree/master/src/components">here</a>.',
+      description: 'For this specific example I\'m using the Captioned component which is a basic styled wrapper hoc that applies a simple caption strategy. You can check out all the available components <a target="_blank" href="https://github.com/rcaferati/react-awesome-slider/tree/master/src/components">here</a>.',
       jsx: `
 import Captioned from 'react-awesome-slider/src/components/captioned';
 import CaptionedStyles from 'react-awesome-slider/src/components/captioned/styles.scss';

demo/examples/example/lettering.js

@@ -96,7 +96,7 @@ const example = {
   items: [
     {
       title: 'Content Animation',
-      description: 'As with the component container, the content element also has it\'s own <b>moveRight</b> and <b>moveLeft</b> animation classes. You can use them to control the behaviour of the entering and exiting children elements.',
+      description: 'As with the component\'s <b>container</b>, the <b>content</b> element also has it\'s own <b>moveRight</b> and <b>moveLeft</b> animation classes. You can use them to control the behaviour of the entering and exiting children elements.',
       scss: `
 .aws-sld {
   &__content {

src/core/helpers.js

@@ -0,0 +1,69 @@
+import {
+  classToModules,
+  getClassName,
+} from '../helpers/components';
+
+export function getRootClassName({
+  rootElement,
+  cssModule,
+  disabled,
+  organicArrows,
+  className,
+}) {
+  const classNames = [
+    rootElement,
+  ];
+  if (organicArrows === true) {
+    classNames.push(`${rootElement}--organic-arrows`);
+  }
+  if (disabled === true) {
+    classNames.push(`${rootElement}--disabled`);
+  }
+  if (className) {
+    classNames.push(...className.split(' '));
+  }
+  if (cssModule && cssModule[rootElement]) {
+    return classToModules(classNames, cssModule);
+  }
+  return classNames.join(' ').trim().replace(/[\s]+/ig, ' ');
+}
+
+export function transformChildren(children) {
+  const media = [];
+  children.forEach((child) => {
+    const item = {
+      ...child.props,
+    };
+    if (child.props['data-src']) {
+      item.url = child.props['data-src'];
+    }
+    media.push(item);
+  });
+  return media;
+}
+
+export function setupClassNames(rootElement, cssModule) {
+  return {
+    boxA: getClassName(`${rootElement}__boxA`, cssModule),
+    boxB: getClassName(`${rootElement}__boxB`, cssModule),
+    box: getClassName(`${rootElement}__box`, cssModule),
+    container: getClassName(`${rootElement}__container`, cssModule),
+    wrapper: getClassName(`${rootElement}__wrapper`, cssModule),
+    bar: getClassName(`${rootElement}__bar`, cssModule),
+    barActive: getClassName(`${rootElement}__bar--active`, cssModule),
+    barEnd: getClassName(`${rootElement}__bar--end`, cssModule),
+    content: getClassName(`${rootElement}__content`, cssModule),
+    contentStatic: getClassName(`${rootElement}__content--static`, cssModule),
+    contentMoveLeft: getClassName(`${rootElement}__content--moveLeft`, cssModule),
+    contentMoveRight: getClassName(`${rootElement}__content--moveRight`, cssModule),
+    controlsActive: getClassName(`${rootElement}__controls--active`, cssModule),
+    animated: getClassName(`${rootElement}--animated`, cssModule),
+    contentExit: getClassName(`${rootElement}__content--exit`, cssModule),
+    exit: getClassName(`${rootElement}--exit`, cssModule),
+    active: getClassName(`${rootElement}--active`, cssModule),
+    moveLeft: getClassName(`${rootElement}--moveLeft`, cssModule),
+    moveRight: getClassName(`${rootElement}--moveRight`, cssModule),
+    startUp: getClassName(`${rootElement}__startUp`, cssModule),
+    bulletsLoading: getClassName(`${rootElement}__bullets--loading`, cssModule),
+  };
+}