I'm new to Grommet with styled components.
I Have already checked all the docs and can't find the solution.
PROBLEM
I have an Anchor with an icon and a label.
Problem is I cannot target the icon for styling when i hover or it is active.
Text / Label changes the styling though. How can i achieve/fix this?
I've also tried using styled components and putting an Icon and a Text inside a Grommet Box, but didn't work.
Please help!
import React from "react";
import { Anchor, Box, Text } from "grommet";
import styled from "styled-components";
import { Currency as PayoutIcon, Menu as MenuIcon } from "grommet-icons";
const StyledAnchor = styled(Anchor)`
display: flex;
height: 56px;
color: #808191;
padding: px 20px;
border-radius: 12px;
background: transparent;
width: max-content;
text-decoration: none;
font-family: Inter;
color: #808191;
padding: 0px 20px;
background: transparent;
transition: all 0.25s ease 0s;
text-decoration: none;
border: none;
&:visited {
text-decoration: none;
border: none;
}
&:hover {
color: #6c5dd3;
text-decoration: none;
}
&:active {
color: #fff;
background: #6c5dd3;
text-decoration: none;
border: none;
}
&:focus {
color: #fff;
background: #6c5dd3;
textdecoration: none;
border: none;
}
`;
const SidebarItem = () => {
return (
// <Box color="#808191" hoverIndicator="true">
<StyledAnchor
color="#808191"
label="Payouts"
onClick={() => {}}
href="#"
icon={<PayoutIcon />}
/>
// </Box>
);
};
export default SidebarItem;
For the granularity of styles you are looking for, I think you can directly use the Button component instead of Anchor, nevertheless, the usage of Button is more compliant with accessibility standards (WCAG) for the Sidebar interactive elements that you are describing above.
Grommet works best with styled-components, yet grommet theme-ing is also very powerful, and knowing how to leverage its capabilities will help you use styled-components much less.
Recently, grommet extended the Button theme (kind/default button), and that should do the trick for you with no sweat and no need for styled-components, here is an example:
import React, { useState } from "react";
import { render } from "react-dom";
import { Box, Grommet, Button } from "grommet";
import { Currency as PayoutIcon } from "grommet-icons";
const theme = {
global: {
colors: {
myColor: "#808191",
"background-contrast": {
dark: "#FFFFFF14",
light: "#0000000A"
},
"active-background": "background-contrast",
"active-text": "red",
icon: "text",
// focus color is an important indication for keyboard navigation accessibility,
// it will be an ill advice to set it to undefined and remove focus
focus: "teal",
text: {
dark: "#C0CADC",
light: "#444444"
}
}
},
button: {
default: {
color: "#808191",
border: undefined,
font: {
weight: 700
},
padding: {
horizontal: "12px",
vertical: "6px"
}
},
hover: {
default: {
background: {
color: "background-contrast"
},
color: "brand"
},
secondary: {
border: {
width: "3px"
},
padding: {
horizontal: "9px",
vertical: "3px"
}
}
},
active: {
background: {
color: "aliceblue"
},
color: "teal",
secondary: {
border: {
color: "transparent"
}
}
}
}
};
const SidebarItem = () => {
const [active, setActive] = useState();
return (
<Button
active={active}
label="Payouts"
icon={<PayoutIcon />}
onClick={() => {
setActive(!active);
}}
href="#"
/>
);
};
export const App = () => {
return (
<Grommet theme={theme}>
<Box pad="small" align="start">
<SidebarItem />
</Box>
</Grommet>
);
};
render(<App />, document.getElementById("root"));
Here is a codesandbox for running it live.
The Button has the granularity for active/hover/disabled and more, you can basically gain the same functionality in Anchor using the theme anchor.extend but this way is a much cleaner approach.
Related
I'm following this React tutorial here: https://ibaslogic.com/how-to-edit-todos-items-in-react/ to build a simple TO DO app.
I've also reviewed Why onDoubleClick event is not working in React.js? but there's no onclick event to worry about in my example.
My onDoubleClick event should call a function handleEditing but nothing happens when I double click a list item.
I'm unsure of why it does not work (the web browser does not seem to register a double click event.
Below is my example:
import React from "react";
import styles from "./TodoItem.module.css";
class TodoItem extends React.Component {
state = {
editing: false,
};
handleEditing = () => {
console.log("doubleClick")
this.setState({
editing: true,
});
};
render() {
const completedStyle = {
fontStyle: "italic",
color: "#595959",
opacity: 0.4,
textDecoration: "line-through",
};
const { completed, id, title } = this.props.todo;
let viewMode = {}
let editMode = {}
if (this.state.editing) {
viewMode.display = "none"
} else {
editMode.display = "none"
}
return (
<li className={styles.item}>
<div onDoubleClick={this.handleEditing} style={viewMode}>
<input
type="checkbox"
className={styles.checkbox}
checked={completed}
onChange={() => this.props.handleChangeProps(id)}
/>
<button onClick={() => this.props.deleteTodoProps(id)}>Delete</button>
<span style={completed ? completedStyle : null}>{title}</span>
</div>
<input type="text" style={editMode} className={styles.textInput} />
</li>
);
}
}
export default TodoItem;
I don't think this is relevant, but here is my css:
.item {
font-size: 1.2rem;
list-style-type: none;
padding: 17px 0px;
border-bottom: 1px solid #eaeaea;
}
.checkbox {
margin-right: 15px;
}
.item button {
font-size: 13px;
background: #f1f3f4;
border: none;
cursor: pointer;
float: right;
outline: none;
border-radius: 100px;
height: 50px;
width: 50px;
margin: -10px 0 0 10px;
}
.textInput {
width: 100%;
padding: 10px;
border: 1px solid #dfdfdf;
}
onDoubleClick works when your dev tool is not opened
Updated answer:
As found out in the comments, the problem was a combination of OS and Browser. Windows / Chrome in this example.
Old answer:
I haven't read into much detail, but the first difference I can spot is that in your code the handleEditing is not bound. Which should not prevent the output of your console.log. Does it appear?
onDoubleClick={this.handleEditing.bind(this)}
Hope this helps in your case.
When site is loading, page starts from body and I have to scroll up to see styled header.
(But this problem does not appear on all browsers)
I want to start scrolling with the Header.
Here is the live site: http://pavlorishko228-001-site1.btempurl.com/
Code:
import React from "react";
import { Link } from 'react-router-dom';
import styled from "styled-components";
import ScrollHandler from "../../components/ScrollHandler";
import Logo from '../../public/SmokeyWayLogo.svg';
const StyledLogo = styled("img")<{isScrolled: boolean}>`
filter: ${props => props.isScrolled ? "invert(1)" : "drop-shadow(2px 4px 3px black)"};
height: 80px;
padding-left: 0;
float: left;
`;
const StyledLink = styled("div")<{isScrolled: boolean}>`
padding: 20px;
margin: 10px;
display: inline-block;
border-radius: 5px;
&:hover {
box-shadow: 0px 0px 15px 2px ${props => props.isScrolled ? "white" : "black"};
color: black;
}
a {
text-decoration: inherit;
color: ${props => props.isScrolled ? "white" : "black"};
}
`;
const StyledNav = styled("div")<{isScrolled: boolean}>`
position: fixed;
width: 100%;
background-color: ${props => props.isScrolled ? "transparent " : "white"};
`;
function Header(){
const _isScrolled = ScrollHandler();
return(
<header>
<StyledNav isScrolled={_isScrolled}>
<StyledLogo isScrolled={_isScrolled} src={Logo}></StyledLogo>
<StyledLink isScrolled={_isScrolled}>
<Link to="./">Smokey Way</Link>
</StyledLink>
<StyledLink isScrolled={_isScrolled}>
<Link to="./">Головна</Link>
</StyledLink>
<StyledLink isScrolled={_isScrolled}>
<Link to="./">Меню</Link>
</StyledLink>
</StyledNav>
</header>
)
}
export default Header;
I used chrome on my device and was fine, I mean i saw your header after loading the page.
Your problem is not normal and its kinda weird for me, But i suggest you JS (in this code before loading page it makes you to be sure that you are at the top of the current page) and give me the feedback:
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
Is it possible to apply a few styles of properties at once?
const Button = styled.div`
color: blue;
opacity: 0.6;
background-color: #ccc;
`
I need to pass active property, which will affect color, opacity, background-color. How can I apply styles for the active button at once instead of declaring conditions for each property?
const Button = styled.div`
color: ${props.active ? 'green' : 'blue'};
opacity: ${props.active ? 1 : 0.6};
background-color: : ${props.active ? 'white' : '#ccc'};
Create two classes and switch that classes according to property active
For example -
CSS
.activeClass{
color: green;
opacity: 1 ;
background-color:white;
}
.inactiveClass{
color: blue;
opacity: 0.6;
background-color: #ccc;
}
in Render
<button id="mybtn" className={this.props.active ? 'activeClass' : 'inactiveClass'} >mybutton</button>
See working example here
A common approach is a conditional rendering of CSS blocks with css API:
const first = css`
color: green;
opacity: 1;
background-color: white;
`;
const second = css`
color: blue;
opacity: 0.6;
background-color: #ccc;
`;
const Button = styled.div`
${({ active }) => (active ? first : second)}
`;
const App = () => {
const [active, trigger] = useReducer(p => !p, false);
return (
<Button active={active} onClick={() => trigger()}>
Press Me
</Button>
);
};
Or using common utilities like swithProp from styled-tools:
import styled, { css } from "styled-components";
import { switchProp, prop } from "styled-tools";
const Button = styled.button`
font-size: ${switchProp(prop("size", "medium"), {
small: prop("theme.sizes.sm", "12px"),
medium: prop("theme.sizes.md", "16px"),
large: prop("theme.sizes.lg", "20px")
}, prop("theme.sizes.md", "16px"))};
${switchProp("theme.kind", {
light: css`
color: LightBlue;
`,
dark: css`
color: DarkBlue;
`
}, css`color: black;`)}
`;
<Button size="large" theme={{ kind: "light" }} />
Im working with react and Draft.js in a plataform with meetings, forums, etc. This editor allows the user to take notes during the meetings. What i want to achieve is that when the user clicks 'Italic' add the .active class to let know the user that the button is active (change the background color) And remove it when is not. This is my code:
export const ActionButton = styled.div`
color: #272a2d;
padding: 3px 7px;
margin-top: 13px;
.active {
background-color: pink
}
&:hover {
background-color: #f2f4f6;
border-radius: 8px;
cursor: pointer;
}
.icon-toolbar-custom-icons {
border: none;
border-radius: 8px;
padding: 5px;
&:hover {
background-color: #f2f4f6;
}
${mediaQuery} {
padding: 0;
}
}
`;
const estilosTooltipInfo = makeStyles(theme => ({
arrow: {
color: theme.palette.common.black,
},
tooltip: {
backgroundColor: theme.palette.common.black,
fontSize: '13px',
padding: '8px 10px',
borderRadius: 6,
},
}));
function TooltipInfo(props) {
const classes = estilosTooltipInfo();
return <Tooltip placement="bottom" classes={classes} {...props} />;
}
function TooltipItalic(props) {
const handleSetItalic = () => {
const newState = RichUtils.toggleInlineStyle(props.editorState, 'ITALIC');
if (newState) {
props.onChange(newState);
}
};
return (
<div>
<TooltipInfo title="Cursiva">
<ActionButton
className="icon-toolbar-custom-icons"
onClick={handleSetItalic}
>
<FormatItalicIcon />
</ActionButton>
</TooltipInfo>
</div>
);
}
i don't know how to achieve this in my onClick method. I know it should be easy but i'm having a hard time here.
It's pretty easy. What you need is getCurrentLinlineStyle of EditorState. It holds current (that you've selected) inline styles. You could see the link with the example below.
Codesanbox example
use onMouseDown instead of onclick event will do that,
export default function MyEditor() {
const [editorState, setEditorState] = React.useState(
() => EditorState.createEmpty(),
);
const _onBoldClick = () => {
setEditorState(RichUtils.toggleInlineStyle(editorState, 'BOLD'))
}
return(
<div>
<button
// onClick={_onBoldClick}
onMouseDown={e=> {
e.preventDefault();
setEditorState(RichUtils.toggleInlineStyle(editorState, 'BOLD'))
}}>BOLD</button>
<div
>
<Editor
textAlignment="left" placeholder="Enter something here"
editorState={editorState} onChange={setEditorState} />
</div>
</div>
)
}
I'm currently learning how to code the front end of a webpage in react.js and in order to complete the assignment, I need to return a message saying Campground not found when a user enters anything into the search bar that's not in my database.
For example:
If they type Banana instead of a real campground name, it needs to display the message. I'm sure it's relatively simple I'm just at a complete loss at this point.
Below is the code for my find.js file:
import Layout from '../components/MyLayout.js';
import React from "react";
import {getInfo} from '../lib/utils.js';
class Find extends React.Component {
constructor(props) {
super(props);
this.state={search: ""};
}
handleUpdate(evt){
this.setState({search: evt.target.value});
}
async handleSearch(evt){
const park = await getInfo(this.state.search);
this.setState({park});
}
render() {
return (
<Layout>
<div style={{ margin: "auto auto", width: "600px", textAlign: "center" }}>
<h1>New Mexico Camground Search</h1>
<p><input type='text' value={this.state.search} onChange={this.handleUpdate.bind(this)}/></p>
<div className="button-style" onClick={this.handleSearch.bind(this)}>Submit</div>
{this.state.park ? <div>
<br />
<h3>{this.state.park.name}</h3>
<br /><img style={{maxWidth: '400px', maxHeight: "400px"}}
src={this.state.park.image_url} /> <br />
<h3>{this.state.park.closest_town}</h3>
<p>{this.state.park.description} </p>
</div> : null}
<style jsx>{`
h1,
a {
font-family: 'Sans';
color: #ffa500;
}
h2,
a {
font-family: 'Sans'
color: #ffa500;
}
.button-style {
margin: auto auto;
cursor: pointer;
background-color: #ffa500;
color: #ffffff;
width: 100px;
font-family: "Sans";
}
ul {
padding: 10;
}
li {
list-style: none;
margin: 5px 0;
}
a {
text-decoration: none;
color: blue;
}
a:hover {
opacity: 0.6;
}
`}</style>
</div>
</Layout>
)
}
}
}
export default Find;
You can do it with try/catch
async handleSearch(evt) {
try {
const park = await getInfo(evt.target.value);
this.setState({park});
} catch(error) {
// do something with error
}
}
(You can also use the target value directly)