feat(Search): theme support config focus status, close #3965 (#3970)

alibaba-fusion · Jun 30, 2022 · f16f16f · f16f16f
1 parent c83fffc
commit f16f16f
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 1 deletion.
diff --git a/docs/search/theme/index.jsx b/docs/search/theme/index.jsx
@@ -122,6 +122,14 @@ class FunctionDemo extends React.Component {
                         <Search filter={filter} searchText={i18n.title} type="normal" size="medium" shape="simple" style={style}   />
                     </DemoGroup>
                 </Demo>
+                <Demo title="Focused" block>
+                    <DemoHead cols={['L', 'M']}/>
+
+                    <DemoGroup label="Normal">
+                        <Search className="next-search-focus"  searchText={i18n.title} type="normal" size="large" shape="simple" style={style}   />
+                        <Search className="next-search-focus" searchText={i18n.title} type="normal" size="medium" shape="simple" style={style}   />
+                    </DemoGroup>
+                </Demo>
                 <div>
                     <Demo title="Dark" block defaultBackground="dark">
                         <DemoHead cols={['L', 'M']}/>

diff --git a/src/search/Search.jsx b/src/search/Search.jsx
@@ -173,9 +173,13 @@ class Search extends React.Component {
         this.state = {
             value: typeof value === 'undefined' ? '' : value,
             filterValue,
+            ifFocus: false,
         };
 
         this.highlightKey = null;
+
+        this.handleBlur = this.handleBlur.bind(this);
+        this.handleFocus = this.handleFocus.bind(this);
     }
 
     static getDerivedStateFromProps(nextProps, prevState) {
@@ -261,6 +265,20 @@ class Search extends React.Component {
         this.inputRef.focus(...args);
     }
 
+    handleFocus(...args) {
+        this.setState({
+            ifFocus: true,
+        });
+        this.props.onFocus && this.props.onFocus(...args);
+    }
+
+    handleBlur(...args) {
+        this.setState({
+            ifFocus: false,
+        });
+        this.props.onBlur && this.props.onBlur(...args);
+    }
+
     render() {
         const {
             shape,
@@ -289,12 +307,15 @@ class Search extends React.Component {
             ...others
         } = this.props;
 
+        const { ifFocus } = this.state;
+
         const cls = classNames({
             [`${prefix}search`]: true,
             [`${prefix}search-${shape}`]: true,
             [`${prefix}${type}`]: type,
             [`${prefix}${size}`]: size,
             [`${prefix}disabled`]: !!disabled,
+            [`${prefix}search-focus`]: ifFocus,
             [className]: !!className,
         });
 
@@ -393,6 +414,8 @@ class Search extends React.Component {
                     popupContent={popupContent}
                     disabled={disabled}
                     ref={this.saveInputRef}
+                    onFocus={this.handleFocus}
+                    onBlur={this.handleBlur}
                 />
             </Group>
         );

diff --git a/src/search/main.scss b/src/search/main.scss
@@ -11,6 +11,39 @@
     width: 100%;
     display: inline-block;
 
+    &#{$search-prefix}-focus {
+        box-shadow: $search-focus-shadow-spread;
+
+        .#{$css-prefix}input {
+            background-color: $search-focus-bg-color;
+        }
+
+        // normal
+        &#{$search-prefix}-normal.#{$css-prefix}primary  #{$search-prefix}-left {
+            border-color: $search-foucs-normal-primary-border-color;
+        }
+
+        &#{$search-prefix}-normal.#{$css-prefix}secondary  #{$search-prefix}-left {
+            border-color: $search-foucs-normal-secondary-border-color;
+        }
+
+        &#{$search-prefix}-normal.#{$css-prefix}normal  #{$search-prefix}-left {
+            border-color: $search-foucs-normal-normal-border-color;
+        }
+
+        &#{$search-prefix}-normal.#{$css-prefix}dark  #{$search-prefix}-left {
+            border-color: $search-foucs-normal-dark-border-color;
+        }
+
+        // simple
+        &#{$search-prefix}-simple.#{$css-prefix}dark  #{$search-prefix}-left {
+            border-color: $search-foucs-simple-dark-border-color;
+        }
+        &#{$search-prefix}-simple.#{$css-prefix}normal  #{$search-prefix}-left {
+            border-color: $search-foucs-simple-normal-border-color;
+        }
+    }
+
     .#{$css-prefix}input,
     .#{$css-prefix}select {
         border: none;

diff --git a/src/search/scss/variable.scss b/src/search/scss/variable.scss
@@ -7,7 +7,7 @@
 /// @family data-entry
 /// @varPrefix $search-
 /// @classPrefix {prefix}-search
-/// @order {"size/bounding":10,"size/btn":11,"size/margin":12,"size/simple":13,"statement/normal":10,"statement/normal/btn":100,"statement/btn":11,"statement/hover":12,"statement/hover/btn":120,"statement/simple":13,"statement/icon":14}
+/// @order {"size/bounding":10,"size/btn":11,"size/margin":12,"size/simple":13,"statement/normal":10,"statement/normal/btn":100,"statement/btn":11,"statement/hover":12,"statement/hover/btn":120,"statement/simple":13,"statement/icon":14,"statement/focus":15}
 ////
 
 $search-prefix: '.#{$css-prefix}search';
@@ -334,5 +334,34 @@ $search-simple-dark-m-icon-size: $icon-xs !default;
 /// @type icon
 $search-search-icon-content: $icon-content-search !default;
 
+
+/// border color
+/// @namespace statement/focus
+$search-foucs-normal-primary-border-color: $color-brand1-6 !default;
+/// border color
+/// @namespace statement/focus
+$search-foucs-normal-secondary-border-color: $color-brand1-6 !default;
+/// border color
+/// @namespace statement/focus
+$search-foucs-normal-normal-border-color: $color-line1-4 !default;
+/// border color
+/// @namespace statement/focus
+$search-foucs-normal-dark-border-color: $color-brand1-6 !default;
+/// border color
+/// @namespace statement/focus
+$search-foucs-simple-normal-border-color: $color-line1-4 !default;
+/// border color
+/// @namespace statement/focus
+$search-foucs-simple-dark-border-color: $color-line1-3 !default;
+
+
+/// background
+/// @namespace statement/focus
+$search-focus-bg-color:  $color-white !default;
+/// shadow
+/// @namespace statement/focus
+$search-focus-shadow-spread: $shadow-zero !default;
+
+
 $color-calculate-search-normal-dark-bg: rgba(get-compiling-value($search-normal-dark-bg-color), get-compiling-value($search-normal-dark-bg-opacity)) !default;
 $color-calculate-search-simple-dark-bg: rgba(get-compiling-value($search-simple-dark-bg-color), get-compiling-value($search-simple-dark-bg-opacity)) !default;