ipad iOS keyboard QWERTY layout

Sorry about doing this in a issue, but I don’t see where I can do it elsewhere 😅 I’m creating an issue in this project because of its name, but the files inside it don’t indicate where I can put the following layout code. So I post it here, and I let you tell me where it can goes:

// ipad iOS QWERTY layout
const layout = {
  default: [
    'q w e r t y u i o p {bksp}',
    'a s d f g h j k l {enter}',
    '{shift} z x c v b n m , . {shift}',
    '{alt} {smileys} {space} {altright} {downkeyboard}'
  ],
  shift: [
    'Q W E R T Y U I O P {bksp}',
    'A S D F G H J K L {enter}',
    '{shiftactivated} Z X C V B N M , . {shiftactivated}',
    '{alt} {smileys} {space} {altright} {downkeyboard}'
  ],
  alt: [
    '1 2 3 4 5 6 7 8 9 0 {bksp}',
    `@ # $ & * ( ) ' " {enter}`,
    '{shift} % - + = / ; : ! ? {shift}',
    '{default} {smileys} {space} {back} {downkeyboard}'
  ],
  smileys: [
    '😀 😊 😅 😂 🙂 😉 😍 😛 😠 😎 {bksp}',
    `😏 😬 😭 😓 😱 😪 😬 😴 😯 {enter}`,
    '😐 😇 🤣 😘 😚 😆 😡 😥 😓 🙄 {shift}',
    '{default} {smileys} {space} {altright} {downkeyboard}'
  ]
}

@import '../../assets/styles/variables';

/**
 * hg-theme-default theme
 */
.simple-keyboard {
  width: 750px;
  margin: auto;

  .hg-button {
    display: inline-block;
    flex-grow: 1;
    cursor: pointer;
  }

  .hg-row {
    display: flex;

    &:not(:last-child) {
      margin-bottom: $keyboard-margins;
    }

    .hg-button:not(:last-child) {
      margin-right: $keyboard-margins;
    }

    &:nth-child(2) {
      margin-left: 18px;
    }
  }

  &.hg-theme-default {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 5px;
    border-radius: 5px;

    &.hg-layout-custom {
      background-color: $keyboard-background-color;
      padding: 5px;
    }

    .hg-button {
      border-radius: 5px;
      box-sizing: border-box;
      padding: 0;
      background: white;
      border-bottom: 1px solid #b5b5b5;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
      font-weight: 400;
      font-size: 20px;
      max-width: 60px;
      min-width: 60px;
      height: 60px;
      min-height: 60px;

      &:active,
      &:focus {
        background: #e4e4e4;
      }

      &.hg-functionBtn {
        background-color: $keyboard-button-action-color;
      }

      &.hg-button-space,
      &.hg-button-shift,
      &.hg-button-shiftactivated {
        background-color: #ffffff;
      }
    }

    .hg-button-space {
      max-width: 448px;
      min-width: 448px;
    }

    .hg-button-enter {
      max-width: 110px;
      min-width: 110px;
    }

    .hg-button-altright,
    .hg-button-back {
      min-width: 80px;
      max-width: 80px;
    }
  }
}

All sizes are fixed in order to have a better design, but can be readapted following the needs.

And the key press logic:

const isFunctionButton = names => button => [...names].includes(button)
const isShiftButton = isFunctionButton(['{shift}', '{shiftactivated}'])
const isAltButton = isFunctionButton(['{alt}', '{altright}'])
const isSmileysButton = isFunctionButton(['{smileys}'])
const isDefaultButton = isFunctionButton(['{default}'])

Here is what it looks:

Is there a place where all keyboards are organised by layout or by language? For example: where I can find the layout iPad iOS QWERTY or AZERTY? Idem for iOS devices, Android, etc.

[hodgef]

Sorry for the delay, somehow I’m not able to getting this to work on a sandbox - If you have time, could you edit this sandbox and add in your changes?

If you don’t have time - I could give it a try soon, just got my hands tied atm 😅 I’ll be closing this in the meantime.

Regards, Francisco Hodge

[MadDeveloper]

Sorry I didn’t gave you the full code! I’ve developed the entire behaviour (single tap and double tap on shift, reverting to lowercase if shift is not locked, etc.). Here is the full code (using react-simple-keyboard):

/* Some oversights from the css */
$keyboard-background-color: #d2d3db;
$keyboard-button-action-color: #adb5bc;
$keyboard-margins: 8px;

// Keyboard.js
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import SimpleKeyboard from 'react-simple-keyboard'

import { layout, display } from './layout'

import './index.scss' // the file I've already posted above.

const isFunctionButton = names => button => [...names].includes(button)
const isShiftButton = isFunctionButton(['{shift}', '{shiftactivated}'])
const isAltButton = isFunctionButton(['{alt}', '{altright}'])
const isSmileysButton = isFunctionButton(['{smileys}'])
const isDefaultButton = isFunctionButton(['{default}'])

class Keyboard extends Component {
  static propTypes = {
    onKeyPress: PropTypes.func
  }

  state = {
    layoutName: 'default',
    shiftActivated: false,
    shiftActivatedTime: null,
    shiftLocked: false
  }

  onKeyPress = button => {
    if (isShiftButton(button)) {
      this.shiftButtonPressLogic()
    } else if (isAltButton(button)) {
      this.handleAltButton()
    } else if (isDefaultButton(button)) {
      this.handleDefaultButton()
    } else if (isSmileysButton(button)) {
      this.handleSmileysButton()
    } else {
      this.genericButtonPressLogic(button)
    }
  }

  shiftButtonPressLogic = () => {
    const { state: { shiftLocked, shiftActivatedTime } } = this
    const now = Date.now()

    this.setState({ shiftActivated: true })

    if (!shiftLocked && shiftActivatedTime && now - shiftActivatedTime < 300) {
      this.setState({ shiftLocked: true })
    } else {
      this.setState({ shiftActivatedTime: now, shiftLocked: false })
      this.handleShiftButton()
    }
  }

  genericButtonPressLogic = button => {
    const { state: { layoutName, shiftLocked } } = this

    if (!shiftLocked) {
      const newLayoutName = layoutName !== 'shift' ? layoutName : 'default'

      this.setState({ shiftActivated: false, layoutName: newLayoutName })
    }

    if (typeof this.props.onKeyPress === 'function') {
      return this.props.onKeyPress(button)
    }
  }

  handleFunctionButton = ownLayoutName => this.setState(({ layoutName }) => ({ layoutName: layoutName !== ownLayoutName ? ownLayoutName : 'default' }))

  handleShiftButton = () => this.handleFunctionButton('shift')

  handleAltButton = () => this.handleFunctionButton('alt')

  handleSmileysButton = () => this.handleFunctionButton('smileys')

  handleDefaultButton = () => this.handleFunctionButton('default')

  render() {
    const { state: { layoutName }, onKeyPress } = this

    return (
      <SimpleKeyboard
        useTouchEvents
        onKeyPress={onKeyPress}
        physicalKeyboardHighlight
        layout={layout}
        layoutName={layoutName}
        display={display}
        mergeDisplay
      />
    )
  }
}

// layout.js
export const layout = {
  default: [
    'q w e r t y u i o p {bksp}',
    'a s d f g h j k l {enter}',
    '{shift} z x c v b n m , . {shift}',
    '{alt} {smileys} {space} {altright} {downkeyboard}'
  ],
  shift: [
    'Q W E R T Y U I O P {bksp}',
    'A S D F G H J K L {enter}',
    '{shiftactivated} Z X C V B N M , . {shiftactivated}',
    '{alt} {smileys} {space} {altright} {downkeyboard}'
  ],
  alt: [
    '1 2 3 4 5 6 7 8 9 0 {bksp}',
    `@ # $ & * ( ) ' " {enter}`,
    '{shift} % - + = / ; : ! ? {shift}',
    '{default} {smileys} {space} {back} {downkeyboard}'
  ],
  smileys: [
    '😀 😊 😅 😂 🙂 😉 😍 😛 😠 😎 {bksp}',
    `😏 😬 😭 😓 😱 😪 😬 😴 😯 {enter}`,
    '😐 😇 🤣 😘 😚 😆 😡 😥 😓 🙄 {shift}',
    '{default} {smileys} {space} {altright} {downkeyboard}'
  ]
}

export const display = {
  '{bksp}': '⌫',
  '{enter}': 'return',
  '{shift}': '⇧',
  '{shiftactivated}': '⬆',
  '{alt}': '.?123',
  '{altright}': '.?123',
  '{smileys}': '😀',
  '{downkeyboard}': '▿',
  '{back}': '⤺',
  '{default}': 'ABC'
}