added more examples

zwug · Jun 3, 2019 · 82bc928 · 82bc928
1 parent 00707ae
commit 82bc928
Show file tree

Hide file tree

Showing 4 changed files with 192 additions and 8 deletions.
diff --git a/examples/FullPageExample.jsx b/examples/FullPageExample.jsx
@@ -14,29 +14,29 @@ export default function FullPageExample() {
     <FullPage controls controlsProps={controlsProps}>
       <Slide
         style={{
-            background: '#2ECC40', display: 'flex', alignItems: 'center', justifyContent: 'center',
-          }}
+          background: '#2ECC40', display: 'flex', alignItems: 'center', justifyContent: 'center',
+        }}
       >
         <h1>1</h1>
       </Slide>
       <Slide
         style={{
-            background: '#0074D9', display: 'flex', alignItems: 'center', justifyContent: 'center',
-          }}
+          background: '#0074D9', display: 'flex', alignItems: 'center', justifyContent: 'center',
+        }}
       >
         <h1>2</h1>
       </Slide>
       <Slide
         style={{
-           background: '#00c4ff', display: 'flex', alignItems: 'center', justifyContent: 'center',
-          }}
+          background: '#00c4ff', display: 'flex', alignItems: 'center', justifyContent: 'center',
+        }}
       >
         <h1>3</h1>
       </Slide>
       <Slide
         style={{
-            background: '#d52685', display: 'flex', alignItems: 'center', justifyContent: 'center',
-          }}
+          background: '#d52685', display: 'flex', alignItems: 'center', justifyContent: 'center',
+        }}
       >
         <h1>4</h1>
       </Slide>

diff --git a/examples/FullPageExampleCustomControls.jsx b/examples/FullPageExampleCustomControls.jsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { FullPage, Slide } from '../src';
+
+class CustomControls extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    getCurrentSlideIndex: PropTypes.func.isRequired,
+    onNext: PropTypes.func.isRequired,
+    onPrev: PropTypes.func.isRequired,
+    scrollToSlide: PropTypes.func.isRequired,
+    slidesCount: PropTypes.number.isRequired,
+    style: PropTypes.object,
+  }
+
+  static defaultProps = {
+    className: 'full-page-controls',
+    style: {
+      left: '50%',
+      paddingTop: '10px',
+      position: 'fixed',
+      transform: 'translateX(-50%)',
+    },
+  }
+
+  renderSlidesNumbers(currentSlideIndex) {
+    const { slidesCount, scrollToSlide } = this.props;
+    const slidesNumbers = [];
+    for (let i = 0; i < slidesCount; i++) {
+      const buttonProps = {
+        disabled: currentSlideIndex === i,
+        key: i,
+        onClick: () => scrollToSlide(i),
+      };
+      slidesNumbers.push(<button type="button" {...buttonProps}>{i + 1}</button>);
+    }
+    return slidesNumbers;
+  }
+
+  render() {
+    const {
+      getCurrentSlideIndex, slidesCount, style, className,
+    } = this.props;
+    const currentSlideIndex = getCurrentSlideIndex();
+
+    return (
+      <div className={className} style={style}>
+        <button
+          type="button"
+          disabled={currentSlideIndex === 0}
+          onClick={this.props.onPrev}
+        >
+          previous
+        </button>
+        {this.renderSlidesNumbers(currentSlideIndex)}
+        <button
+          type="button"
+          disabled={currentSlideIndex === slidesCount - 1}
+          onClick={this.props.onNext}
+        >
+          next
+        </button>
+      </div>
+    );
+  }
+}
+
+export default function FullPageExampleCustomControls() {
+  const baseStyle = {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+  };
+  return (
+    <FullPage controls={CustomControls}>
+      <Slide
+        style={{
+          ...baseStyle,
+          background: '#2ECC40',
+        }}
+      >
+        <h1>Custom Controls</h1>
+      </Slide>
+      <Slide
+        style={{
+          ...baseStyle,
+          background: '#0074D9',
+        }}
+      >
+        <h1>2</h1>
+      </Slide>
+      <Slide
+        style={{
+          ...baseStyle,
+          background: '#00c4ff',
+        }}
+      >
+        <h1>3</h1>
+      </Slide>
+      <Slide
+        style={{
+          ...baseStyle,
+          background: '#d52685',
+        }}
+      >
+        <h1>4</h1>
+      </Slide>
+    </FullPage>
+  );
+}
diff --git a/examples/FullPageExampleRef.jsx b/examples/FullPageExampleRef.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { FullPage, Slide } from '../src';
+
+class FullPageExampleRef extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.fullPageRef = React.createRef();
+  }
+
+  onControlsClick = () => {
+    this.fullPageRef.current.scrollToSlide(1);
+  }
+
+  render() {
+    const baseStyle = {
+      alignItems: 'center',
+      display: 'flex',
+      justifyContent: 'center',
+    };
+
+    return (
+      <div className="container">
+        <button
+          style={{ position: 'fixed' }}
+          onClick={this.onControlsClick}
+          type="button"
+        >
+          Controls
+        </button>
+        <FullPage ref={this.fullPageRef}>
+          <Slide
+            style={{
+              ...baseStyle,
+              background: '#2ECC40',
+            }}
+          >
+            <h1>Custom Controls</h1>
+          </Slide>
+          <Slide
+            style={{
+              ...baseStyle,
+              background: '#0074D9',
+            }}
+          >
+            <h1>2</h1>
+          </Slide>
+          <Slide
+            style={{
+              ...baseStyle,
+              background: '#00c4ff',
+            }}
+          >
+            <h1>3</h1>
+          </Slide>
+          <Slide
+            style={{
+              ...baseStyle,
+              background: '#d52685',
+            }}
+          >
+            <h1>4</h1>
+          </Slide>
+        </FullPage>
+      </div>
+    );
+  }
+}
+
+export default FullPageExampleRef;
diff --git a/examples/index.jsx b/examples/index.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import FullPageExample from './FullPageExample';
+// import FullPageExampleCustomControls from './FullPageExampleCustomControls';
+// import FullPageExampleRef from './FullPageExampleRef';
 
 const app = document.createElement('div');
 document.body.appendChild(app);