123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- import React from "react";
- import { useTranslation } from "react-i18next";
- import { Field } from "react-final-form";
- import Label from "../../../ui/formUtils/Label";
- import ColorPicker from "../../../ui/formUtils/ColorPicker";
- const Form = ({ initialValues }) => {
- const { t } = useTranslation();
- return (
- <>
- <Label>
- {t("Label")}
- <Field
- name="label"
- component="input"
- initialValue={initialValues.label}
- />
- </Label>
- <Label>
- {t("Width")}
- <Field
- name="width"
- component="input"
- initialValue={initialValues.width}
- >
- {(props) => <input {...props.input} type="number" />}
- </Field>
- </Label>
- <Label>
- {t("Height")}
- <Field
- name="height"
- component="input"
- initialValue={initialValues.height}
- >
- {(props) => <input {...props.input} type="number" />}
- </Field>
- </Label>
- <Label>
- {t("Color 1")}
- <Field
- name="color"
- component="input"
- initialValue={initialValues.color}
- >
- {({ input: { onChange, value } }) => (
- <ColorPicker value={value} onChange={onChange} />
- )}
- </Field>
- </Label>
- <Label>
- {t("Color 2")}
- <Field
- name="alternateColor"
- component="input"
- initialValue={initialValues.alternateColor}
- >
- {({ input: { onChange, value } }) => (
- <ColorPicker value={value} onChange={onChange} />
- )}
- </Field>
- </Label>
- <Label>
- {t("Column count")}
- <Field
- name="colCount"
- component="input"
- initialValue={initialValues.colCount}
- >
- {(props) => <input {...props.input} type="number" />}
- </Field>
- </Label>
- <Label>
- {t("Row count")}
- <Field
- name="rowCount"
- component="input"
- initialValue={initialValues.rowCount}
- >
- {(props) => <input {...props.input} type="number" />}
- </Field>
- </Label>
- </>
- );
- };
- export default Form;
|