omim - update text-field

packages/omim/demos/text-field/index.js

@@ -9,6 +9,9 @@ render(
     <h3>With font Icon</h3>
     <m-text-field rightIcon='delete' label='Label1' helperText='Helper Text' />
 
+    <h3>With font Icon and Icon Event</h3>
+    <m-text-field rightIcon='delete' label='Label1' onIconClick={onIconClick} iconEvent={true} helperText='Helper Text' />
+
     <br />
     <h3>Filled</h3>
 
@@ -183,3 +186,6 @@ render(
   </div>
   , 'body')
 
+function onIconClick(){
+  console.log('icon click')
+}

packages/omim/src/text-field/index.d.ts

@@ -74,6 +74,7 @@ export default class TextField extends WeElement<Props, Data> {
         trailingIconContent: StringConstructor;
         leftIcon: StringConstructor;
         rightIcon: StringConstructor;
+        iconEvent: BooleanConstructor;
     };
     mdc: MDCTextField;
     root: HTMLElement;
@@ -82,6 +83,7 @@ export default class TextField extends WeElement<Props, Data> {
     layout: () => void;
     uninstall(): void;
     refIt: (e: any) => void;
+    iconClick: () => void;
     render(props: any): JSX.Element[];
 }
 export {};

packages/omim/src/text-field/index.scss

@@ -10,6 +10,11 @@
   pointer-events: none;
 }
 
+.material-icons.icon-event{
+  cursor: pointer;
+  pointer-events: all;
+}
+
 .mdc-text-field--with-leading-icon .icon{
   position: absolute;
   top: 12px;

packages/omim/src/text-field/index.tsx

@@ -1,6 +1,6 @@
 
 import * as css from './index.scss'
-import { WeElement, tag, h, extractClass } from 'omi'
+import { WeElement, tag, h, extractClass, classNames } from 'omi'
 import { MDCTextField } from '@material/textfield/index'
 import '../icon'
 //import { MDCRipple } from '@material/ripple/index'
@@ -112,7 +112,9 @@ export default class TextField extends WeElement<Props, Data>{
 		trailingIconContent: String,
 
 		leftIcon: String,
-		rightIcon: String
+    rightIcon: String,
+    
+    iconEvent: Boolean
   }
 
   mdc: MDCTextField
@@ -136,6 +138,11 @@ export default class TextField extends WeElement<Props, Data>{
 
   refIt = (e) => { this.root = e }
 
+  iconClick = () => {
+    this.mdc.focus()
+    this.fire('iconclick')
+  }
+
   render(props) {
     const cls = extractClass(props, 'mdc-text-field', {
       'mdc-text-field--outlined': props.outlined,
@@ -154,11 +161,13 @@ export default class TextField extends WeElement<Props, Data>{
       //直接修改 props 需要注意同步 this['__omiattr_']，不然下次和this['__omiattr_']的值进行 diff 结果相同导致不更新
       this['__omiattr_'] && (this['__omiattr_'].label = null)
     }
-
+   
     const vd = [
       <div ref={this.refIt} {...cls}>
-				{(props.path || props.paths) && !props.iconRight && <m-icon class='icon' {...extract(props, ['path', 'paths'])}></m-icon>}
-				{props.leftIcon && <i class="material-icons mdc-text-field__icon">{props.leftIcon}</i>}
+				{(props.path || props.paths) && !props.iconRight && <m-icon onClick={this.iconClick} class={classNames('icon', {'icon-event': props.iconEvent})} {...extract(props, ['path', 'paths'])}></m-icon>}
+				{props.leftIcon && <i onClick={this.iconClick} class={classNames("material-icons mdc-text-field__icon",{
+          'icon-event': props.iconEvent
+        })}>{props.leftIcon}</i>}
         {props.counter && props.textarea && <div class="mdc-text-field-character-counter"></div>}
         {
           props.textarea ?
@@ -176,8 +185,10 @@ export default class TextField extends WeElement<Props, Data>{
             </div> :
             (props.label === undefined || !props.noLabel && <label class="mdc-floating-label" for="my-text-field">{props.label}</label>)
         }
-				{(props.path || props.paths) && props.iconRight && <m-icon class='icon' {...extract(props, ['path', 'paths'])}></m-icon>}
-				{props.rightIcon && <i class="material-icons mdc-text-field__icon">{props.rightIcon}</i>}
+				{(props.path || props.paths) && props.iconRight && <m-icon onClick={this.iconClick} class={classNames('icon', {'icon-event': props.iconEvent})} {...extract(props, ['path', 'paths'])}></m-icon>}
+				{props.rightIcon && <i onClick={this.iconClick} class={classNames("material-icons mdc-text-field__icon",{
+          'icon-event': props.iconEvent
+        })}>{props.rightIcon}</i>}
         {!props.outlined && <div class="mdc-line-ripple"></div>}
       </div>
     ]