Преглед изворни кода

fix(dropdown): fixed Dropdown showTick bug #1457 (#1458)

Co-authored-by: shijia.me <[email protected]>
走鹃 пре 2 година
родитељ
комит
c528ddbc03

+ 47 - 0
packages/semi-ui/dropdown/_story/dropdown.stories.jsx

@@ -9,6 +9,7 @@ import DisabledItem from './DisabledItem';
 import InHoverElements from './InHoverElements';
 import WrapAvatar from './WrapAvatar';
 import { IconChevronDown, IconBox, IconSimilarity } from '@douyinfe/semi-icons';
+import { IconBox, IconSimilarity, IconSetting, IconForward, IconColorPalette, IconRefresh, IconSearch, IconBranch } from '@douyinfe/semi-icons';
 
 export * from '../_story/C2D';
 
@@ -330,4 +331,50 @@ export function DropdownItemPropsDemo() {
       </Dropdown>
     </div>
   );
+}
+
+ShowTick.storyName = 'showTick';
+export function ShowTick() {
+  return (
+      <div>
+          <Dropdown
+              trigger="custom"
+              position="bottomLeft"
+              showTick
+              visible
+              motion={false}
+              render={
+                  <Dropdown.Menu>
+                      <Dropdown.Item icon={<IconBox />} active>
+                          Menu Item 1
+                      </Dropdown.Item>
+                      <Dropdown.Item icon={<IconSetting />}>Menu Item 2</Dropdown.Item>
+                      <Dropdown.Item disabled icon={<IconForward />}>
+                          Menu Item 3
+                      </Dropdown.Item>
+                      <Dropdown.Item icon={<IconBranch />} type="primary">
+                          primary
+                      </Dropdown.Item>
+                      <Dropdown.Item icon={<IconColorPalette />} type="secondary">
+                          secondary
+                      </Dropdown.Item>
+                      <Dropdown.Item icon={<IconRefresh />} type="tertiary">
+                          tertiary
+                      </Dropdown.Item>
+                      <Dropdown.Item icon={<IconSearch />} type="warning">
+                          warning
+                      </Dropdown.Item>
+                      <Dropdown.Item
+                          icon={<IconSimilarity style={{ color: 'var(--semi-color-tertiary)' }} />}
+                          type="danger"
+                      >
+                          danger
+                      </Dropdown.Item>
+                  </Dropdown.Menu>
+              }
+          >
+              <Button style={{ marginLeft: 90 }}>ShowTick+始终展示</Button>
+          </Dropdown>
+      </div>
+  );
 }

+ 4 - 3
packages/semi-ui/dropdown/dropdownItem.tsx

@@ -68,11 +68,12 @@ class DropdownItem extends BaseComponent<DropdownItemProps> {
     render() {
         const { children, disabled, className, forwardRef, style, type, active, icon, onKeyDown, showTick, hover } = this.props;
         const { showTick: contextShowTick } = this.context;
+        const realShowTick = contextShowTick ?? showTick;
         const itemclass = cls(className, {
             [`${prefixCls}-item`]: true,
             [`${prefixCls}-item-disabled`]: disabled,
             [`${prefixCls}-item-hover`]: hover,
-            [`${prefixCls}-item-withTick`]: contextShowTick ?? showTick,
+            [`${prefixCls}-item-withTick`]: realShowTick,
             [`${prefixCls}-item-${type}`]: type,
             [`${prefixCls}-item-active`]: active,
         });
@@ -85,10 +86,10 @@ class DropdownItem extends BaseComponent<DropdownItemProps> {
         }
         let tick = null;
         switch (true) {
-            case showTick && active:
+            case realShowTick && active:
                 tick = <IconTick />;
                 break;
-            case showTick && !active:
+            case realShowTick && !active:
                 tick = <IconTick style={{ color: 'transparent' }} />;
                 break;
             default: