zzc-design-mobile - npm Package Compare versions

Comparing version 3.8.7 to 3.9.1

lib/Calendar/components/Calendar.js

@@ -158,3 +158,3 @@ 'use strict';
             _default_calendar_tips: props.defaultCalendarTips,
-            _calendar_tips: '',
+            _calendar_tips: props.calendarTips,
             _listBoxPaddingBottom: 30,
@@ -313,14 +313,15 @@ rangeInViewDate: rangeInViewDate,
                 dayChange = _props.dayChange;
+            // let tips = '';
 
-            var tips = '';
             if (eventType == 'day' && dayChange && (0, _typeof.isFunction)(dayChange)) {
-                tips = dayChange(this.echoSelectData(type, this.state._startTime, this.state._endTime));
+                dayChange(this.echoSelectData(type, this.state._startTime, this.state._endTime));
             } else if (eventType == 'time' && timeChange && (0, _typeof.isFunction)(timeChange)) {
-                tips = timeChange(this.echoSelectData(type, this.state._startTime, this.state._endTime));
+                timeChange(this.echoSelectData(type, this.state._startTime, this.state._endTime));
             }
-            if (this.state._calendar_tips != tips) {
-                this.setState({
-                    _calendar_tips: tips || ''
-                });
-            }
+            // 固定了_calendar_tips
+            // if (this.state._calendar_tips != tips) {
+            //     this.setState({
+            //         _calendar_tips: tips || ''
+            //     });
+            // }
         }
@@ -394,8 +395,10 @@ }, {
             if (onChange && (0, _typeof.isFunction)(onChange)) {
-                var tips = onChange(this.formatSubmitEchoData());
-                if (this.state._calendar_tips != tips) {
-                    this.setState({
-                        _calendar_tips: tips || ''
-                    });
-                }
+                onChange(this.formatSubmitEchoData());
+                // 固定了_calendar_tips
+                // const tips = onChange(this.formatSubmitEchoData());
+                // if (this.state._calendar_tips != tips) {
+                //     this.setState({
+                //         _calendar_tips: tips || ''
+                //     });
+                // }
             }
@@ -434,3 +437,4 @@ }
                 height = _props2$height === undefined ? '85vh' : _props2$height,
-                dayCalculator = _props2.dayCalculator;
+                dayCalculator = _props2.dayCalculator,
+                pickupCityLocalTimeStr = _props2.pickupCityLocalTimeStr;
             var _state5 = this.state,
@@ -443,4 +447,3 @@ calendarMap = _state5.calendarMap,
                 _calendar_tips = _state5._calendar_tips,
-                _listBoxPaddingBottom = _state5._listBoxPaddingBottom,
-                timeText = _state5.timeText;
+                _listBoxPaddingBottom = _state5._listBoxPaddingBottom;
 
@@ -455,7 +458,2 @@ var cardClassName = (0, _classnames2.default)(prefixCls, className);
                     _react2.default.createElement(_CalendarCloseBox2.default, { popupTitle: popupTitle, onClose: this.closeCalendar }),
-                    _react2.default.createElement(
-                        'div',
-                        { className: 'now-text' },
-                        timeText
-                    ),
                     _react2.default.createElement(_CalendarWeek2.default, { weekList: i18n.weekList }),
@@ -466,3 +464,3 @@ _react2.default.createElement(_CalendarListBox2.default, { paddingBottom: _listBoxPaddingBottom, selectItem: this.selectItem, list: calendarMap, startTime: _startTime, endTime: _endTime, monthList: i18n.monthList || null, listAcrossTheYearText: i18n.listAcrossTheYearText, setTimeText: this.setTimeText }),
                         { style: { bottom: 0, top: 'unset', height: 'auto' }, transparent: true, visible: !!_startTime && !!_endTime },
-                        _react2.default.createElement(_CalendarFooter2.default, { renderCallback: this.footerRenderCallback, timeRange: timeRange || [0, 24], minutesInterval: minutesInterval || 30, i18n: i18n, reset: this.resetSelectDay, submit: this.submit, mode: mode || 'day', currStartTime: _startTime, currEndTime: _endTime, changeSelectTime: this.updateSelectTime, defaultStartTime: defaultStartTime, defaultEndTime: defaultEndTime, selectTimePicker: this.selectTimePicker, defaultCalendarTips: _default_calendar_tips, calendarTips: _calendar_tips, dayCalculator: dayCalculator })
+                        _react2.default.createElement(_CalendarFooter2.default, { renderCallback: this.footerRenderCallback, timeRange: timeRange || [0, 24], minutesInterval: minutesInterval || 30, i18n: i18n, reset: this.resetSelectDay, submit: this.submit, mode: mode || 'day', currStartTime: _startTime, currEndTime: _endTime, changeSelectTime: this.updateSelectTime, defaultStartTime: defaultStartTime, defaultEndTime: defaultEndTime, selectTimePicker: this.selectTimePicker, defaultCalendarTips: _default_calendar_tips, calendarTips: _calendar_tips, dayCalculator: dayCalculator, pickupCityLocalTimeStr: pickupCityLocalTimeStr })
                     )
@@ -469,0 +467,0 @@ )

lib/Calendar/components/CalendarFooter.js

@@ -124,3 +124,3 @@ 'use strict';
                     { className: 'picker-box' },
-                    _react2.default.createElement(_Picker2.default, { height: 117.5, onTouchEnd: function onTouchEnd(scrollIndex, itemIndex) {
+                    _react2.default.createElement(_Picker2.default, { height: 115, onTouchEnd: function onTouchEnd(scrollIndex, itemIndex) {
                             _this2.changeTime(scrollIndex, itemIndex);
@@ -159,3 +159,2 @@ }, pickerData: this.state.pickerList })
                 calendarTips = _props.calendarTips,
-                defaultCalendarTips = _props.defaultCalendarTips,
                 mode = _props.mode;
@@ -175,16 +174,12 @@
                 );
-            } else if (defaultCalendarTips != null && defaultCalendarTips != '') {
-                return _react2.default.createElement(
-                    'div',
-                    { className: className },
-                    _react2.default.createElement(_Icon2.default, { type: 'info_outline' }),
-                    _react2.default.createElement(
-                        'p',
-                        null,
-                        defaultCalendarTips
-                    )
-                );
-            } else {
-                return null;
             }
+            // else if ( defaultCalendarTips != null && defaultCalendarTips != '' ) {
+            //     return (
+            //         <div className={className}>
+            //             <Icon type='info_outline' />
+            //             <p>{defaultCalendarTips}</p>
+            //         </div>
+            //     );
+            // } 
+            return null;
         }
@@ -199,3 +194,2 @@ }, {
                 i18n = _props2.i18n,
-                defaultCalendarTips = _props2.defaultCalendarTips,
                 submit = _props2.submit,
@@ -205,4 +199,23 @@ mode = _props2.mode,
                 currEndTime = _props2.currEndTime,
-                dayCalculator = _props2.dayCalculator;
+                dayCalculator = _props2.dayCalculator,
+                defaultCalendarTips = _props2.defaultCalendarTips,
+                pickupCityLocalTimeStr = _props2.pickupCityLocalTimeStr;
 
+            var formatText = 'MM\u6708DD\u65E5';
+            var formatTextWithYear = 'YYYY\u5E74' + formatText;
+            var durationDaysText = '';
+            var allDaysText = '';
+            if (currStartTime && pickupCityLocalTimeStr) {
+                var Y = currStartTime.Y,
+                    M = currStartTime.M,
+                    D = currStartTime.D;
+
+                var days = (0, _moment2.default)([Y, M, D, 0, 0, 0]).diff((0, _moment2.default)(pickupCityLocalTimeStr).startOf('day'), 'days');
+                if (days >= 10) {
+                    durationDaysText = ' (' + i18n.durationDays + days + i18n.day + ')';
+                }
+            }
+            if (currStartTime && currEndTime) {
+                allDaysText = ' (\u5171' + ((0, _typeof.isFunction)(dayCalculator) ? dayCalculator(currStartTime.t, currEndTime.t) : Math.ceil((currEndTime.t - currStartTime.t) / 86400000) || 1) + i18n.day + ')';
+            }
             return _react2.default.createElement(
@@ -214,2 +227,3 @@ 'div',
                 mode == 'day*time' && this.createTimePicker(),
+                this.createTips(),
                 _react2.default.createElement(
@@ -224,4 +238,5 @@ 'div',
                             { className: 'pickup-text' },
-                            '\u53D6\u8F66\uFF1A',
-                            currStartTime ? (0, _moment2.default)(currStartTime.t).format((0, _moment2.default)().isSame(currStartTime.t, 'year') ? 'MM月DD日 HH:mm' : 'YYYY年MM月DD日 HH:mm') : '未设置'
+                            i18n.pickup,
+                            '\uFF1A',
+                            currStartTime ? (0, _moment2.default)(currStartTime.t).format((0, _moment2.default)().isSame(currStartTime.t, 'year') ? formatText : formatTextWithYear) + durationDaysText : '未设置'
                         ),
@@ -231,4 +246,5 @@ _react2.default.createElement(
                             { className: 'return-text' },
-                            '\u8FD8\u8F66\uFF1A',
-                            currEndTime ? (0, _moment2.default)(currEndTime.t).format((0, _moment2.default)().isSame(currEndTime.t, 'year') ? 'MM月DD日 HH:mm' : 'YYYY年MM月DD日 HH:mm') : '未设置'
+                            i18n.dropoff,
+                            '\uFF1A',
+                            currEndTime ? (0, _moment2.default)(currEndTime.t).format((0, _moment2.default)().isSame(currEndTime.t, 'year') ? formatText : formatTextWithYear) + allDaysText : '未设置'
                         ),
@@ -245,5 +261,3 @@ defaultCalendarTips && currEndTime && currStartTime && currEndTime.t - currStartTime.t < 86400000 && _react2.default.createElement(
                         { className: 'submit-btn', onClick: submit },
-                        i18n.submit_btn_text_1,
-                        currStartTime && currEndTime && (dayCalculator && (0, _typeof.isFunction)(dayCalculator) ? dayCalculator(currStartTime.t, currEndTime.t) : '' + (Math.ceil((currEndTime.t - currStartTime.t) / 86400000) || 1)),
-                        i18n.submit_btn_text_2
+                        i18n.submit_btn_text
                     )
@@ -250,0 +264,0 @@ )

lib/Calendar/components/CalendarListBox.js

@@ -37,4 +37,3 @@ 'use strict';
 
-var observer = {};
-
+// let observer: any = {}
 var CalendarListBox = function (_PureComponent) {
@@ -47,49 +46,45 @@ (0, _inherits3.default)(CalendarListBox, _PureComponent);
     }
+    // componentDidMount() {
+    //     const setTimeText = this.props.setTimeText;
+    //     requestAnimationFrame(() => {
+    //         this.scrollToTop()
+    //         // 创建 IntersectionObserver 实例
+    //         observer = new IntersectionObserver((entries: any) => {
+    //             entries.forEach(entry => {
+    //                 if (entry.isIntersecting) {
+    //                     // 目标元素进入视口
+    //                     setTimeText(entry.target.firstChild.innerText)
+    //                 } else {
+    //                     // 目标元素离开视口
+    //                 }
+    //                 });
+    //             }, {
+    //             // 选项配置
+    //             root: document.querySelector('.zds-calendar-list-box'), // 相对的根元素
+    //             rootMargin: '0px 0px -98% 0px', // 可以在这里设置相对根元素的 margin
+    //             threshold: 0 // 阈值，表示目标元素的多少可见时触发回调
+    //         });
+    //         this.onScroll()
+    //     });
+    // }
 
+
     (0, _createClass3.default)(CalendarListBox, [{
-        key: 'componentDidMount',
-        value: function componentDidMount() {
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate() {
             var _this2 = this;
 
-            var setTimeText = this.props.setTimeText;
             requestAnimationFrame(function () {
                 _this2.scrollToTop();
-                // 创建 IntersectionObserver 实例
-                observer = new IntersectionObserver(function (entries) {
-                    entries.forEach(function (entry) {
-                        if (entry.isIntersecting) {
-                            // 目标元素进入视口
-                            setTimeText(entry.target.firstChild.innerText);
-                        } else {
-                            // 目标元素离开视口
-                        }
-                    });
-                }, {
-                    // 选项配置
-                    root: document.querySelector('.zds-calendar-list-box'),
-                    rootMargin: '0px 0px -98% 0px',
-                    threshold: 0 // 阈值，表示目标元素的多少可见时触发回调
-                });
-                _this2.onScroll();
             });
         }
-    }, {
-        key: 'componentDidUpdate',
-        value: function componentDidUpdate() {
-            var _this3 = this;
+        // onScroll(){
+        //     // 监听目标元素
+        //     document.querySelectorAll('.zds-calendar-list-box .item').forEach(item => {
+        //         // console.log(observer)
+        //         observer.observe(item);
+        //     });
+        // }
 
-            requestAnimationFrame(function () {
-                _this3.scrollToTop();
-            });
-        }
     }, {
-        key: 'onScroll',
-        value: function onScroll() {
-            // 监听目标元素
-            document.querySelectorAll('.zds-calendar-list-box .item').forEach(function (item) {
-                // console.log(observer)
-                observer.observe(item);
-            });
-        }
-    }, {
         key: 'scrollToTop',
@@ -104,3 +99,3 @@ value: function scrollToTop() {
             if (!this.listBox || !targetItem) return;
-            this.listBox.scrollTop = targetItem.offsetTop;
+            this.listBox.scrollTop = targetItem.offsetTop - 40;
         }
@@ -119,3 +114,3 @@ // renderI18nMonthText(monthData, currYear, monthList, listAcrossTheYearText): string {
         value: function createMonthItem(monthData, key, monthList, listAcrossTheYearText) {
-            var _this4 = this;
+            var _this3 = this;
 
@@ -138,4 +133,4 @@ var currYear = new Date().getFullYear();
                                 'li',
-                                { 'data-c-d': dayInfo.d, className: _this4.setItemClass(dayInfo), key: dayKey, onClick: function onClick() {
-                                        !dayInfo.gone && !dayInfo.empty && _this4.props.selectItem(monthData.y, dayInfo.m, rowKey, dayKey, dayInfo);
+                                { 'data-c-d': dayInfo.d, className: _this3.setItemClass(dayInfo), key: dayKey, onClick: function onClick() {
+                                        !dayInfo.gone && !dayInfo.empty && _this3.props.selectItem(monthData.y, dayInfo.m, rowKey, dayKey, dayInfo);
                                     } },
@@ -176,3 +171,4 @@ dayInfo._sub != null && _react2.default.createElement(
                 active = dayInfo.active,
-                extensionMain = dayInfo.extensionMain;
+                extensionMain = dayInfo.extensionMain,
+                extensionClassNames = dayInfo.extensionClassNames;
             // 名字扩展，需要将字号缩小
@@ -196,2 +192,5 @@
             }
+            if (extensionClassNames) {
+                className += ' ' + extensionClassNames;
+            }
             return className;
@@ -202,3 +201,3 @@ }
         value: function render() {
-            var _this5 = this;
+            var _this4 = this;
 
@@ -215,6 +214,6 @@ var _props2 = this.props,
                 { ref: function ref(list) {
-                        _this5.listBox = list;
-                    }, className: prefixCls + '-list-box', style: { paddingBottom: paddingBottom + 'px' }, onScroll: this.onScroll },
+                        _this4.listBox = list;
+                    }, className: prefixCls + '-list-box', style: { paddingBottom: paddingBottom + 'px' } },
                 list.map(function (item, key) {
-                    return _this5.createMonthItem(item, key, monthList, listAcrossTheYearText);
+                    return _this4.createMonthItem(item, key, monthList, listAcrossTheYearText);
                 })
@@ -221,0 +220,0 @@ );

lib/Calendar/components/CalendarWeek.js

@@ -58,3 +58,3 @@ 'use strict';
                         'div',
-                        { className: 'item', key: key },
+                        { className: 'item', 'data-week': item, key: key },
                         _react2.default.createElement(
@@ -61,0 +61,0 @@ 'p',

lib/Calendar/util/createCalendarMap.js

@@ -245,3 +245,3 @@ 'use strict';
     };
-    var extensionItem = dateExtension[defaultItemInfo.y + '/' + (defaultItemInfo.m + 1 < 9 ? '0' + (defaultItemInfo.m + 1) : defaultItemInfo.m + 1) + '/' + (defaultItemInfo.d < 9 ? '0' + defaultItemInfo.d : defaultItemInfo.d)];
+    var extensionItem = dateExtension[defaultItemInfo.y + '/' + (defaultItemInfo.m + 1 < 10 ? '0' + (defaultItemInfo.m + 1) : defaultItemInfo.m + 1) + '/' + (defaultItemInfo.d < 10 ? '0' + defaultItemInfo.d : defaultItemInfo.d)];
     if (extensionItem) {
@@ -253,2 +253,5 @@ defaultItemInfo.sub = extensionItem.sub || defaultItemInfo.sub;
         }
+        if (extensionItem.class) {
+            defaultItemInfo.extensionClassNames = extensionItem.class;
+        }
     }
@@ -255,0 +258,0 @@ return defaultItemInfo;

lib/Calendar/util/i18n.js

@@ -21,5 +21,3 @@ 'use strict';
         reset_btn_text: '重置',
-        submit_btn_text: '确认时间',
-        submit_btn_text_1: '确定(共',
-        submit_btn_text_2: '天)',
+        submit_btn_text: '确认',
         time_picker_title: '取车时间',
@@ -32,3 +30,6 @@ time_return_title: '还车时间',
         days: '日',
-        today: '今天'
+        today: '今天',
+        pickup: '取(当地)',
+        dropoff: '还(当地)',
+        durationDays: '距用车还有'
     } : {
@@ -47,5 +48,3 @@ left_title: '當地時間',
         reset_btn_text: '重置',
-        submit_btn_text: '確認時間',
-        submit_btn_text_1: '確定(共',
-        submit_btn_text_2: '天)',
+        submit_btn_text: '確認',
         time_picker_title: '取車時間',
@@ -58,4 +57,7 @@ time_return_title: '还車時間',
         days: '日',
-        today: '今天'
+        today: '今天',
+        pickup: '取(當地)',
+        dropoff: '还(當地)',
+        durationDays: '距用車還有'
     };
 }

package.json

 {
   "name": "zzc-design-mobile",
   "name_cn": "租租车主流程UI规范",
-  "version": "3.8.7",
+  "version": "3.9.1",
   "description": "",
@@ -6,0 +6,0 @@ "main": "./lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

905785

increased by0.14%

Lines of code

22049

increased by0.11%

No dependency changes