Remove styled-components for css modules
This commit is contained in:
parent
7649882995
commit
61d85838ae
@ -20,8 +20,7 @@
|
||||
"react-icons": "^3.8.0",
|
||||
"react-redux": "^7.1.3",
|
||||
"redux": "^4.0.4",
|
||||
"reselect": "^4.0.0",
|
||||
"styled-components": "^4.4.1"
|
||||
"reselect": "^4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.7.5",
|
||||
|
||||
13
src/components/RsvpReader.css
Normal file
13
src/components/RsvpReader.css
Normal file
@ -0,0 +1,13 @@
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.mainItem {
|
||||
composes: item;
|
||||
flex: 2;
|
||||
}
|
||||
@ -1,5 +1,4 @@
|
||||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { TextInput } from './TextInput'
|
||||
import { TextOutput } from './TextOutput'
|
||||
import { MainControl } from './MainControl'
|
||||
@ -7,30 +6,23 @@ import { RsvpSegment } from './RsvpSegment'
|
||||
import { RsvpOptions } from './RsvpOptions'
|
||||
import { RsvpPlayer } from './RsvpPlayer'
|
||||
|
||||
const FlexRow = styled.div`
|
||||
display: flex;
|
||||
`
|
||||
|
||||
const FlexItem = styled.div`
|
||||
flex: ${props => props.flex || 1};
|
||||
border: 1px solid black;
|
||||
`
|
||||
import styles from './RsvpReader.css'
|
||||
|
||||
export const RsvpReader = () => {
|
||||
return (
|
||||
<FlexRow>
|
||||
<FlexItem>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.item}>
|
||||
<TextInput />
|
||||
</FlexItem>
|
||||
<FlexItem flex={2}>
|
||||
</div>
|
||||
<div className={styles.mainItem}>
|
||||
<RsvpSegment />
|
||||
<MainControl></MainControl>
|
||||
<RsvpOptions></RsvpOptions>
|
||||
<RsvpPlayer />
|
||||
</FlexItem>
|
||||
<FlexItem>
|
||||
</div>
|
||||
<div className={styles.item}>
|
||||
<TextOutput />
|
||||
</FlexItem>
|
||||
</FlexRow>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,20 +1,8 @@
|
||||
import React, { useState } from 'react'
|
||||
import { useDispatch } from 'react-redux'
|
||||
import styled from 'styled-components'
|
||||
|
||||
import { setText } from '../store/actions.js'
|
||||
|
||||
const Button = styled.button`
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 3px;
|
||||
background: white;
|
||||
color: grey;
|
||||
|
||||
&:hover {
|
||||
background: lightgrey;
|
||||
}
|
||||
`
|
||||
|
||||
const lorem =
|
||||
'Excepteur aliqua cupidatat ullamco laboris cupidatat elit sint cillum incididunt. Anim sit excepteur laboris commodo ullamco consequat tempor. Velit elit eiusmod aute aliquip amet sunt minim deserunt voluptate esse ea sint. Commodo ipsum dolor dolor Lorem et consectetur minim ut in voluptate. Nulla qui consectetur nostrud sint anim minim duis qui amet. Ipsum reprehenderit eiusmod quis Lorem. Consectetur ipsum quis incididunt proident ea sit mollit veniam in excepteur.'
|
||||
|
||||
@ -27,7 +15,7 @@ export const TextInput = () => {
|
||||
defaultValue={text}
|
||||
onInput={e => setTextState(e.target.value)}
|
||||
></textarea>
|
||||
<Button onClick={() => dispatch(setText(text))}>Load</Button>
|
||||
<button onClick={() => dispatch(setText(text))}>Load</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
7
src/components/TextOutput.css
Normal file
7
src/components/TextOutput.css
Normal file
@ -0,0 +1,7 @@
|
||||
.current {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.sentenceBeginning {
|
||||
color: red;
|
||||
}
|
||||
@ -1,39 +1,39 @@
|
||||
import React from 'react'
|
||||
import { useSelector } from 'react-redux'
|
||||
import styled from 'styled-components'
|
||||
import classNames from 'classnames'
|
||||
|
||||
import { getNextSmallerNumber } from '../lib/array-util.js'
|
||||
import {
|
||||
selectParsedText,
|
||||
selectCurrentSegmentIndex
|
||||
} from '../store/selectors.js'
|
||||
|
||||
const Segment = styled.span`
|
||||
color: ${props => (props.sentenceBeginning ? 'red' : 'black')};
|
||||
font-weight: ${props => (props.current ? 'bold' : 'normal')};
|
||||
`
|
||||
|
||||
const SelectedSegment = styled.span`
|
||||
font-weight: ;
|
||||
`
|
||||
import styles from './TextOutput.css'
|
||||
|
||||
export const TextOutput = () => {
|
||||
const parsedText = useSelector(selectParsedText)
|
||||
const { segments, sentences, words } = useSelector(selectParsedText)
|
||||
const curSegment = useSelector(selectCurrentSegmentIndex)
|
||||
const { segments, words, sentences } = parsedText
|
||||
return (
|
||||
<div>
|
||||
{segments.map((segment, idx) => {
|
||||
const current = curSegment === idx
|
||||
const sentenceBeginning = sentences.includes(idx)
|
||||
const isCurrent = curSegment === idx
|
||||
const isWordStart = words.includes(idx)
|
||||
const wordBeginning = isWordStart
|
||||
? idx
|
||||
: getNextSmallerNumber(idx, words)
|
||||
const isSentenceStart = sentences.includes(wordBeginning)
|
||||
|
||||
return (
|
||||
<Segment
|
||||
<span
|
||||
key={idx}
|
||||
current={current}
|
||||
sentenceBeginning={sentenceBeginning}
|
||||
className={classNames({
|
||||
[styles.current]: isCurrent,
|
||||
[styles.sentenceBeginning]: isSentenceStart
|
||||
})}
|
||||
>
|
||||
{segment}{' '}
|
||||
</Segment>
|
||||
{isWordStart && ' '}
|
||||
{segment}
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
42
src/styles/IconButton.css
Normal file
42
src/styles/IconButton.css
Normal file
@ -0,0 +1,42 @@
|
||||
.svgButton {
|
||||
display: inline-block;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
padding: 3px;
|
||||
/* width: 1.4em; */
|
||||
/* height: 1.4em; */
|
||||
}
|
||||
|
||||
.svgButton svg {
|
||||
outline: none;
|
||||
transition: transform 0.1s linear;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.svgButton:focus {
|
||||
outline: 2px dashed #17171d;
|
||||
}
|
||||
|
||||
.svgButton:hover svg {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.svgButton::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.svgButton[disabled] svg {
|
||||
transform: scale(1.5);
|
||||
|
||||
color: '#c7c7c7';
|
||||
}
|
||||
|
||||
.a11yLabel {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -1,57 +1,20 @@
|
||||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const SvgButton = styled.button`
|
||||
display: inline-block;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
padding: 3px;
|
||||
/* width: 1.4em; */
|
||||
/* height: 1.4em; */
|
||||
import styles from './IconButton.css'
|
||||
|
||||
svg {
|
||||
outline: none;
|
||||
transition: transform 0.1s linear;
|
||||
vertical-align: middle;
|
||||
}
|
||||
const SvgButton = ({ children, ...props }) => (
|
||||
<button className={styles.svgButton} {...props}>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
|
||||
&:focus {
|
||||
outline: 2px dashed #17171d;
|
||||
}
|
||||
const AccessLabel = ({ children }) => (
|
||||
<span className={styles.a11yLabel}>{children}</span>
|
||||
)
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: '#c7c7c7';
|
||||
svg {
|
||||
transform: scale(1.5);
|
||||
|
||||
color: '#c7c7c7';
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const AccessLabel = styled.span`
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
`
|
||||
|
||||
export const IconButton = ({ Icon, title, onClick, disabled }) => {
|
||||
export const IconButton = ({ Icon, title, ...props }) => {
|
||||
return (
|
||||
<SvgButton onClick={onClick} title={title} tabindex="0" disabled={disabled}>
|
||||
<SvgButton tabIndex="0" title={title} {...props}>
|
||||
{Icon && <Icon aria-hidden="true" focusable="false" />}
|
||||
<AccessLabel>{title}</AccessLabel>
|
||||
</SvgButton>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user