Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 1x 1x 1x 1x | import { RefObject } from 'react';
import { StyleProp, View, ViewStyle } from 'react-native';
export type KeyboardLayout = 'numeric' | 'custom';
export type KeySize = 'small' | 'medium' | 'large';
export type KeyColorScheme = 'light' | 'dark' | 'default';
interface ITheme {
keyLabel: string;
keyBackground: string;
secondaryKeysLabel: string;
secondaryKeysBackground: string;
incrementKeysLabel: string;
incrementKeysBackground: string;
borderColor: string;
}
export const Themes: Record<KeyColorScheme, ITheme> = {
light: {
keyLabel: 'text-black',
keyBackground: 'bg-white',
secondaryKeysLabel: 'text-black',
secondaryKeysBackground: 'bg-gray-500',
incrementKeysLabel: 'text-accent',
incrementKeysBackground: 'bg-gray-400',
borderColor: 'bg-gray-800',
},
dark: {
keyLabel: 'text-white',
keyBackground: 'bg-gray-600',
secondaryKeysLabel: 'text-white',
secondaryKeysBackground: 'bg-gray-800',
incrementKeysLabel: 'text-accent',
incrementKeysBackground: 'bg-gray-600',
borderColor: 'bg-white',
},
default: {
keyLabel: '',
keyBackground: '',
secondaryKeysLabel: '',
secondaryKeysBackground: 'bg-secondary',
incrementKeysLabel: 'text-accent',
incrementKeysBackground: 'bg-element-nuance',
borderColor: 'bg-secondary',
},
};
export interface KeyboardSkeletonLoaderProps {
rows?: number;
theme: ITheme;
keySize: string;
columns?: number;
layout: KeyboardLayout;
}
export interface KeyBoardTypeProps {
theme: ITheme;
rows?: number;
keySize: string;
columns?: number;
includeComma?: boolean;
includeIncrements?: boolean;
disabledKeys: string[];
onKeyPress: (value: string) => void;
// React Native ref to a <View> (or component root)
ref?: RefObject<View>;
}
export interface KeyboardProps {
id?: string;
value: string;
style?: StyleProp<ViewStyle>;
layout?: KeyboardLayout;
keySize?: KeySize;
keyColorScheme?: KeyColorScheme;
customColorScheme?: ITheme;
columns?: number;
rows?: number;
showActions?: boolean;
includeComma?: boolean;
includeIncrements?: boolean;
// States
disabledKeys?: string[];
isLoading?: boolean;
// Component Functions
onClear?: () => void;
onSubmit?: () => void;
onChange: (value: string) => void;
onKeyPress?: (keyValue: string) => void;
}
// Keyboard Keys
export const secondaryKeys = [',', '⌫', 'OK'];
export const incrementKeys = ['⌫', '+5', '+10', '+20'];
export const defaultNumericKeys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
|