forked from github/plane
1e152c666c
* chore: moved app & space from apps to root * chore: modified workspace configuration * chore: modified dockerfiles for space and web * chore: modified icons for space * feat: updated files for new svg icons supported by next-images * chore: added /spaces base path for next * chore: added compose config for space * chore: updated husky configuration * chore: updated workflows for new configuration * chore: changed app name to web * fix: resolved build errors with web * chore: reset file tracing root for both projects * chore: added nginx config for deploy * fix: eslint and tsconfig settings for space app * husky setup fixes based on new dir * eslint fixes * prettier formatting --------- Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>
66 lines
1.9 KiB
TypeScript
66 lines
1.9 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;
|
|
error?: boolean;
|
|
className?: string;
|
|
isClearable?: boolean;
|
|
disabled?: boolean;
|
|
startDate: string | null;
|
|
endDate: string | null;
|
|
selectsStart?: boolean;
|
|
selectsEnd?: boolean;
|
|
minDate?: Date | null | undefined;
|
|
maxDate?: Date | null | undefined;
|
|
};
|
|
|
|
export const CustomRangeDatePicker: React.FC<Props> = ({
|
|
renderAs = "button",
|
|
value,
|
|
onChange,
|
|
error = false,
|
|
className = "",
|
|
disabled = false,
|
|
startDate,
|
|
endDate,
|
|
selectsStart = false,
|
|
selectsEnd = false,
|
|
minDate = null,
|
|
maxDate = null,
|
|
}) => (
|
|
<DatePicker
|
|
selected={value ? new Date(value) : null}
|
|
onChange={(val) => {
|
|
if (!val) onChange(null);
|
|
else onChange(renderDateFormat(val));
|
|
}}
|
|
className={`${
|
|
renderAs === "input"
|
|
? "block px-3 py-2 text-sm focus:outline-none"
|
|
: renderAs === "button"
|
|
? `px-3 py-1 text-xs shadow-sm ${
|
|
disabled ? "" : "hover:bg-custom-background-80"
|
|
} duration-300 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary`
|
|
: ""
|
|
} ${error ? "border-red-500 bg-red-100" : ""} ${
|
|
disabled ? "cursor-not-allowed" : "cursor-pointer"
|
|
} w-full rounded-md border border-custom-border-200 bg-transparent caret-transparent ${className}`}
|
|
dateFormat="dd-MM-yyyy"
|
|
disabled={disabled}
|
|
selectsStart={selectsStart}
|
|
selectsEnd={selectsEnd}
|
|
startDate={startDate ? new Date(startDate) : new Date()}
|
|
endDate={endDate ? new Date(endDate) : new Date()}
|
|
minDate={minDate}
|
|
maxDate={maxDate}
|
|
shouldCloseOnSelect
|
|
inline
|
|
/>
|
|
);
|