@cleartrip/ct-design-field 4.0.0 → 5.0.0

package/src/Field.tsx

@@ -0,0 +1,201 @@
+import { cloneElement, forwardRef, isValidElement, useState } from 'react';
+import { IFieldProps, IFieldRef } from './type';
+import { Box } from '@cleartrip/ct-design-box';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import { Container } from '@cleartrip/ct-design-container';
+import { Typography } from '@cleartrip/ct-design-typography';
+import InputFieldCore from './Input';
+import FieldLabelWrapper from './Label';
+import { getFieldContainerStyles } from './style';
+import TextArea from './TextAreaInput';
+
+const staticStyles = makeStyles((theme) => {
+  return {
+    fieldWrapper: {
+      flex: 1,
+      flexShrink: 1,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'relative',
+      height: '100%',
+    },
+    promptBox: {
+      paddingLeft: theme.spacing[4],
+      paddingRight: theme.spacing[4],
+      display: 'flex',
+      alignItems: 'center',
+    },
+    promptIcon: {
+      height: theme.size[4],
+      width: theme.size[4],
+      paddingRight: theme.spacing[1],
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    flexNoShrink: {
+      flexShrink: 0,
+    },
+    fieldContainer: {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'row',
+      borderStyle: theme?.border.style.solid,
+      borderRadius: theme?.border.radius[8],
+      boxSizing: 'border-box',
+    },
+  };
+});
+
+const Field = forwardRef<IFieldRef, IFieldProps & { numberOfLines?: number }>(
+  (
+    {
+      prefix,
+      onBlur,
+      onFocus,
+      onChange,
+      onKeyDown,
+      onPressIn,
+      onSelect,
+      value,
+      autoCapitalize,
+      autoFocus = false,
+      disabled,
+      inputMode,
+      placeholder,
+      prefixGap: _prefixGap,
+      prompt,
+      readOnly,
+      placeholderType = 'default',
+      suffix,
+      suffixGap: _suffixGap,
+      type,
+      variant,
+      styleConfig = {},
+      fieldTypographyVariant,
+      id,
+      maxLength,
+      numberOfLines,
+      showSoftInputOnFocus,
+      customSpacingTop,
+    },
+    ref,
+  ) => {
+    const [focus, setFocus] = useState<boolean>(autoFocus);
+    const _isFocused = focus || value.length > 0;
+
+    const { promptStyles } = styleConfig || {};
+    const { Icon: promptIcon, message: promptMessage, hasError = false } = prompt || {};
+    const fieldContainerStyles = useStyles(
+      (theme) => ({
+        root: getFieldContainerStyles({
+          variant: variant ?? 'md',
+          theme,
+          hasError,
+          focus,
+          value,
+          disabled,
+        }),
+      }),
+      [variant, hasError, focus, value, disabled, styleConfig],
+    );
+
+    const InputField = numberOfLines && numberOfLines > 1 ? TextArea : InputFieldCore;
+
+    return (
+      <Box boxSize='micro' styleConfig={styleConfig}>
+        <Container
+          styleConfig={{
+            root: [fieldContainerStyles.root, staticStyles.fieldContainer, ...(styleConfig.fieldContainer || [])],
+          }}
+        >
+          {isValidElement(prefix) && (
+            <Container styleConfig={{ root: [staticStyles.flexNoShrink] }}>{cloneElement(prefix, { focus })}</Container>
+          )}
+          <Container styleConfig={{ root: [staticStyles.fieldWrapper, ...(styleConfig.field || [])] }}>
+            <FieldLabelWrapper
+              id={id}
+              variant={variant}
+              type={type}
+              value={value}
+              focus={_isFocused}
+              placeholder={placeholder}
+              placeholderType={placeholderType}
+              disabled={disabled}
+              styleConfig={styleConfig}
+              prefix={prefix}
+            />
+            <InputField
+              id={id}
+              ref={ref}
+              value={value}
+              disabled={disabled}
+              placeholder={placeholder}
+              placeholderType={placeholderType}
+              autoFocus={autoFocus}
+              readOnly={readOnly}
+              type={type}
+              inputMode={inputMode}
+              autoCapitalize={autoCapitalize}
+              fieldTypographyVariant={fieldTypographyVariant}
+              styleConfig={styleConfig}
+              focus={_isFocused}
+              onChange={onChange}
+              onSelect={onSelect}
+              onPressIn={onPressIn}
+              onFocus={(e) => {
+                setFocus(true);
+                onFocus?.(e);
+              }}
+              onBlur={(e) => {
+                setFocus(false);
+                onBlur?.(e);
+              }}
+              onKeyDown={onKeyDown}
+              maxLength={maxLength}
+              numberOfLines={numberOfLines}
+              showSoftInputOnFocus={showSoftInputOnFocus}
+              customSpacingTop={customSpacingTop}
+            />
+          </Container>
+          {isValidElement(suffix) && (
+            <Container styleConfig={{ root: [staticStyles.flexNoShrink] }}>{cloneElement(suffix, { focus })}</Container>
+          )}
+        </Container>
+        {(promptIcon || promptMessage) && (
+          <Box
+            boxSize='pico'
+            horizontal={true}
+            styleConfig={{
+              root: [staticStyles.promptBox, ...(promptStyles?.promptBox || [])],
+            }}
+          >
+            {promptIcon && (
+              <Container
+                styleConfig={{ root: [staticStyles.promptIcon, ...(promptStyles?.promptIconContainer || [])] }}
+              >
+                {promptIcon}
+              </Container>
+            )}
+            {promptMessage && (
+              <Typography
+                variant='B3'
+                color={hasError ? 'warning' : 'success'}
+                styleConfig={promptStyles?.promptMessageTypography}
+              >
+                {promptMessage}
+              </Typography>
+            )}
+          </Box>
+        )}
+      </Box>
+    );
+  },
+);
+
+Field.displayName = 'Field';
+
+export default Field;

package/src/FieldAction/index.tsx

@@ -0,0 +1,47 @@
+import { Box } from '@cleartrip/ct-design-box';
+import { DottedLoader } from '@cleartrip/ct-design-dotted-loader';
+import { Typography, TypographyColor } from '@cleartrip/ct-design-typography';
+
+import { IFieldAction } from './type';
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+
+const staticStyles = makeStyles((theme) => ({
+  root: {
+    paddingRight: theme.spacing[4],
+  },
+}));
+
+const FieldAction: React.FC<IFieldAction> = ({ actionsList = [] }) => {
+  return (
+    <Box boxSize='tiny' horizontal={true} styleConfig={{ root: [staticStyles.root] }}>
+      {actionsList.map((actionItem) => {
+        const { label, color, onClick, isDisabled, isLoading } = actionItem || {};
+
+        if (isLoading) {
+          return <DottedLoader key='fieldAction' />;
+        }
+
+        return (
+          <Typography
+            key='fieldAction'
+            variant='HM4'
+            color={isDisabled ? TypographyColor.DISABLED : color}
+            onClick={
+              !isDisabled
+                ? onClick
+                : () => {
+                    // no-op
+                  }
+            }
+            isClickable={true}
+            isDisabled={isDisabled}
+          >
+            {label}
+          </Typography>
+        );
+      })}
+    </Box>
+  );
+};
+
+export default FieldAction;

package/src/FieldAction/type.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+import { TypographyColorType } from '@cleartrip/ct-design-typography';
+
+export interface IActionItem {
+  label: ReactNode;
+  onClick?: () => void;
+  isLoading?: boolean;
+  isDisabled?: boolean;
+  color?: TypographyColorType;
+}
+
+export interface IFieldAction {
+  actionsList: IActionItem[];
+}

package/src/FieldIcon/index.tsx

@@ -0,0 +1,48 @@
+import { isValidElement } from 'react';
+
+import { Container } from '@cleartrip/ct-design-container';
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+
+import { IFieldIcon } from './type';
+
+/**
+ * This component is used to Show the Icon in Input box.
+ * If there is no onclick prop then we assume that it is only for show icon and so we will add styling related to
+ * pointer events none so input events can be triggered over the icon as well in the components.
+ */
+
+const staticStyles = makeStyles((theme) => {
+  return {
+    root: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginLeft: theme.spacing[4],
+      width: theme.size[6],
+      height: theme.size[6],
+    },
+  };
+});
+const FieldIcon: React.FC<IFieldIcon> = ({ icon, onClick, focus, focusedIcon, styleConfig }) => {
+  const { root: customRootStyles = [] } = styleConfig || {};
+
+  if (!isValidElement(icon)) return <></>;
+
+  let IconPrefix = icon;
+
+  if (focus && isValidElement(focusedIcon)) {
+    IconPrefix = focusedIcon;
+  }
+
+  const handleClick = () => {
+    onClick?.();
+  };
+
+  return (
+    <Container styleConfig={{ root: [staticStyles.root, ...customRootStyles] }} onClick={handleClick}>
+      {IconPrefix}
+    </Container>
+  );
+};
+
+export default FieldIcon;

package/src/FieldIcon/type.ts

@@ -0,0 +1,52 @@
+import { Styles } from '@cleartrip/ct-design-types';
+import { ReactNode } from 'react';
+
+/**
+ * Represents the types for a field icon component.
+ */
+export interface IFieldIcon {
+  /**
+   * The primary icon to be displayed.
+   */
+  /**
+   * The primary icon to be displayed.
+   */
+  icon: ReactNode;
+
+  /**
+   * Optional click handler for the icon.
+   */
+
+  /**
+   * Optional click handler for the icon.
+   */
+  onClick?: () => void;
+
+  /**
+   * Indicates whether the field is in a focused state.
+   */
+
+  /**
+   * Indicates whether the field is in a focused state.
+   */
+  focus?: boolean;
+
+  /**
+   * The icon to display when the field is focused.
+   * If not provided, the `icon` will be used as the default.
+   */
+
+  /**
+   * The icon to display when the field is focused.
+   * If not provided, the `icon` will be used as the default.
+   */
+  focusedIcon?: ReactNode;
+
+  /**
+   * Optional styles configuration for the component.
+   * - `root`: An array of style objects to apply to the root element.
+   */
+  styleConfig?: {
+    root?: Styles[];
+  };
+}

package/src/Input.native.tsx

@@ -0,0 +1,284 @@
+import { forwardRef, isValidElement, useCallback, useImperativeHandle, useRef } from 'react';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import { useNativeMergeStyles } from '@cleartrip/ct-design-style-manager';
+import {
+  NativeSyntheticEvent,
+  TextInputChangeEventData,
+  TextInputFocusEventData,
+  TextInputKeyPressEventData,
+  TextInput,
+  TextInputSelectionChangeEventData,
+  NativeTouchEvent,
+} from 'react-native';
+import { getFieldStyles } from './style';
+import { IFieldProps, IFieldRef } from './type';
+import { useTheme } from '@cleartrip/ct-design-theme';
+
+const staticStyles = makeStyles((theme) => {
+  return {
+    root: {
+      width: '100%',
+      borderWidth: 0,
+      fontSize: theme.typography.size[16],
+      fontWeight: theme.typography.weight.medium,
+    },
+  };
+});
+
+const InputFieldCore = forwardRef<IFieldRef, IFieldProps & { focus: boolean; numberOfLines?: number }>(
+  (
+    {
+      value,
+      disabled,
+      styleConfig,
+      onChange,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      onSelect,
+      onPressIn,
+      placeholder,
+      autoFocus,
+      readOnly,
+      type,
+      autoCapitalize,
+      placeholderType,
+      variant,
+      prefix,
+      focus,
+      cursorColor,
+      maxLength,
+      numberOfLines,
+      showSoftInputOnFocus,
+      inputMode,
+      ...restProps
+    },
+    forwardedRef,
+  ) => {
+    const theme = useTheme();
+    const inputRef = useRef<TextInput>(null);
+    const selectionStartRef = useRef(0);
+    const { root = [] } = styleConfig ?? {};
+    const isPrefixComponent = isValidElement(prefix);
+    const disabledPlaceHolder = !placeholder?.length;
+
+    const fieldStyles = useStyles(
+      (theme) => {
+        return {
+          root: getFieldStyles({
+            isLabeledPlaceholder: placeholderType === 'labeled',
+            disabled: disabled ?? false,
+            theme,
+            variant: variant ?? 'md',
+            focus,
+            value,
+            type: type ?? 'text',
+            isPrefixComponent,
+            disabledPlaceHolder,
+          }),
+        };
+      },
+      [disabled, variant, focus, value, type, isPrefixComponent, disabledPlaceHolder],
+    );
+
+    const mergedStyles = useNativeMergeStyles([staticStyles.root, fieldStyles.root, ...(root ?? [])], [root]);
+
+    useImperativeHandle(
+      forwardedRef,
+      () => ({
+        focus: () => {
+          inputRef.current?.focus();
+        },
+        blur: () => {
+          inputRef.current?.blur();
+        },
+        setSelection: (start: number, end: number) => {
+          inputRef.current?.setNativeProps({ selection: { start, end } });
+        },
+      }),
+      [],
+    );
+
+    const handleOnChange = useCallback(
+      (event: NativeSyntheticEvent<TextInputChangeEventData>) => {
+        const inputValue = event.nativeEvent.text;
+        onChange?.({
+          target: { value: inputValue, selectionStart: selectionStartRef.current },
+          currentTarget: {
+            focus: () => {
+              inputRef.current?.focus();
+            },
+            blur: () => {
+              inputRef.current?.blur();
+            },
+            setSelection: (start: number, end: number) => {
+              inputRef.current?.setNativeProps({ selection: { start, end } });
+            },
+          },
+          preventDefault: () => event.preventDefault(),
+        });
+      },
+      [onChange],
+    );
+
+    const handleOnFocus = useCallback(
+      (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        const inputValue = event.nativeEvent.text;
+        onFocus?.({
+          target: { value: inputValue },
+          currentTarget: {
+            focus: () => {
+              inputRef.current?.focus();
+            },
+            blur: () => {
+              inputRef.current?.blur();
+            },
+            setSelection: (start: number, end: number) => {
+              inputRef.current?.setNativeProps({ selection: { start, end } });
+            },
+          },
+          preventDefault: () => event.preventDefault(),
+        });
+      },
+      [onFocus],
+    );
+
+    const handleOnBlur = useCallback(
+      (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        const inputValue = event.nativeEvent.text;
+        onBlur?.({
+          target: { value: inputValue },
+          currentTarget: {
+            focus: () => {
+              inputRef.current?.focus();
+            },
+            blur: () => {
+              inputRef.current?.blur();
+            },
+            setSelection: (start: number, end: number) => {
+              inputRef.current?.setNativeProps({ selection: { start, end } });
+            },
+          },
+          preventDefault: () => event.preventDefault(),
+        });
+      },
+      [onBlur],
+    );
+
+    const handleOnKeyPress = useCallback(
+      (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+        onKeyDown?.({
+          target: { value, key: event.nativeEvent.key },
+          currentTarget: {
+            focus: () => {
+              inputRef.current?.focus();
+            },
+            blur: () => {
+              inputRef.current?.blur();
+            },
+            setSelection: (start: number, end: number) => {
+              inputRef.current?.setNativeProps({ selection: { start, end } });
+            },
+          },
+          preventDefault: () => event.preventDefault(),
+        });
+      },
+      [onKeyDown, value],
+    );
+
+    const handleOnSelectionChange = useCallback(
+      (_event: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+        selectionStartRef.current = _event.nativeEvent.selection.start;
+        onSelect?.({
+          target: { value, selectionStart: selectionStartRef.current },
+          currentTarget: {
+            focus: () => {
+              inputRef.current?.focus();
+            },
+            blur: () => {
+              inputRef.current?.blur();
+            },
+            setSelection: (start: number, end: number) => {
+              inputRef.current?.setNativeProps({ selection: { start, end } });
+            },
+          },
+        });
+      },
+      [onSelect, value],
+    );
+
+    const handleOnPressIn = useCallback(
+      (event: NativeSyntheticEvent<NativeTouchEvent>) => {
+        onPressIn?.({
+          target: { value },
+          currentTarget: {
+            focus: () => {
+              inputRef.current?.focus();
+            },
+            blur: () => {
+              inputRef.current?.blur();
+            },
+            setSelection: (start: number, end: number) => {
+              inputRef.current?.setNativeProps({ selection: { start, end } });
+            },
+          },
+          preventDefault: () => event.preventDefault(),
+        });
+      },
+      [onPressIn, value],
+    );
+
+    // Map web input types to React Native keyboard types
+    const getKeyboardType = () => {
+      switch (type) {
+        case 'number':
+          return 'numeric';
+        case 'phone':
+          return 'phone-pad';
+        default:
+          return 'default';
+      }
+    };
+
+    // Map web input types to React Native text content types
+    const getTextContentType = () => {
+      switch (type) {
+        case 'phone':
+          return 'telephoneNumber';
+        default:
+          return 'none';
+      }
+    };
+
+    return (
+      <TextInput
+        ref={inputRef}
+        value={value}
+        placeholder={placeholderType === 'labeled' && focus ? '' : placeholder}
+        autoFocus={autoFocus}
+        editable={!disabled && !readOnly}
+        keyboardType={getKeyboardType()}
+        textContentType={getTextContentType()}
+        autoCapitalize={autoCapitalize}
+        autoCorrect={false}
+        allowFontScaling={false}
+        onChange={handleOnChange}
+        onFocus={handleOnFocus}
+        onBlur={handleOnBlur}
+        onKeyPress={handleOnKeyPress}
+        onSelectionChange={handleOnSelectionChange}
+        onPressIn={handleOnPressIn}
+        style={mergedStyles}
+        cursorColor={cursorColor || theme.color.text.primary}
+        maxLength={maxLength}
+        numberOfLines={numberOfLines}
+        showSoftInputOnFocus={showSoftInputOnFocus}
+        inputMode={inputMode}
+        {...restProps}
+      />
+    );
+  },
+);
+
+InputFieldCore.displayName = 'InputFieldCore';
+export default InputFieldCore;