chore(cascader): 修改cascader组件 (#867，#845)

uiwjs · Jul 9, 2022 · f4f1206 · f4f1206
1 parent 2ae9c5d
commit f4f1206
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/packages/react-cascader/src/index.tsx b/packages/react-cascader/src/index.tsx
@@ -4,7 +4,9 @@ import { HTMLInputProps, IProps } from '@uiw/utils';
 import Dropdown, { DropdownProps } from '@uiw/react-dropdown';
 import Menu from '@uiw/react-menu';
 import Icon from '@uiw/react-icon';
-import './style/index.less';
+// import './style/index.less';
+import { CascaderIconWarp, CascaderIcon } from './style';
+import { Close } from '@uiw/icons/lib/Close';
 
 type ValueType = Array<string | number>;
 type OptionType = { value: string | number; label: React.ReactNode; children?: Array<OptionType> };
@@ -256,7 +258,9 @@ function Cascader(props: CascaderProps) {
           addonAfter={
             <span style={{ width: 'auto' }}>
               {!disabled && selectIconType === 'close' && (
-                <Icon type={selectIconType} onClick={onClear} className={`${prefixCls}-close`} />
+                <CascaderIconWarp closebtn className={`${prefixCls}-close`} onClick={onClear}>
+                  <CascaderIcon as={Close} />
+                </CascaderIconWarp>
               )}
             </span>
           }

diff --git a/packages/react-cascader/src/style/index.ts b/packages/react-cascader/src/style/index.ts
@@ -0,0 +1,30 @@
+import styled, { css } from 'styled-components';
+import { getThemeVariantValue, HTMLDivProps, ThemeVariantValueOptions } from '@uiw/utils';
+import { IconBase, IconBaseProps } from '@uiw/react-icon';
+
+export interface CascaderIconWarpProps extends IconBaseProps, ThemeVariantValueOptions {
+  closebtn?: boolean;
+}
+
+export const CascaderIcon = styled.div<IconBaseProps>`
+  height: 1em;
+  width: 1em;
+`;
+
+export const CascaderIconWarp = styled(IconBase)<CascaderIconWarpProps>`
+  ${(props) =>
+    props.closebtn &&
+    css`
+      & {
+        font-size: 15px;
+        margin-right: 1px;
+        color: ${(props) => getThemeVariantValue(props, 'colorCascaderClose')};
+      }
+    `}
+`;
+
+CascaderIconWarp.defaultProps = {
+  defaultTheme: {
+    colorCascaderClose: '#393e48',
+  },
+};