@performant-software/semantic-components 0.5.1

package/src/index.js

@@ -0,0 +1,76 @@
+// @flow
+
+// Components
+export { default as AccordionDataList } from './components/AccordionDataList';
+export { default as AccordionList } from './components/AccordionList';
+export { default as AccordionSelector } from './components/AccordionSelector';
+export { default as ArrowButtons } from './components/ArrowButtons';
+export { default as AssociatedDropdown } from './components/AssociatedDropdown';
+export { default as BooleanIcon } from './components/BooleanIcon';
+export { default as CancelButton } from './components/CancelButton';
+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 DateInput } from './components/DateInput';
+export { default as DatePicker } from './components/DatePicker';
+export { default as DescriptorField } from './components/DescriptorField';
+export { default as DownloadButton } from './components/DownloadButton';
+export { default as Draggable } from './components/Draggable';
+export { default as DropdownButton } from './components/DropdownButton';
+export { default as DropdownMenu } from './components/DropdownMenu';
+export { default as EditModal } from './components/EditModal';
+export { default as EditPage } from './components/EditPage';
+export { default as EmbeddedList } from './components/EmbeddedList';
+export { default as FileInputButton } from './components/FileInputButton';
+export { default as FileUpload } from './components/FileUpload';
+export { default as FileUploadModal } from './components/FileUploadModal';
+export { default as FuzzyDate } from './components/FuzzyDate';
+export { default as GoogleMap } from './components/GoogleMap';
+export { default as GooglePlacesSearch } from './components/GooglePlacesSearch';
+export { default as HorizontalCards } from './components/HorizontalCards';
+export { default as ItemCollection } from './components/ItemCollection';
+export { default as ItemList } from './components/ItemList';
+export { default as Items } from './components/Items';
+export { default as KeyboardField } from './components/KeyboardField';
+export { default as LazyDocument } from './components/LazyDocument';
+export { default as LazyImage } from './components/LazyImage';
+export { default as LazyVideo } from './components/LazyVideo';
+export { default as LinkButton } from './components/LinkButton';
+export { default as ListFilters } from './components/ListFilters';
+export { default as LinkLabel } from './components/LinkLabel';
+export { default as useList } from './components/List';
+export { default as ListLoader } from './components/ListLoader';
+export { default as ListTable } from './components/ListTable';
+export { default as LoginModal } from './components/LoginModal';
+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 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 RemoteDropdown } from './components/RemoteDropdown';
+export { default as SaveButton } from './components/SaveButton';
+export { default as Section } from './components/Section';
+export { default as Selectize } from './components/Selectize';
+export { default as SelectizeHeader } from './components/SelectizeHeader';
+export { default as TabbedModal } from './components/TabbedModal';
+export { default as TabsMenu } from './components/TabsMenu';
+export { default as TagsList } from './components/TagsList';
+export { default as Thumbnail } from './components/Thumbnail';
+export { default as Toaster } from './components/Toaster';
+export { default as VideoFrameSelector } from './components/VideoFrameSelector';
+export { default as VideoPlayer } from './components/VideoPlayer';
+export { default as VideoPlayerButton } from './components/VideoPlayerButton';
+export { default as ViewXML } from './components/ViewXML';
+
+// Types
+export type { EditPageProps } from './components/EditPage';
+export type { FileUploadProps } from './components/FileUploadModal';
+export type { Props as ListProps } from './components/List';
+
+// Constants
+export { SORT_ASCENDING, SORT_DESCENDING } from './components/DataList';
+export { FilterTypes } from './components/ListFilters';

package/types/components/AccordionDataList.js.flow

@@ -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);