Merge pull request #932 from XiaoMi/hotfix/theme

Hotfix/theme
XiaoMi · Feb 7, 2020 · 0d4f9f2 · 0d4f9f2
2 parents e7e860b + b187f6c
commit 0d4f9f2
Show file tree

Hide file tree

Showing 12 changed files with 72 additions and 21 deletions.
diff --git a/components/dropdown/Dropdown.jsx b/components/dropdown/Dropdown.jsx
@@ -3,6 +3,8 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import DropdownButton from './DropdownButton'
 import DropdownMenu, { propTypesOfMenuData } from './DropdownMenu'
+import Provider from '../context'
+
 import { prefixCls } from '.'
 import { getIsTriggerEqualHover, getIsTriggerEqualContextmenu, trimTriggers } from './utils'
 class Dropdown extends React.Component {
@@ -92,7 +94,7 @@ class Dropdown extends React.Component {
     document.removeEventListener('click', this.handleDocumentClick)
   }
   render () {
-    const { className, style, title, type, placement, data, disabled, width, onButtonClick } = this.props
+    const { className, style, title, type, placement, data, disabled, width, onButtonClick, theme } = this.props
     const { visible } = this.state
     const dropdownCls = classNames(prefixCls, prefixCls + '--' + type, className, disabled && `${prefixCls}--disabled`)
     return (
@@ -101,13 +103,15 @@ class Dropdown extends React.Component {
           {...this.getPopperShowHandler()}
           {...this.getPopperHideHandler()}
           type={type}
+          theme={theme}
           visible={visible}
           onButtonClick={onButtonClick}
           disabled={disabled}
         >
           {title}
         </DropdownButton>
         <DropdownMenu
+          theme={theme}
           visible={visible}
           attachEle={this.refDropdown.current}
           data={data}
@@ -143,4 +147,5 @@ Dropdown.defaultProps = {
   trigger: 'hover',
   width: 240
 }
-export default Dropdown
+export default Provider(Dropdown)
+export {Dropdown}
diff --git a/components/dropdown/DropdownMenu.jsx b/components/dropdown/DropdownMenu.jsx
@@ -4,7 +4,6 @@ import classNames from 'classnames'
 import Popper from '../popper'
 import { prefixCls } from '.'
 import DropdownMenuItem from './DropdownMenuItem'
-import Provider from '../context'
 
 class DropdownMenu extends React.Component {
   render () {
@@ -36,6 +35,7 @@ class DropdownMenu extends React.Component {
         <ul className={menuCls}>
           {data.map((item, index) => (
             <DropdownMenuItem
+              theme={theme}
               key={index}
               {...item}
               parentPopperVisible={visible}
@@ -50,7 +50,7 @@ class DropdownMenu extends React.Component {
     )
   }
 }
-export default Provider(DropdownMenu)
+export default DropdownMenu
 export const propTypesOfMenuData = PropTypes.arrayOf(
   PropTypes.shape({
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

diff --git a/components/dropdown/DropdownMenuItem.jsx b/components/dropdown/DropdownMenuItem.jsx
@@ -63,7 +63,8 @@ export default class DropdownMenuItem extends React.Component {
       href,
       disabled,
       onMenuItemClick,
-      width
+      width,
+      theme
     } = this.props
     const { visible } = this.state
     const shouldRenderDivider = title === '-'
@@ -93,6 +94,7 @@ export default class DropdownMenuItem extends React.Component {
             <Icon name='right' className={iconCls} />
             <DropdownMenu
               data={children}
+              theme={theme}
               visible={visible && parentPopperVisible}
               placement='right-start'
               attachEle={this.refItem.current}

diff --git a/components/menu/style/index.scss b/components/menu/style/index.scss
@@ -336,7 +336,7 @@
       box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
 
       .hi-menu-item {
-        &--active:not(.hi-submenu) {
+        &--active {
           background-color: rgba($value, 0.15);
 
           &::after {

diff --git a/components/table/style/Table.scss b/components/table/style/Table.scss
@@ -461,7 +461,12 @@ $borderColor: #e6e7e8 !default;
 @each $key, $value in $theme-colors {
   .theme__#{$key}.hi-table {
     .hi-table-container table th {
-      background-color: rgba($value, 0.1);
+      background-color: rgba($value, 0.3);
+      color: #83868c;
+    }
+
+    .hi-table-container table tr {
+      background-color: #fff;
       color: #83868c;
     }
 
@@ -481,5 +486,13 @@ $borderColor: #e6e7e8 !default;
       background-color: rgba($value, 0.15);
       color: $value;
     }
+
+    &.striped {
+      table {
+        tr:nth-child(2n) {
+          background: rgba($value, 0.1);
+        }
+      }
+    }
   }
 }
diff --git a/components/transfer/Item.js b/components/transfer/Item.js
@@ -18,7 +18,8 @@ class Item extends Component {
       sourceNode,
       dir,
       draggable,
-      dividerPosition
+      dividerPosition,
+      theme
     } = this.props
     const sourceStyle =
       sourceNode === item.id && isDragging
@@ -27,7 +28,7 @@ class Item extends Component {
           color: 'rgba(204,204,204,1)'
         }
         : {}
-    const itemCls = classNames('hi-transfer__item', item.disabled && 'hi-transfer__item--disabled')
+    const itemCls = classNames('hi-transfer__item', `theme__${theme}`, item.disabled && 'hi-transfer__item--disabled')
     const el = (
       <li style={sourceStyle} className={itemCls} onClick={onClick.bind(this)}>
         {targetNode === item.id &&

diff --git a/components/transfer/Transfer.js b/components/transfer/Transfer.js
@@ -7,10 +7,10 @@ import Input from '../input'
 import classNames from 'classnames'
 import Item from './Item'
 import shallowEqual from 'shallowequal'
+import Provider from '../context'
 
 import './style/index'
-
-export default class Transfer extends Component {
+class Transfer extends Component {
   constructor (props) {
     super(props)
     this.state = {
@@ -260,7 +260,8 @@ export default class Transfer extends Component {
       draggable,
       emptyContent,
       title,
-      disabled
+      disabled,
+      theme
     } = this.props
     const {
       sourceSelectedKeys,
@@ -321,6 +322,7 @@ export default class Transfer extends Component {
                     dividerPosition={dividerPosition}
                     draggable={draggable}
                     key={index}
+                    theme={theme}
                     onClick={this.clickItemEvent.bind(this, item, index, dir)}
                     mode={mode === 'basic' && type === 'default' ? 'basic' : 'multiple'}
                     item={item}
@@ -364,7 +366,7 @@ export default class Transfer extends Component {
   }
 
   render () {
-    const { mode, type } = this.props
+    const { mode, type, theme } = this.props
     const { sourceList, targetList, sourceSelectedKeys, targetSelectedKeys, limited } = this.state
     const operCls = classNames(
       'hi-transfer__operation',
@@ -373,7 +375,7 @@ export default class Transfer extends Component {
     const isLeftDisabled = targetSelectedKeys.length === 0
     const isRightDisabled = sourceSelectedKeys.length === 0 || limited
     return (
-      <div className='hi-transfer'>
+      <div className={`hi-transfer theme__${theme}`}>
         {this.renderContainer('left', sourceList)}
         <div className={operCls}>
           {(mode !== 'basic' || type !== 'default') &&
@@ -406,6 +408,7 @@ export default class Transfer extends Component {
     )
   }
 }
+export default Provider(Transfer)
 Transfer.defaultProps = {
   mode: 'basic',
   type: 'default',

diff --git a/components/transfer/style/index.scss b/components/transfer/style/index.scss
@@ -201,8 +201,18 @@
 
 @each $key, $value in $theme-colors {
   .hi-transfer {
-    &__item {
-      .theme__#{$key}.hi-checkbox-legacy--checked .hi-checkbox-legacy__input {
+    &.theme__#{$key} {
+      .hi-transfer__divider--up {
+        background-color: $value;
+      }
+
+      .hi-transfer__divider--down {
+        background-color: $value;
+      }
+    }
+
+    &__item.theme__#{$key} {
+      .hi-checkbox-legacy--checked .hi-checkbox-legacy__input {
         border: 1px solid $value;
       }
 

diff --git a/components/tree/TreeDivider.js b/components/tree/TreeDivider.js
@@ -5,6 +5,7 @@ const TreeDivider = props => {
     <div
       className={ClassNames(
         'hi-tree__divider',
+        `theme__${props.theme}`,
         `hi-tree__divider--${props.placement}`
       )}
     >

diff --git a/components/tree/TreeItem.js b/components/tree/TreeItem.js
@@ -70,7 +70,7 @@ class TreeItem extends Component {
         )}
       >
         {targetNode === item.id && dropDividerPosition === 'up' && isOver && (
-          <TreeDivider placement='top' />
+          <TreeDivider placement='top' theme={theme} />
         )}
         <div
           className={classNames('item__wrapper', {
@@ -81,7 +81,7 @@ class TreeItem extends Component {
           {(!item.children || (item.children && !expanded)) &&
             targetNode === item.id &&
             dropDividerPosition === 'down' &&
-            isOver && <TreeDivider placement='bottom' />}
+            isOver && <TreeDivider theme={theme} placement='bottom' />}
           {
             <span
               onClick={() => {
@@ -182,7 +182,7 @@ class TreeItem extends Component {
                 {item.title}
                 {/* {renderRightClickMenu(item)} */}
                 {targetNode === item.id && dropDividerPosition === 'sub' && isOver && (
-                  <TreeDivider placement='inner' />
+                  <TreeDivider placement='inner' theme={this.props.theme} />
                 )}
               </span>
             )
@@ -221,7 +221,7 @@ class TreeItem extends Component {
           expanded &&
           targetNode === item.id &&
           dropDividerPosition === 'down' &&
-          isOver && <TreeDivider placement='bottom' />}
+          isOver && <TreeDivider placement='bottom' theme={this.props.theme} />}
       </li>
     )
     return draggable ? connectDropTarget(treeItem) : treeItem

diff --git a/components/tree/TreeNode.js b/components/tree/TreeNode.js
@@ -455,7 +455,7 @@ class TreeNode extends Component {
       }
     }
 
-    let contextMenuPanel = <ul className='right-click-menu' style={{left: rect.left + rect.width + 5, top: rect.top + _st}}>
+    let contextMenuPanel = <ul className={`right-click-menu theme__${this.props.theme}`} style={{left: rect.left + rect.width + 5, top: rect.top + _st}}>
       {
         _cm.length > 0
           ? _cm.map((cm, index) => {

diff --git a/components/tree/style/index.scss b/components/tree/style/index.scss
@@ -570,5 +570,21 @@ $tree: 'hi-tree' !default;
         background-color: $value;
       }
     }
+
+    .hi-tree__divider {
+      .divider-line {
+        background-color: $value;
+      }
+
+      .divider-circle {
+        border: 1px solid $value;
+      }
+    }
+  }
+
+  .theme__#{$key}.right-click-menu {
+    li:hover {
+      background-color: rgba($value, 0.15);
+    }
   }
 }