- client: fixed leases table on mobile

Closes #688

client/src/components/Settings/Dhcp/Leases.js

@@ -1,32 +1,49 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactTable from 'react-table';
 import { Trans, withNamespaces } from 'react-i18next';
 
-const columns = [{
+class Leases extends Component {
-    Header: 'MAC',
+    cellWrap = ({ value }) => (
-    accessor: 'mac',
+        <div className="logs__row logs__row--overflow">
-}, {
+            <span className="logs__text" title={value}>
-    Header: 'IP',
+                {value}
-    accessor: 'ip',
+            </span>
-}, {
+        </div>
-    Header: <Trans>dhcp_table_hostname</Trans>,
+    );
-    accessor: 'hostname',
-}, {
-    Header: <Trans>dhcp_table_expires</Trans>,
-    accessor: 'expires',
-}];
 
-const Leases = props => (
+    render() {
-    <ReactTable
+        const { leases, t } = this.props;
-        data={props.leases || []}
+        return (
-        columns={columns}
+            <ReactTable
-        showPagination={false}
+                data={leases || []}
-        noDataText={ props.t('dhcp_leases_not_found') }
+                columns={[
-        minRows={6}
+                    {
-        className="-striped -highlight card-table-overflow"
+                        Header: 'MAC',
-    />
+                        accessor: 'mac',
-);
+                        Cell: this.cellWrap,
+                    }, {
+                        Header: 'IP',
+                        accessor: 'ip',
+                        Cell: this.cellWrap,
+                    }, {
+                        Header: <Trans>dhcp_table_hostname</Trans>,
+                        accessor: 'hostname',
+                        Cell: this.cellWrap,
+                    }, {
+                        Header: <Trans>dhcp_table_expires</Trans>,
+                        accessor: 'expires',
+                        Cell: this.cellWrap,
+                    },
+                ]}
+                showPagination={false}
+                noDataText={t('dhcp_leases_not_found')}
+                minRows={6}
+                className="-striped -highlight card-table-overflow"
+            />
+        );
+    }
+}
 
 Leases.propTypes = {
     leases: PropTypes.array,