lcms-engine 0.3.1 → 0.4.0

data/app/javascript/components/admin/picker/pickerWindowWrapper.jsx

@@ -1,11 +1,11 @@
-import React from 'react'
-import PaginationBoxView from '../../paginate/PaginationBoxView'
+import React from 'react';
+import PaginationBoxView from '../../paginate/PaginationBoxView';
 
 // eslint-disable-next-line no-unused-vars
 function pickerWindowWrapper(WrappedComponent, path) {
   return class extends React.Component {
     constructor(props) {
-      super(props)
+      super(props);
 
       this.state = {
         results: [],
@@ -14,73 +14,94 @@ function pickerWindowWrapper(WrappedComponent, path) {
           total_pages: 0,
         },
         q: null,
-      }
+      };
     }
 
     componentDidMount() {
-      this.fetch()
+      this.fetch();
     }
 
     fetch() {
       const data = {
         page: this.state.pagination.current_page,
         q: this.state.q,
-      }
-      const url = Routes[path].call(this, { ...data, ...this.state, ...this.props })
-      $.getJSON(url).then(x => this.setState({ ...x }))
+      };
+      const url = Routes[path].call(this, {
+        ...data,
+        ...this.state,
+        ...this.props,
+      });
+      $.getJSON(url).then(x => this.setState({ ...x }));
     }
 
     onFilterChange(field, event) {
-      this.setState({ [field]: event.target.value }, this.fetch)
+      this.setState({ [field]: event.target.value }, this.fetch);
     }
 
     pageClick(data) {
-      const selected = data.selected
-      this.setState({
-        ...this.state,
-        pagination: {
-          ...this.state.pagination,
-          current_page: selected + 1,
+      const selected = data.selected;
+      this.setState(
+        {
+          ...this.state,
+          pagination: {
+            ...this.state.pagination,
+            current_page: selected + 1,
+          },
         },
-      }, this.fetch)
+        this.fetch
+      );
     }
 
     pagination() {
-      const breakLabel = <li className="break"><a href="javascript:">...</a></li>
+      const breakLabel = (
+        <li className="break">
+          {/*
+            eslint-disable jsx-a11y/anchor-is-valid, no-script-url
+          */}
+          <a href="javascript:">...</a>
+          {/*
+            eslint-enable jsx-a11y/anchor-is-valid, no-script-url
+          */}
+        </li>
+      );
       return (
-        <PaginationBoxView previousLabel={'< Previous'}
-          nextLabel={ 'Next >' }
-          breakLabel={ breakLabel }
-          pageNum={ this.state.pagination.total_pages }
-          initialSelected={ this.state.pagination.current_page - 1 }
-          forceSelected={ this.state.pagination.current_page - 1 }
-          marginPagesDisplayed={ 2 }
-          pageRangeDisplayed={ 5 }
+        <PaginationBoxView
+          previousLabel={'< Previous'}
+          nextLabel={'Next >'}
+          breakLabel={breakLabel}
+          pageNum={this.state.pagination.total_pages}
+          initialSelected={this.state.pagination.current_page - 1}
+          forceSelected={this.state.pagination.current_page - 1}
+          marginPagesDisplayed={2}
+          pageRangeDisplayed={5}
           // eslint-disable-next-line react/jsx-no-bind
-          clickCallback={ this.pageClick.bind(this) }
-          containerClassName={ 'o-pagination o-page__wrap--row-nest' }
-          itemClassName={ 'o-pagination__item' }
-          nextClassName={ 'o-pagination__item--next' }
-          previousClassName={ 'o-pagination__item--prev' }
-          pagesClassName={ 'o-pagination__item--middle' }
-          subContainerClassName={ 'o-pagination__pages' }
-          activeClassName={ 'o-pagination__page--active' } />
-      )
+          clickCallback={this.pageClick.bind(this)}
+          containerClassName={'o-pagination o-page__wrap--row-nest'}
+          itemClassName={'o-pagination__item'}
+          nextClassName={'o-pagination__item--next'}
+          previousClassName={'o-pagination__item--prev'}
+          pagesClassName={'o-pagination__item--middle'}
+          subContainerClassName={'o-pagination__pages'}
+          activeClassName={'o-pagination__page--active'}
+        />
+      );
     }
 
     render() {
       return (
         <div className="o-picker">
-          <WrappedComponent { ...this.state } { ...this.props }
+          <WrappedComponent
+            {...this.state}
+            {...this.props}
             // eslint-disable-next-line react/jsx-no-bind
-            onFilterChange={ this.onFilterChange.bind(this) }
+            onFilterChange={this.onFilterChange.bind(this)}
             // eslint-disable-next-line react/jsx-no-bind
-            pagination={ this.pagination.bind(this) }
+            pagination={this.pagination.bind(this)}
           />
         </div>
-      )
+      );
     }
-  }
+  };
 }
 
-export default pickerWindowWrapper
+export default pickerWindowWrapper;

data/app/javascript/components/admin/resource-picker/ResourcePicker.jsx

@@ -1,81 +1,89 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import _ from 'lodash'
-import ResourcePickerWindow from './ResourcePickerWindow'
-import ResourcePickerResource from './ResourcePickerResource'
-import PickerButton from '../picker/PickerButton'
-import pickerWindowWrapper from '../picker/pickerWindowWrapper'
-import pickerModal from '../picker/pickerModal'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import ResourcePickerWindow from './ResourcePickerWindow';
+import ResourcePickerResource from './ResourcePickerResource';
+import PickerButton from '../picker/PickerButton';
+import pickerWindowWrapper from '../picker/pickerWindowWrapper';
+import pickerModal from '../picker/pickerModal';
+import { Foundation } from 'foundation-sites';
+import $ from 'jquery';
 
 class ResourcePicker extends React.Component {
   constructor(props) {
-    super(props)
+    super(props);
 
-    const resources = 'resources' in props ? props.resources : []
+    const resources = 'resources' in props ? props.resources : [];
 
     this.state = {
-      resources:  resources,
-    }
+      resources: resources,
+    };
   }
 
   get jqmodal() {
-    return $(this.modal)
+    return $(this.modal);
   }
 
   get allowMultiple() {
     if (_.isUndefined(this.props.allow_multiple) || this.props.allow_multiple === null) {
-      return true
+      return true;
     }
-    return this.props.allow_multiple
+    return this.props.allow_multiple;
   }
 
   componentDidMount() {
+    Foundation.addToJquery($);
     // eslint-disable-next-line no-undef
-    pickerModal.call(this)
+    pickerModal.call(this);
   }
 
   onClickSelect() {
     // eslint-disable-next-line no-undef
-    const pickerComponent = pickerWindowWrapper(ResourcePickerWindow, 'lcms_engine_admin_resource_picker_path')
-    const picker = React.createElement(pickerComponent, {
-      onSelectResource: this.selectResource.bind(this),
-    }, null)
-    ReactDOM.render(picker, this.modal)
-    this.jqmodal.foundation('open')
+    const pickerComponent = pickerWindowWrapper(ResourcePickerWindow, 'lcms_engine_admin_resource_picker_path');
+    const picker = React.createElement(
+      pickerComponent,
+      {
+        onSelectResource: this.selectResource.bind(this),
+      },
+      null
+    );
+    ReactDOM.render(picker, this.modal);
+    this.jqmodal.foundation('open');
   }
 
   selectResource(resource) {
-    this.jqmodal.foundation('close')
+    this.jqmodal.foundation('close');
 
-    const newResources = this.allowMultiple ?
-      [...this.state.resources, resource] :
-      [resource]
+    const newResources = this.allowMultiple ? [...this.state.resources, resource] : [resource];
 
     this.setState({
       ...this.state,
       resources: newResources,
-    })
+    });
   }
 
   removeResource(resource) {
     this.setState({
       ...this.state,
       resources: _.filter(this.state.resources, r => r.id !== resource.id),
-    })
+    });
   }
 
   render() {
     const resources = this.state.resources.map(resource => {
-      return <ResourcePickerResource
-        key={resource.id}
-        name={this.props.name}
-        resource={resource}
-        // eslint-disable-next-line react/jsx-no-bind
-        onClickClose={() => this.removeResource(resource)}
-      />
-    })
+      return (
+        <ResourcePickerResource
+          key={resource.id}
+          name={this.props.name}
+          resource={resource}
+          // eslint-disable-next-line react/jsx-no-bind
+          onClickClose={() => this.removeResource(resource)}
+        />
+      );
+    });
 
-    const input = <input type="hidden" name={this.props.name} value="" />
+    const input = <input type="hidden" name={this.props.name} value="" />;
 
     return (
       <PickerButton
@@ -84,10 +92,16 @@ class ResourcePicker extends React.Component {
         // eslint-disable-next-line react/jsx-no-bind
         onClick={this.onClickSelect.bind(this)}
         // eslint-disable-next-line react/jsx-no-bind
-        onRef={m => this.modal = m}
+        onRef={m => (this.modal = m)}
       />
-    )
+    );
   }
 }
 
-export default ResourcePicker
+ResourcePicker.propTypes = {
+  name: PropTypes.string,
+  resources: PropTypes.array,
+  allow_multiple: PropTypes.bool,
+};
+
+export default ResourcePicker;

data/app/javascript/components/admin/resource-picker/ResourcePickerResource.jsx

@@ -1,13 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
 function ResourcePickerResource(props) {
   return (
     <div className="o-assocpicker-selection">
       <input type="hidden" name={props.name} value={props.resource.id} />
       <div className="o-assocpicker-title">
         {props.resource.title}
-        <span className="o-assocpicker-close" onClick={props.onClickClose}>×</span>
+        <span className="o-assocpicker-close" onClick={props.onClickClose}>
+          ×
+        </span>
       </div>
     </div>
-  )
+  );
 }
 
-export default ResourcePickerResource
+ResourcePickerResource.propTypes = {
+  name: PropTypes.string,
+  resource: PropTypes.object,
+  onClickClose: PropTypes.func,
+};
+
+export default ResourcePickerResource;

data/app/javascript/components/admin/resource-picker/ResourcePickerWindow.jsx

@@ -1,20 +1,21 @@
-import React from 'react'
+import React from 'react';
+import PropTypes from 'prop-types';
 
 class ResourcePickerWindow extends React.Component {
   constructor(props) {
-    super(props)
+    super(props);
 
     this.typeOptions = [
       ['subject', 'subject'],
       ['grade', 'grade'],
       ['module', 'module'],
       ['unit', 'unit'],
-    ]
+    ];
 
     this.subjectOptions = [
       ['ela', 'ELA'],
       ['math', 'Math'],
-    ]
+    ];
 
     this.gradeOptions = [
       ['pk', 'prekindergarten'],
@@ -31,7 +32,7 @@ class ResourcePickerWindow extends React.Component {
       ['10', 'grade 10'],
       ['11', 'grade 11'],
       ['12', 'grade 12'],
-    ]
+    ];
 
     const initialState = {
       pagination: {
@@ -43,45 +44,59 @@ class ResourcePickerWindow extends React.Component {
       subject: null,
       grade: null,
       q: null,
-    }
+    };
 
-    this.state = { ...initialState, ...props }
+    this.state = { ...initialState, ...props };
   }
 
   filterElement(title, value, type, data) {
     return (
-      <label className="medium-3 columns">{ title }
-        <select value={value || ''} onChange={ this.props.onFilterChange.bind(this, type) }>
+      <label className="medium-3 columns">
+        {title}
+        <select
+          value={value || ''}
+          /* eslint-disable react/jsx-no-bind */
+          onChange={this.props.onFilterChange.bind(this, type)}
+        >
           <option />
           {data.map(([value, title]) => (
-            <option key={value} value={value}>{title}</option>
+            <option key={value} value={value}>
+              {title}
+            </option>
           ))}
         </select>
       </label>
-    )
+    );
   }
 
   selectResource(resource) {
     if ('onSelectResource' in this.props) {
-      this.props.onSelectResource(resource)
+      this.props.onSelectResource(resource);
     }
   }
 
   render() {
-    const { grade, q, subject, type } = this.props
+    const { grade, q, subject, type } = this.props;
 
+    /* eslint-disable jsx-a11y/anchor-is-valid */
     return (
       <div className="o-assocpicker">
         <div className="o-page">
           <div className="o-page__module">
             <h4 className="text-center">Select resource</h4>
             <div className="row">
-              { this.filterElement('Curriculum Type', type, 'type', this.typeOptions) }
-              { this.filterElement('Subject', subject, 'subject', this.subjectOptions) }
-              { this.filterElement('Grade', grade, 'grade', this.gradeOptions) }
+              {this.filterElement('Curriculum Type', type, 'type', this.typeOptions)}
+              {this.filterElement('Subject', subject, 'subject', this.subjectOptions)}
+              {this.filterElement('Grade', grade, 'grade', this.gradeOptions)}
 
-              <label className="medium-3 columns">Title
-                <input type="text" value={q || ''} onChange={ this.props.onFilterChange.bind(this, 'q') } />
+              <label className="medium-3 columns">
+                Title
+                <input
+                  type="text"
+                  value={q || ''}
+                  /* eslint-disable react/jsx-no-bind */
+                  onChange={this.props.onFilterChange.bind(this, 'q')}
+                />
               </label>
             </div>
           </div>
@@ -98,18 +113,32 @@ class ResourcePickerWindow extends React.Component {
               <tbody>
                 {this.props.results.map(resource => (
                   <tr key={resource.id}>
+                    {/*
+                      eslint-disable react/jsx-no-bind
+                    */}
                     <td onClick={this.selectResource.bind(this, resource)}>{resource.title}</td>
                   </tr>
                 ))}
               </tbody>
             </table>
 
-            { this.props.pagination() }
+            {this.props.pagination()}
           </div>
         </div>
       </div>
-    )
+    );
   }
 }
 
-export default ResourcePickerWindow
+ResourcePickerWindow.propTypes = {
+  onFilterChange: PropTypes.func,
+  onSelectResource: PropTypes.func,
+  grade: PropTypes.string,
+  q: PropTypes.string,
+  subject: PropTypes.string,
+  type: PropTypes.string,
+  results: PropTypes.array,
+  pagination: PropTypes.func,
+};
+
+export default ResourcePickerWindow;

data/app/javascript/components/paginate/PageView.jsx

@@ -1,29 +1,41 @@
 // from https://github.com/AdeleD/react-paginate (converted)
 
-import React from 'react'
+import React from 'react';
+import PropTypes from 'prop-types';
 
 // eslint-disable-next-line no-unused-vars
 class PageView extends React.Component {
   render() {
-    const linkClassName = this.props.pageLinkClassName
-    let cssClassName = this.props.pageClassName
+    const linkClassName = this.props.pageLinkClassName;
+    let cssClassName = this.props.pageClassName;
 
     if (this.props.selected) {
-      if (typeof(cssClassName) !== 'undefined') {
-        cssClassName = cssClassName + ' ' + this.props.activeClassName
+      if (typeof cssClassName !== 'undefined') {
+        cssClassName = cssClassName + ' ' + this.props.activeClassName;
       } else {
-        cssClassName = this.props.activeClassName
+        cssClassName = this.props.activeClassName;
       }
     }
 
+    /* eslint-disable jsx-a11y/anchor-is-valid */
     return (
       <li className={cssClassName}>
         <a onClick={this.props.onClick} className={linkClassName}>
           {this.props.page}
         </a>
       </li>
-    )
+    );
+    /* eslint-enable jsx-a11y/anchor-is-valid */
   }
 }
 
-export default PageView
+PageView.propTypes = {
+  pageLinkClassName: PropTypes.string,
+  pageClassName: PropTypes.string,
+  selected: PropTypes.bool,
+  activeClassName: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
+  page: PropTypes.number,
+};
+
+export default PageView;