Gorji
4 years ago
parent
be9c78966a
commit
2222c27c62
19 changed files with 292 additions and 236 deletions
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 336 KiB |
|
After Width: | Height: | Size: 69 KiB |
@ -1,30 +1,32 @@ |
|||||||
import React, { Component } from 'react'; |
import React, { Component } from 'react'; |
||||||
import Carousel from 'react-elastic-carousel'; |
import Carousel from 'react-elastic-carousel'; |
||||||
import './index.scss'; |
import './index.scss'; |
||||||
export default function suggetbar({ suggest }) { |
export default function Keyboard({ options, action }) { |
||||||
return ( |
return ( |
||||||
<div className="chat-suggest portrait-slider d-flex flex-column"> |
<div className="chat-suggest portrait-slider d-flex flex-column"> |
||||||
<Carousel itemsToShow={1} isRTL={true} enableTilt={true} showArrows={false}> |
<Carousel itemsToShow={1} isRTL={true} enableTilt={true} showArrows={false}> |
||||||
{suggest.map((row, i) => ( |
{options.map((row, i) => ( |
||||||
<Row row={row} key={i} /> |
<Row row={row} key={i} action={action} /> |
||||||
))} |
))} |
||||||
</Carousel> |
</Carousel> |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|
||||||
const Row = ({ row }) => { |
const Row = ({ row, action }) => { |
||||||
return ( |
return ( |
||||||
<div className="chat-suggest__row d-flex"> |
<div className="chat-suggest__row d-flex"> |
||||||
{/* <Suggest item={row[0]} /> */} |
|
||||||
{row.map((item, i) => ( |
{row.map((item, i) => ( |
||||||
<Suggest item={item} key={i} /> |
<KeyboardItem item={item} key={i} action={action} /> |
||||||
))} |
))} |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|
||||||
const Suggest = ({ item }) => { |
const KeyboardItem = ({ item, action }) => { |
||||||
console.log(item.text); |
return ( |
||||||
return <div className="chat-suggest__row--item d-flex">{item.text}</div>; |
<div className="chat-suggest__row--item d-flex" onclick={() => action(item)}> |
||||||
|
{item.text} |
||||||
|
</div> |
||||||
|
); |
||||||
}; |
}; |
||||||
|
|||||||
@ -0,0 +1,13 @@ |
|||||||
|
.sliderBox { |
||||||
|
margin-top: 2px; |
||||||
|
.slider { |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
input { |
||||||
|
width: 42px; |
||||||
|
border-bottom: 2px solid #000099; |
||||||
|
padding-left: 10px; |
||||||
|
margin-bottom: 18px; |
||||||
|
color: #000099; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
import arrayMove from 'array-move'; |
||||||
|
|
||||||
|
export default class DraggableMessage extends Component { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
this.state = this.props.message; |
||||||
|
} |
||||||
|
onSortEnd = ({ oldIndex, newIndex }) => { |
||||||
|
if (this.props.isActive) |
||||||
|
this.setState(({ options }) => ({ |
||||||
|
options: arrayMove(options, oldIndex, newIndex), |
||||||
|
})); |
||||||
|
}; |
||||||
|
|
||||||
|
render() { |
||||||
|
const { message, user, isSelf, isActive } = this.props; |
||||||
|
if (!isActive) return null; |
||||||
|
return <div className="tapbox"></div>; |
||||||
|
} |
||||||
|
a = ( |
||||||
|
<button className="message-2d__submit" onClick={() => action({ value })}> |
||||||
|
ثبت |
||||||
|
</button> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue