I have a list of to-do task. I want to display one task per screen and when the user clicks the next button he should be able to see the next. I want to achieve it with slide animation. I came across react-transition-group package which can be used to for animation. But the slide animation is not working properly.
https://codesandbox.io/s/transitiongroup-component-zjzep
<CSSTransition
in={currentPage === 1}
key={1}
timeout={500}
classNames="item"
>
<ListGroup.Item>
<Button
className="remove-btn"
variant="danger"
size="sm"
onClick={() => {}}
>
×
</Button>
{'a'}
</ListGroup.Item>
</CSSTransition>
<CSSTransition
in={currentPage === 2}
key={2}
timeout={500}
classNames="item"
>
<ListGroup.Item>
<Button
className="remove-btn"
variant="danger"
size="sm"
onClick={() => {}}
>
×
</Button>
{'b'}
</ListGroup.Item>
</CSSTransition>
Finally, I manage to achieve it. Earlier I was using float to keep all the elements in one line. I change it with position absolute.
https://codesandbox.io/s/transitiongroup-component-zjzep
Related
I currently have two map functions to render a board for a chess game like this:
<div className='board'>
{rows.map((item) => (
<div key={item} className='row'>
{item.map((square) => (
# The square <div> => <div key={square[0]} className='square' onClick={() => {
board.select !== null &&
checkColour(board.select[1]) !== checkColour(square[1]) && dispatch(move(square))
}}>
{isNaN(square[1]) && <img src={square[1]} alt={square[1]}
onClick={() => { board.turns === checkColour(square[1]) && dispatch(select(square)) }}
className={board.select === square ? 'piece-selected' : 'piece'} />}
</div>
))}
</div>
))}
</div>
Now, I want to change the css style of certain squares <div> after I selected a pawn piece in order to forecast a shadow for showing the possible moves. I want to know is it possible to access the css style of that particular square <div> using the key of that <div>?
Feel free the drop a comment below if you have any insight or idea. Let me know if you want more info. Much appreciated.
I have an Angular application where the user has multiple choices with buttons and when a button is pressed another component will display. The component depends on the user's choice.
One thing I'm trying to implement is the styling of the buttons to make it clear which choice has been selected.
<div fxLayout="row" fxLayoutAlign="space-between center" fxFill>
<div *ngFor="let button of buttons">
<button
mat-stroked-button
*ngIf="button.type === 'button'"
(click)="buttonPressed()"
ngxScrollTo
>
{{ button.text }}
</button>
</div>
<div fxLayout="row" fxLayoutAlign="space-between center">
<div *ngIf="item.hasSomeProperty | isTypeButton">
<button mat-mini-fab (click)="buttonPressed()">
<mat-icon>close</mat-icon>
</button>
</div>
</div>
I have also attached a picture of what im trying to achieve here:
Any help would be much appreciated.
Simply use [ngClass] or [ngStyle]:
<div *ngFor="let button of buttons">
<button
mat-stroked-button
*ngIf="button.type === 'button'"
[ngClass]="{'disabledButton': !button.selected}"
(click)="buttonPressed(button)"
ngxScrollTo
>
{{ button.text }}
</button>
</div>
Assuming that your button model contains the "selected" property (or you have some other model storing information which button was actually clicked):
buttonPressed(button: Button) {
// Mark only button as selected
this.buttons.forEach(b => b.selected = b === button);
}
And of course add some class in the css:
.disabledButton {
opacity: 0.75;
}
Note - writing this from top of my head (since no stackblitz was provided) so some adjustments might be needed.
In the below I would like to change the colour to black if the count is === 0
if(Count === 0){
document.getElementById('value').style.color = 'black';
}
return(
<div className='container_new'>
<h1>Counter</h1>
<span id='value'>{Count}</span>
<div>
<button className="btn decrease" onClick={handleDecrement} >decrease</button>
<button className="btn reset" style={{color: 'black'}} onClick={() => handleReset()}>reset</button>
<button className="btn increase" onClick={() => handleIncrement()}>increase</button>
</div>
</div>
)
You can achieve what you wanted this way.
return(
<div className='container_new'>
<h1>Counter</h1>
<span id='value' style={{ color: Count === 0 ? 'black' : 'white' }}>{Count}</span>
<div>
<button className="btn decrease" onClick={handleDecrement} >decrease</button>
<button className="btn reset" style={{color: 'black'}} onClick={() => handleReset()}>reset</button>
<button className="btn increase" onClick={() => handleIncrement()}>increase</button>
</div>
</div>
)
in react.js i would approach this differently because it render and change the DOM (html tree)
so maybe instead of using
**document.getElementById('value').style.color = 'black';**
make a class in CSS and change the className based on the Count
like this
css class
.black {
color : black;
}
.green {
color : green;
}
react.js code
<span id='value' className={Count === 0 ? "black" : "green" } >{Count}</span> // tell me if this line is understandable
replace this line with your line and see if is working !
it would help me understand better if you show us the the handle increment function handle reset and handle decrement :)
Create a local state for the count and track the update. Based on the count value in the state, update the template style.
const [count, setCount] = useState(0);
return(
<div className='container_new'>
<h1>Counter</h1>
<span id='value'>{count}</span>
<div>
<button className="btn decrease" onClick={handleDecrement} >decrease</button>
<button className="btn reset" style={{color: (count === 0 ? 'black': 'green')}}
onClick={() => setCount(0)}>reset</button>
<button className="btn increase" onClick={() => handleIncrement()}>increase</button>
</div>
</div>
I believe, your react state is state = { Count: 0 }, If yes, when react starts initial rendering, you're trying to get the element by id, at this time, there no element(not rendered) with <span id='value'>{Count}</span> which returns null. That's why you're getting this error Cannot read property 'style' of null.
But, you can simply use following solution
<span id="value" style={{ color: Count === 0 ? 'black' : 'green' }}>{Count}</span>
I try to fix button location when image is added.
I want the button location to be always horizontal.
front : React
css framework : semantic-ui-react
render() {
return (
<Container text style={{marginTop: '3em'}}>
<Header as="h1">{this.state.article.title}</Header>
<this.Paragraph />
{(this.state.article.imageNames || []).map(function(articleData, i) {
return (
<img
src={`https://article-s3-jpskgc.s3-ap-northeast-1.amazonaws.com/media/${
articleData.name
}`}
alt="new"
/>
);
})}
{/* TODO fix button location when image exists */}
<Button color="green" as="a" href="/">
<Icon name="arrow left" />
Back to Home
</Button>
{this.renderRedirect()}
<Button floated="right" onClick={this.deleteArticle}>
<Icon name="trash" />
Delete this Article
</Button>
</Container>
);
}
The full source code is here:
https://github.com/jpskgc/article/blob/master/client/src/components/Detail.tsx
At particular image size, button location is like this:
I want the button location to be always horizontal like this:
I expect the button location is always horizontal.
But the actual is not always according to image size.
As #Arup suggested, This issue is resolved by flexbox.
<Container style={{display: 'flex'}}>
<Button color="green" as="a" href="/">
<Icon name="arrow left" />
Back to Home
</Button>
<Button floated="right" onClick={this.deleteArticle}>
<Icon name="trash" />
Delete this Article
</Button>
</Container>
I have a problem with mat-card, that is draggable and also contains some button. Unfortunately, on my PC button (click) don't work at all, on my collegue it works sometimes. We think that it can be caused as click is treated as dragging element. Is there anyway to set minimal length of move (dragging), which causes starting treating object as moved?
It was tested on 2 machines - the same code, different behaviour - one one (click) on button is never executed, on second one - sometimes.
What I found now on my computer - while I'm debugging it (Chrome) - when I move my mouse cursor over cards on one of cases occurring this - I get blue "shadow" over the whole app from debugger, but button is clickable - it works as I expected, otherwise - not.
<mat-card mwlDraggable *ngFor="let item of items; let i = index" [dragActiveClass]="'field-dragged'"
[dropData]="item" (dragEnd)="itemFieldDragEnd($event, item)">
<mat-card-content>
<div class="pull-left m-t-5">
{{item.name}}
<div class="field-meta truncate">
{{item.desc}}
</div>
</div>
<div class="pull-right">
<button mat-icon-button (click)="onItemFieldClick($event, item)" matTooltip="somehint">
<mat-icon class="md-24">arrow_forward_ios</mat-icon>
</button>
</div>
</mat-card-content>
</mat-card>
I want to obtain way to force mwlDraggable to become draggable only if it was moved really by let's say 10px, not before. Or any other solution that would work for that problem.
I found solution on github: https://github.com/mattlewis92/angular-draggable-droppable/issues/53
Exemplary fully implemented solution using above:
<mat-card mwlDraggable *ngFor="let item of items; let i = index" [dragActiveClass]="'field-dragged'"
[dropData]="item" (dragEnd)="itemFieldDragEnd($event, item)"
[validateDrag]="dragThresholdValidator">
<mat-card-content>
<div class="pull-left m-t-5">
{{item.name}}
<div class="field-meta truncate">
{{item.desc}}
</div>
</div>
<div class="pull-right">
<button mat-icon-button (click)="onItemFieldClick($event, item)" matTooltip="somehint">
<mat-icon class="md-24">arrow_forward_ios</mat-icon>
</button>
</div>
</mat-card-content>
</mat-card>
public dragThresholdValidator({ x, y }: any): boolean {
const min_drag_threshold = 5;
return Math.abs(x) > min_drag_threshold || Math.abs(y) > min_drag_threshold;
}