add check icon in multi select

alexnazarov · Sep 7, 2018 · ace857d · ace857d
1 parent 976f696
commit ace857d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/components/select/index.tsx b/components/select/index.tsx
@@ -182,10 +182,15 @@ export default class Select extends React.Component<SelectProps, {}> {
       <Icon type="close" className={`${prefixCls}-remove-icon`} />
     );
 
+    const menuItemSelectedIcon = (
+      <Icon type="check" className={`${prefixCls}-selected-icon`} />
+    );
+
     return (
       <RcSelect
         inputIcon={inputIcon}
         removeIcon={removeIcon}
+        menuItemSelectedIcon={menuItemSelectedIcon}
         {...restProps}
         {...modeConfig}
         prefixCls={prefixCls}

diff --git a/components/select/style/index.less b/components/select/style/index.less
@@ -541,7 +541,7 @@
 
   &&--multiple {
     .@{select-prefix-cls}-dropdown-menu-item {
-      &:after {
+      & .@{select-prefix-cls}-selected-icon {
         color: transparent;
         .iconfont-size-under-12px(10px);
         transition: all 0.2s ease;
@@ -553,16 +553,16 @@
         text-shadow: 0 0.1px 0, 0.1px 0 0, 0 -0.1px 0, -0.1px 0;
       }
 
-      &:hover:after {
+      &:hover .@{select-prefix-cls}-selected-icon {
         color: #ddd;
       }
 
-      &-disabled:after {
+      &-disabled .@{select-prefix-cls}-selected-icon {
         display: none;
       }
 
-      &-selected:after,
-      &-selected:hover:after {
+      &-selected .@{select-prefix-cls}-selected-icon,
+      &-selected:hover .@{select-prefix-cls}-selected-icon {
         color: @primary-color;
         display: inline-block;
       }

diff --git a/package.json b/package.json
@@ -71,7 +71,7 @@
     "rc-pagination": "~1.17.0",
     "rc-progress": "~2.2.2",
     "rc-rate": "~2.4.0",
-    "rc-select": "~8.2.3",
+    "rc-select": "~8.2.6",
     "rc-slider": "~8.6.0",
     "rc-steps": "~3.3.0",
     "rc-switch": "~1.7.0",