Skip to content

Commit bf93ec8

Browse files
NEKOYASANNEKOYASAN
committed
全ExpressionFilterのRead系の仮対応
1 parent eca8b00 commit bf93ec8

File tree

16 files changed

+291
-25
lines changed

16 files changed

+291
-25
lines changed

‎src/components/common/FilterInputField/expressions/common/ExpressionInputTypeInputField/ExpressionInputTypeInputField.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import type { ExpressionInputType } from '@maplibre/maplibre-gl-style-spec';
55
import { cn } from '~/utils/tailwindUtil.ts';
66

77
export type ExpressionInputTypeInputFieldProps = {
8-
value: ExpressionInputType;
8+
value: ExpressionInputType | unknown;
99
onChange?: (value: ExpressionInputType) => void;
1010
} & Omit<ComponentProps<'div'>, 'onChange'>;
1111

@@ -22,7 +22,9 @@ export const ExpressionInputTypeInputField: FC<ExpressionInputTypeInputFieldProp
2222
? '"' + value + '"'
2323
: typeof value === 'number'
2424
? value
25-
: value.toString()}
25+
: typeof value === 'boolean'
26+
? value.toString()
27+
: JSON.stringify(value)}
2628
{children}
2729
</div>
2830
);

‎src/components/common/FilterInputField/expressions/types/ArrayInputField/ArrayInputField.tsx‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import type {
55
ExpressionSpecification,
66
} from '@maplibre/maplibre-gl-style-spec';
77

8+
import { ExpressionInputField } from '~/components/common/FilterInputField/expressions';
9+
import { ExpressionInputTypeInputField } from '~/components/common/FilterInputField/expressions/common/ExpressionInputTypeInputField';
10+
import { isExpression } from '~/components/common/FilterInputField/expressions/utils/isExpression.ts';
811
import { cn } from '~/utils/tailwindUtil';
912

1013
export type ArrayInputFieldProps = {
@@ -20,9 +23,24 @@ export type ArrayInputFieldProps = {
2023
onChange?: (value: ExpressionSpecification) => void;
2124
} & Omit<ComponentProps<'div'>, 'onChange'>;
2225

23-
export const ArrayInputField: FC<ArrayInputFieldProps> = ({ className, children, ...props }) => {
26+
export const ArrayInputField: FC<ArrayInputFieldProps> = ({
27+
className,
28+
children,
29+
value,
30+
onChange,
31+
...props
32+
}) => {
2433
return (
25-
<div {...props} className={cn('', className)}>
34+
<div
35+
{...props}
36+
className={cn('flex flex-row items-center gap-2 rounded bg-black/5 py-0.5 px-0.5', className)}
37+
>
38+
<div className={'flex flex-row py-0.5 px-0.5'}>typecheck Array</div>
39+
{isExpression(value[1]) ? (
40+
<ExpressionInputField value={value[1]} onChange={onChange} />
41+
) : (
42+
<ExpressionInputTypeInputField value={value[1]} />
43+
)}
2644
{children}
2745
</div>
2846
);

‎src/components/common/FilterInputField/expressions/types/BooleanInputField/BooleanInputField.tsx‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import type { ComponentProps, FC } from 'react';
2+
import { Fragment } from 'react';
23

34
import type { ExpressionSpecification } from '@maplibre/maplibre-gl-style-spec';
45

6+
import { ExpressionInputField } from '~/components/common/FilterInputField/expressions';
7+
import { ExpressionInputTypeInputField } from '~/components/common/FilterInputField/expressions/common/ExpressionInputTypeInputField';
8+
import { isExpression } from '~/components/common/FilterInputField/expressions/utils/isExpression.ts';
59
import { cn } from '~/utils/tailwindUtil';
610

711
export type BooleanInputFieldProps = {
@@ -12,10 +16,27 @@ export type BooleanInputFieldProps = {
1216
export const BooleanInputField: FC<BooleanInputFieldProps> = ({
1317
className,
1418
children,
19+
value,
20+
onChange,
1521
...props
1622
}) => {
23+
const values = value.slice(1) as (unknown | ExpressionSpecification)[];
1724
return (
18-
<div {...props} className={cn('', className)}>
25+
<div
26+
{...props}
27+
className={cn('flex flex-row items-center gap-2 rounded bg-black/5 py-0.5 px-0.5', className)}
28+
>
29+
<div className={'flex flex-row py-0.5 px-0.5'}>typecheck boolean</div>
30+
{values.map((arg, index) => (
31+
<Fragment key={'number' + index + arg}>
32+
{isExpression(arg) ? (
33+
<ExpressionInputField value={arg} onChange={onChange} />
34+
) : (
35+
<ExpressionInputTypeInputField value={arg} />
36+
)}
37+
{index < values.length - 1 && <div className={'flex flex-row py-0.5 px-0.5'}>OR</div>}
38+
</Fragment>
39+
))}
1940
{children}
2041
</div>
2142
);

‎src/components/common/FilterInputField/expressions/types/CollatorInputField/CollatorInputField.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,17 @@ export type CollatorInputFieldProps = {
1515
export const CollatorInputField: FC<CollatorInputFieldProps> = ({
1616
className,
1717
children,
18+
value,
19+
onChange,
1820
...props
1921
}) => {
2022
return (
21-
<div {...props} className={cn('', className)}>
23+
<div
24+
{...props}
25+
className={cn('flex flex-row items-center gap-2 rounded bg-black/5 py-0.5 px-0.5', className)}
26+
>
27+
<div className={'flex flex-row py-0.5 px-0.5'}>collator option</div>
28+
<div className={'flex flex-row py-0.5 px-0.5'}>{JSON.stringify(value[1])}</div>
2229
{children}
2330
</div>
2431
);

‎src/components/common/FilterInputField/expressions/types/FormatInputField/FormatInputField.tsx‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import type { ComponentProps, FC } from 'react';
2+
import { Fragment } from 'react';
23

34
import type { ColorSpecification, ExpressionSpecification } from '@maplibre/maplibre-gl-style-spec';
45

6+
import { ExpressionInputField } from '~/components/common/FilterInputField/expressions';
7+
import { ExpressionInputTypeInputField } from '~/components/common/FilterInputField/expressions/common/ExpressionInputTypeInputField';
8+
import { isExpression } from '~/components/common/FilterInputField/expressions/utils/isExpression.ts';
59
import { cn } from '~/utils/tailwindUtil';
610

711
export type FormatInputFieldProps = {
@@ -21,12 +25,32 @@ export type FormatInputFieldProps = {
2125
onChange?: (value: ExpressionSpecification) => void;
2226
} & Omit<ComponentProps<'div'>, 'onChange'>;
2327

24-
export const FormatInputField: FC<FormatInputFieldProps> = ({ className, children, ...props }) => {
28+
export const FormatInputField: FC<FormatInputFieldProps> = ({
29+
className,
30+
children,
31+
value,
32+
onChange,
33+
...props
34+
}) => {
35+
const values = value.slice(1) as (unknown | ExpressionSpecification)[];
2536
return (
26-
<div {...props} className={cn('', className)}>
37+
<div
38+
{...props}
39+
className={cn('flex flex-row items-center gap-2 rounded bg-black/5 py-0.5 px-0.5', className)}
40+
>
41+
<div className={'flex flex-row py-0.5 px-0.5'}>format</div>
42+
{values.map((arg, index) => (
43+
<Fragment key={'number' + index + arg}>
44+
{isExpression(arg) ? (
45+
<ExpressionInputField value={arg} onChange={onChange} />
46+
) : (
47+
<ExpressionInputTypeInputField value={arg} />
48+
)}
49+
{index % 2 === 0 && <div className={'flex flex-row py-0.5 px-0.5'}>format option:</div>}
50+
</Fragment>
51+
))}
2752
{children}
2853
</div>
2954
);
3055
};
31-
3256
FormatInputField.displayName = 'FormatInputField';

‎src/components/common/FilterInputField/expressions/types/ImageInputField/ImageInputField.tsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,33 @@ import type { ComponentProps, FC } from 'react';
22

33
import type { ExpressionSpecification } from '@maplibre/maplibre-gl-style-spec';
44

5+
import { ExpressionInputField } from '~/components/common/FilterInputField/expressions';
6+
import { isExpression } from '~/components/common/FilterInputField/expressions/utils/isExpression.ts';
57
import { cn } from '~/utils/tailwindUtil';
68

79
export type ImageInputFieldProps = {
810
value: ['image', unknown | ExpressionSpecification];
911
onChange?: (value: ExpressionSpecification) => void;
1012
} & Omit<ComponentProps<'div'>, 'onChange'>;
1113

12-
export const ImageInputField: FC<ImageInputFieldProps> = ({ className, children, ...props }) => {
14+
export const ImageInputField: FC<ImageInputFieldProps> = ({
15+
className,
16+
children,
17+
value,
18+
onChange,
19+
...props
20+
}) => {
1321
return (
14-
<div {...props} className={cn('', className)}>
22+
<div
23+
{...props}
24+
className={cn('flex flex-row items-center gap-2 rounded bg-black/5 py-0.5 px-0.5', className)}
25+
>
26+
<div className={'flex flex-row py-0.5 px-0.5'}>get Image</div>
27+
{isExpression(value[1]) ? (
28+
<ExpressionInputField value={value[1]} onChange={onChange} />
29+
) : (
30+
<div className={'flex flex-row py-0.5 px-0.5'}>{JSON.stringify(value[1])}</div>
31+
)}
1532
{children}
1633
</div>
1734
);

‎src/components/common/FilterInputField/expressions/types/LiteralInputField/LiteralInputField.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,17 @@ export type LiteralInputFieldProps = {
1212
export const LiteralInputField: FC<LiteralInputFieldProps> = ({
1313
className,
1414
children,
15+
value,
16+
onChange,
1517
...props
1618
}) => {
1719
return (
18-
<div {...props} className={cn('', className)}>
20+
<div
21+
{...props}
22+
className={cn('flex flex-row items-center gap-2 rounded bg-black/5 py-0.5 px-0.5', className)}
23+
>
24+
<div className={'flex flex-row py-0.5 px-0.5'}>JSON parse</div>
25+
<div className={'flex flex-row py-0.5 px-0.5'}>{JSON.stringify(value[1])}</div>
1926
{children}
2027
</div>
2128
);

‎src/components/common/FilterInputField/expressions/types/NumberFormatInputField/NumberFormatInputField.tsx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import type { ComponentProps, FC } from 'react';
22

33
import type { ExpressionSpecification } from '@maplibre/maplibre-gl-style-spec';
44

5+
import { ExpressionInputField } from '~/components/common/FilterInputField/expressions';
6+
import { ExpressionInputTypeInputField } from '~/components/common/FilterInputField/expressions/common/ExpressionInputTypeInputField';
7+
import { isExpression } from '~/components/common/FilterInputField/expressions/utils/isExpression.ts';
58
import { cn } from '~/utils/tailwindUtil';
69

710
export type NumberFormatInputFieldProps = {
@@ -21,10 +24,22 @@ export type NumberFormatInputFieldProps = {
2124
export const NumberFormatInputField: FC<NumberFormatInputFieldProps> = ({
2225
className,
2326
children,
27+
value,
28+
onChange,
2429
...props
2530
}) => {
2631
return (
27-
<div {...props} className={cn('', className)}>
32+
<div
33+
{...props}
34+
className={cn('flex flex-row items-center gap-2 rounded bg-black/5 py-0.5 px-0.5', className)}
35+
>
36+
<div className={'flex flex-row py-0.5 px-0.5'}>number format</div>
37+
{isExpression(value[1]) ? (
38+
<ExpressionInputField value={value[1]} onChange={onChange} />
39+
) : (
40+
<ExpressionInputTypeInputField value={value[1]} />
41+
)}
42+
<div className={'flex flex-row py-0.5 px-0.5'}>option: {JSON.stringify(value[2])}</div>
2843
{children}
2944
</div>
3045
);

‎src/components/common/FilterInputField/expressions/types/NumberInputField/NumberInputField.tsx‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,41 @@
11
import type { ComponentProps, FC } from 'react';
2+
import { Fragment } from 'react';
23

34
import type { ExpressionSpecification } from '@maplibre/maplibre-gl-style-spec';
45

6+
import { ExpressionInputField } from '~/components/common/FilterInputField/expressions';
7+
import { isExpression } from '~/components/common/FilterInputField/expressions/utils/isExpression.ts';
58
import { cn } from '~/utils/tailwindUtil';
69

710
export type NumberInputFieldProps = {
811
value: ['number', unknown | ExpressionSpecification, ...(unknown | ExpressionSpecification)[]];
912
onChange?: (value: ExpressionSpecification) => void;
1013
} & Omit<ComponentProps<'div'>, 'onChange'>;
1114

12-
export const NumberInputField: FC<NumberInputFieldProps> = ({ className, children, ...props }) => {
15+
export const NumberInputField: FC<NumberInputFieldProps> = ({
16+
className,
17+
children,
18+
value,
19+
onChange,
20+
...props
21+
}) => {
22+
const values = value.slice(1) as (unknown | ExpressionSpecification)[];
1323
return (
14-
<div {...props} className={cn('', className)}>
24+
<div
25+
{...props}
26+
className={cn('flex flex-row items-center gap-2 rounded bg-black/5 py-0.5 px-0.5', className)}
27+
>
28+
<div className={'flex flex-row py-0.5 px-0.5'}>typecheck number</div>
29+
{values.map((arg, index) => (
30+
<Fragment key={'number' + index + arg}>
31+
{isExpression(arg) ? (
32+
<ExpressionInputField value={arg} onChange={onChange} />
33+
) : (
34+
<div className={'flex flex-row py-0.5 px-0.5'}>{JSON.stringify(arg)}</div>
35+
)}
36+
{index < values.length - 1 && <div className={'flex flex-row py-0.5 px-0.5'}>OR</div>}
37+
</Fragment>
38+
))}
1539
{children}
1640
</div>
1741
);

‎src/components/common/FilterInputField/expressions/types/ObjectInputField/ObjectInputField.tsx‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,41 @@
11
import type { ComponentProps, FC } from 'react';
2+
import { Fragment } from 'react';
23

34
import type { ExpressionSpecification } from '@maplibre/maplibre-gl-style-spec';
45

6+
import { ExpressionInputField } from '~/components/common/FilterInputField/expressions';
7+
import { isExpression } from '~/components/common/FilterInputField/expressions/utils/isExpression.ts';
58
import { cn } from '~/utils/tailwindUtil';
69

710
export type ObjectInputFieldProps = {
811
value: ['object', unknown | ExpressionSpecification, ...(unknown | ExpressionSpecification)[]];
912
onChange?: (value: ExpressionSpecification) => void;
1013
} & Omit<ComponentProps<'div'>, 'onChange'>;
1114

12-
export const ObjectInputField: FC<ObjectInputFieldProps> = ({ className, children, ...props }) => {
15+
export const ObjectInputField: FC<ObjectInputFieldProps> = ({
16+
className,
17+
children,
18+
value,
19+
onChange,
20+
...props
21+
}) => {
22+
const values = value.slice(1) as (unknown | ExpressionSpecification)[];
1323
return (
14-
<div {...props} className={cn('', className)}>
24+
<div
25+
{...props}
26+
className={cn('flex flex-row items-center gap-2 rounded bg-black/5 py-0.5 px-0.5', className)}
27+
>
28+
<div className={'flex flex-row py-0.5 px-0.5'}>typecheck object</div>
29+
{values.map((arg, index) => (
30+
<Fragment key={'number' + index + arg}>
31+
{isExpression(arg) ? (
32+
<ExpressionInputField value={arg} onChange={onChange} />
33+
) : (
34+
<div className={'flex flex-row py-0.5 px-0.5'}>{JSON.stringify(arg)}</div>
35+
)}
36+
{index < values.length - 1 && <div className={'flex flex-row py-0.5 px-0.5'}>OR</div>}
37+
</Fragment>
38+
))}
1539
{children}
1640
</div>
1741
);

0 commit comments

Comments
 (0)