@ornikar/kitt-universal 1.0.0-pre

package/src/forms/InputText/InputText.tsx

@@ -0,0 +1,172 @@
+import { EyeIcon, EyeOffIcon } from '@ornikar/kitt-icons';
+import type { ReactElement } from 'react';
+import React, { forwardRef } from 'react';
+import type { KeyboardTypeOptions, TextInput as RNTextInput, TextInputProps as RNTextInputProps } from 'react-native';
+import { Platform } from 'react-native';
+import styled, { css, useTheme } from 'styled-components/native';
+import { TypographyIcon } from '../../typography/TypographyIcon';
+import type { InputFormState } from '../InputFormState';
+import { useInputText } from './useInputText';
+
+type InputTextType = 'text' | 'email' | 'password' | 'username';
+export type InputTextState = 'default' | 'invalid' | 'disabled' | 'hover' | 'focus';
+
+export interface InputTextProps extends Exclude<RNTextInputProps, 'nativeID'> {
+  id?: string;
+  name?: string;
+  disabled?: boolean;
+  type: InputTextType;
+  minHeight?: number;
+  state?: InputFormState;
+  /** @internal */
+  internalForceState?: InputTextState;
+}
+
+export interface TextInputMixinProps {
+  state: InputTextState;
+}
+interface InputProps extends TextInputMixinProps {
+  minHeight: number;
+}
+
+export const styledTextInputMixin = css<TextInputMixinProps>`
+  /* stylelint-disable declaration-property-value-allowed-list */
+  background-color: ${({ theme, state }) =>
+    state === 'disabled'
+      ? theme.kitt.forms.input.states.disabled.backgroundColor
+      : theme.kitt.forms.input.states.default.backgroundColor};
+  border-width: ${({ theme }) => theme.kitt.forms.input.borderWidth};
+  border-radius: ${({ theme }) => theme.kitt.forms.input.borderRadius};
+  border-color: ${({ theme, state }) => theme.kitt.forms.input.states[state].borderColor};
+  font-size: ${({ theme }) => theme.kitt.typography.types.bodies.configs.body.baseAndSmall.fontSize};
+  color: ${({ theme, state }) => theme.kitt.typography.colors[theme.kitt.forms.input.states[state].color]};
+  font-family: ${({ theme }) => theme.kitt.typography.types.bodies.fontFamily.regular};
+`;
+
+const Input = styled.TextInput<InputProps>`
+  /* stylelint-disable declaration-bang-space-before */
+  /* stylelint-disable comment-word-disallowed-list */
+
+  /* FIXME: text input is not vertically centered on iOS because of bigger line-height */
+  ${styledTextInputMixin}
+  padding: ${({ theme, multiline }) =>
+    !multiline && Platform.OS === 'ios' ? theme.kitt.forms.input.paddingSingleLineIOS : theme.kitt.forms.input.padding};
+  line-height: ${({ theme, multiline }) =>
+    !multiline && Platform.OS === 'ios' ? 0 : theme.kitt.typography.types.bodies.configs.body.baseAndSmall.lineHeight};
+  min-height: ${({ minHeight }) => minHeight}px;
+`;
+
+const Container = styled.View`
+  margin-top: ${({ theme }) => theme.kitt.forms.input.marginTop};
+  margin-bottom: ${({ theme }) => theme.kitt.forms.input.marginBottom};
+`;
+
+const PasswordButtonContainer = styled.Pressable`
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  justify-content: center;
+  padding: ${({ theme }) => theme.kitt.forms.input.passwordButtonIconSize / 2}px;
+`;
+
+const getInputState = ({
+  isDisabled,
+  isFocused,
+  formState,
+}: {
+  isFocused: boolean;
+  formState: InputFormState;
+  isDisabled: boolean;
+}): InputTextState => {
+  if (isDisabled) return 'disabled';
+  if (isFocused) return 'focus';
+  if (formState === 'invalid') return 'invalid';
+  return 'default';
+};
+
+const keyboardTypeByTextInputType: Record<InputTextType, KeyboardTypeOptions> = {
+  text: 'default',
+  email: 'email-address',
+  password: 'default',
+  username: 'default',
+};
+
+const autoCompleteTypeByType: Record<InputTextType, 'off' | 'email' | 'password' | 'name'> = {
+  text: 'off',
+  email: 'email',
+  password: 'password',
+  username: 'name',
+};
+
+const autoCorrectByType: Record<InputTextType, boolean> = {
+  text: true,
+  email: false,
+  password: false,
+  username: false,
+};
+
+const textContentTypeByType: Record<InputTextType, 'none' | 'emailAddress' | 'password' | 'username'> = {
+  text: 'none',
+  email: 'emailAddress',
+  password: 'password',
+  username: 'username',
+};
+
+export const InputText = forwardRef<RNTextInput, InputTextProps>(
+  (
+    {
+      id,
+      minHeight = 0,
+      type,
+      state: formState,
+      internalForceState,
+      disabled = false,
+      onFocus,
+      onBlur,
+      ...props
+    }: InputTextProps,
+    ref,
+  ): ReactElement => {
+    const { isFocused, handleInputBlur, handleInputFocus, isPasswordVisible, togglePasswordVisibility } =
+      useInputText();
+    const theme = useTheme();
+    const state = internalForceState || getInputState({ isFocused, isDisabled: disabled, formState });
+    return (
+      <Container>
+        <Input
+          ref={ref}
+          nativeID={id}
+          editable={!disabled}
+          keyboardType={keyboardTypeByTextInputType[type]}
+          autoCompleteType={autoCompleteTypeByType[type]}
+          autoCorrect={autoCorrectByType[type]}
+          minHeight={minHeight}
+          textContentType={textContentTypeByType[type]}
+          placeholderTextColor={theme.kitt.typography.colors[theme.kitt.forms.input.placeholderColor]}
+          selectionColor={theme.kitt.forms.input.selectionColor}
+          secureTextEntry={type === 'password' && !isPasswordVisible}
+          {...props}
+          state={state}
+          onFocus={(e) => {
+            handleInputFocus();
+            if (onFocus) onFocus(e);
+          }}
+          onBlur={(e) => {
+            handleInputBlur();
+            if (onBlur) onBlur(e);
+          }}
+        />
+        {type === 'password' && !disabled && (
+          <PasswordButtonContainer onPress={togglePasswordVisibility}>
+            <TypographyIcon
+              icon={isPasswordVisible ? <EyeIcon /> : <EyeOffIcon />}
+              size={theme.kitt.forms.input.passwordButtonIconSize}
+              color={theme.kitt.forms.input.states[state].passwordButtonIconColor}
+            />
+          </PasswordButtonContainer>
+        )}
+      </Container>
+    );
+  },
+);