From 1107fa59dcd78263f35215c38b0c37708ffe0b4c Mon Sep 17 00:00:00 2001 From: xupaopaopaopao Date: Tue, 2 May 2017 16:13:15 +0800 Subject: [PATCH] release v3.0.9 --- changelog.md | 15 ++ .../calendar/__tests__/calendar.test.js | 70 ++++++- component_dev/calendar/src/CalendarCore.js | 198 ++++++++++-------- component_dev/calendar/src/calendar.js | 40 +++- component_dev/carousel/src/carousel.js | 6 +- component_dev/lazyimage/index.js | 16 +- component_dev/picker/src/PickerCore.js | 10 +- component_dev/picker/src/PickerItem.js | 4 +- component_dev/picker/src/picker.js | 39 +++- component_dev/scroller/src/scroller.js | 19 +- doc/changelog.html | 15 +- doc/component-ActionSheet.html | 2 +- doc/component-Alert.html | 2 +- doc/component-Calendar.html | 31 ++- doc/component-Carousel.html | 2 +- doc/component-Confirm.html | 2 +- doc/component-DateTimePicker.html | 2 +- doc/component-Dialog.html | 2 +- doc/component-Grouplist.html | 2 +- doc/component-InputNumber.html | 2 +- doc/component-LazyImage.html | 2 +- doc/component-List.html | 2 +- doc/component-Loading.html | 2 +- doc/component-Modal.html | 2 +- doc/component-MultiList.html | 2 +- doc/component-Picker.html | 2 +- doc/component-Popup.html | 2 +- doc/component-PopupDateTimePicker.html | 2 +- doc/component-PopupPicker.html | 2 +- doc/component-Range.html | 2 +- doc/component-Rating.html | 2 +- doc/component-Scroller.html | 2 +- doc/component-Sticky.html | 2 +- doc/component-Suggest.html | 2 +- doc/component-SwipeMenu.html | 2 +- doc/component-SwipeMenuList.html | 2 +- doc/component-Switch.html | 2 +- doc/component-Toast.html | 2 +- doc/component-Touchable.html | 2 +- doc/component.html | 2 +- doc/index.html | 2 +- docs/component/actionSheet.md | 2 +- docs/component/alert.md | 2 +- docs/component/calendar.md | 2 +- docs/component/carousel.md | 2 +- docs/component/confirm.md | 2 +- docs/component/dateTimePicker.md | 2 +- docs/component/dialog.md | 2 +- docs/component/grouplist.md | 2 +- docs/component/inputNumber.md | 2 +- docs/component/lazyimage.md | 2 +- docs/component/list/list.md | 2 +- docs/component/loading.md | 2 +- docs/component/modal.md | 2 +- docs/component/multilist/product.md | 2 +- docs/component/picker.md | 2 +- docs/component/popup.md | 2 +- docs/component/popupdatetimepicker.md | 2 +- docs/component/popuppicker.md | 2 +- docs/component/range.md | 2 +- docs/component/rating.md | 2 +- docs/component/scroller/basic.md | 2 +- docs/component/sticky.md | 2 +- docs/component/suggest/suggest.md | 2 +- docs/component/swipeMenu.md | 2 +- docs/component/swipeMenuList.md | 2 +- docs/component/switch.md | 2 +- docs/component/toast.md | 2 +- docs/component/touchable.md | 2 +- package.json | 2 +- ydoc.config | 2 +- 71 files changed, 373 insertions(+), 208 deletions(-) diff --git a/changelog.md b/changelog.md index bff18446..e94c10c6 100644 --- a/changelog.md +++ b/changelog.md @@ -1,3 +1,18 @@ +## v3.0.9 (2017-05-02) + +### New Features +- `Calendar` 添加 `allowSelectionBeforeToday` 属性，允许用户选择当前日期之前的时间段。 +- `Picker` 添加 `itemHeight` 属性，用来设置 item 高度。 + +### Bug Fixes +- 修复 `Scroller` 在调用 `scrollTo` 方法时，吸顶容器没有被正确刷新的 bug。 +- 修复 `Scroller` 在回弹过程中点击页面导致无法回弹到正确位置的 bug。 +- 修复 `LazyImage` 在更新之后获取位置不正确导致图片无法加载的 bug。 +- 修复 `Calendar` 当 `duration` 的起始日期大于当前日期时，可选择区域不准确的 bug。 +- 修复 `Calendar` 当 `duration` 属性改变时，起始日期所在的周未及时更新的 bug。 +- 修复 `Calendar` 在 `onChange` 触发时，输出的格式不规范的 bug，将 YYYY-MM-(D)D 格式改成 YYYY-MM-DD 格式。 +- 修复 `Carousel` 当 触发 `toucheEnd` 事件时没有生成对应 `touch` 对象情况下， 没有重置定时器的 bug。 + ## v3.0.8 (2017-04-07) ### New Features diff --git a/component_dev/calendar/__tests__/calendar.test.js b/component_dev/calendar/__tests__/calendar.test.js index d16dae25..e6a5d963 100644 --- a/component_dev/calendar/__tests__/calendar.test.js +++ b/component_dev/calendar/__tests__/calendar.test.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Component } from 'react'; import { mount } from 'enzyme'; import injectTapEventPlugin from 'react-tap-event-plugin'; import CalendarCore from '../src/CalendarCore'; @@ -13,7 +13,6 @@ const formatDate = time => { }; const calendarCore = new CalendarCore(); -// custom在前面，要不getGroupKey test会出错 const customHolidayData = calendarCore.getData({ duration: ['2017-10-1', '2018-4-30'] }); @@ -42,7 +41,7 @@ test('the number of day besides today which can be selected is 181, and all Chec num++; j % 6 === 0 ? expect(weekend).toBeTruthy() : expect(weekend).toBeFalsy(); } - + expect(isCheckIn).toBeFalsy(); expect(isCheck).toBeFalsy(); expect(isCheckOut).toBeFalsy(); @@ -50,10 +49,9 @@ test('the number of day besides today which can be selected is 181, and all Chec }); }); expect(num).toBe(181); -}); - -test('the groupKey of no selectonStart is today', () => { - expect(calendarCore.getGroupKey()).toBe(`${toDayYear}年${toDayMonth}月`); + const allDateItem = testWrap.find('ul.week li'); + const disableDateLenght = allDateItem.filter('.disabled').length; + expect(allDateItem.length - disableDateLenght).toBe(181); }); test('the today node must has today class', () => { @@ -117,10 +115,6 @@ const customWrap = mount(); -test('the groupKey should be the group where the selectionStart located', () => { - expect(customCore.getGroupKey()).toBe(`${selectionStartYear}年${selectionStartMonth}月`); -}); - test('the Check property should be true between selectionStart and selectionEnd, the custom text should be setted', () => { let num = 0; customData.forEach(item => { @@ -160,4 +154,58 @@ const renderDateWrap = mount(); test('only today will be used the customed renderDate', () => { expect(renderDateWrap.find('li.today').children().html()).toBe('我不管，今天必须实现成这种模式'); expect(renderDateWrap.find('.custom-today-class')).toHaveLength(1); +}); + +const testCore = new CalendarCore(); +const futureData = testCore.getData({duration: [selectionStart, selectionEnd]}); +const futureWrap = mount() +test('the future duration which can be selected is 7', () => { + let num = 0; + futureData.forEach(item => { + item.week.forEach(dayItem => { + if (!dayItem.disabled) num++; + }); + }); + const allDateItem = futureWrap.find('ul.week li'); + const disableDateLenght = allDateItem.filter('.disabled').length; + expect(allDateItem.length - disableDateLenght).toBe(7); + expect(num).toBe(7); +}); + +const selectionBeforeTodayData = testCore.getData({ duration: ['2017-01-10', '2017-01-20' ], allowSelectionBeforeToday: true }); +const selectionBeforeTodayWrap = mount() +test('the allowSelectionBeforeToday is true, the range of selection is only depend on the duration property', () => { + let num = 0; + selectionBeforeTodayData.forEach(item => { + item.week.forEach(dayItem => { + if (!dayItem.disabled) num++; + }); + }); + const allDateItem = selectionBeforeTodayWrap.find('ul.week li'); + const disableDateLenght = allDateItem.filter('.disabled').length; + expect(allDateItem.length - disableDateLenght).toBe(11); + expect(num).toBe(11); +}); + +class ChangeDuration extends Component { + state = { + duration: ['2017-2-10', '2017-3-10'], + }; + + render() { + return ( + + ); + } +} + +const changeDurationWrap = mount(); +test('the date which can be selected should correct when the duration property changed', () => { + const allDateItem = changeDurationWrap.find('ul.week li'); + const disableDateLenght = allDateItem.filter('.disabled').length; + expect(allDateItem.length - disableDateLenght).toBe(29); + changeDurationWrap.setState({duration: ['2017-1-10', '2017-4-10']}); + const allDateItem2 = changeDurationWrap.find('ul.week li'); + const disableDateLenght2 = allDateItem2.filter('.disabled').length; + expect(allDateItem2.length - disableDateLenght2).toBe(91); }); \ No newline at end of file diff --git a/component_dev/calendar/src/CalendarCore.js b/component_dev/calendar/src/CalendarCore.js index 5d63fe31..b5e23ea4 100644 --- a/component_dev/calendar/src/CalendarCore.js +++ b/component_dev/calendar/src/CalendarCore.js @@ -44,14 +44,25 @@ const isWeekend = (dayNum, firstDay) => { }; /** - * onlyFormatMonth 仅格式化月，eg: 2016-08-9 + * getDateInfoArr 获取年、月、日、星期等信息 * @param date {Date} + * @returns {Array} */ -const onlyFormatMonth = date => [ +const getDateInfoArr = (date = new Date()) => [ date.getFullYear(), - convert2digit(date.getMonth() + 1), - date.getDate() -].join('-'); + date.getMonth() + 1, + date.getDate(), + date.getDay(), +]; + +/** + * onlyFormatMonth 仅格式化月，eg: 2016-08-9 + * @param dateObj {Date} + */ +const onlyFormatMonth = dateObj => { + const [year, month, dateNum] = getDateInfoArr(dateObj); + return [year, convert2digit(month), convert2digit(dateNum)].join('-'); +}; /** * formatMonth 格式化某年某月月为指定格式， eg： 2016/08 @@ -85,18 +96,6 @@ const formatMonthChinese = (year, month) => `${year}年${month}月`; */ const compareDate = (date1, date2) => date1.getTime() - date2.getTime(); -/** - * getDateInfoArr 获取年、月、日、星期等信息 - * @param date {Date} - * @returns {Array} - */ -const getDateInfoArr = date => [ - date.getFullYear(), - date.getMonth() + 1, - date.getDay(), - date.getDate() -]; - /** * isHoliday 判断是否是假期 * @param year {number} @@ -119,22 +118,26 @@ const isHoliday = (year, month, day) => { return res.trim(); }; +/** + * 处理IOS不兼容2016-10-01， 但不改变原有日期格式 + * @param str {string} + * @return Date + */ +const getDate = str => new Date(str.replace(/-/g, '/')); + /** * 继承ComponentCore组件，主要基于观察者模式，注册、触发自定义事件 */ export default class CalendarCore extends ComponentCore { constructor() { super('canlendar'); - this.checkIn = null; this.checkInDate = null; - this.checkOut = null; this.checkOutDate = null; - this.checkRange = []; // 缓存入、住店中间范围ITem对象的引用 - this.hasToday = false; // today 检测 - this.beforeToday = true; // beginDate是否在today之前 - this.isRender = false; + this.isRender = false; // + this.beginDate = null; // 开始日期 + this.endDate = null; // 结束日期 + this.prevBeginDate = null; // 前一次的开始日期 this.allowSingle = false; // 是否尽允许选择单日情况 - this.groupKey = null; // 入店日期所在的月份分组的key, eg: '2017年10月' } /** @@ -147,19 +150,17 @@ export default class CalendarCore extends ComponentCore { selectionStart: '', selectionEnd: '' }; - const resStr = str.replace(/\//g, '-'); - if (!!this.checkOut || !this.checkIn || this.allowSingle) { - resObj.selectionStart = resStr; + const strDate = getDate(str); + if (!!this.checkOutDate || !this.checkInDate || this.allowSingle) { + resObj.selectionStart = onlyFormatMonth(strDate); return this.emitEvent('check', resObj); } - if (!!this.checkIn) { - // 处理IOS不兼容2016-10-01， 但不改变原有日期格式 - const tempStr = str.replace(/-/g, '/'); - if (compareDate(new Date(tempStr), this.checkInDate) < 0) { - resObj.selectionStart = resStr; + if (!!this.checkInDate) { + if (compareDate(strDate, this.checkInDate) < 0) { + resObj.selectionStart = onlyFormatMonth(strDate); } else { resObj.selectionStart = onlyFormatMonth(this.checkInDate); - resObj.selectionEnd = resStr; + resObj.selectionEnd = onlyFormatMonth(strDate); } return this.emitEvent('check', resObj); } @@ -167,60 +168,55 @@ export default class CalendarCore extends ComponentCore { } /** - * isToday 某年某月某天是否是今天， this.hasToday存储结果 + * isToday 某年某月某天是否是今天 * @param year {String} * @param month {String} * @param day {String} * @returns {Boolean} */ isToday(year, month, day) { - const tempDate = new Date(); - if (!this.checkIn) this.groupKey = formatMonthChinese(year, month); - this.hasToday = tempDate.getFullYear() === parseFloat(year) && (tempDate.getMonth() + 1) === parseFloat(month) && tempDate.getDate() === parseFloat(day); - return this.hasToday; - } - - /** - * 获取 checkIn 入店日期所在的月份分组的key - */ - getGroupKey() { - return this.groupKey; + const [todayYear, todayMonth, todayDateNum] = getDateInfoArr(); + return todayYear === parseFloat(year) && todayMonth === parseFloat(month) && todayDateNum === parseFloat(day); } /** * getDate 获取满足需要的groupList格式数据 + * @param prevDuration { Number | Array } duration属性变化之前的起始时间日期 * @param duration {Number | Array} 时间间隔或起始时间日期 * @param selectionStart {String} 入店时间， eg: 2016-10-01 * @param selectionEnd {String} 离店时间， eg: 2016-10-01 * @param allowSingle {Boolean} 允许单选 + * @param allowSelectionBeforeToday {Boolean} 允许选择今天之前的日期 * @returns {Array} */ - getData({ duration = 90, selectionStart = '', selectionEnd = '', allowSingle }) { - let beginDate = ''; - let endDate = ''; - const todayDate = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()); + getData({ prevDuration = 0, duration = 90, selectionStart = '', selectionEnd = '', allowSingle, allowSelectionBeforeToday = false }) { + const [todayYear, todayMonth, todayDateNum] = getDateInfoArr(); + const todayDate = new Date(todayYear, todayMonth - 1, todayDateNum); this.allowSingle = allowSingle; if (typeof duration === 'object') { - beginDate = new Date(duration[0].replace(/-/g, '/')); - endDate = new Date(duration[1].replace(/-/g, '/')); + this.beginDate = getDate(duration[0]); + this.endDate = getDate(duration[1]); + } else { + this.beginDate = todayDate; + this.endDate = getEndDate(this.beginDate, duration); + } + if ((prevDuration === 0) || (JSON.stringify(prevDuration) === JSON.stringify(duration))) { + this.prevBeginDate = null; + } else if (typeof prevDuration === 'object') { + this.prevBeginDate = getDate(prevDuration[0]); } else { - beginDate = todayDate; - endDate = getEndDate(beginDate, duration); + this.prevBeginDate = todayDate; } - this.checkIn = selectionStart.replace(/-/g, '/'); - this.checkOut = selectionEnd.replace(/-/g, '/'); - this.checkInDate = new Date(this.checkIn); - this.checkOutDate = new Date(this.checkOut); - this.hasToday = false; - this.beforeToday = compareDate(beginDate, todayDate); - // 入店日期为今天之前的情况， 则重置为今天 - if (compareDate(this.checkInDate, todayDate) < 0) { + this.checkInDate = selectionStart ? getDate(selectionStart) : null; + this.checkOutDate = selectionEnd ? getDate(selectionEnd) : null; + // 不能选中今天之前的日期时，入店日期为今天之前的情况， 则重置为今天 + if (!allowSelectionBeforeToday && selectionStart && compareDate(this.checkInDate, todayDate) < 0) { this.checkInDate = todayDate; } // 两次选中同一天情况，相当于allowSingle - if (!this.allowSingle && this.checkIn === this.checkOut) { + if (!this.allowSingle && selectionStart === selectionEnd) { this.allowSingle = true; } @@ -229,18 +225,18 @@ export default class CalendarCore extends ComponentCore { [this.checkInDate, this.checkOutDate] = [this.checkOutDate, this.checkInDate]; } - return this.getCheckArr({ beginDate, endDate }); + return this.getCheckArr(allowSelectionBeforeToday, compareDate(this.beginDate, todayDate)); } /** * getCheckArr， 根据开始日期获取满足条件的dataSource - * @param beginDate {Date} 开始日期对象 - * @param endDate {Date} 结束日期对象 + * @param allowSelectionBeforeToday 是否严格按照duration属性来渲染，允许选择今天之前的日期 + * @param compareBeginAndToday beginDate 和 TodayDate比较返回值 * @returns {Array} */ - getCheckArr({ beginDate, endDate }) { - const [beginYear, beginMonth] = getDateInfoArr(beginDate); - const [endYear, endMonth, endDay, endDayNum] = getDateInfoArr(endDate); + getCheckArr(allowSelectionBeforeToday, compareBeginAndToday) { + const [beginYear, beginMonth] = getDateInfoArr(this.beginDate); + const [endYear, endMonth, endDateNum, endDay] = getDateInfoArr(this.endDate); const endMonthLastDate = getLastDayOfMonth(endYear, endMonth).getDate(); let tempYear = beginYear; let tempMonth = beginMonth; @@ -250,20 +246,31 @@ export default class CalendarCore extends ComponentCore { // baseIndex 基数值，用于补足日期显示范围最后一周的剩下几天 // addNormalDateFlag 避免超过当前月的最大值，如32 // disable 同上，最后一周补上额外的几天不可点击 + let hasToday = false; const addMapFn = (item, i, { baseIndex = 0, addNormalDateFlag = true, disable = false }) => { const day = baseIndex + i + 1; + // 是否是今天 + let isToday = false; + if (hasToday) { + isToday = false; + } else { + isToday = hasToday = this.isToday(tempYear, tempMonth, day); + } + // 禁止选择的日期：（1）为了美观的，日期超出duration之后的 （2）今天之前的 （3）日期在duration之前的 + const disabled = disable || (!allowSelectionBeforeToday && compareBeginAndToday < 0 && !hasToday) + || (compareDate(new Date(tempYear, tempMonth - 1, day), this.beginDate) < 0); if (addNormalDateFlag || day <= endMonthLastDate) { return { day, date: formatMonth(tempYear, tempMonth), lunar: solar2lunar(tempYear, tempMonth, day).str, - today: this.hasToday ? false : this.isToday(tempYear, tempMonth, day), + today: isToday, isCheckIn: false, isCheck: false, isCheckOut: false, weekend: isWeekend(day, dayFirst), holiday: isHoliday(tempYear, tempMonth, day), - disabled: disable || this.beforeToday <= 0 && !this.hasToday + disabled }; } return { disabled: true }; @@ -272,7 +279,7 @@ export default class CalendarCore extends ComponentCore { const isEnd = tempYear === endYear && tempMonth === endMonth; const tempDateObj = getLastDayOfMonth(tempYear, tempMonth); const dayLast = isEnd ? endDay : tempDateObj.getDay(); - const dayLength = isEnd ? endDayNum : tempDateObj.getDate(); + const dayLength = isEnd ? endDateNum : tempDateObj.getDate(); // 某月第一天之前的空格数 const firstMonthArr = getArrayByLength(dayFirst).fill({ disabled: true }); @@ -286,7 +293,7 @@ export default class CalendarCore extends ComponentCore { // 补足显示日期范围最后一周的剩下几天情况, 为了美观 if (isEnd) { const lastWeekArr = getArrayByLength(6 - endDay).fill(0).map((item, i) => addMapFn(item, i, { - baseIndex: endDayNum, + baseIndex: endDateNum, addNormalDateFlag: false, disable: true })); @@ -318,26 +325,22 @@ export default class CalendarCore extends ComponentCore { let tempWeekArr = []; monthArr.forEach((item, i) => { const itemDayObj = item; - if (!itemDayObj.disabled && !!this.checkIn) { - const itemStr = `${itemDayObj.date}/${itemDayObj.day}`; - const itemDate = new Date(itemStr); + if (!itemDayObj.disabled && !!this.checkInDate) { + const itemDate = getDate(`${itemDayObj.date}/${itemDayObj.day}`); const compareIn = compareDate(itemDate, this.checkInDate); - const compareOut = !!this.checkOut && compareDate(itemDate, this.checkOutDate); + const compareOut = !!this.checkOutDate && compareDate(itemDate, this.checkOutDate); if (!compareIn) { - this.checkIn = itemDayObj; + this.checkInDate = itemDate; itemDayObj.isCheckIn = true; - this.groupKey = groupKey; } if ((compareIn > 0 && compareOut < 0) || ((!compareIn || compareOut === 0) && !this.allowSingle)) { itemDayObj.isCheck = true; - this.checkRange.push(itemDayObj); } if (compareOut === 0) { - this.checkOut = itemDayObj; + this.checkOutDate = itemDate; itemDayObj.isCheckOut = true; } } - if (i % 7 === 6) { tempWeekArr.push(itemDayObj); resMonthArr.push(this.getWeekObj(tempWeekArr, groupKey)); @@ -361,19 +364,31 @@ export default class CalendarCore extends ComponentCore { isRender: false, groupKey }; - if (!this.checkIn) { - return resObj; - } weekArr.forEach(item => { - if (item.disabled) { + const { disabled, date, day } = item; + if (disabled) { return; } - const itemStr = `${item.date}/${item.day}`; - const itemDate = new Date(itemStr); - const compareIn = compareDate(itemDate, this.checkInDate); - let compareOut = ''; - if (!!this.checkOut && this.isRender) { - compareOut = compareDate(itemDate, this.checkOutDate); + + // duration 乱变时，beginDate 所在的月 且 在beginDate 之前的日期全要刷新 + if (this.prevBeginDate !== null) { + const [prevBeginYear, prevBeginMonth, prevBeginDateNum] = getDateInfoArr(this.prevBeginDate); + if (formatMonth(prevBeginYear, prevBeginMonth) === date && day < prevBeginDateNum) { + resObj.isRender = true; + } + } + + const itemDate = new Date(`${date}/${day}`); + const compareIn = this.checkInDate && compareDate(itemDate, this.checkInDate); + const compareBegin = compareDate(itemDate, this.beginDate); + const compareEnd = compareDate(itemDate, this.endDate); + // 起始日期改变时，所在的周也要刷新 + if (compareBegin === 0 || compareEnd === 0) { + resObj.isRender = true; + } + + if (!!this.checkOutDate && this.isRender) { + const compareOut = compareDate(itemDate, this.checkOutDate); // 结束 if (compareOut <= 0) { this.isRender = !!compareOut; @@ -385,7 +400,6 @@ export default class CalendarCore extends ComponentCore { this.isRender = true; } }); - // console.log(this.isRender) return resObj; } } diff --git a/component_dev/calendar/src/calendar.js b/component_dev/calendar/src/calendar.js index 3e0dee75..be9a5a2a 100644 --- a/component_dev/calendar/src/calendar.js +++ b/component_dev/calendar/src/calendar.js @@ -5,10 +5,9 @@ * * 可通过以下两种方式定义日期范围: * - 传入具体的起、始日期。 - * - 传入距离系统当日的间隔天数，默认90。 - * 入住时间在今天之前，会被重置为今天。 - * 入住时间在离店时间之后，则互换。 - * 默认selectionStart、selectionEnd可选择同一天。 + * - 传入距离系统当日的间隔天数，默认90。入住时间在离店时间之后，则互换。默认selectionStart、selectionEnd可选择同一天。 + * - 默认不能选择今天之前的日期。同时，如果 `selectionStart` 时间在今天之前，会被重置为今天。 + * 可以通过 `allowSelectionBeforeToday` 属性来严格按照 `duration` 渲染，消除默认场景。 * * @instructions {instruInfo: ./calendar.md}{instruUrl: calendar.html?hideIcon} * @author qingguo.xu @@ -28,6 +27,7 @@ const defaultProps = { selectionStartText: '入店', selectionEndText: '离店', allowSingle: false, + allowSelectionBeforeToday: false, onChange() {}, renderDate() {} }; @@ -79,6 +79,14 @@ const propTypes = { * @default false */ allowSingle: PropTypes.bool, + /** + * @property allowSelectionBeforeToday + * @description 是否严格根据 `duration` 属性渲染，支持选择今天之前的日期 + * @type Bool + * @default false + * @version 3.0.9 + */ + allowSelectionBeforeToday: PropTypes.bool, /** * @property onChange * @type Function @@ -103,10 +111,10 @@ export default class Calendar extends Component { constructor(props) { super(props); - const { duration, selectionStart, selectionEnd, allowSingle } = props; + const { duration, selectionStart, selectionEnd, allowSingle, allowSelectionBeforeToday } = props; this.calendarModel = new CalendarCore(); this.state = { - data: this.calendarModel.getData({ duration, selectionStart, selectionEnd, allowSingle }) + data: this.calendarModel.getData({ duration, selectionStart, selectionEnd, allowSingle, allowSelectionBeforeToday }) }; this.groupList = null; } @@ -117,15 +125,25 @@ export default class Calendar extends Component { } componentDidMount() { - const groupKey = this.calendarModel.getGroupKey(); + let groupKeyDate = new Date(); + const { selectionStart } = this.props; + if (!!selectionStart) { + groupKeyDate = new Date(selectionStart.replace(/-/g, '/')); + } + const groupKey = `${groupKeyDate.getFullYear()}年${groupKeyDate.getMonth() + 1}月`; this.groupList.scrollToGroup(groupKey); } componentWillReceiveProps(nextProps) { - const { duration, selectionStart, selectionEnd, allowSingle } = nextProps; - this.setState({ - data: this.calendarModel.getData({ duration, selectionStart, selectionEnd, allowSingle }) - }); + const { duration, selectionStart, selectionEnd, allowSingle, allowSelectionBeforeToday } = nextProps; + const { duration: prevDuration } = this.props; + let data = null; + if (typeof duration === 'number' && typeof prevDuration === 'number') { + data = this.calendarModel.getData({ duration, selectionStart, selectionEnd, allowSingle, allowSelectionBeforeToday }); + } else { + data = this.calendarModel.getData({ prevDuration, duration, selectionStart, selectionEnd, allowSingle, allowSelectionBeforeToday }); + } + this.setState({ data }); } render() { diff --git a/component_dev/carousel/src/carousel.js b/component_dev/carousel/src/carousel.js index af066143..a5ed2ded 100644 --- a/component_dev/carousel/src/carousel.js +++ b/component_dev/carousel/src/carousel.js @@ -355,7 +355,6 @@ class Carousel extends Component { handleTouchStart(e) { e.preventDefault(); - // e.stopPropagation(); this.pause(); this.aniObj.touchstartList = e.touches[0]; this.aniObj.touchstartLocation = [e.touches[0].clientX, e.touches[0].clientY]; @@ -364,7 +363,6 @@ class Carousel extends Component { handleTouchMove(e) { e.preventDefault(); - // e.stopPropagation(); this.aniObj.touchmoveList = e.touches[0]; this.aniObj.touchmoveLocation = [e.touches[0].clientX, e.touches[0].clientY]; @@ -373,11 +371,11 @@ class Carousel extends Component { handleTouchEnd(e) { e.preventDefault(); - // e.stopPropagation(); this.aniObj.touchendList = e.touches.length > 0 ? e.touches[0] : this.aniObj.touchmoveList; if (!this.aniObj.touchendList) { + this.play(); return; } this.aniObj.touchendLocation = [ @@ -394,9 +392,9 @@ class Carousel extends Component { handleTouchCancle(e) { e.preventDefault(); - // e.stopPropagation(); if (this.ani.touchcancel) { this.ani.touchcancel(this.aniObj); + this.play(); return; } this.aniObj.touchendList = this.aniObj.touchmoveList || this.aniObj.touchstartList; diff --git a/component_dev/lazyimage/index.js b/component_dev/lazyimage/index.js index be109979..9692253e 100644 --- a/component_dev/lazyimage/index.js +++ b/component_dev/lazyimage/index.js @@ -134,8 +134,10 @@ export default class extends Component { } // 父组件render时,需要重置这个组件的loaded状态和context - componentWillReceiveProps(nextProps, nextContext) { - this.refresh(nextContext); + componentWillReceiveProps(nextProps) { + // 此处的 refresh 需要等到 didupdate 之后才能获取正确的位置 + // this.refresh(nextContext); + this._isUpdate = true; if (this.state.src !== nextProps.src) { this.loading = TO_BE_LOADED; @@ -143,6 +145,14 @@ export default class extends Component { } } + componentDidUpdate() { + if (this._isUpdate) { + this._isUpdate = false; + + this.refresh(this.context); + } + } + componentWillUnmount() { const scroller = this.context.list || this.context.scroller; if (scroller) { @@ -206,7 +216,7 @@ export default class extends Component { 'className', 'title', 'style' - ])} + ]) } alt={this.props.alt} ref={(img) => { if (img) this.img = img; diff --git a/component_dev/picker/src/PickerCore.js b/component_dev/picker/src/PickerCore.js index cd5a0a47..66fda45a 100644 --- a/component_dev/picker/src/PickerCore.js +++ b/component_dev/picker/src/PickerCore.js @@ -24,7 +24,7 @@ export default class PickerCore extends ComponentCore { this.loopedSize = loopedSize; // mutable states // 可以通过父组件render改变 - this.refresh({ dataSource, value, containerHeight, looped }); + this.refresh({ dataSource, value, containerHeight, looped, itemHeight, loopedSize }); } /** @@ -40,12 +40,16 @@ export default class PickerCore extends ComponentCore { value, containerHeight = this.containerHeight, looped, + itemHeight, + loopedSize, manually = false }) { this.looped = looped; + this.loopedSize = loopedSize; this.size = looped ? this.loopedSize : dataSource.length; this.dataSource = dataSource; this.containerHeight = containerHeight; + this.itemHeight = itemHeight; this.middlePointY = (containerHeight - this.itemHeight) / 2; const visibleSize = Math.floor((this.containerHeight / this.itemHeight) * 1.5); @@ -81,7 +85,9 @@ export default class PickerCore extends ComponentCore { dataSource, this.containerHeight, this.contentHeight, - this.thunks + this.thunks, + this.loopedSize, + this.itemHeight ); } } diff --git a/component_dev/picker/src/PickerItem.js b/component_dev/picker/src/PickerItem.js index 40a8b507..2ab7dae3 100644 --- a/component_dev/picker/src/PickerItem.js +++ b/component_dev/picker/src/PickerItem.js @@ -35,7 +35,9 @@ export default class extends Component { }} style={{ transform, - WebkitTransform: transform + WebkitTransform: transform, + height: `${itemHeight}px`, + lineHeight: `${itemHeight}px` }} className="item" > diff --git a/component_dev/picker/src/picker.js b/component_dev/picker/src/picker.js index 41b95ed7..68b1e5ed 100644 --- a/component_dev/picker/src/picker.js +++ b/component_dev/picker/src/picker.js @@ -98,7 +98,22 @@ export default class Picker extends Component { * @default false * @description 是否阻止默认事件传播，默认为false不阻止。 */ - stopPropagation: PropTypes.bool + stopPropagation: PropTypes.bool, + /** + * @property itemHeight + * @version 3.0.9 + * @skip + * @type Number + * @default 30 + * @description 滚动Item的高度, 该属性的修改最好配合样式,如果设值为45，则需 extraClass传入 `yo-picker-xxx` 并扩展样式 + * ``` + * @include yo-picker( + * $name: 'xxx', + * $item-height: .45rem + * ); + * ``` + */ + itemHeight: PropTypes.number }; static defaultProps = { @@ -109,20 +124,21 @@ export default class Picker extends Component { looped: true, unit: null, stopPropagation: false, - extraClass: '' + extraClass: '', + itemHeight: ITEM_HEIGHT }; constructor(props) { super(props); - const { options, value, height, looped } = props; - const size = looped ? SIZE : options.length; + const { options, value, height, looped, itemHeight } = props; + const size = looped ? (SIZE * ITEM_HEIGHT) / itemHeight : options.length; this.pickerModel = new PickerCore({ dataSource: options, value, loopedSize: size, containerHeight: height, - itemHeight: ITEM_HEIGHT, + itemHeight, looped }); // 因为槽的数量和组件的高度有关,因此也在state中维护 @@ -176,11 +192,13 @@ export default class Picker extends Component { * @param nextProps */ componentWillReceiveProps(nextProps) { - const { value, options, height, looped } = nextProps; + const { value, options, height, looped, itemHeight } = nextProps; if (options === this.props.options && height === this.state.height - && looped === this.props.looped) { + && looped === this.props.looped + && itemHeight === this.props.itemHeight + ) { if (this.props.value !== value) { this.pickerModel.setValue(value, true); } @@ -189,8 +207,10 @@ export default class Picker extends Component { dataSource: options, value, containerHeight: height, + loopedSize: looped ? (SIZE * ITEM_HEIGHT) / itemHeight : options.length, looped, - manually: true + manually: true, + itemHeight }); } } @@ -247,8 +267,7 @@ export default class Picker extends Component { } render() { - const itemHeight = ITEM_HEIGHT; - const { extraClass, unit } = this.props; + const { extraClass, unit, itemHeight } = this.props; const looped = this.pickerModel.looped; const { visibleList, offsetY, height, contentHeight, thunks } = this.state; return ( diff --git a/component_dev/scroller/src/scroller.js b/component_dev/scroller/src/scroller.js index f7f740d5..5ce5050d 100644 --- a/component_dev/scroller/src/scroller.js +++ b/component_dev/scroller/src/scroller.js @@ -733,11 +733,6 @@ export default class Scroller extends Component { this.initiated = 0; this.endTime = utils.getTime(); - if (!this.moved) { - this._execEvent('onScrollCancel'); - return; - } - // set pullrefresh if (this.state.usePullRefresh && this.y >= this.props.pullRefreshHeight) { if (this.refreshState === REFRESHSTATUS.LOAD) { @@ -767,16 +762,19 @@ export default class Scroller extends Component { this.scrollTo(newX, newY); // ensures that the last position is rounded + if (!this.moved) { + this._execEvent('onScrollCancel'); + return; + } + // start momentum animation if needed if (this.props.momentum && duration < 300) { - momentumX = this.hasHorizontalScroll ? - utils.momentum(this.x, this.startX, duration, this.maxScrollX, this.horizontalBounce ? this.wrapperWidth : 0, this.props.deceleration) + momentumX = this.hasHorizontalScroll ? utils.momentum(this.x, this.startX, duration, this.maxScrollX, this.horizontalBounce ? this.wrapperWidth : 0, this.props.deceleration) : { destination: newX, duration: 0 }; - momentumY = this.hasVerticalScroll ? - utils.momentum(this.y, this.startY, duration, this.maxScrollY, this.verticalBounce ? this.wrapperHeight : 0, this.props.deceleration) + momentumY = this.hasVerticalScroll ? utils.momentum(this.y, this.startY, duration, this.maxScrollY, this.verticalBounce ? this.wrapperHeight : 0, this.props.deceleration) : { destination: newY, duration: 0 @@ -1088,6 +1086,9 @@ export default class Scroller extends Component { } else { this._animate(x, y, time, _easing.fn); } + // 由于scrollto不会触发onScroll事件，因此这里需要手动刷新一下sticky + this._refreshSticky(true); + this._tryLoadLazyImages(); } _transitionTimingFunction(easing) { diff --git a/doc/changelog.html b/doc/changelog.html index c04768c9..409e671d 100644 --- a/doc/changelog.html +++ b/doc/changelog.html @@ -113,7 +113,20 @@

版本

-

v3.0.8 (2017-04-07)

New Features

    +

    v3.0.9 (2017-05-02)

    New Features

      +
    • Calendar 添加 allowSelectionBeforeToday 属性，允许用户选择当前日期之前的时间段。
      • +
    • Picker 添加 itemHeight 属性，用来设置 item 高度。
      • +
    +

    Bug Fixes

      +
    • 修复 Scroller 在调用 scrollTo 方法时，吸顶容器没有被正确刷新的 bug。
      • +
    • 修复 Scroller 在回弹过程中点击页面导致无法回弹到正确位置的 bug。
      • +
    • 修复 LazyImage 在更新之后获取位置不正确导致图片无法加载的 bug。
      • +
    • 修复 Calendar 当 duration 的起始日期大于当前日期时，可选择区域不准确的 bug。
      • +
    • 修复 Calendar 当 duration 属性改变时，起始日期所在的周未及时更新的 bug。
      • +
    • 修复 Calendar 在 onChange 触发时，输出的格式不规范的 bug，将 YYYY-MM-(D)D 格式改成 YYYY-MM-DD 格式。
      • +
    • 修复 Carousel 当 触发 toucheEnd 事件时没有生成对应 touch 对象情况下， 没有重置定时器的 bug。
      • +
    +

    v3.0.8 (2017-04-07)

    New Features

    • yo-timeline 时间轴元件新增 $first-item-color 参数指定首项的颜色，用以区别其他项。
    • Carousel 组件新增内置自定义动画，实现循环无限节点。
    • Carousel 组件添加 window.resize 事件，并提供 handleResize 方法用于当父容器宽度变化时手动调整组件。
      • diff --git a/doc/component-ActionSheet.html b/doc/component-ActionSheet.html index 3021d026..5b896af5 100644 --- a/doc/component-ActionSheet.html +++ b/doc/component-ActionSheet.html @@ -449,7 +449,7 @@

      引用方式

      -
      import { ActionSheet } from $yo-component;
+
      import { ActionSheet } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-Alert.html b/doc/component-Alert.html
index 102a19c2..5b86a9c6 100644
--- a/doc/component-Alert.html
+++ b/doc/component-Alert.html
@@ -450,7 +450,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { Alert } from $yo-component;
+
      import { Alert } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-Calendar.html b/doc/component-Calendar.html
index e79a9cc0..7797778e 100644
--- a/doc/component-Calendar.html
+++ b/doc/component-Calendar.html
@@ -437,10 +437,9 @@ 
      
 
      可通过以下两种方式定义日期范围:
      
 
        
 
      • 传入具体的起、始日期。
        • 
-
      • 传入距离系统当日的间隔天数，默认90。
-入住时间在今天之前，会被重置为今天。
-入住时间在离店时间之后，则互换。
-默认selectionStart、selectionEnd可选择同一天。
        • 
+
      • 传入距离系统当日的间隔天数，默认90。入住时间在离店时间之后，则互换。默认selectionStart、selectionEnd可选择同一天。
        • 
+
      • 默认不能选择今天之前的日期。同时，如果 selectionStart 时间在今天之前，会被重置为今天。
+可以通过 allowSelectionBeforeToday 属性来严格按照 duration 渲染，消除默认场景。
        • 
 
      
 
      
 
@@ -453,7 +452,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { Calendar } from $yo-component;
+
      import { Calendar } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
@@ -696,6 +695,28 @@ 
      
 
 
 
+
      
+    
      
+    allowSelectionBeforeToday
+     { Bool }
+    
+    3.0.9
+    
+    
      
+
      
+
      
+    
      是否严格根据 duration 属性渲染，支持选择今天之前的日期
      
+
      
+    
+
      
+
+
      
+    默认值: false
+
      
+
+
+
+
 
      
     
      
     onChange
diff --git a/doc/component-Carousel.html b/doc/component-Carousel.html
index 4dd6f9d0..51139c7c 100644
--- a/doc/component-Carousel.html
+++ b/doc/component-Carousel.html
@@ -466,7 +466,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { Carousel } from $yo-component;
+
      import { Carousel } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-Confirm.html b/doc/component-Confirm.html
index 57cd559e..5eeff504 100644
--- a/doc/component-Confirm.html
+++ b/doc/component-Confirm.html
@@ -450,7 +450,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { Confirm } from $yo-component;
+
      import { Confirm } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-DateTimePicker.html b/doc/component-DateTimePicker.html
index b527136b..f3508235 100644
--- a/doc/component-DateTimePicker.html
+++ b/doc/component-DateTimePicker.html
@@ -445,7 +445,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { DateTimePicker } from $yo-component;
+
      import { DateTimePicker } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-Dialog.html b/doc/component-Dialog.html
index 64da1eff..cf65cf87 100644
--- a/doc/component-Dialog.html
+++ b/doc/component-Dialog.html
@@ -450,7 +450,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { Dialog } from $yo-component;
+
      import { Dialog } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-Grouplist.html b/doc/component-Grouplist.html
index c0b40a15..928f5fcd 100644
--- a/doc/component-Grouplist.html
+++ b/doc/component-Grouplist.html
@@ -448,7 +448,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { GroupList } from $yo-component;
+
      import { GroupList } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-InputNumber.html b/doc/component-InputNumber.html
index e7d2fa0e..2f4d4c42 100644
--- a/doc/component-InputNumber.html
+++ b/doc/component-InputNumber.html
@@ -452,7 +452,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { InputNumber } from $yo-component;
+
      import { InputNumber } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-LazyImage.html b/doc/component-LazyImage.html
index 51305c5b..46d6124f 100644
--- a/doc/component-LazyImage.html
+++ b/doc/component-LazyImage.html
@@ -447,7 +447,7 @@ 
      
             
      
             
      引用方式
      
 
      由于 LazyImage 是配合 List 或 Scroller 使用的，所以只需要按需引用 List 或 Scroller 即可。
      
-
      import { List, Scroller } from $yo-component;
+
      import { List, Scroller } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-List.html b/doc/component-List.html
index 21e6be9a..477d7091 100644
--- a/doc/component-List.html
+++ b/doc/component-List.html
@@ -448,7 +448,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { List } from $yo-component;
+
      import { List } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-Loading.html b/doc/component-Loading.html
index c2b86aa8..3206dac3 100644
--- a/doc/component-Loading.html
+++ b/doc/component-Loading.html
@@ -445,7 +445,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { Loading } from $yo-component;
+
      import { Loading } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-Modal.html b/doc/component-Modal.html
index 88efde58..c0e6eb1c 100644
--- a/doc/component-Modal.html
+++ b/doc/component-Modal.html
@@ -445,7 +445,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { Modal } from $yo-component;
+
      import { Modal } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-MultiList.html b/doc/component-MultiList.html
index 215f17a8..e3ec39fb 100644
--- a/doc/component-MultiList.html
+++ b/doc/component-MultiList.html
@@ -445,7 +445,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { MultiList } from $yo-component;
+
      import { MultiList } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-Picker.html b/doc/component-Picker.html
index c65e2fe2..3922bc41 100644
--- a/doc/component-Picker.html
+++ b/doc/component-Picker.html
@@ -447,7 +447,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { Picker } from $yo-component;
+
      import { Picker } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-Popup.html b/doc/component-Popup.html
index 9dae6dae..b9638f8f 100644
--- a/doc/component-Popup.html
+++ b/doc/component-Popup.html
@@ -449,7 +449,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { Popup } from $yo-component;
+
      import { Popup } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-PopupDateTimePicker.html b/doc/component-PopupDateTimePicker.html
index e5d5760d..259cbea9 100644
--- a/doc/component-PopupDateTimePicker.html
+++ b/doc/component-PopupDateTimePicker.html
@@ -445,7 +445,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { PopupDateTimePicker } from $yo-component;
+
      import { PopupDateTimePicker } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-PopupPicker.html b/doc/component-PopupPicker.html
index 5573bd93..1a65e394 100644
--- a/doc/component-PopupPicker.html
+++ b/doc/component-PopupPicker.html
@@ -445,7 +445,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { PopupPicker } from $yo-component;
+
      import { PopupPicker } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-Range.html b/doc/component-Range.html
index 5899136a..7307a4cb 100644
--- a/doc/component-Range.html
+++ b/doc/component-Range.html
@@ -445,7 +445,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { Range } from $yo-component;
+
      import { Range } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-Rating.html b/doc/component-Rating.html
index 98549324..afa8d253 100644
--- a/doc/component-Rating.html
+++ b/doc/component-Rating.html
@@ -445,7 +445,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { Rating } from $yo-component;
+
      import { Rating } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-Scroller.html b/doc/component-Scroller.html
index 32785430..abc09b9c 100644
--- a/doc/component-Scroller.html
+++ b/doc/component-Scroller.html
@@ -453,7 +453,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { Scroller } from $yo-component;
+
      import { Scroller } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-Sticky.html b/doc/component-Sticky.html
index 764ef6de..32970ffc 100644
--- a/doc/component-Sticky.html
+++ b/doc/component-Sticky.html
@@ -447,7 +447,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { Scroller } from $yo-component;
+
      import { Scroller } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-Suggest.html b/doc/component-Suggest.html
index 7cdd20bd..77b76331 100644
--- a/doc/component-Suggest.html
+++ b/doc/component-Suggest.html
@@ -447,7 +447,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { Suggest } from $yo-component;
+
      import { Suggest } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-SwipeMenu.html b/doc/component-SwipeMenu.html
index 30e6329f..4662334e 100644
--- a/doc/component-SwipeMenu.html
+++ b/doc/component-SwipeMenu.html
@@ -451,7 +451,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { SwipeMenu } from $yo-component;
+
      import { SwipeMenu } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-SwipeMenuList.html b/doc/component-SwipeMenuList.html
index 04e92b7f..409344e7 100644
--- a/doc/component-SwipeMenuList.html
+++ b/doc/component-SwipeMenuList.html
@@ -445,7 +445,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { SwipeMenuList } from $yo-component;
+
      import { SwipeMenuList } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-Switch.html b/doc/component-Switch.html
index c304a8ed..e19290ac 100644
--- a/doc/component-Switch.html
+++ b/doc/component-Switch.html
@@ -449,7 +449,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { Switch } from $yo-component;
+
      import { Switch } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-Toast.html b/doc/component-Toast.html
index 31d917f1..42a6075c 100644
--- a/doc/component-Toast.html
+++ b/doc/component-Toast.html
@@ -450,7 +450,7 @@ 
      
             
             
      
             
      引用方式
      
-
      import { Toast } from $yo-component;
+
      import { Toast } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component-Touchable.html b/doc/component-Touchable.html
index 4e3d39bc..b0ae0da4 100644
--- a/doc/component-Touchable.html
+++ b/doc/component-Touchable.html
@@ -455,7 +455,7 @@ 
      移动端的触摸事件
      
 滚动视图(Scroller)组件的存在，各种触摸事件都需要解决和滚动的冲突问题，即在滚动时不允许触发Press，这靠css是无法独自解决的。
      
 
      出于以上两点考虑，我们借鉴了React-Native的Touchable系列组件，为网页也设计实现了同样的组件。我们鼓励你在所有需要绑定tap事件的场景使用它。
      
 
      引用方式
      
-
      import { Touchable } from $yo-component;
+
      import { Touchable } from '$yo-component';
 
 // 如果你的项目中未使用 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/component.html b/doc/component.html
index f9e46ad6..ccc05edf 100644
--- a/doc/component.html
+++ b/doc/component.html
@@ -455,7 +455,7 @@ 
      移动端的触摸事件
      
 滚动视图(Scroller)组件的存在，各种触摸事件都需要解决和滚动的冲突问题，即在滚动时不允许触发Press，这靠css是无法独自解决的。
      
 
      出于以上两点考虑，我们借鉴了React-Native的Touchable系列组件，为网页也设计实现了同样的组件。我们鼓励你在所有需要绑定tap事件的场景使用它。
      
 
      引用方式
      
-
      import { Touchable } from $yo-component;
+
      import { Touchable } from '$yo-component';
 
 // 如果你的项目中未使用 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/doc/index.html b/doc/index.html
index cde55496..4bf189d5 100644
--- a/doc/index.html
+++ b/doc/index.html
@@ -102,7 +102,7 @@
           
      
               
      
                   
      Yo
      
-                  
      Yo 是一个专注于移动开发的 Front-end UI Framework，她轻量，易用，可配置，并且具备超强的扩展能力。
      Getting Yo
      当前版本：v3.0.8
      
+                  
      Yo 是一个专注于移动开发的 Front-end UI Framework，她轻量，易用，可配置，并且具备超强的扩展能力。
      Getting Yo
      当前版本：v3.0.9
      
               
      
           
      
       
diff --git a/docs/component/actionSheet.md b/docs/component/actionSheet.md
index e2b4e907..db5e0866 100644
--- a/docs/component/actionSheet.md
+++ b/docs/component/actionSheet.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { ActionSheet } from $yo-component;
+import { ActionSheet } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/alert.md b/docs/component/alert.md
index 5f3ff90c..914e85b2 100644
--- a/docs/component/alert.md
+++ b/docs/component/alert.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { Alert } from $yo-component;
+import { Alert } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/calendar.md b/docs/component/calendar.md
index f063c372..96427d62 100644
--- a/docs/component/calendar.md
+++ b/docs/component/calendar.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { Calendar } from $yo-component;
+import { Calendar } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/carousel.md b/docs/component/carousel.md
index bb5072a3..536294e1 100644
--- a/docs/component/carousel.md
+++ b/docs/component/carousel.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { Carousel } from $yo-component;
+import { Carousel } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/confirm.md b/docs/component/confirm.md
index 59793a22..36978151 100644
--- a/docs/component/confirm.md
+++ b/docs/component/confirm.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { Confirm } from $yo-component;
+import { Confirm } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/dateTimePicker.md b/docs/component/dateTimePicker.md
index d5dcaa0c..c9523a01 100644
--- a/docs/component/dateTimePicker.md
+++ b/docs/component/dateTimePicker.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { DateTimePicker } from $yo-component;
+import { DateTimePicker } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/dialog.md b/docs/component/dialog.md
index 995b8bed..d952d542 100644
--- a/docs/component/dialog.md
+++ b/docs/component/dialog.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { Dialog } from $yo-component;
+import { Dialog } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/grouplist.md b/docs/component/grouplist.md
index ae84e836..23d380fd 100644
--- a/docs/component/grouplist.md
+++ b/docs/component/grouplist.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { GroupList } from $yo-component;
+import { GroupList } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/inputNumber.md b/docs/component/inputNumber.md
index 9eb07674..f343ebcf 100644
--- a/docs/component/inputNumber.md
+++ b/docs/component/inputNumber.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { InputNumber } from $yo-component;
+import { InputNumber } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/lazyimage.md b/docs/component/lazyimage.md
index 4c1962c0..65b5617e 100644
--- a/docs/component/lazyimage.md
+++ b/docs/component/lazyimage.md
@@ -3,7 +3,7 @@
 由于 `LazyImage` 是配合 `List` 或 `Scroller` 使用的，所以只需要按需引用 `List` 或 `Scroller` 即可。
 
 ```
-import { List, Scroller } from $yo-component;
+import { List, Scroller } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/list/list.md b/docs/component/list/list.md
index 3363d7d3..19d390c5 100644
--- a/docs/component/list/list.md
+++ b/docs/component/list/list.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { List } from $yo-component;
+import { List } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/loading.md b/docs/component/loading.md
index 0f3d7502..a7ed52d7 100644
--- a/docs/component/loading.md
+++ b/docs/component/loading.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { Loading } from $yo-component;
+import { Loading } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/modal.md b/docs/component/modal.md
index 4142515b..a02320fb 100644
--- a/docs/component/modal.md
+++ b/docs/component/modal.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { Modal } from $yo-component;
+import { Modal } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/multilist/product.md b/docs/component/multilist/product.md
index e86b45e6..a771b90c 100644
--- a/docs/component/multilist/product.md
+++ b/docs/component/multilist/product.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { MultiList } from $yo-component;
+import { MultiList } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/picker.md b/docs/component/picker.md
index 093df0e8..bca2939a 100644
--- a/docs/component/picker.md
+++ b/docs/component/picker.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { Picker } from $yo-component;
+import { Picker } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/popup.md b/docs/component/popup.md
index 3c019c54..0785dd04 100644
--- a/docs/component/popup.md
+++ b/docs/component/popup.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { Popup } from $yo-component;
+import { Popup } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/popupdatetimepicker.md b/docs/component/popupdatetimepicker.md
index 900a980b..8891b773 100644
--- a/docs/component/popupdatetimepicker.md
+++ b/docs/component/popupdatetimepicker.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { PopupDateTimePicker } from $yo-component;
+import { PopupDateTimePicker } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/popuppicker.md b/docs/component/popuppicker.md
index ec2080ad..aeefe950 100644
--- a/docs/component/popuppicker.md
+++ b/docs/component/popuppicker.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { PopupPicker } from $yo-component;
+import { PopupPicker } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/range.md b/docs/component/range.md
index 1869d0df..76cfea24 100644
--- a/docs/component/range.md
+++ b/docs/component/range.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { Range } from $yo-component;
+import { Range } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/rating.md b/docs/component/rating.md
index 9a7eb3ec..4be972c4 100644
--- a/docs/component/rating.md
+++ b/docs/component/rating.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { Rating } from $yo-component;
+import { Rating } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/scroller/basic.md b/docs/component/scroller/basic.md
index 33a10f1a..c0213754 100644
--- a/docs/component/scroller/basic.md
+++ b/docs/component/scroller/basic.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { Scroller } from $yo-component;
+import { Scroller } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/sticky.md b/docs/component/sticky.md
index 707f1458..9c948039 100644
--- a/docs/component/sticky.md
+++ b/docs/component/sticky.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { Scroller } from $yo-component;
+import { Scroller } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/suggest/suggest.md b/docs/component/suggest/suggest.md
index f2174721..80d495b1 100644
--- a/docs/component/suggest/suggest.md
+++ b/docs/component/suggest/suggest.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { Suggest } from $yo-component;
+import { Suggest } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/swipeMenu.md b/docs/component/swipeMenu.md
index 0bd3441b..47d10483 100644
--- a/docs/component/swipeMenu.md
+++ b/docs/component/swipeMenu.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { SwipeMenu } from $yo-component;
+import { SwipeMenu } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/swipeMenuList.md b/docs/component/swipeMenuList.md
index 9dbddaad..9fde7849 100644
--- a/docs/component/swipeMenuList.md
+++ b/docs/component/swipeMenuList.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { SwipeMenuList } from $yo-component;
+import { SwipeMenuList } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/switch.md b/docs/component/switch.md
index c5d2f745..36197d30 100644
--- a/docs/component/switch.md
+++ b/docs/component/switch.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { Switch } from $yo-component;
+import { Switch } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/toast.md b/docs/component/toast.md
index 4daeaa67..8e09814f 100644
--- a/docs/component/toast.md
+++ b/docs/component/toast.md
@@ -1,7 +1,7 @@
 #### 引用方式
 
 ```
-import { Toast } from $yo-component;
+import { Toast } from '$yo-component';
 
 // 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/docs/component/touchable.md b/docs/component/touchable.md
index a43dc286..e270e943 100644
--- a/docs/component/touchable.md
+++ b/docs/component/touchable.md
@@ -14,7 +14,7 @@
 #### 引用方式
 
 ```
-import { Touchable } from $yo-component;
+import { Touchable } from '$yo-component';
 
 // 如果你的项目中未使用 ykit-config-yo 插件，可能无法使用上面这个语法糖
 // 你仍然可以通过下面这种方式来引用
diff --git a/package.json b/package.json
index 5843c6b8..b2ab0479 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "yo3",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "description": "一个专注于移动开发的前端框架",
   "compiler": "node-sass",
   "dependencies": {
diff --git a/ydoc.config b/ydoc.config
index 0cf46f48..958f8fca 100644
--- a/ydoc.config
+++ b/ydoc.config
@@ -32,7 +32,7 @@
       "title": "Yo",
       "banner": {
         "title": "Yo",
-        "description": "Yo 是一个专注于移动开发的 Front-end UI Framework，她轻量，易用，可配置，并且具备超强的扩展能力。
      Getting Yo
      当前版本：v3.0.8
      "
+        "description": "Yo 是一个专注于移动开发的 Front-end UI Framework，她轻量，易用，可配置，并且具备超强的扩展能力。
      Getting Yo
      当前版本：v3.0.9
      "
       },
       "content": "./case.md"
     },