From 7f606216b1b6239749c56100d65f1d067ff9e9fd Mon Sep 17 00:00:00 2001
From: "moxun.ljf" <moxun.ljf@alibaba-inc.com>
Date: Thu, 23 Mar 2017 13:45:38 +0800
Subject: [PATCH 1/3] * [example] add demo for list & scroller with onScroll
 event

---
 examples/component/list/list-basic.we | 75 +++++++++++++++++++--------
 examples/component/scroller-demo.we   | 64 ++++++++++++++++-------
 2 files changed, 97 insertions(+), 42 deletions(-)

diff --git a/examples/component/list/list-basic.we b/examples/component/list/list-basic.we
index f7e0efc4f9..37f9c252b0 100644
--- a/examples/component/list/list-basic.we
+++ b/examples/component/list/list-basic.we
@@ -1,8 +1,15 @@
 <template>
   <div>
-    <list class="list">
-      <refresh  class = "refresh-view" display="{{refresh_display}}" onrefresh="onrefresh">
-        <text if="{{(refresh_display==='hide')}}"> ↓ pull to refresh </text>
+    <div style="background-color: #eeeeee">
+      <text class="count">Appear items:{{appearMin}} - {{appearMax}}</text>
+      <div style="height: 20px;width: 750px;border-color: black;border-width: 2px;justify-content: center">
+        <div style="height: 14px;width: {{progress_width}};margin-left:{{progress}};background-color: gray"></div>
+      </div>
+      <text style="width: 750px">{{event}}</text>
+    </div>
+    <list id="list" class="list" onscroll="{{onScroll}}" offset-accuracy="5">
+      <refresh class="refresh-view" display="{{refresh_display}}" onrefresh="onrefresh">
+        <text if="{{(refresh_display==='hide')}}"> ↓ pull to refresh</text>
         <loading-indicator class="indicator"></loading-indicator>
       </refresh>
       <cell onappear="onappear" ondisappear="ondisappear" class="row" repeat="{{rows}}" index="{{$index}}">
@@ -11,26 +18,27 @@
         </div>
       </cell>
       <loading class="loading-view" display="{{loading_display}}" onloading="onloading">
-        <text if="{{(loading_display==='hide')}}">↑ Loadmore </text>
+        <text if="{{(loading_display==='hide')}}">↑ Loadmore</text>
         <loading-indicator class="indicator"></loading-indicator>
       </loading>
     </list>
-    <text class="count">Appear items:{{appearMin}} - {{appearMax}}</text>
   </div>
 </template>
 
 <style>
   .list {
-    height:850
+
   }
+
   .count {
     font-size: 48;
-    margin:10;
+    margin: 10;
   }
+
   .indicator {
     height: 40;
     width: 40;
-    color:#45b5f0;
+    color: #45b5f0;
   }
 
   .refresh-arrow {
@@ -41,16 +49,18 @@
   .row {
     width: 750;
   }
-  
+
   .item {
     justify-content: center;
     border-bottom-width: 2;
     border-bottom-color: #c0c0c0;
     height: 100;
-    padding:20;
+    padding: 20;
   }
+
   .item-title {
   }
+
   .refresh-view {
     width: 750;
     height: 100;
@@ -62,6 +72,7 @@
     -webkit-box-align: center;
     align-items: center;
   }
+
   .loading-view {
     width: 750;
     height: 100;
@@ -73,6 +84,7 @@
     -webkit-box-align: center;
     align-items: center;
   }
+
   .indicator {
     height: 60;
     width: 60;
@@ -81,7 +93,8 @@
 </style>
 
 <script>
-
+  var dom = weex.requireModule('dom');
+  var isFirst = true;
   module.exports = {
     methods: {
       onappear: function (e) {
@@ -91,7 +104,7 @@
         appearIds.push(appearId);
         this.getMinAndMaxIds(appearIds);
       },
-      ondisappear:function (e) {
+      ondisappear: function (e) {
         var disAppearId = this.rows[e.target.attr.index].id;
         nativeLog('+++++', disAppearId);
         var appearIds = this.appearIds;
@@ -101,15 +114,15 @@
         }
         this.getMinAndMaxIds(appearIds);
       },
-      getMinAndMaxIds:function (appearIds) {
-        appearIds.sort(function(a, b) {
+      getMinAndMaxIds: function (appearIds) {
+        appearIds.sort(function (a, b) {
           return a - b;
         });
         this.appearIds = appearIds;
         this.appearMax = appearIds[appearIds.length - 1];
         this.appearMin = appearIds[0];
       },
-      onrefresh: function(e) {
+      onrefresh: function (e) {
         var self = this;
         self.refresh_display = 'show';
         self.$call('modal', 'toast', {
@@ -121,7 +134,7 @@
         }, 3000);
       },
 
-      onloading: function() {
+      onloading: function () {
         var self = this;
         self.loading_display = 'show';
         self.$call('modal', 'toast', {
@@ -130,19 +143,37 @@
 
         this.$call('timer', 'setTimeout', function () {
           if (self.rows.length <= 33) {
-              self.rows.push(self.moreRows[self.rows.length - 29]);
-            }
+            self.rows.push(self.moreRows[self.rows.length - 29]);
+          }
           self.loading_display = 'hide';
         }, 3000);
       },
+
+      onScroll: function (e) {
+        var self = this;
+        this.event = 'contentOffset: ' + JSON.stringify(e.contentOffset) + '\ncontentSize: ' + JSON.stringify(e.contentSize);
+        dom.getComponentRect(this.$el('list'), function (ret) {
+          if (e.contentOffset.x == 0 && e.contentOffset.y == 0 && isFirst) {
+            isFirst = false;
+            return;
+          }
+          var listHeight = ret.size.height;
+          self.progress_width = (listHeight / e.contentSize.height) * 750;
+          var offsetY = e.contentOffset.y > 0 ? 0 : Math.abs(e.contentOffset.y);
+          self.progress = (offsetY / (e.contentSize.height - listHeight)) * (750 - self.progress_width);
+        });
+      }
     },
     data: {
+      progress_width: 0,
+      progress:0,
+      event:'-',
       refresh_display: 'hide',
       loading_display: 'hide',
-      appearMin:1,
-      appearMax:1,
-      appearIds:[],
-      rows:[
+      appearMin: 1,
+      appearMax: 1,
+      appearIds: [],
+      rows: [
         {id: 1},
         {id: 2},
         {id: 3},
diff --git a/examples/component/scroller-demo.we b/examples/component/scroller-demo.we
index 750fd782ba..a484bb00b4 100644
--- a/examples/component/scroller-demo.we
+++ b/examples/component/scroller-demo.we
@@ -1,25 +1,34 @@
 <template>
-  <scroller class="list" append="tree">
+  <div>
+    <div style="height: 20px;width: 750px;border-color: black;border-width: 2px;justify-content: center">
+      <div style="height: 14px;width: {{progress_width}};margin-left:{{progress}};background-color: gray"></div>
+    </div>
+    <text style="width: 750px">{{event}}</text>
 
-    <refresh class="refresh-view" display="{{refresh_display}}" onrefresh="onrefresh">
-      <loading-indicator class="indicator" ></loading-indicator>
-      <text class="refresh-arrow" style="text-align: center; color:rgb(238, 162, 54)" if="{{(refresh_display==='hide')}}">Pull To Refresh</text>
-    </refresh>
+    <scroller id="scroller" onscroll="{{onScroll}}">
 
-    <div class="section" repeat="{{sections}}">
-      <div class="header">
-        <text class="header-title">{{title}}</text>
-      </div>
-      <div class="item" repeat="{{items}}">
-        <text class="item-title">row {{id}}</text>
+      <refresh class="refresh-view" display="{{refresh_display}}" onrefresh="onrefresh">
+        <loading-indicator class="indicator"></loading-indicator>
+        <text class="refresh-arrow" style="text-align: center; color:rgb(238, 162, 54)"
+              if="{{(refresh_display==='hide')}}">Pull To Refresh
+        </text>
+      </refresh>
+
+      <div class="section" repeat="{{sections}}">
+        <div class="header">
+          <text class="header-title">{{title}}</text>
+        </div>
+        <div class="item" repeat="{{items}}">
+          <text class="item-title">row {{id}}</text>
+        </div>
       </div>
-    </div>
 
-    <loading class="loading-view" display="{{loading_display}}" onloading="onloading">
-      <loading-indicator class="indicator" ></loading-indicator>
-    </loading>
+      <loading class="loading-view" display="{{loading_display}}" onloading="onloading">
+        <loading-indicator class="indicator"></loading-indicator>
+      </loading>
 
-  </scroller>
+    </scroller>
+  </div>
 </template>
 
 <style>
@@ -85,33 +94,48 @@
 
 <script>
   require('weex-components');
+  var dom = weex.requireModule('dom');
   module.exports = {
     methods: {
-      onrefresh: function(e) {
+      onrefresh: function (e) {
         var self = this;
         self.refresh_display = 'show';
         self.$call('modal', 'toast', {
           'message': 'onrefresh'
         });
-        this.$call('timer', 'setTimeout', function() {
+        this.$call('timer', 'setTimeout', function () {
           self.refresh_display = 'hide';
         }, 3000);
       },
-      onloading: function(e) {
+      onloading: function (e) {
         var self = this;
         self.loading_display = 'show';
         self.$call('modal', 'toast', {
           'message': 'onloading'
         });
-        this.$call('timer', 'setTimeout', function() {
+        this.$call('timer', 'setTimeout', function () {
           if (self.sections.length <= 6) {
             self.sections.push(self.moreSections[self.sections.length - 2]);
           }
           self.loading_display = 'hide';
         }, 3000);
+      },
+      onScroll: function (e) {
+        var self = this;
+        this.event = 'contentOffset: ' + JSON.stringify(e.contentOffset) + '\ncontentSize: ' + JSON.stringify(e.contentSize);
+        dom.getComponentRect(this.$el('scroller'), function (ret) {
+          console.log(ret.size.height);
+          var listHeight = ret.size.height;
+          self.progress_width = (listHeight / e.contentSize.height) * 750;
+          var offsetY = e.contentOffset.y > 0 ? 0 : Math.abs(e.contentOffset.y);
+          self.progress = (offsetY / (e.contentSize.height - listHeight)) * (750 - self.progress_width);
+        });
       }
     },
     data: {
+      event: '-',
+      progress_width: 0,
+      progress:0,
       refresh_display: 'hide',
       loading_display: 'hide',
       sections: [

From 36628f59effc80990c274a27de4ca99baa5777cd Mon Sep 17 00:00:00 2001
From: "moxun.ljf" <furmint@foxmail.com>
Date: Fri, 7 Apr 2017 17:30:20 +0800
Subject: [PATCH 2/3] * [android] improvement for single picker

---
 .../weex/appfram/pickers/WXPickersModule.java | 161 ++++++++++++++++--
 1 file changed, 147 insertions(+), 14 deletions(-)

diff --git a/android/sdk/src/main/java/com/taobao/weex/appfram/pickers/WXPickersModule.java b/android/sdk/src/main/java/com/taobao/weex/appfram/pickers/WXPickersModule.java
index 8d92ca1ee2..8bbc4ea16f 100644
--- a/android/sdk/src/main/java/com/taobao/weex/appfram/pickers/WXPickersModule.java
+++ b/android/sdk/src/main/java/com/taobao/weex/appfram/pickers/WXPickersModule.java
@@ -204,13 +204,28 @@
  */
 package com.taobao.weex.appfram.pickers;
 
+import android.content.Context;
 import android.content.DialogInterface;
+import android.graphics.Color;
+import android.os.Build;
+import android.support.annotation.NonNull;
 import android.support.annotation.Nullable;
 import android.support.v7.app.AlertDialog;
+import android.util.TypedValue;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.AdapterView;
+import android.widget.ArrayAdapter;
+import android.widget.Button;
+import android.widget.Checkable;
+import android.widget.ListView;
+import android.widget.TextView;
 
 import com.taobao.weex.annotation.JSMethod;
 import com.taobao.weex.bridge.JSCallback;
 import com.taobao.weex.common.WXModule;
+import com.taobao.weex.utils.WXResourceUtils;
+import com.taobao.weex.utils.WXViewUtils;
 
 import java.util.ArrayList;
 import java.util.HashMap;
@@ -238,13 +253,16 @@ public class WXPickersModule extends WXModule {
     private static final String KEY_ITEMS = "items";
 
     private int selected;
+    private View selectedView;
 
     @JSMethod
     public void pick(Map<String, Object> options, JSCallback callback) {
         List<String> items = safeConvert(getOption(options, KEY_ITEMS, new ArrayList<String>()));
-        int index = getOption(options, KEY_INDEX, 0);
-        String title = getOption(options, KEY_TITLE, null);
-        performSinglePick(items, index, title, callback);
+        try {
+            performSinglePick(items, options, callback);
+        } catch (Throwable throwable) {
+            throwable.printStackTrace();
+        }
     }
 
     @JSMethod
@@ -279,6 +297,14 @@ private <T> T getOption(Map<String, Object> options, String key, T defValue) {
         }
     }
 
+    private int getColor(Map<String, Object> options, String key, int defValue) {
+        Object value = getOption(options, key, null);
+        if (value == null) {
+            return defValue;
+        }
+        return WXResourceUtils.getColor(value.toString(), defValue);
+    }
+
     private void performPickTime(Map<String, Object> options, final JSCallback callback) {
         String value = getOption(options, KEY_VALUE, "");
         DatePickerImpl.pickTime(
@@ -331,16 +357,31 @@ public void onPick(boolean set, @Nullable String result) {
 
     }
 
-    private void performSinglePick(List<String> items, int checked, String title, final JSCallback callback) {
-        selected = checked;
-        new AlertDialog.Builder(mWXSDKInstance.getContext())
-                .setTitle(title)
-                .setSingleChoiceItems(items.toArray(new String[items.size()]), checked, new DialogInterface.OnClickListener() {
-                    @Override
-                    public void onClick(DialogInterface dialog, int which) {
-                        selected = which;
-                    }
-                })
+    private void performSinglePick(List<String> items, final Map<String, Object> options, final JSCallback callback) {
+        selected = getOption(options, KEY_INDEX, 0);
+        final int textColor = getColor(options, "textColor", Color.TRANSPARENT);
+
+        final AlertDialog dialog =  new AlertDialog.Builder(mWXSDKInstance.getContext())
+                .setAdapter(
+                        new ArrayAdapter<String>(
+                                mWXSDKInstance.getContext(),
+                                android.R.layout.simple_list_item_single_choice,
+                                items) {
+                            @NonNull
+                            @Override
+                            public View getView(int position, View convertView, @Nullable ViewGroup parent) {
+                                View itemView =  super.getView(position, convertView, parent);
+                                if (position == selected) {
+                                    selectedView = itemView;
+                                }
+
+                                if (itemView instanceof TextView && textColor != Color.TRANSPARENT) {
+                                    ((TextView) itemView).setTextColor(textColor);
+                                }
+
+                                return itemView;
+                            }
+                        } , null)
                 .setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                     @Override
                     public void onClick(DialogInterface dialog, int which) {
@@ -361,6 +402,98 @@ public void onClick(DialogInterface dialog, int which) {
                         callback.invoke(ret);
                     }
                 })
-                .show();
+                .setCustomTitle(makeTitleView(mWXSDKInstance.getContext(), options))
+                .create();
+
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+            dialog.create();
+        }
+
+        final ListView listView = dialog.getListView();
+        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
+            private View previousView;
+            private int selectionColor = getColor(options, "selectionColor", Color.TRANSPARENT);
+
+            @Override
+            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
+                selected = position;
+                if (previousView == view) {
+                    return;
+                }
+                if (previousView != null) {
+                    previousView.setBackgroundColor(Color.TRANSPARENT);
+                    if (previousView instanceof Checkable) {
+                        ((Checkable) previousView).toggle();
+                    }
+                }
+                if (view instanceof Checkable) {
+                    ((Checkable) view).toggle();
+                }
+                view.setBackgroundColor(selectionColor);
+                previousView = view;
+            }
+        });
+
+        listView.post(new Runnable() {
+            @Override
+            public void run() {
+                if (selectedView != null) {
+                    listView.performItemClick(selectedView, selected, selectedView.getId());
+                }
+            }
+        });
+
+        dialog.getWindow().getDecorView().post(new Runnable() {
+            @Override
+            public void run() {
+                Button confirm = dialog.getButton(DialogInterface.BUTTON_POSITIVE);
+                Button cancel = dialog.getButton(DialogInterface.BUTTON_NEGATIVE);
+
+                if (confirm != null) {
+                    String confirmTitle = getOption(options, "confirmTitle", null);
+                    int confirmColor = getColor(options, "confirmTitleColor", Color.TRANSPARENT);
+
+                    if (confirmTitle != null) {
+                        confirm.setText(confirmTitle);
+                    }
+
+                    if (confirmColor != Color.TRANSPARENT) {
+                        confirm.setTextColor(confirmColor);
+                    }
+                }
+
+                if (cancel != null) {
+                    String cancelTitle = getOption(options, "cancelTitle", null);
+                    int cancelColor = getColor(options, "cancelTitleColor", Color.TRANSPARENT);
+
+                    if (cancelTitle != null) {
+                        cancel.setText(cancelTitle);
+                    }
+
+                    if (cancelColor != Color.TRANSPARENT) {
+                        cancel.setTextColor(cancelColor);
+                    }
+                }
+            }
+        });
+
+        dialog.show();
+    }
+
+    private TextView makeTitleView(Context context, Map<String, Object> options) {
+        String text = getOption(options, "title", null);
+        if (text == null) {
+            return null;
+        }
+        TextView textView = new TextView(context);
+        textView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
+        textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 20);
+        int padding = WXViewUtils.dip2px(12);
+        textView.setPadding(padding, padding, padding, padding);
+        textView.getPaint().setFakeBoldText(true);
+        textView.setBackgroundColor(getColor(options, "titleBackgroundColor", Color.TRANSPARENT));
+        textView.setTextColor(getColor(options, "titleColor", Color.BLACK));
+        textView.setText(text);
+        return textView;
     }
 }

From 094ade0a27d887f13cba959f0f3c2401789353af Mon Sep 17 00:00:00 2001
From: "moxun.ljf" <furmint@foxmail.com>
Date: Mon, 10 Apr 2017 12:56:59 +0800
Subject: [PATCH 3/3] * [android] make key constant

---
 .../weex/appfram/pickers/WXPickersModule.java | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/android/sdk/src/main/java/com/taobao/weex/appfram/pickers/WXPickersModule.java b/android/sdk/src/main/java/com/taobao/weex/appfram/pickers/WXPickersModule.java
index 8bbc4ea16f..292fba002c 100644
--- a/android/sdk/src/main/java/com/taobao/weex/appfram/pickers/WXPickersModule.java
+++ b/android/sdk/src/main/java/com/taobao/weex/appfram/pickers/WXPickersModule.java
@@ -252,6 +252,15 @@ public class WXPickersModule extends WXModule {
     private static final String KEY_MIN = "min";
     private static final String KEY_ITEMS = "items";
 
+    private static final String KEY_TITLE_COLOR = "titleColor";
+    private static final String KEY_CANCEL_TITLE_COLOR = "cancelTitleColor";
+    private static final String KEY_CONFIRM_TITLE = "confirmTitle";
+    private static final String KEY_CANCEL_TITLE = "cancelTitle";
+    private static final String KEY_CONFIRM_TITLE_COLOR = "confirmTitleColor";
+    private static final String KEY_TITLE_BACKGROUND_COLOR = "titleBackgroundColor";
+    private static final String KEY_TEXT_COLOR = "textColor";
+    private static final String KEY_SELECTION_COLOR = "selectionColor";
+
     private int selected;
     private View selectedView;
 
@@ -359,7 +368,7 @@ public void onPick(boolean set, @Nullable String result) {
 
     private void performSinglePick(List<String> items, final Map<String, Object> options, final JSCallback callback) {
         selected = getOption(options, KEY_INDEX, 0);
-        final int textColor = getColor(options, "textColor", Color.TRANSPARENT);
+        final int textColor = getColor(options, KEY_TEXT_COLOR, Color.TRANSPARENT);
 
         final AlertDialog dialog =  new AlertDialog.Builder(mWXSDKInstance.getContext())
                 .setAdapter(
@@ -406,13 +415,15 @@ public void onClick(DialogInterface dialog, int which) {
                 .create();
 
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+            //pre create the content view on dialog.
+            //if not , the content view will not be created until dialog.show() called
             dialog.create();
         }
 
         final ListView listView = dialog.getListView();
         listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
             private View previousView;
-            private int selectionColor = getColor(options, "selectionColor", Color.TRANSPARENT);
+            private int selectionColor = getColor(options, KEY_SELECTION_COLOR, Color.TRANSPARENT);
 
             @Override
             public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
@@ -450,8 +461,8 @@ public void run() {
                 Button cancel = dialog.getButton(DialogInterface.BUTTON_NEGATIVE);
 
                 if (confirm != null) {
-                    String confirmTitle = getOption(options, "confirmTitle", null);
-                    int confirmColor = getColor(options, "confirmTitleColor", Color.TRANSPARENT);
+                    String confirmTitle = getOption(options, KEY_CONFIRM_TITLE, null);
+                    int confirmColor = getColor(options, KEY_CONFIRM_TITLE_COLOR, Color.TRANSPARENT);
 
                     if (confirmTitle != null) {
                         confirm.setText(confirmTitle);
@@ -463,8 +474,8 @@ public void run() {
                 }
 
                 if (cancel != null) {
-                    String cancelTitle = getOption(options, "cancelTitle", null);
-                    int cancelColor = getColor(options, "cancelTitleColor", Color.TRANSPARENT);
+                    String cancelTitle = getOption(options, KEY_CANCEL_TITLE, null);
+                    int cancelColor = getColor(options, KEY_CANCEL_TITLE_COLOR, Color.TRANSPARENT);
 
                     if (cancelTitle != null) {
                         cancel.setText(cancelTitle);
@@ -481,7 +492,7 @@ public void run() {
     }
 
     private TextView makeTitleView(Context context, Map<String, Object> options) {
-        String text = getOption(options, "title", null);
+        String text = getOption(options, KEY_TITLE, null);
         if (text == null) {
             return null;
         }
@@ -491,8 +502,8 @@ private TextView makeTitleView(Context context, Map<String, Object> options) {
         int padding = WXViewUtils.dip2px(12);
         textView.setPadding(padding, padding, padding, padding);
         textView.getPaint().setFakeBoldText(true);
-        textView.setBackgroundColor(getColor(options, "titleBackgroundColor", Color.TRANSPARENT));
-        textView.setTextColor(getColor(options, "titleColor", Color.BLACK));
+        textView.setBackgroundColor(getColor(options, KEY_TITLE_BACKGROUND_COLOR, Color.TRANSPARENT));
+        textView.setTextColor(getColor(options, KEY_TITLE_COLOR, Color.BLACK));
         textView.setText(text);
         return textView;
     }