RN_Template/RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoTextField.tsx

/* eslint-disable react/jsx-key */
import { TextStyle, ViewStyle } from "react-native"

import { Icon } from "@/components/Icon"
import { TextField } from "@/components/TextField"
import type { ThemedStyle } from "@/theme/types"

import { DemoDivider } from "../DemoDivider"
import { Demo } from "./types"
import { DemoUseCase } from "../DemoUseCase"

const $customInputStyle: ThemedStyle<TextStyle> = ({ colors }) => ({
  backgroundColor: colors.error,
  color: colors.palette.neutral100,
})

const $customInputWrapperStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
  backgroundColor: colors.error,
  borderColor: colors.palette.neutral800,
})

const $customContainerStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
  backgroundColor: colors.error,
})

const $customLabelAndHelperStyle: ThemedStyle<TextStyle> = ({ colors }) => ({
  color: colors.palette.neutral100,
})

const $customInputWithAbsoluteAccessoriesStyle: ThemedStyle<ViewStyle> = ({ spacing }) => ({
  marginHorizontal: spacing.xxl,
})

const $customLeftAccessoryStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
  backgroundColor: colors.error,
  position: "absolute",
  left: 0,
})

const $customRightAccessoryStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
  backgroundColor: colors.error,
  position: "absolute",
  right: 0,
})

export const DemoTextField: Demo = {
  name: "TextField",
  description: "demoTextField:description",
  data: ({ themed }) => [
    <DemoUseCase
      name="demoTextField:useCase.statuses.name"
      description="demoTextField:useCase.statuses.description"
    >
      <TextField
        value="Labore occaecat in id eu commodo aliquip occaecat veniam officia pariatur."
        labelTx="demoTextField:useCase.statuses.noStatus.label"
        labelTxOptions={{ prop: "label" }}
        helperTx="demoTextField:useCase.statuses.noStatus.helper"
        helperTxOptions={{ prop: "helper" }}
        placeholderTx="demoTextField:useCase.statuses.noStatus.placeholder"
        placeholderTxOptions={{ prop: "placeholder" }}
      />

      <DemoDivider size={24} />

      <TextField
        status="error"
        value="Est Lorem duis sunt sunt duis proident minim elit dolore incididunt pariatur eiusmod anim cillum."
        labelTx="demoTextField:useCase.statuses.error.label"
        labelTxOptions={{ prop: "label" }}
        helperTx="demoTextField:useCase.statuses.error.helper"
        helperTxOptions={{ prop: "helper" }}
        placeholderTx="demoTextField:useCase.statuses.error.placeholder"
        placeholderTxOptions={{ prop: "placeholder" }}
      />

      <DemoDivider size={24} />

      <TextField
        status="disabled"
        value="Eu ipsum mollit non minim voluptate nulla fugiat aliqua ullamco aute consectetur nulla nulla amet."
        labelTx="demoTextField:useCase.statuses.disabled.label"
        labelTxOptions={{ prop: "label" }}
        helperTx="demoTextField:useCase.statuses.disabled.helper"
        helperTxOptions={{ prop: "helper" }}
        placeholderTx="demoTextField:useCase.statuses.disabled.placeholder"
        placeholderTxOptions={{ prop: "placeholder" }}
      />
    </DemoUseCase>,

    <DemoUseCase
      name="demoTextField:useCase.passingContent.name"
      description="demoTextField:useCase.passingContent.description"
    >
      <TextField
        labelTx="demoTextField:useCase.passingContent.viaLabel.labelTx"
        labelTxOptions={{ prop: "label" }}
        helperTx="demoTextField:useCase.passingContent.viaLabel.helper"
        helperTxOptions={{ prop: "helper" }}
        placeholderTx="demoTextField:useCase.passingContent.viaLabel.placeholder"
        placeholderTxOptions={{ prop: "placeholder" }}
      />

      <DemoDivider size={24} />

      <TextField
        labelTx="showroomScreen:demoViaSpecifiedTxProp"
        labelTxOptions={{ prop: "label" }}
        helperTx="showroomScreen:demoViaSpecifiedTxProp"
        helperTxOptions={{ prop: "helper" }}
        placeholderTx="showroomScreen:demoViaSpecifiedTxProp"
        placeholderTxOptions={{ prop: "placeholder" }}
      />

      <DemoDivider size={24} />

      <TextField
        value="Reprehenderit Lorem magna non consequat ullamco cupidatat."
        labelTx="demoTextField:useCase.passingContent.rightAccessory.label"
        labelTxOptions={{ prop: "label" }}
        helperTx="demoTextField:useCase.passingContent.rightAccessory.helper"
        helperTxOptions={{ prop: "helper" }}
        RightAccessory={(props) => <Icon icon="ladybug" containerStyle={props.style} size={21} />}
      />

      <DemoDivider size={24} />

      <TextField
        labelTx="demoTextField:useCase.passingContent.leftAccessory.label"
        labelTxOptions={{ prop: "label" }}
        helperTx="demoTextField:useCase.passingContent.leftAccessory.helper"
        helperTxOptions={{ prop: "helper" }}
        value="Eiusmod exercitation mollit elit magna occaecat eiusmod Lorem minim veniam."
        LeftAccessory={(props) => <Icon icon="ladybug" containerStyle={props.style} size={21} />}
      />

      <DemoDivider size={24} />

      <TextField
        labelTx="demoTextField:useCase.passingContent.supportsMultiline.label"
        labelTxOptions={{ prop: "label" }}
        helperTx="demoTextField:useCase.passingContent.supportsMultiline.helper"
        helperTxOptions={{ prop: "helper" }}
        value="Eiusmod exercitation mollit elit magna occaecat eiusmod Lorem minim veniam. Laborum Lorem velit velit minim irure ad in ut adipisicing consectetur."
        multiline
        RightAccessory={(props) => <Icon icon="ladybug" containerStyle={props.style} size={21} />}
      />
    </DemoUseCase>,

    <DemoUseCase
      name="demoTextField:useCase.styling.name"
      description="demoTextField:useCase.styling.description"
    >
      <TextField
        labelTx="demoTextField:useCase.styling.styleInput.label"
        labelTxOptions={{ prop: "label" }}
        helperTx="demoTextField:useCase.styling.styleInput.helper"
        helperTxOptions={{ prop: "helper" }}
        value="Laborum cupidatat aliquip sunt sunt voluptate sint sit proident sunt mollit exercitation ullamco ea elit."
        style={themed($customInputStyle)}
      />

      <DemoDivider size={24} />

      <TextField
        labelTx="demoTextField:useCase.styling.styleInputWrapper.label"
        labelTxOptions={{ prop: "label" }}
        helperTx="demoTextField:useCase.styling.styleInputWrapper.helper"
        helperTxOptions={{ prop: "helper" }}
        value="Aute velit esse dolore pariatur exercitation irure nulla do sunt in duis mollit duis et."
        inputWrapperStyle={themed($customInputWrapperStyle)}
        style={themed($customInputStyle)}
      />

      <DemoDivider size={24} />

      <TextField
        labelTx="demoTextField:useCase.styling.styleContainer.label"
        labelTxOptions={{ prop: "label" }}
        helperTx="demoTextField:useCase.styling.styleContainer.helper"
        helperTxOptions={{ prop: "helper" }}
        value="Aliquip proident commodo adipisicing non adipisicing Lorem excepteur ullamco voluptate laborum."
        style={themed($customInputStyle)}
        containerStyle={themed($customContainerStyle)}
        inputWrapperStyle={themed($customInputWrapperStyle)}
      />

      <DemoDivider size={24} />

      <TextField
        labelTx="demoTextField:useCase.styling.styleLabel.label"
        labelTxOptions={{ prop: "label" }}
        helperTx="demoTextField:useCase.styling.styleLabel.helper"
        helperTxOptions={{ prop: "helper" }}
        value="Ex culpa in consectetur dolor irure velit."
        style={themed($customInputStyle)}
        containerStyle={themed($customContainerStyle)}
        inputWrapperStyle={themed($customInputWrapperStyle)}
        HelperTextProps={{ style: themed($customLabelAndHelperStyle) }}
        LabelTextProps={{ style: themed($customLabelAndHelperStyle) }}
      />

      <DemoDivider size={24} />

      <TextField
        labelTx="demoTextField:useCase.styling.styleAccessories.label"
        labelTxOptions={{ prop: "label" }}
        helperTx="demoTextField:useCase.styling.styleAccessories.helper"
        helperTxOptions={{ prop: "helper" }}
        value="Aute nisi dolore fugiat anim mollit nulla ex minim ipsum ex elit."
        style={themed($customInputWithAbsoluteAccessoriesStyle)}
        LeftAccessory={() => (
          <Icon
            icon="ladybug"
            containerStyle={themed($customLeftAccessoryStyle)}
            color="white"
            size={41}
          />
        )}
        RightAccessory={() => (
          <Icon
            icon="ladybug"
            containerStyle={themed($customRightAccessoryStyle)}
            color="white"
            size={41}
          />
        )}
      />
    </DemoUseCase>,
  ],
}