zzc-design-mobile - npm Package Compare versions

Comparing version 1.0.8 to 1.3.4

lib/button/index.js

@@ -39,5 +39,5 @@ 'use strict';
 
-var _TouchFeedback = require('../_util/TouchFeedback');
+var _touchFeedback = require('../touchFeedback');
 
-var _TouchFeedback2 = _interopRequireDefault(_TouchFeedback);
+var _touchFeedback2 = _interopRequireDefault(_touchFeedback);
 
@@ -95,6 +95,6 @@ var _config = require('../_util/config');
             return _react2.default.createElement(
-                _TouchFeedback2.default,
+                _touchFeedback2.default,
                 { activeStyle: activeStyle ? activeStyle : {}, activeClassName: this.setActiveClassName(activeClassName, type, ghost), disabled: disabled },
                 _react2.default.createElement(
-                    'a',
+                    'div',
                     { className: btnClassNames, style: style, onClick: onClick },
@@ -101,0 +101,0 @@ children

lib/datePicker/index.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
@@ -68,4 +72,4 @@
 
-var DatePicker = function (_React$PureComponent) {
-    (0, _inherits3.default)(DatePicker, _React$PureComponent);
+var DatePicker = function (_React$Component) {
+    (0, _inherits3.default)(DatePicker, _React$Component);
 
@@ -89,2 +93,10 @@ function DatePicker(props) {
     (0, _createClass3.default)(DatePicker, [{
+        key: 'shouldComponentUpdate',
+        value: function shouldComponentUpdate(nextProps, nextState) {
+            if ((0, _stringify2.default)(nextProps) != (0, _stringify2.default)(this.props) || (0, _stringify2.default)(nextState) != (0, _stringify2.default)(this.state)) {
+                return true;
+            }
+            return false;
+        }
+    }, {
         key: 'componentWillReceiveProps',
@@ -98,2 +110,10 @@ value: function componentWillReceiveProps() {
             }
+            // 当关闭状态下，如果外部传入选择参数有变化，需要重新计算当前选中的日期并渲染日期data，供下次打开渲染
+            // if ( !this.props.visible ) {
+            //     if ( isDate( this.props.selectTime ) && isDate( nextProps.selectTime ) && this.props.selectTime.getTime() != nextProps.selectTime.getTime() ) {
+            //         this.reactDateState( nextProps );
+            //     } else if ( isString( this.props.selectTime ) && isString( nextProps.selectTime ) && this.props.selectTime != nextProps.selectTime ) {
+            //         this.reactDateState( nextProps );
+            //     }
+            // }
         }
@@ -103,25 +123,35 @@ }, {
         value: function componentDidUpdate() {
-            this.resetPicker();
+            !this.props.visible && this.resetPicker();
         }
+        // reactDateState( props ) {
+        //     const { selectTime, mode } = props;
+        //     const calcTime = this.initDateObject( null, selectTime, mode );
+        //     this.initDate( calcTime );
+        // }
+        // resetPicker(): void {
+        //     if ( this.datePickerStatus === 'show' && !this.props.visible ) {
+        //         this.preDatePickerStatus = this.datePickerStatus;
+        //         this.datePickerStatus = 'hide';
+        //         const { selectTime, mode } = this.props;
+        //         // 关闭的时候，如果当前滑动框选中的日期和当前传入的时间一样，则无需进行reset
+        //         const calcTime = this.initDateObject( null, selectTime, mode );
+        //         const currPickerDate = this.initDateObject( null, this.getCurrDate().currDate, mode ).getTime();
+        //         if ( currPickerDate != calcTime.getTime() ) {
+        //             setTimeout( () => {
+        //                 this.initDate( calcTime );
+        //             }, 500 );
+        //         }
+        //     }
+        // }
+
     }, {
         key: 'resetPicker',
         value: function resetPicker() {
-            var _this2 = this;
+            var _props = this.props,
+                selectTime = _props.selectTime,
+                mode = _props.mode;
+            // 关闭的时候，如果当前滑动框选中的日期和当前传入的时间一样，则无需进行reset
 
-            if (this.datePickerStatus === 'show' && !this.props.visible) {
-                this.preDatePickerStatus = this.datePickerStatus;
-                this.datePickerStatus = 'hide';
-                var _props = this.props,
-                    selectTime = _props.selectTime,
-                    mode = _props.mode;
-                // 关闭的时候，如果当前滑动框选中的日期和当前传入的时间一样，则无需进行reset
-
-                var calcTime = this.initDateObject(null, selectTime, mode);
-                var currPickerDate = this.initDateObject(null, this.getCurrDate().currDate, mode).getTime();
-                if (currPickerDate != calcTime.getTime()) {
-                    setTimeout(function () {
-                        _this2.initDate(calcTime);
-                    }, 500);
-                }
-            }
+            var calcTime = this.initDateObject(null, selectTime, mode);
+            this.initDate(calcTime);
         }
@@ -135,7 +165,7 @@ }, {
             } else if (mode == 'time') {
-                calcTime = new Date('1993-9-17 ' + selectTime);
+                calcTime = new Date('1993/09/17 ' + selectTime);
             } else if (mode == 'year') {
-                calcTime = new Date(selectTime + '-1-1');
+                calcTime = new Date(selectTime + '/01/01');
             } else if (mode == 'month') {
-                calcTime = new Date('1993-' + selectTime + '-1');
+                calcTime = new Date('1993/' + selectTime + '/01');
             } else {
@@ -209,7 +239,7 @@ calcTime = (0, _typeof.isDate)(selectTime) ? selectTime : new Date(selectTime);
                     var currData = this.getCurrDate(scrollKey).currDate.split(' ');
-                    var data = currData[0].split('-');
+                    var data = currData[0].split('/');
                     var time = currData[1].split(':');
                     currDateData = data.concat(time);
                 } else {
-                    currDateData = this.getCurrDate(scrollKey).currDate.split('-');
+                    currDateData = this.getCurrDate(scrollKey).currDate.split('/');
                 }
@@ -222,3 +252,3 @@ // 上一次选择的月份的日期在当前选中的月份的日期没有的时候，选中最后一个日期
                 if (currDay > currDateLastDay) {
-                    currDate = new Date(currDateData[0] + '-' + currDateData[1] + '-' + currDateLastDay);
+                    currDate = new Date(currDateData[0] + '/' + currDateData[1] + '/' + currDateLastDay);
                 } else {
@@ -228,7 +258,7 @@ currDate = new Date(this.getCurrDate(scrollKey).currDate);
             } else if (mode == 'time') {
-                currDate = new Date('1993-9-17 ' + this.getCurrDate(scrollKey).currDate);
+                currDate = new Date('1993/09/17 ' + this.getCurrDate(scrollKey).currDate);
             } else if (mode == 'year') {
-                currDate = new Date(this.getCurrDate(scrollKey).currDate + '-9-17');
+                currDate = new Date(this.getCurrDate(scrollKey).currDate + '/09/17');
             } else if (mode == 'month') {
-                currDate = new Date('1993-' + this.getCurrDate(scrollKey).currDate + '-17');
+                currDate = new Date('1993/' + this.getCurrDate(scrollKey).currDate + '/17');
             }
@@ -272,8 +302,10 @@ this.initDate(currDate);
         value: function close() {
+            var onClose = this.props.onClose;
+
+            onClose && (0, _typeof.isFunction)(onClose) && onClose();
             // 因为设计原因，点击取消按钮会导致两次取消事件触发，通过记录上一个状态为hide触发close才会触发onClose事件
-            if (this.preDatePickerStatus === 'hide') {
-                var onClose = this.props.onClose;
-
-                onClose && (0, _typeof.isFunction)(onClose) && onClose();
-            }
+            // if ( this.preDatePickerStatus === 'hide' ) {
+            //     const { onClose } = this.props;
+            //     onClose && isFunction( onClose ) && onClose();
+            // }
         }
@@ -295,3 +327,4 @@ }, {
                 visible = _props4.visible,
-                maskClose = _props4.maskClose;
+                maskClose = _props4.maskClose,
+                _renderCallback = _props4.renderCallback;
             var langData = this.state.langData;
@@ -302,3 +335,5 @@
                 _Popup2.default,
-                { maskClose: maskClose, direction: 'bottom', visible: visible, onClose: this.close },
+                { maskClose: maskClose, direction: 'bottom', visible: visible, onClose: this.close, renderCallback: function renderCallback() {
+                        _renderCallback && _renderCallback();
+                    } },
                 _react2.default.createElement(
@@ -317,7 +352,2 @@ 'div',
                             'div',
-                            { className: cls + '-header-title' },
-                            langData.datePickerTitle
-                        ),
-                        _react2.default.createElement(
-                            'div',
                             { className: cls + '-header-submit', onClick: this.submit },
@@ -333,3 +363,3 @@ langData.confirm
     return DatePicker;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
@@ -336,0 +366,0 @@ exports.default = DatePicker;

lib/datePicker/util/date.js

@@ -14,2 +14,4 @@ 'use strict';
 
+var _resetDate = require('../../_util/resetDate');
+
 function initMinDate(defaultDate) {
@@ -19,3 +21,3 @@ if (defaultDate) {
     }
-    var currDate = new Date(new Date().getFullYear() - 10 + '-1-1');
+    var currDate = new Date(new Date().getFullYear() - 10 + '/01/01');
     var year = currDate.getFullYear();
@@ -36,3 +38,3 @@ var month = currDate.getMonth() + 1;
     }
-    var currDate = new Date(new Date().getFullYear() + 10 + '-1-1');
+    var currDate = new Date(new Date().getFullYear() + 10 + '/01/01');
     var year = currDate.getFullYear();
@@ -67,4 +69,18 @@ var month = currDate.getMonth() + 1;
 function resolveDate(dateString) {
+    if ((0, _typeof.isDate)(dateString)) {
+        var year = dateString.getFullYear();
+        var month = dateString.getMonth() + 1;
+        var day = dateString.getDate();
+        var hour = dateString.getHours();
+        var minute = dateString.getMinutes();
+        return {
+            year: year,
+            month: month,
+            day: day,
+            hour: hour,
+            minute: minute
+        };
+    }
     var splitDate = dateString.split(' ');
-    var date = splitDate[0].split('-');
+    var date = splitDate[0].split('/');
     var time = splitDate[1] ? splitDate[1].split(':') : [10, 0];
@@ -80,3 +96,3 @@ return {
 function getLastDate(year, month) {
-    return new Date(new Date(year + '-' + (month + 1) + '-1').setDate(0)).getDate();
+    return new Date(new Date(year + '/' + (0, _resetDate.resetDate)(month + 1) + '/01').setDate(0)).getDate();
 }

lib/datePicker/util/getScrollData.js

@@ -11,2 +11,5 @@ 'use strict';
 exports.getModeMonthData = getModeMonthData;
+
+var _resetDate = require('../../_util/resetDate');
+
 function getModeDateData(BScrollList, state) {
@@ -23,3 +26,3 @@ var yearBS = BScrollList.year,
     var day = dayList.listData[dayBS.getSelectedIndex()].dataKey;
-    return year + '-' + resetDate(month) + '-' + resetDate(day);
+    return year + '/' + (0, _resetDate.resetDate)(month) + '/' + (0, _resetDate.resetDate)(day);
 }
@@ -38,5 +41,5 @@ function getModeTimeData(BScrollList, state, use12hour) {
         var isPM = hour12List.listData[hour12BS.getSelectedIndex()].dataKey == 'pm';
-        return resetDate(isPM ? hour + 12 : hour) + ':' + resetDate(minute);
+        return (0, _resetDate.resetDate)(isPM ? hour + 12 : hour) + ':' + (0, _resetDate.resetDate)(minute);
     }
-    return resetDate(hour) + ':' + resetDate(minute);
+    return (0, _resetDate.resetDate)(hour) + ':' + (0, _resetDate.resetDate)(minute);
 }
@@ -63,6 +66,3 @@ function getModeDateTimeData(BScrollList, state, use12hour) {
     }
-    return resetDate(month);
-}
-function resetDate(date) {
-    return date < 10 ? '0' + date : date;
+    return (0, _resetDate.resetDate)(month);
 }

lib/datePicker/util/pickerData.js

@@ -12,2 +12,5 @@ 'use strict';
 exports.setHour12ListData = setHour12ListData;
+
+var _resetDate = require('../../_util/resetDate');
+
 function setYearListData(minYear, maxYear, currYear, langData) {
@@ -65,3 +68,3 @@ var totalYearCount = maxYear - minYear;
     };
-    var curDate = new Date(year + '-' + month + '-' + day);
+    var curDate = new Date(year + '-' + (0, _resetDate.resetDate)(month) + '-' + (0, _resetDate.resetDate)(day));
     var calcDate = new Date(curDate.setDate(1));
@@ -68,0 +71,0 @@ var dayCount = new Date(new Date(calcDate.setMonth(month)).setDate(0)).getDate();

lib/dialog/index.js

@@ -35,3 +35,3 @@ 'use strict';
 
-var _Animate = require('../_util/Animate');
+var _Animate = require('../Animate');
 
@@ -46,2 +46,4 @@ var _Animate2 = _interopRequireDefault(_Animate);
 
+var _typeof = require('../_util/typeof');
+
 var _config = require('../_util/config');
@@ -51,4 +53,2 @@
 
-var _typeof = require('../_util/typeof');
-
 require('./index.css');
@@ -69,2 +69,4 @@
         };
+        _this2.isShowedMask = false;
+        _this2.isShowedBox = false;
         return _this2;
@@ -79,7 +81,2 @@ }
         }
-    }, {
-        key: 'componentDidUpdate',
-        value: function componentDidUpdate() {
-            !this.props.transparent && this.props.maskClose && !(0, _typeof.isFunction)(this.mask.onclick) && this.addMarkCloseEvent();
-        }
         // mask关闭事件
@@ -91,3 +88,7 @@
             var _this = this;
-            var closeCallback = this.props.closeCallback;
+            var _props = this.props,
+                closeCallback = _props.closeCallback,
+                transitionName = _props.transitionName,
+                maskTransitionName = _props.maskTransitionName,
+                transparent = _props.transparent;
 
@@ -98,2 +99,8 @@ if (this.mask) {
                 this.mask.onclick = function () {
+                    if (transitionName && transitionName !== '' && !_this.isShowedBox) {
+                        return false;
+                    }
+                    if (!transparent && maskTransitionName && maskTransitionName !== '' && !_this.isShowedMask) {
+                        return false;
+                    }
                     if (bodyAnimation) {
@@ -110,2 +117,3 @@ (0, _class.addClass)(_this.box, bodyAnimation.leave);
                     }
+                    return false;
                 };
@@ -131,10 +139,10 @@ }
 
-            var _props = this.props,
-                prefixCls = _props.prefixCls,
-                transparent = _props.transparent,
-                maskTransitionName = _props.maskTransitionName,
-                closeCallback = _props.closeCallback,
-                maskStyle = _props.maskStyle,
-                maskClassName = _props.maskClassName,
-                visible = _props.visible;
+            var _props2 = this.props,
+                prefixCls = _props2.prefixCls,
+                transparent = _props2.transparent,
+                maskTransitionName = _props2.maskTransitionName,
+                closeCallback = _props2.closeCallback,
+                maskStyle = _props2.maskStyle,
+                maskClassName = _props2.maskClassName,
+                visible = _props2.visible;
 
@@ -147,2 +155,4 @@ var newMaskClassName = (0, _classnames2.default)(prefixCls + '-mask', maskClassName);
                         { visible: visible, animationName: this.getAnimationClass(maskTransitionName), onEnd: function onEnd(type) {
+                                _this3.isShowedMask = type === 'enter';
+                                _this3.props.maskAnimated && (0, _typeof.isFunction)(_this3.props.maskAnimated) && _this3.props.maskAnimated(type);
                                 type === 'leave' && closeCallback && closeCallback();
@@ -168,14 +178,14 @@ } },
 
-            var _props2 = this.props,
-                prefixCls = _props2.prefixCls,
-                visible = _props2.visible,
-                bodyStyle = _props2.bodyStyle,
-                transparent = _props2.transparent,
-                boxClassName = _props2.boxClassName,
-                transitionName = _props2.transitionName,
-                maskTransitionName = _props2.maskTransitionName,
-                children = _props2.children,
-                title = _props2.title,
-                footer = _props2.footer,
-                closeCallback = _props2.closeCallback;
+            var _props3 = this.props,
+                prefixCls = _props3.prefixCls,
+                visible = _props3.visible,
+                bodyStyle = _props3.bodyStyle,
+                transparent = _props3.transparent,
+                boxClassName = _props3.boxClassName,
+                transitionName = _props3.transitionName,
+                maskTransitionName = _props3.maskTransitionName,
+                children = _props3.children,
+                title = _props3.title,
+                footer = _props3.footer,
+                closeCallback = _props3.closeCallback;
 
@@ -187,2 +197,4 @@ var newBoxClassName = (0, _classnames2.default)(prefixCls + '-box', boxClassName);
                     { visible: visible, animationName: this.getAnimationClass(transitionName), onEnd: function onEnd(type) {
+                            _this4.isShowedBox = type === 'enter';
+                            _this4.props.boxAnimated && (0, _typeof.isFunction)(_this4.props.boxAnimated) && _this4.props.boxAnimated(type);
                             // 当选择不创建mask或者mask不使用动画的时候，body动画结束触发closeCallback
@@ -215,6 +227,6 @@ type === 'leave' && (transparent || maskTransitionName === '') && closeCallback && closeCallback();
         value: function render() {
-            var _props3 = this.props,
-                prefixCls = _props3.prefixCls,
-                className = _props3.className,
-                style = _props3.style;
+            var _props4 = this.props,
+                prefixCls = _props4.prefixCls,
+                className = _props4.className,
+                style = _props4.style;
 
@@ -245,2 +257,4 @@ return _react2.default.createElement(
     closeCallback: function closeCallback() {},
+    maskAnimated: function maskAnimated() {},
+    boxAnimated: function boxAnimated() {},
 
@@ -247,0 +261,0 @@ title: null,

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.DatePicker = exports.Picker = exports.Tabs = exports.Popup = exports.Modal = exports.Alert = exports.Card = exports.Button = exports.Dialog = exports.Icon = exports.Toast = undefined;
+exports.FullModal = exports.TouchFeedback = exports.Animate = exports.ImageView = exports.Loading = exports.DatePicker = exports.Picker = exports.Tabs = exports.Popup = exports.Modal = exports.Alert = exports.Card = exports.Button = exports.Dialog = exports.Icon = exports.Toast = undefined;
 
@@ -108,4 +108,49 @@ var _toast = require('./toast');
 
+var _loading = require('./loading');
+
+Object.defineProperty(exports, 'Loading', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_loading).default;
+  }
+});
+
+var _imageView = require('./imageView');
+
+Object.defineProperty(exports, 'ImageView', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_imageView).default;
+  }
+});
+
+var _animate = require('./animate');
+
+Object.defineProperty(exports, 'Animate', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_animate).default;
+  }
+});
+
+var _touchFeedback = require('./touchFeedback');
+
+Object.defineProperty(exports, 'TouchFeedback', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_touchFeedback).default;
+  }
+});
+
+var _fullModal = require('./fullModal');
+
+Object.defineProperty(exports, 'FullModal', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_fullModal).default;
+  }
+});
+
 require('./style/reset.css');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/modal/index.js

@@ -51,2 +51,6 @@ 'use strict';
 
+var _config = require('../_util/config');
+
+var _config2 = _interopRequireDefault(_config);
+
 require('./index.css');
@@ -65,5 +69,8 @@
         _this.state = {
+            isRenderModal: _this.props.visible,
             visible: _this.props.visible,
             lang: _i18n2.default[_this.props.lang]
         };
+        _this.maskShowed = false;
+        _this.boxShowed = false;
         return _this;
@@ -76,5 +83,10 @@ }
             if (this.state.visible !== newProps.visible) {
-                this.setState({
-                    visible: newProps.visible
-                });
+                if (newProps.visible) {
+                    this.setState({
+                        isRenderModal: newProps.visible,
+                        visible: newProps.visible
+                    });
+                } else if (this.props.visible !== newProps.visible) {
+                    this.close();
+                }
             }
@@ -87,2 +99,6 @@ }
 
+            var _props = this.props,
+                transitionName = _props.transitionName,
+                maskTransitionName = _props.maskTransitionName,
+                transparent = _props.transparent;
             var lang = this.state.lang;
@@ -94,3 +110,11 @@
                     { noBorder: true, full: true, onClick: function onClick() {
+                            // 防止enter动画没有结束就点击关闭引起bug
+                            if (transitionName && transitionName !== '' && !_this2.boxShowed) {
+                                return false;
+                            }
+                            if (!transparent && maskTransitionName && maskTransitionName !== '' && !_this2.maskShowed) {
+                                return false;
+                            }
                             _this2.close();
+                            return false;
                         } },
@@ -116,5 +140,17 @@ lang.close
             var onPress = btn.onPress ? btn.onPress : function () {};
+            var _props2 = this.props,
+                transitionName = _props2.transitionName,
+                maskTransitionName = _props2.maskTransitionName,
+                transparent = _props2.transparent;
+
             return _react2.default.cloneElement(_react2.default.createElement(
                 _button2.default,
                 { noBorder: true, full: true, onClick: function onClick(event) {
+                        // 防止enter动画没有结束就点击关闭引起bug
+                        if (transitionName && transitionName !== '' && !_this3.boxShowed) {
+                            return false;
+                        }
+                        if (!transparent && maskTransitionName && maskTransitionName !== '' && !_this3.maskShowed) {
+                            return false;
+                        }
                         event.stopPropagation();
@@ -129,2 +165,3 @@ var res = onPress();
                         }
+                        return false;
                     } },
@@ -137,10 +174,9 @@ btn.text
         value: function close() {
-            var _props = this.props,
-                transitionName = _props.transitionName,
-                maskTransitionName = _props.maskTransitionName,
-                closeCallback = _props.closeCallback;
+            var _props3 = this.props,
+                transitionName = _props3.transitionName,
+                maskTransitionName = _props3.maskTransitionName;
             // 当没有提供动画，无法触发动画事件触发外部传入的closeCallback，所以当没有动画则主动触发外部closeCallback
 
             if (transitionName === '' && maskTransitionName === '') {
-                closeCallback && closeCallback();
+                this.closeCallback();
             } else {
@@ -169,6 +205,6 @@ this.setState({
         value: function createFooter() {
-            var _props2 = this.props,
-                prefixCls = _props2.prefixCls,
-                buttons = _props2.buttons,
-                closable = _props2.closable;
+            var _props4 = this.props,
+                prefixCls = _props4.prefixCls,
+                buttons = _props4.buttons,
+                closable = _props4.closable;
 
@@ -182,22 +218,56 @@ return _react2.default.createElement(
     }, {
+        key: 'closeCallback',
+        value: function closeCallback() {
+            var _this4 = this;
+
+            this.setState({
+                isRenderModal: false,
+                visible: false
+            }, function () {
+                _this4.props.closeCallback();
+            });
+        }
+        // 防止enter动画没有结束就点击关闭引起bug
+
+    }, {
+        key: 'maskAnimated',
+        value: function maskAnimated(type) {
+            this.maskShowed = type === 'enter';
+        }
+        // 防止enter动画没有结束就点击关闭引起bug
+
+    }, {
+        key: 'boxAnimated',
+        value: function boxAnimated(type) {
+            this.boxShowed = type === 'enter';
+        }
+    }, {
         key: 'render',
         value: function render() {
-            var _props3 = this.props,
-                children = _props3.children,
-                maskClose = _props3.maskClose,
-                transitionName = _props3.transitionName,
-                maskTransitionName = _props3.maskTransitionName,
-                prefixCls = _props3.prefixCls,
-                closeCallback = _props3.closeCallback,
-                className = _props3.className,
-                style = _props3.style,
-                maskStyle = _props3.maskStyle,
-                title = _props3.title,
-                visible = _props3.visible,
-                transparent = _props3.transparent;
+            var _this5 = this;
 
-            if (visible) {
+            var _props5 = this.props,
+                children = _props5.children,
+                maskClose = _props5.maskClose,
+                transitionName = _props5.transitionName,
+                maskTransitionName = _props5.maskTransitionName,
+                prefixCls = _props5.prefixCls,
+                className = _props5.className,
+                style = _props5.style,
+                maskStyle = _props5.maskStyle,
+                title = _props5.title,
+                transparent = _props5.transparent,
+                buttons = _props5.buttons,
+                closable = _props5.closable;
+
+            if (this.state.isRenderModal) {
                 return _react2.default.createElement(
                     _dialog2.default,
-                    { transparent: transparent, maskTransitionName: maskTransitionName, visible: this.state.visible, style: style, maskStyle: maskStyle, maskClose: maskClose, transitionName: transitionName, boxClassName: (0, _classnames2.default)(prefixCls + '-box', className), closeCallback: closeCallback, title: this.createTitle(title), footer: this.createFooter() },
+                    { transparent: transparent, maskTransitionName: maskTransitionName, visible: this.state.visible, style: style, maskStyle: maskStyle, maskClose: maskClose, maskAnimated: function maskAnimated(type) {
+                            _this5.maskAnimated(type);
+                        }, boxAnimated: function boxAnimated(type) {
+                            _this5.boxAnimated(type);
+                        }, transitionName: transitionName, boxClassName: (0, _classnames2.default)(prefixCls + '-box', className), closeCallback: function closeCallback() {
+                            _this5.closeCallback();
+                        }, title: this.createTitle(title), footer: closable || buttons && buttons.length > 0 ? this.createFooter() : null },
                     _react2.default.createElement(
@@ -219,4 +289,4 @@ 'div',
 Modal.defaultProps = {
-    prefixCls: 'zds-modal',
-    maskTransitionName: 'zds-fade',
+    prefixCls: _config2.default.cls + '-modal',
+    maskTransitionName: _config2.default.cls + '-fade',
     style: {},
@@ -230,3 +300,3 @@ maskStyle: {},
     title: '',
-    transitionName: 'zds-zoom',
+    transitionName: _config2.default.cls + '-zoom',
     buttons: [],
@@ -233,0 +303,0 @@ maskClose: false,

lib/picker/components/pickerWrapper.js

@@ -47,2 +47,6 @@ 'use strict';
 
+var _config = require('../../_util/config');
+
+var _config2 = _interopRequireDefault(_config);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -66,3 +70,2 @@
         value: function componentDidUpdate() {
-            console.log(this.props.data.selectedIndex);
             if (this.props.data.selectedIndex) {
@@ -76,2 +79,4 @@ this.BScrollObj.wheelTo(this.props.data.selectedIndex);
         value: function componentDidMount() {
+            var _this2 = this;
+
             var _props$data$scrollTyp = this.props.data.scrollType,
@@ -84,6 +89,11 @@ scrollType = _props$data$scrollTyp === undefined ? new Date().getTime() : _props$data$scrollTyp;
                 this.BScrollObj = new _betterScroll2.default(wrapperNode, initBScrollConfig);
+                // 某种情况下会出现无法滚动到指定的selectedIndex
+                requestAnimationFrame(function () {
+                    _this2.BScrollObj.wheelTo(initBScrollConfig.wheel.selectedIndex);
+                    _this2.addActiveItem();
+                    _this2.BScrollObj.refresh();
+                });
                 this.BScrollObj.on('beforeScrollStart', this.touchStart);
                 this.BScrollObj.on('scrollEnd', this.touchEnd);
                 this.BScrollObj.on('scrollCancel', this.touchEnd);
-                this.addActiveItem();
                 this.props.initBScrollCallback(scrollType, this.BScrollObj);
@@ -108,4 +118,4 @@ }
                 selectedIndex: data.selectIndex ? data.selectIndex : 0,
-                rotate: 25,
-                adjustTime: 400,
+                rotate: 0,
+                adjustTime: 0,
                 wheelWrapperClass: prefixCls + '-ws',
@@ -187,3 +197,3 @@ wheelItemClass: prefixCls + '-wi'
         value: function render() {
-            var _this2 = this;
+            var _this3 = this;
 
@@ -199,3 +209,3 @@ var _props3 = this.props,
                 { key: wrapperKey, className: prefixCls + '-wrapper wrapper', ref: function ref(refs) {
-                        _this2.getWrapper(refs);
+                        _this3.getWrapper(refs);
                     } },
@@ -205,3 +215,3 @@ _react2.default.createElement(
                     { className: ulCls, ref: function ref(refs) {
-                            _this2.getWheelScroll(refs);
+                            _this3.getWheelScroll(refs);
                         } },
@@ -220,5 +230,5 @@ this.renderItem()
 PickerWrapper.defaultProps = {
-    prefixCls: 'zzc-picker',
+    prefixCls: _config2.default.cls + '-picker',
     wrapperKey: '',
     data: []
 };

lib/picker/index.js

@@ -45,2 +45,6 @@ 'use strict';
 
+var _config = require('../_util/config');
+
+var _config2 = _interopRequireDefault(_config);
+
 require('./index.css');
@@ -65,3 +69,3 @@
         key: 'shouldComponentUpdate',
-        value: function shouldComponentUpdate(nextState, nextProps) {
+        value: function shouldComponentUpdate(nextProps) {
             if ((0, _stringify2.default)(nextProps) != (0, _stringify2.default)(this.props)) {
@@ -122,3 +126,3 @@ return true;
 Picker.defaultProps = {
-    prefixCls: 'zzc-picker',
+    prefixCls: _config2.default.cls + '-picker',
     className: '',
@@ -125,0 +129,0 @@ style: {},

lib/popup/index.js

@@ -63,2 +63,5 @@ 'use strict';
         };
+        _this.maskShowed = false;
+        _this.boxShowed = false;
+        _this.rendered = false;
         return _this;
@@ -88,2 +91,23 @@ }
     }, {
+        key: 'boxAnimated',
+        value: function boxAnimated(type) {
+            this.boxShowed = type == 'enter';
+            if (this.boxShowed && this.maskShowed) {
+                this.renderCallback();
+            }
+        }
+    }, {
+        key: 'maskAnimated',
+        value: function maskAnimated(type) {
+            this.maskShowed = type == 'enter';
+            if (this.boxShowed && this.maskShowed) {
+                this.renderCallback();
+            }
+        }
+    }, {
+        key: 'renderCallback',
+        value: function renderCallback() {
+            !this.rendered && this.props.renderCallback && this.props.renderCallback();
+        }
+    }, {
         key: 'render',
@@ -103,3 +127,7 @@ value: function render() {
                     _dialog2.default,
-                    (0, _extends3.default)({ maskTransitionName: _config2.default.cls + '-fade', transitionName: this.getAnimationClass(direction), prefixCls: prefixCls, boxClassName: prefixCls + '-' + direction, visible: visible, closeCallback: function closeCallback() {
+                    (0, _extends3.default)({ maskTransitionName: _config2.default.cls + '-fade', transitionName: this.getAnimationClass(direction), prefixCls: prefixCls, boxClassName: prefixCls + '-' + direction, visible: visible, boxAnimated: function boxAnimated(type) {
+                            _this2.boxAnimated(type);
+                        }, maskAnimated: function maskAnimated(type) {
+                            _this2.maskAnimated(type);
+                        }, closeCallback: function closeCallback() {
                             _this2.setState({ showPopup: false });
@@ -106,0 +134,0 @@ onClose && onClose();

lib/toast/index.js

@@ -47,2 +47,4 @@ 'use strict';
 
+var _typeof = require('../_util/typeof');
+
 var _icon = require('../icon');
@@ -110,7 +112,11 @@
     var item = alignment.get('first');
-    getToast(item.type, item.content, item.duration, item.onClose, item.mask);
+    getToast(item.type, item.content, item.duration, item.onClose, item.parnetNode, item.mask);
 }
-function createParentNode() {
+function createParentNode(specifiedpParnet) {
     var parentNode = document.createElement('div');
-    document.body.appendChild(parentNode);
+    if ((0, _typeof.isDOM)(specifiedpParnet)) {
+        specifiedpParnet.appendChild(parentNode);
+    } else {
+        document.body.appendChild(parentNode);
+    }
     return parentNode;
@@ -121,3 +127,4 @@ }
     var onClose = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : function () {};
-    var mask = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+    var parnetNode = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+    var mask = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
 
@@ -130,2 +137,3 @@ // only one toast to page
             duration: duration,
+            parnetNode: parnetNode,
             onClose: onClose,
@@ -136,6 +144,8 @@ mask: mask
     } else {
+        var _classNames;
+
         _duration = duration;
-        _parentNode = createParentNode();
+        _parentNode = createParentNode(parnetNode);
         _onClose = onClose;
-        var zzcToastCls = (0, _classnames2.default)(PREFIXCLS, (0, _defineProperty3.default)({}, PREFIXCLS + '-nomask', !mask), (0, _defineProperty3.default)({}, PREFIXCLS + '-icon', type === 'loading' || type === 'success' || type === 'error' || type === 'waring'));
+        var zzcToastCls = (0, _classnames2.default)(PREFIXCLS, (_classNames = {}, (0, _defineProperty3.default)(_classNames, PREFIXCLS + '-nomask', !mask), (0, _defineProperty3.default)(_classNames, PREFIXCLS + '-nofixed', (0, _typeof.isDOM)(parnetNode)), _classNames), (0, _defineProperty3.default)({}, PREFIXCLS + '-icon', type === 'loading' || type === 'success' || type === 'error' || type === 'waring'));
         _reactDom2.default.render(_react2.default.createElement(
@@ -184,3 +194,3 @@ 'div',
         value: function info() {
-            getToast('info', arguments.length <= 0 ? undefined : arguments[0], arguments.length <= 1 ? undefined : arguments[1], arguments.length <= 2 ? undefined : arguments[2], arguments.length <= 3 ? undefined : arguments[3]);
+            getToast('info', arguments.length <= 0 ? undefined : arguments[0], arguments.length <= 1 ? undefined : arguments[1], arguments.length <= 2 ? undefined : arguments[2], arguments.length <= 3 ? undefined : arguments[3], arguments.length <= 4 ? undefined : arguments[4]);
         }
@@ -190,3 +200,3 @@ }, {
         value: function success() {
-            getToast('success', arguments.length <= 0 ? undefined : arguments[0], arguments.length <= 1 ? undefined : arguments[1], arguments.length <= 2 ? undefined : arguments[2], arguments.length <= 3 ? undefined : arguments[3]);
+            getToast('success', arguments.length <= 0 ? undefined : arguments[0], arguments.length <= 1 ? undefined : arguments[1], arguments.length <= 2 ? undefined : arguments[2], arguments.length <= 3 ? undefined : arguments[3], arguments.length <= 4 ? undefined : arguments[4]);
         }
@@ -196,3 +206,3 @@ }, {
         value: function error() {
-            getToast('error', arguments.length <= 0 ? undefined : arguments[0], arguments.length <= 1 ? undefined : arguments[1], arguments.length <= 2 ? undefined : arguments[2], arguments.length <= 3 ? undefined : arguments[3]);
+            getToast('error', arguments.length <= 0 ? undefined : arguments[0], arguments.length <= 1 ? undefined : arguments[1], arguments.length <= 2 ? undefined : arguments[2], arguments.length <= 3 ? undefined : arguments[3], arguments.length <= 4 ? undefined : arguments[4]);
         }
@@ -202,3 +212,3 @@ }, {
         value: function waring() {
-            getToast('waring', arguments.length <= 0 ? undefined : arguments[0], arguments.length <= 1 ? undefined : arguments[1], arguments.length <= 2 ? undefined : arguments[2], arguments.length <= 3 ? undefined : arguments[3]);
+            getToast('waring', arguments.length <= 0 ? undefined : arguments[0], arguments.length <= 1 ? undefined : arguments[1], arguments.length <= 2 ? undefined : arguments[2], arguments.length <= 3 ? undefined : arguments[3], arguments.length <= 4 ? undefined : arguments[4]);
         }
@@ -208,3 +218,3 @@ }, {
         value: function loading() {
-            getToast('loading', arguments.length <= 0 ? undefined : arguments[0], arguments.length <= 1 ? undefined : arguments[1], arguments.length <= 2 ? undefined : arguments[2], arguments.length <= 3 ? undefined : arguments[3]);
+            getToast('loading', arguments.length <= 0 ? undefined : arguments[0], arguments.length <= 1 ? undefined : arguments[1], arguments.length <= 2 ? undefined : arguments[2], arguments.length <= 3 ? undefined : arguments[3], arguments.length <= 4 ? undefined : arguments[4]);
         }
@@ -211,0 +221,0 @@ }, {

package.json

 {
   "name": "zzc-design-mobile",
   "name_cn": "租租车主流程UI规范",
-  "version": "1.0.8",
+  "version": "1.3.4",
   "description": "",
@@ -11,4 +11,3 @@ "main": "./lib/index.js",
     "watch": "rm -rf ./es && gulp watch",
-    "publish": "rm -rf ./lib && gulp compile",
-    "build_demo": "npm run publish && node ./config/copy.js",
+    "compile": "rm -rf ./lib && gulp compile && node ./config/copy.js",
     "test": "BABEL_ENV=test ./node_modules/.bin/jest -u --config .jest.js",
@@ -92,5 +91,5 @@ "start": "cross-env NODE_ENV=development concurrently \"cross-env DEMO_ENV=react bisheng start -c ./bisheng.config.js\"",
     "typescript": "2.7.2",
-    "typescript-eslint-parser": "^14.0.0",
+    "typescript-eslint-parser": "14.0.0",
     "webpack": "3.10.0"
   }
 }

README.md

@@ -1,3 +0,45 @@
-## zzc-design-mobile
+# zzc-design-mobile
 
+<div class='github-box'>
+    <div class='github-btn github-btn-large'>
+        <a class='gh-btn' href='https://github.com/LLLLLamHo/zzc-design-mobile' target='_blank'>
+            <span class='gh-ico' aria-hidden='true'></span>
+            <span class='gh-text'>Star</span>
+        </a>
+        <a class='gh-count' target='_blank' href='https://github.com/LLLLLamHo/zzc-design-mobile' style='display: none;'></a>
+    </div>
+</div>
+
+<div class='logo-box'>
+    <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAAAXNSR0IArs4c6QAAF9lJREFUeAHtXQl8VNW5P+femclMZiYLrRVkUSubsmWrSNv3Ki7AJLjUPun72dKqT/tkCRhqkdA+rLYFRECWAK6trWvLz62QTFQUFTeWkLAJBKtWFlfIMpNMZu5y3ncCE7LN5N5z751MkjO/X353+77vnO9//7n33HO+8x2E+I8jwBHgCHAEOAIcAY4AR4AjwBHgCHAEOAIcAY6AqQhgU61xYy0I3HgjEQPn7LwOi/YbsCBmY5v4HWwX0zAWbQhjjCjyKiFEVWSiqCEkKydg97CiyptOSnlPVjyCpRZjPXCHE8vEm+YrPJKCSP1d2OaYbnM5hyFREFjME1UlSlPTCRSRn5brBtz36pP9G1jsdKcOJ5YJ6E+auWOwaLOvF1NdUwSb3WaCybMmVFVVGhq3C4p066aSvENnLyT3HieWgfszafoXbjHjxDN2b9pUJGCmp5PW4uGlSdSG4M6moHjt64+N+VKrXnfJcWIxIp8/q2KW4HGvFOx2B6MJJjWiyLISaFxZVpJ9N5OBBClxYukE+saio64GtWaLzeuZgBDpNvyUYPAICuPxpRvG1uh0ISHi3QZMQrwzuRDalrK73FWiy9nPZNNM5tSIFFIC9T7/hkvfYjJgoZKl7QIL651w01MLqy51eLxHkoVUFADBYXfZMjLfyJ+x+46EA9JFgUn7xCIPZmWgcGgqUtEPEVYHIoQVRNAxhIWtyOYox7/Zm7BP8PzZu8YIbs+uRLenurh3LZdpw16qq9tQXpI7q+VkN+8kHbHIygkuFP6mGIg0DxHi7hQfjGm74k/oonGr8LSNSqcyJp28/s7KC2SH86DgcDhNMmmZGSkQeNO/OmuiZQXoMJxUxCL3jzgPKeRlaBTnafIB4y3ImXojLqqq1STPIJQ/b/8JW6prAINqt6jIDaFPoStt7D+XjQx0SwXOFJo0bSzywFg3kMqvmVTUAUKuQqHGF8jWy83tlDwDjq+w8q89iVS02ja36wLoUz12zexdI8+40S2bpCEWksIrgClj9aNAJqLtJxbq14uv4Sv8YJLN650eXyo5rwrOlDTk9u71zay4prtqmBSvQrLs4mFIkQ9C41xkAwIHkQNdiO+q/oZNv60WHfMTndJJISWl8zZeW/GkPYLBbaLW1xWXrsu7P9GVTI4nlqLcxE4qChnxIBn92CzwCAqW9HRSUSywCONMmZlL4JX+lFnYaLWTHMQi6GqtFY4pZ4YNMA5f7tjmcvXIV2Bn2MArCdvT037mu3PPThrK05mMFeeSg1iYDDbunBk2EMqfXbkEOh5TjNcnuSzYPZ68xiEHjvkKd5+TiJolB7EQNqEtY4YNhES3K2k6Gc0mgOhy9Ye/TwvmVOSabbu9veQgFkSEtK8Yw7FhG5Nm7bwVOkI9DGX3GBXwL1VI9W7Pn7HrJisrnRzEQthlgpOGe8ZtouPnJtQjhgkMUaHhOrmhoUKqr98cqQu8AD3l70Kk6EkYtiIxlCw5DWHSopiZ8dSUWZWLLSkAjFrSsWhVZa22C20r818RQBog0/ukSb7d/3DOh535MPWOqoGKHW2wedwF8CWXkH92LGDsyExf4JtTOca/Jtv0/q7k6MdaPByGH6DLwMgP48O4uJq5t5neXPxt71H6FWWkGq11aVhLuDF09Wsl2e+2Ph9r3/e/uy8RPCmvQwRF/1gyVpyH0OdDquzM8q8dFjbLfkL+O8yqrJV2FFGZaSqpmsK1SqjxfK2kor7RJ9rm5ZecJ9cHtwK/E/Z6FN2pIwVH+MRVcw8MMQtjTqwokjbx+9Fdw1tJltRQZLx/bc7Xem3BzDBStmbcFZGauqUIes716rPKw9diP2eKWO2bseNHrDZa63FinUEDmhym9e9IwcCSsnVZ1a2B1rtfvi57oVIbuF6VpIheXVZ52n9nVuAgJ9aZu0AEIYP1hrTWU5vC9f51efe0Pse6X7oh55+2cGiEEmoyZQxUSz3ox4PYL239lNkV67TIx5LhxDqDDMxW9sYCSc95ORwu1yPflexLq7I//SJwyXlSMLirK1mzrsPrGDsyMmb65lZtZbXJiXUGOfhPNdwPRk1hWVrPejNi6dHp9v5V474Xqaldl8g+L7vXe3l+0f5Prp1/SPc/HSfWmbuJ4ZEV68ZqP4/JV8r33tMur0+yfF3ubKm2djqRZVmfJrs0a+AgJxY75h00YTIpsTqZh3997tNyTcM42ovfoQIWnWAJHOTEMvNmkMQMzdD+rlTFO0AONHTak2+mS1Fb2A6R9OlpLxfM2qVpBjYnVhS5Hrbd+ODgUNnqsaPk2vqngM4J6e/SEzjIidXDCNW+upDDYbp8qm4mkVVLp8FFy6WjEzRwMH/unl3xAgdjEotGUpIHRlxIlo34Abl/+KXNU7Oi1vnWEgSaZyoxWC7bkPOQEgxcpobDCZvEC7krcuMFDnYgFiUQWTx8DVo64hiS1I+RrL4D07K2w/DCcTh/kCwZ9ltWABgw61sqUuhF8sDFo1mcLivJ2dVU1zhQDjZ8zKLPohMvcLANsciS4b8CAh2BSINCCP4+r2NhZCS8zf+I5KaPyJKRl3e8zs8YQgDjIUiS3wVsJ7HY2fJIXl3ZqrEXSXWBTZAIJyHtrliBgy3EgqfRvUCmh8Gh1C6dIgTCOtRXyf3DbuhSlgvoRSANEbW0+Z9cr+YZef/arGsj9TV3I5i5ymhCl1pngYPNxCJLR0yDp9QiXdYIsSMFPcn66NZVVp8TJjb6T04WD7uftnVZ3C9fm/uAVFNzhRqJNLHo69VpFTi4ieoK5OHcVHDiQb2GzsinQrZfVl3GIvuU2ny0dPjG5kQpDG7TvFmhU/IFcmPjcQZ1BhWC7WlpUwvu3PehgE4Fft55e0qjXcifADOZczRKczG9CBD0E9R08k2yavS5elWpPM1XWrpi9GA5EHwjUcGDoif1YvoqvI6lwm10ZMW4jTYG+UFbBMilKBT5gCwfdUnb89qOmoMHV4+7MnyqZnGiggcFeFqN0Va9OFIYGbcRxzy/BAgQcgGSIu9Bn+KVrHi8sj73d1Jd/XWqbH3wIDyxMNMjtp1zZthoZ5IfdkCAoHQIm/FDX+P/dLim8QQMYm9qCinD5MYm3WHTGotoFhNgTorxmRnEBBt6at2XZZu/xtXHoHtoCesX45bVoz5zH71kAPTW77AKSvoq1B3E1UllzLDRiVl+KjYCZAFaMuI58pfLmQIUN27ESumqrPFSbWCtFcGDLR2ksR3gV5IXATINfXF8K1mTzTwRxF+SNSdyqu4maHeZGjzIiZW8rNFWM4IuQ8GG7WT5cObJuuUP5TyHg8ExMBHEtFyunFjabl+SS5ELUYS8D436iawVpQtAuRTvedDftZ/VRms9TqzWaPTs/QxY//AViD65mdWN08GD48ZItfV/NRo8yInFehes0WMaF2ypCv1iRHhNyzHjjr8k+2aprvYOI8GDnFiM4FukZjzUhZiT1MRfkvuI2lg/Hgaxgyy+cmKxoNZHdErX5FY01TYMgkHsf+l1mRNLL2J9TL45eHDlmKFSfeBFPcGDnFh9jCis7vrXZN0AC0HN1xo8yInFinQf1ING/XJYH/FyLcGDnFh9kCBGXC5dm7tNCYWGwGJQx+LZAWLhU/EE+DWOQHsEaEK50pWjhkTqg1tiBQ8CsYQJoKi71d++MH7ctxCgwYPla8ZdDUlK/kjUjpkHBbzwUDVy4MuAeZoSsPYt+Li3XSHgL8lZJNcECki7zIPNbazmVbM8F0FkIn6uK0P8OkegPQL+DTn+cKB+KPR3tQQPtjTe8Rx/GBUfvgnWXP5Te0V+zBHoCoFX11961H109ABYFOEDKttCLHpA35u4+PDvYFDgFjiQ6Dn+SygCxsYKTagq61QzWjQNHoQ1qSdAu2t1G2JF64WLjzyBBDwZjk2Lz4na5tu4CBgfK4xrXsPF8MlnybJhWRokY4rAOOOdnRKLauC7D2+FRv0EeHJ9HNMCv9D7ECBoIJLxNrJ0WIER52ISixqFRv0h5HZfBq/G940UwnV7GgKw/AxBL0P+iNmsNY9LLGoUz6n8GvUfeAXs/YO1EK7XAxGg63MTshYCB1cR8vsuedLeQ00K+JY3m+CL8b+BXEvbG+DHvRwBguaipU9D3q6xbj2eaiIWNdj8xbiwuhiJwm38i1EPxL1AlqBrkRR6W09WR83EisIDjfrHoZPCB+2uhKWDjpbNt92KQA6EzGyH9KFjtdRCN7GoUXx39evI7vg+PLk+1VIIl+klCBA0CMnkHbJ0uK8rj5iIRY3iuw58iGzO8UCu7V0Vwq/3IgTozHlCNkGyvhnxvGImFjWKf7P3K5TyrYnwanw+XiH8Wi9DgH4xqup6eHKtiPXFKBQU7fv3j2cd/Bar63je+yG8oJp/LbIC2JP1VDIPLXnm+easkO38EGDZ1iGSG31WMHOHeSuMtiuEH/ZmBMj16GTgLbJsFCQ8PvtrfhU2p1ROz9w2eXbl3LOX+B5HQCsCJA8pEfhiPJujvqWNRVfWdGSkPTilsPLvWs1xOY5ACwIEtclR30IsKgAxG9iRnjYtv2jv4UnTv9DV09pSAN/pywi05KhvQ6woIja3e7i9/6nPpxbuHhc9x7cJQaDb47Hg6WKwDqdz1HdKLAqhmJLixW5PxaRZO29NCKS8EIpA98djmbREXUxiUS/pUhYpGZmPQbvrUXrMfxwBrQjEJRY1AoPPtN11W37Rnt2+wiMpWg1zub6NQJfEisJjc3uyhZTI55OLKoZGz/EtRyAWApqJRQ2ITmdmisPz4ZQZu26MZZCf5whQBHQRqxkyWHTa3i/j71MKd6/gEHIEYiGgn1hg6XS7K32eb+6ebfHWBY5VaMfzpKbjOX6mJyPARKyow3av54ehIQeOT5q5Y3D0HNPWljIR2HqYSZcrJSUChohFPRJcrnNTvGkfTZ65Ywqrh3j+fkhKkgJTzdCbrDa4XnIhYJhY1B1stzsc6ZllU2ZW3MPqHi7eV4MuckyGJ9ffWG1wveRBwBRiUXdgEBs7+mXe4yusKmd1D087EMHF1b+EWdjMBGUtm+uZi4BpxDpdLVi6Nd07OX/e/s8MBQ8uqL4PCeLP4NVofGUyc/Gy2prBcToTqoeJCWvqYNlkYp12zJbqGiy58dGrZ1f+gNVVvODQM/BavAr+TrLa6IF6STBWaEIyGEwkS4hFb6jgsLucXs/b0O4qYr3BEPL8DkJ2OsX/CKuNHqbX/U8sRFTDmBGsWEYsWjkaPAidqSt8cyo3slYWFx/4CKU4aMbBbaw2uJ4uBIyveI/RCUuJRd2Bf0FsT0v7r4I791RfO/8Q04KZeN6BU2ionb4Wn9IFUc8T7v5XIRaM/wMTtA1WWMUJcUb0eIapqnoCvhqzWe73mS/G6UCue1n0e4hO978KncLL8CyIGMILC/8QpNpTfyAqSQi5BGeKx+ZO3Tll9m7mxbKhO+L34PgvDDtvCDnLlBNyH+LVHhcd/BwJZH08mbjXMH4HFx96VfCvy7tHqqn9KVFkEz4z4xbZfJEGD9rT0x71za78c9fSnUvghdVPgvNXA7l6W4767n9iUcixsAjaMAc6Rz/u2VpEhOaHRnMbq3xD3kYSbMhTw+GGuGomXaSD2PaMtFvy79xbxRo8iBcceRu+Pekw0EcmVYubOYMAJH4JQJDUVGh2VGsGBeMaZBOvb07vDkotjffNa3P22Bvx+Upj6IRmYwYFbR73OBGCB/NnVQ1nMdXshB3SWfIc9SzwxdWB19mnyJlKc3P8DQS76ILAW5EojsfzD70VNdpCLHrixXUXn9y8YtQgJRjYERWweitA8KDgcR2YPKtiGktZZ3PUo2dZ9LlObARwUVXt6SE2O6QuwouBZJAABh+Ht8RXsK2C4/XQpzQRmiZX4PkH2/Q1xnyn5xdW/MWWlvFLMBJTJnaV9F8h8JPr6tbQjLv6tY1rXLOgWqbtPyOWiKwom5YOt7HagJyfhyCTywhW/dN6OAg3mqlbx1i5bbXbPLFaXypbm3uLXFt3F3wxdvEYbK3Fvn+63ZUxt2DunvfMCR5krwvXNI5ATGJR02XrclZGak8VkIgkGS9KmwXR65kAwYMnDAcPaiuOS1mEQFxi0TJfWX9peURquERpCicsNSQED36HBg/6Zuz2WeQ3N2sxAl0Si5b/yoO5H0lf9hsoBxs+trg+LeZp8KAt01vqm7Xr3paTVu5grAkLK6vQm2xrBvPVJ/s3lK0ae1G8xQ/NBgYLArZn9vu//DlVr5ptu7W9ghl7M2mgYutzTPvd3m/OVGtLlDQTK1r66cUPa9bAIFCCYCTYlua9uuDX+476CnefE62HmVtik64zwx4hSsLaombU10obuolFK0O7BGBF89uRoiTki5GWKbpSB8HfvwsKK/6DHpv5I4J4mxn2iKI0mmGnN9hgIhZ1vLwk5/FQoOE/FUlqShQQNHhQ9KS9CeOMd5lVJn0N2pypEO9l/AcdM/XGrfQOC8zEou6/VpL9Lq5rGqqEmr5JGBw0eDA9fdmUwqrnzSiT2NXnsN1Yx2i0HvAq7G2D4lHXdG8NEYuWtvmhrONqxDFIDgT36y6dVQHW63Ske2/wFe07who8SIv2Fe6aYfN6IUrCnB9R1M/NsdTzrRgmFoXAv3ZYuGz1uDGRusALMIaUoEY9RMO7U4fCAuonCuZU5Oq9FTBkdbPNk15i5pAVVlQIkuM/ioApxIpCWb426ydSTeICB5sdcDo8gtu7wzdr9/JoPeJtc39F7PlzK58R0zL+TGPy48nquQZPK/KVnPOEHp3eLGu876YTdGiaI5hf+Ay22ZgHZDsx2+UptSlcD3+Py6r0IF38urXCNUVVo2SZzBddzp9C+nHTE8jRcKPSlaMHti5T735vGoS2hFgU0ObEuE7nu0JKSuKzL0McvypFIrAsR4hgJGJBdAl2O0QuwJFFPzlQ/2zZ6uybjJjvTcQy7VXQHtBo4KDc2Gh8OlF7410dQ+MeuiZSIMY+gybpFez0yWkdqaBRSQQVr+qqWhquBzXIdCUC0Z/d/7OMWNQ1GjhYumL0YCkQgACx3vtTGho/2bw2y3hwJCFmvKLNsGH4ZllKLFo7iLMi/tVZl8l1tU/AIFDCvhgNI6PZACakSf61ZvF4ghgZ7w80w0a8Omq8ZjmxovVIdOBgtFyrt0oo9KV/Q/ZLppRDBBOSzxETbBj3JmHEolXtjsBB4xDFt6CGmhbFl9BzFW/WI92pLMabOj2f4JMJJRb1rTsCB63CVA427vOvz33UNPsT+pdD20H7lKuOBX8N+s91PJ34MwknFnWxOwIHzYZWjUhhHCY/MtMunvimDAMX82A0gK0tKgrFp+cEmlkrNluW9etorc6UOXtec6R5r7SyO0BrXTTLwUdI5GTdTeUP5VjydIAlcRchldyruT7NgsLDeOHhO/TpWCfdLU+s1u4kPnCwdels+5H6+jKrSEVrBHnBIKMhmgN7Xac9oE83jP6Aig/NYPPGGq1uf2JF3aKJQhxezyMwo7bbyR6tU2dbJRg8ULpq3OjOrpl9jiweORxh9T6Ya0gjXJ1t7GOaeY+8AkPxi3Dxh5VtriXBQdIQi2JBU0s63K4tot3eFsQkAIpWgXaEph4bPWzjRqwkskrkgbFuJIdhujsZhFQsQgMdZiO7t+MFFQmbOaXX36QiFq381DuqBhK3vQoGi7+t1xkr5WGG0h738TG5iSaVlT5ZaTvpiEWdpaEt/V173xK9XggZtm6MTwuwdBxQrg+85F+TdYMWeS5zGoGkJFb05vhm777P7vX+FpkYNxW1rWVLZ4BLjY0zaHy/FnkucxaBpCYWrSZNcYTteLPo8Q5N2NMLuhOkhmBlJCjkv/7YmC/PwsX3tCKQ9MSKOuKbWXG74HIutrbtBdnzGxtO4BC5uXTD2C3RsvlWPwI9hlhR16bO3P0L1WlfJDpd38UCNqf+kFFHamjcjxRS5C8Z90a0LL5lR8CcG8NePrPmlbftO9fhku7Bom0yrPx6vt7cVqokRdSw9IkaiTyrBgYupykEmCvDFTsg0GOJ1d6Tgpk7vq8KIqx7KOTBIk8DIMdHGuy7oO9HgeGRCCFqHWz/BdFT+0WkvrSpJO9Qexv8mCPAEeAIcAQ4AhwBjgBHgCPAEeAIcAQ4AhwBjgBHgCPAEeAIcAQ4AoYR+H9KcePuOHutWwAAAABJRU5ErkJggg=='/>
+    <p class='add'>+<p>
+    <?xml version="1.0" encoding="utf-8"?>
+    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+    <svg width='150px' height='150px'; version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
+    <rect fill="#ffffff" width="600" height="600"/>
+    <circle fill="#00D8FF" cx="299.529" cy="299.628" r="50.167"/>
+    <path fill="none" stroke="#00D8FF" stroke-width="24" stroke-miterlimit="10" d="M299.529,197.628
+        c67.356,0,129.928,9.665,177.107,25.907c56.844,19.569,91.794,49.233,91.794,76.093c0,27.991-37.041,59.503-98.083,79.728
+        c-46.151,15.291-106.879,23.272-170.818,23.272c-65.554,0-127.63-7.492-174.29-23.441c-59.046-20.182-94.611-52.103-94.611-79.559
+        c0-26.642,33.37-56.076,89.415-75.616C167.398,207.503,231.515,197.628,299.529,197.628z"/>
+    <path fill="none" stroke="#00D8FF" stroke-width="24" stroke-miterlimit="10" d="M210.736,248.922
+        c33.649-58.348,73.281-107.724,110.92-140.48c45.35-39.466,88.507-54.923,111.775-41.505
+        c24.248,13.983,33.042,61.814,20.067,124.796c-9.81,47.618-33.234,104.212-65.176,159.601
+        c-32.749,56.788-70.25,106.819-107.377,139.272c-46.981,41.068-92.4,55.929-116.185,42.213
+        c-23.079-13.31-31.906-56.921-20.834-115.233C153.281,368.316,176.758,307.841,210.736,248.922z"/>
+    <path fill="none" stroke="#00D8FF" stroke-width="24" stroke-miterlimit="10" d="M210.821,351.482
+        c-33.746-58.292-56.731-117.287-66.312-166.255c-11.544-58.999-3.382-104.109,19.864-117.566
+        c24.224-14.024,70.055,2.244,118.14,44.94c36.356,32.28,73.688,80.837,105.723,136.173c32.844,56.733,57.461,114.209,67.036,162.582
+        c12.117,61.213,2.309,107.984-21.453,121.74c-23.057,13.348-65.249-0.784-110.239-39.499
+        C285.567,460.886,244.898,410.344,210.821,351.482z"/>
+    </svg>
+</div>
+
+
+这是一个基于React实现的UI组件框架。
+
+[了解更多](https://lllllamho.github.io/zzc-design-mobile/)
+
+#### 简介
 zzc-design-mobile是基于react开发的ui框架，用于租租车移动端的ui框架。
@@ -8,27 +50,32 @@ 由产品设计统一规范的移动端统一样式交互的方案。
 
-### Install
+#### 特性
 
-```shell
+- 开箱即用的高质量React组件
+- 使用TypeScript开发，提供完整的类型定义文件
+- 健全的使用文档以及demo
+- 扩展性非常好，容易定义各种自定义样式
+
+#### 支持环境
+
+- IOS9和安卓4.4以上版本
+
+#### 安装
+
+```Shell
 npm install zzc-design-mobile --save-dev
 ```
 
-### Development
+#### 使用
+zzc-design-mobile只支持`import`引入。不支持`cmd`。
 
-```shell
-npm run svgo //清除多余的svg标识
-npm run build //编译整个component到es目录（es6文件）
-npm run watch //动态编译整个component到es目录（es6文件）
-npm run publish //编译整个es到lib目录（es5文件）
-npm run build_demo //相当于执行publish并将lib文件复制到demo文件中的node_modlues文件中
-npm run test //运行单元测试
+引入：
+
+```JavaScript
+import { Alert, Modal } from 'zzc-design-mobile';
 ```
 
-### demo
-```shell
-npm run build //编译demo
-npm run watch //编译demo
-npm run publish //编译demo
+按需引入
+```JavaScript
+import Alert from 'zzc-design-mobile/lib/alert';
 ```
-`publish`和`build`、`watch`有一点不一样，因为`build`和`watch`是开发环境，所以webpack打包的时候会将`zzc-design-mobile`指向外层文件的es文件中去获取。
 
-所以在开发中需要在根目录运行watch，demo目录中也要同时运行watch

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

381343

increased by73.24%

Number of package files

83

increased by16.9%

Lines of code

9826

increased by78.36%

Number of lines in readme file

81

increased by145.45%

Worsened metrics

Number of low supply chain risk alerts

2

increased by100%

No dependency changes