Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Feature/step no title#47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
ShMcK merged 3 commits intomasterfromfeature/step-no-title
Oct 30, 2019
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletionsweb-app/.storybook/addons.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
import '@storybook/addon-actions/register'
import '@storybook/addon-knobs/register'
import '@storybook/addon-links/register'
import '@storybook/addon-viewport/register'
import '@storybook/addon-links/register'
1 change: 1 addition & 0 deletionsweb-app/src/App.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,7 @@ import ErrorBoundary from './components/ErrorBoundary'
import client from './services/apollo'
import Routes from './Routes'


const App = () => (
<ErrorBoundary>
<ApolloProvider client={client}>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
import * as React from 'react'
import * as T from 'typings'
import { Button, Checkbox } from '@alifd/next'

import Markdown from '../../../../../components/Markdown'

interface Props {
order: number
content: string
status: T.ProgressStatus
onLoadSolution(): void
}

const styles = {
card: {
display: 'grid',
gridTemplateColumns: '25px 1fr',
padding: '1rem 1rem 1rem 0.2rem',
},
content: {
margin: 0,
},
}

const Step = (props: Props) => {
// TODO: extract or replace load solution
const [loadedSolution, setLoadedSolution] = React.useState()
const onClickHandler = () => {
if (!loadedSolution) {
setLoadedSolution(true)
props.onLoadSolution()
}
}
const showLoadSolution = props.status === 'ACTIVE' && !loadedSolution

return (
<div style={styles.card}>
<div>
<Checkbox
checked={props.status === 'COMPLETE'}
indeterminate={false /* TODO: running */}
disabled={props.status !== 'INCOMPLETE' /* TODO: and not running */}
onChange={() => {
/* do nothing */
}}
/>
</div>
<div>
<Markdown>{props.content || ''}</Markdown>
</div>
<div>{showLoadSolution && <Button onClick={onClickHandler}>Load Solution</Button>}</div>
</div>
)
}

export default Step
View file
Open in desktop

This file was deleted.

34 changes: 13 additions & 21 deletionsweb-app/src/containers/Tutorial/LevelPage/Level/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
import { Button, Step } from '@alifd/next'
import { Button } from '@alifd/next'
import * as React from 'react'
import * as G from 'typings/graphql'
import * as T from 'typings'

import Step from './Step'
import Markdown from '../../../../components/Markdown'
import StepDescription from './StepDescription'

const styles = {
card: {
Expand DownExpand Up@@ -56,11 +56,6 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => {
throw new Error('No Stage steps found')
}

// grab the active step
const activeIndex: number = level.steps.findIndex((step: G.Step & { status: T.ProgressStatus } | null) => {
return step && step.status === 'ACTIVE'
})

return (
<div style={styles.card}>
<div>
Expand All@@ -76,20 +71,17 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => {
<div>
<div style={styles.header}>Tasks</div>
<div style={styles.steps}>
<Step current={activeIndex} direction="ver" shape="dot" animation readOnly>
{level.steps.map((step: G.Step & { status: T.ProgressStatus } | null, index: number) => {
if (!step) {
return null
}
return (
<Step.Item
key={step.id}
title={step.title || `Step ${index + 1}`}
content={<StepDescription text={step.content} mode={step.status} onLoadSolution={onLoadSolution} />}
/>
)
})}
</Step>
{level.steps.map((step: G.Step & { status: T.ProgressStatus } | null, index: number) => {
if (!step) {
return null
}
return <Step
order={index + 1}
status={step.status}
content={step.content}
onLoadSolution={onLoadSolution}
/>
})}
</div>
</div>

Expand Down
6 changes: 3 additions & 3 deletionsweb-app/src/styles/index.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,6 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

.hover-select:hover {
cursor: pointer;
}
p {
margin: 0
}
18 changes: 10 additions & 8 deletionsweb-app/stories/Step.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@ import { select, text, withKnobs } from '@storybook/addon-knobs'
import { storiesOf } from '@storybook/react'
import SideBarDecorator from './utils/SideBarDecorator'

importStepDescription from '../src/containers/Tutorial/LevelPage/Level/StepDescription'
importStep from '../src/containers/Tutorial/LevelPage/Level/Step'

const stepText =
'This is a long paragraph of step text intended to wrap around the side after a short period of writing to demonstrate text wrap among other things'
Expand DownExpand Up@@ -33,17 +33,19 @@ const paragraphText = `Markdown included \`code\`, *bold*, & _italics_.
storiesOf('Level', module)
.addDecorator(SideBarDecorator)
.addDecorator(withKnobs)
.add('Step Description', () => (
<StepDescription
text={text('text', stepText)}
mode={select('mode', { ACTIVE: 'ACTIVE', COMPLETE: 'COMPLETE', INCOMPLETE: 'INCOMPLETE' }, 'ACTIVE', 'step')}
.add('Step', () => (
<Step
order={1}
content={text('text', stepText)}
status={select('mode', { ACTIVE: 'ACTIVE', COMPLETE: 'COMPLETE', INCOMPLETE: 'INCOMPLETE' }, 'COMPLETE', 'step')}
onLoadSolution={action('onLoadSolution')}
/>
))
.add('Step Markdown', () => (
<StepDescription
text={text('text', paragraphText)}
mode={select('mode', { ACTIVE: 'ACTIVE', COMPLETE: 'COMPLETE', INCOMPLETE: 'INCOMPLETE' }, 'ACTIVE', 'step')}
<Step
order={2}
content={text('text', paragraphText)}
status={select('mode', { ACTIVE: 'ACTIVE', COMPLETE: 'COMPLETE', INCOMPLETE: 'INCOMPLETE' }, 'ACTIVE', 'step')}
onLoadSolution={action('onLoadSolution')}
/>
))
[8]ページ先頭
©2009-2025 Movatter.jp