@cleartrip/ct-design-field 4.0.0 → 5.1.0

package/src/Input.tsx

@@ -0,0 +1,242 @@
+import React, { forwardRef, isValidElement, useCallback, useImperativeHandle, useRef } from 'react';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import { css } from '@emotion/css';
+import { useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { IFieldRef, IFieldProps } from './type';
+import { getFieldStyles, getTypographyVariant } from './style';
+
+const styles = css`
+  outline: none;
+  &:focus {
+    outline: none;
+  }
+`;
+const staticStyles = makeStyles((theme) => {
+  return {
+    root: {
+      width: '100%',
+      border: 'none',
+      outline: 'none',
+      fontSize: theme.typography.size[16],
+      fontWeight: theme.typography.weight.medium,
+      lineHeight: theme.typography.lineHeight[24],
+    },
+  };
+});
+
+const InputFieldCore = forwardRef<IFieldRef, IFieldProps & { focus: boolean; numberOfLines?: number }>(
+  (
+    {
+      value,
+      disabled,
+      styleConfig,
+      onChange,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      onSelect,
+      onPressIn,
+      placeholder,
+      autoFocus,
+      readOnly,
+      type,
+      inputMode,
+      autoCapitalize,
+      fieldTypographyVariant,
+      variant,
+      prefix,
+      focus,
+      placeholderType,
+      id,
+      maxLength,
+    },
+    forwardedRef,
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const { field = [] } = styleConfig ?? {};
+    const isPrefixComponent = isValidElement(prefix);
+    const disabledPlaceHolder = !placeholder?.length;
+
+    const dynamicStyles = useStyles(
+      (theme) => ({
+        root: getTypographyVariant(theme, fieldTypographyVariant ?? 'HM2'),
+      }),
+      [fieldTypographyVariant],
+    );
+
+    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 = useWebMergeStyles(
+      [staticStyles.root, dynamicStyles.root, styles, fieldStyles.root, ...field],
+      [fieldStyles.root, dynamicStyles.root, field],
+    );
+
+    useImperativeHandle(
+      forwardedRef,
+      () => ({
+        focus: () => {
+          inputRef.current?.focus();
+        },
+        blur: () => {
+          inputRef.current?.blur();
+        },
+        setSelection: (start: number, end: number) => {
+          inputRef.current?.setSelectionRange(start, end);
+        },
+      }),
+      [],
+    );
+
+    const handleOnChange = useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        const inputValue = event.target.value;
+        onChange?.({
+          target: { value: inputValue, selectionStart: event.target.selectionStart || 0 },
+          currentTarget: {
+            focus: () => inputRef.current?.focus(),
+            blur: () => inputRef.current?.blur(),
+            setSelection: (start: number, end: number) => {
+              inputRef.current?.setSelectionRange(start, end);
+            },
+          },
+        });
+      },
+      [onChange],
+    );
+
+    const handleOnFocus = useCallback(
+      (event: React.FocusEvent<HTMLInputElement>) => {
+        onFocus?.({
+          target: { value: event.target.value },
+          currentTarget: {
+            focus: () => inputRef.current?.focus(),
+            blur: () => inputRef.current?.blur(),
+            setSelection: (start: number, end: number) => {
+              inputRef.current?.setSelectionRange(start, end);
+            },
+          },
+          preventDefault: () => event.preventDefault(),
+        });
+      },
+      [onFocus],
+    );
+
+    const handleOnBlur = useCallback(
+      (event: React.FocusEvent<HTMLInputElement>) => {
+        onBlur?.({
+          target: { value: event.target.value },
+          currentTarget: {
+            focus: () => inputRef.current?.focus(),
+            blur: () => inputRef.current?.blur(),
+            setSelection: (start: number, end: number) => {
+              inputRef.current?.setSelectionRange(start, end);
+            },
+          },
+          preventDefault: () => event.preventDefault(),
+        });
+      },
+      [onBlur],
+    );
+
+    const handleOnKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLInputElement>) => {
+        onKeyDown?.({
+          target: { value: (event.target as HTMLInputElement).value, key: event.key },
+          currentTarget: {
+            focus: () => inputRef.current?.focus(),
+            blur: () => inputRef.current?.blur(),
+            setSelection: (start: number, end: number) => {
+              inputRef.current?.setSelectionRange(start, end);
+            },
+          },
+          preventDefault: () => event.preventDefault(),
+        });
+      },
+      [onKeyDown],
+    );
+
+    const handleOnSelect = useCallback(
+      (event: React.SyntheticEvent<HTMLInputElement>) => {
+        onSelect?.({
+          target: {
+            value: (event.target as HTMLInputElement).value,
+            selectionStart: (event.target as HTMLInputElement).selectionStart || 0,
+          },
+          currentTarget: {
+            focus: () => inputRef.current?.focus(),
+            blur: () => inputRef.current?.blur(),
+            setSelection: (start: number, end: number) => {
+              inputRef.current?.setSelectionRange(start, end);
+            },
+          },
+          preventDefault: () => event.preventDefault(),
+        });
+      },
+      [onSelect],
+    );
+
+    const handleOnPressIn = useCallback(
+      (event: React.MouseEvent<HTMLInputElement>) => {
+        onPressIn?.({
+          target: { value: inputRef.current?.value || '' },
+          currentTarget: {
+            focus: () => inputRef.current?.focus(),
+            blur: () => inputRef.current?.blur(),
+            setSelection: (start: number, end: number) => {
+              inputRef.current?.setSelectionRange(start, end);
+            },
+          },
+          preventDefault: () => event.preventDefault(),
+        });
+      },
+      [onPressIn],
+    );
+
+    const webProps = {
+      onChange: handleOnChange,
+      onFocus: handleOnFocus,
+      onBlur: handleOnBlur,
+      onKeyDown: handleOnKeyDown,
+      onSelect: handleOnSelect,
+      onMouseDown: handleOnPressIn,
+      placeholder,
+      autoFocus,
+      readOnly,
+      type,
+      inputMode,
+      autoCapitalize,
+    };
+
+    return (
+      <input
+        maxLength={maxLength}
+        id={id}
+        ref={inputRef}
+        value={value}
+        disabled={disabled}
+        className={mergedStyles}
+        {...webProps}
+      />
+    );
+  },
+);
+
+InputFieldCore.displayName = 'InputFieldCore';
+export default InputFieldCore;

package/src/InputField.tsx

@@ -0,0 +1,22 @@
+import { forwardRef } from 'react';
+import { IFieldRef, InputFieldProps } from './type';
+import Field from './Field';
+import PhoneField from './variants/Phone';
+import OtpField from './variants/OTP';
+import CardField from './variants/Card';
+
+const InputField = forwardRef<IFieldRef, InputFieldProps>((props, forwardedRef) => {
+  if (props.fieldType === 'phone') {
+    return <PhoneField {...props} ref={forwardedRef} />;
+  }
+  if (props.fieldType === 'otp') {
+    return <OtpField {...props} />;
+  }
+  if (props.fieldType === 'card') {
+    return <CardField {...props} ref={forwardedRef} />;
+  }
+  return <Field {...props} ref={forwardedRef} />;
+});
+
+InputField.displayName = 'InputField';
+export default InputField;

package/src/Label.native.tsx

@@ -0,0 +1,83 @@
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import { IFieldProps } from './type';
+import { FieldType, FieldVariant } from './constants';
+import { getFieldPlaceholderStyles } from './style';
+import { Container } from '@cleartrip/ct-design-container';
+import { Typography } from '@cleartrip/ct-design-typography';
+import { isValidElement } from 'react';
+
+const staticStyles = makeStyles((theme) => {
+  return {
+    root: {
+      position: 'absolute',
+      paddingLeft: theme.spacing[4],
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      transform: [{ translateY: 0 }],
+      top: 16,
+    },
+  };
+});
+
+const FieldLabelWrapper: React.FC<IFieldProps & { focus: boolean }> = ({
+  variant,
+  type,
+  value,
+  focus = false,
+  placeholder,
+  placeholderType,
+  disabled = false,
+  styleConfig,
+  prefix,
+}) => {
+  const { placeholder: placeholderStyleConfig } = styleConfig ?? {};
+  const { placeholderLabel = [], placeholderTypography = {} } = placeholderStyleConfig ?? {};
+
+  const shiftPlaceholder = placeholderType === 'floating';
+  const isPrefixComponent = isValidElement(prefix);
+
+  const baseStyles = useStyles(
+    (theme) => ({
+      root: getFieldPlaceholderStyles({
+        theme,
+        isFocused: focus,
+        disabled,
+        variant: variant ?? 'md',
+        fieldType: type ?? 'text',
+        isPrefixComponent,
+        shiftPlaceholder,
+      }),
+    }),
+    [focus, disabled, variant, type, isPrefixComponent, shiftPlaceholder],
+  );
+
+  if (placeholderType === 'default' || !focus) {
+    return null;
+  }
+  if (variant === FieldVariant.SM) {
+    if (value.length) return null;
+
+    return (
+      <Container styleConfig={{ root: [staticStyles.root, baseStyles.root, ...placeholderLabel] }}>
+        <Typography variant='B2' color='tertiary' styleConfig={placeholderTypography}>
+          {placeholder}
+        </Typography>
+      </Container>
+    );
+  }
+
+  if (type === FieldType.PHONE && value.length) return null;
+
+  const typographyVariant = type === FieldType.PHONE ? 'B1' : focus ? 'B3' : 'B1';
+
+  return (
+    <Container styleConfig={{ root: [staticStyles.root, baseStyles.root, ...placeholderLabel] }}>
+      <Typography variant={typographyVariant} color='tertiary' styleConfig={placeholderTypography}>
+        {placeholder}
+      </Typography>
+    </Container>
+  );
+};
+
+export default FieldLabelWrapper;

package/src/Label.tsx

@@ -0,0 +1,91 @@
+import { makeStyles, useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { IFieldProps } from './type';
+import { FieldType, FieldVariant } from './constants';
+import { getFieldPlaceholderStyles } from './style';
+import { Container } from '@cleartrip/ct-design-container';
+import { Typography } from '@cleartrip/ct-design-typography';
+import { isValidElement } from 'react';
+
+const staticStyles = makeStyles((theme) => {
+  return {
+    root: {
+      position: 'absolute',
+      paddingLeft: theme.spacing[4],
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      transform: [{ translateY: 0 }],
+      top: 16,
+    },
+  };
+});
+
+const FieldLabelWrapper: React.FC<
+  Omit<IFieldProps, 'onChange' | 'onSelect' | 'onPressIn' | 'onKeyDown' | 'onFocus' | 'onBlur'> & { focus: boolean }
+> = ({
+  variant,
+  type,
+  value,
+  focus = false,
+  placeholder,
+  placeholderType,
+  disabled = false,
+  styleConfig,
+  prefix,
+  id,
+}) => {
+  const { placeholder: placeholderStyleConfig } = styleConfig ?? {};
+  const { placeholderLabel = [], placeholderTypography = {} } = placeholderStyleConfig ?? {};
+
+  const shiftPlaceholder = placeholderType === 'floating';
+  const isPrefixComponent = isValidElement(prefix);
+
+  const baseStyles = useStyles(
+    (theme) => ({
+      root: getFieldPlaceholderStyles({
+        theme,
+        isFocused: focus,
+        disabled,
+        variant: variant ?? 'md',
+        fieldType: type ?? 'text',
+        isPrefixComponent,
+        shiftPlaceholder,
+      }),
+    }),
+    [focus, disabled, variant, type, isPrefixComponent, shiftPlaceholder],
+  );
+
+  const labelStyles = useWebMergeStyles(
+    [baseStyles.root, staticStyles.root, ...placeholderLabel],
+    [baseStyles.root, placeholderLabel],
+  );
+
+  if (placeholderType === 'default' || !focus) {
+    return null;
+  }
+  if (variant === FieldVariant.SM) {
+    if (value.length) return null;
+
+    return (
+      <Container styleConfig={{ root: [baseStyles.root, staticStyles.root, ...placeholderLabel] }}>
+        <Typography variant='B2' color='tertiary' styleConfig={placeholderTypography}>
+          {placeholder}
+        </Typography>
+      </Container>
+    );
+  }
+
+  if (type === FieldType.PHONE && value.length) return null;
+
+  const typographyVariant = type === FieldType.PHONE ? 'B1' : focus ? 'B3' : 'B1';
+
+  return (
+    <label className={labelStyles} htmlFor={id}>
+      <Typography variant={typographyVariant} color='tertiary' styleConfig={placeholderTypography}>
+        {placeholder}
+      </Typography>
+    </label>
+  );
+};
+
+export default FieldLabelWrapper;

package/src/TextArea.tsx

@@ -0,0 +1,14 @@
+import { forwardRef } from 'react';
+import { IFieldProps, IFieldRef } from './type';
+import Field from './Field';
+
+export interface ITextAreaProps extends IFieldProps {
+  numberOfLines?: number;
+}
+
+const TextArea = forwardRef<IFieldRef, ITextAreaProps>((props, forwardedRef) => {
+  return <Field {...props} ref={forwardedRef} />;
+});
+
+TextArea.displayName = 'TextArea';
+export default TextArea;

package/src/TextAreaInput.native.tsx

@@ -0,0 +1,4 @@
+import InputFieldCore from './Input';
+InputFieldCore.displayName = 'TextArea';
+
+export default InputFieldCore;

package/src/TextAreaInput.tsx

@@ -0,0 +1,243 @@
+import React, { forwardRef, isValidElement, useCallback, useImperativeHandle, useRef } from 'react';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import { css } from '@emotion/css';
+import { useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { IFieldRef, IFieldProps } from './type';
+import { getFieldStyles, getTypographyVariant } from './style';
+
+const styles = css`
+  outline: none;
+  &:focus {
+    outline: none;
+  }
+`;
+
+const staticStyles = makeStyles((theme) => {
+  return {
+    root: {
+      width: '100%',
+      border: 'none',
+      outline: 'none',
+      fontSize: theme.typography.size[16],
+      fontWeight: theme.typography.weight.medium,
+      lineHeight: theme.typography.lineHeight[24],
+    },
+  };
+});
+
+const InputFieldCore = forwardRef<IFieldRef, IFieldProps & { focus: boolean }>(
+  (
+    {
+      value,
+      disabled,
+      styleConfig,
+      onChange,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      onSelect,
+      onPressIn,
+      placeholder,
+      autoFocus,
+      readOnly,
+      type,
+      inputMode,
+      autoCapitalize,
+      fieldTypographyVariant,
+      variant,
+      prefix,
+      focus,
+      placeholderType,
+      id,
+      maxLength,
+    },
+    forwardedRef,
+  ) => {
+    const inputRef = useRef<HTMLTextAreaElement>(null);
+    const { field = [] } = styleConfig ?? {};
+    const isPrefixComponent = isValidElement(prefix);
+    const disabledPlaceHolder = !placeholder?.length;
+
+    const dynamicStyles = useStyles(
+      (theme) => ({
+        root: getTypographyVariant(theme, fieldTypographyVariant ?? 'HM2'),
+      }),
+      [fieldTypographyVariant],
+    );
+
+    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 = useWebMergeStyles(
+      [staticStyles.root, dynamicStyles.root, styles, fieldStyles.root, ...field],
+      [fieldStyles.root, dynamicStyles.root, field],
+    );
+
+    useImperativeHandle(
+      forwardedRef,
+      () => ({
+        focus: () => {
+          inputRef.current?.focus();
+        },
+        blur: () => {
+          inputRef.current?.blur();
+        },
+        setSelection: (start: number, end: number) => {
+          inputRef.current?.setSelectionRange(start, end);
+        },
+      }),
+      [],
+    );
+
+    const handleOnChange = useCallback(
+      (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const inputValue = event.target.value;
+        onChange?.({
+          target: { value: inputValue, selectionStart: event.target.selectionStart || 0 },
+          currentTarget: {
+            focus: () => inputRef.current?.focus(),
+            blur: () => inputRef.current?.blur(),
+            setSelection: (start: number, end: number) => {
+              inputRef.current?.setSelectionRange(start, end);
+            },
+          },
+        });
+      },
+      [onChange],
+    );
+
+    const handleOnFocus = useCallback(
+      (event: React.FocusEvent<HTMLTextAreaElement>) => {
+        onFocus?.({
+          target: { value: event.target.value },
+          currentTarget: {
+            focus: () => inputRef.current?.focus(),
+            blur: () => inputRef.current?.blur(),
+            setSelection: (start: number, end: number) => {
+              inputRef.current?.setSelectionRange(start, end);
+            },
+          },
+          preventDefault: () => event.preventDefault(),
+        });
+      },
+      [onFocus],
+    );
+
+    const handleOnBlur = useCallback(
+      (event: React.FocusEvent<HTMLTextAreaElement>) => {
+        onBlur?.({
+          target: { value: event.target.value },
+          currentTarget: {
+            focus: () => inputRef.current?.focus(),
+            blur: () => inputRef.current?.blur(),
+            setSelection: (start: number, end: number) => {
+              inputRef.current?.setSelectionRange(start, end);
+            },
+          },
+          preventDefault: () => event.preventDefault(),
+        });
+      },
+      [onBlur],
+    );
+
+    const handleOnKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        onKeyDown?.({
+          target: { value: (event.target as HTMLTextAreaElement).value, key: event.key },
+          currentTarget: {
+            focus: () => inputRef.current?.focus(),
+            blur: () => inputRef.current?.blur(),
+            setSelection: (start: number, end: number) => {
+              inputRef.current?.setSelectionRange(start, end);
+            },
+          },
+          preventDefault: () => event.preventDefault(),
+        });
+      },
+      [onKeyDown],
+    );
+
+    const handleOnSelect = useCallback(
+      (event: React.SyntheticEvent<HTMLTextAreaElement>) => {
+        onSelect?.({
+          target: {
+            value: (event.target as HTMLTextAreaElement).value,
+            selectionStart: (event.target as HTMLTextAreaElement).selectionStart || 0,
+          },
+          currentTarget: {
+            focus: () => inputRef.current?.focus(),
+            blur: () => inputRef.current?.blur(),
+            setSelection: (start: number, end: number) => {
+              inputRef.current?.setSelectionRange(start, end);
+            },
+          },
+          preventDefault: () => event.preventDefault(),
+        });
+      },
+      [onSelect],
+    );
+
+    const handleOnPressIn = useCallback(
+      (event: React.MouseEvent<HTMLTextAreaElement>) => {
+        onPressIn?.({
+          target: { value: inputRef.current?.value || '' },
+          currentTarget: {
+            focus: () => inputRef.current?.focus(),
+            blur: () => inputRef.current?.blur(),
+            setSelection: (start: number, end: number) => {
+              inputRef.current?.setSelectionRange(start, end);
+            },
+          },
+          preventDefault: () => event.preventDefault(),
+        });
+      },
+      [onPressIn],
+    );
+
+    const webProps = {
+      onChange: handleOnChange,
+      onFocus: handleOnFocus,
+      onBlur: handleOnBlur,
+      onKeyDown: handleOnKeyDown,
+      onSelect: handleOnSelect,
+      onMouseDown: handleOnPressIn,
+      placeholder,
+      autoFocus,
+      readOnly,
+      type,
+      inputMode,
+      autoCapitalize,
+    };
+
+    return (
+      <textarea
+        maxLength={maxLength}
+        id={id}
+        ref={inputRef}
+        value={value}
+        disabled={disabled}
+        className={mergedStyles}
+        {...webProps}
+      />
+    );
+  },
+);
+
+InputFieldCore.displayName = 'TextArea';
+export default InputFieldCore;