@performant-software/semantic-components 0.5.2 → 0.5.5

package/src/i18n/en.json

@@ -13,6 +13,7 @@
       "add": "Add",
       "cancel": "Cancel",
       "clear": "Clear",
+      "close": "Close",
       "edit": "Edit",
       "ok": "OK",
       "save": "Save"
@@ -60,6 +61,13 @@
     },
     "loading": "Loading"
   },
+  "DataView": {
+    "labels": {
+      "details": "Details",
+      "noSort": "No sort",
+      "sortBy": "Sort by {{column}}"
+    }
+  },
   "EditProvider": {
     "errors": {
       "general": "Something went wrong while saving the record. Please make sure all required fields are filled out.",
@@ -176,6 +184,31 @@
     "loginErrorHeader": "Invalid Credentials",
     "password": "Password"
   },
+  "ReferenceCodeModal": {
+    "labels": {
+      "name": "Name"
+    },
+    "title": {
+      "add": "Add Reference Code",
+      "edit": "Edit Reference Code"
+    }
+  },
+  "ReferenceTableModal": {
+    "labels": {
+      "key": "Key",
+      "name": "Name",
+      "referenceCodes": "Reference Codes"
+    },
+    "referenceCodes": {
+      "columns": {
+        "name": "Name"
+      }
+    },
+    "title": {
+      "add": "Add Reference Table",
+      "edit": "Edit Reference Table"
+    }
+  },
   "RemoteDropdown": {
     "labels": {
       "add": "Add",

package/src/index.js

@@ -1,5 +1,8 @@
 // @flow
 
+// Semantic UI styles
+import './css/style.less';
+
 // Components
 export { default as AccordionDataList } from './components/AccordionDataList';
 export { default as AccordionList } from './components/AccordionList';
@@ -12,6 +15,7 @@ export { default as ColorButton } from './components/ColorButton';
 export { default as ColorPickerModal } from './components/ColorPickerModal';
 export { default as useDataList } from './components/DataList';
 export { default as DataTable } from './components/DataTable';
+export { default as DataView } from './components/DataView';
 export { default as DateInput } from './components/DateInput';
 export { default as DatePicker } from './components/DatePicker';
 export { default as DescriptorField } from './components/DescriptorField';
@@ -47,10 +51,16 @@ export { default as MasonryGrid } from './components/MasonryGrid';
 export { default as MediaGallery } from './components/MediaGallery';
 export { default as MediaGrid } from './components/MediaGrid';
 export { default as MediaList } from './components/MediaList';
+export { default as MenuBar } from './components/MenuBar';
+export { default as MenuSidebar } from './components/MenuSidebar';
 export { default as ModalDropdown } from './components/ModalDropdown';
 export { default as NestedAccordion } from './components/NestedAccordion';
 export { default as PlayButton } from './components/PlayButton';
 export { default as PhotoViewer } from './components/PhotoViewer';
+export { default as ReferenceCodeDropdown } from './components/ReferenceCodeDropdown';
+export { default as ReferenceCodeModal } from './components/ReferenceCodeModal';
+export { default as ReferenceTableModal } from './components/ReferenceTableModal';
+export { default as ReferenceTablesList } from './components/ReferenceTablesList';
 export { default as RemoteDropdown } from './components/RemoteDropdown';
 export { default as SaveButton } from './components/SaveButton';
 export { default as Section } from './components/Section';

package/types/components/AccordionDataList.js.flow

@@ -61,6 +61,7 @@ const Accordion = useList((props: AccordionProps) => {
       <Button.Group>
         { _.map(actions, (action, index) => (
           <Button
+            aria-label={action.name}
             basic
             color={action.color}
             icon={action.icon}
@@ -166,11 +167,13 @@ const AccordionDataList = (props: Props) => {
         }}
       >
         <Button
+          aria-label='Sort by'
           content={sortValue}
           icon={props.sortDirection === SORT_ASCENDING ? 'sort alphabet up' : 'sort alphabet down'}
           onClick={(e) => sortDropdown.current && sortDropdown.current.handleClick(e)}
         />
         <Dropdown
+          aria-label='Sort by toggle'
           className='button icon'
           floating
           options={_.map(props.sort, (sort) => ({

package/types/components/AccordionList.js.flow

@@ -267,6 +267,7 @@ class AccordionList extends Component<Props, State> {
           className='accordion-header'
         >
           <Input
+            aria-label='Search'
             autoFocus
             className='search'
             icon='search'
@@ -329,6 +330,7 @@ class AccordionList extends Component<Props, State> {
 
     return (
       <Button
+        aria-label='Add'
         basic
         compact
         icon='plus'
@@ -349,6 +351,7 @@ class AccordionList extends Component<Props, State> {
 
     return (
       <Checkbox
+        aria-label='Select All'
         onClick={(e, el) => this.props.onSelectAll(el, toBeSelected, this.state.items, e)}
         checked={!toBeSelected.length}
       />
@@ -399,6 +402,7 @@ class AccordionList extends Component<Props, State> {
 
     return (
       <Button
+        aria-label='Delete'
         basic
         compact
         icon='trash'
@@ -421,6 +425,7 @@ class AccordionList extends Component<Props, State> {
 
     return (
       <Button
+        aria-label='Edit'
         basic
         compact
         icon='edit'
@@ -443,6 +448,7 @@ class AccordionList extends Component<Props, State> {
 
     return (
       <Button
+        aria-label='Copy'
         basic
         compact
         icon='copy'
@@ -551,6 +557,7 @@ class AccordionList extends Component<Props, State> {
     const selected = this.props.selectedRows.find((r) => r.id === item.id);
     return (
       <Checkbox
+        aria-label='Select'
         key={`select-checkbox-${item.id}`}
         className='row-select-checkbox'
         onClick={(e, el) => this.props.onRowSelect(el, item, e)}

package/types/components/ArrowButtons.js.flow

@@ -23,11 +23,13 @@ const ArrowButtons = (props: Props) => (
     vertical
   >
     <Button
+      aria-label='Move Right'
       basic
       icon='arrow right'
       onClick={props.onRight.bind(this)}
     />
     <Button
+      aria-label='Move Left'
       basic
       icon='arrow left'
       onClick={props.onLeft.bind(this)}

package/types/components/CancelButton.js.flow

@@ -11,10 +11,9 @@ type Props = {
 
 const CancelButton = (props: Props) => (
   <Button
+    basic
     disabled={props.disabled}
-    inverted
     onClick={props.onClick.bind(this)}
-    primary
     size='medium'
     type='button'
   >

package/types/components/DataList.js.flow

@@ -19,10 +19,10 @@ type Props = {
     props?: any,
     onChange?: (filter: any) => Promise<any>
   },
-  onDelete: (item: any) => Promise<any>,
+  onDelete?: (item: any) => Promise<any>,
   onDeleteAll?: () => Promise<any>,
   onLoad: (params: any) => Promise<any>,
-  onSave: (item: any) => Promise<any>,
+  onSave?: (item: any) => Promise<any>,
   perPageOptions?: Array<number>,
   polling?: number,
   resolveErrors?: (error: any) => Array<string>,
@@ -251,6 +251,10 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
      * @returns {Q.Promise<any> | Promise<R> | Promise<any> | void | *}
      */
     onDelete(selectedItem: any) {
+      if (!this.props.onDelete) {
+        return Promise.resolve();
+      }
+
       return this.props
         .onDelete(selectedItem)
         .then(this.afterDelete.bind(this))
@@ -333,6 +337,10 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
      * @returns {Q.Promise<any> | Promise<R> | Promise<any> | void | *}
      */
     onSave(item: any) {
+      if (!this.props.onSave) {
+        return Promise.resolve();
+      }
+
       return Promise.resolve(this.props.onSave(item))
         .then(() => this.setState({ saved: true }, this.fetchData.bind(this)));
     }
@@ -463,6 +471,7 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
 
       return (
         <Input
+          aria-label='Search'
           type='text'
           icon='search'
           input={{

package/types/components/DataTable.js.flow

@@ -240,6 +240,7 @@ class DataTable extends Component<Props, State> {
 
     const actionButton = (
       <Button
+        aria-label={action.name}
         basic
         compact
         color={action.color}

package/types/components/DataTableColumnSelector.js.flow

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Component, type ComponentType } from 'react';
+import React, { Component, type ComponentType, type Element } from 'react';
 import { Checkbox, Dropdown, Icon } from 'semantic-ui-react';
 import _ from 'underscore';
 import Draggable from './Draggable';
@@ -10,7 +10,8 @@ import type { Column } from './DataTable';
 
 type Props = {
   className: string,
-  columns: Array<Column>
+  columns: Array<Column>,
+  renderListHeader?: () => Element<any>
 };
 
 type State = {
@@ -107,37 +108,45 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
      */
     renderHeader() {
       return (
-        <Dropdown
-          basic
-          button
-          icon='cog'
-          className='icon configure-button open-right'
-          simple
-        >
-          <Dropdown.Menu>
-            { this.state.columns
-              .filter((c) => c.label && c.label.length)
-              .map((c, index) => (
-                <Draggable
-                  id={c.name}
-                  index={index}
-                  key={c.name}
-                  onDrag={this.onDrag.bind(this)}
-                >
-                  <Dropdown.Item>
-                    <Icon
-                      name='bars'
-                    />
-                    <Checkbox
-                      checked={!c.hidden}
-                      label={c.label}
-                      onClick={this.onColumnCheckbox.bind(this, c)}
-                    />
-                  </Dropdown.Item>
-                </Draggable>
-              ))}
-          </Dropdown.Menu>
-        </Dropdown>
+        <>
+          { this.props.renderListHeader && this.props.renderListHeader() }
+          <Dropdown
+            aria-label='Select Columns'
+            basic
+            button
+            icon='cog'
+            className='icon configure-button open-right'
+            closeOnBlur={false}
+          >
+            <Dropdown.Menu>
+              { this.state.columns
+                .filter((c) => c.label && c.label.length)
+                .map((c, index) => (
+                  <Draggable
+                    id={c.name}
+                    index={index}
+                    key={c.name}
+                    onDrag={this.onDrag.bind(this)}
+                  >
+                    <Dropdown.Item
+                      aria-dropeffect='move'
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <Icon
+                        name='bars'
+                      />
+                      <Checkbox
+                        aria-label='Select Column'
+                        checked={!c.hidden}
+                        label={c.label}
+                        onClick={this.onColumnCheckbox.bind(this, c)}
+                      />
+                    </Dropdown.Item>
+                  </Draggable>
+                ))}
+            </Dropdown.Menu>
+          </Dropdown>
+        </>
       );
     }
   }