How do Center Semantic UI Tab Menus React? - reactjs

https://react.semantic-ui.com/modules/tab#types-basic
I am trying to center the menu tabs to the center (left and right) but I can't figure it out the tab documentation.
import React from 'react'
import { Tab } from 'semantic-ui-react'
const panes = [
{ menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
{ menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
{ menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
]
const TabExampleBasic = () => <Tab panes={panes} />
export default TabExampleBasic

You can do something like this:
<Tab
menu={{
attached: true,
tabular: true,
style: {
display: "flex",
justifyContent: "center"
}
}}
panes={panes}
/>

You have to do it like this :
Tab menu={{ attached: true, tabular: 'right' }} panes={panes}
You can set tabular value to true, left or right.
You can find this on https://react.semantic-ui.com/modules/tab also.

Related

hide pagination and toolbar when printing MUIDataTable mui-datatables

when i click print i want to print only the table data except the toolbar and pagination, i don't need them to appear. i did not find how to fix this in the documentation of MUIDataTable
i use MUIDataTable
import MUIDataTable from 'mui-datatables';
...
const options = {
filter: true,
selectableRows: false,
filterType: 'dropdown',
responsive: 'stacked',
download: exportButton,
print: exportButton,
rowsPerPage: 10,
downloadOptions: { filename: 'roles.csv' },
customToolbar: () => (
<CustomToolbar
csvData={allRoles}
/* csvData={staffs} */
url="/app/data/administration/role-actions"
tooltip="add new role"
fileName="Roles"
excludeAttributes={excludeAttributes}
hasAddRole={thelogedUser.userRoles[0].actionsNames.admin_roles_management_create}
hasExportRole={thelogedUser.userRoles[0].actionsNames.admin_roles_management_export}
/>
),
};
...
return (
<div>
<MUIDataTable
title=""
data={allRoles && allRoles}
columns={columns}
options={options}
/>
</div>
);
i resolved my issue using this css code
const getMuiTheme = () => createMuiTheme({
overrides: {
MUIDataTableToolbar: {
root: {
'#media print': {
display: 'none'
}
},
},
MUIDataTablePagination: {
root: {
'#media print': {
display: 'none'
}
},
}
}
});

Hyperlink on bars in ChartJS in react

I am using chartjs-2 in react functional component (please find the code here: https://codesandbox.io/s/elastic-brook-okkce?file=/src/Dashboard.jsx)
I have rendered 4 bars here and I want to have a specific handler function defined for onClick event on each bar.
Like there are 4 types in the bar labels and on clicking on each bar I want to display something specific to the type of the bar clicked.
How to implement this?
function Dashboard(props) {
const classes = useStyles();
const [data, setdata] = React.useState({
labels: ["type1", "type2", "type3", "type4"],
datasets: [
{
label: "text that comes on hover",
backgroundColor: [
//................................................colors of the bars............
"#3e95cd",
"#8e5ea2",
"#3cba9f",
"#e8c3b9",
"#c45850"
],
barThickness: 80,
data: [50, 100, 75, 20, 0] //......................values for each bar...........
}
]
});
const getChartData = canvas => {
return data;
};
return (
<React.Fragment>
<div
className={classes.chart}
style={{ position: "relative", width: 900, height: 450 }}
>
<Bar
options={{
responsive: true,
maintainAspectRatio: true,
legend: { display: false },
title: {
display: true,
text: "Title for the graph"
}
}}
data={getChartData}
/>
</div>
</React.Fragment>
);
}
export default Dashboard;
You can use onElementsClick. Please check the below code:
<Bar
options={{
responsive: true,
maintainAspectRatio: true,
legend: {display: false},
title: {
display: true,
text: "Title for the graph"
}
}}
onElementsClick={(e) => {
console.log(e, 'e')
}}
data={getChartData}
/>

Nested Routes does not re render ParentComponent after Update And Delete Function?

I am having with Re-render with parent functional component. My update and delete functions are handled in Redux after success execution does not re-render parent functional component
***This my Main component where i am getting clients from Api USing Redux it is working working
import React, { Fragment,useEffect } from 'react'
import {connect} from 'react-redux';
import {getClients,deleteClient} from '../Redux//actions/clientActions';
import {Spin,Table,Tag,Button} from 'antd';
import { Link } from 'react-router-dom';
import Moment from 'react-moment'
const Clients =({getClients,deleteClient,client:{clients,loading},history})=> {
useEffect(()=>{
getClients()
}
,[getClients]);
const columns = [
{
title:'Company',
dataIndex: 'companyName',
key: 'companyName',
render: text => <a>{text}</a>,
},
{
title: 'Type',
dataIndex: 'type',
key: 'type',
},
{
title: 'Price Type',
dataIndex: 'typePrice',
key: 'typePrice',
},
{
title: 'Partita Iva',
dataIndex: 'partitaIva',
key: 'partitaIva',
},
{
title: 'Codice Fiscale',
dataIndex: 'codiceFiscale',
key: 'codiceFiscale',
},
{
title: 'Name',
dataIndex: 'name',
key: '1',
},
{
title: 'SurName',
dataIndex: 'surname',
key: '2',
},
{
title: 'Address',
dataIndex: 'address',
key: '3',
},
{
title: 'City',
dataIndex: 'city',
key: '3',
},
{
title: 'Zip',
dataIndex: 'zip',
key: '4',
},
{
title: 'Country',
dataIndex: 'country',
key: '5',
},
{
title: 'Phone',
dataIndex: 'phone',
key: '6',
},
{
title: 'Email',
dataIndex: 'email',
key: '7',
},
{
title: 'Domains',
key: 'domains',
dataIndex: 'domains',
render: domains => (
<span>
{domains&&domains.map(domain => {
let color = domain.length > 5 ? 'geekblue' : 'green';
return (
<Tag color={color} key={domain}>
{domain.toUpperCase()}
</Tag>
);
})}
</span>
),
},
{
title: 'Notes',
dataIndex: 'notes',
key: 'notes',
},
{
title: 'Creator Id',
dataIndex: 'createdByID',
key: 'createdByID',
},
{
title: 'Date',
dataIndex: 'date',
key: 'date',
render:(text)=>(
<>
<Moment format='YYYY/MM/DD'>{text}</Moment>
</>
)
},
{
title: '',
render:(record)=>(
<>
<Button style={{
marginBottom:"5px"
}} type="primary" ghost>
<Link to={`/clients/update/${record._id}`}>Update</Link>
</Button>
<Button type="primary" style={{
marginBottom:"5px"
}} ghost>
<Link to={`/clients/${record._id}`}>Detail</Link>
</Button>
</>
)
},
];
return loading && clients.length === 0 ? (
<div style={{
position:"absolute",
left:"50%",
top:"50%",
traverse: 'translate(-50%, -50%)'
}}>
<Spin/>
</div>
):
(
<Fragment>
<Table pagination={{ defaultPageSize: 4, pageSizeOptions: ['10', '20', '30']}} columns={columns} dataSource={clients} scroll={{ x: 1300 }}/>
</Fragment>
)
}
const mapStateToProps = state =>{
return {
client:state.client
}
}
export default connect(mapStateToProps,{getClients,deleteClient})(Clients);
***This is my Detail Page and i am Implementing Delete Function function executes perfect and goes to main client but Clients Does not Update on Main Page After Deletion
import React, { Fragment,useEffect,useState } from 'react'
import {connect} from 'react-redux';
import {withRouter,useParams,useHistory,Redirect} from 'react-router-dom';
import {getClient,deleteClient} from '../Redux/actions/clientActions'
import { Card,Spin,Button,Modal } from 'antd';
const gridStyle = {
width: '33%',
textAlign: 'center',
};
const ClientDetail =({client:{client},getClient,deleteClient,loading,history})=> {
let [visible,setVisible] = useState(false)
let {id} = useParams()
useEffect(()=>{
getClient(id)
},[getClient,id])
const handleDelete=()=>{
deleteClient(id)
setVisible(true)
}
const handleOk = () => {
setVisible(false)
history.push('/clients')
};
return loading && client === null? (
<div style={{
position:"absolute",
left:"50%",
top:"50%",
traverse: 'translate(-50%, -50%)'
}}>
<Spin/>
</div>
): (
<Fragment>
<Modal
title="Confirmation Dailog"
visible={visible}
// onOk={handleOk}
footer={[
<Button key="back" onClick={handleOk}>
OK
</Button>,
]}
>
<p>Client Has been Deleted Successfully...</p>
</Modal>
<Card style={{textAlign:"center",
marginTop:"2rem"
}} title="Client Detail">
<Card.Grid style={gridStyle}>CompanyName: {client&&client.companyName}</Card.Grid>
<Card.Grid style={gridStyle}>Type:{client&&client.type}</Card.Grid>
<Card.Grid style={gridStyle}>PriceType:{client&&client.typePrice}</Card.Grid>
<Card.Grid style={gridStyle}>PartitaIva:{client&&client.partitaIva}</Card.Grid>
<Card.Grid style={gridStyle}>CodiceFiscale:{client&&client.codiceFiscale}</Card.Grid>
<Card.Grid style={gridStyle}>Name:{client&&client.name}</Card.Grid>
<Card.Grid style={gridStyle}>SurName:{client&&client.surname}</Card.Grid>
<Card.Grid style={gridStyle}>Address:{client&&client.address}</Card.Grid>
<Card.Grid style={gridStyle}>City:{client&&client.city}</Card.Grid>
<Card.Grid style={gridStyle}>Zip:{client&&client.zip}</Card.Grid>
<Card.Grid style={gridStyle}>Country:{client&&client.country}</Card.Grid>
<Card.Grid style={gridStyle}>Phone:{client&&client.phone}</Card.Grid>
<Card.Grid style={gridStyle}>Email:{client&&client.email}</Card.Grid>
<Card.Grid style={gridStyle}>Domains1:{client&&client.domains[0]}</Card.Grid>
<Card.Grid style={gridStyle}>Domains2:{client&&client.domains[1]}</Card.Grid>
<Card.Grid style={gridStyle}>Domains3:{client&&client.domains[2]}</Card.Grid>
<Card.Grid style={gridStyle}>Notes:{client&&client.notes}</Card.Grid>
<Card.Grid style={gridStyle}>CreatorID:{client&&client.createdByID}</Card.Grid>
<Button type="danger" onClick={handleDelete} style={{ width: '40%',marginTop:"1rem",marginBottom:"1rem"}}>Delete</Button>
</Card>
</Fragment>
)
}
const mapStateToProps=state=>({
client:state.client
})
export default connect(mapStateToProps,{getClient,deleteClient}) (withRouter(ClientDetail));
Here's an example with button and OnClick below that you can use for your work logic. I hope it helps you.
...
const ExampleComponent = props => {
useEffect(()=>{
getClients()
}
,[getClients]);
const handleDelete = () => {
const {asyncDelete, id, history} = props;
asyncDelete({id, onSuccess: () => {
getClients();
// or history.push('/');
}
});
}
return(
<>
...
<button onClick={handleDelete}
...
</>
)
}
const mapDispatchToProps = dispatch => ({
asyncDelete: ({ id, onSuccess }) => dispatch(asyncDelete({ id, onSuccess }))
});
...
Assuming the reudx-thunk and axios in actions.js file
...
export const asyncDelete = ({ id, onSuccess }) => {
return dispatch => {
...
axios
.delete(`/user/${id}`)
.then(response => {
...
onSuccess();
})
.catch(error => console.log(error));
};
};
...
I will pass a onSuccess() method to the async action, when the deletion is done and if the deletion is done correctly, that method will also be executed and the component will be updated again. You can apply this logic to the Nested Routes as well, though there are different ways one of them can be the same logic.

How show menu item in Material Table

I tried the material table and wanted to add a menu item in the action, so that it doesn't display too many actions like edit, delete. I have a problem displaying the menu item.
Example code:
<MaterialTable
columns={[
{ title: t('customer'), field: 'name' },
{ title: t('email'), field: 'email' },
{ title: t('contactNumber'), field: 'contactNumber' },
{ title: t('status'), field: 'status' },
]}
data={list}
options={{
headerStyle: {
backgroundColor: '#00b7b2',
},
toolbar: false,
}}
actions={[
{
icon: 'menu',
tooltip: 'Menu',
onClick: (event, rowData) => {
this.openMenu(event)
},
},
]}
components={{
Action: props => (
<div>
<IconButton
onClick={(event) => props.action.onClick(event, props.data)}
>
<Icon>menu</Icon>
</IconButton>
<Menu
anchorEl={this.anchorEl}
open={Boolean(this.anchorEl)}
onClick={event => event.stopPropagation()}
onSelect={event => event.stopPropagation()}
onClose={this.closeMenu}
>
<MenuItem>
Action
</MenuItem>
</Menu>
</div>
),
}}
/>
Is there is a solution for me?
I successfully accomplished this. Basically you are on the right track.
Have an action as you said above:
<MaterialTable
...
actions={[
{
icon: MenuIcon,
tooltip: 'Actions',
isFreeAction: false,
onClick: (event, row) => {
this.openMenu(event, row);
}
}
]}
...
/>
but then have a separate Menu item in render:
<Menu
id="simple-menu"
keepMounted
anchorEl={this.state.menuAnchor}
open={this.state.menuOpen}
onClose={this.handleMenuClose}
>
<MenuItem onClick={this.doSomething}>do something</MenuItem>
<MenuItem onClick={this.doSomethingElse}>do something else</MenuItem>
</Menu>
</center>
Trick is openMenu() should first get the current target:
openMenu(event, row) {
let anchorElement = event.currentTarget;
this.setState({currentRow: row}, () => {
this.setState({menuAnchor: anchorElement});
this.setState({menuOpen: true});
});
}
doSomething() {
row = this.state.currentRow;
// do something
}

how to copy table rows and columns to clipboard in react using react-copy-to-clipboard?

How can I copy rows and table content in react ? im using antd library however when i copy the table rows and contents and paste using react-copy -to clipboard currently table data is being store in json this.state.datasource but when i copy i just get [object Object],[object Object] instead of actuall row and column data , can someone pls help thanks!
/*eslint-disable */
import React, { Component } from 'react'
import { Table, Input, Button, Popconfirm, Form } from 'antd'
import { Helmet } from 'react-helmet'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { Menu, Icon } from 'antd';
import {CopyToClipboard} from 'react-copy-to-clipboard';
import styles from './style.module.scss'
const EditableContext = React.createContext();
const EditableRow = ({ form, index, ...props }) => (
<EditableContext.Provider value={form}>
<tr {...props} />
</EditableContext.Provider>
);
const { SubMenu } = Menu;
const EditableFormRow = Form.create()(EditableRow);
class EditableCell extends React.Component {
state = {
editing: false,
copied: false,
};
onCopy() {
console.log("copied");
alert('copied to clipboard');
}
renderCell = form => {
this.form = form;
const { children, dataIndex, record, title } = this.props;
const { editing } = this.state;
return editing ? (
<Form.Item style={{ margin: 0 }}>
{form.getFieldDecorator(dataIndex, {
rules: [
{
required: true,
message: `${title} is required.`,
},
],
);
};
render() {
const {
editable,
dataIndex,
title,
record,
index,
handleSave,
children,
...restProps
} = this.props;
return (
<td {...restProps}>
{editable ? (
<EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
) : (
children
)}
</td>
);
}
}
class Campaign extends React.Component {
constructor(props) {
super(props);
this.columns = [
{
title: 'id',
dataIndex: 'id',
},
{
title: 'Campaign Name',
dataIndex: 'name',
editable: true,
},
{
title: 'Banners',
dataIndex: 'address',
editable: true,
},
{
title: 'Video',
dataIndex: 'Video',
editable: true,
},
{
title: 'Target',
dataIndex: 'Target',
editable: true,
},
{
title: 'Exchanges',
dataIndex: 'Exchanges',
editable: true,
},
{
title: 'Status',
dataIndex: 'Status',
editable: true,
},
{
title: 'Delete',
dataIndex: 'Banners',
render: (text, record) =>
this.state.dataSource.length >= 1 ? (
<Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(record.key)}>
<a style={{color:'blue'}} href="javascript:;">Delete</a>
</Popconfirm>
) : null,
},
];
this.state = { //table data i want to copy
dataSource: [
{
key: '0',
name: 'Kates Campaign',
id: '32',
Video: 'London, Park Lane no. 0',
Target: 'bacon',
Exchanges: 'Eggs',
},
{
key: '1',
name: 'Fyber Tests',
id: '32',
address: 'Sample Banner Ad (ID 6 ECPM 20.0) ',
},
],
count: 2,
};
}
render() {
const { dataSource } = this.state;
const components = {
body: {
row: EditableFormRow,
cell: EditableCell,
},
};
const columns = this.columns.map(col => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: record => ({
record,
editable: col.editable,
dataIndex: col.dataIndex,
title: col.title,
handleSave: this.handleSave,
}),
};
});
return (
<div>
<br></br>
<h1> Campaigns </h1>
<br></br><br></br>
<Menu
className={styles.menu}
onClick={this.handleClick}
style={{ marginleft: 80}}
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
>
<SubMenu className={styles.sub}
key="sub4"
title={
<span>
<Icon type="setting"style={{
color: '#8c54ff'}} />
<span className={styles.title}>Options</span>
</span>
}
>
<span className={styles.icon}> <Icon type="arrow-down" style={{
color: '#8c54ff'}} /></span>
<Menu.Item key="9"> CSV</Menu.Item>
<span className={styles.icon}><Icon type="sync" style={{
color: '#8c54ff'}}/> </span>
<Menu.Item key="11"> Sync</Menu.Item>
<span className={styles.icon}>
<Icon
type="copy"
style={{
color: '#8c54ff',
}}
/>
</span>// this is function to copy table data
<CopyToClipboard text={dataSource} onCopy={() => this.setState({copied: true})}>
</SubMenu>
</Menu>
<br></br>
);
}
}
export default Campaign

Resources