@dhis2-ui/table 10.16.1 → 10.16.3-alpha.1

package/src/index.js

@@ -0,0 +1,32 @@
+export {
+    Table,
+    TableFoot,
+    TableBody,
+    TableHead,
+    TableCell,
+    TableCellHead,
+    TableRow,
+    TableRowHead,
+} from './table/index.js'
+
+export {
+    StackedTable,
+    StackedTableHead,
+    StackedTableBody,
+    StackedTableFoot,
+    StackedTableCell,
+    StackedTableCellHead,
+    StackedTableRow,
+    StackedTableRowHead,
+} from './stacked-table/index.js'
+
+export {
+    DataTable,
+    DataTableBody,
+    DataTableCell,
+    DataTableColumnHeader,
+    DataTableFoot,
+    DataTableHead,
+    DataTableRow,
+    DataTableToolbar,
+} from './data-table/index.js'

package/src/locales/ar/translations.json

@@ -0,0 +1,4 @@
+{
+    "Toggle filter": "",
+    "Sort items": "ترتيب العناصر"
+}

package/src/locales/cs/translations.json

@@ -0,0 +1,4 @@
+{
+    "Toggle filter": "Přepnout filtr",
+    "Sort items": "Třídit položky"
+}

package/src/locales/en/translations.json

@@ -0,0 +1,4 @@
+{
+    "Toggle filter": "Toggle filter",
+    "Sort items": "Sort items"
+}

package/src/locales/es/translations.json

@@ -0,0 +1,4 @@
+{
+    "Toggle filter": "Alternar filtro",
+    "Sort items": "Ordena elementos"
+}

package/src/locales/es_419/translations.json

@@ -0,0 +1,4 @@
+{
+    "Toggle filter": "Alternar filtro",
+    "Sort items": "Clasificar artículos"
+}

package/src/locales/fr/translations.json

@@ -0,0 +1,4 @@
+{
+    "Toggle filter": "Changer de filtre",
+    "Sort items": "Trier les éléments"
+}

package/src/locales/index.js

@@ -0,0 +1,44 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+// This code was generated by d2-i18n-generate.
+//
+// Changes to this file may cause incorrect behavior and will be lost if
+// the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+import i18n from '@dhis2/d2-i18n'
+
+import arTranslations from './ar/translations.json'
+import csTranslations from './cs/translations.json'
+import enTranslations from './en/translations.json'
+import esTranslations from './es/translations.json'
+import es_419Translations from './es_419/translations.json'
+import frTranslations from './fr/translations.json'
+import kmTranslations from './km/translations.json'
+import loTranslations from './lo/translations.json'
+import nbTranslations from './nb/translations.json'
+import nlTranslations from './nl/translations.json'
+import ptTranslations from './pt/translations.json'
+import ruTranslations from './ru/translations.json'
+import ukTranslations from './uk/translations.json'
+import uz_UZ_CyrlTranslations from './uz_UZ_Cyrl/translations.json'
+import zhTranslations from './zh/translations.json'
+
+const namespace = 'default'
+i18n.addResources('ar', namespace, arTranslations)
+i18n.addResources('cs', namespace, csTranslations)
+i18n.addResources('en', namespace, enTranslations)
+i18n.addResources('es', namespace, esTranslations)
+i18n.addResources('es_419', namespace, es_419Translations)
+i18n.addResources('fr', namespace, frTranslations)
+i18n.addResources('km', namespace, kmTranslations)
+i18n.addResources('lo', namespace, loTranslations)
+i18n.addResources('nb', namespace, nbTranslations)
+i18n.addResources('nl', namespace, nlTranslations)
+i18n.addResources('pt', namespace, ptTranslations)
+i18n.addResources('ru', namespace, ruTranslations)
+i18n.addResources('uk', namespace, ukTranslations)
+i18n.addResources('uz_UZ_Cyrl', namespace, uz_UZ_CyrlTranslations)
+i18n.addResources('zh', namespace, zhTranslations)
+
+export default i18n

package/src/locales/km/translations.json

@@ -0,0 +1,4 @@
+{
+    "Toggle filter": "",
+    "Sort items": "តម្រៀប"
+}

package/src/locales/lo/translations.json

@@ -0,0 +1,4 @@
+{
+    "Toggle filter": "ສະຫຼັບຕົວກອງ",
+    "Sort items": "ຈັດຮຽງລາຍການ"
+}

package/src/locales/nb/translations.json

@@ -0,0 +1,4 @@
+{
+    "Toggle filter": "Slå på filter",
+    "Sort items": "Sorter elementer"
+}

package/src/locales/nl/translations.json

@@ -0,0 +1,4 @@
+{
+    "Toggle filter": "Schakelfilter",
+    "Sort items": "Items sorteren"
+}

package/src/locales/pt/translations.json

@@ -0,0 +1,4 @@
+{
+    "Toggle filter": "Alternar filtro",
+    "Sort items": "Ordenar itens"
+}

package/src/locales/ru/translations.json

@@ -0,0 +1,4 @@
+{
+    "Toggle filter": "Переключить фильтр",
+    "Sort items": "Сортировать элементы"
+}

package/src/locales/uk/translations.json

@@ -0,0 +1,4 @@
+{
+    "Toggle filter": "Переключити фільтр",
+    "Sort items": "Сортувати об'єкти"
+}

package/src/locales/uz_UZ_Cyrl/translations.json

@@ -0,0 +1,4 @@
+{
+    "Toggle filter": "Фильтрни алмаштириш",
+    "Sort items": "Элементларни саралаш"
+}

package/src/locales/zh/translations.json

@@ -0,0 +1,4 @@
+{
+    "Toggle filter": "切换过滤器",
+    "Sort items": "排序项目"
+}

package/src/stacked-table/add-col-num-to-children.js

@@ -0,0 +1,16 @@
+import { Children, cloneElement } from 'react'
+
+export const addColNumToChildren = (children) => {
+    let curCol = 0
+
+    return Children.map(children, (child) => {
+        const column = child.props.column || curCol
+        const colSpan = child.props.colSpan
+            ? parseInt(child.props.colSpan, 10)
+            : 1
+
+        curCol += colSpan
+
+        return cloneElement(child, { column })
+    })
+}

package/src/stacked-table/content-with-title.js

@@ -0,0 +1,40 @@
+import { colors } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React, { Fragment } from 'react'
+
+export const ContentWithTitle = ({ title, children }) => (
+    <Fragment>
+        {title && <span className="title">{title}</span>}
+        <span className="content">{children}</span>
+
+        <style jsx>{`
+            .title {
+                display: block;
+                white-space: normal;
+                min-height: 24px;
+                font-size: 13px;
+                line-height: 16px;
+                padding: 8px 0 4px;
+                font-weight: normal;
+                color: ${colors.grey700};
+            }
+
+            .content {
+                display: block;
+                padding: 0 0 8px 0;
+                font-size: 14px;
+                line-height: 18px;
+            }
+
+            .content:first-child {
+                padding-top: 8px;
+                padding-bottom: 8px;
+            }
+        `}</style>
+    </Fragment>
+)
+
+ContentWithTitle.propTypes = {
+    children: PropTypes.node.isRequired,
+    title: PropTypes.string,
+}

package/src/stacked-table/extract-header-labels.js

@@ -0,0 +1,99 @@
+import React from 'react'
+import { StackedTableHead } from './stacked-table-head.js'
+
+const isChildTableHead = (child) => child.type === StackedTableHead
+const extractChildrenProp = (component) => component.props.children
+
+const extractRowsFromTableChildren = (children) =>
+    React.Children.toArray(children)
+        .filter(isChildTableHead)
+
+        // extract table head children (rows)
+        .map(extractChildrenProp)
+
+        // when there are multiple header rows,
+        // children will come as arrays
+        .reduce(
+            (flattened, row) =>
+                Array.isArray(row)
+                    ? [...flattened, ...row]
+                    : [...flattened, row],
+            []
+        )
+
+        // extract table row children (cells),
+        // will return an array with arrays of cells
+        .map(extractChildrenProp)
+
+const calculateColumnCount = (row) =>
+    Array.isArray(row)
+        ? row.reduce(
+              (total, col) =>
+                  // make sure to take col span into account
+                  col.props.colSpan
+                      ? total + parseInt(col.props.colSpan, 10)
+                      : total + 1,
+              0
+          )
+        : 1
+
+const mapCellsToLabels = (rowChildren) => {
+    let labels = []
+    // in case there's only one cell, the children are not an array
+    const row = Array.isArray(rowChildren) ? rowChildren : [rowChildren]
+
+    // Using a for loop here to be able to increment "i"
+    // when a cell has a colspan prop by the colspan number
+    for (let i = 0, count = row.length; i < count; ++i) {
+        const cell = row[i]
+        const colSpan = cell.props.colSpan
+            ? parseInt(cell.props.colSpan, 10)
+            : 1
+
+        const label = extractLabelFromCell(cell)
+
+        // Add a label entry for each column
+        labels = [...labels, ...Array(colSpan).fill(label)]
+    }
+
+    return labels
+}
+
+const extractLabelFromCell = (cell) =>
+    !cell.props.hideResponsiveLabel ? cell.props.children : ''
+
+const combineRowLables = (columnCount, rowCount, headerLabels) =>
+    // create array with length of column count
+    Array(columnCount)
+        .fill('')
+        .reduce((labels, _, colIndex) => {
+            // an array with all labels for a column
+            const colLabels =
+                // create array with length of rows
+                Array(rowCount)
+                    .fill('')
+                    // get label for current row & col
+                    .map((__, rowIndex) => headerLabels[rowIndex][colIndex])
+                    // remove empty ones
+                    .filter((val) => val)
+
+            return [...labels, colLabels.join(' / ')]
+        }, [])
+
+export const extractHeaderLabels = (children) => {
+    if (React.Children.count(children) === 0) {
+        return []
+    }
+
+    const rows = extractRowsFromTableChildren(children)
+
+    if (!rows.length) {
+        return []
+    }
+
+    const rowCount = rows.length
+    const columnCount = calculateColumnCount(rows[0])
+    const headerLabels = rows.map(mapCellsToLabels)
+
+    return combineRowLables(columnCount, rowCount, headerLabels)
+}

package/src/stacked-table/index.js

@@ -0,0 +1,8 @@
+export { StackedTable } from './stacked-table.js'
+export { StackedTableHead } from './stacked-table-head.js'
+export { StackedTableBody } from './stacked-table-body.js'
+export { StackedTableFoot } from './stacked-table-foot.js'
+export { StackedTableCell } from './stacked-table-cell.js'
+export { StackedTableCellHead } from './stacked-table-cell-head.js'
+export { StackedTableRow } from './stacked-table-row.js'
+export { StackedTableRowHead } from './stacked-table-row-head.js'

package/src/stacked-table/stacked-table-body.js

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const StackedTableBody = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-stackedtablebody',
+}) => (
+    <tbody className={className} data-tset={dataTest}>
+        {children}
+        <style jsx>{`
+            tbody {
+                display: block;
+            }
+        `}</style>
+    </tbody>
+)
+
+StackedTableBody.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+}

package/src/stacked-table/stacked-table-cell-head.js

@@ -0,0 +1,39 @@
+import { colors } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const StackedTableCellHead = ({
+    children = '',
+    className,
+    colSpan,
+    dataTest = 'dhis2-uicore-stackedtablecellhead',
+    rowSpan,
+}) => (
+    <th
+        colSpan={colSpan}
+        rowSpan={rowSpan}
+        className={className}
+        data-test={dataTest}
+    >
+        {children && <div>{children}</div>}
+
+        <style jsx>{`
+            th {
+                border-bottom: 1px solid ${colors.grey300};
+                padding: 0 12px;
+            }
+
+            div {
+                min-height: 36px;
+            }
+        `}</style>
+    </th>
+)
+
+StackedTableCellHead.propTypes = {
+    children: PropTypes.string,
+    className: PropTypes.string,
+    colSpan: PropTypes.string,
+    dataTest: PropTypes.string,
+    rowSpan: PropTypes.string,
+}

package/src/stacked-table/stacked-table-cell.js

@@ -0,0 +1,60 @@
+import { colors } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { ContentWithTitle } from './content-with-title.js'
+
+const defaultHeaderLabels = []
+export const StackedTableCell = ({
+    children,
+    className,
+    colSpan,
+    column,
+    dataTest = 'dhis2-uicore-stackedtablecell',
+    headerLabels = defaultHeaderLabels,
+    hideTitle,
+    rowSpan,
+    title,
+}) => {
+    const cellTitle = title || headerLabels[column] || ''
+    const realTitle = hideTitle ? '' : cellTitle
+
+    return (
+        <td
+            colSpan={colSpan}
+            rowSpan={rowSpan}
+            className={className}
+            data-test={dataTest}
+        >
+            <ContentWithTitle title={realTitle}>{children}</ContentWithTitle>
+
+            <style jsx>{`
+                td {
+                    border-bottom: 1px solid ${colors.grey300};
+                    padding: 0 12px;
+                    font-size: 14px;
+                    width: 100%;
+                    display: block;
+                }
+                td:dir(rtl) {
+                    text-align: right;
+                }
+
+                td:last-child {
+                    border-bottom: 0;
+                }
+            `}</style>
+        </td>
+    )
+}
+
+StackedTableCell.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    colSpan: PropTypes.string,
+    column: PropTypes.number,
+    dataTest: PropTypes.string,
+    headerLabels: PropTypes.arrayOf(PropTypes.string),
+    hideTitle: PropTypes.bool,
+    rowSpan: PropTypes.string,
+    title: PropTypes.string,
+}

package/src/stacked-table/stacked-table-foot.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const StackedTableFoot = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-stackedtablefoot',
+}) => (
+    <tfoot className={className} data-test={dataTest}>
+        {children}
+        <style jsx>{`
+            tfoot {
+                display: block;
+                margin-top: 32px;
+            }
+        `}</style>
+    </tfoot>
+)
+
+StackedTableFoot.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+}

package/src/stacked-table/stacked-table-head.js

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const StackedTableHead = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-stackedtablehead',
+}) => (
+    <thead className={className} data-test={dataTest}>
+        {children}
+        <style jsx>{`
+            thead {
+                display: none;
+            }
+        `}</style>
+    </thead>
+)
+
+StackedTableHead.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+}

package/src/stacked-table/stacked-table-row-head.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { StackedTableRow } from './stacked-table-row.js'
+
+export const StackedTableRowHead = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-stackedtablerowhead',
+}) => (
+    <StackedTableRow className={className} dataTest={dataTest}>
+        {children}
+    </StackedTableRow>
+)
+
+StackedTableRowHead.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+}

package/src/stacked-table/stacked-table-row.js

@@ -0,0 +1,50 @@
+import { colors } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { addColNumToChildren } from './add-col-num-to-children.js'
+import { supplyHeaderLabelsToChildren } from './supply-header-labels-to-children.js'
+import { Consumer } from './table-context.js'
+
+export const StackedTableRow = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-stackedtablerow',
+}) => (
+    <tr className={className} data-test={dataTest}>
+        <Consumer>
+            {({ headerLabels }) =>
+                supplyHeaderLabelsToChildren(
+                    headerLabels,
+                    addColNumToChildren(children)
+                )
+            }
+        </Consumer>
+
+        <style jsx>{`
+            tr {
+                min-height: 45px;
+                display: block;
+                border: 1px solid ${colors.grey300};
+            }
+
+            tr:nth-child(even) {
+                background: ${colors.white};
+            }
+
+            :global(thead) > tr,
+            :global(tbody) > tr {
+                min-height: 36px;
+            }
+
+            tr + tr {
+                margin-top: 32px;
+            }
+        `}</style>
+    </tr>
+)
+
+StackedTableRow.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+}

package/src/stacked-table/stacked-table.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { extractHeaderLabels } from './extract-header-labels.js'
+import { Provider } from './table-context.js'
+import { Table } from './table.js'
+
+export const StackedTable = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-stackedtable',
+    headerLabels,
+}) => {
+    const contextHeaderLabels = extractHeaderLabels(children)
+    const context = {
+        headerLabels: headerLabels || contextHeaderLabels,
+    }
+
+    return (
+        <Provider value={context}>
+            <Table className={className} dataTest={dataTest}>
+                {children}
+            </Table>
+        </Provider>
+    )
+}
+
+StackedTable.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    /** Labels for columns. Use an empty string for a column without a header. */
+    headerLabels: PropTypes.arrayOf(PropTypes.string),
+}