fix(ui): select - selectedOption value change

akveo · Sep 10, 2019 · ae886a4 · ae886a4
1 parent c4bbda4
commit ae886a4
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 34 deletions.
diff --git a/src/framework/ui/select/select.component.tsx b/src/framework/ui/select/select.component.tsx
@@ -445,18 +445,56 @@ class SelectComponent extends React.Component<SelectProps, State> {
 
   constructor(props: SelectProps) {
     super(props);
-    const { multiSelect, selectedOption } = props;
-    this.strategy = multiSelect ?
-      new MultiSelectStrategy(selectedOption) : new SingleSelectStrategy(selectedOption);
+    this.strategy = this.createSelectionStrategy();
     this.iconAnimation = new Animated.Value(-180);
   }
 
+  public componentDidUpdate(): void {
+    this.strategy = this.createSelectionStrategy();
+  }
+
+  private onPress = (event: GestureResponderEvent) => {
+    this.props.dispatch([]);
+    if (this.props.onPress) {
+      this.props.onPress(event);
+    }
+    this.setVisibility();
+  };
+
+  private onPressIn = (event: GestureResponderEvent) => {
+    this.props.dispatch([Interaction.ACTIVE]);
+
+    if (this.props.onPressIn) {
+      this.props.onPressIn(event);
+    }
+  };
+
+  private onPressOut = (event: GestureResponderEvent) => {
+    this.props.dispatch([]);
+
+    if (this.props.onPressOut) {
+      this.props.onPressOut(event);
+    }
+  };
+
   private onItemSelect = (option: SelectOptionType, event: GestureResponderEvent): void => {
     const { onSelect } = this.props;
 
     onSelect(this.strategy.select(option, this.setVisibility));
   };
 
+  private onControlMeasure = (result: MeasureResult): void => {
+    const width: number = result[MEASURED_CONTROL_TAG].size.width;
+
+    this.setState({ optionsListWidth: width });
+  };
+
+  private createSelectionStrategy = (): SelectionStrategy => {
+    const { multiSelect, selectedOption } = this.props;
+
+    return multiSelect ? new MultiSelectStrategy(selectedOption) : new SingleSelectStrategy(selectedOption);
+  };
+
   private setVisibility = (): void => {
     const visible: boolean = !this.state.visible;
 
@@ -493,36 +531,6 @@ class SelectComponent extends React.Component<SelectProps, State> {
     }).start();
   };
 
-  private onPress = (event: GestureResponderEvent) => {
-    this.props.dispatch([]);
-    if (this.props.onPress) {
-      this.props.onPress(event);
-    }
-    this.setVisibility();
-  };
-
-  private onPressIn = (event: GestureResponderEvent) => {
-    this.props.dispatch([Interaction.ACTIVE]);
-
-    if (this.props.onPressIn) {
-      this.props.onPressIn(event);
-    }
-  };
-
-  private onPressOut = (event: GestureResponderEvent) => {
-    this.props.dispatch([]);
-
-    if (this.props.onPressOut) {
-      this.props.onPressOut(event);
-    }
-  };
-
-  private onControlMeasure = (result: MeasureResult): void => {
-    const width: number = result[MEASURED_CONTROL_TAG].size.width;
-
-    this.setState({ optionsListWidth: width });
-  };
-
   private getComponentStyle = (source: StyleType): StyleType => {
     const {
       backgroundColor,

diff --git a/src/framework/ui/select/selection.strategy.ts b/src/framework/ui/select/selection.strategy.ts
@@ -111,7 +111,11 @@ export class SingleSelectStrategy implements SelectionStrategy {
 
   public select(option: SelectOptionType, callback?: () => void): SelectOptionType {
     this.selectedOption = option;
-    callback();
+
+    if (callback) {
+      callback();
+    }
+
     return this.selectedOption;
   }