Skip to content

Commit

Permalink
feat: comment form has a state update button by default
Browse files Browse the repository at this point in the history
  • Loading branch information
@DenisVorop
DenisVorop committed Oct 30, 2023
1 parent 50c07a9 commit 5326582
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 57 deletions.
111 changes: 56 additions & 55 deletions src/components/CommentCreateForm/CommentCreateForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState, useCallback, useMemo } from 'react';
import styled from 'styled-components';
import { State } from '@prisma/client';
import { Button, Dropdown, UserPic } from '@taskany/bricks';
import { Button, Dropdown, UserPic, nullable } from '@taskany/bricks';
import { IconDownSmallSolid, IconUpSmallSolid } from '@taskany/icons';

import { usePageContext } from '../../hooks/usePageContext';
Expand All @@ -16,7 +16,7 @@ import { tr } from './CommentCreateForm.i18n';

interface CommentCreateFormProps extends Omit<React.ComponentProps<typeof CommentForm>, 'actionButton'> {
states?: State[];
stateId?: string;
stateId?: string | null;

onSubmit: (comment: GoalCommentFormSchema) => void;
onChange?: (comment: GoalCommentFormSchema) => void;
Expand Down Expand Up @@ -75,21 +75,21 @@ const CommentCreateForm: React.FC<CommentCreateFormProps> = ({
});

setDescription('');
setPushState(undefined);
setPushState(stateId ? statesMap[stateId] : undefined);

setBusy(false);
setFocused(true);
},
[onSubmit, pushState?.id],
[onSubmit, pushState?.id, stateId, statesMap],
);

const onCancelCreate = useCallback(() => {
setBusy(false);
setFocused(false);
setPushState(undefined);
setPushState(stateId ? statesMap[stateId] : undefined);
setDescription('');
onCancel?.();
}, [onCancel]);
}, [onCancel, stateId, statesMap]);

const onStateSelect = useCallback(
(state: State) => {
Expand All @@ -116,56 +116,57 @@ const CommentCreateForm: React.FC<CommentCreateFormProps> = ({
onCancel={onCancelCreate}
onFocus={onCommentFocus}
actionButton={
states ? (
<StyledStateUpdate>
<Button
view="primary"
disabled={busy}
hue={pushState ? [pushState.hue, themeId] : undefined}
outline
type="submit"
brick="right"
text={pushState ? tr('Update state') : tr('Comment')}
iconLeft={pushState ? <StateDot hue={pushState.hue} /> : undefined}
/>
<Dropdown
placement="top-end"
arrow
items={states}
offset={[-5, 20]}
onChange={onStateSelect}
renderTrigger={(props) => (
<Button
view="primary"
hue={pushState ? [pushState.hue, themeId] : undefined}
outline
brick="left"
iconRight={
props.visible ? (
<IconUpSmallSolid size="s" />
) : (
<IconDownSmallSolid size="s" />
)
}
ref={props.ref}
onClick={props.onClick}
/>
)}
renderItem={(props) => (
<ColorizedMenuItem
key={props.item.id}
hue={props.item.hue}
checked={props.item.id === pushState?.id}
onClick={props.onClick}
>
{props.item.title}
</ColorizedMenuItem>
)}
/>
</StyledStateUpdate>
) : (
<>
<Button size="m" view="primary" disabled={busy} outline type="submit" text={tr('Comment')} />
)
{nullable(states, () => (
<StyledStateUpdate>
<Button
view="primary"
disabled={busy}
hue={pushState ? [pushState.hue, themeId] : undefined}
outline
type="submit"
brick="right"
text={tr('Update state')}
iconLeft={pushState ? <StateDot hue={pushState.hue} /> : undefined}
/>
<Dropdown
placement="top-end"
arrow
items={states}
offset={[-5, 20]}
onChange={onStateSelect}
renderTrigger={(props) => (
<Button
view="primary"
hue={pushState ? [pushState.hue, themeId] : undefined}
outline
brick="left"
iconRight={
props.visible ? (
<IconUpSmallSolid size="s" />
) : (
<IconDownSmallSolid size="s" />
)
}
ref={props.ref}
onClick={props.onClick}
/>
)}
renderItem={(props) => (
<ColorizedMenuItem
key={props.item.id}
hue={props.item.hue}
checked={props.item.id === pushState?.id}
onClick={props.onClick}
>
{props.item.title}
</ColorizedMenuItem>
)}
/>
</StyledStateUpdate>
))}
</>
}
/>
</ActivityFeedItem>
Expand Down
1 change: 1 addition & 0 deletions src/components/GoalActivityFeed.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@ export const GoalActivityFeed = forwardRef<HTMLDivElement, GoalActivityFeedProps
footer={
<GoalCommentCreateForm
goalId={goal.id}
stateId={goal.stateId}
states={goal._isEditable ? goal.project?.flow.states : undefined}
onSubmit={onGoalCommentCreate}
/>
Expand Down
5 changes: 3 additions & 2 deletions src/components/GoalCommentCreateForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@ import CommentCreateForm from './CommentCreateForm/CommentCreateForm';
interface GoalCommentCreateFormProps {
states: ComponentProps<typeof CommentCreateForm>['states'];
goalId: string;
stateId?: string | null;
onSubmit: (comment?: { description: string; stateId?: string }) => Promise<Comment | null | undefined>;
}

const GoalCommentCreateForm: FC<GoalCommentCreateFormProps> = ({ states, goalId, onSubmit }) => {
const GoalCommentCreateForm: FC<GoalCommentCreateFormProps> = ({ states, goalId, stateId, onSubmit }) => {
const {
saveDraft: saveGoalCommentDraft,
resolveDraft: resolveGoalCommentDraft,
Expand Down Expand Up @@ -49,7 +50,7 @@ const GoalCommentCreateForm: FC<GoalCommentCreateFormProps> = ({ states, goalId,
return (
<CommentCreateForm
states={states}
stateId={commentDraft?.stateId}
stateId={commentDraft?.stateId || stateId}
description={commentDraft?.description}
onSubmit={onGoalCommentSubmit}
onCancel={onGoalCommentCancel}
Expand Down

0 comments on commit 5326582

Please sign in to comment.