Merge pull request #9 from react-component/new-range

New range

Author: zombieJ

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     'react/sort-comp': 0,
     '@typescript-eslint/no-explicit-any': 0,
     'default-case': 0,
+    'no-confusing-arrow': 0,
     'jsx-a11y/no-autofocus': 0,
     'import/no-extraneous-dependencies': [
       'error',

assets/index.less

@@ -1,11 +1,13 @@
 @prefix-cls: rc-picker;
 
+@background-color: rgb(255, 240, 255);
+
 .@{prefix-cls} {
   display: inline-flex;
 
   &-panel {
     border: 1px solid #666;
-    background: rgb(255, 240, 255);
+    background: @background-color;
     display: inline-block;
     vertical-align: top;
 
@@ -33,6 +35,7 @@
 
     table {
       text-align: center;
+      border-collapse: collapse;
     }
   }
 
@@ -91,9 +94,36 @@
     &-in-range > &-inner {
       background: fade(blue, 5%);
     }
+    &-range-hover-start,
+    &-range-hover-end,
+    &-range-hover {
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        top: 3px;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        border: 1px solid green;
+        border-left: 0;
+        border-right: 0;
+        pointer-events: none;
+      }
+    }
+
+    &-range-hover-start::after {
+      border-left: 1px solid green!important;
+    }
+    &-range-hover-end::after {
+      border-right: 1px solid green!important;
+    }
+
     &-today > &-inner {
       border: 1px solid blue;
     }
+    &-range-start > &-inner,
+    &-range-end > &-inner,
     &-selected > &-inner {
       background: fade(blue, 20%);
     }
@@ -179,6 +209,7 @@
       > li {
         padding: 0;
         margin: 0;
+        cursor: pointer;
 
         .@{prefix-cls}-time-panel-cell-inner {
           color: #333;
@@ -245,17 +276,58 @@
   // ======================= Dropdown =======================
   &-dropdown {
     position: absolute;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 1px red;
 
     &-hidden {
       display: none;
     }
+
+    // Panel
+    @arrow-size: 10px;
+    .@{prefix-cls}-range-arrow {
+      position: absolute;
+      width: @arrow-size;
+      height: @arrow-size;
+      z-index: 1;
+      transform: rotate(-45deg);
+      top: @arrow-size / 2 + 1px;
+      left: @arrow-size;
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        box-sizing: border-box;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      &::before {
+        width: @arrow-size;
+        height: @arrow-size;
+        border: @arrow-size / 2 solid blue;
+        border-color: blue blue transparent transparent;
+      }
+      &::after {
+        width: @arrow-size - 2px;
+        height: @arrow-size - 2px;
+        border: (@arrow-size - 2px) / 2 solid blue;
+        border-color: @background-color @background-color transparent
+          transparent;
+      }
+    }
+
+    .@{prefix-cls}-panel {
+      margin: 10px 0;
+    }
   }
 
   // ========================================================
   // =                     Range Picker                     =
   // ========================================================
   &-range {
     display: inline-flex;
+    position: relative;
   }
 }

examples/common.less

@@ -0,0 +1,7 @@
+h1,
+h2,
+h3,
+h4 {
+  margin: 0;
+  line-height: 200%;
+}

examples/range.tsx

@@ -4,6 +4,7 @@ import RangePicker from '../src/RangePicker';
 import momentGenerateConfig from '../src/generate/moment';
 import zhCN from '../src/locale/zh_CN';
 import '../assets/index.less';
+import './common.less';
 
 const defaultStartValue = moment('2019-09-03 05:02:03');
 const defaultEndValue = moment('2019-11-28 01:02:03');
@@ -43,19 +44,38 @@ export default () => {
 
   return (
     <div>
-      <h1>
+      <h2>
         Value:{' '}
         {value ? `${formatDate(value[0])} ~ ${formatDate(value[1])}` : 'null'}
-      </h1>
+      </h2>
 
       <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+        <div style={{ margin: '0 8px' }}>
+          <h3>Basic</h3>
+          <RangePicker<Moment>
+            {...sharedProps}
+            value={undefined}
+            locale={zhCN}
+            allowClear
+            ref={rangePickerRef}
+          />
+          <RangePicker<Moment>
+            {...sharedProps}
+            locale={zhCN}
+            allowClear
+            ref={rangePickerRef}
+            showTime
+          />
+        </div>
+
         <div style={{ margin: '0 8px' }}>
           <h3>Basic</h3>
           <RangePicker<Moment>
             {...sharedProps}
             locale={zhCN}
             allowClear
             ref={rangePickerRef}
+            // style={{ width: 500 }}
           />
           <button
             type="button"
@@ -78,7 +98,25 @@ export default () => {
             locale={zhCN}
             allowClear
             allowEmpty={[true, true]}
-            selectable={[true, false]}
+          />
+        </div>
+
+        <div style={{ margin: '0 8px' }}>
+          <h3>Start disabled</h3>
+          <RangePicker<Moment>
+            {...sharedProps}
+            locale={zhCN}
+            allowClear
+            disabled={[true, false]}
+          />
+        </div>
+        <div style={{ margin: '0 8px' }}>
+          <h3>End disabled</h3>
+          <RangePicker<Moment>
+            {...sharedProps}
+            locale={zhCN}
+            allowClear
+            disabled={[false, true]}
           />
         </div>
 

src/PanelContext.tsx

@@ -10,6 +10,10 @@ export interface PanelContextProps {
   /** Only work with time panel */
   hideHeader?: boolean;
   panelRef?: React.Ref<HTMLDivElement>;
+  hidePrevBtn?: boolean;
+  hideNextBtn?: boolean;
+  onDateMouseEnter?: (date: any) => void;
+  onDateMouseLeave?: (date: any) => void;
 }
 
 const PanelContext = React.createContext<PanelContextProps>({});