fix: state drop down refactor
This commit is contained in:
parent
9297448ec8
commit
d08bce35a3
3 changed files with 9 additions and 10 deletions
|
|
@ -2,20 +2,21 @@ import { observer } from "mobx-react";
|
||||||
import { Check } from "lucide-react";
|
import { Check } from "lucide-react";
|
||||||
import { Combobox } from "@headlessui/react";
|
import { Combobox } from "@headlessui/react";
|
||||||
|
|
||||||
type Props = {
|
export type TStateOptionProps = {
|
||||||
projectId: string | null | undefined;
|
projectId: string | null | undefined;
|
||||||
option: {
|
option: {
|
||||||
value: string | undefined;
|
value: string | undefined;
|
||||||
query: string;
|
query: string;
|
||||||
content: JSX.Element;
|
content: JSX.Element;
|
||||||
};
|
};
|
||||||
filterAvailableStateIds: boolean;
|
|
||||||
selectedValue: string | null | undefined;
|
selectedValue: string | null | undefined;
|
||||||
className?: string;
|
className?: string;
|
||||||
|
filterAvailableStateIds?: boolean;
|
||||||
isForWorkItemCreation?: boolean;
|
isForWorkItemCreation?: boolean;
|
||||||
|
alwaysAllowStateChange?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const StateOption = observer((props: Props) => {
|
export const StateOption = observer((props: TStateOptionProps) => {
|
||||||
const { option, className = "" } = props;
|
const { option, className = "" } = props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -36,6 +36,7 @@ type Props = TDropdownProps & {
|
||||||
stateIds?: string[];
|
stateIds?: string[];
|
||||||
filterAvailableStateIds?: boolean;
|
filterAvailableStateIds?: boolean;
|
||||||
isForWorkItemCreation?: boolean;
|
isForWorkItemCreation?: boolean;
|
||||||
|
alwaysAllowStateChange?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const StateDropdown: React.FC<Props> = observer((props) => {
|
export const StateDropdown: React.FC<Props> = observer((props) => {
|
||||||
|
|
@ -59,8 +60,6 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
|
||||||
value,
|
value,
|
||||||
renderByDefault = true,
|
renderByDefault = true,
|
||||||
stateIds,
|
stateIds,
|
||||||
filterAvailableStateIds = true,
|
|
||||||
isForWorkItemCreation = false,
|
|
||||||
} = props;
|
} = props;
|
||||||
// states
|
// states
|
||||||
const [query, setQuery] = useState("");
|
const [query, setQuery] = useState("");
|
||||||
|
|
@ -237,11 +236,9 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
|
||||||
<StateOption
|
<StateOption
|
||||||
key={option.value}
|
key={option.value}
|
||||||
option={option}
|
option={option}
|
||||||
projectId={projectId}
|
|
||||||
filterAvailableStateIds={filterAvailableStateIds}
|
|
||||||
selectedValue={value}
|
selectedValue={value}
|
||||||
className="flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5"
|
className="flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5"
|
||||||
isForWorkItemCreation={isForWorkItemCreation}
|
{...props}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
) : (
|
) : (
|
||||||
|
|
|
||||||
|
|
@ -244,6 +244,7 @@ export const ListGroup = observer((props: Props) => {
|
||||||
|
|
||||||
const isDragAllowed = !!group_by && DRAG_ALLOWED_GROUPS.includes(group_by);
|
const isDragAllowed = !!group_by && DRAG_ALLOWED_GROUPS.includes(group_by);
|
||||||
const canOverlayBeVisible = isWorkflowDropDisabled || orderBy !== "sort_order" || !!group.isDropDisabled;
|
const canOverlayBeVisible = isWorkflowDropDisabled || orderBy !== "sort_order" || !!group.isDropDisabled;
|
||||||
|
const isDropDisabled = isWorkflowDropDisabled || !!group.isDropDisabled;
|
||||||
|
|
||||||
const isGroupByCreatedBy = group_by === "created_by";
|
const isGroupByCreatedBy = group_by === "created_by";
|
||||||
const shouldExpand = (!!groupIssueCount && isExpanded) || !group_by;
|
const shouldExpand = (!!groupIssueCount && isExpanded) || !group_by;
|
||||||
|
|
@ -253,7 +254,7 @@ export const ListGroup = observer((props: Props) => {
|
||||||
ref={groupRef}
|
ref={groupRef}
|
||||||
className={cn(`relative flex flex-shrink-0 flex-col border-[1px] border-transparent`, {
|
className={cn(`relative flex flex-shrink-0 flex-col border-[1px] border-transparent`, {
|
||||||
"border-custom-primary-100": isDraggingOverColumn,
|
"border-custom-primary-100": isDraggingOverColumn,
|
||||||
"border-custom-error-200": isDraggingOverColumn && !!group.isDropDisabled,
|
"border-custom-error-200": isDraggingOverColumn && isDropDisabled,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<Row
|
<Row
|
||||||
|
|
@ -283,7 +284,7 @@ export const ListGroup = observer((props: Props) => {
|
||||||
<GroupDragOverlay
|
<GroupDragOverlay
|
||||||
dragColumnOrientation={dragColumnOrientation}
|
dragColumnOrientation={dragColumnOrientation}
|
||||||
canOverlayBeVisible={canOverlayBeVisible}
|
canOverlayBeVisible={canOverlayBeVisible}
|
||||||
isDropDisabled={isWorkflowDropDisabled || !!group.isDropDisabled}
|
isDropDisabled={isDropDisabled}
|
||||||
workflowDisabledSource={workflowDisabledSource}
|
workflowDisabledSource={workflowDisabledSource}
|
||||||
dropErrorMessage={group.dropErrorMessage}
|
dropErrorMessage={group.dropErrorMessage}
|
||||||
orderBy={orderBy}
|
orderBy={orderBy}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue