jamespot-react-core 1.1.1

package/.history/src/utils/component/DisplayAttribute.component_20211214102705.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { FunctionComponent } from 'react';
+import { useSelector } from 'react-redux';
+import { DisplayAttributeProps, DisplayAttributesProps } from 'utils/types';
+
+export const BasicComponent = ({ children }: { children: JSX.Element }) => <div>{children}</div>;
+
+export const DisplaySingleValue = (props: {
+    value: any[];
+    renderComponent: FunctionComponent<any>;
+    wrapperComponent: FunctionComponent<any>;
+    extraCondition?: (objectValues: any, value: any) => boolean;
+    objectValues: any;
+}) => {
+    const { extraCondition, objectValues, value, renderComponent, wrapperComponent } = props;
+    const RenderComponent: FunctionComponent<any> = renderComponent || BasicComponent;
+    const WrapperComponent: FunctionComponent<any> = wrapperComponent || BasicComponent;
+    if ((extraCondition && extraCondition(objectValues, value)) || !extraCondition) {
+        return (
+            <WrapperComponent>
+                <RenderComponent>{value}</RenderComponent>
+            </WrapperComponent>
+        );
+    }
+    return null;
+};
+
+export const DisplayList = (props: {
+    value: any[];
+    renderComponent: FunctionComponent<any>;
+    wrapperComponent: FunctionComponent<any>;
+    extraCondition?: (objectValues: any, value: any) => boolean;
+    objectValues: any;
+}) => {
+    const { value, renderComponent, wrapperComponent, extraCondition, objectValues } = props;
+    const RenderComponent: FunctionComponent<any> = renderComponent || BasicComponent;
+    const WrapperComponent: FunctionComponent<any> = wrapperComponent || BasicComponent;
+    const filteredlist = (extraCondition && value.filter((element) => extraCondition(objectValues, element))) || value;
+    return (
+        <WrapperComponent>
+            {filteredlist.map((element: any, index: number) => {
+                <RenderComponent>
+                    {element.title}
+                    {filteredlist.length > 1 && index !== filteredlist.length && ', '}
+                    {filteredlist.length > 1 && index === filteredlist.length && '...'}
+                </RenderComponent>;
+            })}
+        </WrapperComponent>
+    );
+};
+/****
+ * The jamespot model depend on the platform
+ * For example a user can have the size attribute only for a given platform
+ * The model specifics of a platform are stored in J.model
+ *
+ * This component display an attribute only if this attribute is activated on the platform
+ *
+ * @param props.objectValues the object to display (ie the user)
+ * @param props.attribute
+ * @param props.attribute.fieldName the attribute we want to access to (ie size)
+ * @param props.attribute.wrapperComponent (optional) if we want to wrap all the result in a specific component
+ * @param props.attribute.renderComponent (optional) if the result is a list you can also wrap all elements to specific component
+ * @param props.attribute.extraCondition (optional) condition to render the attribute (ie size>10)
+ */
+export const DisplayAttribute = (props: DisplayAttributeProps) => {
+    const { objectValues, attribute } = props;
+    const { fieldName, renderComponent, extraCondition, wrapperComponent } = attribute;
+
+    const { modelValue } = useSelector((state: any) => {
+        return {
+            modelValue: J.react.store.selectors.model.selectById(state, objectValues.type),
+        };
+    });
+    const fieldValue = modelValue && modelValue.fields && modelValue.fields[fieldName];
+
+    if (!modelValue || !fieldValue) return null;
+
+    let RenderComponent: FunctionComponent<{
+        value: any[];
+        renderComponent: FunctionComponent<any>;
+        wrapperComponent: FunctionComponent<any>;
+        extraCondition?: (objectValues: any, value: any) => boolean;
+        objectValues: any;
+    }>;
+    if (fieldValue.widget) {
+        switch (fieldValue.widget.type) {
+            case 'text':
+            case 'orientedlinks':
+                RenderComponent = DisplaySingleValue;
+                break;
+
+            case 'taxonomy':
+                RenderComponent = DisplayList;
+                break;
+            default:
+                RenderComponent = DisplaySingleValue;
+        }
+
+        return <RenderComponent {...props} />;
+    }
+};
+
+/****
+ * Display a set of @DisplayAttribute
+ */
+export const DisplayAttributes = (props: DisplayAttributesProps) => {
+    const { attributes, objectValues } = props;
+    return attributes.map((attributeProps) => (
+        <DisplayAttribute attribute={attributeProps} objectValues={objectValues} />
+    ));
+};

package/.history/src/utils/component/DisplayAttribute.component_20211214102716.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { FunctionComponent } from 'react';
+import { useSelector } from 'react-redux';
+import { DisplayAttributeProps, DisplayAttributesProps } from 'utils/types';
+
+export const BasicComponent = ({ children }: { children: JSX.Element }) => <div>{children}</div>;
+
+export const DisplaySingleValue = (props: {
+    value: any[];
+    renderComponent: FunctionComponent<any>;
+    wrapperComponent: FunctionComponent<any>;
+    extraCondition?: (objectValues: any, value: any) => boolean;
+    objectValues: any;
+}) => {
+    const { extraCondition, objectValues, value, renderComponent, wrapperComponent } = props;
+    const RenderComponent: FunctionComponent<any> = renderComponent || BasicComponent;
+    const WrapperComponent: FunctionComponent<any> = wrapperComponent || BasicComponent;
+    if ((extraCondition && extraCondition(objectValues, value)) || !extraCondition) {
+        return (
+            <WrapperComponent>
+                <RenderComponent>{value}</RenderComponent>
+            </WrapperComponent>
+        );
+    }
+    return null;
+};
+
+export const DisplayList = (props: DisplayAttributeProps) => {
+    const { value, renderComponent, wrapperComponent, extraCondition, objectValues } = props;
+    const RenderComponent: FunctionComponent<any> = renderComponent || BasicComponent;
+    const WrapperComponent: FunctionComponent<any> = wrapperComponent || BasicComponent;
+    const filteredlist = (extraCondition && value.filter((element) => extraCondition(objectValues, element))) || value;
+    return (
+        <WrapperComponent>
+            {filteredlist.map((element: any, index: number) => {
+                <RenderComponent>
+                    {element.title}
+                    {filteredlist.length > 1 && index !== filteredlist.length && ', '}
+                    {filteredlist.length > 1 && index === filteredlist.length && '...'}
+                </RenderComponent>;
+            })}
+        </WrapperComponent>
+    );
+};
+/****
+ * The jamespot model depend on the platform
+ * For example a user can have the size attribute only for a given platform
+ * The model specifics of a platform are stored in J.model
+ *
+ * This component display an attribute only if this attribute is activated on the platform
+ *
+ * @param props.objectValues the object to display (ie the user)
+ * @param props.attribute
+ * @param props.attribute.fieldName the attribute we want to access to (ie size)
+ * @param props.attribute.wrapperComponent (optional) if we want to wrap all the result in a specific component
+ * @param props.attribute.renderComponent (optional) if the result is a list you can also wrap all elements to specific component
+ * @param props.attribute.extraCondition (optional) condition to render the attribute (ie size>10)
+ */
+export const DisplayAttribute = (props: DisplayAttributeProps) => {
+    const { objectValues, attribute } = props;
+    const { fieldName, renderComponent, extraCondition, wrapperComponent } = attribute;
+
+    const { modelValue } = useSelector((state: any) => {
+        return {
+            modelValue: J.react.store.selectors.model.selectById(state, objectValues.type),
+        };
+    });
+    const fieldValue = modelValue && modelValue.fields && modelValue.fields[fieldName];
+
+    if (!modelValue || !fieldValue) return null;
+
+    let RenderComponent: FunctionComponent<{
+        value: any[];
+        renderComponent: FunctionComponent<any>;
+        wrapperComponent: FunctionComponent<any>;
+        extraCondition?: (objectValues: any, value: any) => boolean;
+        objectValues: any;
+    }>;
+    if (fieldValue.widget) {
+        switch (fieldValue.widget.type) {
+            case 'text':
+            case 'orientedlinks':
+                RenderComponent = DisplaySingleValue;
+                break;
+
+            case 'taxonomy':
+                RenderComponent = DisplayList;
+                break;
+            default:
+                RenderComponent = DisplaySingleValue;
+        }
+
+        return <RenderComponent {...props} />;
+    }
+};
+
+/****
+ * Display a set of @DisplayAttribute
+ */
+export const DisplayAttributes = (props: DisplayAttributesProps) => {
+    const { attributes, objectValues } = props;
+    return attributes.map((attributeProps) => (
+        <DisplayAttribute attribute={attributeProps} objectValues={objectValues} />
+    ));
+};

package/.history/src/utils/component/DisplayAttribute.component_20211214102723.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { FunctionComponent } from 'react';
+import { useSelector } from 'react-redux';
+import { DisplayAttributeProps, DisplayAttributesProps } from 'utils/types';
+
+export const BasicComponent = ({ children }: { children: JSX.Element }) => <div>{children}</div>;
+
+export const DisplaySingleValue = (props: DisplayAttributeProps) => {
+    const { extraCondition, objectValues, value, renderComponent, wrapperComponent } = props;
+    const RenderComponent: FunctionComponent<any> = renderComponent || BasicComponent;
+    const WrapperComponent: FunctionComponent<any> = wrapperComponent || BasicComponent;
+    if ((extraCondition && extraCondition(objectValues, value)) || !extraCondition) {
+        return (
+            <WrapperComponent>
+                <RenderComponent>{value}</RenderComponent>
+            </WrapperComponent>
+        );
+    }
+    return null;
+};
+
+export const DisplayList = (props: DisplayAttributeProps) => {
+    const { value, renderComponent, wrapperComponent, extraCondition, objectValues } = props;
+    const RenderComponent: FunctionComponent<any> = renderComponent || BasicComponent;
+    const WrapperComponent: FunctionComponent<any> = wrapperComponent || BasicComponent;
+    const filteredlist = (extraCondition && value.filter((element) => extraCondition(objectValues, element))) || value;
+    return (
+        <WrapperComponent>
+            {filteredlist.map((element: any, index: number) => {
+                <RenderComponent>
+                    {element.title}
+                    {filteredlist.length > 1 && index !== filteredlist.length && ', '}
+                    {filteredlist.length > 1 && index === filteredlist.length && '...'}
+                </RenderComponent>;
+            })}
+        </WrapperComponent>
+    );
+};
+/****
+ * The jamespot model depend on the platform
+ * For example a user can have the size attribute only for a given platform
+ * The model specifics of a platform are stored in J.model
+ *
+ * This component display an attribute only if this attribute is activated on the platform
+ *
+ * @param props.objectValues the object to display (ie the user)
+ * @param props.attribute
+ * @param props.attribute.fieldName the attribute we want to access to (ie size)
+ * @param props.attribute.wrapperComponent (optional) if we want to wrap all the result in a specific component
+ * @param props.attribute.renderComponent (optional) if the result is a list you can also wrap all elements to specific component
+ * @param props.attribute.extraCondition (optional) condition to render the attribute (ie size>10)
+ */
+export const DisplayAttribute = (props: DisplayAttributeProps) => {
+    const { objectValues, attribute } = props;
+    const { fieldName, renderComponent, extraCondition, wrapperComponent } = attribute;
+
+    const { modelValue } = useSelector((state: any) => {
+        return {
+            modelValue: J.react.store.selectors.model.selectById(state, objectValues.type),
+        };
+    });
+    const fieldValue = modelValue && modelValue.fields && modelValue.fields[fieldName];
+
+    if (!modelValue || !fieldValue) return null;
+
+    let RenderComponent: FunctionComponent<{
+        value: any[];
+        renderComponent: FunctionComponent<any>;
+        wrapperComponent: FunctionComponent<any>;
+        extraCondition?: (objectValues: any, value: any) => boolean;
+        objectValues: any;
+    }>;
+    if (fieldValue.widget) {
+        switch (fieldValue.widget.type) {
+            case 'text':
+            case 'orientedlinks':
+                RenderComponent = DisplaySingleValue;
+                break;
+
+            case 'taxonomy':
+                RenderComponent = DisplayList;
+                break;
+            default:
+                RenderComponent = DisplaySingleValue;
+        }
+
+        return <RenderComponent {...props} />;
+    }
+};
+
+/****
+ * Display a set of @DisplayAttribute
+ */
+export const DisplayAttributes = (props: DisplayAttributesProps) => {
+    const { attributes, objectValues } = props;
+    return attributes.map((attributeProps) => (
+        <DisplayAttribute attribute={attributeProps} objectValues={objectValues} />
+    ));
+};

package/.history/src/utils/component/DisplayAttribute.component_20211214102742.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { FunctionComponent } from 'react';
+import { useSelector } from 'react-redux';
+import { DisplayAttributeProps, DisplayAttributesProps } from 'utils/types';
+
+export const BasicComponent = ({ children }: { children: JSX.Element }) => <div>{children}</div>;
+
+export const DisplaySingleValue = (props: DisplayAttributeProps) => {
+    const { objectValues, attribute } = props;
+    const { extraCondition, objectValues, value, renderComponent, wrapperComponent } = props;
+    const RenderComponent: FunctionComponent<any> = renderComponent || BasicComponent;
+    const WrapperComponent: FunctionComponent<any> = wrapperComponent || BasicComponent;
+    if ((extraCondition && extraCondition(objectValues, value)) || !extraCondition) {
+        return (
+            <WrapperComponent>
+                <RenderComponent>{value}</RenderComponent>
+            </WrapperComponent>
+        );
+    }
+    return null;
+};
+
+export const DisplayList = (props: DisplayAttributeProps) => {
+    const { value, renderComponent, wrapperComponent, extraCondition, objectValues } = props;
+    const RenderComponent: FunctionComponent<any> = renderComponent || BasicComponent;
+    const WrapperComponent: FunctionComponent<any> = wrapperComponent || BasicComponent;
+    const filteredlist = (extraCondition && value.filter((element) => extraCondition(objectValues, element))) || value;
+    return (
+        <WrapperComponent>
+            {filteredlist.map((element: any, index: number) => {
+                <RenderComponent>
+                    {element.title}
+                    {filteredlist.length > 1 && index !== filteredlist.length && ', '}
+                    {filteredlist.length > 1 && index === filteredlist.length && '...'}
+                </RenderComponent>;
+            })}
+        </WrapperComponent>
+    );
+};
+/****
+ * The jamespot model depend on the platform
+ * For example a user can have the size attribute only for a given platform
+ * The model specifics of a platform are stored in J.model
+ *
+ * This component display an attribute only if this attribute is activated on the platform
+ *
+ * @param props.objectValues the object to display (ie the user)
+ * @param props.attribute
+ * @param props.attribute.fieldName the attribute we want to access to (ie size)
+ * @param props.attribute.wrapperComponent (optional) if we want to wrap all the result in a specific component
+ * @param props.attribute.renderComponent (optional) if the result is a list you can also wrap all elements to specific component
+ * @param props.attribute.extraCondition (optional) condition to render the attribute (ie size>10)
+ */
+export const DisplayAttribute = (props: DisplayAttributeProps) => {
+    const { objectValues, attribute } = props;
+    const { fieldName, renderComponent, extraCondition, wrapperComponent } = attribute;
+
+    const { modelValue } = useSelector((state: any) => {
+        return {
+            modelValue: J.react.store.selectors.model.selectById(state, objectValues.type),
+        };
+    });
+    const fieldValue = modelValue && modelValue.fields && modelValue.fields[fieldName];
+
+    if (!modelValue || !fieldValue) return null;
+
+    let RenderComponent: FunctionComponent<{
+        value: any[];
+        renderComponent: FunctionComponent<any>;
+        wrapperComponent: FunctionComponent<any>;
+        extraCondition?: (objectValues: any, value: any) => boolean;
+        objectValues: any;
+    }>;
+    if (fieldValue.widget) {
+        switch (fieldValue.widget.type) {
+            case 'text':
+            case 'orientedlinks':
+                RenderComponent = DisplaySingleValue;
+                break;
+
+            case 'taxonomy':
+                RenderComponent = DisplayList;
+                break;
+            default:
+                RenderComponent = DisplaySingleValue;
+        }
+
+        return <RenderComponent {...props} />;
+    }
+};
+
+/****
+ * Display a set of @DisplayAttribute
+ */
+export const DisplayAttributes = (props: DisplayAttributesProps) => {
+    const { attributes, objectValues } = props;
+    return attributes.map((attributeProps) => (
+        <DisplayAttribute attribute={attributeProps} objectValues={objectValues} />
+    ));
+};

package/.history/src/utils/component/DisplayAttribute.component_20211214102750.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { FunctionComponent } from 'react';
+import { useSelector } from 'react-redux';
+import { DisplayAttributeProps, DisplayAttributesProps } from 'utils/types';
+
+export const BasicComponent = ({ children }: { children: JSX.Element }) => <div>{children}</div>;
+
+export const DisplaySingleValue = (props: DisplayAttributeProps) => {
+    const { objectValues, attribute } = props;
+    const { extraCondition, objectValues, value, renderComponent, wrapperComponent } = attribute;
+    const RenderComponent: FunctionComponent<any> = renderComponent || BasicComponent;
+    const WrapperComponent: FunctionComponent<any> = wrapperComponent || BasicComponent;
+    if ((extraCondition && extraCondition(objectValues, value)) || !extraCondition) {
+        return (
+            <WrapperComponent>
+                <RenderComponent>{value}</RenderComponent>
+            </WrapperComponent>
+        );
+    }
+    return null;
+};
+
+export const DisplayList = (props: DisplayAttributeProps) => {
+    const { value, renderComponent, wrapperComponent, extraCondition, objectValues } = props;
+    const RenderComponent: FunctionComponent<any> = renderComponent || BasicComponent;
+    const WrapperComponent: FunctionComponent<any> = wrapperComponent || BasicComponent;
+    const filteredlist = (extraCondition && value.filter((element) => extraCondition(objectValues, element))) || value;
+    return (
+        <WrapperComponent>
+            {filteredlist.map((element: any, index: number) => {
+                <RenderComponent>
+                    {element.title}
+                    {filteredlist.length > 1 && index !== filteredlist.length && ', '}
+                    {filteredlist.length > 1 && index === filteredlist.length && '...'}
+                </RenderComponent>;
+            })}
+        </WrapperComponent>
+    );
+};
+/****
+ * The jamespot model depend on the platform
+ * For example a user can have the size attribute only for a given platform
+ * The model specifics of a platform are stored in J.model
+ *
+ * This component display an attribute only if this attribute is activated on the platform
+ *
+ * @param props.objectValues the object to display (ie the user)
+ * @param props.attribute
+ * @param props.attribute.fieldName the attribute we want to access to (ie size)
+ * @param props.attribute.wrapperComponent (optional) if we want to wrap all the result in a specific component
+ * @param props.attribute.renderComponent (optional) if the result is a list you can also wrap all elements to specific component
+ * @param props.attribute.extraCondition (optional) condition to render the attribute (ie size>10)
+ */
+export const DisplayAttribute = (props: DisplayAttributeProps) => {
+    const { objectValues, attribute } = props;
+    const { fieldName, renderComponent, extraCondition, wrapperComponent } = attribute;
+
+    const { modelValue } = useSelector((state: any) => {
+        return {
+            modelValue: J.react.store.selectors.model.selectById(state, objectValues.type),
+        };
+    });
+    const fieldValue = modelValue && modelValue.fields && modelValue.fields[fieldName];
+
+    if (!modelValue || !fieldValue) return null;
+
+    let RenderComponent: FunctionComponent<{
+        value: any[];
+        renderComponent: FunctionComponent<any>;
+        wrapperComponent: FunctionComponent<any>;
+        extraCondition?: (objectValues: any, value: any) => boolean;
+        objectValues: any;
+    }>;
+    if (fieldValue.widget) {
+        switch (fieldValue.widget.type) {
+            case 'text':
+            case 'orientedlinks':
+                RenderComponent = DisplaySingleValue;
+                break;
+
+            case 'taxonomy':
+                RenderComponent = DisplayList;
+                break;
+            default:
+                RenderComponent = DisplaySingleValue;
+        }
+
+        return <RenderComponent {...props} />;
+    }
+};
+
+/****
+ * Display a set of @DisplayAttribute
+ */
+export const DisplayAttributes = (props: DisplayAttributesProps) => {
+    const { attributes, objectValues } = props;
+    return attributes.map((attributeProps) => (
+        <DisplayAttribute attribute={attributeProps} objectValues={objectValues} />
+    ));
+};

package/.history/src/utils/component/DisplayAttribute.component_20211214102756.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { FunctionComponent } from 'react';
+import { useSelector } from 'react-redux';
+import { DisplayAttributeProps, DisplayAttributesProps } from 'utils/types';
+
+export const BasicComponent = ({ children }: { children: JSX.Element }) => <div>{children}</div>;
+
+export const DisplaySingleValue = (props: DisplayAttributeProps) => {
+    const { objectValues, attribute } = props;
+    const { extraCondition, fieldName, renderComponent, wrapperComponent } = attribute;
+    const RenderComponent: FunctionComponent<any> = renderComponent || BasicComponent;
+    const WrapperComponent: FunctionComponent<any> = wrapperComponent || BasicComponent;
+    if ((extraCondition && extraCondition(objectValues, value)) || !extraCondition) {
+        return (
+            <WrapperComponent>
+                <RenderComponent>{value}</RenderComponent>
+            </WrapperComponent>
+        );
+    }
+    return null;
+};
+
+export const DisplayList = (props: DisplayAttributeProps) => {
+    const { value, renderComponent, wrapperComponent, extraCondition, objectValues } = props;
+    const RenderComponent: FunctionComponent<any> = renderComponent || BasicComponent;
+    const WrapperComponent: FunctionComponent<any> = wrapperComponent || BasicComponent;
+    const filteredlist = (extraCondition && value.filter((element) => extraCondition(objectValues, element))) || value;
+    return (
+        <WrapperComponent>
+            {filteredlist.map((element: any, index: number) => {
+                <RenderComponent>
+                    {element.title}
+                    {filteredlist.length > 1 && index !== filteredlist.length && ', '}
+                    {filteredlist.length > 1 && index === filteredlist.length && '...'}
+                </RenderComponent>;
+            })}
+        </WrapperComponent>
+    );
+};
+/****
+ * The jamespot model depend on the platform
+ * For example a user can have the size attribute only for a given platform
+ * The model specifics of a platform are stored in J.model
+ *
+ * This component display an attribute only if this attribute is activated on the platform
+ *
+ * @param props.objectValues the object to display (ie the user)
+ * @param props.attribute
+ * @param props.attribute.fieldName the attribute we want to access to (ie size)
+ * @param props.attribute.wrapperComponent (optional) if we want to wrap all the result in a specific component
+ * @param props.attribute.renderComponent (optional) if the result is a list you can also wrap all elements to specific component
+ * @param props.attribute.extraCondition (optional) condition to render the attribute (ie size>10)
+ */
+export const DisplayAttribute = (props: DisplayAttributeProps) => {
+    const { objectValues, attribute } = props;
+    const { fieldName, renderComponent, extraCondition, wrapperComponent } = attribute;
+
+    const { modelValue } = useSelector((state: any) => {
+        return {
+            modelValue: J.react.store.selectors.model.selectById(state, objectValues.type),
+        };
+    });
+    const fieldValue = modelValue && modelValue.fields && modelValue.fields[fieldName];
+
+    if (!modelValue || !fieldValue) return null;
+
+    let RenderComponent: FunctionComponent<{
+        value: any[];
+        renderComponent: FunctionComponent<any>;
+        wrapperComponent: FunctionComponent<any>;
+        extraCondition?: (objectValues: any, value: any) => boolean;
+        objectValues: any;
+    }>;
+    if (fieldValue.widget) {
+        switch (fieldValue.widget.type) {
+            case 'text':
+            case 'orientedlinks':
+                RenderComponent = DisplaySingleValue;
+                break;
+
+            case 'taxonomy':
+                RenderComponent = DisplayList;
+                break;
+            default:
+                RenderComponent = DisplaySingleValue;
+        }
+
+        return <RenderComponent {...props} />;
+    }
+};
+
+/****
+ * Display a set of @DisplayAttribute
+ */
+export const DisplayAttributes = (props: DisplayAttributesProps) => {
+    const { attributes, objectValues } = props;
+    return attributes.map((attributeProps) => (
+        <DisplayAttribute attribute={attributeProps} objectValues={objectValues} />
+    ));
+};