From 91ac19dd66c738f5d91bbf3c756b31cec5193e42 Mon Sep 17 00:00:00 2001 From: ilbrando Date: Sat, 22 Jun 2024 14:33:23 +0200 Subject: [PATCH] Remove datepickers (#11) * Remove MUI-X datepickers * Settings cspell * Change --- .vscode/settings.json | 3 +- .../remove-datepickers_2024-06-22-12-29.json | 10 +++ .../form-date-picker/form-date-picker.tsx | 55 ----------------- .../src/form-fields/form-date-picker/index.ts | 1 - .../form-date-time-picker.tsx | 61 ------------------- .../form-date-timer-picker/index.ts | 1 - .../src/form-fields/index.ts | 2 - 7 files changed, 12 insertions(+), 121 deletions(-) create mode 100644 common/changes/@ilbrando/simple-form-material-ui/remove-datepickers_2024-06-22-12-29.json delete mode 100644 packages/simple-form-material-ui/src/form-fields/form-date-picker/form-date-picker.tsx delete mode 100644 packages/simple-form-material-ui/src/form-fields/form-date-picker/index.ts delete mode 100644 packages/simple-form-material-ui/src/form-fields/form-date-timer-picker/form-date-time-picker.tsx delete mode 100644 packages/simple-form-material-ui/src/form-fields/form-date-timer-picker/index.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index 48b6af9..99d8e84 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -17,5 +17,6 @@ "pattern": "./examples/*/" } ], - "git.branchProtection": ["main"] + "git.branchProtection": ["main"], + "cSpell.words": ["ilbrando"] } diff --git a/common/changes/@ilbrando/simple-form-material-ui/remove-datepickers_2024-06-22-12-29.json b/common/changes/@ilbrando/simple-form-material-ui/remove-datepickers_2024-06-22-12-29.json new file mode 100644 index 0000000..eb02d7b --- /dev/null +++ b/common/changes/@ilbrando/simple-form-material-ui/remove-datepickers_2024-06-22-12-29.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@ilbrando/simple-form-material-ui", + "comment": "Removed MUI-X datepicker components", + "type": "major" + } + ], + "packageName": "@ilbrando/simple-form-material-ui" +} \ No newline at end of file diff --git a/packages/simple-form-material-ui/src/form-fields/form-date-picker/form-date-picker.tsx b/packages/simple-form-material-ui/src/form-fields/form-date-picker/form-date-picker.tsx deleted file mode 100644 index 98ba05c..0000000 --- a/packages/simple-form-material-ui/src/form-fields/form-date-picker/form-date-picker.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { useCallback } from "react"; -import { getEditor, useLocalization } from "@ilbrando/simple-form"; -import { hasValue, OmitSafe, PropKeysOf } from "@ilbrando/utils"; -import { TextField, TextFieldProps } from "@mui/material"; -import { DatePicker, DatePickerProps, PickerValidDate } from "@mui/x-date-pickers"; - -import { FormFieldBaseProps } from "../types"; - -type FormValue = PickerValidDate; - -export type FormDatePickerProps> = OmitSafe, "value" | "onChange"> & - FormFieldBaseProps & { - textFieldProps?: OmitSafe; - }; - -type DatePickerTextFieldProps> = Pick, "textFieldProps" | "reserveSpaceForValidationMessage"> & { - editor: ReturnType>; -}; - -const DatePickerTextField = function >(props: DatePickerTextFieldProps) { - const { textFieldProps, editor, reserveSpaceForValidationMessage } = props; - - // The order for the TextField props is significant - return ; -}; - -export const FormDatePicker = function >(props: FormDatePickerProps) { - const { formManager, fieldName, disabled, textFieldProps, reserveSpaceForValidationMessage, ...rest } = props; - - const { texts } = useLocalization(); - - const editor = getEditor(formManager, fieldName, disabled); - - const getComponentError = useCallback( - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (value: any) => { - if (!hasValue(value)) return undefined; - if (isNaN(value)) return texts.invalidValue; - return value instanceof Date ? undefined : texts.invalidValue; - }, - [texts.invalidValue] - ); - - return ( - editor.setFieldValue(e, getComponentError(e))} - disabled={editor.isDisabled} - slots={{ textField: DatePickerTextField }} - // eslint-disable-next-line @typescript-eslint/no-explicit-any - slotProps={{ textField: { textFieldProps, editor, reserveSpaceForValidationMessage } as any }} - {...rest} - /> - ); -}; diff --git a/packages/simple-form-material-ui/src/form-fields/form-date-picker/index.ts b/packages/simple-form-material-ui/src/form-fields/form-date-picker/index.ts deleted file mode 100644 index bc8da61..0000000 --- a/packages/simple-form-material-ui/src/form-fields/form-date-picker/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./form-date-picker"; diff --git a/packages/simple-form-material-ui/src/form-fields/form-date-timer-picker/form-date-time-picker.tsx b/packages/simple-form-material-ui/src/form-fields/form-date-timer-picker/form-date-time-picker.tsx deleted file mode 100644 index b271ec8..0000000 --- a/packages/simple-form-material-ui/src/form-fields/form-date-timer-picker/form-date-time-picker.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { useCallback } from "react"; -import { getEditor, useLocalization } from "@ilbrando/simple-form"; -import { hasValue, OmitSafe, PropKeysOf } from "@ilbrando/utils"; -import { TextField, TextFieldProps } from "@mui/material"; -import { DateTimePicker, DateTimePickerProps, PickerValidDate } from "@mui/x-date-pickers"; - -import { useMuiFormUtils } from "src/utils"; - -import { FormFieldBaseProps } from "../types"; - -type FormValue = PickerValidDate; - -export type FormDateTimePickerProps> = OmitSafe, "value" | "onChange"> & - FormFieldBaseProps & { - textFieldProps?: OmitSafe; - }; - -type DatePickerTextFieldProps> = Pick, "textFieldProps" | "reserveSpaceForValidationMessage"> & { - editor: ReturnType>; -}; - -const DateTimePickerTextField = function >(props: DatePickerTextFieldProps) { - const { textFieldProps, editor, reserveSpaceForValidationMessage } = props; - - const { effectiveReserveSpaceForValidationMessage } = useMuiFormUtils(reserveSpaceForValidationMessage); - - // The order for the TextField props is significant - return ; -}; - -export const FormDateTimePicker = function >(props: FormDateTimePickerProps) { - const { formManager, fieldName, disabled, textFieldProps, reserveSpaceForValidationMessage, ...rest } = props; - - const { texts } = useLocalization(); - - const { effectiveReserveSpaceForValidationMessage } = useMuiFormUtils(reserveSpaceForValidationMessage); - - const editor = getEditor(formManager, fieldName, disabled); - - const getComponentError = useCallback( - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (value: any) => { - if (!hasValue(value)) return undefined; - if (isNaN(value)) return texts.invalidValue; - return value instanceof Date ? undefined : texts.invalidValue; - }, - [texts.invalidValue] - ); - - return ( - editor.setFieldValue(e, getComponentError(e))} - disabled={editor.isDisabled} - slots={{ textField: DateTimePickerTextField }} - // eslint-disable-next-line @typescript-eslint/no-explicit-any - slotProps={{ textField: { textFieldProps, editor, reserveSpaceForValidationMessage } as any }} - {...rest} - /> - ); -}; diff --git a/packages/simple-form-material-ui/src/form-fields/form-date-timer-picker/index.ts b/packages/simple-form-material-ui/src/form-fields/form-date-timer-picker/index.ts deleted file mode 100644 index f9ed2a8..0000000 --- a/packages/simple-form-material-ui/src/form-fields/form-date-timer-picker/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./form-date-time-picker"; diff --git a/packages/simple-form-material-ui/src/form-fields/index.ts b/packages/simple-form-material-ui/src/form-fields/index.ts index a239781..5f760b9 100644 --- a/packages/simple-form-material-ui/src/form-fields/index.ts +++ b/packages/simple-form-material-ui/src/form-fields/index.ts @@ -1,7 +1,5 @@ export * from "./form-autocomplete-field"; export * from "./form-checkbox"; -export * from "./form-date-picker"; -export * from "./form-date-timer-picker"; export * from "./form-number-field"; export * from "./form-radio-group"; export * from "./form-range-slider-field";