jamespot-react-components 1.0.9 → 1.0.66

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

@@ -1,253 +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<T|CheckboxOption> extends React.ComponentPropsWithoutRef<"input"> {
-    label?: string | JSX.Element;
-    description?: string;
-    helper?: JRCTooltipProps;
-    options: T[];
-    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 .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_20211019160632.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<T>
-    extends React.ComponentPropsWithoutRef<'input'> {
-    label?: string | JSX.Element;
-    description?: string;
-    helper?: JRCTooltipProps;
-    options: T[];
-    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;