Constants
3 weeks ago
Accordion.php
1 week ago
Alert.php
1 week ago
AttachmentCard.php
1 week ago
Avatar.php
1 week ago
Badge.php
1 week ago
BaseComponent.php
3 weeks ago
Button.php
1 week ago
ConfirmationModal.php
1 week ago
CourseFilter.php
1 week ago
DateFilter.php
1 week ago
DropdownFilter.php
1 week ago
EmptyState.php
1 week ago
FileUploader.php
1 week ago
InputField.php
1 week ago
Modal.php
1 week ago
Nav.php
1 week ago
Pagination.php
1 week ago
Popover.php
1 week ago
PreviewTrigger.php
1 week ago
Progress.php
1 week ago
SearchFilter.php
1 week ago
Sorting.php
1 week ago
StarRating.php
1 week ago
StarRatingInput.php
1 week ago
StatusSelect.php
1 week ago
SvgIcon.php
1 week ago
Table.php
1 week ago
Tabs.php
1 week ago
Tooltip.php
1 week ago
WPEditor.php
1 week ago
EmptyState.php
213 lines
| 1 | <?php |
| 2 | /** |
| 3 | * EmptyState Component Class. |
| 4 | * |
| 5 | * Responsible for rendering an empty state |
| 6 | * with an icon, title, and subtitle. |
| 7 | * |
| 8 | * @package Tutor\Components |
| 9 | * @author Themeum |
| 10 | * @link https://themeum.com |
| 11 | * @since 4.0.0 |
| 12 | */ |
| 13 | |
| 14 | namespace Tutor\Components; |
| 15 | |
| 16 | defined( 'ABSPATH' ) || exit; |
| 17 | |
| 18 | /** |
| 19 | * Class EmptyState |
| 20 | * |
| 21 | * Example Usage: |
| 22 | * ```php |
| 23 | * // Basic empty state (default icon and subtitle) |
| 24 | * EmptyState::make() |
| 25 | * ->title( 'No Courses Found' ) |
| 26 | * ->render(); |
| 27 | * |
| 28 | * // With title and subtitle |
| 29 | * EmptyState::make() |
| 30 | * ->title( 'No Data' ) |
| 31 | * ->subtitle( 'Please check back later.' ) |
| 32 | * ->render(); |
| 33 | * |
| 34 | * // With an image URL as icon |
| 35 | * EmptyState::make() |
| 36 | * ->title( 'No Announcements' ) |
| 37 | * ->subtitle( 'You have not posted any announcements yet.' ) |
| 38 | * ->icon_path( tutor()->url . 'assets/images/empty-announcements.svg' ) |
| 39 | * ->render(); |
| 40 | * |
| 41 | * // With raw SVG/HTML markup as icon |
| 42 | * EmptyState::make() |
| 43 | * ->title( 'No Results' ) |
| 44 | * ->icon( '<svg>...</svg>' ) |
| 45 | * ->render(); |
| 46 | * |
| 47 | * // With extra CSS class on the wrapper |
| 48 | * EmptyState::make() |
| 49 | * ->title( 'Nothing Here Yet' ) |
| 50 | * ->subtitle( 'Start by creating your first course.' ) |
| 51 | * ->attr( 'class', 'tutor-mt-10' ) |
| 52 | * ->render(); |
| 53 | * |
| 54 | * // Retrieve HTML without echoing |
| 55 | * $html = EmptyState::make()->title( 'No Reviews' )->get(); |
| 56 | * ``` |
| 57 | * |
| 58 | * @since 4.0.0 |
| 59 | */ |
| 60 | class EmptyState extends BaseComponent { |
| 61 | |
| 62 | /** |
| 63 | * Title of the empty state |
| 64 | * |
| 65 | * @var string |
| 66 | */ |
| 67 | protected $title; |
| 68 | |
| 69 | /** |
| 70 | * Subtitle of the empty state |
| 71 | * |
| 72 | * @var string |
| 73 | */ |
| 74 | protected $subtitle; |
| 75 | |
| 76 | /** |
| 77 | * Icon markup |
| 78 | * |
| 79 | * @var string |
| 80 | */ |
| 81 | protected $icon; |
| 82 | |
| 83 | /** |
| 84 | * Icon path (URL) |
| 85 | * |
| 86 | * @var string |
| 87 | */ |
| 88 | protected $icon_path; |
| 89 | |
| 90 | /** |
| 91 | * Set title |
| 92 | * |
| 93 | * @param string $title title. |
| 94 | * |
| 95 | * @return self |
| 96 | */ |
| 97 | public function title( string $title ): self { |
| 98 | $this->title = $title; |
| 99 | return $this; |
| 100 | } |
| 101 | |
| 102 | /** |
| 103 | * Set subtitle |
| 104 | * |
| 105 | * @param string $subtitle subtitle. |
| 106 | * |
| 107 | * @return self |
| 108 | */ |
| 109 | public function subtitle( string $subtitle ): self { |
| 110 | $this->subtitle = $subtitle; |
| 111 | return $this; |
| 112 | } |
| 113 | |
| 114 | /** |
| 115 | * Set icon |
| 116 | * |
| 117 | * @param string $icon icon markup. |
| 118 | * |
| 119 | * @return self |
| 120 | */ |
| 121 | public function icon( string $icon ): self { |
| 122 | $this->icon = $icon; |
| 123 | return $this; |
| 124 | } |
| 125 | |
| 126 | /** |
| 127 | * Set icon path |
| 128 | * |
| 129 | * @param string $icon_path icon path (URL). |
| 130 | * |
| 131 | * @return self |
| 132 | */ |
| 133 | public function icon_path( string $icon_path ): self { |
| 134 | $this->icon_path = $icon_path; |
| 135 | return $this; |
| 136 | } |
| 137 | |
| 138 | /** |
| 139 | * Get default icon |
| 140 | * |
| 141 | * @return string |
| 142 | */ |
| 143 | protected function get_default_icon(): string { |
| 144 | return '<svg width="89" height="86" viewBox="0 0 89 86" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 145 | <path d="M50.8334 48.816C51.5258 49.1741 52.2514 49.4829 53.0087 49.7371C62.2001 52.824 72.5341 46.7433 76.0896 36.1556C79.6451 25.5679 75.0761 14.4821 65.8842 11.3955C63.1648 10.4822 60.3456 10.3717 57.6315 10.9426C55.0115 7.08849 51.3044 4.1083 46.7526 2.57982C35.0997 -1.33339 22.1186 5.67704 16.895 18.3554C10.2225 17.854 3.88275 21.7159 1.73297 28.1177C-0.827724 35.7433 3.5265 44.0843 11.4582 46.7479C14.6647 47.8246 17.9652 47.8078 20.9285 46.9027C23.3301 49.5662 26.353 51.6257 29.8842 52.8113" stroke="#E9E9E9" stroke-width="1.1786" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2.36 2.36"/> |
| 146 | <path d="M60.1349 16.6914H32.6205C28.538 16.6914 25.2285 20.0009 25.2285 24.0833V60.2217C25.2285 64.3041 28.538 67.6136 32.6205 67.6136H60.1349C64.2173 67.6136 67.5268 64.3041 67.5268 60.2217V24.0833C67.5268 20.0009 64.2173 16.6914 60.1349 16.6914Z" fill="#E1E1E1"/> |
| 147 | <path d="M55.4506 66.3964L43.5171 83.4595C42.7192 84.5999 41.148 84.8779 40.0076 84.0804C38.8672 83.2825 38.5892 81.7113 39.3867 80.5709L51.3201 63.5078L55.4506 66.3964Z" fill="white" stroke="#9197A8" stroke-width="1.1786"/> |
| 148 | <path d="M49.7585 66.5389C54.7039 71.4843 62.7219 71.4843 67.6673 66.5389C72.6127 61.5936 72.6126 53.5755 67.6673 48.6302C62.7219 43.6848 54.7039 43.6848 49.7585 48.6302C44.8131 53.5755 44.8131 61.5936 49.7585 66.5389Z" fill="white" stroke="#9197A8" stroke-width="1.1786"/> |
| 149 | <path d="M50.3555 54.3836C51.0051 52.7155 52.3423 51.1135 54.2075 49.9789C56.0727 48.8446 58.1104 48.3945 59.8907 48.5855" stroke="#C3C6CB" stroke-linecap="round"/> |
| 150 | <rect x="31.9365" y="23.9062" width="26.8984" height="1.2" rx="0.6" fill="white"/> |
| 151 | <rect x="31.9365" y="26.5547" width="15.0088" height="1.2" rx="0.6" fill="white"/> |
| 152 | <rect x="47.7988" y="26.5547" width="8.68164" height="1.2" rx="0.6" fill="white"/> |
| 153 | <rect x="31.9365" y="34.7227" width="26.8984" height="1.2" rx="0.6" fill="white"/> |
| 154 | <rect x="31.9365" y="38.4766" width="15.0088" height="1.2" rx="0.6" fill="white"/> |
| 155 | </svg>'; |
| 156 | } |
| 157 | |
| 158 | /** |
| 159 | * Get component content |
| 160 | * |
| 161 | * @return string |
| 162 | */ |
| 163 | public function get(): string { |
| 164 | $title = $this->title ?? __( 'No Data Found.', 'tutor' ); |
| 165 | $subtitle = $this->subtitle; |
| 166 | |
| 167 | // Fallback to global empty state subtitle if not provided. |
| 168 | if ( empty( $subtitle ) ) { |
| 169 | $subtitle = tutor_utils()->get_list_empty_state_subtitle(); |
| 170 | } |
| 171 | |
| 172 | $icon = $this->icon; |
| 173 | |
| 174 | if ( ! empty( $this->icon_path ) ) { |
| 175 | $icon = '<img src="' . esc_url( $this->icon_path ) . '" alt="' . esc_attr( $title ) . '">'; |
| 176 | } |
| 177 | |
| 178 | if ( empty( $icon ) ) { |
| 179 | $icon = $this->get_default_icon(); |
| 180 | } |
| 181 | |
| 182 | $subtitle_html = ''; |
| 183 | if ( ! empty( $subtitle ) ) { |
| 184 | $subtitle_html = sprintf( |
| 185 | '<div class="tutor-tiny tutor-text-subdued tutor-mt-2 tutor-mb-0">%s</div>', |
| 186 | esc_html( $subtitle ) |
| 187 | ); |
| 188 | } |
| 189 | |
| 190 | // Merge custom classes. |
| 191 | $wrapper_classes = 'tutor-px-9 tutor-py-10 tutor-flex-center-col'; |
| 192 | if ( ! empty( $this->attributes['class'] ) ) { |
| 193 | $wrapper_classes .= ' ' . $this->attributes['class']; |
| 194 | unset( $this->attributes['class'] ); |
| 195 | } |
| 196 | $this->attributes['class'] = $wrapper_classes; |
| 197 | |
| 198 | $this->component_string = sprintf( |
| 199 | '<div %s> |
| 200 | %s |
| 201 | <div class="tutor-small tutor-text-subdued tutor-mt-4">%s</div> |
| 202 | %s |
| 203 | </div>', |
| 204 | $this->get_attributes_string(), |
| 205 | $icon, |
| 206 | esc_html( $title ), |
| 207 | $subtitle_html |
| 208 | ); |
| 209 | |
| 210 | return $this->component_string; |
| 211 | } |
| 212 | } |
| 213 |