I'm working on a react-app website and I'm pretty new to this all.
The current look is this:
There's a toggle button and a dropdown, and they are above each other. Both are from semantic-ui-react. The code is here:
<Segment>
<LineChart
...
</LineChart>
<div >
<div >
<Checkbox
toggle
label="Full History"
checked={fullHistory}
onChange={() => { changeSettingsState({ fullHistory: !fullHistory }); }}
/>
</div>
<div>
<Dropdown placeholder='Select 2 Flight Data Options' fluid multiple selection options={options} value={this.state.selected} onChange={this.menuChange} />
</div>
</div>
</Segment>
I want the button and dropdown to be side by side, filling the horizontal space together. That's why I've put them in divs. I tried using style={{float:'left'}} and style={{float:'right'}} in the divs that contain Checkbox and Dropdown but that results in the following that bursts out of the box and looks bad.
Any help would be appreciated.
Hard to say for sure if this will work since there's no way to try the code, but this should do the job:
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
<Checkbox
toggle
label="Full History"
checked={fullHistory}
onChange={() => { changeSettingsState({ fullHistory: !fullHistory }); }}
/>
<Dropdown placeholder='Select 2 Flight Data Options' fluid multiple selection options={options} value={this.state.selected} onChange={this.menuChange} />
</div>
Note that the div wrappers around Checkbox and Dropdown are removed since they're unnecessary with this solution.
Related
I'm trying to implement a kind of table, which has an add button that opens a modal.
Inside the modal, I have the inputs that I want to update in the table, but using the ant design modal it has an ok button and a cancel button. How do I make the path to get the values? I'm having trouble understanding/writing this syntax. Can someone help me?
on the "onOk", i don't know how to write the function, tried creating a onSubmit(values) and console.log it but it doesn't show
Here's the code
function showModal(nome,colunas) {
setFormDisplay("");
setModal(!modal);
setFormName(nome);
setFormColumns(colunas);
}
function cancelModal() {
setFormDisplay("none");
setModal(false);
setFormName("");
setFormColumns([]);
}
<>
<div className="">
<CardsHost posts={nomes} />
</div>
<Modal
visible={modal}
onOk={}
title="Novo Prontuário"
onCancel={cancelModal}
style={{display:`${formDisplay}`}}
width={1000}
>
{formColumns.map((column,index) => (
<>
<div className="labelll">
<label key={`label-${index}`}>{column.title}</label>
{(column.key !=='proc' && column.key !== 'meds' )
? <Input key={`input-${index}`} style={{ width: "61.3%" }} />
: (column.key == 'proc' ) ? <div className="pesquisa-input"><Demo /></div>
: <div className="pesquisa-input"><PageComponentMeds /> </div>
}
</div>
{/*<div className="labelll">
<label> Data de Atendimento</label>
<DatePicker style={{ width: "61.3%" }} />
</div>
<div className="labelll">
<label> Nota </label>
<TextArea style={{ width: "61.3%" }} />
</div> */}
</>
))}
</Modal>
</>
);
}
The easiest way would be use to add a state variable for both of your input values. You can update them using the onChange callback provided by the antd components. On submit you use the state values to make your api call.
Make sure that you reset the variables on cancel and after a successful call.
I have an AutoComplete and it has onSearch event. They are working perfectly. Now, I need to add a dropdown to autocomplete options. The problem is that, when I expect to see opening dropdown, still onSearch is working and dropdown options can't be seen. The thing I am trying to do is that, when user click on dropdown I should show dropdown menu. When user click any other part of the option other than dropdown button, then onSearch should work as expected.
This is autocomplete :
<AutoComplete
dropdownClassName="certain-category-search-dropdown"
dropdownMatchSelectWidth={500}
style={{
width: 250
}}
options={options}
onSelect={onSelect}
>
<Input.Search size="large" placeholder="input here" />
</AutoComplete>
This is renderItem function for options, it has dropdown :
const renderItem = (title, count) => ({
value: title,
label: (
<div
style={{
display: "flex",
justifyContent: "space-between"
}}
>
{title}
<span>
<Dropdown overlay={menu} trigger={["click"]}>
<span
className="ant-dropdown-link"
onClick={(e) => e.preventDefault()}
>
Click me <DownOutlined />
</span>
</Dropdown>
{count}
</span>
</div>
)
});
This is a simulation of my situation. Also it does not have to be dropdown. When if it is a button or sth the scenario is the same. I could not prevent onSelect running on click.
In my case, I could use 'dropdownRender' props.
dropdownRender={(menu) =>
<>
{menu}
<span
className="ant-dropdown-link"
onClick={(e) => e.preventDefault()}
>
Click me <DownOutlined />
</span>
</>
}
items passed by options props shall be rendered in {menu} above.
Click me buttons shall not close the dropdown menu.
I[m trying to build, using semantic-ui-react, a menu like the example on the Semantic UI documentation, but I'm having problems on the popup width.
Here is my code:
import React, { Component } from 'react';
import { Menu, Icon, Dropdown, Popup, Grid, List } from 'semantic-ui-react';
import menulogo from '../../images/logo.svg';
class AppMenu extends Component {
render() {
return (
<div>
<Menu>
<Menu.Item>
<img alt='Logo' src={menulogo}/>
<strong color='blue'>Logo</strong>
</Menu.Item>
<Menu.Item>
<Icon name='browser' color='blue'/>
Menu
<Popup
trigger={<Icon name='dropdown'/>}
position='bottom center'
flowing
hoverable
>
<Grid
columns={3}
centered
divided
relaxed
>
<Grid.Column textAlign='center'>
<List relaxed link>
<List.Header as='h4'>Group 1</List.Header>
<List.Item as='a'>Option 1</List.Item>
<List.Item as='a' >Option 2</List.Item>
<List.Item as='a' >Option 3</List.Item>
<List.Item as='a' >Option 4</List.Item>
</List>
</Grid.Column>
<Grid.Column textAlign='center'>
<List relaxed link>
<List.Header as='h4'>Group 2</List.Header>
<List.Item as='a'>Option 1</List.Item>
<List.Item as='a' >Option 2</List.Item>
<List.Item as='a' >Option 3</List.Item>
<List.Item as='a' >Option 4</List.Item>
</List>
</Grid.Column>
</Grid>
</Popup>
</Menu.Item>
</Menu>
</div>
);
}
}
export default AppMenu;
This is the result I´m getting:
I expected the popup to fit the text nicely. Seens that the columns are too small in width to keep all text.
Help appreciated.
The problem here is that the Grid component in semantic-ui is responsive. It takes on the size of it's parent if no width is defined. This is in the styles and not specific to semantic-ui-react. If you want your grid to take up more space horizontally, you can set a style={{width: '300px'}} on your Grid component and this will give you the space you want.
Add style={{width: '300px'}} on your Grid component.
I'd recommend doing a couple additional things here.
If you are insistent on using a Popup for this menu, you'll probably want to add the position='bottom left' prop to it.
Use the entire Menu.Item as the Popup component's trigger instead.
These two changes will give you this:
You'll probably be better off using a Dropdown component on this Menu instead, but I will keep the scope of my answer based on the initial question.
A codesandbox example is included showing all three of these changes in working order: https://codesandbox.io/s/n39o5y344p
I'm mapping results from a GET request. The mapping works fine. I get each User picture, name and even the correct label on the button. But when I console.log on the button, I want to get info of the user. When I click on the button, it gives user_id of all users not the particular one.
{filteredEmails.map(user => {
return (
<List>
<div className="mail" key={user.user_id}>
<ListItem
key={user.user_id}
disabled={true}
leftAvatar={
<Avatar size={80} src={user.picture} />
}
rightIconButton={
<RaisedButton
label={user.name}
primary={true}
key={user.user_id}
onTouchTap={console.log(user.user_id)}
style={style} />
}
>
<div className="searchContent" key={user.user_id}>
<div className="subject">{user.name}</div>
<br></br>
<div className="from">{user.email}</div>
<br></br>
<div className="subject">{user.identities[0].provider}</div>
</div>
</ListItem>
</div>
</List>
);
})}
Mapping users picture
On the above picture, I want to press the button and get user_id or name of the user. I can't seem to do that.
My guess is problem with this context, but I'm unable to fix it so far.
You need to pass a function to onTouchTap event, and bind the value of user_id to that, by this way whenever user click on button that specific user_id will get passed to that function, then do the console.log() inside that it will print the proper value.
Like this:
onTouchTap={() => this._handleClick(user.user_id)}
Define the _handleClick function like this:
_handleClick(user_id){
console.log(user.user_id)
}
You also need to define the unique key to each List item inside map otherwise it will throw warning, user_id will have the unique values you can use that also.
Write the map like this:
{filteredEmails.map(user => {
return (
<List key={user.user_id}>
<div className="mail">
<ListItem
key={user.user_id}
disabled={true}
leftAvatar={
<Avatar size={80} src={user.picture} />
}
rightIconButton={<RaisedButton
label={user.name}
primary={true}
key={user.user_id}
onTouchTap={onTouchTap={() => this._handleClick(user.user_id)}}
style={style} />
}
>
<div className="searchContent" key={user.user_id}>
<div className="subject">{user.name}</div>
<br></br>
<div className="from">{user.email}</div>
<br></br>
<div className="subject">{user.identities[0].provider}</div>
</div>
</ListItem>
</div>
</List>
);
})}
My use-case is trigger something when click parent component (TouchableOpacity for example), but trigger nothing when click children component (Screen and others for Example). My case is same like prevent bubbling on web. From docs I've read said that it should use onStartShouldSetResponderCapture, but I still don't understand for the usage. Below is the snippet.
<TouchableOpacity style={styles.container} onPress={() => alert('tes')}
>
<Screen style={styles.screenContainer} onStartShouldSetResponderCapture={() => false}>
<Title>Edit Nama Restoran</Title>
<Divider styleName='line' />
<TextInput
style={{ flex: 1 }}
value={value}
onChangeText={value => this.setState({ value })}
onSubmitEditing={this.handleSubmit}
/>
<View styleName='horizontal' style={styles.nameContainer}>
<Button styleName='confirmation dark' onPress={this.handleSubmit}>
<Text>UPDATE</Text>
</Button>
<Button styleName='confirmation' onPress={onClose}>
<Text>CLOSE</Text>
</Button>
</View>
</Screen>
</TouchableOpacity>
EDIT:
Below is an illustration of my case.
If I click overlay (outside of <Screen>), it triggers an alert (expected).
If I click white dialog (<Screen> and children inside), it triggers an alert too (unexpected). What I need is not trigger alert when click <Screen>.
Updated to show how to do with a modal:
<Modal
visible={this.state.modalVisible}
onRequestClose={() => {alert("Modal has been closed.")}}
>
<TextInput
style={{ flex: 1 }}
value={value}
onChangeText={value => this.setState({ value })}
onSubmitEditing={this.handleSubmit}
/>
</Modal>
Not sure if this is the right snippet from your code, but basically the part you want to pop up, pull it out from the touchable opacity and wrap a modal around it. Then on click have it visible/invisible.