Add dialpad to transfer dialog + various dialpad UI improvements (#6363)
Co-authored-by: Germain <germain@souquet.com> Co-authored-by: Andrew Morgan <andrew@amorgan.xyz> Co-authored-by: David Baker <dbkr@users.noreply.github.com>
This commit is contained in:
parent
c7c29f2119
commit
f4788a6427
21 changed files with 704 additions and 184 deletions
|
@ -19,16 +19,17 @@ import AccessibleButton from "../elements/AccessibleButton";
|
|||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
|
||||
const BUTTONS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'];
|
||||
const BUTTON_LETTERS = ['', 'ABC', 'DEF', 'GHI', 'JKL', 'MNO', 'PQRS', 'TUV', 'WXYZ', '', '+', ''];
|
||||
|
||||
enum DialPadButtonKind {
|
||||
Digit,
|
||||
Delete,
|
||||
Dial,
|
||||
}
|
||||
|
||||
interface IButtonProps {
|
||||
kind: DialPadButtonKind;
|
||||
digit?: string;
|
||||
digitSubtext?: string;
|
||||
onButtonPress: (string) => void;
|
||||
}
|
||||
|
||||
|
@ -42,11 +43,10 @@ class DialPadButton extends React.PureComponent<IButtonProps> {
|
|||
case DialPadButtonKind.Digit:
|
||||
return <AccessibleButton className="mx_DialPad_button" onClick={this.onClick}>
|
||||
{this.props.digit}
|
||||
<div className="mx_DialPad_buttonSubText">
|
||||
{this.props.digitSubtext}
|
||||
</div>
|
||||
</AccessibleButton>;
|
||||
case DialPadButtonKind.Delete:
|
||||
return <AccessibleButton className="mx_DialPad_button mx_DialPad_deleteButton"
|
||||
onClick={this.onClick}
|
||||
/>;
|
||||
case DialPadButtonKind.Dial:
|
||||
return <AccessibleButton className="mx_DialPad_button mx_DialPad_dialButton" onClick={this.onClick} />;
|
||||
}
|
||||
|
@ -55,7 +55,7 @@ class DialPadButton extends React.PureComponent<IButtonProps> {
|
|||
|
||||
interface IProps {
|
||||
onDigitPress: (string) => void;
|
||||
hasDialAndDelete: boolean;
|
||||
hasDial: boolean;
|
||||
onDeletePress?: (string) => void;
|
||||
onDialPress?: (string) => void;
|
||||
}
|
||||
|
@ -65,16 +65,15 @@ export default class Dialpad extends React.PureComponent<IProps> {
|
|||
render() {
|
||||
const buttonNodes = [];
|
||||
|
||||
for (const button of BUTTONS) {
|
||||
for (let i = 0; i < BUTTONS.length; i++) {
|
||||
const button = BUTTONS[i];
|
||||
const digitSubtext = BUTTON_LETTERS[i];
|
||||
buttonNodes.push(<DialPadButton key={button} kind={DialPadButtonKind.Digit}
|
||||
digit={button} onButtonPress={this.props.onDigitPress}
|
||||
digit={button} digitSubtext={digitSubtext} onButtonPress={this.props.onDigitPress}
|
||||
/>);
|
||||
}
|
||||
|
||||
if (this.props.hasDialAndDelete) {
|
||||
buttonNodes.push(<DialPadButton key="del" kind={DialPadButtonKind.Delete}
|
||||
onButtonPress={this.props.onDeletePress}
|
||||
/>);
|
||||
if (this.props.hasDial) {
|
||||
buttonNodes.push(<DialPadButton key="dial" kind={DialPadButtonKind.Dial}
|
||||
onButtonPress={this.props.onDialPress}
|
||||
/>);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue