@dartech/arsenal-ui 1.3.0 → 1.3.2

package/src/lib/Property/PropertyValueField/DateTimeValueField.tsx

@@ -1,58 +0,0 @@
-import TextField from '@mui/material/TextField';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
-
-import { format as dateFnsFormat, isValid } from 'date-fns';
-import { Controller, useFormContext } from 'react-hook-form';
-import { DATE_TIME_DEFAULT_FORMAT } from '../../../interfaces';
-
-type Props = {
-  name: string;
-  label?: string;
-  required?: boolean;
-  format?: string;
-};
-
-const DateTimeValueField = ({ name, label, required = false, format = DATE_TIME_DEFAULT_FORMAT }: Props) => {
-  const { control, setError, clearErrors } = useFormContext();
-
-  const onError = (err) => {
-    if (err) {
-      setError(name, { type: 'custom', message: 'Incorrect date format' });
-    } else {
-      clearErrors(name);
-    }
-  };
-
-  return (
-    <Controller
-      control={control}
-      name={name}
-      rules={{ required: required && 'Required field' }}
-      render={({ field: { ref, value, onChange }, fieldState: { error } }) => (
-        <DateTimePicker
-          ampm={false}
-          inputRef={ref}
-          label={label}
-          value={value || null}
-          inputFormat={format}
-          onError={onError}
-          onChange={(date) => {
-            onChange(isValid(date) ? dateFnsFormat(date, format) : date);
-          }}
-          renderInput={(props) => (
-            <TextField
-              {...props}
-              fullWidth
-              size="small"
-              variant="outlined"
-              error={!!error}
-              helperText={error?.message}
-            />
-          )}
-        />
-      )}
-    />
-  );
-};
-
-export default DateTimeValueField;

package/src/lib/Property/PropertyValueField/DateValueField.tsx

@@ -1,58 +0,0 @@
-import TextField from '@mui/material/TextField';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-
-import { format as dateFnsFormat, isValid } from 'date-fns';
-import { Controller, useFormContext } from 'react-hook-form';
-import { DATE_DEFAULT_FORMAT } from '../../../interfaces';
-
-type Props = {
-  name: string;
-  format: string;
-  label?: string;
-  required?: boolean;
-};
-
-const DateValueField = ({ name, label = '', required = false, format = DATE_DEFAULT_FORMAT }: Props) => {
-  const { control, setError, clearErrors } = useFormContext();
-
-  const onError = (err) => {
-    if (err) {
-      setError(name, { type: 'custom', message: 'Incorrect date format' });
-    } else {
-      clearErrors(name);
-    }
-  };
-
-  return (
-    <Controller
-      control={control}
-      name={name}
-      rules={{ required: required && 'Required field' }}
-      render={({ field: { ref, value, onChange }, fieldState: { error } }) => (
-        <DatePicker
-          mask=""
-          label={label}
-          inputRef={ref}
-          inputFormat={format}
-          value={value || null}
-          onError={onError}
-          onChange={(date) => {
-            onChange(isValid(date) ? dateFnsFormat(date, format) : date);
-          }}
-          renderInput={(props) => (
-            <TextField
-              {...props}
-              fullWidth
-              size="small"
-              variant="outlined"
-              error={!!error}
-              helperText={error?.message}
-            />
-          )}
-        />
-      )}
-    />
-  );
-};
-
-export default DateValueField;

package/src/lib/Property/PropertyValueField/JsonValueField.tsx

@@ -1,65 +0,0 @@
-import AceEditor from 'react-ace';
-import FormHelperText from '@mui/material/FormHelperText';
-import Typography from '@mui/material/Typography';
-import { Controller, useFormContext } from 'react-hook-form';
-
-import 'ace-builds/src-noconflict/ace';
-import 'ace-builds/src-noconflict/mode-json';
-
-type Props = {
-  name: string;
-  label?: string;
-  required?: boolean;
-};
-
-const JsonValueField = ({ name, label, required = false }: Props) => {
-  const { control, setError, clearErrors } = useFormContext();
-
-  return (
-    <>
-      <Typography>{label}</Typography>
-      <Controller
-        control={control}
-        name={name}
-        rules={{
-          required: required && 'Required field',
-        }}
-        render={({ field: { value, onChange }, fieldState: { error } }) => (
-          <>
-            <AceEditor
-              value={value && typeof value !== 'string' ? JSON.stringify(value, null, 2) : value}
-              onChange={(value) => {
-                if (!value) {
-                  onChange('');
-                  return null;
-                }
-                try {
-                  clearErrors(name);
-                  const val = JSON.parse(value);
-                  onChange(Array.isArray(val) ? '' : val);
-                } catch (e) {
-                  setError(name, { message: 'Invalid JSON' });
-                  onChange(value);
-                }
-              }}
-              mode="json"
-              width="100%"
-              height="200px"
-              fontSize="16"
-              setOptions={{
-                enableSnippets: false,
-                copyWithEmptySelection: true,
-                showLineNumbers: true,
-                tabSize: 2,
-                useWorker: false
-              }}
-            />
-            {error && <FormHelperText error>{error.message}</FormHelperText>}
-          </>
-        )}
-      />
-    </>
-  );
-};
-
-export default JsonValueField;

package/src/lib/Property/PropertyValueField/PropertyValueField.tsx

@@ -1,49 +0,0 @@
-import { useMemo } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
-import { MultiplePropertyFiller, PropertyFiller } from '../PropertyFiller';
-import { PropertyUnion } from '../../../interfaces';
-
-type Props = {
-  propertyFieldName: string;
-  name: string;
-  label?: string;
-  required?: boolean;
-};
-
-export const PropertyValueField = ({ propertyFieldName, name, label = '', required }: Props) => {
-  const { control } = useFormContext();
-
-  const propertyType = useWatch({ control, name: `${propertyFieldName}.propertyType` });
-  const isMultiple = useWatch({ control, name: `${propertyFieldName}.isMultiple` });
-  const format = useWatch({ control, name: `${propertyFieldName}.format` });
-  const restrictedValues = useWatch({ control, name: `${propertyFieldName}.restrictedValues` });
-  const properties = useWatch({ control, name: `${propertyFieldName}.properties` });
-  const isRequired = useWatch({ control, name: `${propertyFieldName}.isRequired` });
-
-  const fillerProperty: PropertyUnion = useMemo(() => {
-    const typeValue = typeof propertyType === 'string' ? propertyType : propertyType.value;
-    return {
-      name: label,
-      isRequired,
-      isMultiple,
-      format,
-      restrictedValues,
-      properties,
-      propertyType: typeValue,
-      defaultValue: null,
-      defaultValues: [],
-      sortOrder: 0,
-      isEnabled: true,
-      uiSettings: null,
-      validationNode: null,
-    };
-  }, [propertyType, format, restrictedValues, isMultiple, label, isRequired, properties]);
-
-  return isMultiple ? (
-    <MultiplePropertyFiller name={name} property={fillerProperty} title={label} required={required} />
-  ) : (
-    <PropertyFiller name={name} property={fillerProperty} title={label} required={required} />
-  );
-};
-
-export default PropertyValueField;

package/src/lib/Property/PropertyValueField/StringValueField.tsx

@@ -1,50 +0,0 @@
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import InputLabel from '@mui/material/InputLabel';
-import { ControlInput } from '../../Forms';
-
-import { useController, useFormContext, useWatch } from 'react-hook-form';
-
-type Props = {
-  name: string;
-  label?: string;
-  required?: boolean;
-  restrictedValues?: string[];
-};
-
-const StringValueField = ({ name, label, required, restrictedValues }: Props) => {
-  const { control } = useFormContext();
-  const {
-    field: { onChange, ref },
-    fieldState: { error },
-  } = useController({
-    control,
-    name,
-    rules: {
-      required:
-        required &&
-        (Array.isArray(restrictedValues) && restrictedValues.length
-          ? 'Please, select a value'
-          : 'Please, fill this field'),
-    },
-  });
-  const value = useWatch({ control, name });
-
-  return Array.isArray(restrictedValues) && restrictedValues.length ? (
-    <FormControl fullWidth size="small" variant="outlined" error={!!error}>
-      <InputLabel htmlFor="type-select">{label}</InputLabel>
-      <Select labelId="type-select" label={label} value={value || ''} onChange={onChange} ref={ref}>
-        {restrictedValues.map((restrictedValue) => (
-          <MenuItem key={restrictedValue} value={restrictedValue}>
-            {restrictedValue}
-          </MenuItem>
-        ))}
-      </Select>
-    </FormControl>
-  ) : (
-    <ControlInput hideErrorMessage required={required} control={control} name={name} label={label} />
-  );
-};
-
-export default StringValueField;

package/src/lib/Property/PropertyValueField/TimeValueField.tsx

@@ -1,67 +0,0 @@
-import TextField from '@mui/material/TextField';
-import { TimePicker } from '@mui/x-date-pickers/TimePicker';
-
-import { format as dateFnsFormat, isValid, parse } from 'date-fns';
-import { useEffect, useState } from 'react';
-import { useController, useFormContext } from 'react-hook-form';
-import { TIME_DEFAULT_FORMAT } from '../../../interfaces';
-
-type Props = {
-  name: string;
-  label?: string;
-  format?: string;
-  required?: boolean;
-};
-
-const TimeValueField = ({ name, label, format = TIME_DEFAULT_FORMAT, required = false }: Props) => {
-  const { control, setError, clearErrors } = useFormContext();
-  const {
-    field: { ref, onChange, value },
-    fieldState: { error },
-  } = useController({ control, name, rules: { required: required && 'Required field' } });
-
-  const [fieldValue, setFieldValue] = useState(null);
-
-  useEffect(() => {
-    if (value && format) {
-      let parsedValue = parse(value, format, new Date());
-
-      if (!isValid(parsedValue)) {
-        parsedValue = parse(value, 'HH:mm:ss.SSS', new Date());
-      }
-
-      setFieldValue(parsedValue);
-    }
-  }, [value, format]);
-
-  const handleChange = (date: Date) => {
-    setFieldValue(date);
-    onChange(isValid(date) ? dateFnsFormat(date, format) : date);
-  };
-
-  const onError = (err) => {
-    if (err) {
-      setError(name, { type: 'custom', message: 'Incorrect date format' });
-    } else {
-      clearErrors(name);
-    }
-  };
-
-  return (
-    <TimePicker
-      mask=""
-      inputRef={ref}
-      label={label}
-      ampm={false}
-      value={fieldValue}
-      inputFormat={format}
-      onError={onError}
-      onChange={handleChange}
-      renderInput={(props) => (
-        <TextField {...props} fullWidth size="small" variant="outlined" error={!!error} helperText={error?.message} />
-      )}
-    />
-  );
-};
-
-export default TimeValueField;

package/src/lib/Property/PropertyWidget/PropertyWidget.tsx

@@ -1,115 +0,0 @@
-import {
-  ControlDate,
-  ControlDateTime,
-  ControlInput,
-  ControlNumberInput,
-  ControlSwitch,
-  ControlTime,
-} from '../../Forms';
-import JsonEditor from '../PropertyFiller/JsonEditor';
-import StringValueField from '../PropertyValueField/StringValueField';
-import { DefinitionFiller } from '../../Definition';
-
-import { RefCallBack, useFormContext } from 'react-hook-form';
-
-import {
-  DateProperty,
-  DateTimeProperty,
-  EntityTypeProperty,
-  PropertiesArrayType,
-  PropertyType,
-  PropertyUnion,
-  StringProperty,
-  TimeProperty,
-} from '../../../interfaces';
-import { useMemo } from 'react';
-
-type Props = {
-  property: PropertyUnion;
-  name: string;
-  label?: string;
-  useExpression?: boolean;
-  required?: boolean;
-  inputRef: RefCallBack;
-};
-
-export const PropertyWidget = ({ property, name, label, useExpression, inputRef }: Props) => {
-  const { control } = useFormContext();
-  const propertyType = useMemo(
-    () => (typeof property.propertyType === 'string' ? property.propertyType : property['propertyType']['value']),
-    [property]
-  );
-
-  switch (propertyType) {
-    case PropertyType.BIG_DECIMAL:
-    case PropertyType.FLOAT:
-    case PropertyType.DOUBLE:
-      return <ControlNumberInput decimal required hideErrorMessage control={control} name={name} label={label} />;
-    case PropertyType.INTEGER:
-    case PropertyType.BIG_INTEGER:
-    case PropertyType.LONG:
-      return <ControlNumberInput required hideErrorMessage control={control} name={name} label={label} />;
-    case PropertyType.BOOLEAN:
-      return <ControlSwitch control={control} name={name} />;
-    case PropertyType.DATE:
-      return (
-        <ControlDate
-          required
-          hideErrorMessage
-          control={control}
-          name={name}
-          label={label}
-          format={(property as DateProperty).format}
-        />
-      );
-    case PropertyType.TIME:
-      return (
-        <ControlTime
-          required
-          hideErrorMessage
-          control={control}
-          name={name}
-          label={label}
-          format={(property as TimeProperty).format}
-        />
-      );
-    case PropertyType.DATE_TIME:
-      return (
-        <ControlDateTime
-          required
-          hideErrorMessage
-          control={control}
-          name={name}
-          label={label}
-          format={(property as DateTimeProperty).format}
-        />
-      );
-    case PropertyType.JSON:
-      return <JsonEditor validate name={name} inputRef={inputRef} />;
-    case PropertyType.STRING:
-      return (
-        <StringValueField
-          required
-          name={name}
-          label={label}
-          restrictedValues={(property as StringProperty).restrictedValues}
-        />
-      );
-    case PropertyType.ENTITY_REFERENCE:
-      return <ControlInput required hideErrorMessage name={name} label={label} control={control} />;
-    case PropertyType.ANY:
-      return <JsonEditor name={name} inputRef={inputRef} />;
-    case PropertyType.ENTITY:
-      return (
-        <DefinitionFiller
-          properties={(property as EntityTypeProperty).properties as PropertiesArrayType}
-          dataFieldName={name}
-          useExpression={useExpression}
-        />
-      );
-    default:
-      return <div>No widget</div>;
-  }
-};
-
-export default PropertyWidget;

package/src/lib/Property/UpsertProperty/CreatePropertiesList.tsx

@@ -1,148 +0,0 @@
-import Grid from '@mui/material/Unstable_Grid2';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-import Accordion from '@mui/material/Accordion';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import AccordionActions from '@mui/material/AccordionActions';
-import { ExpandMore } from '@mui/icons-material';
-import CreatePropertyFormFields from './CreatePropertyFormFields';
-
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { useController, useFormContext, useWatch } from 'react-hook-form';
-import { removeArrayItem } from '../../../utils/common';
-import { CustomPropertyFieldProps } from '../../../interfaces';
-
-type Props = {
-  parentFieldName?: string;
-  hideAddButton?: boolean;
-  focusOnIndex?: number;
-  required?: boolean;
-  entityDefinition?: boolean;
-  globalParameter?: boolean;
-  customPropertyFields?: CustomPropertyFieldProps[];
-};
-
-const defaultPropertyValues = {
-  key: '',
-  propertyType: null,
-  name: '',
-  defaultValue: '',
-  defaultValues: [],
-  isRequired: true,
-  isMultiple: false,
-  sortOrder: 0,
-  isEnabled: true,
-  executeValue: '',
-  uiSettings: '',
-};
-
-export const CreatePropertiesList = ({
-  parentFieldName,
-  hideAddButton,
-  focusOnIndex,
-  required,
-  entityDefinition = false,
-  globalParameter = false,
-  customPropertyFields = [],
-}: Props) => {
-  const fieldName = useMemo(
-    () => (parentFieldName ? `${parentFieldName}.properties` : `properties`),
-    [parentFieldName]
-  );
-
-  const { setValue, clearErrors, control } = useFormContext();
-  const {
-    fieldState: { error },
-  } = useController({
-    control,
-    name: fieldName,
-    rules: { required: required && 'Please, add properties' },
-  });
-  const properties = useWatch({ control, name: fieldName });
-
-  const refs = useRef([]);
-
-  useEffect(() => {
-    if (typeof focusOnIndex === 'number' && refs.current[focusOnIndex]) {
-      refs.current[focusOnIndex].scrollIntoView({
-        behavior: 'smooth',
-        block: 'start',
-      });
-    }
-  }, [focusOnIndex, refs]);
-
-  const handleAddParameter = useCallback(() => {
-    if (properties) {
-      setValue(`${fieldName}.${properties.length}`, defaultPropertyValues);
-    } else {
-      setValue(fieldName, [defaultPropertyValues]);
-    }
-    clearErrors(fieldName);
-  }, [properties, fieldName, clearErrors, setValue]);
-
-  const handleRemoveParameter = useCallback(
-    (index) => {
-      setValue(`${fieldName}`, removeArrayItem(properties, index));
-    },
-    [properties, fieldName, setValue]
-  );
-
-  return (
-    <>
-      {error && error.message && (
-        <Grid sm={12}>
-          <Typography color="secondary">{error.message}</Typography>
-        </Grid>
-      )}
-      {properties &&
-        properties.map((property, index) => (
-          <Grid key={index} sm={12} ref={(ref) => (refs.current[index] = ref)}>
-            <Accordion defaultExpanded elevation={3}>
-              <AccordionSummary expandIcon={<ExpandMore />}>
-                <Typography
-                  color={error && error[index] ? 'secondary' : 'initial'}
-                  style={{ wordBreak: 'break-word' }}
-                >
-                  {property.name || `Property ${index + 1}`}
-                </Typography>
-              </AccordionSummary>
-              <AccordionDetails>
-                <CreatePropertyFormFields
-                  propertyFieldName={`${fieldName}.${index}`}
-                  entityDefinition={entityDefinition}
-                  globalParameter={globalParameter}
-                  customPropertyFields={customPropertyFields}
-                />
-              </AccordionDetails>
-              <AccordionActions>
-                <Button
-                  variant="contained"
-                  size="small"
-                  color="secondary"
-                  onClick={() => handleRemoveParameter(index)}
-                >
-                  Remove
-                </Button>
-              </AccordionActions>
-            </Accordion>
-          </Grid>
-        ))}
-
-      {!hideAddButton && (
-        <Grid xs={12}>
-          <Button
-            variant="contained"
-            size="small"
-            color="primary"
-            onClick={handleAddParameter}
-          >
-            Add property
-          </Button>
-        </Grid>
-      )}
-    </>
-  );
-};
-
-export default CreatePropertiesList;