Disable spellcheck on inputs (#215)

* Disable spellcheck on inputs * Cleanup alphabetical attributes
2020-01-06 12:45:35 +01:00 · 2020-01-06 12:45:35 +01:00 · 563559286a
commit 563559286a
parent 85db56cd0f
12 changed files with 109 additions and 91 deletions
--- a/packages/extension-ui/src/components/AddAccount.tsx
+++ b/packages/extension-ui/src/components/AddAccount.tsx
@ -23,8 +23,7 @@ function AddAccount ({ className }: Props): React.ReactElement<Props> {
          <AddAccountImage onClick={(): void => onAction('/account/create')}/>
        </Image>
        <div>
-          <TipText>You currently don&apos;t have any accounts. Either create a new account or if you have an existing
-            account you wish to use, import it with the seed phrase.</TipText>
+          <TipText>You currently don&apos;t have any accounts. Either create a new account or if you have an existing account you wish to use, import it with the seed phrase.</TipText>
        </div>
      </div>
    </>
--- a/packages/extension-ui/src/components/AddAccountImage.tsx
+++ b/packages/extension-ui/src/components/AddAccountImage.tsx
@ -12,49 +12,49 @@ interface Props {

 function AddAccountImage ({ onClick, className }: Props): React.ReactElement<Props> {
  return (
-    <svg className={className} width="265" height="265" viewBox="0 0 265 265" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="40" y="40" width="185" height="185">
-        <circle cx="132.5" cy="132.5" r="92" fill="white" fillOpacity="0.9" stroke="#E3E7ED" />
+    <svg className={className} width='265' height='265' viewBox='0 0 265 265' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <mask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='40' y='40' width='185' height='185'>
+        <circle cx='132.5' cy='132.5' r='92' fill='white' fillOpacity='0.9' stroke='#E3E7ED' />
      </mask>
-      <g mask="url(#mask0)">
-        <circle cx="132.5" cy="132.5" r="92" strokeWidth="1px" fill="#1A1B20" stroke="#E3E7ED"
+      <g mask='url(#mask0)'>
+        <circle cx='132.5' cy='132.5' r='92' strokeWidth='1px' fill='#1A1B20' stroke='#E3E7ED'
          onClick={onClick} />
-        <g filter="url(#filter0_f)">
-          <circle cx="132.5" cy="73.1154" r="12.1154" fill="#FEE05F" />
-          <circle cx="132.5" cy="104.269" r="12.1154" fill="#F5836B" />
-          <circle cx="132.5" cy="135.423" r="12.1154" fill="#EE6C89" />
-          <circle cx="132.5" cy="166.577" r="12.1154" fill="#397893" />
-          <circle cx="132.5" cy="166.577" r="12.1154" fill="#E2327D" />
-          <circle cx="77.1154" cy="104.269" r="12.1154" fill="#F0512A" />
-          <circle cx="77.1154" cy="135.423" r="12.1154" fill="#966EAC" />
-          <circle cx="77.1154" cy="166.577" r="12.1154" fill="#397893" />
-          <circle cx="77.1154" cy="166.577" r="12.1154" fill="#9195C9" />
-          <circle cx="187.884" cy="104.269" r="12.1154" fill="#FFFACA" />
-          <circle cx="187.884" cy="135.423" r="12.1154" fill="#ECCCDB" />
-          <circle cx="187.884" cy="166.577" r="12.1154" fill="#397893" />
-          <circle cx="187.884" cy="166.577" r="12.1154" fill="#ED3432" />
-          <circle cx="132.5" cy="197.731" r="12.1154" fill="#B24594" />
-          <circle cx="160.193" cy="86.9615" r="12.1154" fill="#FFBB50" />
-          <circle cx="160.193" cy="118.115" r="12.1154" fill="#F6E768" />
-          <circle cx="160.193" cy="149.269" r="12.1154" fill="#FF5A5A" />
-          <circle cx="160.193" cy="180.423" r="12.1154" fill="#397893" />
-          <circle cx="160.193" cy="180.423" r="12.1154" fill="#D6234A" />
-          <circle cx="104.808" cy="86.9615" r="12.1154" fill="#FFA800" />
-          <circle cx="104.808" cy="118.115" r="12.1154" fill="#F78D53" />
-          <circle cx="104.808" cy="149.269" r="12.1154" fill="#BD87BB" />
-          <circle cx="104.808" cy="180.423" r="12.1154" fill="#397893" />
-          <circle cx="104.808" cy="180.423" r="12.1154" fill="#AF71AF" />
+        <g filter='url(#filter0_f)'>
+          <circle cx='132.5' cy='73.1154' r='12.1154' fill='#FEE05F' />
+          <circle cx='132.5' cy='104.269' r='12.1154' fill='#F5836B' />
+          <circle cx='132.5' cy='135.423' r='12.1154' fill='#EE6C89' />
+          <circle cx='132.5' cy='166.577' r='12.1154' fill='#397893' />
+          <circle cx='132.5' cy='166.577' r='12.1154' fill='#E2327D' />
+          <circle cx='77.1154' cy='104.269' r='12.1154' fill='#F0512A' />
+          <circle cx='77.1154' cy='135.423' r='12.1154' fill='#966EAC' />
+          <circle cx='77.1154' cy='166.577' r='12.1154' fill='#397893' />
+          <circle cx='77.1154' cy='166.577' r='12.1154' fill='#9195C9' />
+          <circle cx='187.884' cy='104.269' r='12.1154' fill='#FFFACA' />
+          <circle cx='187.884' cy='135.423' r='12.1154' fill='#ECCCDB' />
+          <circle cx='187.884' cy='166.577' r='12.1154' fill='#397893' />
+          <circle cx='187.884' cy='166.577' r='12.1154' fill='#ED3432' />
+          <circle cx='132.5' cy='197.731' r='12.1154' fill='#B24594' />
+          <circle cx='160.193' cy='86.9615' r='12.1154' fill='#FFBB50' />
+          <circle cx='160.193' cy='118.115' r='12.1154' fill='#F6E768' />
+          <circle cx='160.193' cy='149.269' r='12.1154' fill='#FF5A5A' />
+          <circle cx='160.193' cy='180.423' r='12.1154' fill='#397893' />
+          <circle cx='160.193' cy='180.423' r='12.1154' fill='#D6234A' />
+          <circle cx='104.808' cy='86.9615' r='12.1154' fill='#FFA800' />
+          <circle cx='104.808' cy='118.115' r='12.1154' fill='#F78D53' />
+          <circle cx='104.808' cy='149.269' r='12.1154' fill='#BD87BB' />
+          <circle cx='104.808' cy='180.423' r='12.1154' fill='#397893' />
+          <circle cx='104.808' cy='180.423' r='12.1154' fill='#AF71AF' />
        </g>
        <path
-          d="M145.768 133.776C146.323 133.776 146.792 133.968 147.176 134.352C147.603 134.736 147.816 135.205 147.816 135.76C147.816 136.315 147.624 136.805 147.24 137.232C146.856 137.616 146.365 137.808 145.768 137.808H134.184V149.328C134.184 149.925 133.992 150.416 133.608 150.8C133.224 151.184 132.755 151.376 132.2 151.376C131.645 151.376 131.176 151.184 130.792 150.8C130.408 150.373 130.216 149.883 130.216 149.328V137.808H118.632C118.077 137.808 117.587 137.616 117.16 137.232C116.776 136.805 116.584 136.315 116.584 135.76C116.584 135.205 116.776 134.736 117.16 134.352C117.587 133.968 118.077 133.776 118.632 133.776H130.216V122.256C130.216 121.659 130.408 121.168 130.792 120.784C131.176 120.357 131.645 120.144 132.2 120.144C132.755 120.144 133.224 120.357 133.608 120.784C133.992 121.168 134.184 121.659 134.184 122.256V133.776H145.768Z"
-          fill="#242529" onClick={onClick} />
+          d='M145.768 133.776C146.323 133.776 146.792 133.968 147.176 134.352C147.603 134.736 147.816 135.205 147.816 135.76C147.816 136.315 147.624 136.805 147.24 137.232C146.856 137.616 146.365 137.808 145.768 137.808H134.184V149.328C134.184 149.925 133.992 150.416 133.608 150.8C133.224 151.184 132.755 151.376 132.2 151.376C131.645 151.376 131.176 151.184 130.792 150.8C130.408 150.373 130.216 149.883 130.216 149.328V137.808H118.632C118.077 137.808 117.587 137.616 117.16 137.232C116.776 136.805 116.584 136.315 116.584 135.76C116.584 135.205 116.776 134.736 117.16 134.352C117.587 133.968 118.077 133.776 118.632 133.776H130.216V122.256C130.216 121.659 130.408 121.168 130.792 120.784C131.176 120.357 131.645 120.144 132.2 120.144C132.755 120.144 133.224 120.357 133.608 120.784C133.992 121.168 134.184 121.659 134.184 122.256V133.776H145.768Z'
+          fill='#242529' onClick={onClick} />
      </g>
      <defs>
-        <filter id="filter0_f" x="-3" y="-7" width="271" height="284.846" filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB">
-          <feFlood floodOpacity="0" result="BackgroundImageFix"/>
-          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-          <feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur"/>
+        <filter id='filter0_f' x='-3' y='-7' width='271' height='284.846' filterUnits='userSpaceOnUse'
+          colorInterpolationFilters='sRGB'>
+          <feFlood floodOpacity='0' result='BackgroundImageFix'/>
+          <feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/>
+          <feGaussianBlur stdDeviation='10' result='effect1_foregroundBlur'/>
        </filter>
      </defs>
    </svg>
--- a/packages/extension-ui/src/components/Address.tsx
+++ b/packages/extension-ui/src/components/Address.tsx
@ -63,34 +63,33 @@ function Address ({ address, className, children, genesisHash, name, actions }:
  const [showActionsMenu, setShowActionsMenu] = useState(false);
  const [moveMenuUp, setIsMovedMenu] = useState(false);
  const actionsRef = useRef<HTMLDivElement>(null);
+
  useOutsideClick(actionsRef, () => (showActionsMenu && setShowActionsMenu(!showActionsMenu)));

  useEffect((): void => {
-    if (!address) {
-      return;
-    }
-    const [formatted, account, chain] = recodeAddress(address, accounts, genesisHash);
+    if (address) {
+      const [formatted, account, chain] = recodeAddress(address, accounts, genesisHash);

-    setFormatted(formatted);
-    setChain(chain);
-    setAccount(account);
+      setFormatted(formatted);
+      setChain(chain);
+      setAccount(account);
+    }
  }, [address]);

  useEffect(() => {
    if (!showActionsMenu) {
      setIsMovedMenu(false);
-      return;
-    }
-    if (!actionsRef.current) {
-      return;
-    }
-    const { bottom } = actionsRef.current.getBoundingClientRect();
-    if (bottom > ACCOUNTS_SCREEN_HEIGHT) {
-      setIsMovedMenu(true);
+    } else if (actionsRef.current) {
+      const { bottom } = actionsRef.current.getBoundingClientRect();
+
+      if (bottom > ACCOUNTS_SCREEN_HEIGHT) {
+        setIsMovedMenu(true);
+      }
    }
  }, [showActionsMenu]);

  const theme = ((chain && chain.icon) || 'polkadot') as 'polkadot';
+  const _onClick = (): void => setShowActionsMenu(!showActionsMenu);

  return (
    <div className={className}>
@ -107,10 +106,17 @@ function Address ({ address, className, children, genesisHash, name, actions }:
          </Info>
          {actions && (
            <>
-              <Settings onClick={(): void => setShowActionsMenu(!showActionsMenu)}>
+              <Settings onClick={_onClick}>
                {showActionsMenu ? <ActiveActionsIcon /> : <ActionsIcon />}
              </Settings>
-              {showActionsMenu && <MovableMenu reference={actionsRef} isMoved={moveMenuUp}>{actions}</MovableMenu>}
+              {showActionsMenu && (
+                <MovableMenu
+                  isMoved={moveMenuUp}
+                  reference={actionsRef}
+                >
+                  {actions}
+                </MovableMenu>
+              )}
            </>
          )}
        </AccountInfoRow>
--- a/packages/extension-ui/src/components/Checkbox.tsx
+++ b/packages/extension-ui/src/components/Checkbox.tsx
@ -19,7 +19,7 @@ function Checkbox ({ onChange, label, className, checked }: Props): React.ReactE
      <label>
        {label}
        <input
-          type="checkbox"
+          type='checkbox'
          checked={checked}
          onChange={((event): void => onChange(event.target.checked))}
        />
@ -60,7 +60,7 @@ export default styled(Checkbox)`
      border: 1px solid ${({ theme }): string => theme.inputBorderColor};
      border: 1px solid ${({ theme }): string => theme.inputBorderColor};
      &:after {
-        content: "";
+        content: '';
        display: none;
        width: 13px;
        height: 10px;
--- a/packages/extension-ui/src/components/Header.tsx
+++ b/packages/extension-ui/src/components/Header.tsx
@ -24,22 +24,27 @@ interface Props {
 function Header ({ children, className, showSettings, text, showBackArrow }: Props): React.ReactElement<Props> {
  const [showActionsMenu, setShowActionsMenu] = useState(false);
  const actionsRef = useRef(null);
+
  useOutsideClick(actionsRef, () => (showActionsMenu && setShowActionsMenu(!showActionsMenu)));

+  const _toggleSettings = (): void => setShowActionsMenu(!showActionsMenu);
+
  return (
    <div className={className}>
      <Container>
        <Branding>
-          {showBackArrow ? (
-            <BackLink to={'/'}>
-              <ArrowLeft/>
-            </BackLink>
-          ) : <Logo src={logo}/>
+          {showBackArrow
+            ? (
+              <BackLink to={'/'}>
+                <ArrowLeft/>
+              </BackLink>
+            )
+            : <Logo src={logo}/>
          }
          <LogoText>{text || 'polkadot{.js}'}</LogoText>
        </Branding>
        {showSettings && (
-          <SettingsToggle onClick={(): void => setShowActionsMenu(!showActionsMenu)}>
+          <SettingsToggle onClick={_toggleSettings}>
            <Gear isSelected={showActionsMenu} />
          </SettingsToggle>
        )}
--- a/packages/extension-ui/src/components/InputWithLabel.tsx
+++ b/packages/extension-ui/src/components/InputWithLabel.tsx
@ -3,9 +3,9 @@
 // of the Apache-2.0 license. See the LICENSE file for details.

 import React from 'react';
+import styled from 'styled-components';

 import Label from './Label';
-import styled from 'styled-components';
 import { Input } from './TextInputs';

 interface Props {
@ -32,14 +32,17 @@ function InputWithLabel ({ className, defaultValue, label, isFocused, isReadOnly
      label={label}
    >
      <Input
-        withError={isError}
+        autoCapitalize='off'
+        autoCorrect='off'
        autoFocus={isFocused}
        defaultValue={defaultValue || undefined}
-        readOnly={isReadOnly}
        onBlur={onBlur}
        onChange={_onChange}
+        readOnly={isReadOnly}
+        spellCheck={false}
        type={type}
        value={value}
+        withError={isError}
      />
    </Label>
  );
--- a/packages/extension-ui/src/components/Menu.tsx
+++ b/packages/extension-ui/src/components/Menu.tsx
@ -13,7 +13,10 @@ interface Props {

 function Menu ({ children, className, reference }: Props): React.ReactElement<Props> {
  return (
-    <div className={className} ref={reference}>
+    <div
+      className={className}
+      ref={reference}
+    >
      {children}
    </div>
  );
--- a/packages/extension-ui/src/components/Settings.tsx
+++ b/packages/extension-ui/src/components/Settings.tsx
@ -38,11 +38,7 @@ export default function Settings ({ reference }: { reference: React.MutableRefOb
  const setTheme = useContext(ThemeSwitchContext);

  useEffect(() => {
-    if (camera) {
-      settings.set({ camera: 'on' });
-    } else {
-      settings.set({ camera: 'off' });
-    }
+    settings.set({ camera: camera ? 'on' : 'off' });
  }, [camera]);

  // FIXME check against index, we need a better solution
@ -55,6 +51,7 @@ export default function Settings ({ reference }: { reference: React.MutableRefOb
    settings.set({ prefix });
    location.reload();
  };
+  const _onChangeTheme = (checked: boolean): void => setTheme(checked ? 'dark' : 'light');

  return (
    <SettingsMenu reference={reference}>
@ -62,17 +59,17 @@ export default function Settings ({ reference }: { reference: React.MutableRefOb
        <SettingTitle>Theme</SettingTitle>
        <Switch
          checked={themeContext.id === themes.dark.id}
-          uncheckedLabel='Light'
          checkedLabel='Dark'
-          onChange={(checked): void => setTheme(checked ? 'dark' : 'light')}
+          onChange={_onChangeTheme}
+          uncheckedLabel='Light'
        />
      </Setting>
      <Setting>
        <SettingTitle>External QR accounts and Access</SettingTitle>
        <CheckboxSetting
          checked={camera}
-          onChange={setCamera}
          label='Allow Camera Access'
+          onChange={setCamera}
        />
      </Setting>
      <Setting>
@ -87,9 +84,9 @@ export default function Settings ({ reference }: { reference: React.MutableRefOb
      {isPopup && (
        <Setting>
          <OpenInNewWindowButton
+            icon={FullScreenIcon}
            onClick={windowOpen}
            text='Open extension in new window'
-            icon={FullScreenIcon}
          />
        </Setting>
      )}
--- a/packages/extension-ui/src/components/Svg.tsx
+++ b/packages/extension-ui/src/components/Svg.tsx
@ -9,8 +9,8 @@ interface Props {
 }

 export default styled.span<Props>`
-    display: block;
-    mask: ${({ src }): string => `url(${src})`};
-    mask-size: cover;
-    background: ${({ theme }): string => theme.textColor}; 
+  display: block;
+  mask: ${({ src }): string => `url(${src})`};
+  mask-size: cover;
+  background: ${({ theme }): string => theme.textColor};
 `;
--- a/packages/extension-ui/src/components/TextAreaWithLabel.tsx
+++ b/packages/extension-ui/src/components/TextAreaWithLabel.tsx
@ -5,7 +5,7 @@
 import React from 'react';

 import Label from './Label';
-import { TextArea } from '@polkadot/extension-ui/components/TextInputs';
+import { TextArea } from './TextInputs';

 interface Props {
  className?: string;
@ -18,7 +18,7 @@ interface Props {
  value?: string;
 }

-function TextAreaWithLabel ({ className, isFocused, isReadOnly, label, onChange, value, rowsCount, isError }: Props): React.ReactElement<Props> {
+export default function TextAreaWithLabel ({ className, isFocused, isReadOnly, label, onChange, value, rowsCount, isError }: Props): React.ReactElement<Props> {
  const _onChange = ({ target: { value } }: React.ChangeEvent<HTMLTextAreaElement>): void => {
    onChange && onChange(value.trim());
  };
@ -29,15 +29,16 @@ function TextAreaWithLabel ({ className, isFocused, isReadOnly, label, onChange,
      label={label}
    >
      <TextArea
-        withError={isError}
+        autoCapitalize='off'
+        autoCorrect='off'
        autoFocus={isFocused}
        onChange={_onChange}
        readOnly={isReadOnly}
-        value={value}
        rows={rowsCount || 2}
+        spellCheck={false}
+        value={value}
+        withError={isError}
      />
    </Label>
  );
 }
-
-export default TextAreaWithLabel;
--- a/packages/extension-ui/src/components/View.tsx
+++ b/packages/extension-ui/src/components/View.tsx
@ -13,6 +13,7 @@ interface Props {

 function View ({ children, className }: Props): React.ReactElement<Props> {
  const [theme, setTheme] = useState(chooseTheme());
+  const _theme = themes[theme];

  const switchTheme = (theme: AvailableThemes): void => {
    localStorage.setItem('theme', theme);
@ -21,8 +22,8 @@ function View ({ children, className }: Props): React.ReactElement<Props> {

  return (
    <ThemeSwitchContext.Provider value={switchTheme}>
-      <ThemeProvider theme={themes[theme]}>
-        <BodyTheme theme={themes[theme]} />
+      <ThemeProvider theme={_theme}>
+        <BodyTheme theme={_theme} />
        <Main className={className}>
          {children}
        </Main>
--- a/packages/extension-ui/src/components/Warning.tsx
+++ b/packages/extension-ui/src/components/Warning.tsx
@ -17,7 +17,10 @@ function Warning ({ children, className, danger }: Props): React.ReactElement<Pr
  return (
    <div className={className}>
      <div>
-        <WarningImage danger={danger} src={WarningImageSrc} />
+        <WarningImage
+          danger={danger}
+          src={WarningImageSrc}
+        />
      </div>
      <div>
        {children}
@ -30,7 +33,7 @@ const WarningImage = styled(Svg)<Pick<Props, 'danger'>>`
  width: 16px;
  height: 14px;
  margin: 5px 10px 5px 0;
-  background: ${({ danger, theme }): string => danger ? theme.iconDangerColor : theme.iconWarningColor};  
+  background: ${({ danger, theme }): string => danger ? theme.iconDangerColor : theme.iconWarningColor};
 `;

 export default styled(Warning)`