@autobest-ui/components 1.2.0 → 1.4.0

package/esm/table/body/index.js

@@ -35,14 +35,14 @@ function Body(_a) {
       CheckCell: CheckCell,
       indent: 0
     }));
-    var expandedRowKey = rowKey + " expanded";
-    var expandedColumns = [{
-      title: null,
-      key: expandedRowKey,
-      onRender: expandedRowRenderer
-    }];
 
     if (expandable) {
+      var expandedRowKey = rowKey + " expanded";
+      var expandedColumns = [{
+        title: null,
+        key: expandedRowKey,
+        onRender: expandedRowRenderer
+      }];
       rows.push(React.createElement(BodyRow, {
         key: expandedRowKey,
         className: prefixCls + "-expand-row",
@@ -51,7 +51,8 @@ function Body(_a) {
         index: rowIndex,
         columns: expandedColumns,
         CheckCell: null,
-        indent: CheckCell ? 1 : 0
+        indent: CheckCell ? 1 : 0,
+        isExpand: true
       }));
     }
   });

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Column } from '../interface';
-export interface HeaderCellProps<T> extends Column<T> {
+import { TableColumnInfo } from '../interface';
+export interface HeaderCellProps<T> extends TableColumnInfo<T> {
     prefixCls: string;
     isSort: boolean;
     isSortedDescending?: boolean;

package/esm/table/header/HeaderCell.js

@@ -26,7 +26,6 @@ var __extends = this && this.__extends || function () {
 
 import React from 'react';
 import classNames from 'classnames';
-import Icon from '../../icon';
 
 var HeaderCell =
 /** @class */
@@ -61,12 +60,21 @@ function (_super) {
         return sortIcon(isSortedDescending);
       }
 
-      return React.createElement(Icon, {
-        className: prefixCls + "-arrow",
-        name: "arrow",
-        color: "#fff",
-        transform: isSortedDescending ? 'rotate(180deg)' : null
-      });
+      return React.createElement("span", {
+        className: prefixCls + "-arrow"
+      }, React.createElement("svg", {
+        style: isSortedDescending ? {
+          transform: 'rotate(180deg)'
+        } : null,
+        viewBox: "0 0 1024 1024",
+        version: "1.1",
+        width: "1em",
+        height: "1em",
+        fill: "currentColor",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, React.createElement("path", {
+        d: "M525.339326 186.172452L801.789086 462.622212c12.496698 12.496698 32.758136 12.496698 45.254834 0 12.497405-12.497405 12.496698-32.758136 0-45.254834l-331.014362-331.014362c-12.496698-12.496698-32.757429-12.497405-45.254834 0l-341.795619 339.143969c-12.496698 12.496698-12.496698 32.758136 0 45.254834 12.496698 12.496698 32.758136 12.496698 45.254834 0l287.10586-284.454209L461.372325 925.726242c0 17.673427 14.32669 32.000117 32.000118 32.000117 17.67272-0.000707 31.99941-14.327398 32.000117-32.000117l-0.032527-739.553083z"
+      })));
     };
 
     return _this;

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

@@ -1,9 +1,9 @@
-import { Column } from '../interface';
+import { TableColumnInfo } 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>[];
+    columns: TableColumnInfo<T>[];
     /**
      * 点击表头触发的排序函数
      * @param isSortedDescending

package/esm/table/index.d.ts

@@ -1,11 +1,11 @@
 import React, { ReactText } from 'react';
 import { AddListenerEventHandler } from '@autobest-ui/utils';
-import { Column } from './interface';
+import { TableColumnInfo } from './interface';
 import { HeaderRowProps } from './header/HeaderRow';
 import { BodyProps } from './body';
 import { HeaderRowSelectionInfo } from './header/CheckIcon';
 import { BodyRowSelectionInfo } from './body/CheckIcon';
-export interface RowSelectionInfo<T> extends Partial<Pick<HeaderRowSelectionInfo, 'selectAllVisible' | 'onSelectAll'>>, Partial<Pick<BodyRowSelectionInfo<T>, 'checkIcon'>> {
+export interface TableRowSelectionInfo<T> extends Partial<Pick<HeaderRowSelectionInfo, 'selectAllVisible' | 'onSelectAll'>>, Partial<Pick<BodyRowSelectionInfo<T>, 'checkIcon'>> {
     defaultSelectedRowKeys?: ReactText[];
     getDisabled?: (dataRow: any, selectedRowKeys: ReactText[], selectedRows: T[]) => boolean;
     onSelect?: (checked: boolean, rowData: T, selectedRows: T[]) => void;
@@ -21,7 +21,7 @@ export interface TableProps<T> extends Pick<HeaderRowProps<T>, 'sortName' | 'sor
      * 定义每一列数据的格式
      * 具体类型见Column
      */
-    columns: Column<T>[];
+    columns: TableColumnInfo<T>[];
     /**
      * 获取单条记录的唯一主键; 若是string类型，则取当前行数据中对应名称的属性值； 若是函数，则传入当前行数据，获取rowKey值；这也是勾选功能匹配时所用的key值
      */
@@ -41,7 +41,7 @@ export interface TableProps<T> extends Pick<HeaderRowProps<T>, 'sortName' | 'sor
     /**
      * 表格行是否可勾选，详见RowSelection
      */
-    rowSelection?: RowSelectionInfo<T>;
+    rowSelection?: TableRowSelectionInfo<T>;
     /**
      * 默认勾选项数组, 以primaryKey取值
      */

package/esm/table/index.js

@@ -74,9 +74,9 @@ function (_super) {
         return {
           selectedRowKeys: [],
           selectedRows: [],
-          rowSelection: __assign(__assign({}, prevState.rowSelection), {
+          rowSelection: prevState.rowSelection ? __assign(__assign({}, prevState.rowSelection), {
             selectAllChecked: false
-          })
+          }) : null
         };
       });
     };
@@ -243,7 +243,7 @@ function (_super) {
     };
 
     _this.getRowSelection = function () {
-      if (!('rowSelection' in _this.props)) {
+      if (!('rowSelection' in _this.props) || !_this.props.rowSelection) {
         return null;
       }
 

package/esm/table/interface.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface ColumnOnRenderReturnObjectInfo {
+export interface TableColumnOnRenderReturnObjectInfo {
     children: React.ReactNode | React.ReactNode[];
     props: {
         className?: string;
@@ -7,7 +7,7 @@ export interface ColumnOnRenderReturnObjectInfo {
         colSpan?: number;
     };
 }
-export interface Column<T> {
+export interface TableColumnInfo<T> {
     title: React.ReactNode | React.ReactNode[];
     key: string;
     dataIndex?: string;
@@ -18,5 +18,11 @@ export interface Column<T> {
     width?: string | number;
     className?: string;
     colSpan?: number;
-    onRender?: (rowData: T, rowIndex: number, colIndex: number) => React.ReactNode | React.ReactNode[] | ColumnOnRenderReturnObjectInfo;
+    /**
+     * 渲染单元格内容的方法，不传则默认用dataIndex去取当前行对应属性值；入参分别为当前行数据，行索引， 列索引
+     * @param rowData
+     * @param rowIndex
+     * @param colIndex
+     */
+    onRender?: (rowData: T, rowIndex: number, colIndex: number) => React.ReactNode | React.ReactNode[] | TableColumnOnRenderReturnObjectInfo;
 }

package/esm/table/style/index.css

@@ -1 +1 @@
-.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%}}
+.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{font-size:.16rem;color:#fff;padding:0 .05rem}@media only screen and (max-width:767px){.ab-table-header table{width:100%}}

package/esm/table/style/index.js

@@ -6,6 +6,4 @@ if (canUseDOM) {
   require('../../loading-container/style/index');
 
   require('../../checkbox/style/index');
-
-  require('../../icon/style/index');
 }

package/esm/table/style/index.scss

@@ -37,6 +37,8 @@ $namespace: ab-table;
   }
 
   &-arrow {
+    font-size: .16rem;
+    color: #fff;
     padding: 0 .05rem;
   }
 }

package/lib/carousel/index.d.ts

@@ -1,19 +1,11 @@
 import React from 'react';
 import { AddListenerEventHandler } from '@autobest-ui/utils';
-export declare enum CarouselDirection {
-    vertical = "vertical",
-    horizontal = "horizontal"
-}
 export interface CarouselProps {
     children: React.ReactElement[] | React.ReactElement;
     /**
      * 一行显示的数量
      */
     slidesPerView?: number;
-    /**
-     * 滚动方向
-     */
-    direction?: CarouselDirection;
     /**
      * 监听resize
      */
@@ -22,6 +14,10 @@ export interface CarouselProps {
      * 是否可以手动控制 只支持移动端
      */
     controllable?: boolean;
+    /**
+     * 组件高度，可以不写，不写情况下，自动获取高度
+     */
+    height?: string;
     /**
      * 敏感值，设置多少后可以进行切换, 只有在 controllable = true时生效
      */
@@ -57,18 +53,17 @@ interface CarouselStates {
 declare class Carousel extends React.Component<CarouselProps, CarouselStates> {
     readonly prefixCls = "ab-carousel";
     listRef: React.RefObject<HTMLDivElement>;
-    sliderSize: number;
-    contentSize: number;
-    isDirectionLeftOrTop: boolean;
+    sliderWidth: number;
+    contentWidth: number;
+    isDirectionLeft: boolean;
     intersectionObserver: IntersectionObserver;
-    startSize: number;
-    prevSize: number;
-    moveSize: number;
-    endSize: number;
+    startX: number;
+    prevX: number;
+    moveX: number;
+    endX: number;
     autoplayTimer: any;
     fadeEffectTimer: any;
     static defaultProps: {
-        direction: CarouselDirection;
         slidesPerView: number;
         defaultValue: number;
         className: string;
@@ -87,8 +82,6 @@ declare class Carousel extends React.Component<CarouselProps, CarouselStates> {
     next: (transition?: string) => void;
     prev: (transition?: string) => void;
     goTo: (nextIndex: number, transition?: string) => void;
-    isHorizontalDirection: () => boolean;
-    setElementSizeByDirection: (element: HTMLElement, value: string) => void;
     /**
      * 获取滚动元素数量
      */
@@ -110,11 +103,10 @@ declare class Carousel extends React.Component<CarouselProps, CarouselStates> {
     /**
      * 设置容器元素样式，分别是：透明度渐变与位置偏移
      * @param element
-     * @param translateSize
+     * @param translateX
      * @param transition
      */
-    setListStyles: (element: HTMLElement, translateSize: number, transition?: string) => void;
-    getTouchSize: (event: any) => any;
+    setListStyles: (element: HTMLElement, translateX: number, transition?: string) => void;
     /**
      * 开启自动偏移或者渐变，当元素少于2时，将不会开启
      */

package/lib/carousel/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CarouselDirection = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -41,14 +41,6 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
-var CarouselDirection;
-exports.CarouselDirection = CarouselDirection;
-
-(function (CarouselDirection) {
-  CarouselDirection["vertical"] = "vertical";
-  CarouselDirection["horizontal"] = "horizontal";
-})(CarouselDirection || (exports.CarouselDirection = CarouselDirection = {}));
-
 var Carousel =
 /** @class */
 function (_super) {
@@ -58,15 +50,14 @@ function (_super) {
     var _this = _super.call(this, props) || this;
 
     _this.prefixCls = 'ab-carousel';
-    _this.listRef = _react.default.createRef(); // 当是horizontal时是width， 否则是height
-
-    _this.sliderSize = 0;
-    _this.contentSize = 0;
-    _this.isDirectionLeftOrTop = true;
-    _this.startSize = 0;
-    _this.prevSize = 0;
-    _this.moveSize = 0;
-    _this.endSize = 0;
+    _this.listRef = _react.default.createRef();
+    _this.sliderWidth = 0;
+    _this.contentWidth = 0;
+    _this.isDirectionLeft = true;
+    _this.startX = 0;
+    _this.prevX = 0;
+    _this.moveX = 0;
+    _this.endX = 0;
     _this.autoplayTimer = null;
     _this.fadeEffectTimer = null;
 
@@ -81,20 +72,6 @@ function (_super) {
     _this.goTo = function (nextIndex, transition) {
       _this.interceptorChangePage(nextIndex - 1, transition);
     };
-
-    _this.isHorizontalDirection = function () {
-      return _this.props.direction === CarouselDirection.horizontal;
-    };
-
-    _this.setElementSizeByDirection = function (element, value) {
-      var isHr = _this.isHorizontalDirection();
-
-      if (isHr) {
-        element.style.width = value;
-      } else {
-        element.style.height = value;
-      }
-    };
     /**
      * 获取滚动元素数量
      */
@@ -127,14 +104,11 @@ function (_super) {
         return;
       }
 
-      var isHr = _this.isHorizontalDirection();
-
       var childCount = _this.getChildCount();
 
-      var parentNodeOffset = (0, _utils.getElementSize)(element.parentNode);
-      _this.contentSize = isHr ? parentNodeOffset.width : parentNodeOffset.height; // 没有子元素或者获取不到宽度
+      _this.contentWidth = (0, _utils.getElementSize)(element.parentNode).width; // 没有子元素或者获取不到宽度
 
-      if (!childCount || !_this.contentSize) {
+      if (!childCount || !_this.contentWidth) {
         return;
       } // 执行一次，控制样式，显示slider
 
@@ -146,18 +120,23 @@ function (_super) {
       }
 
       var currentPage = _this.state.currentPage;
-      var slidesPerView = _this.props.slidesPerView;
-      _this.sliderSize = _this.contentSize / slidesPerView;
+      var _a = _this.props,
+          slidesPerView = _a.slidesPerView,
+          height = _a.height;
+      _this.sliderWidth = _this.contentWidth / slidesPerView;
+      element.style.width = _this.sliderWidth * childCount + "px";
 
-      _this.setElementSizeByDirection(element, _this.sliderSize * childCount + "px");
+      if (height) {
+        element.style.height = height;
+      }
 
       var childList = Array.from(element.children);
       childList.forEach(function (child) {
-        _this.setElementSizeByDirection(child, _this.sliderSize + "px");
+        child.style.width = _this.sliderWidth + "px";
       });
-      _this.prevSize = -currentPage * _this.sliderSize;
+      _this.prevX = -currentPage * _this.sliderWidth;
 
-      _this.setListStyles(element, _this.prevSize);
+      _this.setListStyles(element, _this.prevX);
 
       _this.onAutoplay();
     };
@@ -194,11 +173,11 @@ function (_super) {
           nextPage = 0;
         }
 
-        _this.prevSize = -nextPage * _this.sliderSize;
+        _this.prevX = -nextPage * _this.sliderWidth;
 
         _this.onBeforeChange(nextPage);
 
-        _this.setListStyles(element, _this.prevSize, transition);
+        _this.setListStyles(element, _this.prevX, transition);
 
         _this.setState({
           currentPage: nextPage
@@ -211,12 +190,12 @@ function (_super) {
     /**
      * 设置容器元素样式，分别是：透明度渐变与位置偏移
      * @param element
-     * @param translateSize
+     * @param translateX
      * @param transition
      */
 
 
-    _this.setListStyles = function (element, translateSize, transition) {
+    _this.setListStyles = function (element, translateX, transition) {
       element.style.transition = ''; // 当开启渐变时，直接执行渐变，将没有位置偏移动画
 
       if (_this.props.fadeEffect) {
@@ -232,17 +211,7 @@ function (_super) {
         element.style.transition = transition || _transition.default.TransformEaseInOut;
       }
 
-      element.style.transform = _this.isHorizontalDirection() ? "translateX(" + translateSize + "px)" : "translateY(" + translateSize + "px)";
-    };
-
-    _this.getTouchSize = function (event) {
-      var isHr = _this.isHorizontalDirection();
-
-      if (event.touches) {
-        return isHr ? event.touches[0].pageX : event.touches[0].pageY;
-      }
-
-      return isHr ? event.clientX : event.clientY;
+      element.style.transform = "translateX(" + translateX + "px)";
     };
 
     _this.onBeforeChange = function (currentPage) {
@@ -279,8 +248,8 @@ function (_super) {
 
       event.preventDefault();
       clearTimeout(_this.autoplayTimer);
-      _this.endSize = 0;
-      _this.startSize = _this.getTouchSize(event);
+      _this.endX = 0;
+      _this.startX = event.touches ? event.touches[0].pageX : event.clientX;
 
       var element = _this.getListDomNode();
 
@@ -302,9 +271,9 @@ function (_super) {
       }
 
       event.preventDefault();
-      _this.endSize = _this.getTouchSize(event);
-      _this.moveSize = _this.prevSize + _this.endSize - _this.startSize;
-      _this.isDirectionLeftOrTop = _this.prevSize - _this.startSize <= _this.prevSize - _this.endSize;
+      _this.endX = event.touches ? event.touches[0].pageX : event.clientX;
+      _this.moveX = _this.prevX + _this.endX - _this.startX;
+      _this.isDirectionLeft = _this.prevX - _this.startX <= _this.prevX - _this.endX;
 
       var element = _this.getListDomNode();
 
@@ -312,7 +281,7 @@ function (_super) {
         return;
       }
 
-      element.style.transform = _this.isHorizontalDirection() ? "translateX(" + _this.moveSize + "px)" : "translateY(" + _this.moveSize + "px)";
+      element.style.transform = "translateX(" + _this.moveX + "px)";
     };
     /**
      * 停止滑动，判断用户移动位置，确定用户最终滑动位置
@@ -339,9 +308,9 @@ function (_super) {
       var currentPage = _this.state.currentPage;
       var transition = _transition.default.TransformEaseOut; // 移动的偏移量
 
-      var translateSize = Math.abs(_this.startSize - _this.endSize); // 判断用户未产生滑动，认为是点击
+      var translateX = Math.abs(_this.startX - _this.endX); // 判断用户未产生滑动，认为是点击
 
-      if (_this.endSize === 0 || translateSize < sensitivity) {
+      if (_this.endX === 0 || translateX < sensitivity) {
         if (onClick) {
           onClick(_this.state.currentPage + 1);
         }
@@ -353,7 +322,7 @@ function (_super) {
 
       event.preventDefault(); // 移出左边临界点
 
-      if (_this.moveSize >= 0) {
+      if (_this.moveX >= 0) {
         _this.interceptorChangePage(0, transition);
 
         return;
@@ -362,21 +331,21 @@ function (_super) {
       var childCount = _this.getChildCount(); // 移出右边临界点
 
 
-      var listSize = _this.sliderSize * childCount;
-      var moveX = Math.abs(_this.moveSize);
+      var listWidth = _this.sliderWidth * childCount;
+      var moveX = Math.abs(_this.moveX);
 
-      if (moveX >= listSize - _this.contentSize) {
+      if (moveX >= listWidth - _this.contentWidth) {
         _this.interceptorChangePage(childCount - slidesPerView, transition);
 
         return;
       } // 未达到一页，判断是否超出sensitivity， 超出将加1
 
 
-      var skipOne = translateSize % _this.sliderSize >= _this.props.sensitivity ? 1 : 0; // 滑动的完整页数
+      var skipOne = translateX % _this.sliderWidth >= _this.props.sensitivity ? 1 : 0; // 滑动的完整页数
 
-      var skipCount = Math.floor(translateSize / _this.sliderSize); // 判断是否向左滑动
+      var skipCount = Math.floor(translateX / _this.sliderWidth); // 判断是否向左滑动
 
-      if (_this.isDirectionLeftOrTop) {
+      if (_this.isDirectionLeft) {
         currentPage = currentPage + skipCount + skipOne;
       } else {
         currentPage -= skipCount + skipOne;
@@ -419,11 +388,9 @@ function (_super) {
   Carousel.prototype.componentDidUpdate = function (prevProps) {
     var _this = this;
 
-    var _a = this.props,
-        children = _a.children,
-        direction = _a.direction;
+    var children = this.props.children;
 
-    if (_react.default.Children.count(children) !== _react.default.Children.count(prevProps.children) || direction !== prevProps.direction) {
+    if (_react.default.Children.count(children) !== _react.default.Children.count(prevProps.children)) {
       this.init();
     } // 加入 resize 监听
 
@@ -474,9 +441,8 @@ function (_super) {
         className = _b.className,
         children = _b.children,
         pagination = _b.pagination;
-    var isHr = this.isHorizontalDirection();
     return _react.default.createElement("div", {
-      className: (0, _classnames.default)(cls, className, (_a = {}, _a[cls + "-init"] = this.state.initialized, _a[cls + "-hr"] = isHr, _a[cls + "-vt"] = !isHr, _a))
+      className: (0, _classnames.default)(cls, className, (_a = {}, _a[cls + "-init"] = this.state.initialized, _a))
     }, _react.default.createElement("div", {
       className: cls + "-content"
     }, _react.default.createElement("div", {
@@ -497,7 +463,6 @@ function (_super) {
 
 
   Carousel.defaultProps = {
-    direction: CarouselDirection.horizontal,
     slidesPerView: 1,
     defaultValue: 1,
     className: '',

package/lib/carousel/style/index.css

@@ -1 +1 @@
-.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-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}

package/lib/carousel/style/index.scss

@@ -2,7 +2,6 @@ $namespace: ab-carousel;
 
 .#{$namespace} {
   position: relative;
-  height: 100%;
 
   &-content {
     position: relative;
@@ -26,6 +25,7 @@ $namespace: ab-carousel;
   &-slider {
     outline: none;
     overflow: hidden;
+    float: left;
     display: none;
   }
 
@@ -34,10 +34,4 @@ $namespace: ab-carousel;
       display: block;
     }
   }
-
-  &.#{$namespace}-hr {
-    .#{$namespace}-slider {
-      float: left;
-    }
-  }
 }

package/lib/date-picker/calendar/grid/index.css

@@ -1 +1 @@
-.ab-dp-cg-content,.ab-dp-cg-head,.ab-dp-cg-title{display:flex;align-items:center}.ab-dp-cg-title{user-select:none;font-size:.14rem;padding-bottom:.08rem}.ab-dp-cg-title>strong{flex:1 1;margin-left:.1rem;cursor:default;color:#4a4a4a}.ab-dp-cg-title>strong.ab-dp-cg-clickable{cursor:pointer}.ab-dp-cg-title>strong.ab-dp-cg-clickable:hover{color:#000}.ab-dp-cg-dis-icon,.ab-dp-cg-icon{align-self:flex-end;margin-left:.08rem}.ab-dp-cg-icon{cursor:pointer}.ab-dp-cg-head{padding-bottom:.05rem}.ab-dp-cg-head>li{display:flex;align-items:center;justify-content:center;cursor:default}.ab-dp-cg-content{flex-wrap:wrap}.ab-dp-cg-content>li{cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000}.ab-dp-cg-content>li:hover{background:#f0f0f0}.ab-dp-cg-content>li.ab-dp-cg-dis{cursor:not-allowed;color:#b0b0b0}.ab-dp-cg-content>li.ab-dp-cg-dis:hover{background:0 0}.ab-dp-cg-content>li.ab-dp-cg-selected,.ab-dp-cg-content>li:active{background:#c7e0f4;border:3px solid #c7e0f4;border-radius:2px;color:#000}.ab-dp-cg-content>li.ab-dp-cg-today{background:#0078d4;color:#fff}
+.ab-dp-cg-content,.ab-dp-cg-head,.ab-dp-cg-title{display:flex;align-items:center}.ab-dp-cg-title{user-select:none;font-size:.14rem;padding-bottom:.08rem}.ab-dp-cg-title>strong{flex:1 1;margin-left:.1rem;cursor:default;color:#4a4a4a}.ab-dp-cg-title>strong.ab-dp-cg-clickable{cursor:pointer}.ab-dp-cg-title>strong.ab-dp-cg-clickable:hover{color:#000}.ab-dp-cg-dis-icon,.ab-dp-cg-icon{align-self:flex-end;margin-left:.08rem}.ab-dp-cg-icon{cursor:pointer}.ab-dp-cg-head{padding-bottom:.05rem}.ab-dp-cg-head>li{display:flex;align-items:center;justify-content:center;cursor:default}.ab-dp-cg-content{flex-wrap:wrap}.ab-dp-cg-content>li{cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000}.ab-dp-cg-content>li:hover{background:#f0f0f0}.ab-dp-cg-content>li.ab-dp-cg-dis{cursor:not-allowed;color:#b0b0b0}.ab-dp-cg-content>li.ab-dp-cg-dis:hover{background:0 0}.ab-dp-cg-content>li.ab-dp-cg-selected,.ab-dp-cg-content>li:active{background:#c7e0f4;border:3px solid #c7e0f4;border-radius:2px;color:#000}.ab-dp-cg-content>li.ab-dp-cg-today{background:#0078d4;color:#fff}.ab-dp-cg-arrow{cursor:pointer}

package/lib/date-picker/calendar/grid/index.js

@@ -11,37 +11,24 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _icon = _interopRequireDefault(require("../../../icon"));
-
-var __assign = void 0 && (void 0).__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);
-};
-
 var cls = 'ab-dp-cg';
 
-var getArrowStyle = function getArrowStyle(direction, onClick) {
+var renderArrow = function renderArrow(prefixCls, direction, onClick) {
   var enabled = !!onClick;
-  return {
-    name: 'arrow',
-    width: 0.14,
-    height: 0.28,
-    color: enabled ? '#333' : '#808080',
-    transform: direction,
-    className: enabled ? cls + "-icon" : cls + "-dis-icon",
+  return _react.default.createElement("span", {
+    className: prefixCls + "-arrow",
     onClick: onClick
-  };
+  }, _react.default.createElement("svg", {
+    style: direction,
+    viewBox: "0 0 1024 1024",
+    version: "1.1",
+    width: "0.14rem",
+    height: "0.28rem",
+    fill: enabled ? '#333' : '#808080',
+    xmlns: "http://www.w3.org/2000/svg"
+  }, _react.default.createElement("path", {
+    d: "M525.339326 186.172452L801.789086 462.622212c12.496698 12.496698 32.758136 12.496698 45.254834 0 12.497405-12.497405 12.496698-32.758136 0-45.254834l-331.014362-331.014362c-12.496698-12.496698-32.757429-12.497405-45.254834 0l-341.795619 339.143969c-12.496698 12.496698-12.496698 32.758136 0 45.254834 12.496698 12.496698 32.758136 12.496698 45.254834 0l287.10586-284.454209L461.372325 925.726242c0 17.673427 14.32669 32.000117 32.000118 32.000117 17.67272-0.000707 31.99941-14.327398 32.000117-32.000117l-0.032527-739.553083z"
+  })));
 };
 
 var CalendarGrid = function CalendarGrid(_a) {
@@ -62,7 +49,9 @@ var CalendarGrid = function CalendarGrid(_a) {
   }, _react.default.createElement("strong", {
     className: (0, _classnames.default)((_b = {}, _b[cls + "-clickable"] = !!onClickTitle, _b)),
     onClick: onClickTitle
-  }, title), _react.default.createElement(_icon.default, __assign({}, getArrowStyle('', onPrev))), _react.default.createElement(_icon.default, __assign({}, getArrowStyle('rotate(180deg)', onNext)))), _react.default.createElement("ul", {
+  }, title), renderArrow(cls, {}, onPrev), renderArrow(cls, {
+    transform: 'rotate(180deg)'
+  }, onNext)), _react.default.createElement("ul", {
     className: cls + "-head"
   }, headList.map(function (item, index) {
     return _react.default.createElement("li", {

package/lib/date-picker/calendar/grid/index.scss

@@ -83,4 +83,8 @@ $namespace: ab-dp-cg;
       }
     }
   }
+
+  &-arrow {
+    cursor: pointer;
+  }
 }