refactor(web): remove typescript
This commit is contained in:
Ali BARIN
@@ -8,32 +8,18 @@ import Divider from '@mui/material/Divider';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import RemoveIcon from '@mui/icons-material/Remove';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import type { IField, IFieldText, IFieldDropdown } from 'types';
|
||||
|
||||
import useFormatMessage from 'hooks/useFormatMessage';
|
||||
import InputCreator from 'components/InputCreator';
|
||||
import { EditorContext } from 'contexts/Editor';
|
||||
|
||||
type TGroupItem = {
|
||||
key: string;
|
||||
operator: string;
|
||||
value: string;
|
||||
id: string;
|
||||
};
|
||||
|
||||
type TGroup = Record<'and', TGroupItem[]>;
|
||||
|
||||
const createGroupItem = (): TGroupItem => ({
|
||||
const createGroupItem = () => ({
|
||||
key: '',
|
||||
operator: operators[0].value,
|
||||
value: '',
|
||||
id: uuidv4(),
|
||||
});
|
||||
|
||||
const createGroup = (): TGroup => ({
|
||||
const createGroup = () => ({
|
||||
and: [createGroupItem()],
|
||||
});
|
||||
|
||||
const operators = [
|
||||
{
|
||||
label: 'Equal',
|
||||
@@ -68,10 +54,7 @@ const operators = [
|
||||
value: 'not_contains',
|
||||
},
|
||||
];
|
||||
|
||||
const createStringArgument = (
|
||||
argumentOptions: Omit<IFieldText, 'type' | 'required' | 'variables'>
|
||||
): IField => {
|
||||
const createStringArgument = (argumentOptions) => {
|
||||
return {
|
||||
...argumentOptions,
|
||||
type: 'string',
|
||||
@@ -79,69 +62,52 @@ const createStringArgument = (
|
||||
variables: true,
|
||||
};
|
||||
};
|
||||
|
||||
const createDropdownArgument = (
|
||||
argumentOptions: Omit<IFieldDropdown, 'type' | 'required'>
|
||||
): IField => {
|
||||
const createDropdownArgument = (argumentOptions) => {
|
||||
return {
|
||||
...argumentOptions,
|
||||
required: true,
|
||||
type: 'dropdown',
|
||||
};
|
||||
};
|
||||
|
||||
type FilterConditionsProps = {
|
||||
stepId: string;
|
||||
};
|
||||
|
||||
function FilterConditions(props: FilterConditionsProps): React.ReactElement {
|
||||
function FilterConditions(props) {
|
||||
const { stepId } = props;
|
||||
const formatMessage = useFormatMessage();
|
||||
const { control, setValue, getValues } = useFormContext();
|
||||
const groups = useWatch({ control, name: 'parameters.or' });
|
||||
const editorContext = React.useContext(EditorContext);
|
||||
|
||||
React.useEffect(function addInitialGroupWhenEmpty() {
|
||||
const groups = getValues('parameters.or');
|
||||
|
||||
if (!groups) {
|
||||
setValue('parameters.or', [createGroup()]);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const appendGroup = React.useCallback(() => {
|
||||
const values = getValues('parameters.or');
|
||||
|
||||
setValue('parameters.or', values.concat(createGroup()));
|
||||
}, []);
|
||||
|
||||
const appendGroupItem = React.useCallback((index) => {
|
||||
const group = getValues(`parameters.or.${index}.and`);
|
||||
setValue(`parameters.or.${index}.and`, group.concat(createGroupItem()));
|
||||
}, []);
|
||||
|
||||
const removeGroupItem = React.useCallback((groupIndex, groupItemIndex) => {
|
||||
const group: TGroupItem[] = getValues(`parameters.or.${groupIndex}.and`);
|
||||
|
||||
const group = getValues(`parameters.or.${groupIndex}.and`);
|
||||
if (group.length === 1) {
|
||||
const groups: TGroup[] = getValues('parameters.or');
|
||||
|
||||
const groups = getValues('parameters.or');
|
||||
setValue(
|
||||
'parameters.or',
|
||||
groups.filter((group, index) => index !== groupIndex)
|
||||
groups.filter((group, index) => index !== groupIndex),
|
||||
);
|
||||
} else {
|
||||
setValue(
|
||||
`parameters.or.${groupIndex}.and`,
|
||||
group.filter((groupItem, index) => index !== groupItemIndex)
|
||||
group.filter((groupItem, index) => index !== groupItemIndex),
|
||||
);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Stack sx={{ width: '100%' }} direction="column" spacing={2} mt={2}>
|
||||
{groups?.map((group: TGroup, groupIndex: number) => (
|
||||
{groups?.map((group, groupIndex) => (
|
||||
<>
|
||||
{groupIndex !== 0 && <Divider />}
|
||||
|
||||
@@ -152,81 +118,79 @@ function FilterConditions(props: FilterConditionsProps): React.ReactElement {
|
||||
formatMessage('filterConditions.orContinueIf')}
|
||||
</Typography>
|
||||
|
||||
{group?.and?.map(
|
||||
(groupItem: TGroupItem, groupItemIndex: number) => (
|
||||
<Stack direction="row" spacing={2} key={`item-${groupItem.id}`}>
|
||||
<Stack
|
||||
direction={{ xs: 'column', sm: 'row' }}
|
||||
spacing={{ xs: 2 }}
|
||||
sx={{ display: 'flex', flex: 1 }}
|
||||
{group?.and?.map((groupItem, groupItemIndex) => (
|
||||
<Stack direction="row" spacing={2} key={`item-${groupItem.id}`}>
|
||||
<Stack
|
||||
direction={{ xs: 'column', sm: 'row' }}
|
||||
spacing={{ xs: 2 }}
|
||||
sx={{ display: 'flex', flex: 1 }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flex: '1 0 0px',
|
||||
maxWidth: ['100%', '33%'],
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flex: '1 0 0px',
|
||||
maxWidth: ['100%', '33%'],
|
||||
}}
|
||||
>
|
||||
<InputCreator
|
||||
schema={createStringArgument({
|
||||
key: `or.${groupIndex}.and.${groupItemIndex}.key`,
|
||||
label: 'Choose field',
|
||||
})}
|
||||
namePrefix="parameters"
|
||||
stepId={stepId}
|
||||
disabled={editorContext.readOnly}
|
||||
/>
|
||||
</Box>
|
||||
<InputCreator
|
||||
schema={createStringArgument({
|
||||
key: `or.${groupIndex}.and.${groupItemIndex}.key`,
|
||||
label: 'Choose field',
|
||||
})}
|
||||
namePrefix="parameters"
|
||||
stepId={stepId}
|
||||
disabled={editorContext.readOnly}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flex: '1 0 0px',
|
||||
maxWidth: ['100%', '33%'],
|
||||
}}
|
||||
>
|
||||
<InputCreator
|
||||
schema={createDropdownArgument({
|
||||
key: `or.${groupIndex}.and.${groupItemIndex}.operator`,
|
||||
options: operators,
|
||||
label: 'Choose condition',
|
||||
})}
|
||||
namePrefix="parameters"
|
||||
stepId={stepId}
|
||||
disabled={editorContext.readOnly}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flex: '1 0 0px',
|
||||
maxWidth: ['100%', '33%'],
|
||||
}}
|
||||
>
|
||||
<InputCreator
|
||||
schema={createStringArgument({
|
||||
key: `or.${groupIndex}.and.${groupItemIndex}.value`,
|
||||
label: 'Enter text',
|
||||
})}
|
||||
namePrefix="parameters"
|
||||
stepId={stepId}
|
||||
disabled={editorContext.readOnly}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<IconButton
|
||||
size="small"
|
||||
edge="start"
|
||||
onClick={() => removeGroupItem(groupIndex, groupItemIndex)}
|
||||
sx={{ width: 61, height: 61 }}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flex: '1 0 0px',
|
||||
maxWidth: ['100%', '33%'],
|
||||
}}
|
||||
>
|
||||
<RemoveIcon />
|
||||
</IconButton>
|
||||
<InputCreator
|
||||
schema={createDropdownArgument({
|
||||
key: `or.${groupIndex}.and.${groupItemIndex}.operator`,
|
||||
options: operators,
|
||||
label: 'Choose condition',
|
||||
})}
|
||||
namePrefix="parameters"
|
||||
stepId={stepId}
|
||||
disabled={editorContext.readOnly}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flex: '1 0 0px',
|
||||
maxWidth: ['100%', '33%'],
|
||||
}}
|
||||
>
|
||||
<InputCreator
|
||||
schema={createStringArgument({
|
||||
key: `or.${groupIndex}.and.${groupItemIndex}.value`,
|
||||
label: 'Enter text',
|
||||
})}
|
||||
namePrefix="parameters"
|
||||
stepId={stepId}
|
||||
disabled={editorContext.readOnly}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
)
|
||||
)}
|
||||
|
||||
<IconButton
|
||||
size="small"
|
||||
edge="start"
|
||||
onClick={() => removeGroupItem(groupIndex, groupItemIndex)}
|
||||
sx={{ width: 61, height: 61 }}
|
||||
>
|
||||
<RemoveIcon />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
))}
|
||||
|
||||
<Stack spacing={1} direction="row">
|
||||
<IconButton
|
||||
@@ -255,5 +219,4 @@ function FilterConditions(props: FilterConditionsProps): React.ReactElement {
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default FilterConditions;
|
||||
@@ -4,24 +4,11 @@ import Collapse from '@mui/material/Collapse';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import Button from '@mui/material/Button';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import type { IStep, ISubstep } from 'types';
|
||||
|
||||
import { EditorContext } from 'contexts/Editor';
|
||||
import FlowSubstepTitle from 'components/FlowSubstepTitle';
|
||||
import InputCreator from 'components/InputCreator';
|
||||
import FilterConditions from './FilterConditions';
|
||||
|
||||
type FlowSubstepProps = {
|
||||
substep: ISubstep;
|
||||
expanded?: boolean;
|
||||
onExpand: () => void;
|
||||
onCollapse: () => void;
|
||||
onChange: ({ step }: { step: IStep }) => void;
|
||||
onSubmit: () => void;
|
||||
step: IStep;
|
||||
};
|
||||
|
||||
function FlowSubstep(props: FlowSubstepProps): React.ReactElement {
|
||||
function FlowSubstep(props) {
|
||||
const {
|
||||
substep,
|
||||
expanded = false,
|
||||
@@ -30,15 +17,11 @@ function FlowSubstep(props: FlowSubstepProps): React.ReactElement {
|
||||
onSubmit,
|
||||
step,
|
||||
} = props;
|
||||
|
||||
const { name, arguments: args } = substep;
|
||||
|
||||
const editorContext = React.useContext(EditorContext);
|
||||
const formContext = useFormContext();
|
||||
const validationStatus = formContext.formState.isValid;
|
||||
|
||||
const onToggle = expanded ? onCollapse : onExpand;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<FlowSubstepTitle
|
||||
@@ -90,5 +73,4 @@ function FlowSubstep(props: FlowSubstepProps): React.ReactElement {
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default FlowSubstep;
|
||||
Reference in New Issue
Block a user