@selfcommunity/react-theme-default 0.1.0-alpha.287 → 0.1.0-alpha.288

package/lib/esm/components/SCComposer.js

@@ -1,351 +1,210 @@
 import { alpha } from '@mui/system';
-import { hexToRgb } from '@mui/material';
 const Component = {
     styleOverrides: {
-        root: ({ theme }) => {
-            let mediaActionBackground = theme.palette.getContrastText(theme.palette.primary.main);
-            if (mediaActionBackground.startsWith('#')) {
-                mediaActionBackground = hexToRgb(mediaActionBackground).replace(')', ', .5)');
-            }
-            return {
-                '& .SCComposer-title': {
-                    borderBottom: `1px solid ${theme.palette.grey[400]}`,
-                    padding: theme.spacing(0, 0, 2, 0),
-                    lineHeight: 1,
-                    fontSize: '1.143rem',
+        root: ({ theme }) => ({
+            '& .MuiDialog-paper': {
+                position: 'relative',
+                overflowX: 'hidden',
+                '& > form': {
+                    zIndex: 0
+                },
+                '& .MuiDialogTitle-root': {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    padding: theme.spacing(0.5, 2, 0.5, 1),
                     display: 'flex',
                     flexDirection: 'row',
-                    flexWrap: 'nowrap',
                     justifyContent: 'space-between',
                     alignItems: 'center',
-                    '& .SCComposer-types .MuiInputBase-input': {
-                        fontWeight: theme.typography.fontWeightBold,
-                        fontSize: '1.286rem',
-                        minHeight: 'auto'
-                    },
-                    '& > div': {
-                        flex: 1,
-                        textAlign: 'center'
-                    },
-                    '& > div:first-of-type': {
-                        textAlign: 'left'
-                    },
-                    '& > div:last-of-type': {
-                        textAlign: 'right',
-                        display: 'block'
+                    borderBottom: `1px solid ${theme.palette.grey[400]}`,
+                    zIndex: 2,
+                    backgroundColor: theme.palette.background.paper,
+                    '& .MuiTypography-root': {
+                        flexGrow: 1,
+                        textAlign: 'left',
+                        fontWeight: theme.typography.fontWeightMedium
                     }
                 },
-                '& .SCComposer-types': {
-                    flexDirection: 'row',
-                    alignItems: 'center'
-                },
-                '& .SCComposer-avatar': {
-                    width: theme.selfcommunity.user.avatar.sizeMedium,
-                    height: theme.selfcommunity.user.avatar.sizeMedium,
-                    display: 'inline-block'
-                },
-                '& .SCComposer-content': {
-                    position: 'relative',
-                    overflowY: 'visible',
-                    padding: theme.spacing(3, 0),
-                    minHeight: 300,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'space-between',
-                    '& .SCComposer-editor': {
-                        flexGrow: 1,
-                        padding: 0,
-                        fontSize: '1rem',
+                '& .MuiDialogContent-root': {
+                    margin: '45px 0',
+                    padding: theme.spacing(1, 2),
+                    height: `calc(100vh - 45px - 45px - ${theme.spacing(2)})`,
+                    '& .SCEditor-root': {
+                        padding: theme.spacing(1, 0),
+                        position: 'static',
                         '& .SCEditor-placeholder': {
-                            top: 0,
-                            left: 0
-                        },
-                        '& .SCEditor-actions': {
-                            bottom: theme.spacing(4),
-                            padding: theme.spacing(3, 0, 0, 0),
-                            '& > p.MuiTypography-alignLeft > .MuiIconButton-root': {
-                                marginLeft: theme.spacing(0.3),
-                                marginRight: theme.spacing(0.3),
-                                '&:first-of-type': {
-                                    marginLeft: 0
-                                },
-                                '&:last-child': {
-                                    marginRight: 0
-                                }
-                            },
-                            '& > p.MuiTypography-alignRight > .MuiIconButton-root': {
-                                marginRight: theme.spacing(1.5)
-                            },
-                            '& .MuiIconButton-sizeMedium': {
-                                fontSize: '1.429rem'
-                            }
+                            left: 0,
+                            top: -60,
+                            position: 'relative'
                         },
-                        '&.SCEditor-toolbar': {
-                            '& .SCEditor-placeholder': {
-                                top: theme.spacing(6),
-                                left: 0
-                            },
-                            '& .SCEditor-actions': {
-                                bottom: theme.spacing(2)
-                            }
-                        }
-                    },
-                    '& .SCComposer-medias, & .SCComposer-audience, & .SCComposer-block': {
-                        margin: theme.spacing(1, 0),
-                        padding: 0
-                    },
-                    '& .SCComposer-medias': {
-                        '& .SCComposer-mediasActions': {
-                            position: 'relative',
-                            borderTop: `1px solid ${theme.palette.grey[400]}`,
-                            backgroundColor: theme.palette.background.paper,
-                            padding: theme.spacing(1, 0),
-                            '& .SCComposer-mediasActionsTitle': {
-                                fontSize: '1.143rem'
-                            }
-                        }
-                    }
-                },
-                '& .SCComposer-mediaContent, & .SCComposer-audienceContent, & .SCComposer-locationContent': {
-                    minHeight: 300
-                },
-                '& .SCComposer-audienceContent': {
-                    maxWidth: 400,
-                    margin: theme.spacing(0, 'auto'),
-                    '& .MuiTabs-root': {
-                        margin: theme.spacing(0),
-                        '& .MuiTabs-flexContainer': {
-                            justifyContent: 'center',
-                            '& .MuiTab-root': {
-                                minHeight: theme.spacing(6),
-                                flexDirection: 'row',
-                                '& .MuiTab-iconWrapper': {
-                                    marginRight: theme.spacing(1),
-                                    fontSize: '1.429rem'
-                                }
-                            }
+                        '& .SCEditorToolbarPlugin-root': {
+                            zIndex: 1,
+                            position: 'absolute',
+                            display: 'flex',
+                            bottom: 45,
+                            right: theme.spacing(0.2),
+                            left: theme.spacing(0.2),
+                            marginBottom: 0,
+                            backgroundColor: theme.palette.background.paper
                         }
-                    },
-                    '& .SCComposer-block': {
-                        marginBottom: theme.spacing(4)
-                    }
-                },
-                '& .SCComposer-block': {
-                    padding: theme.spacing(1)
-                },
-                '& .SCComposer-editor': {
-                    minHeight: 200,
-                    '& .SCEditor-placeholder': {
-                        top: theme.spacing(1),
-                        left: theme.spacing(1)
                     }
                 },
-                '& .SCComposer-divider': {
-                    borderTop: '1px solid #D1D1D1'
-                },
-                '& .SCComposer-medias': {
-                    margin: '0 23px'
-                },
-                '& .SCComposer-location, & .SCComposer-audience': {
-                    padding: theme.spacing(2),
-                    paddingBottom: 0
-                },
-                '& .SCComposer-mediasActions': {
+                '& .SCComposer-types': {
                     position: 'absolute',
+                    zIndex: 2,
+                    bottom: theme.spacing(7),
                     left: 0,
                     right: 0,
-                    background: mediaActionBackground,
-                    padding: theme.spacing(),
-                    zIndex: 1,
-                    display: 'flex',
-                    flexWrap: 'nowrap',
-                    justifyContent: 'space-between',
-                    '& .SCComposer-mediasActionsActions': {
-                        textAlign: 'right'
-                    }
-                },
-                '& .SCComposer-sortableMedia': {
-                    position: 'relative'
-                },
-                '& .SCComposer-sortableMediaCover': {
-                    backgroundSize: 'cover !important',
-                    backgroundPosition: 'center !important',
-                    backgroundRepeat: 'no-repeat !important',
-                    border: '2px solid white',
-                    borderRadius: 6,
-                    height: 300
+                    justifyContent: 'center'
                 },
-                '& .SCComposer-links': {
-                    padding: theme.spacing(2)
-                },
-                '& .SCComposer-actions': {
-                    margin: 0,
-                    borderTop: '1px solid #D1D1D1',
-                    padding: theme.spacing(1),
-                    '& .SCComposer-media-actions': {},
-                    '& .SCComposer-filter-actions': {
-                        flexGrow: 1,
-                        textAlign: 'right'
-                    },
+                '& .MuiDialogActions-root': {
+                    position: 'absolute',
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    padding: theme.spacing(0.5, 1),
                     display: 'flex',
                     flexDirection: 'row',
-                    flexWrap: 'nowrap',
                     justifyContent: 'space-between',
-                    alignItems: 'center'
-                },
-                '& .SCComposer-actionInput': {
-                    display: 'none !important'
+                    zIndex: 1,
+                    backgroundColor: theme.palette.background.paper,
+                    borderTop: `1px solid ${theme.palette.grey[400]}`
                 },
-                '& .SCComposer-badgeError .MuiBadge-badge': {
-                    padding: 0
+                '& .SCComposer-general-error': {
+                    marginBottom: theme.spacing(2),
+                    color: theme.palette.error.main
                 },
+            },
+            [theme.breakpoints.up('md')]: {
                 '& .MuiDialog-paper': {
-                    padding: theme.spacing(2, 3, 3)
-                },
-                '& .SCComposer-mediaContent': {
-                    '& .SCMediaActionImage-root': {
-                        padding: 0,
-                        '& .SCMediaActionImage-upload': {
-                            padding: theme.spacing(2),
-                            backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
-                            borderRadius: theme.shape.borderRadius,
-                            color: theme.palette.primary.main,
-                            '&.SCMediaActionImage-dragOver': {
-                                backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
-                            },
-                            '& .SCMediaActionImage-uploadBtn': {
-                                border: '0 none'
-                            }
-                        }
+                    '& > form': {
+                        zIndex: 0
                     },
-                    '& .SCMediaActionDocument-root': {
-                        padding: 0,
-                        '& .SCMediaActionDocument-upload': {
-                            padding: theme.spacing(2),
-                            backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
-                            borderRadius: theme.shape.borderRadius,
-                            color: theme.palette.primary.main,
-                            '&.SCMediaActionDocument-dragOver': {
-                                backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
-                            },
-                            '& .SCMediaActionDocument-uploadBtn': {
-                                border: '0 none'
-                            }
-                        }
-                    }
-                },
-                '& .SCComposer-locationContent': {
-                    padding: theme.spacing(3, 0),
-                    minHeight: 300
-                },
-                '& .MuiDialog-container': {
-                    '& .MuiDialog-paper': {
-                        boxShadow: theme.shadows[12],
-                        [theme.breakpoints.up('md')]: {
-                            borderRadius: theme.shape.borderRadius
-                        },
-                        '&.MuiDialog-paperFullScreen': {
-                            height: 'auto',
-                            minHeight: '100%'
-                        }
-                    }
-                },
-                '& .SCCategoryAutocomplete-root': {
-                    minWidth: 120,
-                    '& .MuiFormControl-root': {
-                        margin: 0
+                    '& .MuiDialogContent-root': {
+                        minHeight: 300,
+                        height: 'auto',
+                        maxHeight: 600
+                    },
+                    '& .MuiDialogActions-root': {
+                        justifyContent: 'center'
                     }
                 },
-                '& .MuiDialog-paperFullScreen': {
-                    // Mobile view
-                    position: 'relative',
-                    '& .SCComposer-title': {
-                        transition: 'opacity 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750)',
-                        position: 'fixed',
-                        top: 0,
-                        left: 0,
-                        right: 0,
-                        padding: theme.spacing(2, 3),
-                        backgroundColor: theme.palette.background.paper,
-                        zIndex: 1000
+            }
+        }),
+        attributesRoot: ({ theme }) => ({}),
+        contentDiscussionRoot: ({ theme }) => ({
+            '& .SCComposer-content-discussion-title': {
+                paddingBottom: theme.spacing(2),
+                '& .MuiInputBase-root': {
+                    paddingLeft: 0,
+                    paddingRight: 0,
+                    paddingBottom: 0,
+                    fontSize: '1.429rem',
+                    fontWeight: theme.typography.fontWeightBold,
+                    '& fieldset': {
+                        display: 'none'
                     },
-                    '& .SCComposer-content': {
-                        transition: 'padding 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750)',
-                        padding: theme.spacing(9, 0)
+                    '&.MuiInputBase-adornedEnd .MuiTypography-root': {
+                        alignSelf: 'end'
                     },
-                    '& .SCComposer-actions': {
-                        position: 'fixed',
-                        bottom: 0,
-                        left: 0,
-                        right: 0,
-                        padding: theme.spacing(2, 2),
-                        zIndex: 1000,
-                        backgroundColor: theme.palette.background.paper,
-                        '& .SCComposer-media-actions': {
-                            borderRight: `1px solid ${theme.palette.grey[400]}`,
-                            paddingRight: theme.spacing(1)
-                        },
-                        '& .SCComposer-filter-actions': {
-                            textAlign: 'right'
-                        }
+                    '&.Mui-error': {
+                        color: theme.palette.error.main
                     }
                 },
-                '&.SCComposer-writing': {
-                    '& .MuiDialog-paperFullScreen': {
-                        // Expanded view for editor
-                        '& .SCComposer-title': {
-                            opacity: 0
-                        },
-                        '& .SCComposer-title-dense': {
-                            position: 'fixed',
-                            top: theme.spacing(2),
-                            right: theme.spacing(2),
-                            zIndex: 1002,
-                            borderRadius: theme.shape.borderRadius * 0.2,
-                            borderColor: alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
-                            borderWidth: 1,
-                            borderStyle: 'solid',
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            justifyContent: 'left',
-                            '& .MuiButtonBase-root': {
-                                margin: theme.spacing(0.5),
-                                padding: theme.spacing(1),
-                                fontSize: '1rem',
-                                border: 0,
-                                borderRadius: theme.shape.borderRadius * 0.2
-                            }
-                        },
-                        '& .SCComposer-content': {
-                            paddingTop: 0,
-                            '& .SCComposer-block': {
-                                height: 0,
-                                overflow: 'hidden',
-                                margin: 0
-                            },
-                            '& .SCEditor-root': {
-                                marginTop: theme.spacing(6),
-                                '& .SCEditorToolbarPlugin-root': {
-                                    position: 'fixed',
-                                    top: theme.spacing(2),
-                                    left: theme.spacing(3),
-                                    right: theme.spacing(12),
-                                    zIndex: 1001
-                                },
-                                '& .SCEditor-placeholder': {
-                                    top: 0
-                                }
-                            }
+                '& .MuiFormHelperText-root': {
+                    marginLeft: 0
+                }
+            }
+        }),
+        contentPollRoot: ({ theme }) => ({
+            padding: theme.spacing(2),
+            '& .SCComposer-content-poll-title, & .SCComposer-content-poll-choices, & .SCComposer-content-poll-choice-new, & .SCComposer-content-poll-metadata': {
+                marginBottom: theme.spacing(3)
+            },
+            '& .SCComposer-content-poll-choices .MuiTextField-root': {
+                marginBottom: theme.spacing()
+            },
+            '& .SCComposer-content-poll-metadata': {
+                marginTop: theme.spacing(3)
+            }
+        }),
+        contentPostRoot: ({ theme }) => ({}),
+        layerTransitionRoot: ({ theme }) => ({
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 5,
+            background: theme.palette.background.paper,
+            '& .MuiDialogContent-root': {
+                height: 'calc(100% - 45px - 16px) !important',
+                marginBottom: '0 !important'
+            }
+        }),
+        layerAudienceRoot: ({ theme }) => ({
+            '& .MuiTabs-root': {
+                minHeight: 'auto',
+                marginBottom: theme.spacing(4),
+                '& .MuiTabs-flexContainer': {
+                    justifyContent: 'center',
+                    '& .MuiTab-labelIcon': {
+                        minHeight: 'auto',
+                        flexDirection: 'row',
+                        '& .MuiIcon-root': {
+                            marginRight: theme.spacing(1)
+                        }
+                    }
+                }
+            },
+            '& .SCComposer-layer-audience-message': {
+                textAlign: 'center',
+                marginBottom: theme.spacing(4)
+            }
+        }),
+        layerCategoryRoot: ({ theme }) => ({}),
+        layerCloseRoot: ({ theme }) => ({
+            '& .SCComposer-layer-content': {
+                '& .MuiTypography-root': {
+                    textAlign: 'center'
+                },
+                '& .MuiList-root': {
+                    '& .MuiListItem-root': {
+                        padding: 0,
+                        '& .MuiTypography-root': {
+                            fontSize: '1.143rem'
                         },
-                        '& .SCComposer-actions': {}
+                        '&:nth-last-of-type(1)': {
+                            color: theme.palette.error.main
+                        }
                     }
-                },
-                '&.SCComposer-ios .SCComposer-actions': {
-                    marginBottom: '15px'
                 }
-            };
-        }
+            }
+        }),
+        layerLocationRoot: ({ theme }) => ({}),
+        skeletonRoot: ({ theme }) => ({}),
+        typeSwitchButtonGroupRoot: ({ theme }) => ({
+            '& .MuiToggleButton-root': {
+                backgroundColor: theme.palette.common.black,
+                color: alpha(theme.palette.common.white, 0.5),
+                padding: theme.spacing(0.5, 2),
+                fontSize: '1rem',
+                fontWeight: theme.typography.fontWeightBold,
+                textTransform: 'capitalize',
+                '&.Mui-selected, &:hover, &:active, &.Mui-selected:hover': {
+                    color: theme.palette.common.white,
+                    backgroundColor: theme.palette.common.black
+                },
+                '&:nth-of-type(1)': {
+                    paddingLeft: theme.spacing(4)
+                },
+                '&:nth-last-of-type(1)': {
+                    paddingRight: theme.spacing(4)
+                }
+            }
+        }),
     }
 };
 export default Component;

package/lib/esm/components/SCFeedObjectMediaPreview.d.ts

@@ -0,0 +1,11 @@
+declare const Component: {
+    styleOverrides: {
+        root: ({ theme }: any) => {
+            position: string;
+            marginTop: number;
+            marginLeft: number;
+            marginRight: number;
+        };
+    };
+};
+export default Component;

package/lib/esm/components/SCFeedObjectMediaPreview.js

@@ -0,0 +1,11 @@
+const Component = {
+    styleOverrides: {
+        root: ({ theme }) => ({
+            position: 'relative',
+            marginTop: 0,
+            marginLeft: -2,
+            marginRight: -2
+        })
+    }
+};
+export default Component;

package/lib/esm/components/SCInlineComposerWidget.d.ts

@@ -28,13 +28,37 @@ declare const Component: {
                         textTransform: string;
                     };
                 };
-                '& .SCInlineComposerWidget-actions': {
+                '& .SCInlineComposerWidget-avatar': {
+                    [x: number]: {
+                        marginLeft: any;
+                    };
                     display: string;
-                    '& .MuiIconButton-root': {
-                        [x: number]: {
-                            marginLeft: number;
-                            marginRight: number;
-                        };
+                    alignItems: string;
+                    '& .MuiAvatar-root': {
+                        width: any;
+                        height: any;
+                    };
+                };
+            };
+        };
+        skeletonRoot: ({ theme }: any) => {
+            marginBottom: any;
+            '& .SCInlineComposerWidget-content, & .SCInlineComposerWidget-content:last-child': {
+                [x: number]: {
+                    padding: any;
+                };
+                padding: any;
+                display: string;
+                flexDirection: string;
+                justifyContent: string;
+                '& .SCInlineComposerWidget-input': {
+                    display: string;
+                    flexGrow: number;
+                    height: number;
+                    width: string;
+                    '& .MuiSkeleton-root': {
+                        width: string;
+                        height: string;
                     };
                 };
                 '& .SCInlineComposerWidget-avatar': {
@@ -43,7 +67,7 @@ declare const Component: {
                     };
                     display: string;
                     alignItems: string;
-                    '& .MuiAvatar-root': {
+                    '& .MuiSkeleton-root': {
                         width: any;
                         height: any;
                     };

package/lib/esm/components/SCInlineComposerWidget.js

@@ -28,13 +28,37 @@ const Component = {
                         textTransform: 'none'
                     }
                 },
-                '& .SCInlineComposerWidget-actions': {
+                '& .SCInlineComposerWidget-avatar': {
                     display: 'flex',
-                    '& .MuiIconButton-root': {
-                        [theme.breakpoints.up('sm')]: {
-                            marginLeft: 2,
-                            marginRight: 2
-                        }
+                    alignItems: 'center',
+                    [theme.breakpoints.up('sm')]: {
+                        marginLeft: theme.spacing(2)
+                    },
+                    '& .MuiAvatar-root': {
+                        width: theme.selfcommunity.user.avatar.sizeMedium,
+                        height: theme.selfcommunity.user.avatar.sizeMedium
+                    }
+                }
+            }
+        }),
+        skeletonRoot: ({ theme }) => ({
+            marginBottom: theme.spacing(2),
+            '& .SCInlineComposerWidget-content, & .SCInlineComposerWidget-content:last-child': {
+                padding: theme.spacing(0.5, 1),
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                [theme.breakpoints.up('sm')]: {
+                    padding: theme.spacing(0.5, 1, 0.5, 2)
+                },
+                '& .SCInlineComposerWidget-input': {
+                    display: 'flex',
+                    flexGrow: 2,
+                    height: 30,
+                    width: '80%',
+                    '& .MuiSkeleton-root': {
+                        width: '100%',
+                        height: '100%'
                     }
                 },
                 '& .SCInlineComposerWidget-avatar': {
@@ -43,7 +67,7 @@ const Component = {
                     [theme.breakpoints.up('sm')]: {
                         marginLeft: theme.spacing(2)
                     },
-                    '& .MuiAvatar-root': {
+                    '& .MuiSkeleton-root': {
                         width: theme.selfcommunity.user.avatar.sizeMedium,
                         height: theme.selfcommunity.user.avatar.sizeMedium
                     }