Functional components

henck · Dec 30, 2023 · bdf8536 · bdf8536
1 parent be53d8f
commit bdf8536
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 68 deletions.
diff --git a/src/controls/DataTable/Cell.tsx b/src/controls/DataTable/Cell.tsx
@@ -6,7 +6,9 @@ import { css } from 'styled-components';
 import { Float } from '../Types';
 
 interface ICellProps {
+  /** @ignore */
   className?: string;
+  /** @ignore */
   children?: React.ReactNode;
   item: any;
   /** Column weight. Defaults to 1. */
@@ -23,17 +25,10 @@ interface ICellProps {
   onDoubleClick?: () => void;  
 }
 
-class CellBase extends React.Component<ICellProps, {}> {
-  public render() {
-    let p = this.props;
-    // Item function is only called when item is not null.
-    return (
-      <div className={p.className} onClick={p.onClick} onDoubleClick={p.onDoubleClick}>
-        {p.item !== null && (p.children as any)(p.item)}
-      </div>
-    )
-  }
-}
+const CellBase = (props: ICellProps) => 
+  <div className={props.className} onClick={props.onClick} onDoubleClick={props.onDoubleClick}>
+    {props.item !== null && (props.children as any)(props.item)}
+  </div>
 
 const Cell = styled(CellBase)`
   position: relative;
@@ -79,4 +74,4 @@ const Cell = styled(CellBase)`
   }
 `;
 
-export { Cell };
+export { Cell }
diff --git a/src/controls/DataTable/Counter.tsx b/src/controls/DataTable/Counter.tsx
@@ -3,6 +3,7 @@ import styled from '../../styles/Theme';
 import { Number } from '../../formatters/Number';
 
 interface ICounterProps {
+  /** @ignore */
   className?: string;
   /** Total number of records */
   count: number;
@@ -17,16 +18,10 @@ interface ICounterProps {
  * the total number of records, and the indices of the first to
  * last record currently being scrolled to.
  */
-class CounterBase extends React.Component<ICounterProps, {}> {
-  render() {
-    let p = this.props;
-    return (
-      <div className={p.className}>
-        <span>{p.first}</span>-<span><Number value={Math.min(p.last, p.count)} decimals={0}/></span> of <span><Number value={p.count} decimals={0}/></span> {p.count == 1 && 'record'}{p.count != 1 && 'records'}
-      </div>
-    );
-  }
-}
+const CounterBase = (props: ICounterProps) =>
+  <div className={props.className}>
+    <span>{props.first}</span>-<span><Number value={Math.min(props.last, props.count)} decimals={0}/></span> of <span><Number value={props.count} decimals={0}/></span> {props.count == 1 && 'record'}{props.count != 1 && 'records'}
+  </div>
 
 const Counter = styled(CounterBase)`
   position: absolute;
@@ -66,4 +61,4 @@ const Counter = styled(CounterBase)`
   }    
 `
 
-export { Counter };
+export { Counter }
diff --git a/src/controls/DataTable/DataColumn.tsx b/src/controls/DataTable/DataColumn.tsx
@@ -27,4 +27,4 @@ interface IDataColumnProps {
 class DataColumn extends React.Component<IDataColumnProps, {}> {
 }
 
-export { DataColumn };
+export { DataColumn }
diff --git a/src/controls/DataTable/Head.tsx b/src/controls/DataTable/Head.tsx
@@ -67,4 +67,4 @@ const Head = styled(HeadBase)`
 `;
 
 
-export { Head };
+export { Head }
diff --git a/src/controls/DataTable/Header.tsx b/src/controls/DataTable/Header.tsx
@@ -9,7 +9,9 @@ import { Float } from '../Types';
 import { Ripple } from '../Ripple/Ripple';
 
 interface IHeaderProps {
+  /** @ignore */
   className?: string;
+  /** @ignore */
   children?: React.ReactNode;
   /** Is column orderable? */
   orderable: boolean;
@@ -31,20 +33,17 @@ interface IHeaderProps {
   grid?: boolean;
 }
 
-class HeaderBase extends React.Component<IHeaderProps, {}> {
-  public render() {
-    let p = this.props;
-    let svg = <svg><use xlinkHref={"spritemap.svg#caret-down"}></use></svg>;
-    return (
-      <Ripple type={'div'} className={p.className} onClick={p.onClick}>
-        {p.align !== 'right' && svg}
-        <span>
-          {p.children}
-        </span>
-        {p.align === 'right' && svg}
-      </Ripple>
-    )
-  }
+const HeaderBase = (props: IHeaderProps) => {
+  const svg = <svg><use xlinkHref={"spritemap.svg#caret-down"}></use></svg>;
+  return (
+    <Ripple type={'div'} className={props.className} onClick={props.onClick}>
+      {props.align !== 'right' && svg}
+      <span>
+        {props.children}
+      </span>
+      {props.align === 'right' && svg}
+    </Ripple>
+  )
 }
 
 const Header = styled(HeaderBase)`
@@ -131,4 +130,4 @@ const Header = styled(HeaderBase)`
   `}
 `;
 
-export { Header };
+export { Header }
diff --git a/src/controls/DataTable/Row.tsx b/src/controls/DataTable/Row.tsx
@@ -4,25 +4,24 @@ import { css } from 'styled-components';
 import { Ripple } from '../Ripple';
 
 interface IRowProps {
+  /** @ignore */
   className?: string;
+  /** @ignore */
   children?: React.ReactNode;
   /** Row top offset in pixels. */
   top: number;
   /** Event is fired when row is clicked. */
   onClick?: () => void;
 }
 
-class RowBase extends React.Component<IRowProps> {
-  render() {
-    let p = this.props;
-    return (
-      // If row is clickable, wrap in a Ripple:
-      p.onClick ? 
-        <Ripple type='div' className={p.className} style={{top: p.top + 'px'}} onClick={p.onClick}>{p.children}</Ripple>
-      : 
-        <div className={p.className} style={{top: p.top + 'px'}} onClick={p.onClick}>{p.children}</div>
-    );
-  }
+const RowBase = (props: IRowProps) => {
+  return (
+    // If row is clickable, wrap in a Ripple:
+    props.onClick ? 
+      <Ripple type='div' className={props.className} style={{top: props.top + 'px'}} onClick={props.onClick}>{props.children}</Ripple>
+    : 
+      <div className={props.className} style={{top: props.top + 'px'}} onClick={props.onClick}>{props.children}</div>
+  );
 }
 
 const RowStyled = styled(RowBase)`
@@ -42,10 +41,6 @@ const RowStyled = styled(RowBase)`
   `}
 `
 
-class Row extends React.PureComponent<IRowProps> {
-  render() {
-    return <RowStyled {...this.props}/>
-  }
-}
+const Row = (props: IRowProps) => <RowStyled {...props}/>
 
-export { Row };
+export { Row, IRowProps }
diff --git a/src/controls/DataTable/Slider.tsx b/src/controls/DataTable/Slider.tsx
@@ -2,21 +2,17 @@ import * as React from 'react';
 import styled from '../../styles/Theme';
 
 interface ISliderProps {
+  /** @ignore */
   className?: string;
+  /** @ignore */
   children?: React.ReactNode;
   heightInItems: number;
 }
 
-class SliderBase extends React.Component<ISliderProps,{}> {
-  render() {
-    let p = this.props;
-    return (
-      <div className={p.className} style={{height: (p.heightInItems * ITEM_HEIGHT) + "px"}}>
-        {p.children}
-      </div>
-    );
-  }
-}
+const SliderBase = (props: ISliderProps) =>
+  <div className={props.className} style={{height: (props.heightInItems * ITEM_HEIGHT) + "px"}}>
+    {props.children}
+  </div>
 
 const ITEM_HEIGHT = 57;
 
@@ -27,4 +23,4 @@ const Slider = styled(SliderBase)`
   background-image: linear-gradient(to bottom, ${p => p.theme.background} 56px, ${p => p.theme.normalColor} 1px);
 `
 
-export { Slider };
+export { Slider }