From 603aac7dddd2024f2686039e05530d6ddc935e3d Mon Sep 17 00:00:00 2001 From: wugaoliang Date: Sat, 8 Feb 2020 01:27:36 +0800 Subject: [PATCH 1/2] fix: #733 --- components/dropdown/Dropdown.jsx | 9 +++++++-- components/dropdown/DropdownMenu.jsx | 4 ++-- components/dropdown/DropdownMenuItem.jsx | 4 +++- components/menu/style/index.scss | 2 +- components/table/style/Table.scss | 15 ++++++++++++++- components/transfer/Item.js | 5 +++-- components/transfer/Transfer.js | 13 ++++++++----- components/transfer/style/index.scss | 14 ++++++++++++-- components/tree/TreeDivider.js | 1 + components/tree/TreeItem.js | 8 ++++---- components/tree/TreeNode.js | 2 +- components/tree/style/index.scss | 16 ++++++++++++++++ site/main.js | 8 +++++--- 13 files changed, 77 insertions(+), 24 deletions(-) diff --git a/components/dropdown/Dropdown.jsx b/components/dropdown/Dropdown.jsx index fe175cf71..ad5329e31 100644 --- 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,6 +103,7 @@ class Dropdown extends React.Component { {...this.getPopperShowHandler()} {...this.getPopperHideHandler()} type={type} + theme={theme} visible={visible} onButtonClick={onButtonClick} disabled={disabled} @@ -108,6 +111,7 @@ class Dropdown extends React.Component { {title} {data.map((item, index) => ( {targetNode === item.id && diff --git a/components/transfer/Transfer.js b/components/transfer/Transfer.js index e6280d1fe..0c25e0e7a 100755 --- 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 = { @@ -257,7 +257,8 @@ export default class Transfer extends Component { draggable, emptyContent, title, - disabled + disabled, + theme } = this.props const { sourceSelectedKeys, @@ -318,6 +319,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} @@ -361,7 +363,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', @@ -370,7 +372,7 @@ export default class Transfer extends Component { const isLeftDisabled = targetSelectedKeys.length === 0 const isRightDisabled = sourceSelectedKeys.length === 0 || limited return ( -
+
{this.renderContainer('left', sourceList)}
{(mode !== 'basic' || type !== 'default') && @@ -403,6 +405,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 index f4c1bbdbf..feb1fbc0f 100755 --- 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 index ae347b5ee..98a598f60 100644 --- a/components/tree/TreeDivider.js +++ b/components/tree/TreeDivider.js @@ -5,6 +5,7 @@ const TreeDivider = props => {
diff --git a/components/tree/TreeItem.js b/components/tree/TreeItem.js index 2ac788b39..ac4d16044 100644 --- a/components/tree/TreeItem.js +++ b/components/tree/TreeItem.js @@ -70,7 +70,7 @@ class TreeItem extends Component { )} > {targetNode === item.id && dropDividerPosition === 'up' && isOver && ( - + )}
} + isOver && } { { @@ -182,7 +182,7 @@ class TreeItem extends Component { {item.title} {/* {renderRightClickMenu(item)} */} {targetNode === item.id && dropDividerPosition === 'sub' && isOver && ( - + )} ) @@ -221,7 +221,7 @@ class TreeItem extends Component { expanded && targetNode === item.id && dropDividerPosition === 'down' && - isOver && } + isOver && } ) return draggable ? connectDropTarget(treeItem) : treeItem diff --git a/components/tree/TreeNode.js b/components/tree/TreeNode.js index fb27cfe88..9560666cd 100644 --- a/components/tree/TreeNode.js +++ b/components/tree/TreeNode.js @@ -455,7 +455,7 @@ class TreeNode extends Component { } } - let contextMenuPanel =
    + let contextMenuPanel =
      { _cm.length > 0 ? _cm.map((cm, index) => { diff --git a/components/tree/style/index.scss b/components/tree/style/index.scss index bc6321231..138c87280 100644 --- 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); + } } } diff --git a/site/main.js b/site/main.js index f90c5996b..fc70cc940 100644 --- a/site/main.js +++ b/site/main.js @@ -4,10 +4,12 @@ import { Provider } from 'react-redux' import App from './view' import store from './redux/store' import './style/index.scss' - +import { ThemeContext } from '../components/context' render( - - + + + + , document.getElementById('app') ) From b187f6c13996916ddeaed7737868454019ae90db Mon Sep 17 00:00:00 2001 From: wugaoliang Date: Sat, 8 Feb 2020 01:30:13 +0800 Subject: [PATCH 2/2] fix: #733 --- site/main.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/site/main.js b/site/main.js index fc70cc940..f90c5996b 100644 --- a/site/main.js +++ b/site/main.js @@ -4,12 +4,10 @@ import { Provider } from 'react-redux' import App from './view' import store from './redux/store' import './style/index.scss' -import { ThemeContext } from '../components/context' + render( - - - - + + , document.getElementById('app') )