jamespot-react-components 1.0.9 → 1.0.66

package/.history/src/components/Form/Input/JRCFormSelect/JRCFormSelect_20211116142012.tsx

@@ -1,350 +0,0 @@
-import * as React from 'react';
-import { Field, WrappedFieldInputProps } from 'redux-form';
-import JRCFormFieldRender, { ExternalFormFieldRenderProps, InputState } from '../JRCFormFieldRender';
-
-import styled, { ThemeContext } from 'styled-components';
-import { useIntl } from 'react-intl';
-import check from 'assets/check.svg';
-import AsyncSelect from 'react-select/async';
-
-import Select, { components } from 'react-select';
-import { useControls } from '../ReduxFormControls';
-import JRCIcon from 'components/JRCIcon/JRCIcon';
-import { JRCValueLabelProps } from 'components/Form/Common/types';
-import { OptionProps } from 'react-select';
-import { SelectComponentsConfig } from 'react-select/src/components';
-
-const InfoImg = styled.img`
-    width: 12px;
-    height: 12px;
-    margin-right: 10px;
-    cursor: pointer;
-`;
-
-const DropdownIndicator = (props: any) => {
-    if (props.selectProps.inputState.valid) {
-        return <InfoImg src={check} />;
-    } else {
-        return <JRCIcon name="icon-angle-down" color="grey2" />;
-    }
-};
-
-const getBorderColor = (state: any, themeContext: any) => {
-    const { valid, error } = state.selectProps.inputState;
-    if (state.isFocused) {
-        return themeContext.color.navy;
-    } else if (valid) {
-        return themeContext.color.green;
-    } else if (error) {
-        return themeContext.color.orange;
-    } else {
-        return themeContext.color.grey2;
-    }
-};
-
-const getSelectStyle = (themeContext: any, required: boolean, customStyle: any = {}) => ({
-    input: () => ({
-        padding: '9px 0 0 8px',
-        fontSize: '16px',
-    }),
-    control: (defaultStyles: any, state: any) => ({
-        ...defaultStyles,
-        border: `1px solid ${getBorderColor(state, themeContext)}`,
-        color: themeContext.color.grey5,
-        width: `100%`,
-        minHeight: '40px',
-        borderRadius: `8px`,
-        fontStyle: 'normal',
-        boxShadow: 'none',
-        cursor: state.selectProps.isDisabled ? 'not-allowed' : 'pointer',
-        transition: 'border .2s, box-shadow .2s',
-        ':hover': {
-            border: `1px solid ${getBorderColor(state, themeContext)}`,
-            ...(state.selectProps.isDisabled
-                ? null
-                : {
-                      boxShadow: `0 0 2px ${state.isFocused ? themeContext.color.grey4 : themeContext.color.grey2}`,
-                  }),
-        },
-        ...customStyle.control,
-    }),
-
-    indicatorsContainer: (defaultStyles: any, state: any) => ({
-        ...defaultStyles,
-        'i::before': {
-            color: state.isFocused ? themeContext.color.navy + `!important` : themeContext.color.grey3,
-            paddingRight: `8px`,
-        },
-        ...customStyle.indicatorsContainer,
-    }),
-    clearIndicator: (defaultStyles: any) => ({
-        ...defaultStyles,
-        paddingRight: '4px',
-        color: themeContext.color.grey2,
-        ':hover': {
-            color: themeContext.color.overseas,
-        },
-        ...customStyle.clearIndicator,
-    }),
-    placeholder: (defaultStyles: any) => {
-        return {
-            ...defaultStyles,
-            color: `${themeContext.color.grey3}`,
-            marginLeft: '8px',
-            fontSize: '16px',
-            ...customStyle.placeholder,
-        };
-    },
-    singleValue: (defaultStyles: any) => ({
-        ...defaultStyles,
-        marginLeft: '8px',
-        ...customStyle.singleValue,
-    }),
-    menu: (defaultStyles: any) => {
-        return {
-            ...defaultStyles,
-            marginTop: '4px',
-            padding: '0',
-            borderRadius: '8px',
-            ...customStyle.menu,
-        };
-    },
-    menuList: (defaultStyles: any) => {
-        return {
-            ...defaultStyles,
-            ...customStyle.menuList,
-        };
-    },
-    valueContainer: (defaultStyles: any) => {
-        return {
-            ...defaultStyles,
-            ...customStyle.valueContainer,
-        };
-    },
-    option: () => ({}),
-    group: (defaultStyles: any) => {
-        return {
-            ...defaultStyles,
-            padding: '1.5px 0',
-            ...customStyle.group,
-        };
-    },
-    groupHeading: (defaultStyles: any) => {
-        return {
-            ...defaultStyles,
-            height: '32px',
-            lineHeight: '32px',
-            textTransform: 'none',
-            fontSize: '12px',
-            color: `${themeContext.color.grey5}`,
-            backgroundColor: `${themeContext.color.grey1}`,
-            ...customStyle.groupHeading,
-        };
-    },
-});
-
-export const JRCFormSelectInput = (props: any) => {
-    const themeContext = React.useContext(ThemeContext);
-    const selectStyle = getSelectStyle(themeContext, props.required, props.customReactSelectStyle);
-    const intl = useIntl();
-    const { selectedOption, onInputChange, components, placeholder, ...otherProps } = props;
-    return (
-        <Select
-            id={props.name}
-            styles={selectStyle}
-            components={{
-                IndicatorSeparator: () => null,
-                DropdownIndicator,
-                Option,
-                ...components,
-            }}
-            noOptionsMessage={() => intl.formatMessage({ id: 'GLOBAL_Form_No_Options' })}
-            loadingMessage={() => intl.formatMessage({ id: 'GLOBAL_Loading' })}
-            placeholder={placeholder || intl.formatMessage({ id: 'GLOBAL_Select' })}
-            defaultValue={selectedOption && selectedOption}
-            onInputChange={onInputChange && onInputChange}
-            isClearable={!props.required && !props.isMulti}
-            {...otherProps}
-        />
-    );
-};
-
-export const JRCFormSelectAsyncInput = (props: any) => {
-    const themeContext = React.useContext(ThemeContext);
-    const selectStyle = getSelectStyle(themeContext, props.required, props.customReactSelectStyle);
-    const intl = useIntl();
-    const { selectedOption, onInputChange, components, placeholder, ...otherProps } = props;
-    return (
-        <AsyncSelect
-            id={props.name}
-            styles={selectStyle}
-            components={{
-                IndicatorSeparator: () => null,
-                DropdownIndicator,
-                Option,
-                ...components,
-            }}
-            noOptionsMessage={() => intl.formatMessage({ id: 'GLOBAL_Form_No_Options' })}
-            loadingMessage={() => intl.formatMessage({ id: 'GLOBAL_Loading' })}
-            placeholder={placeholder || intl.formatMessage({ id: 'GLOBAL_Select' })}
-            defaultValue={selectedOption && selectedOption}
-            onInputChange={onInputChange && onInputChange}
-            isClearable={!props.required && !props.isMulti}
-            {...otherProps}
-        />
-    );
-};
-
-export const JRCFormSelectFieldRender = <T,>(
-    props: JRCFormSelectProps<T> & { input: WrappedFieldInputProps; inputState: InputState },
-) => {
-    const { input, inputState } = props;
-
-    const { selectedOption } = props;
-
-    React.useEffect(() => {
-        // eslint-disable-next-line no-prototype-builtins
-        if (selectedOption && selectedOption.hasOwnProperty('value') && selectedOption.hasOwnProperty('label')) {
-            input.onChange(selectedOption);
-        }
-    }, []);
-    return (
-        <>
-            {props.asyncPromise ? (
-                <JRCFormSelectAsyncInput
-                    {...input}
-                    {...props}
-                    inputState={inputState}
-                    loadOptions={props.asyncPromise}
-                    cacheOptions
-                    defaultOptions
-                    onBlur={() => input.onBlur(input.value)}
-                    onChange={(value: T) => {
-                        input.onChange(value);
-                    }}
-                />
-            ) : (
-                <JRCFormSelectInput
-                    {...input}
-                    {...props}
-                    inputState={inputState}
-                    onBlur={() => input.onBlur(input.value)}
-                    onChange={(value: T) => {
-                        input.onChange(value);
-                    }}
-                />
-            )}
-        </>
-    );
-};
-
-const DefaultOptionLabel = styled.div.attrs((props) => ({ ...props, dashedInset: '5px' }))<{
-    isFocused: boolean;
-    isSelected: boolean;
-}>`
-    padding: 4px 12px;
-    margin: 2px 4px;
-    min-height: 32px;
-    display: flex;
-    align-items: center;
-    border-radius: 4px;
-    position: relative;
-
-    color: ${(props) => (props.isSelected ? props.theme.color.navy : 'inherit')};
-    background-color: ${(props) => (props.isFocused ? props.theme.color.grey0 : 'inherit')};
-
-    font-weight: ${(props) => (props.isSelected ? '500' : 'inherit')};
-    letter-spacing: ${(props) => (props.isSelected ? 'inherit' : '.1px')};
-
-    :hover {
-        cursor: pointer;
-        background: ${(props) => props.theme.color.grey0};
-    }
-`;
-
-const Option = (props: OptionProps<{ label: string }, boolean>) => {
-    const { isFocused, isSelected } = props;
-
-    return (
-        <components.Option {...props}>
-            <DefaultOptionLabel isFocused={isFocused} isSelected={isSelected}>
-                {props.children}
-            </DefaultOptionLabel>
-        </components.Option>
-    );
-};
-
-/**
- * Props of the JRCFormSelectField element
- *
- * @extends JRCWritableFormInputProps @see JRCWritableFormInputProps
- *
- * @member name redux form name
- * @member required redux form required validation
- * @member asyncPromise if provided, the select will be async.
- *         Async promise with the available filtered data.
- *         If not provided, the options prop should be provided
- * @member options in case of sync select, available data
- * @member getOptionLabel format the option label. If not provided,
- *         the options or the async promise should have a label attribute
- * @member getOptionValue format the option value. If not provided,
- *         the options or the async promise should have a value attribute
- * @member isMulti defines whether the user can select multiple choices
- * @member selectedOption defines an initial value. This property is going to change
- *         since it is partially incompatible with getOptionLabel and getOptionValue
- * @member onInputChange when input select is changing
- * @member isSearchable whether the user is allowed to filter results by typing
- * @member isDisabled whether the input disabled
- * @member components - react-select custom components
- */
-export interface JRCFormSelectProps<T>
-    extends ExternalFormFieldRenderProps,
-        Partial<React.ComponentPropsWithoutRef<'select'>> {
-    name: string;
-    required?: boolean;
-    placeholder?: string;
-    asyncPromise?: (inputValue: string, callback: () => Promise<T[]>) => void;
-    options?: T[];
-    getOptionLabel?: (option: T) => JSX.Element | string;
-    getOptionValue?: (option: T) => string;
-    isMulti?: boolean;
-    selectedOption?: { label: JSX.Element | string; value: any };
-    onInputChange?: (inputValue: T, { action }: any) => void;
-    isSearchable?: boolean;
-    isDisabled?: boolean;
-    components?: SelectComponentsConfig<T, boolean>;
-}
-
-/**
- * Component used as a select sync or async
- * @param props JRCFormSelectProps
- * validation props: required
- * @returns JSX.Element
- */
-const JRCFormSelectField = <T,>(props: JRCFormSelectProps<T>) => {
-    const validate = useControls({
-        intl: useIntl(),
-        required: props.required,
-    });
-    return (
-        <Field
-            component={JRCFormFieldRender}
-            renderInputFct={(input: WrappedFieldInputProps, inputState: InputState) =>
-                JRCFormSelectFieldRender({ ...props, input, inputState })
-            }
-            validate={validate}
-            htmlFor={props.name}
-            {...props}
-        />
-    );
-};
-
-const defaultProps: JRCFormSelectProps<JRCValueLabelProps> = {
-    name: 'select',
-    isSearchable: false,
-    components: {},
-};
-
-JRCFormSelectField.defaultProps = defaultProps;
-
-export { JRCFormSelectField };

package/.history/src/components/Form/Input/JRCFormText/JRCFormText_20210114075959.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { Field } from 'redux-form';
-import JRCFormFieldRender, { entryProps } from '../JRCFormFieldRender';
-import { ControlsProps, useControls } from '../ReduxFormControls';
-import { StyledInput } from '../JRCStyledInput';
-import { useIntl } from 'react-intl';
-
-export type JRCFormTextInputProps = React.ComponentPropsWithoutRef<'input'>;
-
-export type JRCFormTextFieldProps = JRCFormTextInputProps & ControlsProps;
-
-export const JRCFormTextInput = (props: JRCFormTextInputProps) => {
-    return <StyledInput type="text">{props.children}</StyledInput>;
-};
-
-const renderInput = ({ input, placeholder, classes }: entryProps) => {
-    return (
-        <StyledInput
-            {...input}
-            placeholder={placeholder}
-            type={'text'}
-            className={classes}
-        />
-    );
-};
-
-export const JRCFormTextField = (props: JRCFormTextFieldProps) => {
-    const intl = useIntl();
-    const validate = useControls({ ...props, intl });
-    return (
-        <Field
-            component={JRCFormFieldRender}
-            renderInputFct={renderInput}
-            validate={validate}
-            {...props}
-        />
-    );
-};

package/.history/src/components/Form/Input/JRCFormText/JRCFormText_20210429114541.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { Field } from 'react-final-form';
-import JRCFormFieldRender, { entryProps } from '../JRCFormFieldRender';
-import { ControlsProps, useControls } from '../ReduxFormControls';
-import { StyledInput } from '../JRCStyledInput';
-import { useIntl } from 'react-intl';
-
-export type JRCFormTextInputProps = React.ComponentPropsWithoutRef<'input'>;
-
-export type JRCFormTextFieldProps = JRCFormTextInputProps & ControlsProps;
-
-export const JRCFormTextInput = (props: JRCFormTextInputProps) => {
-    return <StyledInput type="text">{props.children}</StyledInput>;
-};
-
-const renderInput = ({ input, placeholder, classes }: entryProps) => {
-    return (
-        <StyledInput
-            {...input}
-            placeholder={placeholder}
-            type={'text'}
-            className={classes}
-        />
-    );
-};
-
-export const JRCFormTextField = (props: JRCFormTextFieldProps) => {
-    const intl = useIntl();
-    const validate = useControls({ ...props, intl });
-    return (
-        <Field
-            component={JRCFormFieldRender}
-            renderInputFct={renderInput}
-            validate={validate}
-            {...props}
-        />
-    );
-};

package/.history/src/components/Form/Input/JRCFormText/JRCFormText_20210429152714.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { Field } from 'react-final-form';
-import JRCFormFieldRender, { entryProps } from '../JRCFormFieldRender';
-import { ControlsProps, useControls } from '../ReduxFormControls';
-import { StyledInput } from '../JRCStyledInput';
-import { useIntl } from 'react-intl';
-
-export type JRCFormTextInputProps = React.ComponentPropsWithoutRef<'input'>;
-
-export type JRCFormTextFieldProps = JRCFormTextInputProps & ControlsProps;
-
-export const JRCFormTextInput = (props: JRCFormTextInputProps) => {
-    return <StyledInput type="text">{props.children}</StyledInput>;
-};
-
-const renderInput = ({ input, placeholder, classes }: entryProps) => {
-    return (
-        <StyledInput
-            {...input}
-            placeholder={placeholder}
-            type={'text'}
-            className={classes}
-        />
-    );
-};
-
-export const JRCFormTextField = (props: JRCFormTextFieldProps) => {
-    const intl = useIntl();
-    const validate = useControls({ ...props, intl });
-    return (
-        <Field
-            component={JRCFormFieldRender}
-            renderInputFct={renderInput}
-            validate={validate}
-            {...props}
-        ></Field>
-    );
-};

package/.history/src/components/Form/Input/JRCFormText/JRCFormText_20210429152735.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react';
-import { Field } from 'react-final-form';
-import JRCFormFieldRender, { entryProps } from '../JRCFormFieldRender';
-import { ControlsProps, useControls } from '../ReduxFormControls';
-import { StyledInput } from '../JRCStyledInput';
-import { useIntl } from 'react-intl';
-
-export type JRCFormTextInputProps = React.ComponentPropsWithoutRef<'input'>;
-
-export type JRCFormTextFieldProps = JRCFormTextInputProps & ControlsProps;
-
-export const JRCFormTextInput = (props: JRCFormTextInputProps) => {
-    return <StyledInput type="text">{props.children}</StyledInput>;
-};
-
-const renderInput = ({ input, placeholder, classes }: entryProps) => {
-    return (
-        <StyledInput
-            {...input}
-            placeholder={placeholder}
-            type={'text'}
-            className={classes}
-        />
-    );
-};
-
-export const JRCFormTextField = (props: JRCFormTextFieldProps) => {
-    const intl = useIntl();
-    const validate = useControls({ ...props, intl });
-    return (
-        <Field
-            component={JRCFormFieldRender}
-            renderInputFct={renderInput}
-            validate={validate}
-            {...props}
-        >
-            {({ input, meta }: any) => (
-                <JRCFormFieldRender
-                    type={props.type}
-                    className={props.className}
-                    input={input}
-                    label={props.label}
-                    htmlFor={props.htmlFor}
-                    helper={props.helper}
-                    placeholder={props.placeholder}
-                    meta={meta}
-                    maxLength={props.maxLength}
-                    renderInputFct={renderInput}
-                />
-            )}
-        </Field>
-    );
-};

package/.history/src/components/Form/Input/JRCFormText/JRCFormText_20210429152747.tsx

@@ -1,48 +0,0 @@
-import * as React from 'react';
-import { Field } from 'react-final-form';
-import JRCFormFieldRender, { entryProps } from '../JRCFormFieldRender';
-import { ControlsProps, useControls } from '../ReduxFormControls';
-import { StyledInput } from '../JRCStyledInput';
-import { useIntl } from 'react-intl';
-
-export type JRCFormTextInputProps = React.ComponentPropsWithoutRef<'input'>;
-
-export type JRCFormTextFieldProps = JRCFormTextInputProps & ControlsProps;
-
-export const JRCFormTextInput = (props: JRCFormTextInputProps) => {
-    return <StyledInput type="text">{props.children}</StyledInput>;
-};
-
-const renderInput = ({ input, placeholder, classes }: entryProps) => {
-    return (
-        <StyledInput
-            {...input}
-            placeholder={placeholder}
-            type={'text'}
-            className={classes}
-        />
-    );
-};
-
-export const JRCFormTextField = (props: JRCFormTextFieldProps) => {
-    const intl = useIntl();
-    const validate = useControls({ ...props, intl });
-    return (
-        <Field validate={validate} {...props}>
-            {({ input, meta }: any) => (
-                <JRCFormFieldRender
-                    type={props.type}
-                    className={props.className}
-                    input={input}
-                    label={props.label}
-                    htmlFor={props.htmlFor}
-                    helper={props.helper}
-                    placeholder={props.placeholder}
-                    meta={meta}
-                    maxLength={props.maxLength}
-                    renderInputFct={renderInput}
-                />
-            )}
-        </Field>
-    );
-};

package/.history/src/components/Form/Input/JRCFormText/JRCFormText_20210429152757.tsx

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { Field } from 'react-final-form';
-import JRCFormFieldRender, { entryProps } from '../JRCFormFieldRender';
-import { ControlsProps, useControls } from '../ReduxFormControls';
-import { StyledInput } from '../JRCStyledInput';
-import { useIntl } from 'react-intl';
-
-export type JRCFormTextInputProps = React.ComponentPropsWithoutRef<'input'>;
-
-export type JRCFormTextFieldProps = JRCFormTextInputProps & ControlsProps;
-
-export const JRCFormTextInput = (props: JRCFormTextInputProps) => {
-    return <StyledInput type="text">{props.children}</StyledInput>;
-};
-
-const renderInput = ({ input, placeholder, classes }: entryProps) => {
-    return (
-        <StyledInput
-            {...input}
-            placeholder={placeholder}
-            type={'text'}
-            className={classes}
-        />
-    );
-};
-
-export const JRCFormTextField = (props: JRCFormTextFieldProps) => {
-    const intl = useIntl();
-    const validate = useControls({ ...props, intl });
-    return (
-        <Field validate={validate} {...props}>
-            {({ input, meta }: any) => (
-                <JRCFormFieldRender
-                    type={props.type}
-                    className={props.className}
-                    input={input}
-                    label={props.label}
-                    htmlFor={props.htmlFor}
-                    helper={props.helper}
-                    placeholder={props.placeholder}
-                    meta={meta}
-                    maxLength={props.maxLength}
-                    renderInputFct={renderInput}
-                    {...props}
-                />
-            )}
-        </Field>
-    );
-};

package/.history/src/components/Form/Input/JRCFormText/JRCFormText_20210429152806.tsx

@@ -1,51 +0,0 @@
-import * as React from 'react';
-import { Field } from 'react-final-form';
-import JRCFormFieldRender, { entryProps } from '../JRCFormFieldRender';
-import { ControlsProps, useControls } from '../ReduxFormControls';
-import { StyledInput } from '../JRCStyledInput';
-import { useIntl } from 'react-intl';
-
-export type JRCFormTextInputProps = React.ComponentPropsWithoutRef<'input'>;
-
-export type JRCFormTextFieldProps = JRCFormTextInputProps & ControlsProps;
-
-export const JRCFormTextInput = (props: JRCFormTextInputProps) => {
-    return <StyledInput type="text">{props.children}</StyledInput>;
-};
-
-const renderInput = ({ input, placeholder, classes }: entryProps) => {
-    return (
-        <StyledInput
-            {...input}
-            placeholder={placeholder}
-            type={'text'}
-            className={classes}
-        />
-    );
-};
-
-export const JRCFormTextField = (
-    props: JRCFormTextFieldProps & JRCFormFielRenderProps
-) => {
-    const intl = useIntl();
-    const validate = useControls({ ...props, intl });
-    return (
-        <Field validate={validate} {...props}>
-            {({ input, meta }: any) => (
-                <JRCFormFieldRender
-                    type={props.type}
-                    className={props.className}
-                    input={input}
-                    label={props.label}
-                    htmlFor={props.htmlFor}
-                    helper={props.helper}
-                    placeholder={props.placeholder}
-                    meta={meta}
-                    maxLength={props.maxLength}
-                    renderInputFct={renderInput}
-                    {...props}
-                />
-            )}
-        </Field>
-    );
-};