v3.0.8

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "yo",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "homepage": "https://github.com/doyoe/Yo",
   "authors": [
     "Joy Du"

changelog.md

@@ -1,5 +1,21 @@
+## v3.0.8 (2017-04-07)
+
+### New Features
+
+- `yo-timeline` 时间轴元件新增 `$first-item-color` 参数指定首项的颜色，用以区别其他项。
+- `Carousel` 组件新增内置自定义动画，实现循环无限节点。
+- `Carousel` 组件添加 `window.resize` 事件，并提供 `handleResize` 方法用于当父容器宽度变化时手动调整组件。
+- `PopupPicker` 和 `PopupDateTimePicker` 组件添加 `beforePopupShow` 属性，在点击选择区域后触发，可以用来阻止弹层的弹出。
+
+### Bug Fixes
+- 修复 `PopupPicker` 和 `PopupDateTimePicker` 一起使用时，`PopupDateTimePicker` 内部宽度为 `0` 导致内容不可见的 bug。
+- 修复 `Suggest` 组件在 `results` 为 `null` 时提示 `List DataSource` 错误，而不是展示 `noDataTmpl` 的bug。
+- 修复 `PopupDateTimePicker` 组件打开弹层后弹层内容宽度为0的bug。
+
 ## v3.0.7 (2017-03-17)
+
 ### New Features
+
 - `PopupPicker` 新增多列Picker模式，如果给 `options` 属性传入一个二维数组，就可以开启多列模式。请参考 `PopupPicker` 文档。
 - `Scroller` 和所有列表组件新增API `resetLoadStatus`，用来重置 `加载更多` 功能。
 - 调整了`Scroller` 默认的减速摩擦系数，提升用户体验。

component_dev/actionsheet/src/actionsheet.js

@@ -0,0 +1,93 @@
+/**
+ * @component ActionSheet
+ * @version 3.0.0
+ * @description 底部弹出菜单组件，基于Popup组件实现。
+ *
+ * - 类似iOS原生API调用方式。
+ * - 点击菜单选项后自动关闭组件。
+ *
+ * @instructions {instruInfo: ./actionSheet.md}{instruUrl: actionsheet.html?hideIcon}
+ */
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import Touchable from '../../touchable/src/touchable';
+import Popup from '../../popup/src/popup';
+
+let that = null;
+const container = document.createElement('div');
+
+class ActionSheet extends Component {
+    constructor() {
+        super();
+        this.state = {
+            show: false,
+            cancelText: '',
+            menu: [],
+            title: ''
+        };
+        that = this;
+    }
+
+    hide() {
+        this.setState({
+            show: false
+        });
+    }
+
+    render() {
+        const { show, cancelText, menu, title } = this.state;
+
+        const menuItem = menu.map((item, i) => (
+            <Touchable
+                onTap={() => {
+                    this.hide();
+                    item.onTap();
+                }}
+                key={i + 1}
+                touchClass="item-touch"
+            >
+                <div className="item">{item.text}</div>
+            </Touchable>
+        ));
+
+        const titleItem = !!title ? (<div className="title" key={0}>{title}</div>) : null;
+        menuItem.unshift(titleItem);
+        return (
+            <Popup
+                show={show}
+                onMaskTap={() => this.hide()}
+            >
+                <div className="yo-actionsheet">
+                    <div className="menu">
+                        {menuItem}
+                    </div>
+                    <ul className="action">
+                        <Touchable onTap={() => this.hide()} touchClass="item-touch">
+                            <li
+                                className="item"
+                                onTouchTap={() => this.hide()}
+                            >{cancelText}</li>
+                        </Touchable>
+                    </ul>
+                </div>
+            </Popup>
+        );
+    }
+}
+
+ReactDOM.render(<ActionSheet />, container);
+
+/**
+ * @method ActionSheet
+ * @param {Object} obj 组件需要的对象参数，主要包含标题、菜单数组、取消按钮文字。
+ * @param {Array} obj.menu 菜单选项数组，包含每个选项的文字和回调函数。
+ * @param {String} [obj.title] 菜单选项标题，默认为空。
+ * @param {String} [obj.cancelText] 组件取消按钮文字，默认'取消'。
+ * @description 打开ActionSheet组件。
+ */
+export default ({ menu, title = '', cancelText = '取消' }) => that.setState({
+    show: true,
+    menu,
+    title,
+    cancelText
+});

component_dev/actionsheet/src/index.js

@@ -1,94 +1,5 @@
-/**
- * @component ActionSheet
- * @version 3.0.0
- * @description 底部弹出菜单组件，基于Popup组件实现。
- *
- * - 类似iOS原生API调用方式。
- * - 点击菜单选项后自动关闭组件。
- *
- * @instructions {instruInfo: ./actionSheet.md}{instruUrl: actionsheet.html?hideIcon}
- */
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import Touchable from '../../touchable/src';
-import Popup from '../../popup/src';
+import '../../common/tapEventPluginInit';
 import './style.scss';
+import ActionSheet from './actionsheet';
 
-let that = null;
-const container = document.createElement('div');
-
-class ActionSheet extends Component {
-    constructor() {
-        super();
-        this.state = {
-            show: false,
-            cancelText: '',
-            menu: [],
-            title: ''
-        };
-        that = this;
-    }
-
-    hide() {
-        this.setState({
-            show: false
-        });
-    }
-
-    render() {
-        const { show, cancelText, menu, title } = this.state;
-
-        const menuItem = menu.map((item, i) => (
-            <Touchable
-                onTap={() => {
-                    this.hide();
-                    item.onTap();
-                }}
-                key={i + 1}
-                touchClass="item-touch"
-            >
-                <div className="item">{item.text}</div>
-            </Touchable>
-        ));
-
-        const titleItem = !!title ? (<div className="title" key={0}>{title}</div>) : null;
-        menuItem.unshift(titleItem);
-        return (
-            <Popup
-                show={show}
-                onMaskTap={() => this.hide()}
-            >
-                <div className="yo-actionsheet">
-                    <div className="menu">
-                        {menuItem}
-                    </div>
-                    <ul className="action">
-                        <Touchable onTap={() => this.hide()} touchClass="item-touch">
-                            <li
-                                className="item"
-                                onTouchTap={() => this.hide()}
-                            >{cancelText}</li>
-                        </Touchable>
-                    </ul>
-                </div>
-            </Popup>
-        );
-    }
-}
-
-ReactDOM.render(<ActionSheet />, container);
-
-/**
- * @method ActionSheet
- * @param {Object} obj 组件需要的对象参数，主要包含标题、菜单数组、取消按钮文字。
- * @param {Array} obj.menu 菜单选项数组，包含每个选项的文字和回调函数。
- * @param {String} [obj.title] 菜单选项标题，默认为空。
- * @param {String} [obj.cancelText] 组件取消按钮文字，默认'取消'。
- * @description 打开ActionSheet组件。
- */
-export default ({ menu, title = '', cancelText = '取消' }) => that.setState({
-    show: true,
-    menu,
-    title,
-    cancelText
-});
+export default ActionSheet;

component_dev/alert/src/alert.js

@@ -0,0 +1,36 @@
+/**
+ * @component Alert
+ * @version 3.0.0
+ * @description 警告提示组件，居中展现需要关注的信息，基于Confirm组件实现。
+ *
+ * - 类似浏览器原生API调用方式。
+ * - 自定义组件显隐过程动画。
+ * - 返回一个Promise实例对象，可通过then方法绑定确定按钮回调。
+ *
+ *  @author qingguo.xu
+ * @instructions {instruInfo: ./alert.md}{instruUrl: alert.html?hideIcon}
+ */
+
+import yoConfirm from '../../confirm/src/confirm';
+
+/**
+ * @method Alert
+ * @description Alert API，调用以后在屏幕正中弹出一个Alert，可以按照option对象参数调用，也可以使用简易
+ * 调用方式如 ``Alert(content, title, btnText, animation)``
+ * @param {Object} option 配置对象，里面可以接受如下属性：
+ * @param {String} [option.content] 组件显示的内容
+ * @param {String} [option.title] 组件显示的标题
+ * @param {String} [option.btnText] <3.0.1> 组件按钮的文本
+ * @param {String | Object} [option.animation] 组件显隐执行的动画，格式同Dialog组件
+ * @constructor Alert API
+ */
+export default function Alert(content = '', title = '', btnText = ['确定', ''], animation = 'fade') {
+    if (typeof content === 'object') {
+        const opt = content;
+        content = opt.content != null ? opt.content : '';
+        title = opt.title != null ? opt.title : '';
+        btnText = opt.btnText != null ? [opt.btnText, ''] : ['确定', ''];
+        animation = opt.animation || 'fade';
+    }
+    return yoConfirm(content, title, btnText, animation, false);
+}

component_dev/alert/src/index.js

@@ -1,36 +1,5 @@
-/**
- * @component Alert
- * @version 3.0.0
- * @description 警告提示组件，居中展现需要关注的信息，基于Confirm组件实现。
- *
- * - 类似浏览器原生API调用方式。
- * - 自定义组件显隐过程动画。
- * - 返回一个Promise实例对象，可通过then方法绑定确定按钮回调。
- *
- *  @author qingguo.xu
- * @instructions {instruInfo: ./alert.md}{instruUrl: alert.html?hideIcon}
- */
+import '../../common/tapEventPluginInit';
+import './style.scss';
+import Alert from './alert';
 
-import yoConfirm from '../../confirm/src';
-
-/**
- * @method Alert
- * @description Alert API，调用以后在屏幕正中弹出一个Alert，可以按照option对象参数调用，也可以使用简易
- * 调用方式如 ``Alert(content, title, btnText, animation)``
- * @param {Object} option 配置对象，里面可以接受如下属性：
- * @param {String} [option.content] 组件显示的内容
- * @param {String} [option.title] 组件显示的标题
- * @param {String} [option.btnText] <3.0.1> 组件按钮的文本
- * @param {String | Object} [option.animation] 组件显隐执行的动画，格式同Dialog组件
- * @constructor Alert API
- */
-export default function Alert(content = '', title = '', btnText = ['确定', ''], animation = 'fade') {
-    if (typeof content === 'object') {
-        const opt = content;
-        content = opt.content != null ? opt.content : '';
-        title = opt.title != null ? opt.title : '';
-        btnText = opt.btnText != null ? [opt.btnText, ''] : ['确定', ''];
-        animation = opt.animation || 'fade';
-    }
-    return yoConfirm(content, title, btnText, animation, false);
-}
+export default Alert;