Matterway
    Preparing search index...

    Function completion

    • Completion component for displaying completion status with optional icon, title, description, and status list.

      Parameters

      • props: UiCompletionProps

        Configuration object

        • title

          Main title text. Can be either a static string or a function that receives data and value, returning a string

        • description

          Description text below the title. Can be either a static string or a function that receives data and value, returning a string

        • icon

          Icon component to display. Can be either a static React node or a function that receives data and value, returning a React node

        • iconColor

          Custom color for the icon. Can be either a static string or a function that receives data and value, returning a string

        • statusList

          List of status items to display. Can be either a static array or a function that receives data and value, returning an array

        • titleAlign

          Text alignment for title ('left', 'center', or 'right'). Defaults to 'center'

        • descriptionAlign

          Text alignment for description ('left', 'center', or 'right'). Defaults to 'center'

        • className

          Additional CSS class name

        • style

          Custom styling

      Returns Element

      Basic usage with static title and description

      completion({
        title: 'Task Completed Successfully',
        description: 'All operations have been completed without errors.'
      });

      Usage with dynamic title depending on other fields

      completion({
        title: ({data}) => `Welcome back, ${data.userName}! Your task is complete.`,
        description: 'Thank you for using our service.'
      });

      Usage with custom icon and status list

      completion({
        title: 'Data Processing Complete',
        description: 'All files have been processed successfully.',
        icon: <IconCircleCheckFilled size={80} strokeWidth={1} />,
        statusList: [
          { value: 'success', label: 'Data validation completed' },
          { value: 'success', label: 'Files uploaded successfully' },
          { value: 'warning', label: 'Some optional fields were empty' }
        ]
      });

      Usage with dynamic icon depending on other fields

      completion({
        title: 'Task Complete',
        description: 'Your task has finished.',
        icon: ({data}) => {
          if (data.taskType === 'success') return <IconCircleCheck size={80} strokeWidth={1} />;
          if (data.taskType === 'warning') return <IconAlertTriangle size={80} strokeWidth={1} />;
          return <IconCircleCheckFilled size={80} strokeWidth={1} />;
        }
      });

      Usage with dynamic statusList depending on other fields

      completion({
        title: 'Operation Complete',
        description: 'Results are ready.',
        statusList: ({data}) => {
          const items = [];
          if (data.processedFiles > 0) {
            items.push({ value: 'success', label: `${data.processedFiles} files processed` });
          }
          if (data.errors > 0) {
            items.push({ value: 'error', label: `${data.errors} errors found` });
          }
          return items;
        }
      });

      Usage with custom text alignment

      completion({
        title: 'Task Completed',
        description: 'All operations finished successfully.',
        titleAlign: 'center',
        descriptionAlign: 'left'
      });

    Settings