jamespot-react-components 1.0.3 → 1.0.65

package/.history/src/components/JRCPagination/JRCPagination.stories_20211116142641.tsx

@@ -1,65 +0,0 @@
-import * as React from 'react';
-
-import JRCPagination, { PaginationBullet, PaginationBulletProps, JRCPaginationProps } from './JRCPagination';
-export default {
-    title: 'JRCPagination',
-};
-
-const Template = (args: PaginationBulletProps) => <PaginationBullet {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-    number: 12,
-    isActive: false,
-    clickHandler: (number: number) => console.log(number),
-};
-
-export const Active = Template.bind({});
-Active.args = {
-    number: 11,
-    isActive: true,
-    clickHandler: (number: number) => console.log(number),
-};
-
-const PaginationTemplate = (args: JRCPaginationProps) => <JRCPagination {...args} />;
-
-export const PaginationFirst = PaginationTemplate.bind({});
-PaginationFirst.args = {
-    activePage: 1,
-    nbrOfPage: 95,
-    clickHandler: (number: number) => console.log(number),
-};
-
-export const PaginationFirstBis = PaginationTemplate.bind({});
-PaginationFirstBis.args = {
-    activePage: 3,
-    nbrOfPage: 95,
-    clickHandler: (number: number) => console.log(number),
-};
-
-export const PaginationMiddle = PaginationTemplate.bind({});
-PaginationMiddle.args = {
-    activePage: 19,
-    nbrOfPage: 95,
-    clickHandler: (number: number) => console.log(number),
-};
-
-export const PaginationFinal = PaginationTemplate.bind({});
-PaginationFinal.args = {
-    activePage: 95,
-    nbrOfPage: 95,
-    clickHandler: (number: number) => console.log(number),
-};
-
-export const PaginationFinalBis = PaginationTemplate.bind({});
-PaginationFinalBis.args = {
-    activePage: 93,
-    nbrOfPage: 95,
-    clickHandler: (number: number) => console.log(number),
-};
-export const Pagination5Pages = PaginationTemplate.bind({});
-Pagination5Pages.args = {
-    activePage: 1,
-    nbrOfPage: 5,
-    clickHandler: (number: number) => console.log(number),
-};

package/.history/src/components/JRCPagination/JRCPagination.stories_20211116142646.tsx

@@ -1,66 +0,0 @@
-/* eslint-disable no-console */
-import * as React from 'react';
-
-import JRCPagination, { PaginationBullet, PaginationBulletProps, JRCPaginationProps } from './JRCPagination';
-export default {
-    title: 'JRCPagination',
-};
-
-const Template = (args: PaginationBulletProps) => <PaginationBullet {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-    number: 12,
-    isActive: false,
-    clickHandler: (number: number) => console.log(number),
-};
-
-export const Active = Template.bind({});
-Active.args = {
-    number: 11,
-    isActive: true,
-    clickHandler: (number: number) => console.log(number),
-};
-
-const PaginationTemplate = (args: JRCPaginationProps) => <JRCPagination {...args} />;
-
-export const PaginationFirst = PaginationTemplate.bind({});
-PaginationFirst.args = {
-    activePage: 1,
-    nbrOfPage: 95,
-    clickHandler: (number: number) => console.log(number),
-};
-
-export const PaginationFirstBis = PaginationTemplate.bind({});
-PaginationFirstBis.args = {
-    activePage: 3,
-    nbrOfPage: 95,
-    clickHandler: (number: number) => console.log(number),
-};
-
-export const PaginationMiddle = PaginationTemplate.bind({});
-PaginationMiddle.args = {
-    activePage: 19,
-    nbrOfPage: 95,
-    clickHandler: (number: number) => console.log(number),
-};
-
-export const PaginationFinal = PaginationTemplate.bind({});
-PaginationFinal.args = {
-    activePage: 95,
-    nbrOfPage: 95,
-    clickHandler: (number: number) => console.log(number),
-};
-
-export const PaginationFinalBis = PaginationTemplate.bind({});
-PaginationFinalBis.args = {
-    activePage: 93,
-    nbrOfPage: 95,
-    clickHandler: (number: number) => console.log(number),
-};
-export const Pagination5Pages = PaginationTemplate.bind({});
-Pagination5Pages.args = {
-    activePage: 1,
-    nbrOfPage: 5,
-    clickHandler: (number: number) => console.log(number),
-};

package/.history/src/components/JRCPagination/JRCPagination_20211103142342.tsx

@@ -1,219 +0,0 @@
-import { JRCIconButton } from '../JRCIconButton/JRCIconButton';
-import * as React from 'react';
-import styled from 'styled-components';
-import classnames from 'classnames';
-
-const MAX_NBR_OF_PAGE = 5;
-
-export type PaginationBulletProps = {
-    number: number;
-    isActive: boolean;
-    clickHandler: (page: number) => void;
-};
-/**
- * Props type for JRCPagination
- * @member activePage number :  active page Number
- * @member nbrOfPage number : total nb of pages
- * @member clickHandler (page: number) => void; callback when click on a page number
- */
-export type JRCPaginationProps = {
-    activePage: number;
-    nbrOfPage: number;
-    clickHandler: (page: number) => void;
-};
-
-const StyledBullet = styled.span`
-    cursor: pointer;
-    padding: 5px 8px;
-    &.active {
-        color: ${(props) => props.theme.color.overseas};
-        cursor: pointer;
-        font-weight: 500;
-        &:after {
-            content: '';
-            height: 2px;
-            background: ${(props) => props.theme.color.overseas};
-            border-radius: 1px;
-            display: block;
-        }
-    }
-    &:hover {
-        &:after {
-            content: '';
-            height: 2px;
-            background: ${(props) => props.theme.color.overseas};
-            border-radius: 1px;
-            display: block;
-        }
-    }
-    &.longNum {
-        padding: 5px 8px;
-    }
-    &.veryLongNum {
-        padding: 10px 8px;
-    }
-`;
-
-export const PaginationBullet = ({
-    number,
-    isActive,
-    clickHandler,
-}: PaginationBulletProps) => {
-    return (
-        <StyledBullet
-            className={classnames({
-                active: isActive,
-                longNum: number > 10,
-                veryLongNum: number > 100,
-            })}
-            onClick={() => !isActive && clickHandler(number)}
-        >
-            {number}
-        </StyledBullet>
-    );
-};
-
-const PaginationBox = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-`;
-const PaginationNumber = styled.div`
-    text-align: center;
-    display: flex;
-`;
-
-const Ellipsis = styled.span`
-    margin-top: 6px;
-`;
-
-const getBulletArray = (
-    begging: number,
-    end: number,
-    activePage: number,
-    clickHandler: (number: number) => void
-) => {
-    const toRender = [];
-    for (let i = begging; i <= end; i++) {
-        toRender.push(
-            <PaginationBullet
-                key={i}
-                number={i}
-                isActive={i === activePage}
-                clickHandler={clickHandler}
-            />
-        );
-    }
-    return toRender;
-};
-
-const JRCPagination = (props: JRCPaginationProps) => {
-    const { nbrOfPage, clickHandler } = props;
-    let activePage = props.activePage;
-
-    if (activePage === null) {
-        activePage = 1;
-    }
-
-    let toRender = [];
-    // activePage = 1 : Dislay the 5 first ... and the last
-    if (activePage <= MAX_NBR_OF_PAGE) {
-        toRender = [];
-        // If there is 6 pages to render and max is 9. We only render the 6 first
-        if (nbrOfPage <= MAX_NBR_OF_PAGE) {
-            toRender = getBulletArray(1, nbrOfPage, activePage, clickHandler);
-        } else {
-            toRender = getBulletArray(
-                1,
-                MAX_NBR_OF_PAGE,
-                activePage,
-                clickHandler
-            );
-            toRender.push(<Ellipsis key="...end">...</Ellipsis>);
-            // Final Block
-            toRender.push(
-                <PaginationBullet
-                    key={nbrOfPage}
-                    number={nbrOfPage}
-                    isActive={nbrOfPage === activePage}
-                    clickHandler={clickHandler}
-                />
-            );
-        }
-    }
-    // activePage = x : Dislay the  first ... the 3 before and 3 after ... the last
-    else if (
-        activePage > MAX_NBR_OF_PAGE &&
-        activePage < nbrOfPage - MAX_NBR_OF_PAGE
-    ) {
-        toRender.push(
-            <PaginationBullet
-                key={1}
-                number={1}
-                isActive={1 === activePage}
-                clickHandler={clickHandler}
-            />
-        );
-        toRender.push(<Ellipsis key="...start">...</Ellipsis>);
-
-        toRender = [
-            ...toRender,
-            ...getBulletArray(
-                activePage - 2,
-                activePage + 2,
-                activePage,
-                clickHandler
-            ),
-        ];
-
-        toRender.push(<Ellipsis key="...end">...</Ellipsis>);
-        toRender.push(
-            <PaginationBullet
-                key={nbrOfPage}
-                number={nbrOfPage}
-                isActive={nbrOfPage === activePage}
-                clickHandler={clickHandler}
-            />
-        );
-    }
-    // activePage = final :the first page ... and the 9 last
-    else {
-        toRender.push(
-            <PaginationBullet
-                key={1}
-                number={1}
-                isActive={1 === activePage}
-                clickHandler={clickHandler}
-            />
-        );
-        toRender.push(<Ellipsis key="...start">...</Ellipsis>);
-        // last block
-        toRender = [
-            ...toRender,
-            ...getBulletArray(
-                nbrOfPage - MAX_NBR_OF_PAGE,
-                nbrOfPage,
-                activePage,
-                clickHandler
-            ),
-        ];
-    }
-    return (
-        <PaginationBox>
-            <JRCIconButton
-                data-testid="previous"
-                disabled={activePage === 1}
-                icon="icon-chevron-left"
-                onClick={() => clickHandler(activePage - 1)}
-            />
-            <PaginationNumber>{toRender}</PaginationNumber>
-            <JRCIconButton
-                data-testid="next"
-                disabled={activePage === nbrOfPage}
-                icon="icon-chevron-right"
-                onClick={() => clickHandler(activePage + 1)}
-            />
-        </PaginationBox>
-    );
-};
-export default JRCPagination;

package/.history/src/components/JRCTag/JRCTag_20211116142631.tsx

@@ -1,149 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import * as React from 'react';
-import { UriOrTypeId } from 'components/Form/Common/types';
-import JRCAvatar from 'components/JRCAvatar/JRCAvatar';
-import JRCIcon from 'components/JRCIcon/JRCIcon';
-import styled from 'styled-components';
-import JRCTooltip from '../JRCTooltip/JRCTooltip';
-
-/**
- * @see UriOrTypeId
- * @member collapsed - whether the tag is collapsed or not
- * @member label - label aside from the avatar
- * @member value - value passed as the onClick argument
- * @member onClick - onClick method
- * @member clickVariant - whether the tag style is for a selection or a deletion
- * @member onMouseDown - callback on mouse down
- * @member variant - whether the avatar is circular or square
- * @member focusable - whether the element is focusable. Independant of onClick property
- * @member isFocused - whether the element is focused. Property used with variant for styling the component
- * @member tooltipDescription - if present, show a tooltip with the description
- */
-export type JRCTagProps<T> = UriOrTypeId & {
-    collapsed?: boolean;
-    label?: string;
-    value?: T;
-    onClick?: (e: React.MouseEvent, value: T) => void;
-    clickVariant?: 'select' | 'delete';
-    onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
-    variant?: 'circle' | 'square';
-    focusable?: boolean;
-    isFocused?: boolean;
-    tooltipDescription?: string;
-};
-
-const TagWrapper = styled.div<{ clickVariant: 'select' | 'delete'; focusable: boolean; isFocused: boolean }>`
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    padding: 4px 8px;
-    margin: 4px 2px;
-    border-radius: 4px;
-    cursor: ${(props) => (props.focusable ? 'pointer' : 'default')};
-    background-color: ${(props) => {
-        if (props.focusable && props.isFocused) {
-            return props.theme.color[config[props.clickVariant].hoverBGColor];
-        } else {
-            return props.theme.color[config[props.clickVariant].backgroundColor];
-        }
-    }};
-    color: ${(props) => {
-        if (props.focusable && props.isFocused) {
-            return props.theme.color[config[props.clickVariant].hoverColor];
-        } else {
-            return props.theme.color[config[props.clickVariant].color];
-        }
-    }};
-
-    i {
-        position: absolute;
-        margin: 0;
-        padding: 0;
-        left: 8px;
-        top: 4px;
-        width: 24px;
-        height: 24px;
-        line-height: 24px;
-        text-align: center;
-        border-radius: 12px;
-        background-color: #daa9;
-        display: none;
-    }
-
-    :hover {
-        ${(props) =>
-            props.focusable && `background-color: ${props.theme.color[config[props.clickVariant].hoverBGColor]}`};
-        ${(props) => props.focusable && `color: ${props.theme.color[config[props.clickVariant].hoverColor]}`};
-    }
-    :hover i {
-        ${(props) => props.focusable && props.clickVariant === 'delete' && `display: block`};
-    }
-    & i {
-        ${(props) => props.focusable && props.isFocused && props.clickVariant === 'delete' && `display: block`};
-    }
-`;
-
-const TagLabel = styled.div`
-    margin-left: 4px;
-`;
-
-const config = {
-    select: {
-        color: 'grey4',
-        backgroundColor: 'white',
-        hoverColor: 'grey5',
-        hoverBGColor: 'grey0',
-    },
-    delete: {
-        color: 'grey5',
-        backgroundColor: 'grey0',
-        hoverColor: 'grey4',
-        hoverBGColor: 'orangeL80',
-    },
-};
-
-const JRCTag = <T,>(props: JRCTagProps<T>) => {
-    const uri = 'uri' in props ? props.uri : `${props.type}/${props.recordId}`;
-    const isTooltip = props.tooltipDescription && props.collapsed;
-
-    const getAvatar = () =>
-        React.createElement(
-            TagWrapper,
-            {
-                onClick: props.onClick
-                    ? (e: React.MouseEvent<Element, MouseEvent>) => {
-                          props.onClick(e, props.value);
-                      }
-                    : undefined,
-                onMouseDown: props.onMouseDown,
-                clickVariant: props.clickVariant,
-                focusable: props.focusable,
-                isFocused: props.isFocused,
-            },
-            <>
-                <JRCAvatar
-                    alt="tag"
-                    /*
-                // @ts-ignore FIXME remove that when upgrading to typescript version > 4.2.x */
-                    uri={uri}
-                    variant={props.variant}
-                    focusable={props.focusable}
-                />
-                {!props.collapsed && props.label && <TagLabel>{props.label}</TagLabel>}
-                {props.clickVariant === 'delete' && <JRCIcon name="icon-times" size="small" color="orange" />}
-            </>,
-        );
-
-    return isTooltip ? (
-        <JRCTooltip description={props.tooltipDescription}>{getAvatar()}</JRCTooltip>
-    ) : (
-        <> {getAvatar()} </>
-    );
-};
-
-const defaultProps = {
-    clickVariant: 'select',
-};
-
-JRCTag.defaultProps = defaultProps;
-export { JRCTag };