Merge pull request #8 from sebgroup/develop

React Memo
seb-oss · Apr 3, 2019 · f7f400f · f7f400f
2 parents b40e5f4 + 103ef5c
commit f7f400f
Show file tree

Hide file tree

Showing 32 changed files with 60 additions and 66 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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> = (props: CarouselProps): React.ReactElement<void> => {
     const settings: Settings = {
         direction: "horizontal",
         observer: true,

diff --git 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
@@ -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> = (props: CheckBoxProps): React.ReactElement<void> => {
     return (
         <div className={"form-group custom-checkbox" + (props.inline ? " inline" : "")}>
             <div className={"input-field" + (props.className ? ` ${props.className}` : "")}>

diff --git 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> = (props: DatepickerProps): React.ReactElement<void> => {
     return (
         <div className={"form-group date-picker" + (props.className ? ` ${props.className}` : "")}>
             <div className={"input-field" + (props.error ? " has-error" : "")}>

diff --git 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> = (props: DropDownProps): React.ReactElement<void> => {
     return (
         <div
             className={"form-group custom-dropdown" + (props.className ? ` ${props.className}` : "")}

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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> = (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}%` }} />

diff --git 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> = (props: RadioButtonProps): React.ReactElement<void> => {
     let inputFieldClass: string = "input-field";
     if (props.error) { inputFieldClass += " has-error"; }
     if (props.inline) { inputFieldClass += " inline"; }

diff --git 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> = (props: RadioGroupProps): React.ReactElement<void> => {
     let inputFieldClass: string = "input-field";
     if (props.error) { inputFieldClass += " has-error"; }
     if (props.inline) { inputFieldClass += " inline"; }

diff --git 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> = (props: RatingProps): React.ReactElement<void> => {
     const height: number = props.iconHeight || 25;
     const width: number = props.iconWidth || 25;
 

diff --git 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
@@ -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> = (props: SliderProps): React.ReactElement<void> => {
     const min: number = props.min ? props.min : 0;
     const max: number = props.max ? props.max : 100;
 

diff --git 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
@@ -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> = (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>}

diff --git 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
@@ -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> = (props: TextAreaProps): React.ReactElement<void> => {
     return (
         <div className={"form-group text-area" + (props.className ? ` ${props.className}` : "")}>
             <div className={"input-field" + (props.error ? " has-error" : "")}>

diff --git 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> = (props: TextBoxProps): React.ReactElement<void> => {
     return (
         <div className={"form-group input-box" + (props.className ? ` ${props.className}` : "")}>
             <div className={"input-field" + (props.error ? " has-error" : "")}>

diff --git 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> = (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>}

diff --git 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
@@ -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
@@ -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> = (props: ToggleProps): React.ReactElement<void> => {
     return (
         <div className={"form-group custom-toggle" + (props.className ? ` ${props.className}` : "")}>
             <div className="toggle-btn">