feat: checkable support

.gitignore

@@ -26,6 +26,7 @@ lib
 es
 yarn.lock
 package-lock.json
+coverage
 # umi
 .umi
 .umi-production

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "endOfLine": "lf",
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "arrowParens": "avoid"
+}

README.md

@@ -143,13 +143,13 @@ React.render(
       <td>expand current item when click or hover</td>
     </tr>
     <tr>
-      <td>popupVisible</td>
+      <td>open</td>
       <td>Boolean</td>
       <td></td>
       <td>visibility of popup overlay</td>
     </tr>
     <tr>
-      <td>onPopupVisibleChange</td>
+      <td>onDropdownVisibleChange</td>
       <td>Function(visible)</td>
       <td></td>
       <td>callback when popup overlay's visibility changed</td>

assets/index.less

@@ -1,166 +1,2 @@
-.effect() {
-  animation-duration: .3s;
-  animation-fill-mode: both;
-  transform-origin: 0 0;
-}
-
-.rc-cascader {
-  font-size: 12px;
-  &-menus {
-    font-size: 12px;
-    overflow: hidden;
-    background: #fff;
-    position: absolute;
-    border: 1px solid #d9d9d9;
-    border-radius: 6px;
-    box-shadow: 0 0 4px rgba(0,0,0,0.17);
-    white-space: nowrap;
-
-    &-hidden {
-      display: none;
-    }
-
-    &.slide-up-enter, &.slide-up-appear {
-      .effect();
-      opacity: 0;
-      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
-      animation-play-state: paused;
-    }
-
-    &.slide-up-leave {
-      .effect();
-      opacity: 1;
-      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
-      animation-play-state: paused;
-    }
-
-    &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
-    &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
-      animation-name: SlideUpIn;
-      animation-play-state: running;
-    }
-
-    &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
-    &.slide-up-appear.slide-up-appear-active&-placement-topLeft {
-      animation-name: SlideDownIn;
-      animation-play-state: running;
-    }
-
-    &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
-      animation-name: SlideUpOut;
-      animation-play-state: running;
-    }
-
-    &.slide-up-leave.slide-up-leave-active&-placement-topLeft {
-      animation-name: SlideDownOut;
-      animation-play-state: running;
-    }
-  }
-  &-menu {
-    display: inline-block;
-    width: 100px;
-    height: 192px;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    border-right: 1px solid #e9e9e9;
-    overflow: auto;
-    &:last-child {
-      border-right: 0;
-    }
-  }
-  &-menu-item {
-    height: 32px;
-    line-height: 32px;
-    padding: 0 16px;
-    cursor: pointer;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    transition: all 0.3s ease;
-    position: relative;
-    &:hover {
-      background: tint(#2db7f5, 90%);
-    }
-    &-disabled {
-      cursor: not-allowed;
-      color: #ccc;
-      &:hover {
-        background: transparent;
-      }
-    }
-    &-loading:after {
-      position: absolute;
-      right: 12px;
-      content: 'loading';
-      color: #aaa;
-      font-style: italic;
-    }
-    &-active {
-      background: tint(#2db7f5, 80%);
-      &:hover {
-        background: tint(#2db7f5, 80%);
-      }
-    }
-    &-expand {
-      position: relative;
-      &-icon {
-        font-size: 12px;
-        color: #999;
-        position: absolute;
-        right: 16px;
-        line-height: 32px;
-      }
-    }
-  }
-}
-
-@keyframes SlideUpIn {
-  0% {
-    opacity: 0;
-    transform-origin: 0% 0%;
-    transform: scaleY(.8);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 0% 0%;
-    transform: scaleY(1);
-  }
-}
-@keyframes SlideUpOut {
-  0% {
-    opacity: 1;
-    transform-origin: 0% 0%;
-    transform: scaleY(1);
-  }
-  100% {
-    opacity: 0;
-    transform-origin: 0% 0%;
-    transform: scaleY(0.8);
-  }
-}
-
-@keyframes SlideDownIn {
-  0% {
-    opacity: 0;
-    transform-origin: 0% 100%;
-    transform: scaleY(0.8);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 0% 100%;
-    transform: scaleY(1);
-  }
-}
-@keyframes SlideDownOut {
-  0% {
-    opacity: 1;
-    transform-origin: 0% 100%;
-    transform: scaleY(1);
-  }
-  100% {
-    opacity: 0;
-    transform-origin: 0% 100%;
-    transform: scaleY(0.8);
-  }
-}
+@import "./select.less";
+@import "./list.less";

assets/list.less

@@ -0,0 +1,99 @@
+@select-prefix: ~'rc-cascader';
+
+.@{select-prefix} {
+  &-dropdown {
+    min-height: auto;
+  }
+
+  &-holder {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  &-menu {
+    flex: none;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border-left: 1px solid blue;
+
+    &:first-child {
+      border-left: 0;
+    }
+
+    &-item {
+      display: flex;
+      flex-wrap: nowrap;
+      padding-right: 20px;
+      position: relative;
+
+      &-selected {
+        background: rgba(0, 0, 255, 0.05);
+      }
+
+      &-active {
+        background: rgba(0, 255, 0, 0.1);
+      }
+
+      &-disabled {
+        opacity: 0.5;
+      }
+
+
+
+      &-content {
+        flex: auto;
+      }
+
+      &-expand-icon {
+        position: absolute;
+        right: 4px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+
+  &-checkbox {
+    position: relative;
+    display: block;
+    flex: none;
+    width: 20px;
+    height: 20px;
+    border: 1px solid blue;
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      content: '';
+    }
+
+    &-checked::after {
+      content: '✔️';
+    }
+
+    &-indeterminate::after {
+      content: '➖';
+    }
+  }
+
+  // ====================== RTL ======================
+  &-rtl {
+    direction: rtl;
+
+    .@{select-prefix}-menu {
+      flex: none;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      border-left: none;
+      border-right: 1px solid blue;
+
+      &:first-child {
+        border-right: 0;
+      }
+    }
+  }
+}

assets/select.less

@@ -0,0 +1,3 @@
+@import '~rc-select/assets/index';
+
+@select-prefix: ~'rc-cascader';

docs/demo/debug.md

@@ -0,0 +1,3 @@
+## debug
+
+<code src="../../examples/debug.tsx">

examples/animation.jsx

@@ -70,7 +70,7 @@ class Demo extends React.Component {
 
   render() {
     return (
-      <Cascader options={addressOptions} onChange={this.onChange} transitionName="slide-up">
+      <Cascader options={addressOptions} onChange={this.onChange} animation="slide-up">
         <input value={this.state.inputValue} readOnly />
       </Cascader>
     );