You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
998 B
39 lines
998 B
import React, { Component } from 'react'; |
|
import Carousel from 'react-elastic-carousel'; |
|
import './index.scss'; |
|
export default function Keyboard({ options, action }) { |
|
options = options.length ? options : [[{ text: 'اشتباه' }]]; |
|
return ( |
|
<div className="chat-suggest portrait-slider d-flex flex-column"> |
|
<Carousel itemsToShow={1} isRTL={true} enableTilt={true} showArrows={false}> |
|
{options.map((row, i) => ( |
|
<Row row={row} key={i} action={action} /> |
|
))} |
|
</Carousel> |
|
</div> |
|
); |
|
} |
|
|
|
const Row = ({ row, action }) => { |
|
return ( |
|
<div className="chat-suggest__row d-flex"> |
|
{row.map((item, i) => ( |
|
<KeyboardItem item={item} key={i} action={action} /> |
|
))} |
|
</div> |
|
); |
|
}; |
|
|
|
const KeyboardItem = ({ item, action }) => { |
|
return ( |
|
<div |
|
className="chat-suggest__row--item d-flex" |
|
style={{ cursor: 'pointer' }} |
|
onClick={() => { |
|
action(item); |
|
}} |
|
> |
|
{item.text} |
|
</div> |
|
); |
|
};
|
|
|