Browse Source

add iconTypes dictionary

mightyplow 5 years ago
parent
commit
c500f3254c

+ 3 - 2
src/components/caloriesInput/CaloriesInput.tsx

@@ -1,6 +1,7 @@
 import React, { FormEvent } from 'react';
 import { IconButton } from '../button/IconButton';
 import styles from './caloriesInput.css';
+import { iconTypes } from '../icon/iconTypes';
 
 type CaloriesInputProps = {
   addCalories: (calories: { title: string, count: number }) => void,
@@ -39,8 +40,8 @@ function CaloriesInput ({addCalories, saveCalories, item}: CaloriesInputProps) {
   } = item || {};
 
   const buttonIcon = item
-    ? 'tick'
-    : 'plus';
+    ? iconTypes.TICK
+    : iconTypes.PLUS;
 
   return (
     <form onSubmit={onSubmit} className={styles.caloriesInput}>

+ 2 - 1
src/components/caloriesList/ItemActions.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IconButton } from '../button/IconButton';
+import { iconTypes } from '../icon/iconTypes';
 import styles from './itemActions.css';
 
 type ItemActionsProps = {
@@ -13,7 +14,7 @@ function ItemActions (props: ItemActionsProps) {
 
   return (
     <section className={styles.itemActions}>
-      <IconButton icon="trash" buttonClassName={styles.button} onClick={removeItem} />
+      <IconButton icon={iconTypes.TRASH} buttonClassName={styles.button} onClick={removeItem} />
     </section>
   );
 }

+ 11 - 0
src/components/icon/iconTypes.ts

@@ -0,0 +1,11 @@
+const iconTypes = {
+  EDIT: 'edit',
+  PLUS: 'plus',
+  SETTINGS: 'settings',
+  TICK: 'tick',
+  TRASH: 'trash'
+};
+
+export {
+  iconTypes
+};

+ 2 - 1
src/layout/pageFooter/PageFooter.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { IconButton } from '../../components/button/IconButton';
+import { iconTypes } from '../../components/icon/iconTypes';
 import styles from './pageFooter.css';
 
 function PageFooter () {
   return (
     <footer id="pageFooter" className={styles.pageFooter}>
       <section className={styles.buttons}>
-        <IconButton icon="settings" />
+        <IconButton icon={iconTypes.SETTINGS} />
       </section>
     </footer>
   );