feat: selectMode 支持 borderMode 配置 (#2996)

* feat: selectMode 支持 borderMode 配置

* TransferPicker 也补充一下

scss/components/_input-box.scss

@@ -1,5 +1,6 @@
 .#{$ns}InputBox {
   @include input-input();
+  @include input-border();
 
   &--inline {
     display: inline-flex;

scss/components/_result-box.scss

@@ -1,5 +1,6 @@
 .#{$ns}ResultBox {
   @include input-input();
+  @include input-border();
   flex-wrap: wrap;
   padding: 0 px2rem(3px);
   min-height: var(--Form-input-height);

src/components/InputBox.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {ThemeProps, themeable} from '../theme';
 import Input from './Input';
-import {autobind} from '../utils/helper';
+import {autobind, ucFirst} from '../utils/helper';
 import {Icon} from './icons';
 
 export interface InputBoxProps
@@ -17,6 +17,7 @@ export interface InputBoxProps
   placeholder?: string;
   prefix?: JSX.Element;
   children?: JSX.Element;
+  borderMode?: 'full' | 'half' | 'none';
 }
 
 export interface InputBoxState {
@@ -79,20 +80,20 @@ export class InputBox extends React.Component<InputBoxProps, InputBoxState> {
       placeholder,
       prefix: result,
       children,
+      borderMode,
       ...rest
     } = this.props;
     const isFocused = this.state.isFocused;
 
     return (
       <div
-        className={cx(
-          'InputBox',
-          className,
-          isFocused ? 'is-focused' : '',
-          disabled ? 'is-disabled' : '',
-          hasError ? 'is-error' : '',
-          rest.onClick ? 'is-clickable' : ''
-        )}
+        className={cx('InputBox', className, {
+          'is-focused': isFocused,
+          'is-disabled': disabled,
+          'is-error': hasError,
+          'is-clickable': rest.onClick,
+          [`InputBox--border${ucFirst(borderMode)}`]: borderMode
+        })}
       >
         {result}
 

src/components/ResultBox.tsx

@@ -4,7 +4,7 @@ import {InputBoxProps} from './InputBox';
 import {uncontrollable} from 'uncontrollable';
 import {Icon} from './icons';
 import Input from './Input';
-import {autobind} from '../utils/helper';
+import {autobind, ucFirst} from '../utils/helper';
 import {LocaleProps, localeable} from '../locale';
 
 export interface ResultBoxProps
@@ -113,20 +113,20 @@ export class ResultBox extends React.Component<ResultBoxProps> {
       onKeyPress,
       onFocus,
       onBlur,
+      borderMode,
       ...rest
     } = this.props;
     const isFocused = this.state.isFocused;
 
     return (
       <div
-        className={cx(
-          'ResultBox',
-          className,
-          isFocused ? 'is-focused' : '',
-          disabled ? 'is-disabled' : '',
-          hasError ? 'is-error' : '',
-          onResultClick ? 'is-clickable' : ''
-        )}
+        className={cx('ResultBox', className, {
+          'is-focused': isFocused,
+          'is-disabled': disabled,
+          'is-error': hasError,
+          'is-clickable': onResultClick,
+          [`ResultBox--border${ucFirst(borderMode)}`]: borderMode
+        })}
         onClick={onResultClick}
         tabIndex={!allowInput && !disabled && onFocus ? 0 : -1}
         onKeyPress={allowInput ? undefined : onKeyPress}

src/components/TransferDropDown.tsx

@@ -11,6 +11,7 @@ import PopOverContainer from './PopOverContainer';
 export interface TransferDropDownProps extends TransferProps {
   // 新的属性？
   multiple?: boolean;
+  borderMode?: 'full' | 'half' | 'none';
 }
 
 export class TransferDropDown extends Transfer<TransferDropDownProps> {
@@ -23,7 +24,8 @@ export class TransferDropDown extends Transfer<TransferDropDownProps> {
       className,
       onChange,
       onSearch,
-      multiple
+      multiple,
+      borderMode
     } = this.props;
     const {inputValue, searchResult} = this.state;
 
@@ -84,6 +86,7 @@ export class TransferDropDown extends Transfer<TransferDropDownProps> {
               className,
               isOpened ? 'is-active' : ''
             )}
+            borderMode={borderMode}
             allowInput={false}
             result={
               multiple

src/components/TransferPicker.tsx

@@ -11,6 +11,11 @@ import {autobind} from '../utils/helper';
 export interface TransferPickerProps extends Omit<TransferProps, 'itemRender'> {
   // 新的属性？
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+  /**
+   * 边框模式，全边框，还是半边框，或者没边框。
+   */
+  borderMode?: 'full' | 'half' | 'none';
 }
 
 export class TransferPicker extends React.Component<TransferPickerProps> {
@@ -37,6 +42,7 @@ export class TransferPicker extends React.Component<TransferPickerProps> {
       className,
       onChange,
       size,
+      borderMode,
       ...rest
     } = this.props;
 
@@ -64,6 +70,7 @@ export class TransferPicker extends React.Component<TransferPickerProps> {
             onResultClick={onClick}
             placeholder={__('Select.placeholder')}
             disabled={disabled}
+            borderMode={borderMode}
           >
             <span className={cx('TransferPicker-icon')}>
               <Icon icon="pencil" className="icon" />

src/renderers/Form/Select.tsx

@@ -344,7 +344,9 @@ export interface TransferDropDownProps
       | 'inputClassName'
       | 'className'
       | 'descriptionClassName'
-    > {}
+    > {
+  borderMode?: 'full' | 'half' | 'none';
+}
 
 class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProps> {
   render() {
@@ -363,7 +365,8 @@ class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProp
       selectMode,
       multiple,
       columns,
-      leftMode
+      leftMode,
+      borderMode
     } = this.props;
 
     // 目前 LeftOptions 没有接口可以动态加载
@@ -402,6 +405,7 @@ class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProp
           columns={columns}
           leftMode={leftMode}
           leftOptions={leftOptions}
+          borderMode={borderMode}
         />
 
         <Spinner overlay key="info" show={loading} />

src/renderers/Form/TransferPicker.tsx

@@ -17,6 +17,10 @@ import TransferPicker from '../../components/TransferPicker';
  */
 export interface TransferPickerControlSchema extends FormOptionsControl {
   type: 'transfer-picker';
+  /**
+   * 边框模式，全边框，还是半边框，或者没边框。
+   */
+  borderMode?: 'full' | 'half' | 'none';
 
   /**
    * 是否显示剪头
@@ -91,7 +95,8 @@ export class TransferPickerRenderer extends BaseTransferRenderer<TabsTransferPro
       pickerSize,
       columns,
       leftMode,
-      selectMode
+      selectMode,
+      borderMode
     } = this.props;
 
     // 目前 LeftOptions 没有接口可以动态加载
@@ -113,6 +118,7 @@ export class TransferPickerRenderer extends BaseTransferRenderer<TabsTransferPro
     return (
       <div className={cx('TransferControl', className)}>
         <TransferPicker
+          borderMode={borderMode}
           selectMode={selectMode}
           value={selectedOptions}
           disabled={disabled}