Commit7b505ac

committed

add checkbox component

1 parentc855eca commit7b505acCopy full SHA for 7b505ac

File tree

+72

-15

lines changed

+72

-15

lines changed

Lines changed: 34 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,34 @@`
	`1`	`+import*asReactfrom'react'`
	`2`	`+`
	`3`	`+conststyles={`
	`4`	`+box:{`
	`5`	`+display:'flex',`
	`6`	`+alignItems:'center',`
	`7`	`+justifyContent:'center',`
	`8`	`+},`
	`9`	`+input:{`
	`10`	`+border:'1px solid black',`
	`11`	`+backgroundColor:'yellow',`
	`12`	`+},`
	`13`	`+}`
	`14`	`+`
	`15`	`+interfaceProps{`
	`16`	`+status:'COMPLETE'\|'INCOMPLETE'\|'ACTIVE'\|'LOADING'`
	`17`	`+}`
	`18`	`+`
	`19`	`+constCheckbox=(props:Props)=>{`
	`20`	`+constchecked=props.status==='COMPLETE'`
	`21`	`+// const loading = props.state === 'LOADING'`
	`22`	`+constonChange=()=>{`
	`23`	`+/* read */`
	`24`	`+}`
	`25`	`+return(`
	`26`	`+<divstyle={styles.box}>`
	`27`	`+<label>`
	`28`	`+<inputstyle={styles.input}type="checkbox"checked={checked}onChange={onChange}/>`
	`29`	`+</label>`
	`30`	`+</div>`
	`31`	`+)`
	`32`	`+}`
	`33`	`+`
	`34`	`+exportdefaultCheckbox`

Lines changed: 10 additions & 11 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`import*asReactfrom'react'`
`2`	`2`	`import*asTfrom'typings'`
`3`		`-import{Button,Checkbox}from'@alifd/next'`
`4`		`-`
	`3`	`+import{Button}from'@alifd/next'`
	`4`	`+importCheckboxfrom'../../../../../components/Checkbox'`
`5`	`5`	`importMarkdownfrom'../../../../../components/Markdown'`
`6`	`6`
`7`	`7`	`interfaceProps{`
`@@ -36,19 +36,18 @@ const Step = (props: Props) => {`
`36`	`36`	`return(`
`37`	`37`	`<divstyle={styles.card}>`
`38`	`38`	`<div>`
`39`		`-<Checkbox`
`40`		`-checked={props.status==='COMPLETE'}`
`41`		`-indeterminate={false/* TODO: running */}`
`42`		`-disabled={props.status!=='INCOMPLETE'/* TODO: and not running */}`
`43`		`-onChange={()=>{`
`44`		`-/* do nothing */`
`45`		`-}}`
`46`		`-/>`
	`39`	`+<Checkboxstatus={props.status}/>`
`47`	`40`	`</div>`
`48`	`41`	`<div>`
`49`	`42`	`<Markdown>{props.content\|\|''}</Markdown>`
`50`	`43`	`</div>`
`51`		`-<div>{showLoadSolution&&<ButtononClick={onClickHandler}>Load Solution</Button>}</div>`
	`44`	`+<div>`
	`45`	`+{showLoadSolution&&(`
	`46`	`+<Buttontype="normal"onClick={onClickHandler}>`
	`47`	`+ Load Solution`
	`48`	`+</Button>`
	`49`	`+)}`
	`50`	`+</div>`
`52`	`51`	`</div>`
`53`	`52`	`)`
`54`	`53`	`}`

Lines changed: 0 additions & 4 deletions

Original file line number	Diff line number	Diff line change
`@@ -2,10 +2,6 @@ import * as React from 'react'`
`2`	`2`	`importReactDOMfrom'react-dom'`
`3`	`3`	`importAppfrom'./App'`
`4`	`4`
`5`		`-// base styles`
`6`		`-// TODO: must be a better way to load@alifd styles`
`7`		`-// currently these are loaded in src/editor/ReactWebView.ts as well`
`8`		`-import'@alifd/next/dist/next.css'`
`9`	`5`	`import'./styles/index.css'`
`10`	`6`
`11`	`7`	`ReactDOM.render(<App/>,document.getElementById('root')asHTMLElement)`

Lines changed: 28 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,28 @@`
	`1`	`+importReactfrom'react'`
	`2`	`+import{storiesOf}from'@storybook/react'`
	`3`	`+importSideBarDecoratorfrom'./utils/SideBarDecorator'`
	`4`	`+`
	`5`	`+importCheckboxfrom'../src/components/Checkbox'`
	`6`	`+`
	`7`	`+conststyles={`
	`8`	`+container:{`
	`9`	`+display:'flex'as'flex',`
	`10`	`+flexDirection:'column'as'column',`
	`11`	`+},`
	`12`	`+}`
	`13`	`+`
	`14`	`+storiesOf('Checkbox',module)`
	`15`	`+.addDecorator(SideBarDecorator)`
	`16`	`+.add('Checkboxes',()=>(`
	`17`	`+<divstyle={styles.container}>`
	`18`	`+<span>`
	`19`	`+<Checkboxstatus="COMPLETE"/> Checked`
	`20`	`+</span>`
	`21`	`+<span>`
	`22`	`+<Checkboxstatus="INCOMPLETE"/> Unchecked`
	`23`	`+</span>`
	`24`	`+<span>`
	`25`	`+<Checkboxstatus="LOADING"/> Loading`
	`26`	`+</span>`
	`27`	`+</div>`
	`28`	`+))`

Comments

(0)