@performant-software/semantic-components 0.5.1

package/index.js

@@ -0,0 +1 @@
+module.exports = require('./build/index');

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@performant-software/semantic-components",
+  "version": "0.5.1",
+  "description": "A package of shared components based on the Semantic UI Framework.",
+  "license": "MIT",
+  "main": "./build/index.js",
+  "style": "./build/styles.css",
+  "scripts": {
+    "build": "webpack --mode production && flow-copy-source -v src types",
+    "postinstall": "yarn build"
+  },
+  "dependencies": {
+    "@performant-software/shared-components": "^0.5.1",
+    "@react-google-maps/api": "^2.8.1",
+    "flow-copy-source": "^2.0.9",
+    "i18next": "^19.4.4",
+    "react-calendar": "^3.3.0",
+    "react-color": "^2.18.1",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
+    "react-i18next": "^11.4.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-uuid": "^1.0.2",
+    "semantic-ui-css": "^2.4.1",
+    "semantic-ui-react": "^2.1.2",
+    "underscore": "^1.13.2"
+  },
+  "peerDependencies": {
+    "react": ">= 16.13.1 < 18.0.0",
+    "react-dom": ">= 16.13.1 < 18.0.0"
+  },
+  "devDependencies": {
+    "@performant-software/webpack-config": "^0.5.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}

package/src/components/AccordionDataList.css

@@ -0,0 +1,8 @@
+.accordion-data-list {
+  margin-bottom: 1em;
+  margin-top: 1em;
+}
+
+.accordion-data-list .ui.styled.accordion div[index="0"] .title {
+  border-top: none;
+}

package/src/components/AccordionDataList.js

@@ -0,0 +1,224 @@
+// @flow
+
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  type Element
+} from 'react';
+import _ from 'underscore';
+import { Button, Checkbox, Dropdown } from 'semantic-ui-react';
+import NestedAccordion from './NestedAccordion';
+import useDataList, { SORT_ASCENDING } from './DataList';
+import useList, { type Props as ListProps } from './List';
+import './AccordionDataList.css';
+
+type Sort = {
+  key: any,
+  value: any,
+  text: string,
+  direction?: string
+};
+
+type Props = ListProps & {
+  getChildItems: (items: ?Array<any>, item: any) => Array<any>,
+  getRootItems: (items: ?Array<any>) => Array<any>,
+  page: number,
+  onInit: () => void,
+  onSort: (column: string, direction: ?string, page?: number) => void,
+  selectable: boolean,
+  sort?: Array<Sort>,
+  sortColumn?: string,
+  sortDirection?: string
+};
+
+type AccordionProps = ListProps & {
+  getChildItems: (items: Array<any>, item: any) => Array<any>,
+  onItemToggle: (item: any) => void,
+  onRowSelect: (?any, ?any, ?any) => void,
+  renderItem: (item: any) => Element<any>,
+  rootItems: Array<any>,
+  selectable: boolean,
+  selectedRows: Array<{id: number}>,
+  showToggle: (item: any) => boolean
+};
+
+const Accordion = useList((props: AccordionProps) => {
+  /**
+   * Renders the actions for the passed item.
+   *
+   * @type {(function(*=): (null|*))|*}
+   */
+  const renderActions = useCallback((item) => {
+    const actions = _.filter(props.actions, (action) => !action.accept || action.accept(item));
+
+    if (_.isEmpty(actions)) {
+      return null;
+    }
+
+    return (
+      <Button.Group>
+        { _.map(actions, (action, index) => (
+          <Button
+            basic
+            color={action.color}
+            icon={action.icon}
+            key={`${action.name}-${index}`}
+            onClick={action.onClick && action.onClick.bind(this, item)}
+            title={action.title}
+          />
+        ))}
+      </Button.Group>
+    );
+  }, [props.actions]);
+
+  /**
+   * Renders the checkbox for the passed item.
+   *
+   * @type {(function(*=): (null|*))|*}
+   */
+  const renderCheckbox = useCallback((item) => {
+    if (!props.selectable) {
+      return null;
+    }
+
+    return (
+      <Checkbox
+        key={`select-checkbox-${item.id}`}
+        className='row-select-checkbox'
+        onClick={(e, el) => props.onRowSelect(el, item, e)}
+        checked={!!props.selectedRows.find((r) => r.id === item.id)}
+      />
+    );
+  }, [props.onRowSelect, props.selectable, props.selectedRows]);
+
+  return (
+    <div
+      className={['accordion-data-list', props.className || ''].join(' ')}
+    >
+      <NestedAccordion
+        getChildItems={props.getChildItems}
+        onItemToggle={(item) => props.onItemToggle && props.onItemToggle(item)}
+        renderItem={(item) => props.renderItem(item)}
+        renderRight={(item) => (
+          <>
+            { renderActions(item) }
+            { renderCheckbox(item) }
+          </>
+        )}
+        rootItems={props.rootItems}
+        showToggle={(item) => props.showToggle(item)}
+      />
+    </div>
+  );
+});
+
+const AccordionDataList = (props: Props) => {
+  const rootItems = useMemo(() => props.getRootItems(props.items), [props.items]);
+  const getChildItems = useCallback((item) => props.getChildItems(props.items, item), [props.items]);
+  const sortDropdown = useRef<?typeof Dropdown>();
+
+  /**
+   * Sets the current sort value.
+   *
+   * @type {unknown}
+   */
+  const sortValue = useMemo(() => {
+    const sort = _.find(props.sort, { value: props.sortColumn });
+    return sort && sort.text;
+  }, [props.sort, props.sortColumn]);
+
+  /**
+   * Toggles the sort property.
+   *
+   * @type {(function(*): void)|*}
+   */
+  const onSort = useCallback((sort) => {
+    if (!props.onSort) {
+      return;
+    }
+
+    let sortDirection;
+
+    if (sort.value !== props.sortColumn) {
+      sortDirection = sort.direction;
+    }
+
+    props.onSort(sort.value, sortDirection);
+  }, [props.onSort, props.sortColumn]);
+
+  /**
+   * Renders the sort dropdown.
+   *
+   * @type {(function(): (null|*))|*}
+   */
+  const renderSort = useCallback(() => {
+    if (_.isEmpty(props.sort)) {
+      return null;
+    }
+
+    return (
+      <Button.Group
+        basic
+        style={{
+          fontSize: 'inherit'
+        }}
+      >
+        <Button
+          content={sortValue}
+          icon={props.sortDirection === SORT_ASCENDING ? 'sort alphabet up' : 'sort alphabet down'}
+          onClick={(e) => sortDropdown.current && sortDropdown.current.handleClick(e)}
+        />
+        <Dropdown
+          className='button icon'
+          floating
+          options={_.map(props.sort, (sort) => ({
+            ...sort,
+            onClick: () => onSort(sort)
+          }))}
+          ref={sortDropdown}
+          trigger={<></>}
+          value={props.sortColumn}
+        />
+      </Button.Group>
+    );
+  }, [props.sort, props.sortColumn, props.sortDirection]);
+
+  /**
+   * Sorts the first column on component mount. If no sort properties are defined, the onInit prop is called.
+   */
+  useEffect(() => {
+    if (_.isEmpty(props.sort)) {
+      return props.onInit();
+    }
+
+    const { page } = props;
+    let { sortColumn = '', sortDirection = SORT_ASCENDING } = props;
+
+    if (!sortColumn) {
+      const defaultSort = _.first(props.sort);
+
+      if (defaultSort) {
+        sortColumn = defaultSort.value;
+
+        if (defaultSort.direction) {
+          sortDirection = defaultSort.direction;
+        }
+      }
+    }
+
+    return props.onSort(sortColumn, sortDirection, page);
+  }, []);
+
+  return (
+    <Accordion
+      {...props}
+      renderListHeader={renderSort}
+      rootItems={rootItems}
+      getChildItems={getChildItems}
+    />
+  );
+};
+
+export default useDataList(AccordionDataList);

package/src/components/AccordionList.css

@@ -0,0 +1,27 @@
+.accordion-list .accordion-header {
+  text-align: right;
+}
+
+.accordion-list .accordion-header .add-button {
+  margin-left: 5px;
+}
+
+.accordion-list .accordion-header .input.search {
+  display: inline-block;
+}
+
+.accordion-list p.record-count {
+  text-align: right;
+  margin-top: 10px;
+}
+
+.accordion-list .footer {
+  margin-top: 15px;
+}
+
+.accordion-list .sub-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: .75em 1em;
+}