jamespot-react-components 1.0.0

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

@@ -0,0 +1,350 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,51 @@
+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>
+    );
+};