Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ChordDisplay): Chord link to dictionary
Browse files Browse the repository at this point in the history
ArTiSTiX committed Jan 5, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent d090433 commit 7954bb5
Showing 7 changed files with 68 additions and 18 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@import 'tokens';

.base {
color: currentcolor;
}
38 changes: 38 additions & 0 deletions src/renderer/components/ChordNameLink/ChordNameLink.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React, { useMemo } from 'react';
import classnames from 'classnames/bind';

import { NavLink } from 'react-router-dom';
import { Link } from '@la-jarre-a-son/ui';
import { ChordNameLinkProps } from './types';

import { ChordName } from '../ChordName/ChordName';

import styles from './ChordNameLink.module.scss';

const cx = classnames.bind(styles);

export const ChordNameLink: React.FC<ChordNameLinkProps> = ({
className,
chord,
dictionaryUrl,
...rest
}) => {
const to = useMemo(
() => (chord ? `${dictionaryUrl}${encodeURIComponent(chord.tonic + chord.aliases[0])}` : ''),
[chord, dictionaryUrl]
);

if (!chord) return null;

return (
<Link as={NavLink} className={cx('base', className)} to={to}>
<ChordName chord={chord} {...rest} />
</Link>
);
};

ChordNameLink.defaultProps = {
dictionaryUrl: '/chord-dictionary/',
};

export default ChordNameLink;
1 change: 1 addition & 0 deletions src/renderer/components/ChordNameLink/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default, ChordNameLink } from './ChordNameLink';
5 changes: 5 additions & 0 deletions src/renderer/components/ChordNameLink/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { ChordNameProps } from '../ChordName';

export type ChordNameLinkProps = ChordNameProps & {
dictionaryUrl?: string;
};
1 change: 1 addition & 0 deletions src/renderer/components/index.ts
Original file line number Diff line number Diff line change
@@ -12,6 +12,7 @@ export * from './InputNumber';

export * from './ChordIntervals';
export * from './ChordName';
export * from './ChordNameLink';
export * from './CircleFifths';
export * from './Notation';
export * from './PianoKeyboard';
4 changes: 2 additions & 2 deletions src/renderer/views/ChordDisplay/ChordDisplay.module.scss
Original file line number Diff line number Diff line change
@@ -38,7 +38,7 @@ $View_ChordDisplay_textShadow: 0 0.05em 0.1em rgba($color-black, 0.6) !default;

.display {
position: relative;
z-index: 2;
z-index: 1;
display: flex;
flex-direction: column;
flex-grow: 1;
@@ -68,7 +68,7 @@ $View_ChordDisplay_textShadow: 0 0.05em 0.1em rgba($color-black, 0.6) !default;

.alternativeChords {
position: absolute;
z-index: 1;
z-index: 2;
top: 0;
right: 0;
padding: 1vw;
32 changes: 16 additions & 16 deletions src/renderer/views/ChordDisplay/ChordDisplayModule.tsx
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@ import classnames from 'classnames/bind';

import { useModuleSettings, useSettings } from 'renderer/contexts/Settings';
import useNotes from 'renderer/hooks/useNotes';
import { ChordName, Notation, PianoKeyboard, ChordIntervals } from 'renderer/components';
import { Notation, PianoKeyboard, ChordIntervals, ChordNameLink } from 'renderer/components';

import styles from './ChordDisplay.module.scss';

@@ -51,20 +51,6 @@ const ChordDisplayModule: React.FC<Props> = ({ moduleId }) => {

return (
<div id="chordDisplay" className={cx('base')}>
{displayAltChords && (
<div id="alternativeChords" className={cx('alternativeChords')}>
{chords.map((chord, index) =>
index > 0 ? (
<ChordName
key={index}
chord={chord}
notation={chordNotation}
highlightAlterations={highlightAlterations}
/>
) : null
)}
</div>
)}
<div id="container" className={cx('container')}>
{displayNotation && (
<Notation
@@ -79,7 +65,7 @@ const ChordDisplayModule: React.FC<Props> = ({ moduleId }) => {
<div id="display" className={cx('display')}>
{displayChord && (
<div id="chord" className={cx('chord', { 'chord--withNotation': displayNotation })}>
<ChordName
<ChordNameLink
chord={chords[0]}
notation={chordNotation}
highlightAlterations={highlightAlterations}
@@ -100,6 +86,20 @@ const ChordDisplayModule: React.FC<Props> = ({ moduleId }) => {
/>
</div>
)}
{displayAltChords && (
<div id="alternativeChords" className={cx('alternativeChords')}>
{chords.map((chord, index) =>
index > 0 ? (
<ChordNameLink
key={index}
chord={chord}
notation={chordNotation}
highlightAlterations={highlightAlterations}
/>
) : null
)}
</div>
)}
</div>
</div>
{displayKeyboard && (

0 comments on commit 7954bb5

Please sign in to comment.