ListForm daki Color seçenekli sütunlar
This commit is contained in:
parent
5f5bf81a6b
commit
f18818d16a
14 changed files with 278 additions and 84 deletions
|
|
@ -264,7 +264,16 @@ function ChartTabAnnotations(props: FormEditProps) {
|
||||||
}
|
}
|
||||||
errorMessage={errors.commonAnnotationSettingsDto?.color}
|
errorMessage={errors.commonAnnotationSettingsDto?.color}
|
||||||
>
|
>
|
||||||
<Field name="commonAnnotationSettingsDto.color" component={Input} />
|
<Field name="commonAnnotationSettingsDto.color">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
@ -502,11 +511,16 @@ function ChartTabAnnotations(props: FormEditProps) {
|
||||||
}
|
}
|
||||||
errorMessage={errors.commonAnnotationSettingsDto?.border?.color}
|
errorMessage={errors.commonAnnotationSettingsDto?.border?.color}
|
||||||
>
|
>
|
||||||
<Field
|
<Field name="commonAnnotationSettingsDto.border.color">
|
||||||
type="text"
|
{({ field, form }: FieldProps) => (
|
||||||
name="commonAnnotationSettingsDto.border.color"
|
<Input
|
||||||
component={Input}
|
{...field}
|
||||||
/>
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
@ -583,7 +597,16 @@ function ChartTabAnnotations(props: FormEditProps) {
|
||||||
}
|
}
|
||||||
errorMessage={errors.commonAnnotationSettingsDto?.font?.color}
|
errorMessage={errors.commonAnnotationSettingsDto?.font?.color}
|
||||||
>
|
>
|
||||||
<Field name="commonAnnotationSettingsDto.font.color" component={Input} />
|
<Field name="commonAnnotationSettingsDto.font.color">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
|
||||||
|
|
@ -328,7 +328,16 @@ function ChartTabAxis(props: FormEditProps) {
|
||||||
}
|
}
|
||||||
errorMessage={errors.argumentAxisDto?.grid?.color}
|
errorMessage={errors.argumentAxisDto?.grid?.color}
|
||||||
>
|
>
|
||||||
<Field type="text" name="argumentAxisDto.grid.color" component={Input} />
|
<Field name="argumentAxisDto.grid.color">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
@ -485,11 +494,16 @@ function ChartTabAxis(props: FormEditProps) {
|
||||||
}
|
}
|
||||||
errorMessage={errors.commonAxisSettingsDto?.grid?.color}
|
errorMessage={errors.commonAxisSettingsDto?.grid?.color}
|
||||||
>
|
>
|
||||||
<Field
|
<Field name="commonAxisSettingsDto.grid.color">
|
||||||
type="text"
|
{({ field, form }: FieldProps) => (
|
||||||
name="commonAxisSettingsDto.grid.color"
|
<Input
|
||||||
component={Input}
|
{...field}
|
||||||
/>
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@ import { Field, FieldProps, Form, Formik, FormikErrors, FormikTouched } from 'fo
|
||||||
import { FormEditProps } from '../../listForm/edit/FormEdit'
|
import { FormEditProps } from '../../listForm/edit/FormEdit'
|
||||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||||
import { useStoreState } from '@/store/store'
|
import { useStoreState } from '@/store/store'
|
||||||
import { ListFormEditTabs, themeOptions } from '@/proxy/admin/list-form/options'
|
import { ListFormEditTabs, themeOptions, tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
|
||||||
import { object } from 'yup'
|
import { object } from 'yup'
|
||||||
import {
|
import {
|
||||||
chartPaletteOptions,
|
chartPaletteOptions,
|
||||||
|
|
@ -382,7 +382,16 @@ function ChartTabCommonSettings(props: FormEditProps) {
|
||||||
invalid={!!(errors.tooltipDto?.color && touched.tooltipDto?.color)}
|
invalid={!!(errors.tooltipDto?.color && touched.tooltipDto?.color)}
|
||||||
errorMessage={errors.tooltipDto?.color}
|
errorMessage={errors.tooltipDto?.color}
|
||||||
>
|
>
|
||||||
<Field name="tooltipDto.color" component={Input} />
|
<Field name="tooltipDto.color">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
@ -440,7 +449,16 @@ function ChartTabCommonSettings(props: FormEditProps) {
|
||||||
}
|
}
|
||||||
errorMessage={errors.tooltipDto?.font?.color}
|
errorMessage={errors.tooltipDto?.font?.color}
|
||||||
>
|
>
|
||||||
<Field name="tooltipDto.font.color" component={Input} />
|
<Field name="tooltipDto.font.color">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
@ -617,7 +635,16 @@ function ChartTabCommonSettings(props: FormEditProps) {
|
||||||
invalid={!!(errors.scrollBarDto?.color && touched.scrollBarDto?.color)}
|
invalid={!!(errors.scrollBarDto?.color && touched.scrollBarDto?.color)}
|
||||||
errorMessage={errors.scrollBarDto?.color}
|
errorMessage={errors.scrollBarDto?.color}
|
||||||
>
|
>
|
||||||
<Field name="scrollBarDto.color" component={Input} />
|
<Field name="scrollBarDto.color">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,16 @@ function ChartTabCrosshair(props: FormEditProps) {
|
||||||
invalid={!!(errors.crosshairDto?.color && touched.crosshairDto?.color)}
|
invalid={!!(errors.crosshairDto?.color && touched.crosshairDto?.color)}
|
||||||
errorMessage={errors.crosshairDto?.color}
|
errorMessage={errors.crosshairDto?.color}
|
||||||
>
|
>
|
||||||
<Field type="text" name="crosshairDto.color" component={Input} />
|
<Field name="crosshairDto.color">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
@ -98,7 +107,16 @@ function ChartTabCrosshair(props: FormEditProps) {
|
||||||
}
|
}
|
||||||
errorMessage={errors.crosshairDto?.label?.backgroundColor}
|
errorMessage={errors.crosshairDto?.label?.backgroundColor}
|
||||||
>
|
>
|
||||||
<Field type="text" name="crosshairDto.label.backgroundColor" component={Input} />
|
<Field name="crosshairDto.label.backgroundColor">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
@ -149,7 +167,16 @@ function ChartTabCrosshair(props: FormEditProps) {
|
||||||
}
|
}
|
||||||
errorMessage={errors.crosshairDto?.label?.font?.color}
|
errorMessage={errors.crosshairDto?.label?.font?.color}
|
||||||
>
|
>
|
||||||
<Field type="text" name="crosshairDto.label.font.color" component={Input} />
|
<Field name="crosshairDto.label.font.color">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
@ -205,7 +232,7 @@ function ChartTabCrosshair(props: FormEditProps) {
|
||||||
>
|
>
|
||||||
<Field name="crosshairDto.horizontalLine.visible" component={Checkbox} />
|
<Field name="crosshairDto.horizontalLine.visible" component={Checkbox} />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
label="Color"
|
label="Color"
|
||||||
invalid={
|
invalid={
|
||||||
|
|
@ -216,7 +243,16 @@ function ChartTabCrosshair(props: FormEditProps) {
|
||||||
}
|
}
|
||||||
errorMessage={errors.crosshairDto?.horizontalLine?.color}
|
errorMessage={errors.crosshairDto?.horizontalLine?.color}
|
||||||
>
|
>
|
||||||
<Field type="text" name="crosshairDto.horizontalLine.color" component={Input} />
|
<Field name="crosshairDto.horizontalLine.color">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
@ -283,7 +319,16 @@ function ChartTabCrosshair(props: FormEditProps) {
|
||||||
}
|
}
|
||||||
errorMessage={errors.crosshairDto?.verticalLine?.color}
|
errorMessage={errors.crosshairDto?.verticalLine?.color}
|
||||||
>
|
>
|
||||||
<Field type="text" name="crosshairDto.verticalLine.color" component={Input} />
|
<Field name="crosshairDto.verticalLine.color">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { Button, Card, Checkbox, FormContainer, FormItem, Input } from '@/components/ui'
|
import { Button, Card, Checkbox, FormContainer, FormItem, Input } from '@/components/ui'
|
||||||
import { Field, Form, Formik } from 'formik'
|
import { Field, FieldProps, Form, Formik } from 'formik'
|
||||||
import { FormEditProps } from '../../listForm/edit/FormEdit'
|
import { FormEditProps } from '../../listForm/edit/FormEdit'
|
||||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||||
import { useStoreState } from '@/store/store'
|
import { useStoreState } from '@/store/store'
|
||||||
|
|
@ -44,7 +44,16 @@ function ChartTabExport(props: FormEditProps) {
|
||||||
invalid={errors.exportDto?.backgroundColor && touched.exportDto?.backgroundColor}
|
invalid={errors.exportDto?.backgroundColor && touched.exportDto?.backgroundColor}
|
||||||
errorMessage={errors.exportDto?.backgroundColor}
|
errorMessage={errors.exportDto?.backgroundColor}
|
||||||
>
|
>
|
||||||
<Field type="text" name="exportDto.backgroundColor" component={Input} />
|
<Field name="exportDto.backgroundColor">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
|
||||||
|
|
@ -55,6 +55,7 @@ function ChartTabLegend(props: FormEditProps) {
|
||||||
<Field name="legendDto.visible" component={Checkbox} />
|
<Field name="legendDto.visible" component={Checkbox} />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
label="Background Color"
|
label="Background Color"
|
||||||
invalid={
|
invalid={
|
||||||
|
|
@ -62,7 +63,16 @@ function ChartTabLegend(props: FormEditProps) {
|
||||||
}
|
}
|
||||||
errorMessage={errors.legendDto?.backgroundColor}
|
errorMessage={errors.legendDto?.backgroundColor}
|
||||||
>
|
>
|
||||||
<Field name="legendDto.backgroundColor" component={Input} />
|
<Field name="legendDto.backgroundColor">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
@ -148,9 +158,18 @@ function ChartTabLegend(props: FormEditProps) {
|
||||||
invalid={!!(errors.legendDto?.border?.color && touched.legendDto?.border?.color)}
|
invalid={!!(errors.legendDto?.border?.color && touched.legendDto?.border?.color)}
|
||||||
errorMessage={errors.legendDto?.border?.color}
|
errorMessage={errors.legendDto?.border?.color}
|
||||||
>
|
>
|
||||||
<Field name="legendDto.border.color" component={Input} />
|
<Field name="legendDto.border.color">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
label="Dash Style"
|
label="Dash Style"
|
||||||
invalid={
|
invalid={
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import THead from '@/components/ui/Table/THead'
|
||||||
import Td from '@/components/ui/Table/Td'
|
import Td from '@/components/ui/Table/Td'
|
||||||
import Th from '@/components/ui/Table/Th'
|
import Th from '@/components/ui/Table/Th'
|
||||||
import Tr from '@/components/ui/Table/Tr'
|
import Tr from '@/components/ui/Table/Tr'
|
||||||
import { Field, Form, Formik } from 'formik'
|
import { Field, FieldProps, Form, Formik } from 'formik'
|
||||||
import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa'
|
import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa'
|
||||||
import { FormEditProps } from '../../listForm/edit/FormEdit'
|
import { FormEditProps } from '../../listForm/edit/FormEdit'
|
||||||
import { useStoreState } from '@/store/store'
|
import { useStoreState } from '@/store/store'
|
||||||
|
|
@ -57,7 +57,16 @@ function ChartTabPanes(props: FormEditProps) {
|
||||||
}
|
}
|
||||||
errorMessage={errors.commonPaneSettingsDto?.backgroundColor}
|
errorMessage={errors.commonPaneSettingsDto?.backgroundColor}
|
||||||
>
|
>
|
||||||
<Field type="text" name="commonPaneSettingsDto.backgroundColor" component={Input} />
|
<Field name="commonPaneSettingsDto.backgroundColor">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Card>
|
</Card>
|
||||||
<Card className="my-2" bodyClass="p-0">
|
<Card className="my-2" bodyClass="p-0">
|
||||||
|
|
|
||||||
|
|
@ -438,7 +438,16 @@ function ChartTabSeries(props: FormEditProps & { listFormCode: string }) {
|
||||||
}
|
}
|
||||||
errorMessage={errors.commonSeriesSettingsDto?.color}
|
errorMessage={errors.commonSeriesSettingsDto?.color}
|
||||||
>
|
>
|
||||||
<Field name="commonSeriesSettingsDto.color" component={Input} />
|
<Field name="commonSeriesSettingsDto.color">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
|
||||||
|
|
@ -145,7 +145,16 @@ const ChartTabZoomAndPan = (props: FormEditProps) => {
|
||||||
}
|
}
|
||||||
errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.color}
|
errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.color}
|
||||||
>
|
>
|
||||||
<Field name="zoomAndPanDto.dragBoxStyle.color" component={Input} />
|
<Field name="zoomAndPanDto.dragBoxStyle.color">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
|
||||||
|
|
@ -262,13 +262,22 @@ function JsonRowOpDialogAnnotation({
|
||||||
>
|
>
|
||||||
<Field name="argument" component={Input} />
|
<Field name="argument" component={Input} />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
label="Color"
|
label="Color"
|
||||||
invalid={errors.color && touched.color}
|
invalid={errors.color && touched.color}
|
||||||
errorMessage={errors.color}
|
errorMessage={errors.color}
|
||||||
>
|
>
|
||||||
<Field type="text" name="color" component={Input} />
|
<Field name="color">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
@ -390,7 +399,16 @@ function JsonRowOpDialogAnnotation({
|
||||||
invalid={errors.border?.color && touched.border?.color}
|
invalid={errors.border?.color && touched.border?.color}
|
||||||
errorMessage={errors.border?.color}
|
errorMessage={errors.border?.color}
|
||||||
>
|
>
|
||||||
<Field type="text" name="border.color" component={Input} />
|
<Field name="border.color">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
|
||||||
|
|
@ -305,7 +305,16 @@ function JsonRowOpDialogAxis({
|
||||||
invalid={errors.grid?.color && touched.grid?.color}
|
invalid={errors.grid?.color && touched.grid?.color}
|
||||||
errorMessage={errors.grid?.color}
|
errorMessage={errors.grid?.color}
|
||||||
>
|
>
|
||||||
<Field type="text" name="grid.color" component={Input} />
|
<Field name="grid.color">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
@ -326,7 +335,16 @@ function JsonRowOpDialogAxis({
|
||||||
invalid={errors.breakStyle?.color && touched.breakStyle?.color}
|
invalid={errors.breakStyle?.color && touched.breakStyle?.color}
|
||||||
errorMessage={errors.breakStyle?.color}
|
errorMessage={errors.breakStyle?.color}
|
||||||
>
|
>
|
||||||
<Field type="text" name="breakStyle.color" component={Input} />
|
<Field name="breakStyle.color">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ import {
|
||||||
import { ListFormJsonRowDto } from '@/proxy/admin/list-form/models'
|
import { ListFormJsonRowDto } from '@/proxy/admin/list-form/models'
|
||||||
import { useStoreActions } from '@/store'
|
import { useStoreActions } from '@/store'
|
||||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||||
import { Field, Form, Formik } from 'formik'
|
import { Field, FieldProps, Form, Formik } from 'formik'
|
||||||
import { Dispatch, SetStateAction, useEffect, useState } from 'react'
|
import { Dispatch, SetStateAction, useEffect, useState } from 'react'
|
||||||
import { number, object, string } from 'yup'
|
import { number, object, string } from 'yup'
|
||||||
import { JsonRowDialogData } from './types'
|
import { JsonRowDialogData } from './types'
|
||||||
|
|
@ -131,7 +131,16 @@ function JsonRowOpDialogPane({
|
||||||
invalid={errors.backgroundColor && touched.backgroundColor}
|
invalid={errors.backgroundColor && touched.backgroundColor}
|
||||||
errorMessage={errors.backgroundColor}
|
errorMessage={errors.backgroundColor}
|
||||||
>
|
>
|
||||||
<Field type="text" name="backgroundColor" component={Input} />
|
<Field name="backgroundColor">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
|
||||||
|
|
@ -398,7 +398,16 @@ function JsonRowOpDialogSeries({
|
||||||
invalid={errors.color && touched.color}
|
invalid={errors.color && touched.color}
|
||||||
errorMessage={errors.color}
|
errorMessage={errors.color}
|
||||||
>
|
>
|
||||||
<Field type="text" name="color" component={Input} />
|
<Field name="color">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
@ -448,7 +457,16 @@ function JsonRowOpDialogSeries({
|
||||||
invalid={errors.label?.backgroundColor && touched.label?.backgroundColor}
|
invalid={errors.label?.backgroundColor && touched.label?.backgroundColor}
|
||||||
errorMessage={errors.label?.backgroundColor}
|
errorMessage={errors.label?.backgroundColor}
|
||||||
>
|
>
|
||||||
<Field type="text" name="label.backgroundColor" component={Input} />
|
<Field name="label.backgroundColor">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
|
|
@ -482,7 +500,16 @@ function JsonRowOpDialogSeries({
|
||||||
|
|
||||||
<Card className="my-2" header="Font">
|
<Card className="my-2" header="Font">
|
||||||
<FormItem label="Color">
|
<FormItem label="Color">
|
||||||
<Field name="label.font.color" component={Input} />
|
<Field name="label.font.color">
|
||||||
|
{({ field, form }: FieldProps) => (
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="color"
|
||||||
|
className='!h-10 !p-0 !m-0 !border-0'
|
||||||
|
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem label="Family">
|
<FormItem label="Family">
|
||||||
|
|
|
||||||
|
|
@ -328,48 +328,6 @@ function JsonRowOpDialogWidget({
|
||||||
component={Input}
|
component={Input}
|
||||||
/>
|
/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
{/* <FormItem
|
|
||||||
label="Color"
|
|
||||||
invalid={errors.color && touched.color}
|
|
||||||
errorMessage={errors.color}
|
|
||||||
>
|
|
||||||
<Field type="text" autoComplete="off" name="color" placeholder="Color">
|
|
||||||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
|
||||||
<Select
|
|
||||||
field={field}
|
|
||||||
form={form}
|
|
||||||
isClearable={true}
|
|
||||||
options={widgetColorOptions}
|
|
||||||
value={widgetColorOptions?.filter(
|
|
||||||
(option: any) => option.value === values.color,
|
|
||||||
)}
|
|
||||||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Field>
|
|
||||||
</FormItem>
|
|
||||||
|
|
||||||
<FormItem
|
|
||||||
label="Icon"
|
|
||||||
invalid={errors.icon && touched.icon}
|
|
||||||
errorMessage={errors.icon}
|
|
||||||
>
|
|
||||||
<Field type="text" autoComplete="off" name="icon" placeholder="Icon">
|
|
||||||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
|
||||||
<Select
|
|
||||||
field={field}
|
|
||||||
form={form}
|
|
||||||
isClearable={true}
|
|
||||||
options={widgetIconOptions}
|
|
||||||
value={widgetIconOptions?.filter(
|
|
||||||
(option: any) => option.value === values.icon,
|
|
||||||
)}
|
|
||||||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Field>
|
|
||||||
</FormItem> */}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="text-right mt-4">
|
<div className="text-right mt-4">
|
||||||
<Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
|
<Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue