forked from github/plane
53e443d816
* feat: added new issue subscriber table
* dev: notification model
* feat: added CRUD operation for issue subscriber
* Revert "feat: added CRUD operation for issue subscriber"
This reverts commit b22e062576.
* feat: added CRUD operation for issue subscriber
* dev: notification models and operations
* dev: remove delete endpoint response data
* dev: notification endpoints and fix bg worker for saving notifications
* feat: added list and unsubscribe function in issue subscriber
* dev: filter by snoozed and response update for list and permissions
* dev: update issue notifications
* dev: notification segregation
* dev: update notifications
* dev: notification filtering
* dev: add issue name in notifications
* dev: notification new endpoints
* fix: pushing local settings
* feat: notification workflow setup and made basic UI
* style: improved UX with toast alerts and other interactions
refactor: changed classnames according to new theme structure, changed all icons to material icons
* feat: showing un-read notification count
* feat: not showing 'subscribe' button on issue created by user & assigned to user
not showing 'Create by you' for view & guest of the workspace
* fix: 'read' -> 'unread' heading, my issue wrong filter
* feat: made snooze dropdown & modal
feat: switched to calendar
* fix: minor ui fixes
* feat: snooze modal date/time select
* fix: params for read/un-read notification
* style: snooze notification modal
---------
Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
Co-authored-by: pablohashescobar <nikhilschacko@gmail.com>
Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
// react-datepicker
|
|
import DatePicker from "react-datepicker";
|
|
import "react-datepicker/dist/react-datepicker.css";
|
|
// helpers
|
|
import { renderDateFormat } from "helpers/date-time.helper";
|
|
|
|
type Props = {
|
|
renderAs?: "input" | "button";
|
|
value: Date | string | null | undefined;
|
|
onChange: (val: string | null) => void;
|
|
placeholder?: string;
|
|
displayShortForm?: boolean;
|
|
error?: boolean;
|
|
noBorder?: boolean;
|
|
className?: string;
|
|
isClearable?: boolean;
|
|
disabled?: boolean;
|
|
minDate?: Date;
|
|
};
|
|
|
|
export const CustomDatePicker: React.FC<Props> = ({
|
|
renderAs = "button",
|
|
value,
|
|
onChange,
|
|
placeholder = "Select date",
|
|
displayShortForm = false,
|
|
error = false,
|
|
noBorder = false,
|
|
className = "",
|
|
isClearable = true,
|
|
disabled = false,
|
|
minDate,
|
|
}) => (
|
|
<DatePicker
|
|
placeholderText={placeholder}
|
|
selected={value ? new Date(value) : null}
|
|
onChange={(val) => {
|
|
if (!val) onChange(null);
|
|
else onChange(renderDateFormat(val));
|
|
}}
|
|
className={`${
|
|
renderAs === "input"
|
|
? "block px-2 py-2 text-sm focus:outline-none"
|
|
: renderAs === "button"
|
|
? `px-2 py-1 text-xs shadow-sm ${
|
|
disabled ? "" : "hover:bg-custom-background-80"
|
|
} duration-300`
|
|
: ""
|
|
} ${error ? "border-red-500 bg-red-100" : ""} ${
|
|
disabled ? "cursor-not-allowed" : "cursor-pointer"
|
|
} ${
|
|
noBorder ? "" : "border border-custom-border-200"
|
|
} w-full rounded-md caret-transparent outline-none ${className}`}
|
|
dateFormat="MMM dd, yyyy"
|
|
isClearable={isClearable}
|
|
disabled={disabled}
|
|
minDate={minDate}
|
|
/>
|
|
);
|