From 4550355e8d44c66a5782fedbfd9b581a220430c2 Mon Sep 17 00:00:00 2001
From: Zaim <XYKH@corp1.ad1.seb.net>
Date: Tue, 2 Apr 2019 11:31:37 +0800
Subject: [PATCH 1/2] perf(components): memo implementation

all stateless components moved to functionalcomponents with memo implementation for better
performance
---
 develop/components/common/NotFound.tsx | 2 +-
 develop/components/common/SideBar.tsx  | 2 +-
 src/Breadcrumb/Breadcrumb.tsx          | 4 ++--
 src/Button/Button.tsx                  | 4 ++--
 src/Carousel/Carousel.tsx              | 4 ++--
 src/CheckBox/CheckBox.tsx              | 4 ++--
 src/Datepicker/Datepicker.tsx          | 4 ++--
 src/DropDown/DropDown.tsx              | 4 ++--
 src/Icon/Icon.tsx                      | 4 ++--
 src/Image/Image.tsx                    | 4 ++--
 src/ImageCropper/Loader.tsx            | 2 +-
 src/InlineLink/InlineLink.tsx          | 4 ++--
 src/Loader/Loader.tsx                  | 4 ++--
 src/Pagination/Pagination.tsx          | 4 ++--
 src/ProgressBar/ProgressBar.tsx        | 4 ++--
 src/RadioButton/RadioButton.tsx        | 4 ++--
 src/RadioGroup/RadioGroup.tsx          | 4 ++--
 src/Rating/Rating.tsx                  | 4 ++--
 src/Rating/RatingStar.tsx              | 4 ++--
 src/Slider/Slider.tsx                  | 4 ++--
 src/StepTracker/StepTracker.tsx        | 4 ++--
 src/Stepper/Stepper.tsx                | 4 ++--
 src/Tabs/Tabs.tsx                      | 4 ++--
 src/TextArea/TextArea.tsx              | 4 ++--
 src/TextBox/TextBox.tsx                | 4 ++--
 src/TextBoxGroup/TextBoxGroup.tsx      | 4 ++--
 src/TextLabel/TextLabel.tsx            | 4 ++--
 src/Timeline/Timeline.tsx              | 4 ++--
 src/Toggle/Toggle.tsx                  | 4 ++--
 src/Tooltip/readme.md                  | 2 +-
 src/Video/Video.tsx                    | 4 ++--
 31 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/develop/components/common/NotFound.tsx b/develop/components/common/NotFound.tsx
index 5a7e8f98c..406d71426 100644
--- a/develop/components/common/NotFound.tsx
+++ b/develop/components/common/NotFound.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { NavLink } from "react-router-dom";
 
-const NotFound: React.StatelessComponent = (): React.ReactElement<void> => {
+const NotFound: React.FunctionComponent = (): React.ReactElement<void> => {
     return (
         <div className="notfound-container">
             <div className="content">
diff --git a/develop/components/common/SideBar.tsx b/develop/components/common/SideBar.tsx
index 7a71076ac..5e716e427 100644
--- a/develop/components/common/SideBar.tsx
+++ b/develop/components/common/SideBar.tsx
@@ -10,7 +10,7 @@ interface SideBarProps {
     toggle: boolean;
 }
 
-const SideBar: React.StatelessComponent<SideBarProps> = (props: SideBarProps): React.ReactElement<void> => {
+const SideBar: React.FunctionComponent<SideBarProps> = (props: SideBarProps): React.ReactElement<void> => {
     const str = location.href.toLowerCase();
     const page = str.substr(str.lastIndexOf("/"));
 
diff --git a/src/Breadcrumb/Breadcrumb.tsx b/src/Breadcrumb/Breadcrumb.tsx
index 95034eb41..a543a9548 100644
--- a/src/Breadcrumb/Breadcrumb.tsx
+++ b/src/Breadcrumb/Breadcrumb.tsx
@@ -7,7 +7,7 @@ interface BreadcrumbProps {
     className?: string;
 }
 
-export const Breadcrumb: React.StatelessComponent<BreadcrumbProps> = (props: BreadcrumbProps): React.ReactElement<void> => {
+export const Breadcrumb: React.FunctionComponent<BreadcrumbProps> = React.memo((props: BreadcrumbProps): React.ReactElement<void> => {
     return (
         <div className={"custom-breadcrumb" + (props.className ? ` ${props.className}` : "")}>
             <nav aria-label="breadcrumb">
@@ -24,4 +24,4 @@ export const Breadcrumb: React.StatelessComponent<BreadcrumbProps> = (props: Bre
             </nav>
         </div>
     );
-};
+});
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
index eb753fa0f..63f757145 100644
--- a/src/Button/Button.tsx
+++ b/src/Button/Button.tsx
@@ -12,7 +12,7 @@ export interface ButtonProps {
     iconPosition?: string;
 }
 
-export const Button: React.StatelessComponent<ButtonProps> = (props: ButtonProps): React.ReactElement<void> => {
+export const Button: React.FunctionComponent<ButtonProps> = React.memo((props: ButtonProps): React.ReactElement<void> => {
     return (
         <button
             type="button"
@@ -32,4 +32,4 @@ export const Button: React.StatelessComponent<ButtonProps> = (props: ButtonProps
             </div>
         </button>
     );
-};
+});
diff --git a/src/Carousel/Carousel.tsx b/src/Carousel/Carousel.tsx
index 778423326..96f9a76ec 100644
--- a/src/Carousel/Carousel.tsx
+++ b/src/Carousel/Carousel.tsx
@@ -20,7 +20,7 @@ interface CarouselProps {
     className?: string;
 }
 
-export const Carousel: React.StatelessComponent<CarouselProps> = (props: CarouselProps): React.ReactElement<void> => {
+export const Carousel: React.FunctionComponent<CarouselProps> = React.memo((props: CarouselProps): React.ReactElement<void> => {
     const settings: Settings = {
         direction: "horizontal",
         observer: true,
@@ -67,4 +67,4 @@ export const Carousel: React.StatelessComponent<CarouselProps> = (props: Carouse
             }
         </Slider>
     );
-};
+});
diff --git a/src/CheckBox/CheckBox.tsx b/src/CheckBox/CheckBox.tsx
index 567bd57da..2fff3faf5 100644
--- a/src/CheckBox/CheckBox.tsx
+++ b/src/CheckBox/CheckBox.tsx
@@ -15,7 +15,7 @@ export interface CheckBoxProps {
     reference?: React.RefObject<any>;
 }
 
-export const CheckBox: React.StatelessComponent<CheckBoxProps> = (props: CheckBoxProps): React.ReactElement<void> => {
+export const CheckBox: React.FunctionComponent<CheckBoxProps> = React.memo((props: CheckBoxProps): React.ReactElement<void> => {
     return (
         <div className={"form-group custom-checkbox" + (props.inline ? " inline" : "")}>
             <div className={"input-field" + (props.className ? ` ${props.className}` : "")}>
@@ -39,4 +39,4 @@ export const CheckBox: React.StatelessComponent<CheckBoxProps> = (props: CheckBo
             </div>
         </div>
     );
-};
+});
diff --git a/src/Datepicker/Datepicker.tsx b/src/Datepicker/Datepicker.tsx
index 7a9467fb3..9fd1b1264 100644
--- a/src/Datepicker/Datepicker.tsx
+++ b/src/Datepicker/Datepicker.tsx
@@ -18,7 +18,7 @@ export interface DatepickerProps {
     locale?: string;
 }
 
-export const Datepicker: React.StatelessComponent<DatepickerProps> = (props: DatepickerProps): React.ReactElement<void> => {
+export const Datepicker: React.FunctionComponent<DatepickerProps> = React.memo((props: DatepickerProps): React.ReactElement<void> => {
     return (
         <div className={"form-group date-picker" + (props.className ? ` ${props.className}` : "")}>
             <div className={"input-field" + (props.error ? " has-error" : "")}>
@@ -40,4 +40,4 @@ export const Datepicker: React.StatelessComponent<DatepickerProps> = (props: Dat
             </div>
         </div>
     );
-};
+});
diff --git a/src/DropDown/DropDown.tsx b/src/DropDown/DropDown.tsx
index b1678d70a..45dfe1900 100644
--- a/src/DropDown/DropDown.tsx
+++ b/src/DropDown/DropDown.tsx
@@ -23,7 +23,7 @@ export interface DropDownProps {
     disabled?: boolean;
 }
 
-export const DropDown: React.StatelessComponent<DropDownProps> = (props: DropDownProps): React.ReactElement<void> => {
+export const DropDown: React.FunctionComponent<DropDownProps> = React.memo((props: DropDownProps): React.ReactElement<void> => {
     return (
         <div
             className={"form-group custom-dropdown" + (props.className ? ` ${props.className}` : "")}
@@ -68,4 +68,4 @@ export const DropDown: React.StatelessComponent<DropDownProps> = (props: DropDow
             </div>
         </div>
     );
-};
+});
diff --git a/src/Icon/Icon.tsx b/src/Icon/Icon.tsx
index 5f0747185..7d2195786 100644
--- a/src/Icon/Icon.tsx
+++ b/src/Icon/Icon.tsx
@@ -9,7 +9,7 @@ export interface IconProps {
     onClick?: (event: any) => void;
 }
 
-export const Icon: React.StatelessComponent<IconProps> = (props: IconProps): React.ReactElement<void> => {
+export const Icon: React.FunctionComponent<IconProps> = React.memo((props: IconProps): React.ReactElement<void> => {
     return (
         <div
             className={"icon-holder" + (props.className ? ` ${props.className}` : "")}
@@ -20,4 +20,4 @@ export const Icon: React.StatelessComponent<IconProps> = (props: IconProps): Rea
             {props.src}
         </div>
     );
-};
+});
diff --git a/src/Image/Image.tsx b/src/Image/Image.tsx
index 64317a080..6d5f572a6 100644
--- a/src/Image/Image.tsx
+++ b/src/Image/Image.tsx
@@ -11,7 +11,7 @@ export interface ImageProps {
     useImgTag?: boolean;
 }
 
-export const Image: React.StatelessComponent<ImageProps> = (props: ImageProps): React.ReactElement<void> => {
+export const Image: React.FunctionComponent<ImageProps> = React.memo((props: ImageProps): React.ReactElement<void> => {
     return (
         <>
             {!props.useImgTag &&
@@ -39,4 +39,4 @@ export const Image: React.StatelessComponent<ImageProps> = (props: ImageProps):
             }
         </>
     );
-};
+});
diff --git a/src/ImageCropper/Loader.tsx b/src/ImageCropper/Loader.tsx
index 47f15ba65..32b8e193e 100644
--- a/src/ImageCropper/Loader.tsx
+++ b/src/ImageCropper/Loader.tsx
@@ -7,7 +7,7 @@ export interface LoaderProps {
     className?: string;
 }
 
-export const Loader: React.StatelessComponent<LoaderProps> = (props: LoaderProps): React.ReactElement<void> => {
+export const Loader: React.FunctionComponent<LoaderProps> = (props: LoaderProps): React.ReactElement<void> => {
     const fullscreen: boolean = props.fullscreen === undefined ? true : props.fullscreen;
     let loaderWrapper: string = "loader-cropper ";
     if (fullscreen) { loaderWrapper += "fullscreen "; }
diff --git a/src/InlineLink/InlineLink.tsx b/src/InlineLink/InlineLink.tsx
index 03c237c2d..bc12f5250 100644
--- a/src/InlineLink/InlineLink.tsx
+++ b/src/InlineLink/InlineLink.tsx
@@ -7,7 +7,7 @@ interface InlineLinkProps {
     children?: any;
 }
 
-export const InlineLink: React.StatelessComponent<InlineLinkProps> = (props: InlineLinkProps): React.ReactElement<void> => {
+export const InlineLink: React.FunctionComponent<InlineLinkProps> = React.memo((props: InlineLinkProps): React.ReactElement<void> => {
     return (
         <span
             className={"custom-inline-link" + (props.className ? ` ${props.className}` : "")}
@@ -16,4 +16,4 @@ export const InlineLink: React.StatelessComponent<InlineLinkProps> = (props: Inl
             {props.children}
         </span>
     );
-};
+});
diff --git a/src/Loader/Loader.tsx b/src/Loader/Loader.tsx
index 46a9200e0..de683a7c9 100644
--- a/src/Loader/Loader.tsx
+++ b/src/Loader/Loader.tsx
@@ -7,7 +7,7 @@ export interface LoaderProps {
     className?: string;
 }
 
-export const Loader: React.StatelessComponent<LoaderProps> = (props: LoaderProps): React.ReactElement<void> => {
+export const Loader: React.FunctionComponent<LoaderProps> = React.memo((props: LoaderProps): React.ReactElement<void> => {
     const fullscreen: boolean = props.fullscreen === undefined ? true : props.fullscreen;
     let loaderWrapper: string = "loaderWrapper ";
     if (fullscreen) { loaderWrapper += "fullscreen "; }
@@ -21,4 +21,4 @@ export const Loader: React.StatelessComponent<LoaderProps> = (props: LoaderProps
             }
         </div>
     );
-};
+});
diff --git a/src/Pagination/Pagination.tsx b/src/Pagination/Pagination.tsx
index dfd54fdbd..fb5ee3c39 100644
--- a/src/Pagination/Pagination.tsx
+++ b/src/Pagination/Pagination.tsx
@@ -21,7 +21,7 @@ export interface PaginationProps {
     onChange?: (value: number) => void;
 }
 
-export const Pagination: React.StatelessComponent<PaginationProps> = (props: PaginationProps): React.ReactElement<void> => {
+export const Pagination: React.FunctionComponent<PaginationProps> = React.memo((props: PaginationProps): React.ReactElement<void> => {
     const Initialoffset: number = props.offset ? props.offset : 10;
 
     /**
@@ -142,4 +142,4 @@ export const Pagination: React.StatelessComponent<PaginationProps> = (props: Pag
             </nav>
         </div>
     );
-};
+});
diff --git a/src/ProgressBar/ProgressBar.tsx b/src/ProgressBar/ProgressBar.tsx
index eab9bbeb4..144594d7f 100644
--- a/src/ProgressBar/ProgressBar.tsx
+++ b/src/ProgressBar/ProgressBar.tsx
@@ -7,7 +7,7 @@ export interface ProgressBarProps {
     className?: string;
 }
 
-export const ProgressBar: React.StatelessComponent<ProgressBarProps> = (props: ProgressBarProps): React.ReactElement<void> => {
+export const ProgressBar: React.FunctionComponent<ProgressBarProps> = React.memo((props: ProgressBarProps): React.ReactElement<void> => {
     return (
         <div className={"custom-progress" + (props.className ? ` ${props.className}` : "")}>
             <div className={"custom-progress-bar" + (props.showProgress ? " show-progress" : "")} style={{ width: `${props.value}%` }} />
@@ -16,4 +16,4 @@ export const ProgressBar: React.StatelessComponent<ProgressBarProps> = (props: P
             }
         </div>
     );
-};
+});
diff --git a/src/RadioButton/RadioButton.tsx b/src/RadioButton/RadioButton.tsx
index d0e2ea641..439c0c6cb 100644
--- a/src/RadioButton/RadioButton.tsx
+++ b/src/RadioButton/RadioButton.tsx
@@ -16,7 +16,7 @@ export interface RadioButtonProps {
     reference?: React.RefObject<any>;
 }
 
-export const RadioButton: React.StatelessComponent<RadioButtonProps> = (props: RadioButtonProps): React.ReactElement<void> => {
+export const RadioButton: React.FunctionComponent<RadioButtonProps> = React.memo((props: RadioButtonProps): React.ReactElement<void> => {
     let inputFieldClass: string = "input-field";
     if (props.error) { inputFieldClass += " has-error"; }
     if (props.inline) { inputFieldClass += " inline"; }
@@ -46,4 +46,4 @@ export const RadioButton: React.StatelessComponent<RadioButtonProps> = (props: R
             </div>
         </div>
     );
-};
+});
diff --git a/src/RadioGroup/RadioGroup.tsx b/src/RadioGroup/RadioGroup.tsx
index a911ecbaf..e31ab9430 100644
--- a/src/RadioGroup/RadioGroup.tsx
+++ b/src/RadioGroup/RadioGroup.tsx
@@ -21,7 +21,7 @@ export interface RadioGroupProps {
     disableAll?: boolean;
 }
 
-export const RadioGroup: React.StatelessComponent<RadioGroupProps> = (props: RadioGroupProps): React.ReactElement<void> => {
+export const RadioGroup: React.FunctionComponent<RadioGroupProps> = React.memo((props: RadioGroupProps): React.ReactElement<void> => {
     let inputFieldClass: string = "input-field";
     if (props.error) { inputFieldClass += " has-error"; }
     if (props.inline) { inputFieldClass += " inline"; }
@@ -54,4 +54,4 @@ export const RadioGroup: React.StatelessComponent<RadioGroupProps> = (props: Rad
             </div>
         </div>
     );
-};
+});
diff --git a/src/Rating/Rating.tsx b/src/Rating/Rating.tsx
index d1fc720c1..10b758b39 100644
--- a/src/Rating/Rating.tsx
+++ b/src/Rating/Rating.tsx
@@ -20,7 +20,7 @@ interface RatingProps {
  */
 const initialColors: Array<string> = ["#A9A9A9", "#FFC500"];
 
-export const Rating: React.StatelessComponent<RatingProps> = (props: RatingProps): React.ReactElement<void> => {
+export const Rating: React.FunctionComponent<RatingProps> = React.memo((props: RatingProps): React.ReactElement<void> => {
     const height: number = props.iconHeight || 25;
     const width: number = props.iconWidth || 25;
 
@@ -58,4 +58,4 @@ export const Rating: React.StatelessComponent<RatingProps> = (props: RatingProps
             />
         </div>
     );
-};
+});
diff --git a/src/Rating/RatingStar.tsx b/src/Rating/RatingStar.tsx
index 878db5890..431bb84c9 100644
--- a/src/Rating/RatingStar.tsx
+++ b/src/Rating/RatingStar.tsx
@@ -7,7 +7,7 @@ interface StarProps {
     title?: any;
 }
 
-export const SVGStarHollow: React.StatelessComponent<StarProps> = (props: StarProps): React.ReactElement<void> => {
+export const SVGStarHollow: React.FunctionComponent<StarProps> = (props: StarProps): React.ReactElement<void> => {
     return (
         <svg
             className="custom-svg-star-hollow"
@@ -48,7 +48,7 @@ export const SVGStarHollow: React.StatelessComponent<StarProps> = (props: StarPr
     );
 };
 
-export const SVGStar: React.StatelessComponent<StarProps> = (props: StarProps): React.ReactElement<void> => {
+export const SVGStar: React.FunctionComponent<StarProps> = (props: StarProps): React.ReactElement<void> => {
     return (
         <svg
             className="custom-svg-star"
diff --git a/src/Slider/Slider.tsx b/src/Slider/Slider.tsx
index 3fc4952f6..68ab83806 100644
--- a/src/Slider/Slider.tsx
+++ b/src/Slider/Slider.tsx
@@ -28,7 +28,7 @@ export interface SliderProps {
     reference?: React.RefObject<any>;
 }
 
-export const Slider: React.StatelessComponent<SliderProps> = (props: SliderProps): React.ReactElement<void> => {
+export const Slider: React.FunctionComponent<SliderProps> = React.memo((props: SliderProps): React.ReactElement<void> => {
     const min: number = props.min ? props.min : 0;
     const max: number = props.max ? props.max : 100;
 
@@ -107,4 +107,4 @@ export const Slider: React.StatelessComponent<SliderProps> = (props: SliderProps
         </div>
 
     );
-};
+});
diff --git a/src/StepTracker/StepTracker.tsx b/src/StepTracker/StepTracker.tsx
index 9b933043d..d8f8825f9 100644
--- a/src/StepTracker/StepTracker.tsx
+++ b/src/StepTracker/StepTracker.tsx
@@ -13,7 +13,7 @@ export interface StepTrackerProps {
     orientation?: string;
 }
 
-export const StepTracker: React.StatelessComponent<StepTrackerProps> = (props: StepTrackerProps): React.ReactElement<void> => {
+export const StepTracker: React.FunctionComponent<StepTrackerProps> = React.memo((props: StepTrackerProps): React.ReactElement<void> => {
     let topLabel: boolean;
     let bottomLabel: boolean;
     let rightLabel: boolean;
@@ -171,4 +171,4 @@ export const StepTracker: React.StatelessComponent<StepTrackerProps> = (props: S
 
         </div>
     );
-};
+});
diff --git a/src/Stepper/Stepper.tsx b/src/Stepper/Stepper.tsx
index 35671ff68..a94da8f54 100644
--- a/src/Stepper/Stepper.tsx
+++ b/src/Stepper/Stepper.tsx
@@ -16,7 +16,7 @@ export interface StepperProps {
     reference?: React.RefObject<any>;
 }
 
-export const Stepper: React.StatelessComponent<StepperProps> = (props: StepperProps): React.ReactElement<void> => {
+export const Stepper: React.FunctionComponent<StepperProps> = React.memo((props: StepperProps): React.ReactElement<void> => {
     return (
         <div className={"form-group custom-stepper " + (props.className ? props.className : "")}>
             {props.label && <label className="custom-label">{props.label}</label>}
@@ -40,4 +40,4 @@ export const Stepper: React.StatelessComponent<StepperProps> = (props: StepperPr
             {props.error && <div className="alert alert-danger">{props.error}</div>}
         </div>
     );
-};
+});
diff --git a/src/Tabs/Tabs.tsx b/src/Tabs/Tabs.tsx
index b28ec313c..5ef25f482 100644
--- a/src/Tabs/Tabs.tsx
+++ b/src/Tabs/Tabs.tsx
@@ -13,7 +13,7 @@ interface TabsProps {
     className?: string;
 }
 
-export const Tabs: React.StatelessComponent<TabsProps> = (props: TabsProps): React.ReactElement<void> => {
+export const Tabs: React.FunctionComponent<TabsProps> = React.memo((props: TabsProps): React.ReactElement<void> => {
     return (
         <div className={"custom-tabs" + (props.className ? ` ${props.className}` : "")}>
             <ul className="nav nav-tabs">
@@ -33,4 +33,4 @@ export const Tabs: React.StatelessComponent<TabsProps> = (props: TabsProps): Rea
             </ul>
         </div>
     );
-};
+});
diff --git a/src/TextArea/TextArea.tsx b/src/TextArea/TextArea.tsx
index 5cbc018d7..03ce79fff 100644
--- a/src/TextArea/TextArea.tsx
+++ b/src/TextArea/TextArea.tsx
@@ -24,7 +24,7 @@ export interface TextAreaProps {
     reference?: React.RefObject<HTMLTextAreaElement>;
 }
 
-export const TextArea: React.StatelessComponent<TextAreaProps> = (props: TextAreaProps): React.ReactElement<void> => {
+export const TextArea: React.FunctionComponent<TextAreaProps> = React.memo((props: TextAreaProps): React.ReactElement<void> => {
     return (
         <div className={"form-group text-area" + (props.className ? ` ${props.className}` : "")}>
             <div className={"input-field" + (props.error ? " has-error" : "")}>
@@ -52,4 +52,4 @@ export const TextArea: React.StatelessComponent<TextAreaProps> = (props: TextAre
             </div>
         </div>
     );
-};
+});
diff --git a/src/TextBox/TextBox.tsx b/src/TextBox/TextBox.tsx
index 2503d1cb3..74d345a68 100644
--- a/src/TextBox/TextBox.tsx
+++ b/src/TextBox/TextBox.tsx
@@ -23,7 +23,7 @@ export interface TextBoxProps {
     reference?: React.RefObject<HTMLInputElement>;
 }
 
-export const TextBox: React.StatelessComponent<TextBoxProps> = (props: TextBoxProps): React.ReactElement<void> => {
+export const TextBox: React.FunctionComponent<TextBoxProps> = React.memo((props: TextBoxProps): React.ReactElement<void> => {
     return (
         <div className={"form-group input-box" + (props.className ? ` ${props.className}` : "")}>
             <div className={"input-field" + (props.error ? " has-error" : "")}>
@@ -51,4 +51,4 @@ export const TextBox: React.StatelessComponent<TextBoxProps> = (props: TextBoxPr
             </div>
         </div>
     );
-};
+});
diff --git a/src/TextBoxGroup/TextBoxGroup.tsx b/src/TextBoxGroup/TextBoxGroup.tsx
index 4de33f248..f52f650bf 100644
--- a/src/TextBoxGroup/TextBoxGroup.tsx
+++ b/src/TextBoxGroup/TextBoxGroup.tsx
@@ -34,7 +34,7 @@ export interface TextBoxGroupProps {
     reference?: React.RefObject<HTMLInputElement>;
 }
 
-export const TextBoxGroup: React.StatelessComponent<TextBoxGroupProps> = (props: TextBoxGroupProps) => {
+export const TextBoxGroup: React.FunctionComponent<TextBoxGroupProps> = React.memo((props: TextBoxGroupProps) => {
     return (
         <div className={"form-group input-box-group" + (props.className ? ` ${props.className}` : "")}>
             {props.label && <label className="custom-label" htmlFor={props.name}>{props.label}</label>}
@@ -84,4 +84,4 @@ export const TextBoxGroup: React.StatelessComponent<TextBoxGroupProps> = (props:
             </div>
         </div>
     );
-};
+});
diff --git a/src/TextLabel/TextLabel.tsx b/src/TextLabel/TextLabel.tsx
index 76c6a4505..75f327833 100644
--- a/src/TextLabel/TextLabel.tsx
+++ b/src/TextLabel/TextLabel.tsx
@@ -8,11 +8,11 @@ export interface TextLabelProps {
     className?: string;
 }
 
-export const TextLabel: React.StatelessComponent<TextLabelProps> = (props: TextLabelProps): React.ReactElement<void> => {
+export const TextLabel: React.FunctionComponent<TextLabelProps> = React.memo((props: TextLabelProps): React.ReactElement<void> => {
     return (
         <div className={"text-label" + (props.className ? ` ${props.className}` : "")}>
             {props.label && <label className="custom-label" htmlFor={props.name}>{props.label}</label>}
             <div className="custom-label-value">{props.value}</div>
         </div>
     );
-};
+});
diff --git a/src/Timeline/Timeline.tsx b/src/Timeline/Timeline.tsx
index da46d6855..4f58acc3c 100644
--- a/src/Timeline/Timeline.tsx
+++ b/src/Timeline/Timeline.tsx
@@ -29,7 +29,7 @@ function prepareList(list: Array<TimelineListItem>): Array<any> {
     return [topList, bottomList];
 }
 
-export const Timeline: React.StatelessComponent<TimelineProps> = (props: TimelineProps): React.ReactElement<void> => {
+export const Timeline: React.FunctionComponent<TimelineProps> = React.memo((props: TimelineProps): React.ReactElement<void> => {
     const direction: string = props.direction ? props.direction : "vertical";
     const preparedLists = prepareList(props.list);
     const topList: Array<TimelineListItem> = preparedLists[0];
@@ -87,4 +87,4 @@ export const Timeline: React.StatelessComponent<TimelineProps> = (props: Timelin
             </div>
         </div>
     );
-};
+});
diff --git a/src/Toggle/Toggle.tsx b/src/Toggle/Toggle.tsx
index 4f1d7b2d5..ed7bcaa06 100644
--- a/src/Toggle/Toggle.tsx
+++ b/src/Toggle/Toggle.tsx
@@ -10,7 +10,7 @@ export interface ToggleProps {
     reference?: React.RefObject<any>;
 }
 
-export const Toggle: React.StatelessComponent<ToggleProps> = (props: ToggleProps): React.ReactElement<void> => {
+export const Toggle: React.FunctionComponent<ToggleProps> = React.memo((props: ToggleProps): React.ReactElement<void> => {
     return (
         <div className={"form-group custom-toggle" + (props.className ? ` ${props.className}` : "")}>
             <div className="toggle-btn">
@@ -28,4 +28,4 @@ export const Toggle: React.StatelessComponent<ToggleProps> = (props: ToggleProps
             {props.label && <div className="toggle-label">{props.label}</div>}
         </div>
     );
-};
+});
diff --git a/src/Tooltip/readme.md b/src/Tooltip/readme.md
index 180ccddab..287853088 100644
--- a/src/Tooltip/readme.md
+++ b/src/Tooltip/readme.md
@@ -51,7 +51,7 @@ These are the public methods accessible via [React ref](https://reactjs.org/docs
 
 ##### Example usage of forceDismiss and ref. This example shows how to allow the tooltip to be dismissed when clicked outside
 ```javascript
-const ExampleContainer: React.StatelessComponent = () => {
+const ExampleContainer: React.FunctionComponent = () => {
     MyTooltip: Tooltip;
 
     return (
diff --git a/src/Video/Video.tsx b/src/Video/Video.tsx
index 2bbb5be63..78f8c24a2 100644
--- a/src/Video/Video.tsx
+++ b/src/Video/Video.tsx
@@ -15,7 +15,7 @@ export interface VideoProps {
     allowFullScreen?: boolean;
 }
 
-export const Video: React.StatelessComponent<VideoProps> = (props: VideoProps): React.ReactElement<void> => {
+export const Video: React.FunctionComponent<VideoProps> = React.memo((props: VideoProps): React.ReactElement<void> => {
     return (
         <div className={"video-holder-component" + (props.className ? ` ${props.className}` : "")}>
             {props.sourceType === "local" &&
@@ -49,4 +49,4 @@ export const Video: React.StatelessComponent<VideoProps> = (props: VideoProps):
             }
         </div>
     );
-};
+});

From c3ee4e740ee8a95a0a7f13c62f8466bed06c5ab8 Mon Sep 17 00:00:00 2001
From: Zaim <XYKH@corp1.ad1.seb.net>
Date: Wed, 3 Apr 2019 15:06:06 +0800
Subject: [PATCH 2/2] refactor(components): removed memo from few input based
 components

---
 src/Carousel/Carousel.tsx         |  4 ++--
 src/Chart/Chart.tsx               | 40 +++++++++++++------------------
 src/CheckBox/CheckBox.tsx         |  4 ++--
 src/Datepicker/Datepicker.tsx     |  4 ++--
 src/DropDown/DropDown.tsx         |  4 ++--
 src/ProgressBar/ProgressBar.tsx   |  4 ++--
 src/RadioButton/RadioButton.tsx   |  4 ++--
 src/RadioGroup/RadioGroup.tsx     |  4 ++--
 src/Rating/Rating.tsx             |  4 ++--
 src/Slider/Slider.tsx             |  4 ++--
 src/Stepper/Stepper.tsx           |  4 ++--
 src/TextArea/TextArea.tsx         |  4 ++--
 src/TextBox/TextBox.tsx           |  4 ++--
 src/TextBoxGroup/TextBoxGroup.tsx |  4 ++--
 src/Toggle/Toggle.tsx             |  4 ++--
 src/Video/Video.tsx               |  4 ++--
 16 files changed, 47 insertions(+), 53 deletions(-)

diff --git a/src/Carousel/Carousel.tsx b/src/Carousel/Carousel.tsx
index 96f9a76ec..14e976cd7 100644
--- a/src/Carousel/Carousel.tsx
+++ b/src/Carousel/Carousel.tsx
@@ -20,7 +20,7 @@ interface CarouselProps {
     className?: string;
 }
 
-export const Carousel: React.FunctionComponent<CarouselProps> = React.memo((props: CarouselProps): React.ReactElement<void> => {
+export const Carousel: React.FunctionComponent<CarouselProps> = (props: CarouselProps): React.ReactElement<void> => {
     const settings: Settings = {
         direction: "horizontal",
         observer: true,
@@ -67,4 +67,4 @@ export const Carousel: React.FunctionComponent<CarouselProps> = React.memo((prop
             }
         </Slider>
     );
-});
+};
diff --git a/src/Chart/Chart.tsx b/src/Chart/Chart.tsx
index c54eb1ec8..634f08968 100644
--- a/src/Chart/Chart.tsx
+++ b/src/Chart/Chart.tsx
@@ -12,41 +12,35 @@ export interface ChartProps {
     onClick?: (event: any) => void;
 }
 
-export class Chart extends React.Component<ChartProps, any> {
-    constructor(props) {
-        super(props);
-    }
-
-    renderChart(type: string) {
+export const Chart: React.FunctionComponent<ChartProps> = (props: ChartProps): React.ReactElement<void> => {
+    function renderChart(type: string) {
         switch (type) {
             case "line":
-                return <Line data={this.props.data} options={this.props.options} onElementsClick={this.props.onClick} />;
+                return <Line data={props.data} options={props.options} onElementsClick={props.onClick} />;
             case "bar":
-                return <Bar data={this.props.data} options={this.props.options} onElementsClick={this.props.onClick} />;
+                return <Bar data={props.data} options={props.options} onElementsClick={props.onClick} />;
             case "horizontalBar":
-                return <HorizontalBar data={this.props.data} options={this.props.options} onElementsClick={this.props.onClick} />;
+                return <HorizontalBar data={props.data} options={props.options} onElementsClick={props.onClick} />;
             case "pie":
-                return <Pie data={this.props.data} options={this.props.options} onElementsClick={this.props.onClick} />;
+                return <Pie data={props.data} options={props.options} onElementsClick={props.onClick} />;
             case "doughnut":
-                return <Doughnut data={this.props.data} options={this.props.options} onElementsClick={this.props.onClick} />;
+                return <Doughnut data={props.data} options={props.options} onElementsClick={props.onClick} />;
             case "polar":
-                return <Polar data={this.props.data} options={this.props.options} onElementsClick={this.props.onClick} />;
+                return <Polar data={props.data} options={props.options} onElementsClick={props.onClick} />;
             case "radar":
-                return <Radar data={this.props.data} options={this.props.options} onElementsClick={this.props.onClick} />;
+                return <Radar data={props.data} options={props.options} onElementsClick={props.onClick} />;
             case "bubble":
-                return <Bubble data={this.props.data} options={this.props.options} onElementsClick={this.props.onClick} />;
+                return <Bubble data={props.data} options={props.options} onElementsClick={props.onClick} />;
             case "scatter":
-                return <Scatter data={this.props.data} options={this.props.options} onElementsClick={this.props.onClick} />;
+                return <Scatter data={props.data} options={props.options} onElementsClick={props.onClick} />;
             default:
                 return <div>Unknown chart type</div>;
         }
     }
 
-    render() {
-        return (
-            <div className={"chart-wrapper " + (this.props.className ? this.props.className : "")}>
-                {this.renderChart(this.props.chartType)}
-            </div>
-        );
-    }
-}
+    return (
+        <div className={"chart-wrapper " + (props.className ? props.className : "")}>
+            {renderChart(props.chartType)}
+        </div>
+    );
+};
diff --git a/src/CheckBox/CheckBox.tsx b/src/CheckBox/CheckBox.tsx
index 2fff3faf5..29c57fe86 100644
--- a/src/CheckBox/CheckBox.tsx
+++ b/src/CheckBox/CheckBox.tsx
@@ -15,7 +15,7 @@ export interface CheckBoxProps {
     reference?: React.RefObject<any>;
 }
 
-export const CheckBox: React.FunctionComponent<CheckBoxProps> = React.memo((props: CheckBoxProps): React.ReactElement<void> => {
+export const CheckBox: React.FunctionComponent<CheckBoxProps> = (props: CheckBoxProps): React.ReactElement<void> => {
     return (
         <div className={"form-group custom-checkbox" + (props.inline ? " inline" : "")}>
             <div className={"input-field" + (props.className ? ` ${props.className}` : "")}>
@@ -39,4 +39,4 @@ export const CheckBox: React.FunctionComponent<CheckBoxProps> = React.memo((prop
             </div>
         </div>
     );
-});
+};
diff --git a/src/Datepicker/Datepicker.tsx b/src/Datepicker/Datepicker.tsx
index 9fd1b1264..b1b92ad74 100644
--- a/src/Datepicker/Datepicker.tsx
+++ b/src/Datepicker/Datepicker.tsx
@@ -18,7 +18,7 @@ export interface DatepickerProps {
     locale?: string;
 }
 
-export const Datepicker: React.FunctionComponent<DatepickerProps> = React.memo((props: DatepickerProps): React.ReactElement<void> => {
+export const Datepicker: React.FunctionComponent<DatepickerProps> = (props: DatepickerProps): React.ReactElement<void> => {
     return (
         <div className={"form-group date-picker" + (props.className ? ` ${props.className}` : "")}>
             <div className={"input-field" + (props.error ? " has-error" : "")}>
@@ -40,4 +40,4 @@ export const Datepicker: React.FunctionComponent<DatepickerProps> = React.memo((
             </div>
         </div>
     );
-});
+};
diff --git a/src/DropDown/DropDown.tsx b/src/DropDown/DropDown.tsx
index 45dfe1900..81a78d371 100644
--- a/src/DropDown/DropDown.tsx
+++ b/src/DropDown/DropDown.tsx
@@ -23,7 +23,7 @@ export interface DropDownProps {
     disabled?: boolean;
 }
 
-export const DropDown: React.FunctionComponent<DropDownProps> = React.memo((props: DropDownProps): React.ReactElement<void> => {
+export const DropDown: React.FunctionComponent<DropDownProps> = (props: DropDownProps): React.ReactElement<void> => {
     return (
         <div
             className={"form-group custom-dropdown" + (props.className ? ` ${props.className}` : "")}
@@ -68,4 +68,4 @@ export const DropDown: React.FunctionComponent<DropDownProps> = React.memo((prop
             </div>
         </div>
     );
-});
+};
diff --git a/src/ProgressBar/ProgressBar.tsx b/src/ProgressBar/ProgressBar.tsx
index 144594d7f..0256e776e 100644
--- a/src/ProgressBar/ProgressBar.tsx
+++ b/src/ProgressBar/ProgressBar.tsx
@@ -7,7 +7,7 @@ export interface ProgressBarProps {
     className?: string;
 }
 
-export const ProgressBar: React.FunctionComponent<ProgressBarProps> = React.memo((props: ProgressBarProps): React.ReactElement<void> => {
+export const ProgressBar: React.FunctionComponent<ProgressBarProps> = (props: ProgressBarProps): React.ReactElement<void> => {
     return (
         <div className={"custom-progress" + (props.className ? ` ${props.className}` : "")}>
             <div className={"custom-progress-bar" + (props.showProgress ? " show-progress" : "")} style={{ width: `${props.value}%` }} />
@@ -16,4 +16,4 @@ export const ProgressBar: React.FunctionComponent<ProgressBarProps> = React.memo
             }
         </div>
     );
-});
+};
diff --git a/src/RadioButton/RadioButton.tsx b/src/RadioButton/RadioButton.tsx
index 439c0c6cb..55e1d40dc 100644
--- a/src/RadioButton/RadioButton.tsx
+++ b/src/RadioButton/RadioButton.tsx
@@ -16,7 +16,7 @@ export interface RadioButtonProps {
     reference?: React.RefObject<any>;
 }
 
-export const RadioButton: React.FunctionComponent<RadioButtonProps> = React.memo((props: RadioButtonProps): React.ReactElement<void> => {
+export const RadioButton: React.FunctionComponent<RadioButtonProps> = (props: RadioButtonProps): React.ReactElement<void> => {
     let inputFieldClass: string = "input-field";
     if (props.error) { inputFieldClass += " has-error"; }
     if (props.inline) { inputFieldClass += " inline"; }
@@ -46,4 +46,4 @@ export const RadioButton: React.FunctionComponent<RadioButtonProps> = React.memo
             </div>
         </div>
     );
-});
+};
diff --git a/src/RadioGroup/RadioGroup.tsx b/src/RadioGroup/RadioGroup.tsx
index e31ab9430..0f98cc0eb 100644
--- a/src/RadioGroup/RadioGroup.tsx
+++ b/src/RadioGroup/RadioGroup.tsx
@@ -21,7 +21,7 @@ export interface RadioGroupProps {
     disableAll?: boolean;
 }
 
-export const RadioGroup: React.FunctionComponent<RadioGroupProps> = React.memo((props: RadioGroupProps): React.ReactElement<void> => {
+export const RadioGroup: React.FunctionComponent<RadioGroupProps> = (props: RadioGroupProps): React.ReactElement<void> => {
     let inputFieldClass: string = "input-field";
     if (props.error) { inputFieldClass += " has-error"; }
     if (props.inline) { inputFieldClass += " inline"; }
@@ -54,4 +54,4 @@ export const RadioGroup: React.FunctionComponent<RadioGroupProps> = React.memo((
             </div>
         </div>
     );
-});
+};
diff --git a/src/Rating/Rating.tsx b/src/Rating/Rating.tsx
index 10b758b39..d973293bb 100644
--- a/src/Rating/Rating.tsx
+++ b/src/Rating/Rating.tsx
@@ -20,7 +20,7 @@ interface RatingProps {
  */
 const initialColors: Array<string> = ["#A9A9A9", "#FFC500"];
 
-export const Rating: React.FunctionComponent<RatingProps> = React.memo((props: RatingProps): React.ReactElement<void> => {
+export const Rating: React.FunctionComponent<RatingProps> = (props: RatingProps): React.ReactElement<void> => {
     const height: number = props.iconHeight || 25;
     const width: number = props.iconWidth || 25;
 
@@ -58,4 +58,4 @@ export const Rating: React.FunctionComponent<RatingProps> = React.memo((props: R
             />
         </div>
     );
-});
+};
diff --git a/src/Slider/Slider.tsx b/src/Slider/Slider.tsx
index 68ab83806..a38b01ff7 100644
--- a/src/Slider/Slider.tsx
+++ b/src/Slider/Slider.tsx
@@ -28,7 +28,7 @@ export interface SliderProps {
     reference?: React.RefObject<any>;
 }
 
-export const Slider: React.FunctionComponent<SliderProps> = React.memo((props: SliderProps): React.ReactElement<void> => {
+export const Slider: React.FunctionComponent<SliderProps> = (props: SliderProps): React.ReactElement<void> => {
     const min: number = props.min ? props.min : 0;
     const max: number = props.max ? props.max : 100;
 
@@ -107,4 +107,4 @@ export const Slider: React.FunctionComponent<SliderProps> = React.memo((props: S
         </div>
 
     );
-});
+};
diff --git a/src/Stepper/Stepper.tsx b/src/Stepper/Stepper.tsx
index a94da8f54..34640efe0 100644
--- a/src/Stepper/Stepper.tsx
+++ b/src/Stepper/Stepper.tsx
@@ -16,7 +16,7 @@ export interface StepperProps {
     reference?: React.RefObject<any>;
 }
 
-export const Stepper: React.FunctionComponent<StepperProps> = React.memo((props: StepperProps): React.ReactElement<void> => {
+export const Stepper: React.FunctionComponent<StepperProps> = (props: StepperProps): React.ReactElement<void> => {
     return (
         <div className={"form-group custom-stepper " + (props.className ? props.className : "")}>
             {props.label && <label className="custom-label">{props.label}</label>}
@@ -40,4 +40,4 @@ export const Stepper: React.FunctionComponent<StepperProps> = React.memo((props:
             {props.error && <div className="alert alert-danger">{props.error}</div>}
         </div>
     );
-});
+};
diff --git a/src/TextArea/TextArea.tsx b/src/TextArea/TextArea.tsx
index 03ce79fff..f820dbeb7 100644
--- a/src/TextArea/TextArea.tsx
+++ b/src/TextArea/TextArea.tsx
@@ -24,7 +24,7 @@ export interface TextAreaProps {
     reference?: React.RefObject<HTMLTextAreaElement>;
 }
 
-export const TextArea: React.FunctionComponent<TextAreaProps> = React.memo((props: TextAreaProps): React.ReactElement<void> => {
+export const TextArea: React.FunctionComponent<TextAreaProps> = (props: TextAreaProps): React.ReactElement<void> => {
     return (
         <div className={"form-group text-area" + (props.className ? ` ${props.className}` : "")}>
             <div className={"input-field" + (props.error ? " has-error" : "")}>
@@ -52,4 +52,4 @@ export const TextArea: React.FunctionComponent<TextAreaProps> = React.memo((prop
             </div>
         </div>
     );
-});
+};
diff --git a/src/TextBox/TextBox.tsx b/src/TextBox/TextBox.tsx
index 74d345a68..7c482dea8 100644
--- a/src/TextBox/TextBox.tsx
+++ b/src/TextBox/TextBox.tsx
@@ -23,7 +23,7 @@ export interface TextBoxProps {
     reference?: React.RefObject<HTMLInputElement>;
 }
 
-export const TextBox: React.FunctionComponent<TextBoxProps> = React.memo((props: TextBoxProps): React.ReactElement<void> => {
+export const TextBox: React.FunctionComponent<TextBoxProps> = (props: TextBoxProps): React.ReactElement<void> => {
     return (
         <div className={"form-group input-box" + (props.className ? ` ${props.className}` : "")}>
             <div className={"input-field" + (props.error ? " has-error" : "")}>
@@ -51,4 +51,4 @@ export const TextBox: React.FunctionComponent<TextBoxProps> = React.memo((props:
             </div>
         </div>
     );
-});
+};
diff --git a/src/TextBoxGroup/TextBoxGroup.tsx b/src/TextBoxGroup/TextBoxGroup.tsx
index f52f650bf..af50b33af 100644
--- a/src/TextBoxGroup/TextBoxGroup.tsx
+++ b/src/TextBoxGroup/TextBoxGroup.tsx
@@ -34,7 +34,7 @@ export interface TextBoxGroupProps {
     reference?: React.RefObject<HTMLInputElement>;
 }
 
-export const TextBoxGroup: React.FunctionComponent<TextBoxGroupProps> = React.memo((props: TextBoxGroupProps) => {
+export const TextBoxGroup: React.FunctionComponent<TextBoxGroupProps> = (props: TextBoxGroupProps) => {
     return (
         <div className={"form-group input-box-group" + (props.className ? ` ${props.className}` : "")}>
             {props.label && <label className="custom-label" htmlFor={props.name}>{props.label}</label>}
@@ -84,4 +84,4 @@ export const TextBoxGroup: React.FunctionComponent<TextBoxGroupProps> = React.me
             </div>
         </div>
     );
-});
+};
diff --git a/src/Toggle/Toggle.tsx b/src/Toggle/Toggle.tsx
index ed7bcaa06..a30f7cb5c 100644
--- a/src/Toggle/Toggle.tsx
+++ b/src/Toggle/Toggle.tsx
@@ -10,7 +10,7 @@ export interface ToggleProps {
     reference?: React.RefObject<any>;
 }
 
-export const Toggle: React.FunctionComponent<ToggleProps> = React.memo((props: ToggleProps): React.ReactElement<void> => {
+export const Toggle: React.FunctionComponent<ToggleProps> = (props: ToggleProps): React.ReactElement<void> => {
     return (
         <div className={"form-group custom-toggle" + (props.className ? ` ${props.className}` : "")}>
             <div className="toggle-btn">
@@ -28,4 +28,4 @@ export const Toggle: React.FunctionComponent<ToggleProps> = React.memo((props: T
             {props.label && <div className="toggle-label">{props.label}</div>}
         </div>
     );
-});
+};
diff --git a/src/Video/Video.tsx b/src/Video/Video.tsx
index 78f8c24a2..51bf9fd55 100644
--- a/src/Video/Video.tsx
+++ b/src/Video/Video.tsx
@@ -15,7 +15,7 @@ export interface VideoProps {
     allowFullScreen?: boolean;
 }
 
-export const Video: React.FunctionComponent<VideoProps> = React.memo((props: VideoProps): React.ReactElement<void> => {
+export const Video: React.FunctionComponent<VideoProps> = (props: VideoProps): React.ReactElement<void> => {
     return (
         <div className={"video-holder-component" + (props.className ? ` ${props.className}` : "")}>
             {props.sourceType === "local" &&
@@ -49,4 +49,4 @@ export const Video: React.FunctionComponent<VideoProps> = React.memo((props: Vid
             }
         </div>
     );
-});
+};