Commit 53b4e4ef767d8204bee94996a9f22ced7680772c

Authored by 李婷
1 parent 6597c69c

feat: 选择表单优化

1 1 import { DownOutlined, UpOutlined } from '@ant-design/icons';
2 2 import { useSetState } from 'ahooks';
3   -import { Dropdown, Input } from 'antd';
  3 +import {Button, Dropdown, Input } from 'antd';
4 4 import type { InputProps } from 'antd/lib/input';
5 5 import cls from 'classnames';
6 6 import React, { useImperativeHandle } from 'react';
... ... @@ -83,30 +83,31 @@ export const QxInputSelect = React.forwardRef<any, InputSelectProps>(
83 83 }
84 84 }}
85 85 onOpenChange={onVisibleChange}
86   - disabled={disabled}
  86 + disabled={true}
87 87 >
88 88 <>
89 89 {
90 90 from === 'FORM'?
91   - <div
92   - className={'qx-input-select__div'}
  91 + <Button
  92 + disabled={disabled}
  93 + className={`qx-input-select__button`}
93 94 tabIndex={1}
94 95 onClick={() => setState({ visible: !state.visible })}
95 96 >
96 97 {props?.prefix}
97 98 { !props?.value ?
98   - <span className={'qx-input-select__div-main qx-input-select__div-placeholder'}>{props?.placeholder}</span>:
99   - <span className={'qx-input-select__div-main'}>
  99 + <span className={'qx-input-select__button-main qx-input-select__button-placeholder'}>{props?.placeholder}</span>:
  100 + <span className={'qx-input-select__button-main'}>
100 101 <span>{props?.appName}</span>
101 102 <QxBaseIcon
102 103 type="qx-icon-left"
103   - className={'qx-input-select__div-svg'}
  104 + className={'qx-input-select__button-svg'}
104 105 />
105 106 <span>{props?.value}</span>
106 107 </span>
107 108 }
108 109 {inputSuffix}
109   - </div>:
  110 + </Button>:
110 111 <Input
111 112 placeholder="请选择"
112 113 readOnly
... ...
... ... @@ -70,9 +70,8 @@
70 70 }
71 71 }
72 72
73   -.qx-input-select__div {
  73 +.qx-input-select__button {
74 74 height: 32px;
75   - border: 1px solid #d9d9d9;
76 75 border-radius: 4px;
77 76 padding: 4px 11px;
78 77 display: flex;
... ... @@ -80,18 +79,13 @@
80 79 font-size: 14px;
81 80 cursor: text;
82 81 transition: all .3s;
  82 + width: 100%;
83 83
84   - &:hover {
85   - border-color: @B8;
86   - }
87   -
88   - &:focus {
89   - border-color: @B8;
90   - box-shadow: 0 0 0 2px @B3;
91   - outline: none;
  84 + .qx-form-select__input-prefix {
  85 + color: @B8;
92 86 }
93 87
94   - &-main {
  88 + .qx-input-select__button-main {
95 89 height: 22px;
96 90 line-height: 22px;
97 91 margin: 0 4px;
... ... @@ -103,7 +97,7 @@
103 97 text-overflow: ellipsis;
104 98 white-space: nowrap;
105 99
106   - .qx-input-select__div-svg {
  100 + .qx-input-select__button-svg {
107 101 color: @N7;
108 102 transform: rotate(180deg);
109 103 font-size: 16px;
... ... @@ -111,7 +105,7 @@
111 105 }
112 106
113 107 }
114   - &-placeholder {
  108 + .qx-input-select__button-placeholder {
115 109 color: @N6;
116 110 }
117 111 .qx-input-select__input-suffix {
... ... @@ -120,4 +114,12 @@
120 114 .qx-form-select__input-prefix {
121 115 color: @B8;
122 116 }
  117 +
  118 + .ant-dropdown-menu .ant-dropdown-menu-title-content {
  119 + flex: unset;
  120 + }
  121 + .ant-btn-default:not(:disabled):not(.ant-btn-disabled):hover {
  122 + color: unset;
  123 + }
  124 +
123 125 }
... ...