Function completion

  • completion(props): Element

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

    Parameters

    • props: UiCompletionProps

      Configuration object

    Returns Element

    A JSX element representing the completion component

    Example

    Basic usage with static title and description

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

    Example

    Usage with dynamic title from central state

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

    Example

    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' }
      ]
    });

    Example

    Usage with dynamic icon based on state

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

    Example

    Usage with dynamic statusList based on state

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

    Example

    Usage with custom text alignment

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

Settings