Skip to content

Commit

Permalink
chore: Update Tabs component to use ReactElement type for Component p…
Browse files Browse the repository at this point in the history 
…rop and update in code documentation
  • Loading branch information
@aeltorio
aeltorio committed Jun 30, 2024
1 parent 7a2eb76 commit 5b41c9a
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 41 deletions.
47 changes: 30 additions & 17 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* Provided under the MIT License. See License file for details.
*/
/* eslint-disable jsx-a11y/label-has-associated-control */
import React, { useState, useEffect, useRef, useContext, useReducer, ReactElement } from 'react'
import React, { useState, useEffect, useRef, useContext, useReducer, ReactElement, LazyExoticComponent } from 'react'
import Dropdown from 'react-bootstrap/Dropdown'
import { DotType, CornerSquareType, CornerDotType, ShapeType, ErrorCorrectionLevel } from '@liquid-js/qr-code-styling'
import { AppContext } from './Context'
Expand All @@ -24,11 +24,12 @@ import EventForm from './Components/Forms/Event'
import { adWebsiteUrl, basicOptions, defaultBrand, embeddedLogos, initialOptions } from './configuration'

type Tab = {
/** The label of the tab. */
label: 'URL' | 'Text' | 'E-mail' | 'VCard' | 'Place' | 'WiFi' | 'SMS' | 'Phone' | 'Event'
Component: () => ReactElement
}

// Active tabs
/** Active tabs */
const tabs: Tab[] = [
{
label: 'URL',
Expand Down Expand Up @@ -69,18 +70,30 @@ const tabs: Tab[] = [
]

export interface Options {
shape?: ShapeType
size?: number
removeBrand?: boolean
image?: string
imageMargin?: number
mainShape?: DotType
shapeColor?: string
squareShape?: CornerSquareType
squareColor?: string
cornersDotShape?: CornerDotType
cornersDotColor?: string
errorCorrectionLevel?: ErrorCorrectionLevel
/** The shape of the QR code (square or circle) */
shape?: ShapeType;
/** The size of the QR code for exporting */
size?: number;
/** If true, there is no logo in the center */
removeBrand?: boolean;
/** The logo to be placed in the center (see embeddedLogos for the available options) */
image?: string;
/** The margin around the logo */
imageMargin?: number;
/** The shape of the main dots (dot, randomDot, rounded, extraRounded, verticalLine, horizontalLine, classy, classyRounded, square, smallSquare, diamond) */
mainShape?: DotType;
/** The color of the main dots */
shapeColor?: string;
/** The shape of the 3 corner zones (dot, square, heart, extraRounded, classy, outpoint, inpoint) */
squareShape?: CornerSquareType;
/** The color of the 3 corner zones */
squareColor?: string;
/** The shape of the dots in the 3 corner zones (dot, square, heart, extraRounded, classy, outpoint, inpoint) */
cornersDotShape?: CornerDotType;
/** The color of the dots in the 3 corner zones */
cornersDotColor?: string;
/** The error correction level (L, M, Q, H) */
errorCorrectionLevel?: ErrorCorrectionLevel;
}


Expand Down Expand Up @@ -140,7 +153,7 @@ function App(): ReactElement {
* @param {string} path - The path of the internal logo image.
* @return {() => void} A function that sets the options with the new internal logo image path.
*/
const handleInternalLogo = (path: string) => () => {
const handleInternalLogo = (path: string): () => void => () => {
setOptions((prev) => ({
...prev,
image: path
Expand Down Expand Up @@ -421,7 +434,7 @@ function App(): ReactElement {
</a>
.
</p>
<Tabs className='mt-5' tabs={tabs} type='pills' />
<Tabs className='mt-5' tabs={tabs as any} type='pills' />
</div>
</div>
</div>
Expand Down Expand Up @@ -627,7 +640,7 @@ function App(): ReactElement {
</Dropdown.Toggle>
<Dropdown.Menu>
{embeddedLogos.map((logo) => (
<Dropdown.Item onClick={handleInternalLogo(logo.path)}>
<Dropdown.Item key={logo.path} onClick={handleInternalLogo(logo.path)}>
<img
src={logo.path}
width='30'
Expand Down
2 changes: 1 addition & 1 deletion src/Components/Tabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ declare type TabsProps = {
className?: string
tabs: {
label: string
Component: (T: { index: number }) => JSX.Element
Component: (T: { index: number }) => ReactElement
}[]
orientation?: 'horizontal' | 'vertical'
type?: 'tabs' | 'pills'
Expand Down
50 changes: 27 additions & 23 deletions src/configuration.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,22 @@ import { CornerDotType, CornerSquareType, DotType, ErrorCorrectionLevel, ShapeTy
import { Options } from "./App";

export const adWebsiteUrl = {
// The URL of the website (used in the footer and the default QR code data)
/** The URL of the website (used in the footer and the default QR code data) */
url: 'https://lesailesdumontblanc.com',
// The name of the website (used in the footer)
/** The name of the website (used in the footer) */
name: 'Les Ailes du Mont-Blanc',
// The full name of the website (used in the main paragraph)
/** The full name of the website (used in the main paragraph) */
longName: 'Les Ailes du Mont-Blanc Paragliding School',
// The short name of the website (used in the header)
/** The short name of the website (used in the header) */
shortName: 'ADMB',
// The logo of the website (used in the header)
/** The logo of the website (used in the header) */
headerLogo: '/admb-white.svg'
}

// All embedded logos
// See public directory for the images
/**
* All embedded logos.
* See public directory for the images.
*/
export const embeddedLogos = [
{ path: '/admb.svg', label: 'Mini Admb light blue' },
{ path: '/admb-navy.svg', label: 'Mini Admb navy blue' },
Expand All @@ -33,38 +35,38 @@ export const embeddedLogos = [
{ path: '/scanme.svg', label: 'Scan me' }
];

// The default logo
/** The default logo */
export const defaultBrand = '/admb.svg';

// The default QR code customisation options
/** The default QR code customisation options */
export const initialOptions: Options = {
// the shape of the QR code (square or circle)
/** The shape of the QR code (square or circle) */
shape: ShapeType.square,
// the size of the QR code for exporting
/** The size of the QR code for exporting */
size: 1000,
// if true there is no logo in the center
/** If true, there is no logo in the center */
removeBrand: false,
// the logo to be placed in the center (see embeddedLogos for the available options)
/** The logo to be placed in the center (see embeddedLogos for the available options) */
image: defaultBrand,
// the margin around the logo
/** The margin around the logo */
imageMargin: 10,
// the shape of the main dots ( dot, randomDot, rounded, extraRounded, verticalLine, horizontalLine, classy, classyRounded, square, smallSquare, diamond)
/** The shape of the main dots (dot, randomDot, rounded, extraRounded, verticalLine, horizontalLine, classy, classyRounded, square, smallSquare, diamond) */
mainShape: DotType.dot,
// the color of the main dots
/** The color of the main dots */
shapeColor: '#1E2470',
// the shape of the 3 corner zones (dot, square, heart, extraRounded, classy, outpoint, inpoint)
/** The shape of the 3 corner zones (dot, square, heart, extraRounded, classy, outpoint, inpoint) */
squareShape: CornerSquareType.extraRounded,
// the color of the 3 corner zones
/** The color of the 3 corner zones */
squareColor: '#008ADC',
// the shape of the dots in the 3 corner zones (dot, square, heart, extraRounded, classy, outpoint, inpoint)
/** The shape of the dots in the 3 corner zones (dot, square, heart, extraRounded, classy, outpoint, inpoint) */
cornersDotShape: CornerDotType.dot,
// the color of the dots in the 3 corner zones
/** The color of the dots in the 3 corner zones */
cornersDotColor: '#D90012',
// the error correction level (L, M, Q, H)
/** The error correction level (L, M, Q, H) */
errorCorrectionLevel: ErrorCorrectionLevel.H
}

// The basic QR code customisation options (here is a black and white QR code with a square shape)
/** The basic QR code customisation options (here is a black and white QR code with a square shape) */
export const basicOptions: Options = {
shape: ShapeType.square,
size: 1000,
Expand All @@ -80,5 +82,7 @@ export const basicOptions: Options = {
errorCorrectionLevel: ErrorCorrectionLevel.H
}

// The year the project was created (used in the footer, if the current year is different from the creation year, the years are displayed as a range)
/** The year the project was created
* (used in the footer, if the current year is different from the creation year, the years are displayed as a range)
*/
export const creationYear = 2024;

0 comments on commit 5b41c9a

Please sign in to comment.