created scale slider

src/components/index.js

@@ -7,6 +7,7 @@ import { SideMenu } from './sideMenu';
 import Modal from './modal';
 import Icon from './icon';
 import UserListItem from './basicUIElements/view/userListItem/userListItem';
+import ScaleSlider from './scaleSlider/scaleSliderView';
 
 export {
   Logo,
@@ -20,4 +21,5 @@ export {
   SideMenu,
   Modal,
   Icon,
+  ScaleSlider,
 };

src/components/scaleSlider/customSlider.js

@@ -1,95 +0,0 @@
-import React, { Component } from 'react';
-import { View, Dimensions } from 'react-native';
-import MultiSlider from '@ptomasroos/react-native-multi-slider';
-import { Item } from './item';
-
-import styles from './scaleSliderStyles';
-
-export class CustomSlider extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      multiSliderValue: [props.min, props.max],
-      first: props.min,
-      second: props.max,
-    };
-  }
-
-  _renderMarker = () => (
-    <View
-      style={{
-        width: 30,
-        height: 30,
-        borderRadius: 15,
-        backgroundColor: 'white',
-        borderColor: '#5CCDFF',
-        borderWidth: 1,
-        position: 'absolute',
-      }}
-    />
-  );
-
-  _multiSliderValuesChange = values => {
-    const { single, callback } = this.props;
-
-    if (single) {
-      this.setState({
-        second: values[0],
-      });
-    } else {
-      this.setState({
-        multiSliderValue: values,
-        first: values[0],
-        second: values[1],
-      });
-
-      if (callback) callback(values);
-    }
-  };
-
-  _renderScale = () => {
-    const { min, max, values } = this.props;
-    const { first, second } = this.state;
-
-    const items = [];
-
-    if (values) {
-      for (let i = min; i <= values.length; i++) {
-        items.push(<Item value={values[i - 1]} first={first} second={second} />);
-      }
-    } else {
-      for (let i = min; i <= max; i++) {
-        items.push(<Item value={i} first={first} second={second} />);
-      }
-    }
-    return items;
-  };
-
-  render() {
-    const { multiSliderValue } = this.state;
-    const { min, max, single, LRpadding } = this.props;
-
-    return (
-      <View>
-        <View style={[styles.column, { marginLeft: LRpadding, marginRight: LRpadding }]}>
-          {this._renderScale()}
-        </View>
-        <View style={styles.container}>
-          <MultiSlider
-            trackStyle={{ backgroundColor: '#bdc3c7' }}
-            selectedStyle={{ backgroundColor: '#357ce6' }}
-            values={single ? [multiSliderValue[1]] : [multiSliderValue[0], multiSliderValue[1]]}
-            sliderLength={Dimensions.get('window').width - LRpadding * 2}
-            onValuesChange={this._multiSliderValuesChange}
-            min={min}
-            max={max}
-            step={1}
-            allowOverlap={false}
-            customMarker={this._renderMarker}
-            snapped
-          />
-        </View>
-      </View>
-    );
-  }
-}

src/components/scaleSlider/item.js

@@ -1,23 +0,0 @@
-import React, { Component } from 'react';
-import { View, Text } from 'react-native';
-import styles from './scaleSliderStyles';
-
-export class Item extends Component {
-  render() {
-    const { value } = this.props;
-
-    return (
-      <View>
-        <Text style={[this.checkActive() ? styles.active : styles.inactive]}>{value}</Text>
-        <View style={[this.checkActive() ? styles.line : styles.passiveLine]} />
-      </View>
-    );
-  }
-
-  checkActive = () => {
-    const { value, first, second } = this.props;
-
-    if (value >= first && value <= second) return true;
-    return false;
-  };
-}

src/components/scaleSlider/scaleSliderStyles.js

@@ -15,27 +15,14 @@ export default EStyleSheet.create({
     color: '#bdc3c7',
   },
   line: {
-    width: 15,
-    height: 15,
-    borderColor: '#357ce6',
-    borderRadius: 9,
-    top: 12,
-    borderWidth: 1,
+    width: 14,
+    height: 14,
     backgroundColor: '#357ce6',
+    borderRadius: 7,
+    borderWidth: 0,
+    top: 12,
     zIndex: 999,
   },
-  passiveLine: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    top: 17,
-    borderColor: '#fff',
-    borderWidth: 1,
-    position: 'absolute',
-    backgroundColor: '#fff',
-    zIndex: 999,
-  },
-
   container: {
     justifyContent: 'center',
     alignItems: 'center',
@@ -46,4 +33,13 @@ export default EStyleSheet.create({
     justifyContent: 'space-between',
     bottom: -20,
   },
+  marker: {
+    width: 35,
+    height: 35,
+    borderRadius: 17,
+    backgroundColor: 'white',
+    borderWidth: 1,
+    position: 'absolute',
+    borderColor: '#357ce6',
+  },
 });

src/components/scaleSlider/scaleSliderView.js

@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import { View, Dimensions, Text } from 'react-native';
+import MultiSlider from '@ptomasroos/react-native-multi-slider';
+
+import styles from './scaleSliderStyles';
+
+export default class ScaleSliderView extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeValue: props.activeValue || props.values[0],
+      activeIndex: props.values.indexOf(props.activeValue) || 0,
+    };
+  }
+
+  _renderMarker = () => <View style={styles.marker} />;
+
+  _valueChange = _values => {
+    const { handleOnValueChange, values } = this.props;
+    const index = _values[0] - 1;
+
+    this.setState({
+      activeValue: values && values[index],
+      activeIndex: index,
+    });
+
+    if (handleOnValueChange) handleOnValueChange(values[index]);
+  };
+
+  _renderItem = (value, index, activeIndex) => {
+    const isActive = index <= activeIndex || index === 0;
+
+    return (
+      <View>
+        <Text style={[isActive ? styles.active : styles.inactive]}>{value}</Text>
+        <View style={[isActive ? styles.line : {}]} />
+      </View>
+    );
+  };
+
+  _renderScale = () => {
+    const { values } = this.props;
+    const { activeIndex } = this.state;
+
+    const items = [];
+
+    for (let i = 1; i <= values.length; i++) {
+      items.push(this._renderItem(values[i - 1], i - 1, activeIndex));
+    }
+
+    return items;
+  };
+
+  render() {
+    const { LRpadding, values, day } = this.props;
+    const { activeIndex } = this.state;
+
+    return (
+      <View>
+        <View style={[styles.column, { marginLeft: LRpadding, marginRight: LRpadding }]}>
+          {this._renderScale()}
+        </View>
+        <View style={styles.container}>
+          <MultiSlider
+            trackStyle={{ backgroundColor: '#bdc3c7' }}
+            selectedStyle={{ backgroundColor: '#357ce6' }}
+            sliderLength={Dimensions.get('window').width - LRpadding * 2}
+            onValuesChange={this._valueChange}
+            values={[activeIndex + 1]}
+            min={1}
+            max={values && values.length}
+            step={1}
+            allowOverlap={false}
+            customMarker={this._renderMarker}
+            snapped
+          />
+        </View>
+      </View>
+    );
+  }
+}

src/config/locales/en-US.json

@@ -309,6 +309,7 @@
   },
   "promote": {
     "user": "User",
-    "permlink": "Permlink"
+    "permlink": "Permlink",
+    "information": "Are you sure to transfer to promote?"
   }
 }

src/constants/options/points.js

@@ -115,6 +115,7 @@ export const PROMOTE_PRICING = [
   { duration: 7, price: 500 },
   { duration: 14, price: 1000 },
 ];
+export const PROMOTE_DAYS = [1, 2, 3, 7, 14];
 
 export const PROMOTE_STATUS_PENDING = 1;
 export const PROMOTE_STATUS_SUCCESS = 2;

src/containers/pointsContainer.js

@@ -7,6 +7,7 @@ import get from 'lodash/get';
 // Services and Actions
 import { getUser, getUserPoints, claim } from '../providers/esteem/ePoint';
 import { openPinCodeModal } from '../redux/actions/applicationActions';
+import { promote } from '../providers/steem/dsteem';
 
 // Constant
 import POINTS from '../constants/options/points';
@@ -164,6 +165,24 @@ class PointsContainer extends Component {
     this.setState({ isClaiming: false });
   };
 
+  _promote = async (duration, permlink, author) => {
+    const { currentAccount, pinCode } = this.props;
+    this.setState({ isLoading: true });
+
+    await promote(currentAccount, pinCode, duration, permlink, author)
+      .then(() => {
+        this.setState({ isLoading: false });
+      })
+      .catch(error => {
+        Alert.alert(
+          `Fetching data from server failed, please try again or notify us at info@esteem.app \n${error.message.substr(
+            0,
+            20,
+          )}`,
+        );
+      });
+  };
+
   render() {
     const {
       isClaiming,
@@ -193,6 +212,7 @@ class PointsContainer extends Component {
         handleOnPressTransfer: this._handleOnPressTransfer,
         balance,
         getUserBalance: this._getUserBalance,
+        promote: this._promote,
       })
     );
   }
@@ -204,6 +224,7 @@ const mapStateToProps = state => ({
   activeBottomTab: state.ui.activeBottomTab,
   accounts: state.account.otherAccounts,
   currentAccount: state.account.currentAccount,
+  pinCode: state.account.pin,
 });
 
 export default connect(mapStateToProps)(PointsContainer);

src/screens/promote/screen/promoteScreen.js

@@ -3,11 +3,10 @@
 /* eslint-disable no-return-assign */
 import React, { PureComponent, Fragment } from 'react';
 import { injectIntl } from 'react-intl';
-import { Text, View, WebView, ScrollView, TouchableOpacity } from 'react-native';
+import { Text, View, WebView, ScrollView } from 'react-native';
 import get from 'lodash/get';
 import ActionSheet from 'react-native-actionsheet';
-import Slider from 'react-native-slider';
-import { CustomSlider } from '../../../components/scaleSlider/customSlider';
+import { ScaleSlider } from '../../../components';
 
 // Container
 import { PointsContainer } from '../../../containers';
@@ -23,7 +22,7 @@ import { MainButton } from '../../../components/mainButton';
 import { DropdownButton } from '../../../components/dropdownButton';
 // import { Modal } from '../../../components/modal';
 
-import { PROMOTE_PRICING } from '../../../constants/options/points';
+import { PROMOTE_PRICING, PROMOTE_DAYS } from '../../../constants/options/points';
 
 // Styles
 import styles from './promoteStyles';
@@ -92,11 +91,15 @@ class PointsScreen extends PureComponent {
       });
   };
 
+  _promote = promote => {
+    const { day, permlink, author } = this.state;
+    // @u-e/esteem-mobile-v2-guide
+    if (promote) promote(day, permlink, 'u-e');
+  };
+
   render() {
     const { intl } = this.props;
-    const { selectedUser, balance } = this.state;
-
-    // this._getUserBalance();
+    const { selectedUser, balance, day } = this.state;
 
     return (
       <PointsContainer>
@@ -109,6 +112,7 @@ class PointsScreen extends PureComponent {
           accounts,
           currentAccountName,
           balance: _balance,
+          promote,
         }) => (
           <Fragment>
             <BasicHeader title="Promote" />
@@ -132,11 +136,19 @@ class PointsScreen extends PureComponent {
                       )
                     }
                   />
-                  <CustomSlider
-                    min={1}
+
+                  <View style={styles.total}>
+                    <Text style={styles.day}>{`${day} days `}</Text>
+                    <Text style={styles.price}>
+                      {`${get(PROMOTE_PRICING[PROMOTE_DAYS.indexOf(day)], 'price')} eSteem points`}
+                    </Text>
+                  </View>
+
+                  <ScaleSlider
                     values={[1, 2, 3, 7, 14]}
-                    LRpadding={40}
-                    callback={day => this.setState({ day })}
+                    LRpadding={50}
+                    activeValue={day}
+                    handleOnValueChange={day => this.setState({ day })}
                     single
                   />
                 </View>
@@ -154,19 +166,19 @@ class PointsScreen extends PureComponent {
                 </View>
               </ScrollView>
             </View>
-            {/* <ActionSheet
+            <ActionSheet
               ref={o => (this.ActionSheet = o)}
               options={[
                 intl.formatMessage({ id: 'alert.confirm' }),
                 intl.formatMessage({ id: 'alert.cancel' }),
               ]}
-              title={intl.formatMessage({ id: 'transfer.information' })}
+              title={intl.formatMessage({ id: 'promote.information' })}
               cancelButtonIndex={1}
               destructiveButtonIndex={0}
               onPress={index => {
-                index === 0 ? this._handleTransferAction() : null;
+                index === 0 ? this._promote(promote) : null;
               }}
-            /> */}
+            />
             {/* <Modal
           isOpen={steemConnectTransfer}
           isFullScreen

src/screens/promote/screen/promoteStyles.js

@@ -199,4 +199,20 @@ export default EStyleSheet.create({
   nextPowerDown: {
     marginVertical: 5,
   },
+  total: {
+    marginVertical: 15,
+    flexDirection: 'row',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  day: {
+    fontSize: 22,
+    color: '$primaryBlue',
+    fontWeight: 'bold',
+  },
+  price: {
+    fontSize: 15,
+    color: '$primaryBlue',
+  },
 });