Material-UI Tabs inside AutoComplete popover - javascript

Is it possible to render the matching data in the AutoComplete popover in the form of Tabs? I may have upto three categories of data matching the input value, that I'd like to display as tabs. Can I combine the Material-UI AutoComplete and Tabs components to achieve this?

The AutoComplete component creates a Menu component for the suggested items. So each suggestion is a component of type MenuItem.
MenuItem component could have dynamic children, and therefore you could add a tabs as the children of the MenuItem. The problem is that any click inside the suggestion popover closes the popover.
If you want to try it out, or maybe hack it somehow (like preventing the click event for tunneling to the popover, and handling the open state manually(?)), here is reproduction code (start typing the word "test" in the input to see suggestions):
import React from 'react';
import AutoComplete from 'material-ui/AutoComplete';
import {Tabs, Tab} from 'material-ui/Tabs';
import MenuItem from 'material-ui/MenuItem';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {deepOrange500} from 'material-ui/styles/colors';
const muiTheme = getMuiTheme({
palette: {
accent1Color: deepOrange500,
},
});
export default class AutoCompleteExampleSimple extends React.Component {
constructor(props) {
super(props);
this.state = {
dataSource: [],
};
}
getTabs() {
return <MenuItem>
<Tabs>
<Tab label="Item One" >
<div>
<h2>Tab One</h2>
<p>
This is an example tab.
</p>
<p>
You can put any sort of HTML or react component in here. It even keeps the component state!
</p>
</div>
</Tab>
<Tab label="Item Two" >
<div>
<h2>Tab Two</h2>
<p>
This is another example tab.
</p>
</div>
</Tab>
<Tab
label="onActive"
route="/home">
<div>
<h2 >Tab Three</h2>
<p>
This is a third example tab.
</p>
</div>
</Tab>
</Tabs>
</MenuItem>
}
handleUpdateInput(value) {
this.setState({
dataSource: [
{text: 'test', value: this.getTabs()}
],
});
};
render() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<div>
<AutoComplete
hintText="Type anything"
dataSource={this.state.dataSource}
onUpdateInput={this.handleUpdateInput.bind(this)}
/>
</div>
</MuiThemeProvider>
);
}
}

Related

how do i reuse a react component but with different colours?

Hi I am very new to react and coding so please baby me in your explanations.
I have created a component in react named Header1. I have used dynamic text using props so I can change the wording for each time I use the Header1 component. I am wondering how do I do that for the style. I would like one card to have pink text and another to have blue text. Please help! And thank you in advance :)
The following is the creation of the Header1 component:
import React from 'react';
import WhiteMap from '../img/other/whiteWorld.png';
import HeaderScss from './_Header1.scss'
const header1 = (props, style)=>{
return <div className="main--container">
<header className="header--container__inside">
<section className="header--container__left">
<h1>
{props.headerTitle}
{style.headerTitleS}
</h1>
<p>
{props.headerDescription}
</p>
</section>
<section className="header--container__right">
<div className="header--pic">
<img src={WhiteMap} alt="World map with a circle highlighting Australia"/>
</div>
</section>
</header>
</div>
};
export default header1;
The following is the main App.js file where I am using the Header1 component twice:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Navigation1 from './Navigation/Navigation1';
import Header1 from './Header/Header1';
import SaveMoney1 from './SaveMoney/SaveMoney1';
import Airports1 from './Airports/Airports1';
// import SydneyCards1 from './SydneyCards/SydneyCards1';
import ThingsYouShouldKnow1 from './ThingsYouShouldKnow/ThingsYouShouldKnow1';
// import BucketList1 from './BucketlistCards/BucketlistCards1';
// import Footer1 from './Footer/Footer1';
import styles from './appStyles.module.css';
class App extends Component {
render() {
return (
<div className="App">
<Navigation1 />
<Header1 headerTitle="Fly to" headerDescription=" Selia."/>
<SaveMoney1/>
<Airports1/>
<Header1 headerTitle="Things you should know" headerDescription ="Based on customer bookings,
{/* <BucketList1/> */}
{/* <SydneyCards1/> */}
{/* <Footer1/> */}
</div>
);
}
}
export default App;
One of the ways would be using styles, like you're trying to do in your example. Try to do something like this
const Header = (props) => {
return <h1 style={props.style}>{props.title}</h1>
}
And you would render it like this
const App = () => {
return (
<div>
<Header title="My Header with Blue text" style={{color: "blue"}} />
<Header title="My Header with Red text" style={{color: "red"}} />
</div>
)
}
Note: You can do the same passing a CSS class as a prop instead of the exact style object.

custom modal does not appear react.js

I'm trying to call this Modal, but does not appear. I tried to put the Modal into a render() but it does not work too. I used inspect element tool and it shows the div from Modal but show it "grey".
This is the Modal
import React from 'react';
import './Modal.css';
const modal = props =>(
<div className="modal">
<header className="modal__header">
<h1>{props.title}</h1>
</header>
<section className="modal__content">
{props.children}
</section>
<section className="modal__actions">
{props.canCancel && (<button className="btn" onClick={props.onCancel}>Cancel</button>)}
{props.canConfirm &&(<button className="btn" onClick={props.onConfirm}>Confirm</button>)}
</section>
</div>
);
export default modal;
and I´m trying to call the Modal here
import React,{Component} from 'react';
import Modal from '../components/Modal/Modal.js';
import './Investments.css';
class InvestmentsPage extends Component{
render(){
return(
<React.Fragment>
<Modal>
<p>Modal content</p>
</Modal>
<div className="investment-control">
<p>Modal</p>
<button className="btn btnt1" >Crear </button>
</div>
</React.Fragment>);
}
}
export default InvestmentsPage;
Your approach is wrong. I am guessing here your modal is hidden under some other DOM element. You should use ReactDOM.createPortal() for modals, tooltips etc. :
In index.html under the existing div with id='root' create new
div with id='modal';
In your modal Component as listed above import ReactDOM from 'react-dom'
and return
ReactDOM.createPortal(your_JSX_here, document.querySelector('#modal'))

Show Component inside a Collapsible

Hello I'm trying to show a Form Component inside an 'antd' Collapsible when the user clicks on the form icon the Form Component should appear inside the Collapsible below the text that's already there
I'm using the antd library for the Collapsible
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { Collapse, Icon } from 'antd';
import Form from './Form';
const { Panel } = Collapse;
const text = `
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
`;
const genExtra = () => (
<Icon
type="form"
onClick={event => {
// If you don't want click extra trigger collapse, you can prevent this:
event.stopPropagation();
console.log('You have click on edit form');
}}
/>
);
const customPanelStyle = {
background: '#f7f7f7',
borderRadius: 4,
marginBottom: 24,
border: 0,
overflow: 'hidden',
};
ReactDOM.render(
<Collapse
bordered={false}
defaultActiveKey={['1']}
expandIcon={({ isActive }) => <Icon type="caret-right" rotate={isActive ? 90 : 0} />}
>
<Panel
header="This is panel header 1"
key="1" style={customPanelStyle}
extra={genExtra()}
>
<p>{text}</p>
</Panel>
</Collapse>,
document.getElementById('container'),
);
this is the Form Component:
import React from 'react';
const Form = () => {
return(
<div id="wrapper">
<div className="group">
<label for="name">Name</label>
<input type="text" id="name" />
</div>
<hr/>
<div className="group">
<label for="email">Email</label>
<input type="email" id="email" />
</div>
</div>
);
}
export default Form;
--
I just want the Form Component to appear inside the collapsible when the user clicks on the little icon in the header I'll leave a link to the stackblitz: https://stackblitz.com/edit/react-pkffgm
You need to move your Collapsible to another class based component, where you can have state to show / hide your Form component,
In newly constructed class based component you need to maintain state like,
constructor(props){
super(props);
this.state ={
showForm: false
}
}
Then in render you can show your Form like this,
<Panel
header="This is panel header 1"
key="1" style={customPanelStyle}
extra={this.genExtra()}
>
<p>{text}</p>
{this.state.showForm && <Form />}
</Panel>
And finally on click of form edit icon you need to change state of showForm like,
genExtra = () => (
<Icon
type="form"
onClick={event => {
// If you don't want click extra trigger collapse, you can prevent this:
event.stopPropagation();
this.setState({showForm: true})
console.log('You have click on edit form');
}}
/>
);
Note: In the Form component you are getting warning for your lable,
<label htmlFor="name">Name</label> //instead of `for` attribute in react we have `htmlFor` attribute.
Demo

Pass value between tabs on onClick event in ReactJS

This is the component I am working on. I have three tab named newOrder, currentOrder and orderHistory.
How can I move a card in New Order tab, to Current Order tab when I press 'Accept' button on card.
export default class Driver extends Component {
constructor(props, context) {
super(props, context);
this.state = {
key: 'home',
};
}
render() {
return (
<Tabs id="controlled-tab-example" activeKey={this.state.key}
onSelect{key => this.setState({ key })}>
<Tab eventKey="newOrder" title="New Order">
//this is the card with Accept button.
<div class="card">
<div class="card-body">
<Button type="button>Accept</Button>
</div>
</div>
</Tab>
<Tab eventKey="currentOrder" title="Current Order"></Tab>
<Tab eventKey="orderHistory" title="OrderHistory"></Tab>
</Tabs>
);
}
}
This can be achieved by using the component state. You may refer this link: https://reactjs.org/docs/state-and-lifecycle.html

Just refresh a tab or not the page

I'm having a little problem with ReactJs. I have a page with several tabs and in each tabs I have a button that refresh the page so when I click on the refresh button it goes back to tab 1 while the refresh happens in tab 2 while I want tab 2 to remain open after refresh.
I want after the refresh tab 2 stays open
Example photo:
Before refresh:
After refresh:
I want after the refresh tab 2 stays open...
Here is my code:
import React, { Component } from 'react';
import { render } from 'react-dom';
import { TabProvider, Tab, TabPanel, TabList } from 'react-web-tabs';
import 'react-web-tabs/dist/react-web-tabs.css';
import { Button } from 'semantic-ui-react'
import 'semantic-ui-css/semantic.min.css';
import './App.css';
class App extends Component {
render() {
return (
<TabProvider defaultTab="vertical-tab-one" vertical>
<section className="my-tabs">
<TabList className="my-tablist">
<Tab tabFor="vertical-tab-one">Tab 1</Tab>
<span className="divider"></span>
<Tab tabFor="vertical-tab-two">Tab 2</Tab>
<span className="divider"></span>
<Tab tabFor="vertical-tab-three" className="my-tab">Tab 3</Tab>
</TabList>
<div className="wrapper">
<TabPanel tabId="vertical-tab-one">
<center>
<Button className="buttonPosition" onClick={myClick}>Refresh tab 1</Button>
</center>
</TabPanel>
<TabPanel tabId="vertical-tab-two">
<center>
<Button className="buttonPosition" onClick={myClick}>Refresh tab 2</Button>
</center>
</TabPanel>
<TabPanel tabId="vertical-tab-three">
<center>
<Button className="buttonPosition" onClick={myClick}>Refresh tab 3</Button>
</center>
</TabPanel>
</div>
</section>
</TabProvider>
);
}
}
function myClick(){
window.location.reload();
}
export default App;
I thank you in advance. I continue my research.
Sincerely Valentine
On a page reload the state will reset to it's initial state. You either have to store the last tab in the browsers localStorage or on the server side.
You also need to update your component to retrieve the last state when loading. In the life cycle of React this probably means inside componentDidMount().
You can add the state object in your class, and set its default every time the component is mount, to save the state in a browser refresh you can use localstorage...
class App extends Component {
constructor(props){
super(props);
this.state={
defaultTab: 'vertical-tab-one'
}
}
componentDidMount(){
let default = localStorage.getItem('default');
this.setState(()=>({
defaultTab:default
})
);
}
render(){
return (
<TabProvider
defaultTab={this.state.defaultTab} vertical>
<section className="my-tabs">
<TabList className="my-tablist">
<Tab tabFor="vertical-tab-one">Tab 1</Tab>
<span className="divider"></span>
<Tab tabFor="vertical-tab-two">Tab 2</Tab>
<span className="divider"></span>
<Tab tabFor="vertical-tab-three" className="my-tab">Tab 3</Tab>
</TabList>

Categories

Resources