@state-less/leap-frontend
Version:
A collection of open source fullstack services powered by React Server
71 lines (70 loc) • 5.83 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Button, CardActions, CardContent, Grid, TextField, Chip, Avatar, Box, } from '@mui/material';
import { useRef } from 'react';
import { PushPin, PushPinOutlined } from '@mui/icons-material';
import { Markdown } from '../components/Markdown.js';
import { Reactions } from './Reactions.js';
export const PostActions = ({ component, edit, setEdit, draft: _ }) => {
const editTitle = edit === 2 ? 'Save' : edit === 1 ? 'Ok' : 'Edit';
return (_jsxs(CardActions, { sx: {
display: 'flex',
flexDirection: {
xs: 'column-reverse',
sm: 'row',
},
flexWrap: 'wrap',
width: '100%',
}, children: [_jsxs(Box, { children: [component?.props?.canDelete && (_jsx(Button, { disabled: component?.props?.deleted, color: "error", onClick: () => component.props.del(), children: "Delete" })), !component?.props?.approved &&
component?.props?.canDelete &&
!component?.props?.deleted && (_jsx(Button, { disabled: component?.props?.deleted, color: "success", onClick: () => component.props.approve(), children: "Approve" })), component?.props?.canDelete && !component?.props?.deleted && (_jsxs(Button, { disabled: component?.props?.deleted, color: component?.props?.sticky ? 'success' : undefined, onClick: () => component.props.toggleSticky(), children: [!component?.props?.sticky ? _jsx(PushPinOutlined, {}) : _jsx(PushPin, {}), "Sticky"] })), component?.props?.canDelete && !component?.props?.deleted && (_jsx(SaveButton, { component: component, edit: edit, title: editTitle, setEdit: setEdit }))] }), _jsx(OwnerChip, { owner: component?.props?.owner })] }));
};
export const SaveButton = ({ component, title, edit, setEdit }) => {
return (_jsx(_Fragment, { children: component?.props?.canDelete && (_jsx(Button, { disabled: component?.props?.deleted, onClick: async () => {
await setEdit(edit === 0 ? 2 : 0);
}, children: title }, title)) }));
};
export const AnswerActions = ({ component, edit, setEdit, draft, ssr }) => {
return (_jsxs(_Fragment, { children: [component?.props?.canDelete && (_jsxs(CardActions, { sx: {
borderWidth: '0px',
borderBottomWidth: '1px',
borderStyle: 'dashed',
borderColor: 'secondary.main',
display: 'flex',
width: '100%',
}, children: [_jsx(Button, { disabled: component?.props?.deleted, color: "error", onClick: () => component?.props?.del(!edit), children: "Delete" }), _jsx(SaveButton, { component: component, edit: edit, setEdit: setEdit, title: edit > 0 ? (draft ? 'Save' : 'Ok') : 'Edit' }), _jsx(Reactions, { data: component?.children?.[2], ssr: ssr }), _jsx(OwnerChip, { owner: component?.props?.owner })] })), !component?.props?.canDelete && (_jsxs(CardActions, { sx: { display: 'flex' }, children: [_jsx(Reactions, { data: component?.children?.[2], ssr: ssr }), _jsx(OwnerChip, { owner: component?.props?.owner })] }))] }));
};
export const OwnerChip = ({ owner, sx = {} }) => {
const { name = 'Anonymous', picture } = owner;
return (_jsx(Chip, { avatar: _jsx(Avatar, { src: picture }), sx: { marginLeft: 'auto !important', mr: 3, ...sx }, label: name }));
};
export const ContentEditor = ({ component, body, setBody, edit, loading, draft: _, setEdit: __, }) => {
const inputRef = useRef(null);
const contentRef = useRef(null);
const innerHeight = typeof window === 'undefined' ? 768 : window.innerHeight;
return (_jsx(_Fragment, { children: _jsxs(Grid, { container: true, sx: { maxWidth: '100%' }, children: [edit && (_jsx(Grid, { item: true, xs: 12, md: 7, children: _jsx(CardContent, { sx: { flex: 1 }, children: edit && !component?.props?.deleted && (_jsx(TextField, { inputRef: inputRef, inputProps: {
onScroll: () => {
const scrollPrc = (1 /
((inputRef?.current?.scrollHeight || 0) -
(inputRef?.current?.getBoundingClientRect()
?.height || 0))) *
(inputRef?.current?.scrollTop || 0);
const contentTop = ((contentRef?.current?.scrollHeight || 0) -
(contentRef?.current?.getBoundingClientRect()
?.height || 0)) *
scrollPrc;
contentRef?.current?.scrollTo({
top: contentTop,
});
},
}, color: loading
? 'warning'
: component?.props?.body === body
? 'success'
: 'primary', multiline: true, fullWidth: true, label: 'Body' + (component?.props?.body !== body ? '...' : ''), rows: (innerHeight - 120) / 1.4375 / 16 / 1.5, value: body, onChange: (e) => {
setBody(e.target.value);
} })) }) })), _jsx(Grid, { item: true, xs: edit ? 12 : 12, md: edit ? 5 : 12, children: _jsx(CardContent, { ref: contentRef, sx: {
flex: 1,
maxHeight: edit ? (innerHeight - 120) / 1.5 : 'unset',
overflowY: edit ? 'scroll' : 'unset',
}, children: _jsx(Markdown, { center: false, children: body }) }) })] }) }));
};