jamespot-react-components 1.0.16 → 1.0.65

package/.history/src/components/Form/Input/JRCFormCheckbox/JRCFormCheckbox_20211019160746.tsx

@@ -1,307 +0,0 @@
-import * as React from 'react';
-import { Field, WrappedFieldInputProps } from 'redux-form';
-import { useControls } from '../ReduxFormControls';
-import styled from 'styled-components';
-import { useIntl } from 'react-intl';
-import { JRCCheckbox } from './JRCCheckbox';
-import { JRCToggle } from './JRCToggle';
-import JRCFormFieldRender from '../JRCFormFieldRender';
-import { JRCTooltipProps } from 'components/JRCTooltip/JRCTooltip';
-import { JRCRadio } from './JRCRadio';
-
-/**
- * Checkbox option
- * @member label input label displayed in front of the checkbox
- * @member value value set in the redux form
- * @member disabled whether the option is disabled
- */
-type CheckboxOption = {
-    label: string | JSX.Element;
-    value: string | number;
-    disabled?: boolean;
-};
-
-/**
- * props of the JRCFormCheckbox components
- * @member label legend, used as the label of the checkboxes
- * @member description, description, part of the html label
- * @member helper, tooltip, part of the html label
- * @member options checkbox options @see CheckboxOption
- * @member name field name, used a redux form key
- * @member direction Direction du checkbox : en column ou par ligne
- * @member labelPosition Display the label before or after the checkbox
- * @member checkboxMode checkbox, toggle (both rendered as input type checkbox) or radio
- * @member variant variant
- * @member reduxFormValueType Only for the checkboxMode checkbox et radio
- *     redux form value form. If set to boolean (and if there is only one option),
- *     the redux form value will be a boolean instead of an array
- * @member input redux form input object
- * @member backgroundOnHover whether the background is colored on hover
- * @member backgroundOnSelect whether the background is colored on select
- */
-export interface JRCFormCheckboxProps
-    extends React.ComponentPropsWithoutRef<'input'> {
-    label?: string | JSX.Element;
-    description?: string;
-    helper?: JRCTooltipProps;
-    options: CheckboxOption[];
-    name: string;
-    direction?: 'row' | 'column' | 'two-columns';
-    labelPosition?: 'before' | 'after';
-    checkboxMode?: 'checkbox' | 'toggle' | 'radio';
-    variant?: 'default' | 'outlined';
-    reduxFormValueType?: 'array' | 'boolean';
-    input?: WrappedFieldInputProps;
-    backgroundOnHover?: boolean;
-    backgroundOnSelect?: boolean;
-    SortByChecked?: boolean;
-}
-
-const defaultProps: JRCFormCheckboxProps = {
-    name: 'you-must-change-that',
-    options: [],
-    direction: 'column',
-    labelPosition: 'before',
-    checkboxMode: 'checkbox',
-    variant: 'default',
-    label: '',
-    reduxFormValueType: 'array',
-    backgroundOnHover: false,
-    backgroundOnSelect: false,
-    SortByChecked: false,
-};
-
-const DirectionContainer = styled.div<{ direction: string; variant: string }>`
-    display: flex;
-    flex-direction: ${(props) =>
-        props.direction === 'column' ? 'column' : 'row'};
-    flex-wrap: wrap;
-    align-items: ${(props) =>
-        props.direction === 'column' && props.variant === 'outlined'
-            ? 'stretch'
-            : 'flex-start'};
-`;
-
-type CheckboxLabelProps = {
-    direction: string;
-    variant: string;
-    checked: boolean;
-    disabled: boolean;
-    labelPosition: string;
-    backgroundOnHover: boolean;
-    backgroundOnSelect: boolean;
-};
-
-const FocusBackground = styled.div<{ variant: 'default' | 'outlined' }>`
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    margin: 0;
-    border-radius: ${(props) => (props.variant === 'outlined' ? '8px' : '0')};
-    z-index: -1;
-`;
-
-const CheckboxLabel = styled.label<CheckboxLabelProps>`
-    position: relative;
-    z-index: 0;
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    ${(props) =>
-        props.labelPosition === 'after' && 'flex-direction: row-reverse'};
-    ${(props) =>
-        props.labelPosition === 'after' && 'justify-content: space-between'};
-    ${(props) => {
-        if (props.direction === 'two-columns') return 'width: calc(50% - 4px)';
-        else if (props.direction === 'column') return 'width: 100%';
-    }};
-    min-height: ${(props) => {
-        if (props.variant === 'outlined') {
-            if (props.direction === 'two-columns') return '64px';
-            else if (props.direction === 'column') return '92px';
-        }
-        return '28px';
-    }};
-    padding: ${(props) => {
-        if (props.variant === 'outlined') {
-            if (props.direction === 'row')
-                return props.labelPosition === 'after'
-                    ? '4px 4px 4px 8px'
-                    : '4px 8px 4px 4px';
-            return props.labelPosition === 'after'
-                ? '8px 8px 8px 16px'
-                : '8px 16px 8px 8px';
-        }
-    }};
-    margin-bottom: 4px;
-    border-radius: ${(props) => (props.variant === 'outlined' ? '8px' : '0')};
-    ${(props) => {
-        if (props.variant === 'outlined' && props.checked)
-            return `border: 1px solid ${props.theme.color.navy}`;
-        else if (props.variant === 'outlined')
-            return `border: 1px solid ${props.theme.color.grey2}`;
-    }};
-    color: ${(props) => {
-        if (props.disabled) return props.theme.color.grey3;
-        else if (props.checked) return props.theme.color.grey5;
-        else return props.theme.color.grey4;
-    }};
-    ${(props) => !props.disabled && 'cursor: pointer'};
-    transition: border 0.2s;
-
-    &:hover {
-        ${(props) =>
-            props.backgroundOnHover &&
-            !props.disabled &&
-            `background-color: ${props.theme.color.grey0}`};
-        ${(props) =>
-            props.variant === 'outlined' &&
-            !props.disabled &&
-            `border: 1px solid ${props.theme.color.navy}`};
-    }
-    &:not(:last-child) {
-        ${(props) => props.direction === 'row' && 'margin-right: 8px'};
-    }
-    &:nth-child(odd) {
-        ${(props) => props.direction === 'two-columns' && 'margin-right: 8px'};
-    }
-
-    & input:focus-visible + div {
-        background-color: ${(props) => props.theme.color.grey1};
-        border-radius: ${(props) =>
-            props.variant === 'outlined' ? '8px' : '0'};
-    }
-
-    & > ${FocusBackground} {
-        ${(props) =>
-            props.checked &&
-            props.backgroundOnSelect &&
-            `background-color: ${props.theme.color.grey0}`};
-    }
-`;
-
-const CheckboxOrToggle = (
-    props: Omit<React.ComponentPropsWithoutRef<'input'>, 'type'> & {
-        checkboxMode: string;
-    }
-) => {
-    const { checkboxMode, ...inputProps } = props;
-    return props.checkboxMode === 'toggle' ? (
-        <JRCToggle {...inputProps} />
-    ) : (
-        <JRCCheckbox {...inputProps} />
-    );
-};
-
-const JRCFormCheckboxFieldRender: React.FunctionComponent<JRCFormCheckboxProps> = (
-    props: JRCFormCheckboxProps,
-    input: WrappedFieldInputProps
-) => {
-    const reduxFormBoolean =
-        props.options.length === 1 && props.reduxFormValueType === 'boolean';
-    const isChecked = (input: WrappedFieldInputProps, option: CheckboxOption) =>
-        input &&
-        (reduxFormBoolean
-            ? input.value
-            : props.checkboxMode === 'radio'
-            ? input.value === option.value
-            : input.value.includes(option.value));
-    let options = props.SortByChecked
-        ? props.options.sort(
-              (a, b) => isChecked(input, b) - isChecked(input, a)
-          )
-        : props.options;
-
-    React.useEffect(() => {
-        if (props.SortByChecked) {
-            options =
-                input &&
-                props.options.sort(
-                    (a, b) => isChecked(input, b) - isChecked(input, a)
-                );
-        }
-    }, [input && input.value]);
-
-    return (
-        <>
-            <DirectionContainer
-                direction={props.direction}
-                variant={props.variant}
-            >
-                {options.map((option, index) => (
-                    <CheckboxLabel
-                        key={index}
-                        direction={props.direction}
-                        labelPosition={props.labelPosition}
-                        variant={props.variant}
-                        disabled={props.disabled || option.disabled}
-                        checked={isChecked(input, option)}
-                        backgroundOnHover={props.backgroundOnHover}
-                        backgroundOnSelect={props.backgroundOnSelect}
-                    >
-                        {props.checkboxMode === 'radio' ? (
-                            <JRCRadio
-                                name={props.name}
-                                value={option.value}
-                                disabled={props.disabled || option.disabled}
-                                checked={option.value === input.value}
-                                onChange={(e) => input.onChange(e.target.value)}
-                            />
-                        ) : (
-                            <CheckboxOrToggle
-                                checkboxMode={props.checkboxMode}
-                                name={props.name}
-                                value={option.value}
-                                disabled={props.disabled || option.disabled}
-                                checked={isChecked(input, option)}
-                                onChange={(event) => {
-                                    if (reduxFormBoolean) {
-                                        return input.onChange(
-                                            event.target.checked
-                                        );
-                                    } else {
-                                        const newValue = [...input.value];
-                                        if (event.target.checked) {
-                                            newValue.push(option.value);
-                                        } else {
-                                            newValue.splice(
-                                                newValue.indexOf(option.value),
-                                                1
-                                            );
-                                        }
-                                        return input.onChange(newValue);
-                                    }
-                                }}
-                            />
-                        )}
-                        <FocusBackground variant={props.variant} />
-                        {option.label}
-                    </CheckboxLabel>
-                ))}
-            </DirectionContainer>
-        </>
-    );
-};
-
-export const JRCFormCheckbox = (props: JRCFormCheckboxProps) => {
-    const validate = useControls({
-        intl: useIntl(),
-        required: props.required,
-    });
-    return (
-        <Field
-            component={JRCFormFieldRender}
-            renderInputFct={(input: WrappedFieldInputProps) =>
-                JRCFormCheckboxFieldRender(props, input)
-            }
-            labelIsLegend={true}
-            validate={validate}
-            htmlFor={props.name}
-            {...props}
-        />
-    );
-};
-
-JRCFormCheckbox.defaultProps = defaultProps;

package/.history/src/components/Form/Input/JRCFormCheckbox/JRCFormCheckbox_20211116142837.tsx

@@ -1,263 +0,0 @@
-import * as React from 'react';
-import { Field, WrappedFieldInputProps } from 'redux-form';
-import { useControls } from '../ReduxFormControls';
-import styled from 'styled-components';
-import { useIntl } from 'react-intl';
-import { JRCCheckbox } from './JRCCheckbox';
-import { JRCToggle } from './JRCToggle';
-import JRCFormFieldRender from '../JRCFormFieldRender';
-import { JRCTooltipProps } from 'components/JRCTooltip/JRCTooltip';
-import { JRCRadio } from './JRCRadio';
-
-/**
- * Checkbox option
- * @member label input label displayed in front of the checkbox
- * @member value value set in the redux form
- * @member disabled whether the option is disabled
- */
-type CheckboxOption = {
-    label: string | JSX.Element;
-    value: string | number;
-    disabled?: boolean;
-};
-
-/**
- * props of the JRCFormCheckbox components
- * @member label legend, used as the label of the checkboxes
- * @member description, description, part of the html label
- * @member helper, tooltip, part of the html label
- * @member options checkbox options @see CheckboxOption
- * @member name field name, used a redux form key
- * @member direction Direction du checkbox : en column ou par ligne
- * @member labelPosition Display the label before or after the checkbox
- * @member checkboxMode checkbox, toggle (both rendered as input type checkbox) or radio
- * @member variant variant
- * @member reduxFormValueType Only for the checkboxMode checkbox et radio
- *     redux form value form. If set to boolean (and if there is only one option),
- *     the redux form value will be a boolean instead of an array
- * @member input redux form input object
- * @member backgroundOnHover whether the background is colored on hover
- * @member backgroundOnSelect whether the background is colored on select
- */
-export interface JRCFormCheckboxProps extends React.ComponentPropsWithoutRef<'input'> {
-    label?: string | JSX.Element;
-    description?: string;
-    helper?: JRCTooltipProps;
-    options: CheckboxOption[];
-    name: string;
-    direction?: 'row' | 'column' | 'two-columns';
-    labelPosition?: 'before' | 'after';
-    checkboxMode?: 'checkbox' | 'toggle' | 'radio';
-    variant?: 'default' | 'outlined';
-    reduxFormValueType?: 'array' | 'boolean';
-    input?: WrappedFieldInputProps;
-    backgroundOnHover?: boolean;
-    backgroundOnSelect?: boolean;
-    SortByChecked?: boolean;
-}
-
-const defaultProps: JRCFormCheckboxProps = {
-    name: 'you-must-change-that',
-    options: [],
-    direction: 'column',
-    labelPosition: 'before',
-    checkboxMode: 'checkbox',
-    variant: 'default',
-    label: '',
-    reduxFormValueType: 'array',
-    backgroundOnHover: false,
-    backgroundOnSelect: false,
-    SortByChecked: false,
-};
-
-const DirectionContainer = styled.div<{ direction: string; variant: string }>`
-    display: flex;
-    flex-direction: ${(props) => (props.direction === 'column' ? 'column' : 'row')};
-    flex-wrap: wrap;
-    align-items: ${(props) =>
-        props.direction === 'column' && props.variant === 'outlined' ? 'stretch' : 'flex-start'};
-`;
-
-type CheckboxLabelProps = {
-    direction: string;
-    variant: string;
-    checked: boolean;
-    disabled: boolean;
-    labelPosition: string;
-    backgroundOnHover: boolean;
-    backgroundOnSelect: boolean;
-};
-
-const FocusBackground = styled.div<{ variant: 'default' | 'outlined' }>`
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    margin: 0;
-    border-radius: ${(props) => (props.variant === 'outlined' ? '8px' : '0')};
-    z-index: -1;
-`;
-
-const CheckboxLabel = styled.label<CheckboxLabelProps>`
-    position: relative;
-    z-index: 0;
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    ${(props) => props.labelPosition === 'after' && 'flex-direction: row-reverse'};
-    ${(props) => props.labelPosition === 'after' && 'justify-content: space-between'};
-    ${(props) => {
-        if (props.direction === 'two-columns') return 'width: calc(50% - 4px)';
-        else if (props.direction === 'column') return 'width: 100%';
-    }};
-    min-height: ${(props) => {
-        if (props.variant === 'outlined') {
-            if (props.direction === 'two-columns') return '64px';
-            else if (props.direction === 'column') return '92px';
-        }
-        return '28px';
-    }};
-    padding: ${(props) => {
-        if (props.variant === 'outlined') {
-            if (props.direction === 'row')
-                return props.labelPosition === 'after' ? '4px 4px 4px 8px' : '4px 8px 4px 4px';
-            return props.labelPosition === 'after' ? '8px 8px 8px 16px' : '8px 16px 8px 8px';
-        }
-    }};
-    margin-bottom: 4px;
-    border-radius: ${(props) => (props.variant === 'outlined' ? '8px' : '0')};
-    ${(props) => {
-        if (props.variant === 'outlined' && props.checked) return `border: 1px solid ${props.theme.color.navy}`;
-        else if (props.variant === 'outlined') return `border: 1px solid ${props.theme.color.grey2}`;
-    }};
-    color: ${(props) => {
-        if (props.disabled) return props.theme.color.grey3;
-        else if (props.checked) return props.theme.color.grey5;
-        else return props.theme.color.grey4;
-    }};
-    ${(props) => !props.disabled && 'cursor: pointer'};
-    transition: border 0.2s;
-
-    &:hover {
-        ${(props) => props.backgroundOnHover && !props.disabled && `background-color: ${props.theme.color.grey0}`};
-        ${(props) => props.variant === 'outlined' && !props.disabled && `border: 1px solid ${props.theme.color.navy}`};
-    }
-    &:not(:last-child) {
-        ${(props) => props.direction === 'row' && 'margin-right: 8px'};
-    }
-    &:nth-child(odd) {
-        ${(props) => props.direction === 'two-columns' && 'margin-right: 8px'};
-    }
-
-    & input:focus-visible + div {
-        background-color: ${(props) => props.theme.color.grey1};
-        border-radius: ${(props) => (props.variant === 'outlined' ? '8px' : '0')};
-    }
-
-    & > ${FocusBackground} {
-        ${(props) => props.checked && props.backgroundOnSelect && `background-color: ${props.theme.color.grey0}`};
-    }
-`;
-
-const CheckboxOrToggle = (
-    props: Omit<React.ComponentPropsWithoutRef<'input'>, 'type'> & {
-        checkboxMode: string;
-    },
-) => {
-    const { ...inputProps } = props;
-    return props.checkboxMode === 'toggle' ? <JRCToggle {...inputProps} /> : <JRCCheckbox {...inputProps} />;
-};
-
-const JRCFormCheckboxFieldRender: React.FunctionComponent<JRCFormCheckboxProps> = (
-    props: JRCFormCheckboxProps,
-    input: WrappedFieldInputProps,
-) => {
-    const reduxFormBoolean = props.options.length === 1 && props.reduxFormValueType === 'boolean';
-    const isChecked = (input: WrappedFieldInputProps, option: CheckboxOption) =>
-        input &&
-        (reduxFormBoolean
-            ? input.value
-            : props.checkboxMode === 'radio'
-            ? input.value === option.value
-            : input.value.includes(option.value));
-    let options = props.SortByChecked
-        ? props.options.sort((a, b) => isChecked(input, b) - isChecked(input, a))
-        : props.options;
-
-    React.useEffect(() => {
-        if (props.SortByChecked) {
-            options = input && props.options.sort((a, b) => isChecked(input, b) - isChecked(input, a));
-        }
-    }, [input && input.value]);
-
-    return (
-        <>
-            <DirectionContainer direction={props.direction} variant={props.variant}>
-                {options.map((option, index) => (
-                    <CheckboxLabel
-                        key={index}
-                        direction={props.direction}
-                        labelPosition={props.labelPosition}
-                        variant={props.variant}
-                        disabled={props.disabled || option.disabled}
-                        checked={isChecked(input, option)}
-                        backgroundOnHover={props.backgroundOnHover}
-                        backgroundOnSelect={props.backgroundOnSelect}>
-                        {props.checkboxMode === 'radio' ? (
-                            <JRCRadio
-                                name={props.name}
-                                value={option.value}
-                                disabled={props.disabled || option.disabled}
-                                checked={option.value === input.value}
-                                onChange={(e) => input.onChange(e.target.value)}
-                            />
-                        ) : (
-                            <CheckboxOrToggle
-                                checkboxMode={props.checkboxMode}
-                                name={props.name}
-                                value={option.value}
-                                disabled={props.disabled || option.disabled}
-                                checked={isChecked(input, option)}
-                                onChange={(event) => {
-                                    if (reduxFormBoolean) {
-                                        return input.onChange(event.target.checked);
-                                    } else {
-                                        const newValue = [...input.value];
-                                        if (event.target.checked) {
-                                            newValue.push(option.value);
-                                        } else {
-                                            newValue.splice(newValue.indexOf(option.value), 1);
-                                        }
-                                        return input.onChange(newValue);
-                                    }
-                                }}
-                            />
-                        )}
-                        <FocusBackground variant={props.variant} />
-                        {option.label}
-                    </CheckboxLabel>
-                ))}
-            </DirectionContainer>
-        </>
-    );
-};
-
-export const JRCFormCheckbox = (props: JRCFormCheckboxProps) => {
-    const validate = useControls({
-        intl: useIntl(),
-        required: props.required,
-    });
-    return (
-        <Field
-            component={JRCFormFieldRender}
-            renderInputFct={(input: WrappedFieldInputProps) => JRCFormCheckboxFieldRender(props, input)}
-            labelIsLegend={true}
-            validate={validate}
-            htmlFor={props.name}
-            {...props}
-        />
-    );
-};
-
-JRCFormCheckbox.defaultProps = defaultProps;

package/.history/src/components/Form/Input/JRCFormColor/JRCFormColor_20210309111210.tsx

@@ -1,86 +0,0 @@
-import * as React from 'react';
-import { Field } from 'redux-form';
-import JRCFormLabel from '../../JRCFormLabel/JRCFormLabel';
-import { JRCFormTextField } from '../JRCFormText/JRCFormText';
-import { extraInfoProps, StyledHelper } from '../JRCFormFieldRender';
-import { ControlsProps, useControls } from '../ReduxFormControls';
-import classNames from 'classnames';
-import { StyledInputColor } from '../JRCStyledInput';
-import { useIntl } from 'react-intl';
-
-export type JRCFormColorInputProps = React.ComponentPropsWithoutRef<'input'>;
-
-export type JRCFormColorFieldProps = JRCFormColorInputProps & ControlsProps;
-
-export const JRCFormColorInput = (props: JRCFormColorInputProps) => {
-    return <StyledInputColor type="color">{props.children}</StyledInputColor>;
-};
-
-export interface JRCFormColorFieldRenderProps extends extraInfoProps {
-    className: string;
-    input: any;
-    children: React.ReactNode;
-    id?: string;
-    type: string;
-    meta: {
-        touched: any;
-        error: string;
-        warning: string;
-    };
-}
-const JRCFormColorFieldRender: React.FunctionComponent<
-JRCFormColorFieldRenderProps & ControlsProps
-> = ({
-    className,
-    input,
-    label,
-    htmlFor,
-    helper,
-    meta: { touched, error, warning },
-}: JRCFormColorFieldRenderProps & ControlsProps) => {
-    const classes = classNames(
-        { error: touched && error },
-        { valid: touched && !error && input.value !== '' },
-        className
-    );
-    return (
-        <div>
-            <JRCFormLabel
-                htmlFor={htmlFor}
-                touched={touched}
-                error={error}
-                warning={warning}
-            >
-                {label}
-            </JRCFormLabel>
-            <div className={classes}>
-                <StyledInputColor
-                    type="color"
-                    {...input}
-                />      
-                <StyledHelper>{helper}</StyledHelper>
-            </div>
-        </div>
-    );
-};
-
-export const JRCFormColorField = (props: JRCFormColorFieldProps) => {
-    const intl = useIntl();
-    const validate = useControls({ ...props, intl });
-    const userAgent = window.navigator.userAgent;
-    const isIE = userAgent.indexOf('MSIE') != -1 || userAgent.indexOf('Trident') != -1;
-    // HTML5 input color does not work on IE
-    if(!isIE)
-        return (
-            <Field
-                component={JRCFormColorFieldRender}
-                validate={validate}
-                {...props}
-            />
-        );
-    else
-        // in that case, just provide an input text to capture the hexa css color code
-        return (
-            <JRCFormTextField {...props}/>
-        );
-};