From 03456c28ccb49be57e5fa347e41ef7bd1ad65313 Mon Sep 17 00:00:00 2001 From: Youngchan Je Date: Fri, 13 Jan 2017 15:20:42 +0900 Subject: [PATCH] changed library list rendering way with sorting animation --- app/app.js | 2 +- app/components/myLibrary/myLibrary.js | 183 ++++++++++++++++++-------- app/components/myLibrary/styles.js | 26 ++-- 3 files changed, 142 insertions(+), 69 deletions(-) diff --git a/app/app.js b/app/app.js index c67a1da..ad9322d 100644 --- a/app/app.js +++ b/app/app.js @@ -39,7 +39,7 @@ export function setNetworkLayer() { let options = {}; // Access Token - const authToken = ''; + const authToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjF5Y1o0SDl5OXVjWm5GVmo4M0taZnZTWTdUeDEiLCJlbWFpbCI6ImhjamxAZ21haWwuY29tIiwibmFtZSI6ImNoYW4iLCJpYXQiOjE0ODQxOTgxMjF9.yC2UQH0drdWsuVozpCRgUF2kZ4vq0E6ISP_i2Dz5_hw'; options.headers = { Authorization: authToken }; diff --git a/app/components/myLibrary/myLibrary.js b/app/components/myLibrary/myLibrary.js index 7793678..da9bdec 100644 --- a/app/components/myLibrary/myLibrary.js +++ b/app/components/myLibrary/myLibrary.js @@ -1,29 +1,23 @@ import React, { Component, PropTypes } from 'react'; import { Animated, - Dimensions, ScrollView, Text, TouchableOpacity, - View + View, + LayoutAnimation, + PanResponder } from 'react-native'; import Relay from 'react-relay'; import { Actions } from 'react-native-router-flux'; -import Styles from './styles'; +import Styles, { HEIGHT, WIDTH, generateRandomColor } from './styles'; import Footer from '../../footer'; -const COLUMN_CONSTANT = { - LEFT: 'left', - RIGHT: 'right' -}; - -const HEIGHT = Dimensions.get('window').height; - -const generateRandomColor = () => { - // eslint-disable-next-line - return '#' + (function co(lor){ return (lor += - [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'][Math.floor(Math.random() * 16)]) - && (lor.length === 6) ? lor : co(lor); })(''); +const compareLists = (a, b) => { + if (a && b) { + return (a.toString() !== b.toString()); + } + return (a || b); }; export class MyLibrary extends Component { @@ -34,36 +28,56 @@ export class MyLibrary extends Component { onPressedBookIndex: undefined, onPressedColumn: undefined, initialBookColor: [], + coordinate: [], fadeAnimRow: new Animated.Value(0), offset: 0, - direction: undefined + direction: undefined, + refs: [], + pan: new Animated.ValueXY() }; + const height = HEIGHT * 0.477; + const width = WIDTH * 0.433; for (let i = 0; i < this.state.dataSource.length; i = i + 1) { this.state.initialBookColor.push(generateRandomColor()); + const left = (i % 2 === 0) ? 0 : width; + const top = 0.5 * i * height; + this.state.coordinate.push({left, top}); } + this.panResponder = PanResponder.create({ + onStartShouldSetPanResponder: () => {console.log('touched');}, + onPanResponderMove: Animated.event([null, { + dx: this.state.pan.x, + dy: this.state.pan.y + }]), + onPanResponderRelease : (e, gesture) => {} + }); } static propTypes = { user: PropTypes.object }; - animateFadeRow() { - Animated.sequence([ - Animated.timing( - this.state.fadeAnimRow, - { - toValue: 0, - duration: 0 - } - ), - Animated.timing( - this.state.fadeAnimRow, - { - toValue: 1, - duration: 300 - } - ) - ]).start(); + shouldComponentUpdate(nextState) { + let { + dataSource, + onPressedBookIndex, + onPressedColumn, + initialBookColor, + fadeAnimRow, + offset, + direction, + coordinate, + refs} = this.state; + return ( + (onPressedBookIndex !== nextState.onPressedBookIndex) || + (onPressedColumn !== nextState.onPressedColumn) || + (fadeAnimRow !== nextState.fadeAnimRow) || + (offset !== nextState.offset) || + (direction !== nextState.direction) || + (compareLists(initialBookColor, nextState.initialBookColor)) || + (compareLists(dataSource, nextState.dataSource)) || + (compareLists(coordinate, nextState.coordinate)) + (compareLists(refs, nextState.refs))); } handleOnPressBookStyle(index, col) { @@ -118,28 +132,38 @@ export class MyLibrary extends Component { ); } - filterDataSourceUponColumn(start) { - let dataSource = []; - for (let i = start; i < this.state.dataSource.length; i = i + 2) { - dataSource.push({data: this.state.dataSource[i], color: this.state.initialBookColor[i]}); - } - return dataSource; + handleOnLongPress(i) { + console.log(i); + console.log(this.state.refs[i]); } - renderLeftColumn() { - const leftDataSource = this.filterDataSourceUponColumn(0); + // todo: resolve issue on onLongPress not being invoked properly when there is onPressIn + renderRowContent(i) { + const { initialBookColor } = this.state; return ( - - {leftDataSource.map((t, i) => this.renderRow(t, i, COLUMN_CONSTANT.LEFT))} - - ); - } - - renderRightColumn() { - const rightDataSource = this.filterDataSourceUponColumn(1); - return ( - - {rightDataSource.map((t, i) => this.renderRow(t, i, COLUMN_CONSTANT.RIGHT))} + + { + this.sortRows(); + this.handleOnLongPress(i); + }} + activeOpacity={0.8} + > + + + BOOK{'\n'}Example #{i} + + + {i} + + + + + author: {i} bibbid vav sust reandsaf asdf lkdasdfas kds + + ); } @@ -153,6 +177,54 @@ export class MyLibrary extends Component { }); } + sortRows() { + const immutableList = this.state.coordinate.concat(); + immutableList[0] = JSON.parse(JSON.stringify(this.state.coordinate[3])); + immutableList[1] = JSON.parse(JSON.stringify(this.state.coordinate[0])); + immutableList[2] = JSON.parse(JSON.stringify(this.state.coordinate[1])); + immutableList[3] = JSON.parse(JSON.stringify(this.state.coordinate[2])); + LayoutAnimation.easeInEaseOut(); + this.setState({coordinate: immutableList}); + } + + renderAbsoluteRow(i) { + const { coordinate } = this.state; + return ( + this.state.refs.push(component)} // eslint-disable-line + key={i} + style={[{ + top: coordinate[i].top, + left: coordinate[i].left, + height: HEIGHT * 0.477, + width: WIDTH * 0.433, + position: 'absolute', + borderRadius: 7, + zIndex: 10}]}> + {this.renderRowContent(i)} + + ); + } + + renderAbsoluteBoxes() { + const { dataSource } = this.state; + const height = HEIGHT * 0.477; + return ( + + {dataSource.map((t, i) => { + return this.renderAbsoluteRow(i); + })} + + ); + } + render() { return ( @@ -161,9 +233,8 @@ export class MyLibrary extends Component { onScroll={this.onScroll.bind(this)} style={{flex: 1, marginTop: HEIGHT * 0.11}} > - - {this.renderLeftColumn()} - {this.renderRightColumn()} + + {this.renderAbsoluteBoxes()}