diff --git a/package-lock.json b/package-lock.json
index e276e8b..7f2143e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@code4ro/taskforce-fe-components",
- "version": "2.0.0",
+ "version": "2.1.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index e1605b2..287e18e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@code4ro/taskforce-fe-components",
- "version": "2.0.0",
+ "version": "2.1.0",
"private": false,
"sideEffects": false,
"dependencies": {
diff --git a/src/components/label-value-list/label-value-list.js b/src/components/label-value-list/label-value-list.js
new file mode 100644
index 0000000..1b035bb
--- /dev/null
+++ b/src/components/label-value-list/label-value-list.js
@@ -0,0 +1,47 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./label-value-list.scss";
+
+function renderValue(value) {
+ if (typeof value === "boolean") {
+ return value ? "Da" : "Nu";
+ }
+
+ if (Array.isArray(value)) {
+ return value.join(", ");
+ }
+
+ return value;
+}
+
+export const LabelValueList = ({ data }) => {
+ let rows = data;
+
+ if (!Array.isArray(data)) {
+ rows = Object.values(data);
+ }
+
+ return (
+
+
+
+
+ { rows.map((row, index) => (
+
+ {row.label} |
+ {renderValue(row.value)} |
+
+ ))}
+
+
+
+
+ );
+};
+
+LabelValueList.propTypes = {
+ data: PropTypes.oneOfType([
+ PropTypes.object,
+ PropTypes.array
+ ]).isRequired
+};
diff --git a/src/components/label-value-list/label-value-list.scss b/src/components/label-value-list/label-value-list.scss
new file mode 100644
index 0000000..3451c36
--- /dev/null
+++ b/src/components/label-value-list/label-value-list.scss
@@ -0,0 +1,7 @@
+.label-value-list {
+ padding: 2em 0;
+
+ .table th, .table td {
+ border: none;
+ }
+}
diff --git a/src/components/label-value-list/label-value-list.stories.js b/src/components/label-value-list/label-value-list.stories.js
new file mode 100644
index 0000000..18d2798
--- /dev/null
+++ b/src/components/label-value-list/label-value-list.stories.js
@@ -0,0 +1,47 @@
+import React from "react";
+import { LabelValueList } from "./label-value-list";
+
+export default { title: "Label-value List" };
+
+const objectData = {
+ age: {
+ label: "Vârsta",
+ value: 23
+ },
+ gender: {
+ label: "Sexul",
+ value: "feminin"
+ },
+ name: { label: "Nume", value: "name" },
+ smoking: { label: "Fumator/fumatoare", value: true },
+ comorbidities: {
+ label: "Alte afectiuni",
+ value: ["diabet", "hipertensiune"]
+ },
+ inIsolation: { label: "In izolare", value: true },
+ othersInHousehold: { label: "Alte persoane in casă", value: true }
+};
+
+const arrayData = [
+ {
+ label: "Vârsta",
+ value: 23
+ },
+ {
+ label: "Alte afectiuni",
+ value: ["diabet", "hipertensiune"]
+ },
+ {
+ label: "Fumator/fumatoare",
+ value: false
+ }
+]
+
+export const usingObject = () => (
+
+);
+
+export const usingArray = () => (
+
+);
+
diff --git a/src/components/personal-data-table/personal-data-table.js b/src/components/personal-data-table/personal-data-table.js
index ff5785c..f58df4a 100644
--- a/src/components/personal-data-table/personal-data-table.js
+++ b/src/components/personal-data-table/personal-data-table.js
@@ -1,41 +1,19 @@
-import React from "react";
+import React, { useEffect } from "react";
import PropTypes from "prop-types";
-import "./personal-data-table.scss";
+import { LabelValueList } from "../label-value-list/label-value-list";
export const PersonalDataTable = ({ personalData }) => {
+ const dataClone = Object.assign(personalData);
+ delete dataClone.name;
+
+ useEffect(
+ function warnOnMount() {
+ console.warn("PersonalDataTable is deprecated. Please use the more generic LabelValueList component.")
+ }, []
+ )
+
return (
-
-
-
-
-
- {personalData.age.label} |
- {personalData.age.value} |
-
-
- {personalData.gender.label} |
- {personalData.gender.value} |
-
-
- {personalData.smoking.label} |
- {personalData.smoking.value ? "Da" : "Nu"} |
-
-
- {personalData.comorbidities.label} |
- {personalData.comorbidities.value.join(", ")} |
-
-
- {personalData.inIsolation.label} |
- {personalData.inIsolation.value ? "Da" : "Nu"} |
-
-
- {personalData.othersInHousehold.label} |
- {personalData.othersInHousehold ? "Da" : "Nu"} |
-
-
-
-
-
+
);
};
diff --git a/src/components/personal-data-table/personal-data-table.scss b/src/components/personal-data-table/personal-data-table.scss
deleted file mode 100644
index e6b5e51..0000000
--- a/src/components/personal-data-table/personal-data-table.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.personal-data {
- padding: 2em 0;
-}
-
-.personal-data-table th,
-.personal-data-table td {
- border: none;
-}
diff --git a/src/index.js b/src/index.js
index 84ed0f4..5d480d2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -61,3 +61,4 @@ export { DataTableRow } from "./components/data-table-row/data-table-row";
export { FilterModal } from "./components/filter-modal/filter-modal";
export { DropdownSearch } from "./components/dropdown-search/dropdown-search";
export { HeaderFilter } from "./components/header-filter/header-filter";
+export { LabelValueList } from "./components/label-value-list/label-value-list";