Add RecipeSearch per Planner day. Add onBlur event on Input component

recipes/src/components/Input/index.tsx

@@ -13,6 +13,7 @@ type InputProps = {
 	onChange: (e: any) => void,
 	textarea?: boolean,
 	onKeyDown? : (e: any) => void,
+	onBlur?: (e: React.FocusEvent) => void,
 	type?: 'text'|'number',
 	style?: 'display'|'regular',
 	icon?: string,
@@ -30,6 +31,7 @@ const Input = ({
 	value,
 	onChange,
 	onKeyDown,
+	onBlur,
 	type = 'text',
 	style = 'regular',
 	icon,
@@ -73,6 +75,7 @@ const Input = ({
 						//@ts-ignore
 						onChange={onChange}
 						onKeyDown={onKeyDown}
+						onBlur={onBlur}
 						type={type}
 						min={0}
 						rows={1}

recipes/src/components/RecipeSearch/index.tsx

@@ -4,8 +4,6 @@ import { DBRecipe } from 'types/recipes';
 import Input from 'components/Input';
 import List from 'components/List';
 
-import classnames from 'classnames';
-
 import { getRecipes } from 'containers/Recipes/services';
 import { throttle } from 'throttle-debounce';
 
@@ -94,6 +92,12 @@ class RecipeSearch extends React.Component<Props, State> {
     })
   }
 
+  closeResults = (event: any) => {
+    this.setState({
+      openResult: false
+    })
+  }
+
   render() {
     const { results, search, cursor, openResult } = this.state;
     return (
@@ -103,6 +107,7 @@ class RecipeSearch extends React.Component<Props, State> {
         value={search}
         onChange={this.changeQuery}
         onKeyDown={this.onKeyDown}
+        onBlur={this.closeResults}
       />
       <div className='cbk-recipe-search__results'>
         {

recipes/src/containers/Planner/index.tsx

@@ -106,6 +106,7 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
           planner={this.props.planner}
           removeMeal={this.removeMeal}
           addToBacklog={this.props.addToBacklog}
+          assignToDay={this.props.assignToDay}
         />
       </div>
     );
@@ -119,9 +120,10 @@ const DisplayPlanner: React.SFC<{
   backlog: RecipePlan[],
   planner: WeekPlan,
   removeMeal: typeof PlannerActions.removeMeal,
+  assignToDay: typeof PlannerActions.assignToDay,
   addToBacklog: (recipe: DBRecipe) => {},
   mode?: PlannerMode,
-}> = ({ mode, onDragEnd, backlog, weekNumber, week, planner, removeMeal, addToBacklog }) => (
+}> = ({ mode, onDragEnd, backlog, weekNumber, week, planner, removeMeal, addToBacklog, assignToDay }) => (
   <section className='cbk-planner__body'>
     <DragDropContext onDragEnd={onDragEnd}>
       {
@@ -182,6 +184,11 @@ const DisplayPlanner: React.SFC<{
                     const recipe = planner[weekday][meal];
                     return (
                       <div className='day-schedule--meal' key={key}>
+                        {
+                          mode === PlannerMode.Edit && !recipe ? 
+                            (<RecipeSearch onSelect={(selected)=>{ assignToDay(selected, weekday, meal) }}/>) :
+                            null
+                        }
                         <Droppable droppableId={`${dayNumber}-${weekday}-${meal}`}>
                           {
                             provided => (