Pavel MineevandUmputun
51d2310c1f
* Set default font in examle * prettify file * add ui elements * Use UIButton at AuthPanel * sort deps * remove unsed getUserTitle method * move UserId inside AuthPanel * tests * use UIButton and UInput in Anonymous login * Use UIButton and UIInput in email login * Replace Button to UIButton * fix context for onTitleClick in dropdown * rearrage class props in dropdown * TODO: change finding over DOM to using ref * Use UIButton in input * rearrage deps * Use UIButton in comment * test * Focus and Input buttons * custom focus style for inputs and buttons * the same focus style for comment input * align buttons by top line in input * Token dropdown & hover fix * disable hover when button disabled * make token dropdown markup in new style * Fix trailing comma * update prettier * move prettier config to json format because it is more hendy for settings (for example vscode can suggest rules) * prettier fixed trailing comman in ejs * Remove unnecessary conditions * Files was formatted by Prettier * fix cursor pointer on collapse button * Move components and right naming * ui-button -> button * ui-input -> input * input -> comment-form * Change cursor behavior on disabled state * Change button style * font-weight: normal by default * add small border-radius * Change another one button to component * Fix autofocus on username in email login form * use preact inbuild autoFocus * fix autofocus on back from token step * sleep for 0s enough to wait next render before focus * use more specific name for username input * fix line-height at auth line on mobile * fix className
76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
/** @jsx createElement */
|
|
import { createElement, RenderableProps, FunctionComponent } from 'preact';
|
|
import { useStore } from 'react-redux';
|
|
import b from 'bem-react-helper';
|
|
|
|
import { ConnectedComment as Comment } from '@app/components/comment/connected-comment';
|
|
import { Comment as CommentInterface } from '@app/common/types';
|
|
import { getThreadIsCollapsed } from '@app/store/thread/getters';
|
|
import { StoreState } from '@app/store';
|
|
import { InView } from '../root/in-view/in-view';
|
|
|
|
const mapStateToProps = (state: StoreState, props: { id: CommentInterface['id'] }) => {
|
|
const comment = state.comments[props.id];
|
|
return {
|
|
comment,
|
|
childs: state.childComments[props.id],
|
|
collapsed: getThreadIsCollapsed(comment)(state),
|
|
isCommentsDisabled: !!state.info.read_only,
|
|
theme: state.theme,
|
|
};
|
|
};
|
|
|
|
interface OwnProps {
|
|
id: CommentInterface['id'];
|
|
childs?: CommentInterface['id'][];
|
|
level: number;
|
|
mix?: string;
|
|
|
|
getPreview(text: string): Promise<string>;
|
|
}
|
|
|
|
type Props = OwnProps & ReturnType<typeof mapStateToProps>;
|
|
|
|
function Thread(props: RenderableProps<Props>) {
|
|
const { collapsed, comment, childs, level, theme } = props;
|
|
|
|
if (comment.hidden) return null;
|
|
|
|
const indented = level > 0;
|
|
const repliesCount = childs ? childs.length : 0;
|
|
|
|
return (
|
|
<div
|
|
className={b('thread', props, { level, theme, indented })}
|
|
role={['listitem'].concat(!collapsed && !!repliesCount ? 'list' : []).join(' ')}
|
|
aria-expanded={!collapsed}
|
|
>
|
|
<InView>
|
|
{inviewProps => (
|
|
<Comment
|
|
ref={ref => inviewProps.ref(ref)}
|
|
key={`comment-${props.id}`}
|
|
view="main"
|
|
data={comment}
|
|
repliesCount={repliesCount}
|
|
level={level}
|
|
inView={inviewProps.inView}
|
|
/>
|
|
)}
|
|
</InView>
|
|
|
|
{!collapsed &&
|
|
childs &&
|
|
!!childs.length &&
|
|
childs.map(id => (
|
|
<ConnectedThread key={`thread-${id}`} id={id} level={Math.min(level + 1, 6)} getPreview={props.getPreview} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const ConnectedThread: FunctionComponent<OwnProps> = props => {
|
|
const providedProps = mapStateToProps(useStore().getState(), props);
|
|
return <Thread {...props} {...providedProps} />;
|
|
};
|