ver. 0.3.7

uxcore · Mar 20, 2017 · 0ea942a · 0ea942a
1 parent 4c2fb22
commit 0ea942a
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 42 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -9,6 +9,8 @@
     "rules": {
         "import/no-extraneous-dependencies": "off",
         "jsx-a11y/no-static-element-interactions": "off",
-        "react/jsx-no-bind": "off"
+        "react/jsx-no-bind": "off",
+        "react/forbid-prop-types": "off",
+        "react/no-unused-prop-types": "off"
     }
 }
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,5 +1,9 @@
 # HISTORY
 
+## v0.3.7 / 2017-03-20
+
+* change: change thumbnail style
+
 ## v0.3.5 / 2017-03-10
 
 * fix: empty children will cause error.

diff --git a/demo/AlbumDemo.jsx b/demo/AlbumDemo.jsx
@@ -9,6 +9,7 @@
 import React from 'react';
 import Album, { Photo } from '../src';
 
+/* eslint-disable class-methods-use-this */
 class Demo extends React.Component {
 
   constructor(props) {
@@ -41,17 +42,17 @@ class Demo extends React.Component {
 
   render() {
     return (
-      <div style={{margin: '100px 0 0 200px'}}>
+      <div style={{ margin: '100px 0 0 200px' }}>
         <h2>Mockup Usage:</h2>
         <Album
           width={400} height={200}
           enableKeyBoardControl
           enableThumbs
-          thumbPlacement={'bottom'}
+          thumbPlacement={'right'}
           thumbBackground={'#000'}
           ref={album => (this.album = album)}
         >
-           <Photo
+          <Photo
             src="//img.alicdn.com/imgextra/i2/927018118/TB13fBjKFXXXXbPXpXXXXXXXXXX_!!0-tstar.jpg"
             key={0}
           />

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "uxcore-album",
- "version": "0.3.6",
+ "version": "0.3.7",
  "description": "uxcore-album component for uxcore.",
  "repository": "https://github.com/uxcore/uxcore-album.git",
  "author": "vincent.bian",

diff --git a/src/Album.jsx b/src/Album.jsx
@@ -26,7 +26,7 @@ class Album extends React.Component {
       left: 0,
       top: 0,
     };
-    
+
     this.openAlbum = this.openAlbum.bind(this);
     this.prev = this.prev.bind(this);
     this.next = this.next.bind(this);
@@ -99,10 +99,12 @@ class Album extends React.Component {
           prev={this.prev}
           next={this.next}
           onClose={(e) => {
-            e && e.preventDefault();
-            this.setState({
-              open: false,
-            });
+            if (e) {
+              e.preventDefault();
+              this.setState({
+                open: false,
+              });
+            }
           }}
           enableKeyBoardControl={enableKeyBoardControl}
           ref={node => (this.viewer = node)}
@@ -146,6 +148,7 @@ class Album extends React.Component {
                 ref: cover => (this.cover = cover),
               });
             }
+            return null;
           })}
         </div>
         {enableThumbs ? this.renderThumbs() : ''}
@@ -263,9 +266,9 @@ Album.show = (option = {}) => {
     console.warn('You must provide valid parameters: "src" or "photos"!');
   }
   const container = config.getContainer();
-  let photos; 
+  let photos;
   if (config.src) {
-    photos = [<Photo src={config.src} key={0}/>];
+    photos = [<Photo src={config.src} key={0} />];
   } else {
     photos = config.photos;
   }

diff --git a/src/Album.less b/src/Album.less
@@ -105,15 +105,15 @@
       top: 50%;
       margin-top: -70px;
       width: 60px;
-      height: 60px;
-      background-color: rgba(255, 255, 255, .1);
+      height: 80px;
+      background-color: @dark-alpha-4;
       font-size: 50px;
       color: @basic-100;
-      line-height: 60px;
+      line-height: 80px;
       text-align: center;
       transition: background-color @transition-ease @transition-duration;
       &:hover {
-        background-color: rgba(255, 255, 255, .2);
+        background-color: @dark-alpha-2;
         text-decoration: none;
         cursor: pointer;
       }
@@ -158,7 +158,7 @@
           margin: auto;
           max-width: 100%;
           max-height: 100%;
-          box-shadow: 0 0 10px 5px rgba(0, 0, 0, .6);
+          // box-shadow: 0 0 10px 5px rgba(0, 0, 0, .6);
         }
       }
     }
@@ -196,9 +196,11 @@
     z-index: 1;
     &-container {
       overflow: hidden;
+      text-align: center;
     }
     &-list {
       position: relative;
+      display: inline-block;
       white-space: nowrap;
       transition: transform cubic-bezier(0.6, 0, 0.3, 1) 1s;
       > .item {
@@ -246,13 +248,13 @@
       cursor: pointer;
       width: 24px;
       height: 72px;
-      background-color: rgba(255, 255, 255, .1);
+      background-color: @dark-alpha-4;
       color: @basic-100;
       line-height: 72px;
       font-size: 26px;
       transition: background-color @transition-ease @transition-duration;
       &:hover {
-        background-color: rgba(255, 255, 255, .2);
+        background-color: @dark-alpha-2;
         text-decoration: none;
       }
       &.disabled {
@@ -307,16 +309,16 @@
     margin: 0;
     padding: 0;
     .album-carousel-control {
-      background: @basic-400;
-      color: @text-thirdary-color;
+      background: @normal-alpha-8;
+      color: @normal-alpha-4;
       text-align: center;
       &:hover {
         cursor: pointer;
-        background: @brand-primary-lighter;
-        color: @text-thirdary-color;
+        background: @normal-alpha-7;
+        color: @normal-alpha-3;
       }
       &.disabled {
-        background: @basic-400;
+        background: @bg-disabled-color;
         color: @text-disabled-color;
       }
     }

diff --git a/src/Carousel.jsx b/src/Carousel.jsx
@@ -18,6 +18,7 @@ class Carousel extends React.Component {
     inView: false,
   }
   static propTypes = {
+    children: React.PropTypes.any,
     current: React.PropTypes.number,
     onPrev: React.PropTypes.func,
     onNext: React.PropTypes.func,
@@ -75,8 +76,15 @@ class Carousel extends React.Component {
     }
   }
 
+  componentDidUpdate() {
+    // this.adjustControlPosition();
+  }
+
+  // adjustControlPosition() {
+  // }
+
   render() {
-    let {
+    const {
       children,
       current,
       onPrev,
@@ -89,9 +97,6 @@ class Carousel extends React.Component {
       inView,
       itemSize,
     } = this.props;
-    if (!Array.isArray(children)) {
-      children = [children];
-    }
     const listStyle = {};
     const isHorizontal = placement === 'right' || placement === 'left';
     const activeOffset = {};
@@ -101,18 +106,16 @@ class Carousel extends React.Component {
       } else {
         listStyle.top = `-${this.state.top}px`;
       }
+    } else if (vendorSupport) {
+      listStyle[transformProperty] = `translateX(-${this.state.left}px)`;
+      assign(activeOffset, {
+        transform: `translateX(${(current * itemSize) + 6}px)`,
+      });
     } else {
-      if (vendorSupport) {
-        listStyle[transformProperty] = `translateX(-${this.state.left}px)`;
-        assign(activeOffset, {
-          transform: `translateX(${(current * itemSize) + 6}px)`,
-        });
-      } else {
-        listStyle.left = `-${this.state.left}px`;
-        assign(activeOffset, {
-          left: `${(current * itemSize) + 6}px`,
-        });
-      }
+      listStyle.left = `-${this.state.left}px`;
+      assign(activeOffset, {
+        left: `${(current * itemSize) + 6}px`,
+      });
     }
     return (
       <div className={classnames('album-carousel', className)} style={carouselStyle}>
@@ -129,11 +132,18 @@ class Carousel extends React.Component {
             )
           }
           onClick={onPrev}
+          ref={(c) => { this.prevControl = c; }}
         />
         <div className="album-carousel-container" ref={node => (this.container = node)} style={containerStyle}>
-          <ul className="album-carousel-list" style={listStyle}>
+          <ul
+            className="album-carousel-list"
+            style={listStyle}
+            ref={(c) => {
+              this.list = c;
+            }}
+          >
             {
-              children.map((el, i) =>
+              React.Children.map(children, (el, i) =>
                 el && <li
                   className={classnames('item', current === i ? 'active' : '')}
                   key={`c-${i}`}
@@ -163,6 +173,7 @@ class Carousel extends React.Component {
             )
           }
           onClick={onNext}
+          ref={(c) => { this.nextControl = c; }}
         />
       </div>
     );

diff --git a/src/Viewer.jsx b/src/Viewer.jsx
@@ -114,7 +114,7 @@ class Viewer extends React.Component {
         onPrev={this.prev}
         onNext={this.next}
         onSetCurrent={this.setCurrent}
-        inView={true}
+        inView
       >
         {this.props.children}
       </Carousel>