Improve diverse form features

- General responsiveness
- Resize select component
- Fix datepicker for dark themes
- Make success notification configurable

Committed-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>

Reviewed-by: Rene Pfeuffer <rene.pfeuffer@cloudogu.com>
This commit is contained in:
Konstantin Schaper
2023-04-03 10:02:17 +02:00
committed by SCM-Manager
parent 026ffa18fd
commit b53f8bcf12
18 changed files with 285 additions and 78 deletions

View File

@@ -21,13 +21,18 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import {useConfigLink} from "@scm-manager/ui-api";
import {Loading} from "@scm-manager/ui-components";
import React, {ComponentProps} from "react";
import {HalRepresentation} from "@scm-manager/ui-types";
import Form from "./Form";
type Props<T extends HalRepresentation> = Pick<ComponentProps<typeof Form<T, T>>, "translationPath" | "children"> & {
import { useConfigLink } from "@scm-manager/ui-api";
import { Loading } from "@scm-manager/ui-components";
import React, { ComponentProps } from "react";
import { HalRepresentation } from "@scm-manager/ui-types";
import Form from "./Form";
import { useTranslation } from "react-i18next";
type Props<T extends HalRepresentation> =
// eslint-disable-next-line prettier/prettier
Omit<ComponentProps<typeof Form<T>>, "onSubmit" | "defaultValues" | "readOnly" | "successMessageFallback">
& {
link: string;
};
@@ -35,20 +40,17 @@ type Props<T extends HalRepresentation> = Pick<ComponentProps<typeof Form<T, T>>
* @beta
* @since 2.41.0
*/
export function ConfigurationForm<T extends HalRepresentation>({link, translationPath, children}: Props<T>) {
const {initialConfiguration, isReadOnly, update, isLoading} = useConfigLink<T>(link);
export function ConfigurationForm<T extends HalRepresentation>({ link, children, ...formProps }: Props<T>) {
const { initialConfiguration, isReadOnly, update, isLoading } = useConfigLink<T>(link);
const [t] = useTranslation("commons", { keyPrefix: "form" });
if (isLoading || !initialConfiguration) {
return <Loading/>;
return <Loading />;
}
return (
<Form<T, T>
onSubmit={update}
translationPath={translationPath}
defaultValues={initialConfiguration}
readOnly={isReadOnly}
>
<Form onSubmit={update} defaultValues={initialConfiguration} readOnly={isReadOnly}
successMessageFallback={t("submit-success-notification")} {...formProps}>
{children}
</Form>
);