jamespot-react-components 1.0.3 → 1.0.9

package/src/components/Form/Input/JRCInputDate/JRCInputDate.stories.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { JRCInputDate } from './JRCInputDate';
+import { useForm } from 'react-hook-form';
+import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
+import { SubmitHandler } from 'react-hook-form/dist/types/form';
+import { Meta, Story } from '@storybook/react';
+
+export default {
+    title: 'Inputs/new',
+    component: JRCInputDate,
+} as Meta;
+
+const Template: Story<JRCInputFieldProps<'date'>> = (args) => {
+    const { handleSubmit, control, reset } = useForm({
+        defaultValues: {
+            date: '',
+        },
+        criteriaMode: 'all',
+    });
+
+    const onSubmit: SubmitHandler<{ date: string }> = (data) => {
+        alert(JSON.stringify(data, null, 2));
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <JRCInputDate {...args} name="date" control={control} />
+            <input type="submit" />
+            <input type="reset" />
+            <button type="button" onClick={() => reset()}>
+                Custom Reset
+            </button>
+        </form>
+    );
+};
+
+export const InputDate = Template.bind({});
+InputDate.args = {
+    label: 'Date de création du groupe',
+    description:
+        "La date de création du groupe doit permettre en un clin d'oeil de connaitre la date de création du groupe",
+    helper: { description: "Ajouter une date cohérente ! L'année 218 n'est pas cohérente", title: 'Indication' },
+    rules: {
+        min: {
+            value: '2023-11-11',
+            message: 'La date doit être supérieur au 11/11/2023',
+        },
+        required: true,
+    },
+};

package/src/components/Form/Input/JRCInputDate/JRCInputDate.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { StyledInput } from '../JRCStyledInput';
+import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
+import { JRCFormFieldRenderer } from '../Common/JRCFormFieldRenderer';
+import { DataCy } from '../../../../types/dataAttributes';
+
+export type JRCInputDateProps = DataCy & React.ComponentPropsWithoutRef<'input'>;
+
+const RenderInput = React.forwardRef((props: JRCInputDateProps, ref: React.ForwardedRef<HTMLInputElement>) => {
+    return <StyledInput type="date" id={props.name} {...props} ref={ref} />;
+});
+
+/**
+ * Component used as a <input type="date"/>
+ * @param props JRCInputFieldProps
+ * validation props: required
+ * @returns JSX.Element
+ */
+export function JRCInputDate<T>(props: JRCInputFieldProps<T>) {
+    return (
+        <JRCFormFieldRenderer
+            {...props}
+            renderFunction={({ value, ...field }) => <RenderInput {...props} {...field} value={value as string} />}
+        />
+    );
+}

package/src/components/Form/Input/JRCInputText/JRCInputText.tsx

@@ -4,9 +4,9 @@ import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
 import { JRCFormFieldRenderer } from '../Common/JRCFormFieldRenderer';
 import { DataCy } from '../../../../types/dataAttributes';
 
-export type InputTextProps = DataCy & React.ComponentPropsWithoutRef<'input'>;
+export type JRCInputTextProps = DataCy & React.ComponentPropsWithoutRef<'input'>;
 
-const RenderInput = React.forwardRef((props: InputTextProps, ref: React.ForwardedRef<HTMLInputElement>) => {
+const RenderInput = React.forwardRef((props: JRCInputTextProps, ref: React.ForwardedRef<HTMLInputElement>) => {
     return <StyledInput type="text" id={props.name} {...props} ref={ref} />;
 });
 

package/src/components/Form/Input/JRCInputTextarea/JRCInputTextarea.stories.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { JRCInputTextarea } from './JRCInputTextarea';
+import { useForm } from 'react-hook-form';
+import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
+import { SubmitHandler } from 'react-hook-form/dist/types/form';
+import { Meta, Story } from '@storybook/react';
+
+export default {
+    title: 'Inputs/new',
+    component: JRCInputTextarea,
+} as Meta;
+
+const Template: Story<JRCInputFieldProps<'textarea'>> = (args) => {
+    const { handleSubmit, control, reset } = useForm({
+        defaultValues: {
+            textarea: '',
+        },
+        criteriaMode: 'all',
+    });
+
+    const onSubmit: SubmitHandler<{ textarea: string }> = (data) => {
+        alert(JSON.stringify(data, null, 2));
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <JRCInputTextarea {...args} name="textarea" control={control} />
+            <input type="submit" />
+            <input type="reset" />
+            <button type="button" onClick={() => reset()}>
+                Custom Reset
+            </button>
+        </form>
+    );
+};
+
+export const InputTextarea = Template.bind({});
+InputTextarea.args = {
+    label: 'Nom de groupe',
+    description: "Le nom du groupe doit permettre en un clin d'oeil de connaitre le sujet du groupe",
+    placeholder: 'Présentations',
+    helper: { description: 'Ne faites pas commencer votre groupe par "Groupe de"', title: 'Indication' },
+    rules: {
+        maxLength: {
+            value: 25,
+            message:
+                'This is an example error. For instance, the text should not be written with more than 25 characters. This message is not the default one.',
+        },
+        minLength: 3,
+        required: true,
+    },
+};

package/src/components/Form/Input/JRCInputTextarea/JRCInputTextarea.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { cssStyledInput } from '../JRCStyledInput';
+import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
+import { JRCFormFieldRenderer } from '../Common/JRCFormFieldRenderer';
+import { DataCy } from '../../../../types/dataAttributes';
+import styled from 'styled-components';
+
+export type JRCInputTextareaProps = DataCy & React.ComponentPropsWithoutRef<'textarea'>;
+
+export const StyledTextArea = styled.textarea`
+    ${cssStyledInput}
+    &&&& {
+        padding-top: 10px;
+        height: 140px;
+        resize: vertical;
+    }
+`;
+
+const RenderInput = React.forwardRef((props: JRCInputTextareaProps, ref: React.ForwardedRef<HTMLTextAreaElement>) => {
+    return <StyledTextArea id={props.name} {...props} ref={ref} />;
+});
+
+/**
+ * Component used as a <input type="text"/>
+ * @param props JRCInputFieldProps
+ * validation props: required
+ * @returns JSX.Element
+ */
+export function JRCInputTextarea<T>(props: JRCInputFieldProps<T>) {
+    return (
+        <JRCFormFieldRenderer
+            {...props}
+            renderFunction={({ value, ...field }) => <RenderInput {...props} {...field} value={value as string} />}
+        />
+    );
+}

package/src/components/Form/Input/JRCSelect/JRCInputSelect.tsx

@@ -56,7 +56,7 @@ export const Select = React.forwardRef(function <T>(
         if (menuRef.current && selectedOptionRef) scrollIntoView(menuRef.current, selectedOptionRef);
     }
 
-    // Hack to use .focus() outside of this component while beeing able to access the ref within this component
+    // Hack to use .focus() outside of this component while being able to access the ref within this component
     React.useImperativeHandle(
         ref,
         () =>

package/src/components/JRCButton/JRCButton.stories.tsx

@@ -44,7 +44,7 @@ export const AllButtons = () => {
                 </JRCButton>
                 <JRCButton
                     onClick={action('button-click')}
-                    // icon="icon-check"
+                    icon="icon-check"
                     type="submit"
                     color="primary"
                     variant="contained">

package/src/components/JRCButton/JRCButton.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import JRCIcon, { JRCIconProps } from '../JRCIcon/JRCIcon';
 import styled from 'styled-components';
 import JRCLoader from 'components/JRCLoader/JRCLoader';
-import config, { ButtonType } from './JRCButtonConfig';
+import { BUTTON_CONFIG, ButtonType } from './JRCButtonConfig';
 import { ForwardedRef } from 'react';
 import { DataCy } from '../../types/dataAttributes';
 
@@ -39,7 +39,10 @@ export const transformColor = (color?: string): JRCIconProps['color'] => {
     }
 };
 
-const Button = styled.button<{ themeButton: ButtonType; hasChildren: boolean } & JRCButtonProps>`
+/**
+ * Button styling. May be used as a <a> tag
+ */
+export const Button = styled.button<{ themeButton: ButtonType; hasChildren: boolean } & JRCButtonProps>`
     float: ${(props) => props.float};
     min-width: ${(props) => props.minWidth};
     display: inline-flex;
@@ -58,7 +61,10 @@ const Button = styled.button<{ themeButton: ButtonType; hasChildren: boolean } &
     box-sizing: border-box;
     border: 2px solid ${(props) => props.theme.color[props.themeButton.border]};
     transition: color 0.5s, background-color 0.5s, border 0.5s;
+    text-decoration: none;
     &:hover {
+        text-decoration: none;
+        color: ${(props) => props.theme.color[props.themeButton.color]};
         background-color: ${(props) => props.theme.color[props.themeButton.hover.background]};
         border-color: ${(props) => props.theme.color[props.themeButton.hover.border]};
     }
@@ -93,7 +99,7 @@ const JRCButton = React.forwardRef(
         ref: ForwardedRef<HTMLButtonElement>,
     ) => {
         const disabled = props.disabled || props.loader;
-        const themeButton = config[variant][disabled ? 'disabled' : color];
+        const themeButton = BUTTON_CONFIG[variant][disabled ? 'disabled' : color];
 
         return (
             <Button

package/src/components/JRCButton/JRCButtonConfig.tsx

@@ -1,4 +1,4 @@
-export default {
+export const BUTTON_CONFIG = {
     contained: {
         primary: {
             color: 'white',

package/src/components/JRCButton/JRCValidationButton.tsx

@@ -13,7 +13,7 @@ export type JRCValidationButtonProps = JRCButtonProps & {
     validationMessage?: string;
 };
 
-/** double click prevented by using a temporary state, changed after a timeout */
+/** double click prevented by using a temporary state (PREVENT_DB_CLICK), changed after a timeout */
 const state = {
     NOT_CLICKED: 'NOT_CLICKED',
     PREVENT_DB_CLICK: 'PREVENT_DB_CLICK',
@@ -44,14 +44,20 @@ export const JRCValidationButton = ({
 
     React.useEffect(() => {
         if (validation === state.PREVENT_DB_CLICK) {
-            setTimeoutId(setTimeout(() => setValidation(state.NOT_CLICKED), RESET_CLICK_DELAY) as unknown as number);
+            setTimeoutId(
+                setTimeout(() => {
+                    setValidation(state.NOT_CLICKED);
+                    buttonRef?.current?.removeAttribute('style');
+                }, RESET_CLICK_DELAY) as unknown as number,
+            );
         }
     }, [validation]);
 
     const validationOnClick = React.useCallback(
         (e: React.MouseEvent<HTMLButtonElement>) => {
             if (validationRef.current === state.CLICKED) {
-                setValidation(state.NOT_CLICKED);
+                // Timeout of 0 second to delay the change at the end of the execution pile
+                setTimeout(() => setValidation(state.NOT_CLICKED), 0);
                 buttonRef?.current?.removeAttribute('style');
                 onClick && onClick(e);
                 if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);
@@ -69,7 +75,7 @@ export const JRCValidationButton = ({
     return (
         <JRCButton
             {...props}
-            type={validation === state.NOT_CLICKED ? 'button' : props.type}
+            type={validation === state.CLICKED ? props.type : 'button'}
             ref={buttonRef}
             onClick={validationOnClick}
             icon={validation === state.NOT_CLICKED ? icon : 'icon-fs-question'}

package/src/components/JRCButtonDropdown/JRCButtonDropdown.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import JRCButton, { transformColor } from '../JRCButton/JRCButton';
-import config, { ButtonType } from '../JRCButton/JRCButtonConfig';
+import { BUTTON_CONFIG, ButtonType } from '../JRCButton/JRCButtonConfig';
 import JRCIcon from '../JRCIcon/JRCIcon';
 import { ClickAwayListener } from '../Form/Common/ClickAwayListener';
 
@@ -120,7 +120,7 @@ export const JRCButtonDropdown = ({
     variant = 'contained',
     ...props
 }: JRCButtonDropdownProps) => {
-    const color = config[variant][props.disabled ? 'disabled' : props.color || 'primary'];
+    const color = BUTTON_CONFIG[variant][props.disabled ? 'disabled' : props.color || 'primary'];
     const [isOpen, setOpenMenu] = React.useState(false);
     const open = isOpen;
     const IconRight = ({ color }: any) => {

package/src/components/JRCEllipsis/JRCEllipsis.stories.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { JRCEllipsis, JRCEllipsisProps } from './JRCEllipsis';
+
+export default {
+    title: 'JRCEllipsis',
+    component: JRCEllipsis,
+} as Meta;
+
+const Template: Story<JRCEllipsisProps> = (args) => {
+    return <JRCEllipsis {...args} />;
+};
+
+export const CustomButton = Template.bind({});
+CustomButton.args = {
+    label: "Je suis un texte trop long ! Ca marche avec un caractère double tel que : 👋 ! C'est génial !",
+    length: 75,
+};

package/src/components/JRCEllipsis/JRCEllipsis.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { JRCConditionalWrapper } from '../Common/JRCConditionalWrapper';
+import JRCTooltip from '../JRCTooltip/JRCTooltip';
+
+export type JRCEllipsisProps = {
+    label?: string;
+    length: number;
+};
+
+export const JRCEllipsis = ({ label, length }: JRCEllipsisProps) => {
+    if (!label) return <></>;
+
+    const labelArr = [...label];
+
+    return (
+        <JRCConditionalWrapper
+            condition={labelArr.length > length}
+            wrapper={() => <JRCTooltip description={label}>{labelArr.slice(0, length).join('')}…</JRCTooltip>}>
+            <>{label}</>
+        </JRCConditionalWrapper>
+    );
+};

package/src/components/JRCHref/JRCHref.stories.tsx

@@ -5,6 +5,7 @@ import { Meta, Story } from '@storybook/react';
 
 export default {
     title: 'JRCHref',
+    component: JRCStyledHref,
 } as Meta;
 
 const Template: Story<JRCStyledHrefProps> = (args) => <JRCStyledHref {...args}>{args.children}</JRCStyledHref>;
@@ -14,6 +15,7 @@ Default.args = {
     children: 'Hello',
     href: '#',
     dataCy: 'link-to-the-main-content',
+    as: 'a',
 };
 
 const UserTemplate: Story<JRCLinkToProps> = (args) => <JRCLinkToUser {...args}>{args.children}</JRCLinkToUser>;

package/src/components/JRCHref/JRCHref.tsx

@@ -1,40 +1,67 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { DataCy } from '../../types/dataAttributes';
+import { Button } from '../JRCButton/JRCButton';
+import { BUTTON_CONFIG } from '../JRCButton/JRCButtonConfig';
 
 /**
  * Props type for JRCLinkToArticle and JRCLinkToUser
- * @member id number : id of the record
- * @member href string : href for href
- * @member children: enclosed React component
+ * @member idObject number : id of the record
  */
-export interface JRCLinkToProps extends JRCStyledHrefProps {
-    idObject?: number;
-    href?: string;
-    children: React.ReactNode;
-}
+export type JRCLinkToProps = DataCy &
+    React.ComponentPropsWithoutRef<'a'> & {
+        idObject?: number;
+    };
+
+type AnchorProps = {
+    as?: 'a';
+};
+
+type ButtonProps = {
+    variant?: 'contained' | 'outlined';
+    color?: 'primary' | 'valid' | 'danger' | 'secondary';
+    float?: 'left' | 'right';
+    children?: React.ReactNode;
+} & {
+    as: 'button';
+};
 
 /**
  * Props type for JRCStyledHref
- * @see HTML.a default props
+ * @member as render the link styled as a button
  */
-export type JRCStyledHrefProps = DataCy & React.ComponentPropsWithoutRef<'a'>;
+export type JRCStyledHrefProps = DataCy & React.ComponentPropsWithoutRef<'a'> & (AnchorProps | ButtonProps);
 
-export const JRCStyledHref = styled.a.attrs<JRCStyledHrefProps>(({ dataCy, ...props }) => ({
+const Href = styled.a.attrs<DataCy>(({ dataCy, ...props }) => ({
     'data-cy': dataCy,
     ...props,
 }))`
     color: ${(props) => props.theme.font.hrefColor};
 `;
 
+export const JRCStyledHref = (props: JRCStyledHrefProps) => {
+    if (props.as === 'button') {
+        const { color = 'primary', variant = 'contained', ...restProps } = props;
+        const themeButton = BUTTON_CONFIG[variant][color];
+
+        return (
+            <Button {...(restProps as any)} hasChildren={!!props.children} themeButton={themeButton} as="a">
+                {props.children}
+            </Button>
+        );
+    }
+
+    return <Href {...props} />;
+};
+
 export const JRCLinkToArticle = ({ idObject, href, children, ...props }: JRCLinkToProps) => (
-    <JRCStyledHref href={href ? href : `/article/${idObject}`} {...props}>
+    <Href href={href ? href : `/article/${idObject}`} {...props}>
         {children}
-    </JRCStyledHref>
+    </Href>
 );
 
 export const JRCLinkToUser = ({ idObject, href, children, ...props }: JRCLinkToProps) => (
-    <JRCStyledHref href={href ? href : `/user/${idObject}`} {...props}>
+    <Href href={href ? href : `/user/${idObject}`} {...props}>
         {children}
-    </JRCStyledHref>
+    </Href>
 );

package/src/components/JRCIcon/JRCIcon.tsx

@@ -45,7 +45,7 @@ const Icon = styled.i<Required<JRCIconProps>>`
 `;
 
 const JRCIcon = ({ color = 'primary', variant = 'default', name, size = 20, className }: JRCIconProps) => (
-    <Icon className={`react-icon ${name} ${className}`} name={name} size={size} color={color} variant={variant} />
+    <Icon className={`react-icon ${name} ${className || ''}`} name={name} size={size} color={color} variant={variant} />
 );
 
 export default JRCIcon;

package/src/components/JRCIconButton/JRCIconButton.tsx

@@ -81,10 +81,7 @@ const JRCIconButton = (props: JRCIconButtonProps & typeof defaultProps) => {
     return (
         <JRCConditionalWrapper
             condition={!!props.tooltip}
-            // FIXME TYPESCRIPT-STRICT
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            wrapper={(children) => <JRCTooltip {...props.tooltip}>{children}</JRCTooltip>}>
+            wrapper={(children) => <JRCTooltip {...(props.tooltip as JRCTooltipProps)}>{children}</JRCTooltip>}>
             <Button {...props} data-cy={props.dataCy} size={props.size}>
                 <JRCIcon
                     name={props.icon}

package/src/components/JRCImg/JRCImg.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import styled, { ThemeContext } from 'styled-components';
 import { formatImgUrl, ImgUrlProps } from './url.util';
 
 /**
@@ -43,9 +43,11 @@ const Img = styled.img`
 `;
 
 const JRCImg = (props: JRCImgProps) => {
+    const themeContext = React.useContext(ThemeContext);
+
     return (
         <Img
-            src={formatImgUrl(props)}
+            src={formatImgUrl(props, themeContext.dpr)}
             loading={props.loading || 'lazy'}
             alt={props.alt}
             width={props.width}

package/src/components/JRCImg/url.util.ts

@@ -46,7 +46,7 @@ export type ImgUrlProps = {
 };
 
 export function getFrom(arg: Pick<ImgUrlProps, 'from'>) {
-    return removeIfStartsWith(suffixIfDoesNotExist(arg.from, '/'), '/');
+    return removeIfStartsWith(suffixIfDoesNotExist(arg.from, '/'), '/') || '';
 }
 
 export function getTimestamp(arg: Timestamp) {
@@ -58,9 +58,10 @@ export function getUri(arg: UriOrTypeId): string {
     return `${arg.type}/${arg.recordId}`;
 }
 
-export function getSize(arg: Size & WidthHeight): string {
+export function getSize(arg: Size & WidthHeight, dpr = 2): string {
     if ('size' in arg && arg.size) return arg.size;
-    else if ('width' in arg && arg.width && 'height' in arg && arg.height) return `${arg.width * 2}x${arg.height * 2}`;
+    else if ('width' in arg && arg.width && 'height' in arg && arg.height)
+        return `${arg.width * dpr}x${arg.height * dpr}`;
     return '';
 }
 
@@ -76,7 +77,7 @@ export function getUrl(url: string): URL | undefined {
     }
 
     try {
-        return new URL(window.location.origin + url);
+        return new URL(window.location.origin + '/' + removeIfStartsWith(url, '/'));
     } catch (e) {
         /* silent exception */
     }
@@ -95,7 +96,7 @@ export function getUrl(url: string): URL | undefined {
  *   The final url is {from}/{size}/{uri}.{format}?_={timestamp}
  * @param arg
  */
-export function formatImgUrl(arg: ImgUrlProps) {
+export function formatImgUrl(arg: ImgUrlProps, dpr = 2) {
     if ('url' in arg && arg.url) {
         const url = getUrl(arg.url);
         if (url) {
@@ -104,5 +105,5 @@ export function formatImgUrl(arg: ImgUrlProps) {
             return url.toString();
         }
     }
-    return `/${getFrom(arg)}${getSize(arg)}/${getUri(arg)}.${getFormat(arg)}${getTimestamp(arg)}`;
+    return `/${getFrom(arg)}${getSize(arg, dpr)}/${getUri(arg)}.${getFormat(arg)}${getTimestamp(arg)}`;
 }

package/src/components/JRCImg/url.utils.test.ts

@@ -9,6 +9,7 @@ describe('Test utils.url', () => {
         // @ts-ignore
         window.location = { origin: 'https://website.com' };
     });
+
     test('formatImgUrl url', () => {
         expect(formatImgUrl({ url: '/url/random' })).toStrictEqual('https://website.com/url/random');
         expect(formatImgUrl({ url: '/url/random?_=12345' })).toStrictEqual('https://website.com/url/random?_=12345');
@@ -24,18 +25,23 @@ describe('Test utils.url', () => {
         expect(formatImgUrl({ url: 'https://otherwebsite.com/url/random?_=12345', timestamp: 123 })).toStrictEqual(
             'https://otherwebsite.com/url/random?_=12345',
         );
+        expect(formatImgUrl({ url: 'img/react/bookmark-noresult.png', height: 450 })).toStrictEqual(
+            'https://website.com/img/react/bookmark-noresult.png',
+        );
     });
 
     test('getFrom', () => {
-        expect(getFrom({})).toStrictEqual(undefined);
+        expect(getFrom({})).toStrictEqual('');
         expect(getFrom({ from: 'imagestatic' })).toStrictEqual('imagestatic/');
         expect(getFrom({ from: 'imagestatic/' })).toStrictEqual('imagestatic/');
         expect(getFrom({ from: '/imagestatic/' })).toStrictEqual('imagestatic/');
+        expect(getFrom({ from: undefined })).toStrictEqual('');
     });
 
     test('getSize', () => {
         expect(getSize({ size: '32' })).toStrictEqual('32');
         expect(getSize({ width: 32, height: 32 })).toStrictEqual('64x64');
+        expect(getSize({ width: 32, height: 32 }, 3)).toStrictEqual('96x96');
     });
 
     test('getUri', () => {

package/src/components/JRCList/JRCList.styles.tsx

@@ -4,6 +4,7 @@ import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { JRCIconButton } from '../JRCIconButton/JRCIconButton';
 import { JRCConditionalWrapper } from '../Common/JRCConditionalWrapper';
+import { useIntl } from 'react-intl';
 import { DropTargetMonitor } from 'react-dnd/dist/types/types';
 
 const TableCss = css`
@@ -19,13 +20,20 @@ export const Table = styled.table`
     border-collapse: collapse;
 `;
 
-export const Thead = styled.thead``;
+export const Thead = styled.thead`
+    position: sticky;
+    top: 0;
+    background-color: white;
+    border-bottom: 2px solid ${(props) => props.theme.color.grey2};
+    z-index: 1;
+`;
 
 export const TBody = styled.tbody``;
 
 export const Th = styled.th<{ width?: number | string }>`
     ${TableCss};
     font-size: 12px;
+    padding: 0 4px;
     font-weight: normal;
     ${(props) => props.width && props.width > 0 && `width: ${props.width}px`};
 `;
@@ -75,6 +83,7 @@ export const Tr = styled.tr<{ dragging?: boolean }>`
 
 export const Td = styled.td`
     ${TableCss};
+    padding: 0 4px;
     ${(props) => props.width && `width: ${props.width}`};
 `;
 
@@ -137,6 +146,8 @@ export const DraggableTBody = ({ draggable, children }: DraggableTBodyProps) =>
 const DND_ITEM_TYPE = 'row';
 
 export const DraggableTr = ({ index, onDrag, onDrop, draggable, children }: DraggableTrProps) => {
+    const intl = useIntl();
+
     const dropRef = React.useRef<HTMLTableRowElement>(null);
     const dragRef = React.useRef<HTMLTableCellElement>(null);
     let dragging = false;
@@ -199,7 +210,10 @@ export const DraggableTr = ({ index, onDrag, onDrop, draggable, children }: Drag
                 <Tr ref={dropRef} dragging={dragging}>
                     {draggable && (
                         <DraggableTd ref={dragRef}>
-                            <JRCIconButton icon={'icon-fs-dw'} size="medium" />
+                            <JRCIconButton
+                                icon="icon-fs-dw"
+                                tooltip={{ description: intl.formatMessage({ id: 'GLOBAL_Move' }), position: 'right' }}
+                            />
                             &nbsp;
                         </DraggableTd>
                     )}