[WEB-371]: Implemented react-day-picker for date selections (#3679)
* dev: initialize new date picker * style: selected date focus state * chore: replace custom date filter modal components * chore: replaced inbox snooze popover datepicker * chore: replaced the custom date picker * style: date range picker designed * chore: date range picker implemented throughout the platform * chore: updated tab indices * chore: range-picker in the issue layouts * chore: passed due date color * chore: removed range picker from issue dates
This commit is contained in:
parent
e86d2ba743
commit
b1592adc66
32 changed files with 1018 additions and 998 deletions
|
|
@ -494,14 +494,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
|
|||
<div className="h-7">
|
||||
<DateDropdown
|
||||
value={value}
|
||||
onChange={(date) => {
|
||||
onChange(date ? renderFormattedPayloadDate(date) : null);
|
||||
handleFormChange();
|
||||
}}
|
||||
onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
|
||||
buttonVariant="border-with-text"
|
||||
placeholder="Start date"
|
||||
maxDate={maxDate ?? undefined}
|
||||
tabIndex={10}
|
||||
placeholder="Start date"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -513,14 +509,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
|
|||
<div className="h-7">
|
||||
<DateDropdown
|
||||
value={value}
|
||||
onChange={(date) => {
|
||||
onChange(date ? renderFormattedPayloadDate(date) : null);
|
||||
handleFormChange();
|
||||
}}
|
||||
onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
|
||||
buttonVariant="border-with-text"
|
||||
placeholder="Due date"
|
||||
minDate={minDate ?? undefined}
|
||||
tabIndex={11}
|
||||
placeholder="Due date"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -539,7 +531,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
|
|||
}}
|
||||
value={value}
|
||||
buttonVariant="border-with-text"
|
||||
tabIndex={12}
|
||||
tabIndex={11}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -559,7 +551,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
|
|||
handleFormChange();
|
||||
}}
|
||||
buttonVariant="border-with-text"
|
||||
tabIndex={13}
|
||||
tabIndex={12}
|
||||
multiple
|
||||
showCount
|
||||
/>
|
||||
|
|
@ -581,7 +573,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
|
|||
}}
|
||||
projectId={projectId}
|
||||
buttonVariant="border-with-text"
|
||||
tabIndex={14}
|
||||
tabIndex={13}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -611,7 +603,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
|
|||
</button>
|
||||
}
|
||||
placement="bottom-start"
|
||||
tabIndex={15}
|
||||
tabIndex={14}
|
||||
>
|
||||
{watch("parent_id") ? (
|
||||
<>
|
||||
|
|
@ -661,7 +653,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
|
|||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") onCreateMoreToggleChange(!isCreateMoreToggleEnabled);
|
||||
}}
|
||||
tabIndex={16}
|
||||
tabIndex={15}
|
||||
>
|
||||
<div className="flex cursor-pointer items-center justify-center">
|
||||
<ToggleSwitch value={isCreateMoreToggleEnabled} onChange={() => {}} size="sm" />
|
||||
|
|
@ -669,7 +661,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
|
|||
<span className="text-xs">Create more</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="neutral-primary" size="sm" onClick={onClose} tabIndex={17}>
|
||||
<Button variant="neutral-primary" size="sm" onClick={onClose} tabIndex={16}>
|
||||
Discard
|
||||
</Button>
|
||||
|
||||
|
|
@ -681,7 +673,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
|
|||
size="sm"
|
||||
loading={isSubmitting}
|
||||
onClick={handleSubmit((data) => handleFormSubmit({ ...data, is_draft: false }))}
|
||||
tabIndex={18}
|
||||
tabIndex={17}
|
||||
>
|
||||
{isSubmitting ? "Moving" : "Move from draft"}
|
||||
</Button>
|
||||
|
|
@ -691,7 +683,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
|
|||
size="sm"
|
||||
loading={isSubmitting}
|
||||
onClick={handleSubmit((data) => handleFormSubmit(data, true))}
|
||||
tabIndex={18}
|
||||
tabIndex={17}
|
||||
>
|
||||
{isSubmitting ? "Saving" : "Save as draft"}
|
||||
</Button>
|
||||
|
|
@ -699,7 +691,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
|
|||
</Fragment>
|
||||
)}
|
||||
|
||||
<Button variant="primary" type="submit" size="sm" loading={isSubmitting} tabIndex={isDraft ? 19 : 18}>
|
||||
<Button variant="primary" type="submit" size="sm" loading={isSubmitting} tabIndex={isDraft ? 18 : 17}>
|
||||
{data?.id ? (isSubmitting ? "Updating" : "Update issue") : isSubmitting ? "Creating" : "Create issue"}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue