@performant-software/semantic-components 1.1.0 → 1.1.1-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.1.0",
+  "version": "1.1.1-beta.1",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,7 +12,7 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/shared-components": "^1.1.0",
+    "@performant-software/shared-components": "^1.1.1-beta.1",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",

package/src/components/AssociatedDropdown.js

@@ -2,7 +2,12 @@
 
 import { Timer } from '@performant-software/shared-components';
 import React, { Component, type ComponentType } from 'react';
-import { Button, Dropdown, Message } from 'semantic-ui-react';
+import {
+  Button,
+  Dropdown,
+  Message,
+  type ButtonProps
+} from 'semantic-ui-react';
 import _ from 'underscore';
 import EditModal from './EditModal';
 import i18n from '../i18n/i18n';
@@ -16,6 +21,7 @@ type Option = {
 };
 
 type Props = {
+  buttons?: Array<ButtonProps>,
   className?: string,
   collectionName: string,
   header?: ComponentType<any>,
@@ -45,6 +51,10 @@ type State = {
   value: ?number | ?string
 };
 
+const BUTTON_ADD = 'add';
+const BUTTON_CLEAR = 'clear';
+const BUTTON_EDIT = 'edit';
+
 const TIMEOUT = 500;
 
 class AssociatedDropdown extends Component<Props, State> {
@@ -243,13 +253,33 @@ class AssociatedDropdown extends Component<Props, State> {
       return null;
     }
 
+    return this.renderButton(BUTTON_ADD, {
+      basic: true,
+      content: i18n.t('Common.buttons.add'),
+      icon: 'plus',
+      onClick: () => this.setState({ modalAdd: true }),
+      type: 'button'
+    });
+  }
+
+  /**
+   * Renders the button with the passed name using the provided props.
+   *
+   * @param name
+   * @param defaults
+   *
+   * @returns {JSX.Element|null}
+   */
+  renderButton(name, defaults) {
+    const button = _.findWhere(this.props.buttons, { name }) || {};
+
+    if (button.accept && !button.accept()) {
+      return null;
+    }
+
     return (
       <Button
-        basic
-        content={i18n.t('Common.buttons.add')}
-        icon='plus'
-        onClick={() => this.setState({ modalAdd: true })}
-        type='button'
+        {..._.defaults(button, defaults)}
       />
     );
   }
@@ -264,15 +294,13 @@ class AssociatedDropdown extends Component<Props, State> {
       return null;
     }
 
-    return (
-      <Button
-        basic
-        content={i18n.t('Common.buttons.clear')}
-        icon='times'
-        onClick={this.onClear.bind(this)}
-        type='button'
-      />
-    );
+    return this.renderButton(BUTTON_CLEAR, {
+      basic: true,
+      content: i18n.t('Common.buttons.clear'),
+      icon: 'times',
+      onClick: this.onClear.bind(this),
+      type: 'button'
+    });
   }
 
   /**
@@ -285,15 +313,13 @@ class AssociatedDropdown extends Component<Props, State> {
       return null;
     }
 
-    return (
-      <Button
-        basic
-        content={i18n.t('Common.buttons.edit')}
-        icon='pencil'
-        onClick={() => this.setState({ modalEdit: true })}
-        type='button'
-      />
-    );
+    return this.renderButton(BUTTON_EDIT, {
+      basic: true,
+      content: i18n.t('Common.buttons.edit'),
+      icon: 'pencil',
+      onClick: () => this.setState({ modalEdit: true }),
+      type: 'button'
+    });
   }
 
   /**

package/src/components/DataTableColumnSelector.js

@@ -43,7 +43,12 @@ type Props = ListProps & {
    * If a <code>render</code> callback is provided, the item will be passed to the function and the return JSX
    * will display as the property value.
    */
-  columns: Array<Column>
+  columns: Array<Column>,
+
+  /**
+   * If <code>true</code>, columns can be shown/hidden by the user.
+   */
+  configurable?: boolean
 };
 
 type State = {
@@ -139,7 +144,9 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
           {...this.props}
           className={`data-table-column-selector ${this.props.className}`}
           columns={this.state.columns}
-          renderListHeader={this.renderHeader.bind(this)}
+          renderListHeader={this.props.configurable
+            ? this.renderHeader.bind(this)
+            : undefined}
         />
       );
     }

package/src/components/ListTable.js

@@ -9,11 +9,6 @@ import useDataList, { SORT_ASCENDING, SORT_DESCENDING, type Props as DataListPro
 import './ListTable.css';
 
 type Props = DataListProps & DataTableProps & {
-  /**
-   * If true, columns can be shown/hidden by the user.
-   */
-  configurable?: boolean,
-
   /**
    * The name of the default sort column.
    */

package/types/components/AssociatedDropdown.js.flow

@@ -2,7 +2,12 @@
 
 import { Timer } from '@performant-software/shared-components';
 import React, { Component, type ComponentType } from 'react';
-import { Button, Dropdown, Message } from 'semantic-ui-react';
+import {
+  Button,
+  Dropdown,
+  Message,
+  type ButtonProps
+} from 'semantic-ui-react';
 import _ from 'underscore';
 import EditModal from './EditModal';
 import i18n from '../i18n/i18n';
@@ -16,6 +21,7 @@ type Option = {
 };
 
 type Props = {
+  buttons?: Array<ButtonProps>,
   className?: string,
   collectionName: string,
   header?: ComponentType<any>,
@@ -45,6 +51,10 @@ type State = {
   value: ?number | ?string
 };
 
+const BUTTON_ADD = 'add';
+const BUTTON_CLEAR = 'clear';
+const BUTTON_EDIT = 'edit';
+
 const TIMEOUT = 500;
 
 class AssociatedDropdown extends Component<Props, State> {
@@ -243,13 +253,33 @@ class AssociatedDropdown extends Component<Props, State> {
       return null;
     }
 
+    return this.renderButton(BUTTON_ADD, {
+      basic: true,
+      content: i18n.t('Common.buttons.add'),
+      icon: 'plus',
+      onClick: () => this.setState({ modalAdd: true }),
+      type: 'button'
+    });
+  }
+
+  /**
+   * Renders the button with the passed name using the provided props.
+   *
+   * @param name
+   * @param defaults
+   *
+   * @returns {JSX.Element|null}
+   */
+  renderButton(name, defaults) {
+    const button = _.findWhere(this.props.buttons, { name }) || {};
+
+    if (button.accept && !button.accept()) {
+      return null;
+    }
+
     return (
       <Button
-        basic
-        content={i18n.t('Common.buttons.add')}
-        icon='plus'
-        onClick={() => this.setState({ modalAdd: true })}
-        type='button'
+        {..._.defaults(button, defaults)}
       />
     );
   }
@@ -264,15 +294,13 @@ class AssociatedDropdown extends Component<Props, State> {
       return null;
     }
 
-    return (
-      <Button
-        basic
-        content={i18n.t('Common.buttons.clear')}
-        icon='times'
-        onClick={this.onClear.bind(this)}
-        type='button'
-      />
-    );
+    return this.renderButton(BUTTON_CLEAR, {
+      basic: true,
+      content: i18n.t('Common.buttons.clear'),
+      icon: 'times',
+      onClick: this.onClear.bind(this),
+      type: 'button'
+    });
   }
 
   /**
@@ -285,15 +313,13 @@ class AssociatedDropdown extends Component<Props, State> {
       return null;
     }
 
-    return (
-      <Button
-        basic
-        content={i18n.t('Common.buttons.edit')}
-        icon='pencil'
-        onClick={() => this.setState({ modalEdit: true })}
-        type='button'
-      />
-    );
+    return this.renderButton(BUTTON_EDIT, {
+      basic: true,
+      content: i18n.t('Common.buttons.edit'),
+      icon: 'pencil',
+      onClick: () => this.setState({ modalEdit: true }),
+      type: 'button'
+    });
   }
 
   /**

package/types/components/DataTableColumnSelector.js.flow

@@ -43,7 +43,12 @@ type Props = ListProps & {
    * If a <code>render</code> callback is provided, the item will be passed to the function and the return JSX
    * will display as the property value.
    */
-  columns: Array<Column>
+  columns: Array<Column>,
+
+  /**
+   * If <code>true</code>, columns can be shown/hidden by the user.
+   */
+  configurable?: boolean
 };
 
 type State = {
@@ -139,7 +144,9 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
           {...this.props}
           className={`data-table-column-selector ${this.props.className}`}
           columns={this.state.columns}
-          renderListHeader={this.renderHeader.bind(this)}
+          renderListHeader={this.props.configurable
+            ? this.renderHeader.bind(this)
+            : undefined}
         />
       );
     }

package/types/components/ListTable.js.flow

@@ -9,11 +9,6 @@ import useDataList, { SORT_ASCENDING, SORT_DESCENDING, type Props as DataListPro
 import './ListTable.css';
 
 type Props = DataListProps & DataTableProps & {
-  /**
-   * If true, columns can be shown/hidden by the user.
-   */
-  configurable?: boolean,
-
   /**
    * The name of the default sort column.
    */