Merge pull request #465 from sebgroup/develop

Release 27/Aug/2020

develop/__utils/makeData.tsx

@@ -1,46 +1,49 @@
 import React from "react";
 import { loremIpsum } from "lorem-ipsum";
 import { randomId } from "@sebgroup/frontend-tools/dist/randomId";
+import { ActionLinkItem, TableRow } from "../../src/Table/Table";
 
 function range(len: number): Array<number> {
-  const arr: Array<number> = [];
-  for (let i = 0; i < len; i++) {
-    arr.push(i);
-  }
-  return arr;
-};
+    const arr: Array<number> = [];
+    for (let i = 0; i < len; i++) {
+        arr.push(i);
+    }
+    return arr;
+}
 
 function newPerson(): object {
-  const statusChance: number = Math.random();
-  return {
-    id: parseInt(randomId("").substr(8, 4), 10),
-    firstName: loremIpsum({ units: "words", count: 1 }),
-    lastName: loremIpsum({ units: "words", count: 1 }),
-    age: Math.floor(Math.random() * 30),
-    visits: Math.floor(Math.random() * 100),
-    progress: Math.floor(Math.random() * 100),
-    status:
-      statusChance > 0.66
-        ? "relationship"
-        : statusChance > 0.33
-          ? "complicated"
-          : "single",
-  };
-};
+    const statusChance: number = Math.random();
+    return {
+        id: parseInt(randomId("").substr(8, 4), 10),
+        firstName: loremIpsum({ units: "words", count: 1 }),
+        lastName: loremIpsum({ units: "words", count: 1 }),
+        age: Math.floor(Math.random() * 30),
+        visits: Math.floor(Math.random() * 100),
+        progress: Math.floor(Math.random() * 100),
+        status: statusChance > 0.66 ? "relationship" : statusChance > 0.33 ? "complicated" : "single",
+    };
+}
+
+const actionLinks: Array<ActionLinkItem> = [
+    {
+        label: "Edit",
+        onClick: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, selectedRow: TableRow) => {},
+    },
+];
 
-export default function makeData<T>(lens: Array<number>): T {
-  const makeDataLevel: Function = (depth: number = 0): object | Function => {
-    const len: number = lens[depth]
-    return range(len).map((d: number) => {
-      return {
-        ...newPerson(),
-        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
-        rowContentDetail: <p className="details">
-          {loremIpsum({ units: "sentences", count: 2 })}
-        </p>
-      }
-    })
-  }
+export default function makeData<T>(lens: Array<number>, useRowActionColumn?: boolean): T {
+    const makeDataLevel: Function = (depth: number = 0): object | Function => {
+        const len: number = lens[depth];
+        return range(len).map((d: number) => {
+            return {
+                ...newPerson(),
+                subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+                actionLinks: useRowActionColumn ? (d % 2 === 0 ? actionLinks : null) : null,
+                actionButtonState: useRowActionColumn ? (d % 2 === 0 ? "disabled" : null) : null,
+                rowContentDetail: <p className="details">{loremIpsum({ units: "sentences", count: 2 })}</p>,
+            };
+        });
+    };
 
-  return makeDataLevel();
+    return makeDataLevel();
 }

develop/components/pages/ModalPage.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Button } from "../../../src/Button/Button";
 import { Modal, ModalProps } from "../../../src/Modal/Modal";
 import Highlight from "react-highlight";
+import { RadioGroup, RadioListModel } from "../../../src/RadioGroup/RadioGroup";
 const docMD: string = require("../../../src/Modal/readme.md");
 
 const initialState: ModalProps = {
@@ -16,6 +17,7 @@ const initialState: ModalProps = {
 
 const ModalPage: React.FC = React.memo(() => {
     const [modalProps, setModalProps] = React.useState<ModalProps>({ ...initialState });
+    const [radioListSelected, setRadioListSelected] = React.useState<string>("second");
 
     const openModal = React.useCallback(
         (e: React.MouseEvent<HTMLButtonElement>, props: Partial<ModalProps> = {}) => {
@@ -69,7 +71,15 @@ const ModalPage: React.FC = React.memo(() => {
                             body={
                                 <div>
                                     <p>This is the body</p>
-                                    {modalProps.size && modalProps.position && <img src={"https://unsplash.it/900"} width="100%" />}
+                                    <input className="form-control" type="text" placeholder="focus is kept within" />
+                                    <RadioGroup
+                                        name="radioGroupName"
+                                        list={radioList}
+                                        value={radioListSelected}
+                                        condensed
+                                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setRadioListSelected(e.target.value)}
+                                    />
+                                    {modalProps.size && modalProps.position && <img src={"http://via.placeholder.com/900x300"} width="100%" />}
                                 </div>
                             }
                             footer={<Button label="Close Modal" onClick={onDismiss} />}
@@ -83,4 +93,10 @@ const ModalPage: React.FC = React.memo(() => {
     );
 });
 
+const radioList: Array<RadioListModel> = [
+    { value: "first", label: "Radio 1" },
+    { value: "second", label: "Radio 2" },
+    { value: "third", label: "Radio 3" },
+];
+
 export default ModalPage;

develop/components/pages/TablePage.tsx

@@ -165,10 +165,7 @@ const TablePage: React.FunctionComponent = () => {
         []
     );
 
-    const smallData: Array<DataItem<TableDataProps>> = React.useMemo(
-        () => makeData<Array<DataItem<TableDataProps>>>([5, 5]),
-        []
-    );
+    const smallData: Array<DataItem<TableDataProps>> = React.useMemo(() => makeData<Array<DataItem<TableDataProps>>>([5, 5], true), []);
 
     const smallEditableData: Array<DataItem<TableDataProps>> = React.useMemo(
         () => makeData<Array<DataItem<TableDataProps>>>([5, 5]),