Release/v169

.eslintrc.js

@@ -26,6 +26,7 @@ module.exports = {
     plugins: ['no-for-of-loops', 'no-function-declare-after-return', 'react', 'react-hooks', 'prettier'],
     rules: {
         // ...
+        // 'react/jsx-curly-brace-presence': ['error', { props: 'never', children: 'never' }],
         'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
         'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
         'react/react-in-jsx-scope': 'off',

react/assets/forus-platform/scss/_common/includes/common.scss

@@ -150,10 +150,6 @@ img {
     transition: color 0.3s;
 }
 
-.transition-background {
-    transition: background-color 0.3s;
-}
-
 .text-black {
     color: #000000;
 }
@@ -1579,4 +1575,4 @@ img {
             }
         }
     }
-}
+}

react/assets/forus-webshop/scss/includes/blocks/block-fund-request.scss

@@ -96,14 +96,8 @@
                 }
             }
 
-            .label {
-                &:not(:last-child):not(:last-of-type) {
-                    margin: 0;
-                }
-
-                .label-text {
-                    display: inline-block;
-                }
+            .label:not(:last-child):not(:last-of-type) {
+                margin: 0;
             }
 
             &:last-child {

react/assets/forus-webshop/scss/includes/components/_label.scss

@@ -36,14 +36,6 @@
         }
     }
 
-    .label-close {
-        color: #fff;
-        float: left;
-        font-size: 14px;
-        margin: 0 2.5px 0 -2.5px;
-        cursor: pointer;
-    }
-
     &.label-success {
         color: var(--label-success-color);
         background: var(--label-success-background);
@@ -109,4 +101,4 @@
             border-radius: calc(var(--border-radius) / 2);
         }
     }
-}
+}

react/src/dashboard/components/elements/forms/controls/MultiSelectControl.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { uniq, uniqueId } from 'lodash';
 import SelectControl from '../../select-control/SelectControl';
-import Label from '../../image_cropper/Label';
+import Label from '../../label/Label';
 
 export default function MultiSelectControl<T = number>({
     id = uniqueId('multiselect_'),
@@ -70,9 +70,13 @@ export default function MultiSelectControl<T = number>({
                     <label className="form-label">&nbsp;</label>
 
                     {value?.map((id) => (
-                        <Label type="primary" key={id.toString()}>
+                        <Label
+                            type="primary"
+                            key={id.toString()}
+                            icon="close"
+                            iconPosition="close"
+                            iconOnClick={() => removeItem(id)}>
                             {optionsById?.[id.toString()] || ''}
-                            <div className="mdi mdi-close label-close" onClick={() => removeItem(id)} />
                         </Label>
                     ))}
                 </div>

react/src/dashboard/components/elements/image_cropper/ImageCropper.tsx

@@ -72,12 +72,12 @@ export default function ImageCropper({
                     'cover',
                 ).toBlob(
                     (blob) => resolve({ ...item, blob, data: blob ? createObjectURL(blob) : null }),
-                    file.type,
+                    'image/jpeg',
                     quality,
                 );
             });
         },
-        [file.type, img, quality],
+        [img, quality],
     );
 
     const onComplete = useCallback(

react/src/dashboard/components/elements/label/Label.tsx

@@ -0,0 +1,62 @@
+import classNames from 'classnames';
+import React, { ReactNode } from 'react';
+
+export type LabelType =
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'danger-light'
+    | 'default'
+    | 'text'
+    | 'primary'
+    | 'primary-light';
+
+export default function Label({
+    children,
+    type,
+    className,
+    dusk,
+    icon,
+    iconPosition = 'start',
+    iconOnClick,
+    nowrap,
+}: {
+    children?: ReactNode | ReactNode[];
+    type?: LabelType;
+    className?: string;
+    dusk?: string;
+    icon?: string;
+    iconPosition?: 'start' | 'end' | 'close';
+    iconOnClick?: React.MouseEventHandler<HTMLElement>;
+    nowrap?: boolean;
+}) {
+    const iconClassName = classNames(
+        iconPosition === 'close' ? 'label-close' : iconPosition === 'end' ? 'icon-end' : 'icon-start',
+    );
+
+    const iconElement = icon ? (
+        <em className={classNames('mdi', `mdi-${icon}`, iconClassName)} onClick={iconOnClick} />
+    ) : null;
+
+    return (
+        <div
+            data-dusk={dusk}
+            className={classNames(
+                'label',
+                type === 'success' && 'label-success',
+                type === 'warning' && 'label-warning',
+                type === 'danger' && 'label-danger',
+                type === 'danger-light' && 'label-danger-light',
+                type === 'default' && 'label-default',
+                type === 'text' && 'label-text',
+                type === 'primary' && 'label-primary',
+                type === 'primary-light' && 'label-primary-light',
+                nowrap && 'nowrap',
+                className,
+            )}>
+            {iconPosition === 'start' && iconElement}
+            {children}
+            {iconPosition !== 'start' && iconElement}
+        </div>
+    );
+}

react/src/dashboard/components/elements/photo-selector/PhotoSelector.tsx

@@ -4,6 +4,8 @@ import { uniqueId } from 'lodash';
 import useOpenModal from '../../../hooks/useOpenModal';
 import useAssetUrl from '../../../hooks/useAssetUrl';
 import useTranslate from '../../../hooks/useTranslate';
+import usePushDanger from '../../../hooks/usePushDanger';
+import useFileTypeValidation from '../../../services/helpers/useFileTypeValidation';
 
 export default function PhotoSelector({
     id,
@@ -36,17 +38,31 @@ export default function PhotoSelector({
 
     const assetUrl = useAssetUrl();
     const openModal = useOpenModal();
+    const pushDanger = usePushDanger();
+    const fileTypeIsValid = useFileTypeValidation();
+
+    const [acceptedFiles] = useState(['.png', '.jpg', '.jpeg', '.svg', '.webp', '.gif', '.bmp']);
+    const acceptedFilesLabel = acceptedFiles.map((item) => item.toUpperCase()).join(', ');
 
     const onPhotoChange = useCallback(
         (e: ChangeEvent<HTMLInputElement>) => {
             const file = e.target.files[0];
             e.target.value = null;
 
+            if (!file) {
+                return;
+            }
+
+            if (!fileTypeIsValid(file, acceptedFiles)) {
+                return pushDanger(`Toegestaande formaten: ${acceptedFilesLabel}`);
+            }
+
             openModal((modal) => (
                 <ModalPhotoUploader
                     type={type}
                     file={file}
                     modal={modal}
+                    acceptedFiles={acceptedFiles}
                     onSubmit={(file, presets) => {
                         const thumbnail = presets.find((preset) => preset.key == 'thumbnail');
 
@@ -56,7 +72,7 @@ export default function PhotoSelector({
                 />
             ));
         },
-        [openModal, selectPhoto, type],
+        [acceptedFiles, acceptedFilesLabel, fileTypeIsValid, openModal, pushDanger, selectPhoto, type],
     );
 
     useEffect(() => {
@@ -70,7 +86,13 @@ export default function PhotoSelector({
                     <img src={thumbnailValue || assetUrl('/assets/img/placeholders/image-thumbnail.png')} alt="" />
                 </label>
                 <div className="photo-details">
-                    <input type="file" hidden={true} accept={'image/*'} ref={inputRef} onChange={onPhotoChange} />
+                    <input
+                        type="file"
+                        hidden={true}
+                        accept={acceptedFiles.join(',')}
+                        ref={inputRef}
+                        onChange={onPhotoChange}
+                    />
                     <div className="photo-label">{label || translate('photo_selector.labels.image')}</div>
                     {description && <div className="photo-description">{description}</div>}
 
@@ -92,7 +114,13 @@ export default function PhotoSelector({
         return (
             <div className="block block-photo-selector">
                 <label htmlFor={id ? id : `photo_selector_${selectorId}`} className="photo-img">
-                    <input type="file" hidden={true} accept={'image/*'} ref={inputRef} onChange={onPhotoChange} />
+                    <input
+                        type="file"
+                        hidden={true}
+                        accept={acceptedFiles.join(',')}
+                        ref={inputRef}
+                        onChange={onPhotoChange}
+                    />
                     <img src={thumbnailValue || assetUrl('/assets/img/placeholders/photo-selector.svg')} alt="" />
                 </label>
                 <div className="photo-details">
@@ -125,7 +153,13 @@ export default function PhotoSelector({
                 <label
                     htmlFor={id ? id : `photo_selector_${selectorId}`}
                     className="photo-selector-notifications-media">
-                    <input type="file" hidden={true} accept={'image/*'} ref={inputRef} onChange={onPhotoChange} />
+                    <input
+                        type="file"
+                        hidden={true}
+                        accept={acceptedFiles.join(',')}
+                        ref={inputRef}
+                        onChange={onPhotoChange}
+                    />
                     <img
                         src={
                             thumbnailValue ||
@@ -140,7 +174,7 @@ export default function PhotoSelector({
                     <div className="photo-selector-notifications-hint">
                         De afbeelding dient vierkant te zijn met een afmeting van bijvoorbeeld 400x400px.
                         <br />
-                        Toegestaande formaten: JPG, PNG
+                        Toegestaande formaten: {acceptedFilesLabel}
                     </div>
                     <div className="button-group">
                         <button

react/src/dashboard/components/elements/photo-selector/PhotoSelectorBanner.tsx

@@ -15,6 +15,8 @@ import StateNavLink from '../../../modules/state_router/StateNavLink';
 import Implementation from '../../../props/models/Implementation';
 import Organization from '../../../props/models/Organization';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
+import useFileTypeValidation from '../../../services/helpers/useFileTypeValidation';
+import usePushDanger from '../../../hooks/usePushDanger';
 
 export default function PhotoSelectorBanner({
     disabled,
@@ -49,6 +51,10 @@ export default function PhotoSelectorBanner({
 
     const assetUrl = useAssetUrl();
     const openModal = useOpenModal();
+    const pushDanger = usePushDanger();
+    const fileTypeIsValid = useFileTypeValidation();
+
+    const [acceptedFiles] = useState(['.png', '.jpg', '.jpeg', '.svg', '.webp', '.gif', '.bmp']);
     const [activeDropdown, setActiveDropdown] = useState<'style' | 'button' | 'color' | 'background' | 'overlay'>(null);
     const [descriptionPreview, setDescriptionPreview] = useState<string>(null);
 
@@ -78,12 +84,23 @@ export default function PhotoSelectorBanner({
             const file = e.target.files[0];
             e.target.value = null;
 
+            if (!file) {
+                return;
+            }
+
+            if (!fileTypeIsValid(file, acceptedFiles)) {
+                return pushDanger(
+                    `Toegestaande formaten: ${acceptedFiles.map((item) => item.toUpperCase()).join(', ')}`,
+                );
+            }
+
             openModal((modal) => (
                 <ModalPhotoUploader
                     type={'implementation_banner'}
                     file={file}
                     modal={modal}
                     initialCropWidth={100}
+                    acceptedFiles={acceptedFiles}
                     onSubmit={(file, presets) => {
                         const thumbnail = presets.find((preset) => preset.key == 'final');
 
@@ -93,7 +110,7 @@ export default function PhotoSelectorBanner({
                 />
             ));
         },
-        [openModal, selectPhoto],
+        [acceptedFiles, fileTypeIsValid, openModal, pushDanger, selectPhoto],
     );
 
     useEffect(() => {
@@ -113,7 +130,7 @@ export default function PhotoSelectorBanner({
 
     return (
         <div className="block block-banner-editor">
-            <input type="file" hidden={true} accept={'image/*'} ref={inputRef} onChange={onPhotoChange} />
+            <input type="file" hidden={true} accept={acceptedFiles.join(',')} ref={inputRef} onChange={onPhotoChange} />
 
             <div
                 className={classNames(

react/src/dashboard/components/elements/resource-states/FundFormStateLabels.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import TableEmptyValue from '../table-empty-value/TableEmptyValue';
 import FundForm from '../../../props/models/FundForm';
-import Label from '../image_cropper/Label';
+import Label from '../label/Label';
 
 export default function FundFormStateLabels({ fundForm }: { fundForm: FundForm }) {
     if (fundForm.state == 'active') {
-        return <Label type={'success'}>{fundForm.state_locale}</Label>;
+        return <Label type="success">{fundForm.state_locale}</Label>;
     }
 
     if (fundForm.state == 'archived') {
-        return <Label type={'default'}>{fundForm.state_locale}</Label>;
+        return <Label type="default">{fundForm.state_locale}</Label>;
     }
 
     return <TableEmptyValue />;