feat: improved icon usage

trutoo · Jan 23, 2020 · 7a3c2aa · 7a3c2aa
1 parent 65f47e1
commit 7a3c2aa
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 19 deletions.
diff --git a/packages/ui-core/src/styles/colors.stories.tsx b/packages/ui-core/src/styles/colors.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { base } from '../../postcss.variables.js';
+import { Icon } from '@trutoo/ui-icons';
 
 export default {
   title: 'Colors',
@@ -12,14 +13,8 @@ export const basic = () => (
       .map(key => (
         <figure key={key} className="tu-elevation-1" style={{ padding: 24 }}>
           <div style={{ height: 128, padding: 12, background: `var(${key})` }}>
-            <svg style={{ width: 32, height: 32, fill: 'black' }}>
-              <use xlinkHref="#icon-ghost" />
-            </svg>
-            <svg style={{ width: 32, height: 32, fill: 'white' }}>
-              <use xlinkHref="#icon-ghost" />
-            </svg>
-            <span style={{ width: 32, height: 32, color: 'black' }}></span>
-            <span style={{ width: 32, height: 32, color: 'white' }}></span>
+            <Icon id="ghost" size={32} color="black" />
+            <Icon id="ghost" size={32} color="white" />
           </div>
           <figcaption style={{ paddingTop: 24 }}>{key}</figcaption>
         </figure>

diff --git a/packages/ui-datepicker/src/Datepicker.tsx b/packages/ui-datepicker/src/Datepicker.tsx
@@ -1,4 +1,5 @@
 import React, { Component, MouseEvent, KeyboardEvent, createRef } from 'react';
+import { Icon } from '@trutoo/ui-icons';
 import { Validator, ValidationExpression, Grid } from '@trutoo/ui-core';
 import scrollIntoView from 'scroll-into-view-if-needed';
 
@@ -344,6 +345,26 @@ export default class Datepicker extends Component<Props, State> {
   // RENDER
   //------------------------------------------------------------------------------------
 
+  renderHelper() {
+    if (this.props.disabled) {
+      return <Icon id="calendar" className="tu-datepicker--helper no-events" />;
+    }
+
+    if (this.props.value !== null && this.props.value !== undefined && this.props.value.date) {
+      return (
+        <Icon
+          id="calendar-clear"
+          className="tu-datepicker--helper"
+          tabIndex={-1}
+          title={this.props.clearText || 'Clear'}
+          onClick={this.onClear}
+        />
+      );
+    }
+
+    return <Icon id="calendar" className="tu-datepicker--helper no-events" />;
+  }
+
   render() {
     // Reset date refs on render
     this.dateRefs = {};
@@ -387,15 +408,7 @@ export default class Datepicker extends Component<Props, State> {
           {...this.props.inputProps}
         />
 
-        {this.props.disabled || !this.state.focused ? (
-          <svg className="tu-datepicker--helper no-events">
-            <use xlinkHref="#icon-calendar" />
-          </svg>
-        ) : (
-          <svg className="tu-datepicker--helper" tabIndex={-1} onMouseDown={this.onClear}>
-            <use xlinkHref="#icon-calendar-clear" />
-          </svg>
-        )}
+        {this.renderHelper()}
 
         {this.state.dates && (
           <Grid className="tu-datepicker--select" columns={7} id={`${this.state.id}-results`}>

diff --git a/packages/ui-typeahead/src/Typeahead.tsx b/packages/ui-typeahead/src/Typeahead.tsx
@@ -324,11 +324,16 @@ export default class Typeahead<T extends TypeaheadResult = TypeaheadResult> exte
       );
     }
 
-    if (this.props.disabled || !this.state.focused) {
+    if (this.props.disabled) {
       return <Icon id="arrows-vertical" className="tu-typeahead--helper no-events" />;
     }
 
-    if (!this.props.readonly && this.hasValueOrFocus()) {
+    if (
+      !this.props.readonly &&
+      this.props.value !== null &&
+      this.props.value !== undefined &&
+      this.props.value.view !== ''
+    ) {
       return (
         <Icon
           id="close"
@@ -339,6 +344,8 @@ export default class Typeahead<T extends TypeaheadResult = TypeaheadResult> exte
         />
       );
     }
+
+    return <Icon id="arrows-vertical" className="tu-typeahead--helper no-events" />;
   }
 
   render() {