From e540a40f8663d69669c62c0467e34c3ddf542e7c Mon Sep 17 00:00:00 2001 From: timshaww Date: Tue, 23 Apr 2024 08:54:53 -0400 Subject: [PATCH 1/3] feat: customizable border radius, margin, font --- src/Character/index.tsx | 14 +++++++++++--- src/Character/styles.module.scss | 4 ++++ src/SplitFlapDisplay/index.tsx | 14 ++++++++++++++ src/SplitFlapDisplay/styles.module.scss | 6 ++++++ src/demo/index.tsx | 3 +++ 5 files changed, 38 insertions(+), 3 deletions(-) diff --git a/src/Character/index.tsx b/src/Character/index.tsx index df64d28..da66b69 100644 --- a/src/Character/index.tsx +++ b/src/Character/index.tsx @@ -2,14 +2,14 @@ import React, { useEffect, useState } from 'react'; import Panel, { FlipPanel } from '../Panel'; import defaultSound from '../assets/flip.mp3'; -// @ts-expect-error the minified file is not in the type declarations -import { Howl } from 'howler/dist/howler.min.js'; import * as css from './styles.module.scss'; interface Props { background: string; borderWidth: string; + borderRadius: string; + margin: string; characterWidth: string | undefined; prevValue: string; step: number; @@ -22,10 +22,12 @@ interface StyleProps extends React.HTMLProps { background: string; borderWidth: string; characterWidth: string | undefined; + borderRadius?: string; + margin?: string; } function Character(props: StyleProps) { - const { children, background, borderWidth, characterWidth, ...rest } = props; + const { children, background, borderWidth, characterWidth, borderRadius, margin, ...rest } = props; return (
{children} @@ -44,6 +48,8 @@ function Character(props: StyleProps) { export default function CharacterComponent({ background, borderWidth, + borderRadius, + margin, characterWidth, prevValue, step, @@ -101,6 +107,8 @@ export default function CharacterComponent({ background={background} borderWidth={borderWidth} characterWidth={characterWidth} + borderRadius={borderRadius} + margin={margin} > diff --git a/src/Character/styles.module.scss b/src/Character/styles.module.scss index 0c9bc98..518995b 100644 --- a/src/Character/styles.module.scss +++ b/src/Character/styles.module.scss @@ -2,6 +2,8 @@ --background: #000; --character-width: '1rem'; --border-width: '1px'; + --border-radius: '10px'; + --margin: '10px'; background: var(--background); display: flex; @@ -9,6 +11,8 @@ width: var(--character-width); padding: 0.5em; position: relative; + border-radius: var(--border-radius); + margin-right: var(--margin); &:after { content: ' '; diff --git a/src/SplitFlapDisplay/index.tsx b/src/SplitFlapDisplay/index.tsx index 6fce361..f2f5a04 100644 --- a/src/SplitFlapDisplay/index.tsx +++ b/src/SplitFlapDisplay/index.tsx @@ -8,12 +8,15 @@ import * as css from './styles.module.scss'; export interface SplitFlapDisplayProps extends React.HTMLProps { background?: string; borderColor?: string; + borderRadius?: string; // New property for border radius borderWidth?: string; characterSet: string[]; characterWidth?: string; + fontFamily?: string; // New property for font family fontSize?: string; minLength?: number; padDirection?: string; + margin?: string; // New property for padding step?: number; textColor?: string; value: string; @@ -23,12 +26,15 @@ export interface SplitFlapDisplayProps extends React.HTMLProps { const defaultProps = { background: '#000000', borderColor: '#dddddd', + borderRadius: '10px', // Default border radius borderWidth: '1px', characterSet: NUMERIC, characterWidth: '1rem', + fontFamily: 'Arial, sans-serif', // Default font family fontSize: '1rem', minLength: 5, padDirection: 'left', + margin: '5px', // Default padding step: 200, textColor: '#dddddd', value: '94609', @@ -51,12 +57,15 @@ export default function SplitFlapDisplay({ className, background = defaultProps.background, borderColor = defaultProps.borderColor, + borderRadius = defaultProps.borderRadius, // Use border radius from props borderWidth = defaultProps.borderWidth, characterSet = defaultProps.characterSet, characterWidth = defaultProps.characterWidth, + fontFamily = defaultProps.fontFamily, // Use font family from props fontSize = defaultProps.fontSize, minLength = defaultProps.minLength, padDirection = defaultProps.padDirection, + margin = defaultProps.margin, // Use padding from props step = defaultProps.step, textColor = defaultProps.textColor, value = defaultProps.value, @@ -139,9 +148,12 @@ export default function SplitFlapDisplay({ className={clsx(css.wrapper, className)} style={{ '--border-color': borderColor, + '--border-radius': borderRadius, // Ensure units are correct '--border-width': borderWidth, '--color': textColor, + '--font-family': fontFamily, '--font-size': fontSize, + '--margin': margin, // Ensure units are correct }} > {prevChars.map((v: string, idx: number) => ( @@ -149,6 +161,8 @@ export default function SplitFlapDisplay({ key={`split-flap-${idx}`} background={background} borderWidth={borderWidth} + borderRadius={borderRadius} + margin={margin} characterWidth={characterWidth} prevValue={v === ' ' ? '\u2007' : v} step={step} diff --git a/src/SplitFlapDisplay/styles.module.scss b/src/SplitFlapDisplay/styles.module.scss index 0692cc0..533830e 100644 --- a/src/SplitFlapDisplay/styles.module.scss +++ b/src/SplitFlapDisplay/styles.module.scss @@ -1,12 +1,18 @@ .wrapper { --border-color: #ddd; + --border-radius: 10px; // Variable for border radius --border-width: 1px; --color: #ddd; + --font-family: Arial, sans-serif; // Variable for font family --font-size: 1rem; + --padding: 10px; display: flex; color: var(--color); font-size: var(--font-size); + font-family: var(--font-family); // Apply font family + padding: var(--padding); + border-radius: var(--border-radius) !important; // Apply border radius > * { &:not(:first-child) { diff --git a/src/demo/index.tsx b/src/demo/index.tsx index 0b6df7a..bf96991 100644 --- a/src/demo/index.tsx +++ b/src/demo/index.tsx @@ -95,6 +95,9 @@ export default function Demo() { textColor={textColor} value={value} withSound={withSound} + borderRadius="10px" + margin="50px" + fontFamily="sans-serif" />
From f73a937d077800fb4e78b12fa017a59ad93bf831 Mon Sep 17 00:00:00 2001 From: timshaww Date: Tue, 23 Apr 2024 10:01:31 -0400 Subject: [PATCH 2/3] updated demo --- src/demo/CodeBlock.tsx | 9 +++++++++ src/demo/index.tsx | 32 +++++++++++++++++++++++++++++--- 2 files changed, 38 insertions(+), 3 deletions(-) diff --git a/src/demo/CodeBlock.tsx b/src/demo/CodeBlock.tsx index d5baa25..a1669e8 100644 --- a/src/demo/CodeBlock.tsx +++ b/src/demo/CodeBlock.tsx @@ -3,12 +3,15 @@ import React from 'react'; type CodeBlockProps = { background: string; borderColor: string; + borderRadius: string; borderWidth: string; characterSet: string; characterWidth: string; + fontFamily: string; fontSize: string; minLength: number; padDirection: string; + margin: string; step: number; textColor: string; value: string; @@ -18,12 +21,15 @@ type CodeBlockProps = { export default function CodeBlock({ background, borderColor, + borderRadius, borderWidth, characterSet, characterWidth, + fontFamily, fontSize, minLength, padDirection, + margin, step, textColor, value, @@ -35,12 +41,15 @@ export default function CodeBlock({ ('#000000'); const [borderColor, setBorderColor] = useState('#dddddd'); const [borderWidth, setBorderWidth] = useState('1px'); + const [borderRadius, setBorderRadius] = useState('10px'); + const [margin, setMargin] = useState('5px'); + const [fontFamily, setFontFamily] = useState('Arial, sans-serif'); const [characterWidth, setCharacterWidth] = useState('1em'); const [fontSize, setFontSize] = useState('2em'); const [minLength, setMinLength] = useState(defaultInputs.numeric.length); @@ -77,6 +80,10 @@ export default function Demo() { } }; + const onSelectFontFamily = (event: ChangeEvent): void => { + setFontFamily(event.target.value); + }; + return (

React Split Flap Display

@@ -95,9 +102,9 @@ export default function Demo() { textColor={textColor} value={value} withSound={withSound} - borderRadius="10px" - margin="50px" - fontFamily="sans-serif" + borderRadius={borderRadius} + margin={margin} + fontFamily={fontFamily} />
@@ -109,6 +116,14 @@ export default function Demo() {
+
+ font familty:  + +
character set: 
+
+ border radius:  + +
+
+ margin-right:  + +
font size:  @@ -214,12 +237,15 @@ export default function Demo() { Date: Tue, 23 Apr 2024 21:43:19 -0400 Subject: [PATCH 3/3] add in howler import --- src/Character/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Character/index.tsx b/src/Character/index.tsx index da66b69..0d4ee9e 100644 --- a/src/Character/index.tsx +++ b/src/Character/index.tsx @@ -1,8 +1,8 @@ import React, { useEffect, useState } from 'react'; - import Panel, { FlipPanel } from '../Panel'; import defaultSound from '../assets/flip.mp3'; - +// @ts-expect-error the minified file is not in the type declarations +import { Howl } from 'howler/dist/howler.min.js'; import * as css from './styles.module.scss'; interface Props {