@autobest-ui/components 1.1.1 → 1.2.0

package/esm/show-more/style/index.scss

@@ -1,23 +1,23 @@
-$namespace: ab-show-more;
-
-.#{$namespace} {
-  &-ellipsis {
-    white-space: nowrap;
-  }
-
-  &-btn {
-    color: #4068b0;
-    cursor: pointer;
-  }
-
-  &-text, &-hidden {
-    visibility: hidden;
-    height: 0;
-    display: block;
-    overflow: hidden;
-  }
-
-  &-hidden {
-    width: 0;
-  }
+$namespace: ab-show-more;
+
+.#{$namespace} {
+  &-ellipsis {
+    white-space: nowrap;
+  }
+
+  &-btn {
+    color: #4068b0;
+    cursor: pointer;
+  }
+
+  &-text, &-hidden {
+    visibility: hidden;
+    height: 0;
+    display: block;
+    overflow: hidden;
+  }
+
+  &-hidden {
+    width: 0;
+  }
 }

package/esm/skeleton/__stories__/style.scss

@@ -1,3 +1,3 @@
-.skeleton-demo {
-  padding: .2rem;
+.skeleton-demo {
+  padding: .2rem;
 }

package/esm/skeleton/style/index.scss

@@ -1,27 +1,27 @@
-$namespace: ab-skeleton;
-
-.#{$namespace} {
-  overflow: hidden;
-
-  &-item {
-    background: #f2f2f2;
-    overflow: hidden;
-  }
-
-  &-active {
-    .#{$namespace}-item {
-      background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
-      background-size: 400% 100%;
-      animation: ab-skeleton-loading 1.4s ease infinite;
-    }
-  }
-
-  @keyframes ab-skeleton-loading {
-    0% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0 50%;
-    }
-  }
+$namespace: ab-skeleton;
+
+.#{$namespace} {
+  overflow: hidden;
+
+  &-item {
+    background: #f2f2f2;
+    overflow: hidden;
+  }
+
+  &-active {
+    .#{$namespace}-item {
+      background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+      background-size: 400% 100%;
+      animation: ab-skeleton-loading 1.4s ease infinite;
+    }
+  }
+
+  @keyframes ab-skeleton-loading {
+    0% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0 50%;
+    }
+  }
 }

package/esm/style.css

@@ -1,9 +1,9 @@
 a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,input,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,tr,ul,var,video{box-sizing:border-box}html{font-size:100px;font-family:Arial,sans-serif;touch-action:manipulation;-ms-touch-action:manipulation}@media only screen and (max-width:767px){html{font-size:100px}}body{font-size:.12rem;color:#333;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{text-decoration:none}input{outline:0}li,ul{padding:0;margin:0;list-style:none}
 .demo-accordion{margin:.5rem auto;width:5rem;display:flex;justify-content:center;flex-direction:column}.accordion-demo-wrap{width:3rem}.accordion-demo-text{height:.3rem}.accordion-demo-title{display:block;padding:.1rem 0;background-color:#b0b0b0;color:#f7f7f7;cursor:pointer}.accordion-demo-a-content>li{padding:.1rem 0;border-top:dotted 1px grey}.accordion-demo-a-content>li:first-child{border:none;cursor:pointer}.accordion-demo-a-content>li>a{color:#333}.accordion-demo-d-content{padding-left:.1rem}.accordion-demo-d-content .ab-collapse{padding-left:.2rem}.accordion-demo-d-title{background-color:grey;display:block;padding:.1rem 0;color:#f7f7f7;cursor:pointer}
-.ab-affix,.ab-affix-custom{z-index:100}.ab-affix-custom{position:fixed;transition:transform .2s cubic-bezier(.7,.3,.1,1)}.ab-affix-fade-appear,.ab-affix-fade-enter{transform:translate(0,-100%)}.ab-affix-fade-appear-active,.ab-affix-fade-enter-active{transform:translate(0,0)}.ab-affix-fade-exit{transform:translate(0,0)}.ab-affix-fade-exit-active{transform:translate(0,-100%)}.ab-affix-fade-exit-done{display:none}
 .affix-demo{height:200vh;overflow:auto;width:1000px;max-width:100%;margin:auto}.affix-demo .affix-wrap{height:500px;width:100%;background-color:#d1d5db}
-.ab-carousel{position:relative}.ab-carousel-content{position:relative;display:block;height:100%;width:100%;margin:0;padding:0;overflow:hidden}.ab-carousel-list{user-select:none;position:relative;top:0;left:0;display:block;overflow:hidden}.ab-carousel-slider{outline:0;overflow:hidden;float:left;display:none}.ab-carousel.ab-carousel-init .ab-carousel-slider{display:block}
+.ab-affix,.ab-affix-custom{z-index:100}.ab-affix-custom{position:fixed;transition:transform .2s cubic-bezier(.7,.3,.1,1)}.ab-affix-fade-appear,.ab-affix-fade-enter{transform:translate(0,-100%)}.ab-affix-fade-appear-active,.ab-affix-fade-enter-active{transform:translate(0,0)}.ab-affix-fade-exit{transform:translate(0,0)}.ab-affix-fade-exit-active{transform:translate(0,-100%)}.ab-affix-fade-exit-done{display:none}
 .demo-carousel{margin:auto;position:relative}.demo-carousel p{display:flex;align-items:center;justify-content:center;font-size:32px;margin:0;color:#f3f4f6;height:225px;border-radius:3px}.ab-carousel{position:relative}.button-next,.button-prev{position:absolute;box-sizing:border-box;cursor:pointer;font-size:32px;top:50%;margin-top:-15px;width:30px;height:30px;color:#f3f4f6}.button-prev{left:5px;top:50%}.button-next{right:5px;top:50%}
+.ab-carousel{position:relative;height:100%}.ab-carousel-content{position:relative;display:block;height:100%;width:100%;margin:0;padding:0;overflow:hidden}.ab-carousel-list{user-select:none;position:relative;top:0;left:0;display:block;overflow:hidden}.ab-carousel-slider{outline:0;overflow:hidden;display:none}.ab-carousel.ab-carousel-init .ab-carousel-slider{display:block}.ab-carousel.ab-carousel-hr .ab-carousel-slider{float:left}
 .ab-checkbox{display:inline-block;position:relative;font-size:0;cursor:pointer}.ab-checkbox-input{position:absolute;opacity:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:2}.ab-checkbox-inner{display:inline-block;position:relative;width:.16rem;height:.16rem;transition:all .3s;border:.02rem solid #b0b0b0;border-radius:.02rem;background-color:#fff}.ab-checkbox-icon{visibility:hidden;position:absolute;width:.06rem;height:.1rem;left:20%;top:40%;transform:rotate(45deg) scale(0) translate(-50%,-50%);transition:all .2s;border:.02rem solid #e84040;border-top:none;border-left:none}.ab-checkbox.ab-checkbox-checked .ab-checkbox-icon{visibility:visible;transform:rotate(45deg) scale(1) translate(-50%,-50%)}.ab-checkbox.ab-checkbox-disabled{cursor:not-allowed;color:rgba(0,0,0,.25)}.ab-checkbox.ab-checkbox-disabled .ab-checkbox-inner{border-color:#f0f0f0!important;background-color:#f5f5f5!important}.ab-checkbox.ab-checkbox-disabled .ab-checkbox-icon{border-color:#cecece}.ab-checkbox.ab-checkbox-disabled .ab-checkbox-content{text-decoration:none!important}.ab-checkbox-wrap{display:inline-block;position:relative;cursor:pointer}.ab-checkbox-wrap .ab-checkbox{position:absolute;transform:translateY(-50%);top:50%;left:0}.ab-checkbox-wrap:hover .ab-checkbox-content{text-decoration:underline}.ab-checkbox-content{padding-left:.24rem;display:inline-block}.ab-checkbox-wrap.ab-checkbox-reverse .ab-checkbox{left:auto;right:0}.ab-checkbox-wrap.ab-checkbox-reverse .ab-checkbox-content{padding-left:0;padding-right:.24rem}.ab-checkbox-wrap.ab-checkbox-disabled{cursor:not-allowed;color:rgba(0,0,0,.25)}.ab-checkbox-wrap.ab-checkbox-disabled .ab-checkbox-content{text-decoration:none!important}
 .demo-collapse{min-height:200px;padding:.2rem}.title-wrap{width:1rem;height:.4rem;background-color:#3b82f6;color:#f3f4f6}.title-wrap>strong{display:block;width:1rem;height:.2rem;background-color:#10b981;cursor:pointer}
 .ab-collapse{transform-origin:left top;transition:opacity .2s,height .2s}.ab-collapse-hidden{height:0;overflow:hidden}.ab-collapse-fade-enter{opacity:.8;overflow:hidden}.ab-collapse-fade-enter-active{opacity:1;overflow:hidden}.ab-collapse-fade-enter-done{opacity:1;overflow:initial}.ab-collapse-fade-exit{opacity:1;overflow:hidden}.ab-collapse-fade-exit-active{opacity:.8;overflow:hidden}.ab-collapse-fade-exit-done{display:none;overflow:initial}
@@ -12,37 +12,37 @@ a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd
 .ab-date-picker{position:relative}.ab-date-picker-input{outline:0;font-size:.14rem;padding:.04rem;width:1.44rem}.ab-date-picker-icon{position:absolute;right:.05rem;top:50%;transform:translateY(-50%)}
 .ab-drawer{position:fixed;z-index:101;background-color:#fff;overflow:auto;transition:transform .3s cubic-bezier(.7,.3,.1,1)}.ab-drawer-times{position:absolute;right:.17rem;font-size:.16rem;color:#b0b0b0;cursor:pointer;top:.11rem}.ab-drawer-times:hover{color:#333}.ab-drawer-tf-top{transform:translate(0,-100%)}.ab-drawer-tf-bottom{transform:translate(0,100%)}.ab-drawer-tf-left{transform:translate(-100%,0)}.ab-drawer-tf-right{transform:translate(100%,0)}.ab-drawer-hidden.ab-drawer,.ab-drawer-hidden.ab-mask{display:none}
 .ab-ellipsis{overflow:hidden;display:block;display:-webkit-box;-webkit-box-orient:vertical}.ab-ellipsis.ab-ellipsis-line1{-webkit-line-clamp:1}.ab-ellipsis.ab-ellipsis-line2{-webkit-line-clamp:2}.ab-ellipsis.ab-ellipsis-line3{-webkit-line-clamp:3}.ab-ellipsis.ab-ellipsis-line4{-webkit-line-clamp:4}.ab-ellipsis.ab-ellipsis-line5{-webkit-line-clamp:5}@media only screen and (max-width:767px){.ab-ellipsis.ab-ellipsis-line1{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line2{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line3{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line4{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line5{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-m-line1{-webkit-line-clamp:1}.ab-ellipsis.ab-ellipsis-m-line2{-webkit-line-clamp:2}.ab-ellipsis.ab-ellipsis-m-line3{-webkit-line-clamp:3}.ab-ellipsis.ab-ellipsis-m-line4{-webkit-line-clamp:4}.ab-ellipsis.ab-ellipsis-m-line5{-webkit-line-clamp:5}}
-.ab-guide-mask.ab-mask{background-color:rgba(0,0,0,.7);z-index:4}.ab-guide-icon{position:absolute;z-index:5}.ab-guide-content{position:relative;z-index:6}
 .guide-demo .input{width:3rem}.guide-demo .btn{display:block;margin-top:.2rem;width:.8rem;height:.3rem;font-size:.16rem;text-align:center}
-.ab-icon,.ab-icon div,.ab-icon span,.ab-icon svg{display:block}
+.ab-guide-mask.ab-mask{background-color:rgba(0,0,0,.7);z-index:4}.ab-guide-icon{position:absolute;z-index:5}.ab-guide-content{position:relative;z-index:6}
 .demo-icon-list{padding:.2rem .1rem;font-size:.12rem;display:flex;width:100%;flex-wrap:wrap}.demo-icon-list>li{padding:.1rem;border:1px solid #e0e0e0;margin:.05rem;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#f3f4f6;min-width:1.2rem;min-height:1.5rem}.demo-icon-list>li svg{max-width:.5rem;height:.5rem}.demo-icon-list>li p{padding:0 5px;text-align:center;width:1rem;word-break:break-all}.demo-icon-list>li:hover{background-color:#e5e7eb}.demo-icon-list .demo-icon-name{padding-top:.15rem}
+.ab-icon,.ab-icon div,.ab-icon span,.ab-icon svg{display:block}
 .ab-input-number{padding:.06rem .07rem;-webkit-appearance:none;outline:0;width:100%;border:1px solid #ccc;border-radius:2px;resize:none;font-size:.12rem;transition:all .3s;position:relative;background-color:transparent;z-index:2}.ab-input-number:focus{box-shadow:0 0 4px rgba(52,143,238,.8);border-color:rgba(52,143,238,.8)}.ab-input-number-wrap{position:relative;background-color:#fff;display:inline-block}.ab-input-number-button-wrap{position:absolute;user-select:none;top:50%;transform:translateY(-50%);right:.02rem}.ab-input-number-button{position:relative;width:.16rem;height:.1rem;overflow:hidden;background-color:#f1f1f1}.ab-input-number-button.ab-input-number-hover{background-color:#d0d0d0}.ab-input-number-button.ab-input-number-active{background-color:#787878}.ab-input-number-button.ab-input-number-active .ab-input-number-add{border-bottom-color:#fff}.ab-input-number-button.ab-input-number-active .ab-input-number-sub{border-top-color:#fff}.ab-input-number-button:first-child{margin-bottom:.02rem}.ab-input-number-add{position:absolute;top:-.01rem;left:.04rem;display:block;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#505050;border-left-color:transparent;border-width:.04rem;border-style:solid;width:0;height:0}.ab-input-number-sub{display:block;margin:.03rem 0 0 .04rem;border-top-color:#505050;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;border-width:.04rem;border-style:solid;width:0;height:0}
-.ab-lazy-image{transition:opacity .5s}.ab-lazy-image-loading{background:#f2f2f2;overflow:hidden}.ab-lazy-image-loading.ab-lazy-image-active{background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);background-size:400% 100%;animation:ab-skeleton-loading 1.4s ease infinite}@keyframes ab-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}
-.lazy-image-demo{margin-top:200vh}.lazy-image-demo img{display:block;width:400px;margin:.2rem}
 .ab-link-list-title{font-size:.16rem;margin:0 0;padding:0 0 .12rem 0;display:flex;justify-content:space-between;align-items:center}.ab-link-list-icon{display:none}.ab-link-list-content{flex-wrap:wrap;width:auto;margin-right:-.15rem}.ab-link-list-content.ab-link-list-col2>a,.ab-link-list-content.ab-link-list-col2>span{min-width:calc(100% / 2 - .15rem);max-width:calc(100% / 2 - .15rem)}.ab-link-list-content.ab-link-list-col4>a,.ab-link-list-content.ab-link-list-col4>span{min-width:calc(100% / 4 - .15rem);max-width:calc(100% / 4 - .15rem)}.ab-link-list-content.ab-link-list-col5>a,.ab-link-list-content.ab-link-list-col5>span{min-width:calc(100% / 5 - .15rem);max-width:calc(100% / 5 - .15rem)}.ab-link-list-content.ab-link-list-col6>a,.ab-link-list-content.ab-link-list-col6>span{min-width:calc(100% / 6 - .15rem);max-width:calc(100% / 6 - .15rem)}.ab-link-list-content.ab-link-list-col8>a,.ab-link-list-content.ab-link-list-col8>span{min-width:calc(100% / 8 - .15rem);max-width:calc(100% / 8 - .15rem)}.ab-link-list-content>a,.ab-link-list-content>span{cursor:pointer;border:.5px solid #d0d0d0;margin-bottom:8px;display:inline-block;justify-content:space-between;align-items:center;width:100%;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.085rem .15rem .085rem .12rem;color:#333;margin-right:.15rem}.ab-link-list-content>a:after,.ab-link-list-content>span:after{content:'>';position:absolute;right:.1rem;top:50%;transform:translateY(-50%);color:grey;font-size:.12rem}.ab-link-list-content>a:hover,.ab-link-list-content>span:hover{text-decoration:underline;color:#f97601}.ab-link-list-content>.ab-link-list-hidden{display:none}.ab-link-list-wrap-popover.ab-popover-wrap{max-width:3.5rem;min-width:3rem}.ab-link-list-sub-title{display:block;padding-bottom:.06rem;font-size:.12rem}.ab-link-list-sub-link{text-decoration:underline;color:#333;font-size:.12rem;padding:0 .05rem .05rem 0;display:inline-block}@media only screen and (max-width:767px){.ab-link-list-divider{border-bottom:1px solid #d0d0d0}.ab-link-list-body{height:0;width:0;overflow:hidden}.ab-link-list-body.ab-link-list-active{height:auto;width:auto}.ab-link-list-content>a,.ab-link-list-content>span{min-width:calc(50% - .15rem)!important;max-width:calc(50% - .15rem)!important}.ab-link-list-icon{font-weight:700;font-size:.22rem;cursor:pointer;width:.2rem;height:.2rem;display:flex;align-items:center;justify-content:center}}
+.lazy-image-demo{margin-top:200vh}.lazy-image-demo img{display:block;width:400px;margin:.2rem}
+.ab-lazy-image{transition:opacity .5s}.ab-lazy-image-loading{background:#f2f2f2;overflow:hidden}.ab-lazy-image-loading.ab-lazy-image-active{background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);background-size:400% 100%;animation:ab-skeleton-loading 1.4s ease infinite}@keyframes ab-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}
 .ab-loading-wrap{position:fixed;top:0;left:0;z-index:9999;background-color:rgba(255,255,255,.7);height:100%;width:100%}.ab-loading-wrap .ab-loading-content{position:absolute;left:50%;top:50%;display:block;width:.31rem;height:.31rem;transform:translate3d(-50%,-50%,0)}.ab-loading-wrap.ab-loading-rect-loading{background-color:rgba(0,0,0,.7)}.ab-loading-wrap.ab-loading-rect-loading .ab-loading-content{top:10%;width:1.6rem;height:.24rem}
 .ab-loading-bar{position:fixed;top:0;left:0;margin-bottom:-3px;height:3px;width:100%;z-index:999}@keyframes movingBar{0%{left:50%;right:50%}99.9%{left:0;right:0}100%{left:50%;right:50%}}@keyframes changeBar{0%{background-color:#0aa770}33.3%{background-color:#0aa770}33.33%{background-color:red}66.6%{background-color:#f987d6}66.66%{background-color:#f987d6}99.9%{background-color:#00bcd4}}.ab-loading-bar-bar{position:absolute;height:0;width:100%;text-indent:-9999px;background-color:#0aa770;animation:changeBar 2.25s infinite}.ab-loading-bar-bar:before{content:"";height:3px;position:absolute;left:50%;right:50%;background-color:inherit;animation:movingBar .75s infinite}
-.ab-loading-container{position:relative}.ab-loading-container-active{user-select:none;pointer-events:none}.ab-loading-container-icon-box{position:absolute;background-color:rgba(255,255,255,.7);top:0;left:0;z-index:4;display:block;width:100%;height:100%}.ab-loading-container-icon{position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}
 .loading-container-demo{margin:1rem;width:2rem;height:2rem;background:#b0b0b0}
+.ab-loading-container{position:relative}.ab-loading-container-active{user-select:none;pointer-events:none}.ab-loading-container-icon-box{position:absolute;background-color:rgba(255,255,255,.7);top:0;left:0;z-index:4;display:block;width:100%;height:100%}.ab-loading-container-icon{position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}
 .ab-svg-loading{display:inline-block}.ab-svg-loading-icon{display:block;width:.31rem;height:.31rem;animation:loading 1s infinite linear reverse}@keyframes loading{0%{transform:rotate(0)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
 .ab-mask{position:fixed;top:0;left:0;z-index:101;width:100%;height:100%;background-color:rgba(0,0,0,.45);transition:opacity .4s cubic-bezier(.7,.3,.1,1)}.ab-mask-fade-appear,.ab-mask-fade-enter{opacity:0}.ab-mask-fade-appear-active,.ab-mask-fade-enter-active,.ab-mask-fade-enter-done{opacity:1}.ab-mask-fade-exit{opacity:1}.ab-mask-fade-exit-active{opacity:0}.ab-mask-fade-exit-done{display:none}
 .ab-message-container{position:fixed;left:0;bottom:0}.ab-message-content{display:flex;align-items:center;justify-content:space-between;max-width:calc(100vw - .3rem);border-radius:.02rem;margin:.08rem .15rem;padding:.08rem;background-color:#333;color:#fff;box-shadow:0 .04rem .08rem #00000059;transition:opacity .3s}.ab-message-close{display:flex;align-items:center;justify-content:center;cursor:pointer;width:.2rem;height:.2rem;font-size:.2rem;margin-left:.08rem;color:#b0b0b0}.ab-message-close:hover{color:#fff}.ab-message-fade-appear,.ab-message-fade-enter{opacity:0}.ab-message-fade-appear-active,.ab-message-fade-enter-active,.ab-message-fade-enter-done{opacity:1}.ab-message-fade-exit{opacity:1}.ab-message-fade-exit-active{opacity:0}.ab-message-fade-exit-done{display:none}@media only screen and (max-width:767px){.ab-message-content{width:calc(100vw - .3rem);margin:.08rem .15rem}}
 .ab-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:101;overflow:auto;outline:0}.ab-modal.ab-modal-center{text-align:center}.ab-modal.ab-modal-center:before{display:inline-block;width:0;height:100%;vertical-align:middle;content:''}.ab-modal.ab-modal-center .ab-modal-content{top:0;text-align:left;display:inline-block;vertical-align:middle}.ab-modal-content{position:relative;background-color:#fff;max-width:calc(100vw - .3rem);margin-left:auto;margin-right:auto;overflow:auto;-webkit-overflow-scrolling:touch;transition:transform .3s,opacity .3s cubic-bezier(.7,.3,.1,1);z-index:101}.ab-modal-title{position:relative;width:100%}.ab-modal-title .ab-modal-times{top:50%;transform:translateY(-50%)}.ab-modal-times{position:absolute;top:.12rem;right:.12rem;font-size:.15rem;color:#b0b0b0;cursor:pointer}.ab-modal-times svg{display:block}.ab-modal-times:hover{color:#333}.ab-modal-hidden{display:none}@media only screen and (max-width:767px){.ab-modal-content{width:calc(100vw - .3rem)}}.ab-modal-fade-appear,.ab-modal-fade-enter{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-appear-active,.ab-modal-fade-enter-active{transform:translateZ(0);opacity:1}.ab-modal-fade-enter-done{transform:translateZ(0);opacity:1}.ab-modal-fade-exit{transform:translateZ(0);opacity:1}.ab-modal-fade-exit-active{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-exit-done{display:none}
-.ab-move{cursor:move;visibility:hidden;transform-origin:center center}
 .demo-move{margin:.2rem auto;width:500px;height:500px;border:5px solid #ccc}
-.ab-popover-wrap{background-color:#fff;background-clip:padding-box;box-shadow:0 2px 8px rgba(0,0,0,.15);padding:.08rem .11rem .05rem;min-width:210px;border-radius:4px}.ab-popover-inner{position:relative;width:100%;overflow:hidden;font-size:.12rem}.ab-popover-inner-expand{padding-right:.1rem}.ab-popover-arrow{position:absolute;display:block;width:8px;height:8px;border-top-color:transparent;border-left-color:transparent;border-style:solid;background-color:#fff;border-right-color:#fff;border-bottom-color:#fff;border-width:4px;box-shadow:3px 3px 7px rgba(0,0,0,.07)}.ab-popover-close{position:absolute;right:.02rem;top:.05rem;cursor:pointer;padding:0 .05rem;color:#bfbfbf;font-size:.2rem;line-height:1;z-index:2}.ab-popover-close:hover{color:#4a4a4a}@media only screen and (max-width:767px){.ab-popover-wrap{width:calc(100% - .3rem)}}
+.ab-move{cursor:move;visibility:hidden;transform-origin:center center}
 .popover-demo{padding:80px 60px;width:465px;height:400px;margin:auto;position:relative}.popover-demo button{width:100px;display:inline-block}.popover-demo-tip{height:60px;width:100px}
+.ab-popover-wrap{background-color:#fff;background-clip:padding-box;box-shadow:0 2px 8px rgba(0,0,0,.15);padding:.08rem .11rem .05rem;min-width:210px;border-radius:4px}.ab-popover-inner{position:relative;width:100%;overflow:hidden;font-size:.12rem}.ab-popover-inner-expand{padding-right:.1rem}.ab-popover-arrow{position:absolute;display:block;width:8px;height:8px;border-top-color:transparent;border-left-color:transparent;border-style:solid;background-color:#fff;border-right-color:#fff;border-bottom-color:#fff;border-width:4px;box-shadow:3px 3px 7px rgba(0,0,0,.07)}.ab-popover-close{position:absolute;right:.02rem;top:.05rem;cursor:pointer;padding:0 .05rem;color:#bfbfbf;font-size:.2rem;line-height:1;z-index:2}.ab-popover-close:hover{color:#4a4a4a}@media only screen and (max-width:767px){.ab-popover-wrap{width:calc(100% - .3rem)}}
 
-
-.ab-select-wrap{min-width:177px;background-color:#fff;background-clip:padding-box;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15)}.ab-select-bottom,.ab-select-content,.ab-select-title{display:flex}.ab-select-title{padding:.09rem 0;background-color:transparent;cursor:context-menu;border-bottom:1px solid #d7d7d7;font-weight:700;color:#606060;font-size:.12rem;margin:0 .1rem}.ab-select-col{font-size:.12rem;padding-right:.07rem;flex:auto}.ab-select-col:last-child{padding-right:0}.ab-select-col>li{padding:.08rem .11rem;cursor:pointer}.ab-select-col>li:hover{background-color:#eee}.ab-select-col>li.ab-select-active{background-color:#e6f7ff}.ab-select-col>li.ab-select-unselect{background-color:transparent;cursor:context-menu}.ab-select-input-group{position:relative;overflow:hidden}.ab-select-input-control{-webkit-appearance:none;outline:0;user-select:none;width:100%;border:1px solid #ccc;border-radius:2px;resize:none;transition:all .2s;background-color:#fff;text-overflow:ellipsis;padding:.08rem .28rem .07rem .07rem;font-size:.14rem;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer}.ab-select-input-control.ab-select-focused{box-shadow:0 0 4px rgba(52,143,238,.8);border-color:rgba(52,143,238,.8)}.ab-select-input-control.ab-select-empty{color:#888}.ab-select-input-control.error{background-color:#fffacd}.ab-select-icon{position:absolute;right:.21rem;top:50%;color:#ccc;font-size:0;transform:translate(100%,-50%);transition:transform .2s}.ab-select-icon svg{font-size:.12rem}.ab-select-active .ab-select-icon{transform:translate(100%,-50%) rotate(180deg)}@media only screen and (max-width:767px){.ab-select-content{display:block}.ab-select-input-control{padding:.1rem .05rem;font-size:.14rem}.ab-select-col{padding-right:0}}
 .select-demo{margin:10px auto;width:200px}.select-demo .select-group{width:1rem}
+.ab-select-wrap{min-width:177px;background-color:#fff;background-clip:padding-box;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15)}.ab-select-bottom,.ab-select-content,.ab-select-title{display:flex}.ab-select-title{padding:.09rem 0;background-color:transparent;cursor:context-menu;border-bottom:1px solid #d7d7d7;font-weight:700;color:#606060;font-size:.12rem;margin:0 .1rem}.ab-select-col{font-size:.12rem;padding-right:.07rem;flex:auto}.ab-select-col:last-child{padding-right:0}.ab-select-col>li{padding:.08rem .11rem;cursor:pointer}.ab-select-col>li:hover{background-color:#eee}.ab-select-col>li.ab-select-active{background-color:#e6f7ff}.ab-select-col>li.ab-select-unselect{background-color:transparent;cursor:context-menu}.ab-select-input-group{position:relative;overflow:hidden}.ab-select-input-control{-webkit-appearance:none;outline:0;user-select:none;width:100%;border:1px solid #ccc;border-radius:2px;resize:none;transition:all .2s;background-color:#fff;text-overflow:ellipsis;padding:.08rem .28rem .07rem .07rem;font-size:.14rem;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer}.ab-select-input-control.ab-select-focused{box-shadow:0 0 4px rgba(52,143,238,.8);border-color:rgba(52,143,238,.8)}.ab-select-input-control.ab-select-empty{color:#888}.ab-select-input-control.error{background-color:#fffacd}.ab-select-icon{position:absolute;right:.21rem;top:50%;color:#ccc;font-size:0;transform:translate(100%,-50%);transition:transform .2s}.ab-select-icon svg{font-size:.12rem}.ab-select-active .ab-select-icon{transform:translate(100%,-50%) rotate(180deg)}@media only screen and (max-width:767px){.ab-select-content{display:block}.ab-select-input-control{padding:.1rem .05rem;font-size:.14rem}.ab-select-col{padding-right:0}}
 .ab-show-more-ellipsis{white-space:nowrap}.ab-show-more-btn{color:#4068b0;cursor:pointer}.ab-show-more-hidden,.ab-show-more-text{visibility:hidden;height:0;display:block;overflow:hidden}.ab-show-more-hidden{width:0}
-.ab-skeleton{overflow:hidden}.ab-skeleton-item{background:#f2f2f2;overflow:hidden}.ab-skeleton-active .ab-skeleton-item{background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);background-size:400% 100%;animation:ab-skeleton-loading 1.4s ease infinite}@keyframes ab-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}
+
 .skeleton-demo{padding:.2rem}
-.ab-table{overflow-x:auto}.ab-table table{border-spacing:0;width:100%;table-layout:fixed}.ab-table thead{background-color:#2b5797;color:#fff}.ab-table tbody tr:nth-child(2n){background-color:#f7f6f3}.ab-table-header{background-color:#2b5797;color:#fff;overflow:hidden}.ab-table-header table{width:calc(100% - .17rem)}.ab-table-body{overflow:auto scroll}.ab-table tr td,.ab-table tr th{padding:.16rem}.ab-table tr td.ab-table-checkbox,.ab-table tr th.ab-table-checkbox{width:.32rem;text-align:center;padding-left:.08rem;padding-right:.08rem}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-title.ab-table-point{cursor:pointer}.ab-table-arrow{padding:0 .05rem}@media only screen and (max-width:767px){.ab-table-header table{width:100%}}
-.ab-table-body{height:120px}
-.ab-tabs{position:relative;display:flex}.ab-tabs-item{cursor:pointer}.ab-tabs-item.ab-tabs-active{font-weight:700}.ab-tabs-item.ab-tabs-disabled{cursor:not-allowed;opacity:.7}.ab-tabs-bar{position:absolute;background-color:#b22222;transition:all .25s;width:0;height:0;overflow:hidden;margin:0;padding:0}.ab-tabs-bottom,.ab-tabs-top{flex-direction:row}.ab-tabs-left,.ab-tabs-right{flex-direction:column}.ab-tabs-top>.ab-tabs-bar{bottom:0}.ab-tabs-bottom>.ab-tabs-bar{top:0}.ab-tabs-left>.ab-tabs-bar{right:0}.ab-tabs-right>.ab-tabs-bar{left:0}
+.ab-skeleton{overflow:hidden}.ab-skeleton-item{background:#f2f2f2;overflow:hidden}.ab-skeleton-active .ab-skeleton-item{background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);background-size:400% 100%;animation:ab-skeleton-loading 1.4s ease infinite}@keyframes ab-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}
+.table-demo thead{background-color:#2b5797;color:#fff}.table-demo tbody tr.ab-table-expand-row{background-color:#fafafa}.table-demo tbody tr:hover{background-color:#f3f3f3}.table-demo td,.table-demo th{padding:.16rem;border-bottom:1px solid #d0d0d0}.table-demo td.ab-table-checkbox,.table-demo th.ab-table-checkbox{padding:.16rem 0}.table-demo .merged-cell{border-left:1px solid #d0d0d0;border-right:1px solid #d0d0d0}.table-demo-expanded{font-size:.2rem}
+.ab-table{overflow-x:auto}.ab-table table{border-spacing:0;width:100%;table-layout:fixed}.ab-table-header{overflow:hidden}.ab-table-header table{width:calc(100% - .17rem)}.ab-table-body{overflow:auto scroll}.ab-table-checkbox{width:.32rem;text-align:center}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-title.ab-table-point{cursor:pointer}.ab-table-arrow{padding:0 .05rem}@media only screen and (max-width:767px){.ab-table-header table{width:100%}}
 .tabs-demo{width:500px;margin:20px auto}.tabs-demo .ab-tabs-item{padding:2px 6px}
+.ab-tabs{position:relative;display:flex}.ab-tabs-item{cursor:pointer}.ab-tabs-item.ab-tabs-active{font-weight:700}.ab-tabs-item.ab-tabs-disabled{cursor:not-allowed;opacity:.7}.ab-tabs-bar{position:absolute;background-color:#b22222;transition:all .25s;width:0;height:0;overflow:hidden;margin:0;padding:0}.ab-tabs-bottom,.ab-tabs-top{flex-direction:row}.ab-tabs-bottom>.ab-tabs-bar,.ab-tabs-top>.ab-tabs-bar{left:0}.ab-tabs-left,.ab-tabs-right{flex-direction:column}.ab-tabs-left>.ab-tabs-bar,.ab-tabs-right>.ab-tabs-bar{top:0}.ab-tabs-top>.ab-tabs-bar{bottom:0}.ab-tabs-bottom>.ab-tabs-bar{top:0}.ab-tabs-left>.ab-tabs-bar{right:0}.ab-tabs-right>.ab-tabs-bar{left:0}
 .ab-tooltip-wrap{background-clip:padding-box;padding:.08rem .11rem .05rem;min-width:210px;border-radius:4px;line-height:1.4;border:1px solid #906c00;box-shadow:1px 1px 5px -1px #000;background-color:#fffaec}.ab-tooltip-inner{position:relative;width:100%;overflow:hidden;font-size:.12rem}.ab-tooltip-inner-expand{padding-right:.1rem}.ab-tooltip-arrow{position:absolute;display:block;width:8px;height:8px;border-top-color:transparent;border-left-color:transparent;border-style:solid;box-shadow:3px 3px 7px rgba(0,0,0,.07);background-color:#fffaec;border-right-color:#906c00;border-bottom-color:#906c00;border-width:1px}.ab-tooltip-close{position:absolute;right:.02rem;top:.05rem;cursor:pointer;padding:0 .05rem;color:#bfbfbf;font-size:.2rem;line-height:1;z-index:2}.ab-tooltip-close:hover{color:#4a4a4a}@media only screen and (max-width:767px){.ab-tooltip-wrap{width:calc(100% - .3rem)}}
 .ab-trigger-wrap{position:absolute;top:0;left:0;z-index:101}.ab-trigger-wrap.ab-trigger-hidden{display:none}.ab-trigger-mask{position:fixed;top:0;left:0;bottom:0;right:0;z-index:101;background-color:transparent;display:none}.ab-trigger-mask.ab-trigger-mask-show{display:block}.ab-trigger-fade-appear,.ab-trigger-fade-enter,.ab-trigger-fade-hr-appear,.ab-trigger-fade-hr-enter{opacity:0}.ab-trigger-fade-appear,.ab-trigger-fade-enter{transform:scale(.7)}.ab-trigger-fade-hr-appear,.ab-trigger-fade-hr-enter{opacity:0;transform:scaleY(.7)}.ab-trigger-fade-appear-active,.ab-trigger-fade-enter-active,.ab-trigger-fade-hr-appear-active,.ab-trigger-fade-hr-enter-active{opacity:1;transition:opacity .2s,transform .2s}.ab-trigger-fade-appear-active,.ab-trigger-fade-enter-active{transform:scale(1)}.ab-trigger-fade-hr-appear-active,.ab-trigger-fade-hr-enter-active{transform:scaleY(1)}.ab-trigger-fade-exit,.ab-trigger-fade-hr-exit{opacity:1}.ab-trigger-fade-exit-active,.ab-trigger-fade-hr-exit-active{opacity:0;transition:opacity .2s,transform .2s}.ab-trigger-fade-exit-active{transform:scale(.7)}.ab-trigger-fade-hr-exit-active{transform:scaleY(.7)}.ab-trigger-fade-exit-done,.ab-trigger-fade-hr-exit-done{display:none}
 

package/esm/table/__stories__/style.css

@@ -1 +1 @@
-.ab-table-body{height:120px}
+.table-demo thead{background-color:#2b5797;color:#fff}.table-demo tbody tr.ab-table-expand-row{background-color:#fafafa}.table-demo tbody tr:hover{background-color:#f3f3f3}.table-demo td,.table-demo th{padding:.16rem;border-bottom:1px solid #d0d0d0}.table-demo td.ab-table-checkbox,.table-demo th.ab-table-checkbox{padding:.16rem 0}.table-demo .merged-cell{border-left:1px solid #d0d0d0;border-right:1px solid #d0d0d0}.table-demo-expanded{font-size:.2rem}

package/esm/table/__stories__/style.scss

@@ -1,3 +1,34 @@
-.ab-table-body {
-  height: 120px;
+.table-demo {
+  thead {
+    background-color: #2b5797;
+    color: #fff;
+  }
+
+  tbody tr {
+    &.ab-table-expand-row {
+      background-color: #fafafa;
+    }
+
+    &:hover {
+      background-color: #f3f3f3;
+    }
+  }
+
+  th, td {
+    padding: .16rem;
+    border-bottom: 1px solid #D0D0D0;
+
+    &.ab-table-checkbox {
+      padding: .16rem 0;
+    }
+  }
+
+  .merged-cell {
+    border-left: 1px solid #D0D0D0;
+    border-right: 1px solid #D0D0D0;
+  }
+}
+
+.table-demo-expanded {
+  font-size: .2rem;
 }

package/esm/table/body/BodyRow.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Column } from '../interface';
+export interface BodyRowProps<T> {
+    className?: string;
+    prefixCls: string;
+    rowData: T;
+    index: number;
+    columns: Column<T>[];
+    indent: number;
+    CheckCell: React.ReactElement;
+}
+declare function BodyRow<RowDataType>({ className, prefixCls: cls, rowData, index, columns, indent, CheckCell }: BodyRowProps<RowDataType>): JSX.Element;
+export default BodyRow;

package/esm/table/body/BodyRow.js

@@ -0,0 +1,94 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+import React from 'react';
+import classNames from 'classnames';
+import { isEmptyArray } from '@autobest-ui/utils';
+
+var getIndentCol = function getIndentCol(prefixCls, number) {
+  if (number === 0) {
+    return null;
+  }
+
+  return new Array(number).fill(false).map(function (_item, index) {
+    return React.createElement("td", {
+      key: index,
+      className: prefixCls + "-indent"
+    });
+  });
+};
+
+function BodyRow(_a) {
+  var className = _a.className,
+      cls = _a.prefixCls,
+      rowData = _a.rowData,
+      index = _a.index,
+      columns = _a.columns,
+      indent = _a.indent,
+      CheckCell = _a.CheckCell;
+  var indentCell = React.useMemo(function () {
+    return getIndentCol(cls, indent);
+  }, [cls, indent]);
+  var contentCells = [];
+  columns.forEach(function (col, colIndex) {
+    var renderer = (columns[colIndex] || {}).onRender;
+    var renderInfo = renderer ? renderer(rowData, index, colIndex) : rowData[col.dataIndex];
+    var cellProps = {};
+    var content;
+
+    if (renderInfo && _typeof(renderInfo) === 'object' && !Array.isArray(renderInfo) && !React.isValidElement(renderInfo)) {
+      var children = renderInfo.children,
+          props = renderInfo.props;
+      content = children;
+      cellProps = props;
+    } else {
+      content = renderInfo;
+    }
+
+    var colSpan = cellProps.colSpan,
+        rowSpan = cellProps.rowSpan,
+        className = cellProps.className;
+
+    var cellInfo = __assign(__assign({}, col), {
+      content: content,
+      colSpan: colSpan === undefined ? 1 : colSpan,
+      rowSpan: rowSpan === undefined ? 1 : rowSpan
+    });
+
+    if (cellInfo.colSpan === 0 || cellInfo.rowSpan === 0 || !cellInfo.content) {
+      return;
+    }
+
+    contentCells.push(React.createElement("td", {
+      className: className,
+      key: cellInfo.key,
+      colSpan: cellInfo.colSpan,
+      rowSpan: cellInfo.rowSpan
+    }, cellInfo.content));
+  });
+
+  if (!isEmptyArray(contentCells)) {
+    return React.createElement("tr", {
+      className: classNames(cls + "-row", className)
+    }, indentCell, CheckCell, contentCells);
+  }
+
+  return null;
+}
+
+export default BodyRow;

package/esm/table/body/CheckIcon.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactText } from 'react';
+export interface BodyRowSelectionInfo<T> {
+    checkIcon?: (checked: boolean, rowData: T, index: number) => React.ReactElement;
+    getDisabled?: (rowData: T) => boolean;
+    onSelect?: (checked: boolean, rowData: T) => void;
+}
+export interface BodyCheckIconProps<T> {
+    prefixCls: string;
+    rowData: T;
+    rowKey: ReactText;
+    rowIndex: number;
+    rowSelection: BodyRowSelectionInfo<T>;
+    selectedRowKeys: ReactText[];
+}
+declare const _default: React.NamedExoticComponent<BodyCheckIconProps<any>>;
+export default _default;

package/esm/table/body/CheckIcon.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Checkbox from '../../checkbox';
+
+function BodyCheckIcon(_a) {
+  var cls = _a.prefixCls,
+      rowData = _a.rowData,
+      rowKey = _a.rowKey,
+      rowIndex = _a.rowIndex,
+      selectedRowKeys = _a.selectedRowKeys,
+      _b = _a.rowSelection,
+      checkIcon = _b.checkIcon,
+      getDisabled = _b.getDisabled,
+      onSelect = _b.onSelect;
+  var checked = selectedRowKeys.includes(rowKey);
+
+  if (checkIcon) {
+    return React.createElement("td", null, checkIcon(checked, rowData, rowIndex));
+  }
+
+  var disabled = getDisabled(rowData);
+
+  var onCheckBoxChange = function onCheckBoxChange(checked) {
+    onSelect(checked, rowData);
+  };
+
+  return React.createElement("td", {
+    className: cls + "-checkbox"
+  }, React.createElement(Checkbox, {
+    checked: checked,
+    disabled: disabled,
+    onChange: onCheckBoxChange
+  }));
+}
+
+export default React.memo(BodyCheckIcon);

package/esm/table/body/index.d.ts

@@ -0,0 +1,24 @@
+import React, { ReactText } from 'react';
+import { BodyRowProps } from './BodyRow';
+import { BodyCheckIconProps, BodyRowSelectionInfo } from './CheckIcon';
+import { ColumnOnRenderReturnObjectInfo } from '../interface';
+/**
+ * 可展开子列表
+ */
+export interface TableExpandableInfo<T> {
+    expandedRowRender: (rowData: T, index: number) => React.ReactNode | React.ReactNode[] | ColumnOnRenderReturnObjectInfo;
+}
+export interface BodyProps<T> extends Pick<BodyRowProps<T>, 'prefixCls' | 'columns'>, Pick<BodyCheckIconProps<T>, 'selectedRowKeys'> {
+    /**
+     * 表格数据
+     */
+    dataSource: T[];
+    /**
+     * 子列表渲染（不赋值则没有子列表），详见Expandable
+     */
+    expandable?: TableExpandableInfo<T>;
+    getRowKey: (rowData: T) => ReactText;
+    rowSelection: BodyRowSelectionInfo<T>;
+}
+declare function Body<RowDataType>({ prefixCls, columns, dataSource, getRowKey, rowSelection, selectedRowKeys, expandable }: BodyProps<RowDataType>): JSX.Element;
+export default Body;

package/esm/table/body/index.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import BodyRow from './BodyRow';
+import CheckIcon from './CheckIcon';
+
+var noop = function noop() {
+  return null;
+};
+
+function Body(_a) {
+  var prefixCls = _a.prefixCls,
+      columns = _a.columns,
+      dataSource = _a.dataSource,
+      getRowKey = _a.getRowKey,
+      rowSelection = _a.rowSelection,
+      selectedRowKeys = _a.selectedRowKeys,
+      expandable = _a.expandable;
+  var rows = [];
+  var expandedRowRenderer = expandable ? expandable.expandedRowRender : noop;
+  dataSource.forEach(function (row, rowIndex) {
+    var rowKey = getRowKey(row);
+    var CheckCell = rowSelection ? React.createElement(CheckIcon, {
+      prefixCls: prefixCls,
+      rowSelection: rowSelection,
+      rowKey: rowKey,
+      rowData: row,
+      rowIndex: rowIndex,
+      selectedRowKeys: selectedRowKeys
+    }) : null;
+    rows.push(React.createElement(BodyRow, {
+      key: rowKey,
+      prefixCls: prefixCls,
+      rowData: row,
+      index: rowIndex,
+      columns: columns,
+      CheckCell: CheckCell,
+      indent: 0
+    }));
+    var expandedRowKey = rowKey + " expanded";
+    var expandedColumns = [{
+      title: null,
+      key: expandedRowKey,
+      onRender: expandedRowRenderer
+    }];
+
+    if (expandable) {
+      rows.push(React.createElement(BodyRow, {
+        key: expandedRowKey,
+        className: prefixCls + "-expand-row",
+        prefixCls: prefixCls,
+        rowData: row,
+        index: rowIndex,
+        columns: expandedColumns,
+        CheckCell: null,
+        indent: CheckCell ? 1 : 0
+      }));
+    }
+  });
+  return React.createElement(React.Fragment, null, rows);
+}
+
+export default Body;

package/esm/table/header/CheckIcon.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface HeaderRowSelectionInfo {
+    checkIcon?: (checked: boolean, rowData: null, index: number) => React.ReactElement;
+    selectAllVisible?: boolean;
+    selectAllChecked: boolean;
+    onSelectAll?: (checked: boolean) => void;
+}
+interface HeaderCheckIconProps {
+    prefixCls: string;
+    rowSelection: HeaderRowSelectionInfo;
+}
+declare const _default: React.NamedExoticComponent<HeaderCheckIconProps>;
+export default _default;

package/esm/table/header/CheckIcon.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Checkbox from '../../checkbox';
+
+function HeaderCheckIcon(_a) {
+  var cls = _a.prefixCls,
+      rowSelection = _a.rowSelection;
+
+  if (!rowSelection) {
+    return null;
+  }
+
+  if (!rowSelection.selectAllVisible) {
+    // 有勾选功能，但是没有全选功能，需有占位元素
+    return React.createElement("th", null, " ");
+  }
+
+  var checkIcon = rowSelection.checkIcon,
+      selectAllChecked = rowSelection.selectAllChecked,
+      onSelectAll = rowSelection.onSelectAll;
+
+  if (checkIcon) {
+    return React.createElement("th", null, checkIcon(selectAllChecked, null, -1));
+  }
+
+  var onCheckBoxChange = function onCheckBoxChange() {
+    onSelectAll(!selectAllChecked);
+  };
+
+  return React.createElement("th", {
+    className: cls + "-checkbox"
+  }, React.createElement(Checkbox, {
+    checked: selectAllChecked,
+    onChange: onCheckBoxChange
+  }));
+}
+
+export default React.memo(HeaderCheckIcon);

package/esm/table/header/HeaderCell.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Column } from '../interface';
+export interface HeaderCellProps<T> extends Column<T> {
+    prefixCls: string;
+    isSort: boolean;
+    isSortedDescending?: boolean;
+    onSort: (sortColumn: string) => void;
+    /**
+     * 自定义排序图标，若不传，则采用默认的排序图标
+     * @param isSortDesc
+     */
+    sortIcon?: (isSortDesc: boolean) => React.ReactNode;
+}
+export default class HeaderCell<RowDataType> extends React.PureComponent<HeaderCellProps<RowDataType>> {
+    onClick: () => void;
+    renderArrow: () => {};
+    render(): JSX.Element;
+}

package/esm/table/{HeaderCell.js → header/HeaderCell.js}

@@ -26,7 +26,7 @@ var __extends = this && this.__extends || function () {
 
 import React from 'react';
 import classNames from 'classnames';
-import Icon from '../icon';
+import Icon from '../../icon';
 
 var HeaderCell =
 /** @class */
@@ -50,12 +50,17 @@ function (_super) {
       var _a = _this.props,
           prefixCls = _a.prefixCls,
           isSort = _a.isSort,
-          isSortedDescending = _a.isSortedDescending;
+          isSortedDescending = _a.isSortedDescending,
+          sortIcon = _a.sortIcon;
 
       if (!isSort) {
         return null;
       }
 
+      if (sortIcon) {
+        return sortIcon(isSortedDescending);
+      }
+
       return React.createElement(Icon, {
         className: prefixCls + "-arrow",
         name: "arrow",
@@ -72,11 +77,13 @@ function (_super) {
 
     var _b = this.props,
         prefixCls = _b.prefixCls,
+        className = _b.className,
         title = _b.title,
         sortName = _b.sortName,
-        fieldName = _b.fieldName;
+        colSpan = _b.colSpan;
     return React.createElement("th", {
-      key: fieldName
+      className: className,
+      colSpan: colSpan
     }, React.createElement("div", {
       className: classNames(prefixCls + "-title", (_a = {}, _a[prefixCls + "-point"] = sortName, _a)),
       onClick: this.onClick

package/esm/table/header/HeaderRow.d.ts

@@ -0,0 +1,16 @@
+import { Column } from '../interface';
+import { HeaderCellProps } from './HeaderCell';
+import { HeaderRowSelectionInfo } from './CheckIcon';
+export interface HeaderRowProps<T> extends Pick<HeaderCellProps<T>, 'sortName' | 'isSortedDescending' | 'sortIcon'> {
+    prefixCls: string;
+    columns: Column<T>[];
+    /**
+     * 点击表头触发的排序函数
+     * @param isSortedDescending
+     * @param sortName
+     */
+    onSortChange?: (isSortedDescending: boolean, sortName: string) => void;
+    rowSelection: HeaderRowSelectionInfo;
+}
+declare function HeaderRow<RowDataType>({ prefixCls: cls, columns, rowSelection, sortName, isSortedDescending, onSortChange, sortIcon }: HeaderRowProps<RowDataType>): JSX.Element;
+export default HeaderRow;