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 Carousel from 'react-elastic-carousel'; |
||||
import './index.scss'; |
||||
export default function suggetbar({ suggest }) { |
||||
export default function Keyboard({ options, action }) { |
||||
return ( |
||||
<div className="chat-suggest portrait-slider d-flex flex-column"> |
||||
<Carousel itemsToShow={1} isRTL={true} enableTilt={true} showArrows={false}> |
||||
{suggest.map((row, i) => ( |
||||
<Row row={row} key={i} /> |
||||
{options.map((row, i) => ( |
||||
<Row row={row} key={i} action={action} /> |
||||
))} |
||||
</Carousel> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
const Row = ({ row }) => { |
||||
const Row = ({ row, action }) => { |
||||
return ( |
||||
<div className="chat-suggest__row d-flex"> |
||||
{/* <Suggest item={row[0]} /> */} |
||||
{row.map((item, i) => ( |
||||
<Suggest item={item} key={i} /> |
||||
<KeyboardItem item={item} key={i} action={action} /> |
||||
))} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const Suggest = ({ item }) => { |
||||
console.log(item.text); |
||||
return <div className="chat-suggest__row--item d-flex">{item.text}</div>; |
||||
const KeyboardItem = ({ item, action }) => { |
||||
return ( |
||||
<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