fix(DatePicker): fix wrong style

fix wrong style when Range DatePicker is disabled & readonly

close #81

Author: ZxBing0066

.lintstagedrc

@@ -5,7 +5,7 @@
         "stylelint './src/style/*.js'",
         "stylelint './src/components/**/*.(jsx|js)'",
         "eslint",
-        "jest --bail --findRelatedTests"
+        "jest --bail --findRelatedTests --collectCoverage"
     ],
     "*.{json,css,md}": ["prettier --write", "git add"]
 }

src/components/DatePicker/Range.jsx

@@ -181,7 +181,7 @@ class Range extends Component {
             value: 'custom'
         });
         const { range, custom: _c } = rules;
-        let modifyAble = option === 'custom';
+        let readonly = option !== 'custom';
         let [start, end] = value;
         start = moment(+start);
         end = moment(+end);
@@ -257,7 +257,7 @@ class Range extends Component {
                     onVisibleChange={this.handleVisibleChange}
                     trigger={['click']}
                 >
-                    <RangeDateWrap size={size} modifyAble={modifyAble} disabled={disabled}>
+                    <RangeDateWrap size={size} readonly={readonly} disabled={disabled}>
                         <span>{start.format(rangeFormat || formatString[type])}</span>
                         <RangeDateSeparator />
                         <span>{end.format(rangeFormat || formatString[type])}</span>

src/components/DatePicker/__tests__/__snapshots__/demo.test.js.snap

@@ -4725,6 +4725,7 @@ exports[`DatePicker demo -- range-disabled 1`] = `
   pointer-events: none;
   background: #f7f7f7;
   border-color: #d9d9d9;
+  border-width: 1px;
   color: #bbb;
 }
 
@@ -4778,7 +4779,7 @@ exports[`DatePicker demo -- range-disabled 1`] = `
         </div>
       </div>
       <div
-        class="uc-fe-datepicker-range-date-wrap c5"
+        class="uc-fe-datepicker-range-date-wrap uc-fe-datepicker-range-date-wrap-disabled c5"
         disabled=""
       >
         <span>
@@ -5246,7 +5247,7 @@ exports[`DatePicker demo -- range-onInitialChange 1`] = `
   display: inline-block;
   vertical-align: middle;
   pointer-events: none;
-  border: none;
+  border-width: 0;
   line-height: 28px;
 }
 
@@ -5288,7 +5289,7 @@ exports[`DatePicker demo -- range-onInitialChange 1`] = `
         </div>
       </div>
       <div
-        class="uc-fe-datepicker-range-date-wrap c5"
+        class="uc-fe-datepicker-range-date-wrap uc-fe-datepicker-range-date-wrap-readonly c5"
       >
         <span>
           Invalid date

src/components/DatePicker/style/index.js

@@ -119,9 +119,14 @@ export const RangeSelect = styled(Select)`
 `;
 
 export const RangeDateWrap = styled.div.attrs({
-    className: `${prefixCls}-range-date-wrap`
+    className: ({ readonly, disabled }) =>
+        classnames(
+            `${prefixCls}-range-date-wrap`,
+            readonly && `${prefixCls}-range-date-wrap-readonly`,
+            disabled && `${prefixCls}-range-date-wrap-disabled`
+        )
 })(
-    ({ theme: { Height, HeightNumber, colorMap }, size, modifyAble, disabled }) => css`
+    ({ theme: { Height, HeightNumber, colorMap }, size, readonly, disabled }) => css`
         border: 1px solid ${colorMap.default.border};
         padding: 0 8px;
         border-radius: 2px;
@@ -133,24 +138,25 @@ export const RangeDateWrap = styled.div.attrs({
 
         ${inlineBlockWithVerticalMixin};
 
-        ${disabled &&
-            css`
-                pointer-events: none;
-                background: ${colorMap.disabled.background};
-                border-color: ${colorMap.disabled.border};
-                color: ${colorMap.disabled.text};
-            `};
-
-        ${!modifyAble &&
+        ${readonly &&
             css`
                 pointer-events: none;
-                border: none;
+                border-width: 0;
                 line-height: ${Height[size]};
 
                 ${/* sc-sel */ PickerIcon} {
                     display: none;
                 }
             `};
+
+        ${disabled &&
+            css`
+                pointer-events: none;
+                background: ${colorMap.disabled.background};
+                border-color: ${colorMap.disabled.border};
+                border-width: 1px;
+                color: ${colorMap.disabled.text};
+            `};
     `
 );
 export const RangeDateSeparator = styled.span(

src/components/ThemeProvider/material.js

@@ -225,7 +225,7 @@ export default theme => {
         '&': {
             [`.${datePickerPrefixCls}-date-wrap`]: {
                 boxShadow: materialVars.whiteBoxShadow,
-                borderWidth: '0',
+                borderWidth: 0,
                 paddingTop: '1px',
                 paddingBottom: '1px'
             },
@@ -236,13 +236,16 @@ export default theme => {
         },
         Range: {
             [`.${datePickerPrefixCls}-range-date-wrap`]: {
-                borderWidth: '0px',
+                borderWidth: 0,
                 boxShadow: materialVars.whiteBoxShadow,
                 ':hover': {
                     boxShadow: materialVars.whiteBoxShadowActive
                 }
             },
-            [`&.${datePickerPrefixCls}-range-disabled .${datePickerPrefixCls}-range-date-wrap`]: {
+            [`.${datePickerPrefixCls}-range-date-wrap-readonly`]: {
+                boxShadow: 'none'
+            },
+            [`.${datePickerPrefixCls}-range-date-wrap-disabled`]: {
                 borderWidth: '1px',
                 boxShadow: 'none'
             }