Browse Source

Export styled keys

Export styled keys for customization of the component.
master
TheoryOfNekomata 4 years ago
parent
commit
5ec0850e48
6 changed files with 15 additions and 24 deletions
  1. +1
    -1
      src/components/AccidentalKey/AccidentalKey.tsx
  2. +3
    -14
      src/components/Keyboard/Keyboard.stories.tsx
  3. +4
    -4
      src/components/StyledAccidentalKey/StyledAccidentalKey.test.tsx
  4. +3
    -3
      src/components/StyledAccidentalKey/StyledAccidentalKey.tsx
  5. +1
    -1
      src/components/StyledNaturalKey/StyledNaturalKey.tsx
  6. +3
    -1
      src/index.ts

+ 1
- 1
src/components/AccidentalKey/AccidentalKey.tsx View File

@@ -1,7 +1,7 @@
import * as React from 'react'
import * as PropTypes from 'prop-types'
import keyPropTypes from '../../services/keyPropTypes'
import styled from 'styled-components'
import keyPropTypes from '../../services/keyPropTypes'

const Base = styled('div')({
width: '100%',


+ 3
- 14
src/components/Keyboard/Keyboard.stories.tsx View File

@@ -4,15 +4,10 @@ import StyledAccidentalKey from '../StyledAccidentalKey/StyledAccidentalKey'
import StyledNaturalKey from '../StyledNaturalKey/StyledNaturalKey'
import Keyboard, { propTypes } from './Keyboard'

interface WrapperProps {
style?: object | null
}

const Wrapper: React.FC<WrapperProps> = ({ style, ...etcProps }) => (
const Wrapper: React.FC = (props) => (
<div
{...etcProps}
{...props}
style={{
...style,
// @ts-ignore
'--color-channel-0': '#f55',
'--color-channel-1': '#ff0',
@@ -82,13 +77,7 @@ export const WithDifferentKeyRange = (props?: Partial<Props>) => (
)

export const Styled = (props?: Partial<Props>) => (
<Wrapper
style={{
// @ts-ignore
'--color-natural-key': '#e3e3e5',
'--color-accidental-key': '#35313b',
}}
>
<Wrapper>
<Keyboard
{...props}
startKey={21}


+ 4
- 4
src/components/StyledAccidentalKey/StyledAccidentalKey.test.tsx View File

@@ -1,15 +1,15 @@
import * as React from 'react'
import * as ReactIs from 'react-is'
import AccidentalKey from './StyledAccidentalKey'
import StyledAccidentalKey from './StyledAccidentalKey'

it('should exist', () => {
expect(AccidentalKey).toBeDefined()
expect(StyledAccidentalKey).toBeDefined()
})

it('should be a React component', () => {
expect(ReactIs.isValidElementType(AccidentalKey)).toBe(true)
expect(ReactIs.isValidElementType(StyledAccidentalKey)).toBe(true)
})

it('should render without crashing', () => {
expect(() => <AccidentalKey />).not.toThrow()
expect(() => <StyledAccidentalKey />).not.toThrow()
})

+ 3
- 3
src/components/StyledAccidentalKey/StyledAccidentalKey.tsx View File

@@ -1,7 +1,7 @@
import * as React from 'react'
import * as PropTypes from 'prop-types'
import keyPropTypes from '../../services/keyPropTypes'
import styled from 'styled-components'
import keyPropTypes from '../../services/keyPropTypes'

const Base = styled('div')({
width: '100%',
@@ -20,13 +20,13 @@ const B2 = styled('div')`
width: 100%;
height: 100%;
border-radius: 0 0 1px 1px;
background-color: var(--color-accidental-key, currentColor);
background-color: var(--color-accidental-key, #35313b);
mask-image: linear-gradient(to bottom, white, rgba(0, 0, 0, 0.9));
`
const B3 = styled('div')`
width: 100%;
height: 100%;
background-color: var(--color-accidental-key, currentColor);
background-color: var(--color-accidental-key, #35313b);
`
const B4 = styled('div')`
width: 100%;


+ 1
- 1
src/components/StyledNaturalKey/StyledNaturalKey.tsx View File

@@ -37,7 +37,7 @@ const N3 = styled('div')`
const N4 = styled('div')`
width: 100%;
height: 100%;
background-color: var(--color-natural-key, transparent);
background-color: var(--color-natural-key, #e3e3e5);
border-radius: 0 0 1px 1px;
`



+ 3
- 1
src/index.ts View File

@@ -1,6 +1,8 @@
import Keyboard from './components/Keyboard/Keyboard'
import StyledNaturalKey from './components/StyledNaturalKey/StyledNaturalKey'
import StyledAccidentalKey from './components/StyledAccidentalKey/StyledAccidentalKey'
import keyPropTypes from './services/keyPropTypes'

export default Keyboard

export { keyPropTypes }
export { keyPropTypes, StyledNaturalKey, StyledAccidentalKey }

Loading…
Cancel
Save