Skip to content

Commit

Permalink
feat: refactor rejectionmodal prioritydropdown to antd select
Browse files Browse the repository at this point in the history
  • Loading branch information
efloden committed Apr 30, 2018
1 parent af4681a commit 965199c
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 151 deletions.
6 changes: 0 additions & 6 deletions ...er/zanata-frontend/src/.storybook-frontend/__snapshots__/storyshots-frontend.test.js.snap
View file
Expand Up @@ -16911,12 +16911,6 @@ exports[`Frontend Storyshots LoaderText default 1`] = `
</span>
`;

exports[`Frontend Storyshots Modal default 1`] = `
<div
className="static-modal"
/>
`;

exports[`Frontend Storyshots Notification Error 1`] = `undefined`;

exports[`Frontend Storyshots Notification Info 1`] = `undefined`;
Expand Down
48 changes: 24 additions & 24 deletions server/zanata-frontend/src/app/components/Modal/Modal.story.js
View file
@@ -1,24 +1,24 @@
// @ts-nocheck
import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import Modal from 'antd/lib/modal'
// import 'antd/lib/modal/style/index.less'
import Button from 'antd/lib/button'
// import 'antd/lib/button/style/index.less'

storiesOf('Modal', module)
.add('default', () => (
<div>
<Button type="primary" onClick={action('onClick')}>Open</Button>
<Modal
title="Basic Modal"
visible
onOk={action('onClick')}
onCancel={action('onClick')}
>
<p>A modal with header, body, and set of actions in the footer.</p>
<a href='https://ant.design/components/modal'>ant.design Modal</a>
</Modal>
</div>
))
// // @ts-nocheck
// import React from 'react'
// import { storiesOf } from '@storybook/react'
// import { action } from '@storybook/addon-actions'
// import Modal from 'antd/lib/modal'
// // import 'antd/lib/modal/style/index.less'
// import Button from 'antd/lib/button'
// // import 'antd/lib/button/style/index.less'
//
// storiesOf('Modal', module)
// .add('default', () => (
// <div>
// <Button type="primary" onClick={action('onClick')}>Open</Button>
// <Modal
// title="Basic Modal"
// visible
// onOk={action('onClick')}
// onCancel={action('onClick')}
// >
// <p>A modal with header, body, and set of actions in the footer.</p>
// <a href='https://ant.design/components/modal'>ant.design Modal</a>
// </Modal>
// </div>
// ))
1 change: 1 addition & 0 deletions server/zanata-frontend/src/app/editor/components/RejectTranslationModal/CriteriaDropdown.js
View file
Expand Up @@ -6,6 +6,7 @@ import {
} from '../../utils/reject-trans-util'
import Select from 'antd/lib/select'
import 'antd/lib/select/style/index.less'
import 'antd/lib/icon/style/'

/**
* A Local Editor Dropdown coponent that selects the Criteria
Expand Down
65 changes: 23 additions & 42 deletions server/zanata-frontend/src/app/editor/components/RejectTranslationModal/PriorityDropdown.js
View file
Expand Up @@ -2,8 +2,10 @@ import React from 'react'
import { Component } from 'react'
import { Icon } from '../../../components'
import * as PropTypes from 'prop-types'
import Dropdown from '../../components/Dropdown'
import { MINOR, MAJOR, CRITICAL } from '../../utils/reject-trans-util'
import Select from 'antd/lib/select'
import 'antd/lib/select/style/index.less'
import 'antd/lib/icon/style/'

/**
* A Local Editor Dropdown coponent that selects the Priority of a
Expand All @@ -21,53 +23,32 @@ class PriorityDropdown extends Component {
).isRequired,
priorityChange: PropTypes.func.isRequired
}
constructor (props) {
super(props)
this.state = {
dropdownOpen: false
}
}
toggleDropdown = () => {
this.setState(prevState => ({
dropdownOpen: !prevState.dropdownOpen
}))
}
onPriorityChange = (event) => {
this.props.priorityChange(event)
this.toggleDropdown()
}
render () {
const { textState, priority } = this.props
const { textState, priority, priorityChange } = this.props
console.log(priority)
const options = [
<Select.Option key={0} value={MINOR}>
{MINOR}
</Select.Option>,
<Select.Option key={1} value={MAJOR} className='u-textWarning'>
{MAJOR}
</Select.Option>,
<Select.Option key={2} value={CRITICAL} className='u-textDanger'>
{CRITICAL}
</Select.Option>
]
return (
<span className='PriorityDropdown'>
<Icon name='warning' className='s2'
parentClassName='u-textWarning' />
<span id='PriorityTitle'>Priority</span>
<Dropdown enabled isOpen={this.state.dropdownOpen}
onToggle={this.toggleDropdown}
className='dropdown-menu priority'>
<Dropdown.Button>
<a className='EditorDropdown-item'>
<span className={textState}>{priority}</span>
<span className='arrow'>
<Icon className='n1' name='chevron-down' />
</span>
</a>
</Dropdown.Button>
<Dropdown.Content>
<ul>
<li className='EditorDropdown-item'
onClick={this.onPriorityChange}>
<span>Minor</span></li>
<li className='EditorDropdown-item'
onClick={this.onPriorityChange}>
<span className='u-textWarning'>Major</span></li>
<li className='EditorDropdown-item'
onClick={this.onPriorityChange}>
<span className='u-textDanger'>Critical</span></li>
</ul>
</Dropdown.Content>
</Dropdown>
<Select
className={textState}
defaultValue={priority}
style={{ width: '100%' }}
onChange={priorityChange}>
{options}
</Select>
</span>
)
}
Expand Down
109 changes: 33 additions & 76 deletions ...zanata-frontend/src/app/editor/components/RejectTranslationModal/PriorityDropdown.test.js
View file
Expand Up @@ -2,12 +2,24 @@ import * as React from 'react'
import * as ReactDOMServer from 'react-dom/server'
import PriorityDropdown from './PriorityDropdown'
import { Icon } from '../../../components'
import Dropdown from '../../components/Dropdown'
import {
MINOR, MAJOR, CRITICAL, textState
} from '../../utils/reject-trans-util'
import Select from 'antd/lib/select'
import 'antd/lib/select/style/index.less'

const defaultClick = () => {}
const options = [
<Select.Option key={1}>
<span>Minor</span>
</Select.Option>,
<Select.Option key={2}>
<span className='u-textWarning'>Major</span>
</Select.Option>,
<Select.Option key={3}>
<span className='u-textDanger'>Critical</span>
</Select.Option>
]
/* global describe it expect */
describe('PriorityDropdown', () => {
it('renders minor priority selected markup', () => {
Expand All @@ -24,31 +36,12 @@ describe('PriorityDropdown', () => {
<Icon name='warning' className='s2'
parentClassName='u-textWarning' />
<span id='PriorityTitle'>Priority</span>
<Dropdown enabled isOpen={false}
onToggle={defaultClick}
className='dropdown-menu priority'>
<Dropdown.Button>
<a className='EditorDropdown-item'>
<span className={minorStyle}>{MINOR}</span>
<span className='arrow'>
<Icon className='n1' name='chevron-down' />
</span>
</a>
</Dropdown.Button>
<Dropdown.Content>
<ul>
<li className='EditorDropdown-item'
onClick={defaultClick}>
<span>Minor</span></li>
<li className='EditorDropdown-item'
onClick={defaultClick}>
<span className='u-textWarning'>Major</span></li>
<li className='EditorDropdown-item'
onClick={defaultClick}>
<span className='u-textDanger'>Critical</span></li>
</ul>
</Dropdown.Content>
</Dropdown>
<Select
defaultValue={MINOR}
style={{ width: '100%' }}
onChange={defaultClick}>
{options}
</Select>
</span>
)
expect(actual).toEqual(expected)
Expand All @@ -67,31 +60,13 @@ describe('PriorityDropdown', () => {
<Icon name='warning' className='s2'
parentClassName='u-textWarning' />
<span id='PriorityTitle'>Priority</span>
<Dropdown enabled isOpen={false}
onToggle={defaultClick}
className='dropdown-menu priority'>
<Dropdown.Button>
<a className='EditorDropdown-item'>
<span className={majorStyle}>{MAJOR}</span>
<span className='arrow'>
<Icon className='n1' name='chevron-down' />
</span>
</a>
</Dropdown.Button>
<Dropdown.Content>
<ul>
<li className='EditorDropdown-item'
onClick={defaultClick}>
<span>Minor</span></li>
<li className='EditorDropdown-item'
onClick={defaultClick}>
<span className='u-textWarning'>Major</span></li>
<li className='EditorDropdown-item'
onClick={defaultClick}>
<span className='u-textDanger'>Critical</span></li>
</ul>
</Dropdown.Content>
</Dropdown>
<Select
className={majorStyle}
defaultValue={MAJOR}
style={{ width: '100%' }}
onChange={defaultClick}>
{options}
</Select>
</span>
)
expect(actual).toEqual(expected)
Expand All @@ -110,31 +85,13 @@ describe('PriorityDropdown', () => {
<Icon name='warning' className='s2'
parentClassName='u-textWarning' />
<span id='PriorityTitle'>Priority</span>
<Dropdown enabled isOpen={false}
onToggle={defaultClick}
className='dropdown-menu priority'>
<Dropdown.Button>
<a className='EditorDropdown-item'>
<span className={criticalStyle}>{CRITICAL}</span>
<span className='arrow'>
<Icon className='n1' name='chevron-down' />
</span>
</a>
</Dropdown.Button>
<Dropdown.Content>
<ul>
<li className='EditorDropdown-item'
onClick={defaultClick}>
<span>Minor</span></li>
<li className='EditorDropdown-item'
onClick={defaultClick}>
<span className='u-textWarning'>Major</span></li>
<li className='EditorDropdown-item'
onClick={defaultClick}>
<span className='u-textDanger'>Critical</span></li>
</ul>
</Dropdown.Content>
</Dropdown>
<Select
className={criticalStyle}
defaultValue={CRITICAL}
style={{ width: '100%' }}
onChange={defaultClick}>
{options}
</Select>
</span>
)
expect(actual).toEqual(expected)
Expand Down
5 changes: 2 additions & 3 deletions server/zanata-frontend/src/app/editor/containers/RejectTranslation/index.js
View file
Expand Up @@ -48,9 +48,8 @@ export class RejectTranslation extends Component {
super(props)
this.state = this.defaultState
}
onPriorityChange = (event) => {
const selectedPriority = event.target.innerText
const priorityIdIndex = priorities.indexOf(event.target.innerText)
onPriorityChange = (selectedPriority) => {
const priorityIdIndex = priorities.indexOf(selectedPriority)
this.setState(prevState => ({
review: update(prevState.review, {
selectedPriority: {$set: selectedPriority},
Expand Down

0 comments on commit 965199c

Please sign in to comment.