@ornikar/kitt-universal 1.0.0 → 1.0.1

package/src/forms/InputText/InputText.tsx

@@ -1,172 +0,0 @@
-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>
-    );
-  },
-);