Skip to content

Commit

Permalink
Abstract Story__Section to a Component (#530)
Browse files Browse the repository at this point in the history
* Create ExpandedStorySection and use it in the components

* Added React Fragment to components
  • Loading branch information
kostadriano authored and talyssonoc committed Mar 15, 2019
1 parent b45621d commit d8d21b0
Show file tree
Hide file tree
Showing 38 changed files with 364 additions and 327 deletions.
6 changes: 3 additions & 3 deletions app/assets/javascripts/components/jquery_wrappers/Popover.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';

export default class Popover extends Component {
Expand Down Expand Up @@ -39,12 +39,12 @@ export default class Popover extends Component {

render() {
return (
<div>
<Fragment>
{ this.props.children({ ref: this.saveChildRef }) }
<div style={{ display: 'none' }}>
{ this.props.renderContent({ ref: this.saveContentRef })}
</div>
</div>
</Fragment>
);
}
};
Expand Down
6 changes: 3 additions & 3 deletions app/assets/javascripts/components/projects/ProjectList.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { Fragment } from 'react';
import ProjectCard from 'components/projects/ProjectCard';

export default class ProjectList extends React.Component {
Expand All @@ -14,12 +14,12 @@ export default class ProjectList extends React.Component {
const { projects, title } = this.props

return(
<div>
<Fragment>
<div className="col-md-12 project-list-title">
<h4><i className="mi md-20 heading-icon">view_module</i> { title } | { projects.length }</h4>
</div>
{ this.cards() }
</div>
</Fragment>
);
}
}
6 changes: 3 additions & 3 deletions app/assets/javascripts/components/projects/ProjectSearch.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { Fragment } from 'react';
import Project from 'models/project';
import ProjectList from 'components/projects/ProjectList';

Expand Down Expand Up @@ -75,7 +75,7 @@ export default class ProjectSearch extends React.Component {

render() {
return(
<div>
<Fragment>
<div className="search-projects">
<div className="form-group col-md-12">
<div className="input-group">
Expand Down Expand Up @@ -103,7 +103,7 @@ export default class ProjectSearch extends React.Component {
</div>
{ this.renderProjectList(this.state.visibleProjects.joined) }
{ this.renderProjectList(this.state.visibleProjects.unjoined) }
</div>
</Fragment>
);
}
};
6 changes: 3 additions & 3 deletions app/assets/javascripts/components/stories/Iteration.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';

const propTypes = {
Expand All @@ -9,10 +9,10 @@ const propTypes = {

const Iteration = ({ number, startDate, points }) => {
return (
<div>
<Fragment>
{number} - {startDate}
<span className="points">{points}</span>
</div>
</Fragment>
);
}

Expand Down
6 changes: 3 additions & 3 deletions app/assets/javascripts/components/stories/Stories.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React, { Fragment } from "react";
import StoryItem from "../story/StoryItem";

const Stories = ({ stories }) => {
Expand All @@ -7,11 +7,11 @@ const Stories = ({ stories }) => {
}

return (
<div>
<Fragment>
{stories.map(story => (
<StoryItem key={story.id} story={story} />
))}
</div>
</Fragment>
);
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Dropzone from 'react-dropzone';
import AttachmentsList from '../attachment/AttachmentList';
import { upload, acceptedMimeTypes } from '../../../models/beta/attachment';
import { editingStoryPropTypesShape } from '../../../models/beta/story';
import ExpandedStorySection from './ExpandedStorySection';

class ExpandedStoryAttachments extends React.Component {
constructor(props) {
Expand Down Expand Up @@ -56,45 +57,43 @@ class ExpandedStoryAttachments extends React.Component {

render() {
const { story, onDelete } = this.props;
return (
<div className="Story__section">
<div className="Story__section-title">
{I18n.t('story.attachments')}
</div>

<div className="Story__section__attachments">
<Dropzone
onDrop={this.onFileDrop}
accept={acceptedMimeTypes()}
disabled={this.state.loading}
multiple={false}
>
{({ getRootProps, getInputProps, isDragActive, isDragReject }) => {
const className = this.dropzoneClassName({ isDragActive, isDragReject })
return (
<ExpandedStorySection
title={I18n.t('story.attachments')}
identifier="attachments"
>
<Dropzone
onDrop={this.onFileDrop}
accept={acceptedMimeTypes()}
disabled={this.state.loading}
multiple={false}
>
{({ getRootProps, getInputProps, isDragActive, isDragReject }) => {
const className = this.dropzoneClassName({ isDragActive, isDragReject })

return (
<div
{...getRootProps()}
className={`btn btn-success attachments-dropzone ${className}`}
>
<input {...getInputProps()} />
<i className="mi md-20">cloud_upload</i>
<div>
{!isDragReject ?
I18n.t('upload_new_file') :
I18n.t('reject_new_file')}
</div>
return (
<div
{...getRootProps()}
className={`btn btn-success attachments-dropzone ${className}`}
>
<input {...getInputProps()} />
<i className="mi md-20">cloud_upload</i>
<div>
{!isDragReject ?
I18n.t('upload_new_file') :
I18n.t('reject_new_file')}
</div>
)
}}
</Dropzone>
</div>
)
}}
</Dropzone>

<AttachmentsList
files={story._editing.documents}
onDelete={onDelete}
/>
</div>
</div>
<AttachmentsList
files={story._editing.documents}
onDelete={onDelete}
/>
</ExpandedStorySection>
);
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import Markdown from '../../Markdown';
import { editingStoryPropTypesShape } from '../../../models/beta/story';
import ExpandedStorySection from './ExpandedStorySection';

class ExpandedStoryDescription extends React.Component {
constructor(props) {
Expand Down Expand Up @@ -50,16 +51,14 @@ class ExpandedStoryDescription extends React.Component {
const { story } = this.props;

return (
<div className="Story__section">
<div className="Story__section-title">
{ I18n.t('activerecord.attributes.story.description') }
</div>

<ExpandedStorySection
title={I18n.t('activerecord.attributes.story.description')}
identifier="description"
>
{
this.state.editing
? (
this.descriptionTextArea(story._editing.description || '')
) : (
? this.descriptionTextArea(story._editing.description || '')
: (
<div onClick={this.toggleField} className='story-description-content'>
{
story.description
Expand All @@ -69,7 +68,7 @@ class ExpandedStoryDescription extends React.Component {
</div>
)
}
</div>
</ExpandedStorySection>
);
};
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,30 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { isFeature, editingStoryPropTypesShape } from '../../../models/beta/story';
import { projectPropTypesShape } from '../../../models/beta/project';
import ExpandedStorySection from './ExpandedStorySection';

export const ExpandedStoryEstimate = (props) => {
const { project, story, onEdit } = props;

return (
<div className="Story__section">
<div className="Story__section-title">
{ I18n.t('activerecord.attributes.story.estimate') }
</div>

<select
value={story._editing.estimate}
className="form-control input-sm"
onChange={(event) => onEdit({ estimate: parseInt(event.target.value) })}
disabled={!isFeature(story._editing)}
>
<option value=''>
{ I18n.t('story.no_estimate') }
</option>
{
project.pointValues.map((value) => (
<option value={value} key={value}>
{ value }
</option>
))
}
</select>
</div>
);
};
export const ExpandedStoryEstimate = ({ project, story, onEdit }) =>
<ExpandedStorySection
title={I18n.t('activerecord.attributes.story.estimate')}
>
<select
value={story._editing.estimate}
className="form-control input-sm"
onChange={(event) => onEdit({ estimate: parseInt(event.target.value) })}
disabled={!isFeature(story._editing)}
>
<option value=''>
{I18n.t('story.no_estimate')}
</option>
{
project.pointValues.map((value) => (
<option value={value} key={value}>
{value}
</option>
))
}
</select>
</ExpandedStorySection>

ExpandedStoryEstimate.propTypes = {
project: projectPropTypesShape.isRequired,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import ReactTags from 'react-tag-autocomplete';
import PropTypes from 'prop-types';
import { editingStoryPropTypesShape } from '../../../models/beta/story';
import ExpandedStorySection from './ExpandedStorySection';

class ExpandedStoryLabels extends React.Component {
constructor(props) {
Expand Down Expand Up @@ -33,27 +34,24 @@ class ExpandedStoryLabels extends React.Component {
const { labels } = story._editing;

return (
<div className="Story__section">
<div className="Story__section-title">
{I18n.t('activerecord.attributes.story.labels')}
</div>
{
<ReactTags
tags={labels}
handleDelete={this.handleDelete}
suggestions={projectLabels}
handleAddition={this.handleAddition}
allowNew={true}
placeholder={I18n.t('add new label')}
allowBackspace={false}
addOnBlur={true}
delimiterChars={[',', ' ']}
autoresize={false}
autofocus={false}
/>
}
</div>
);
<ExpandedStorySection
title={I18n.t('activerecord.attributes.story.labels')}
>
<ReactTags
tags={labels}
handleDelete={this.handleDelete}
suggestions={projectLabels}
handleAddition={this.handleAddition}
allowNew={true}
placeholder={I18n.t('add new label')}
allowBackspace={false}
addOnBlur={true}
delimiterChars={[',', ' ']}
autoresize={false}
autofocus={false}
/>
</ExpandedStorySection>
)
}
};

Expand Down
Loading

0 comments on commit d8d21b0

Please sign in to comment.