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";