@hisptz/react-ui/build/es/components/DataSourceSelector/index.js

A collection of reusable complex DHIS2 react ui components.

import { Chip, CssReset } from "@dhis2/ui";
import { head } from "lodash";
import React, { useMemo, useState } from "react";
import DataSource from "./components/DataSource";
import GroupSelector from "./components/GroupSelector";
import { DATA_SOURCES } from "./constants";
import NativeDataSource from "./models/nativeDataSource";
import { getDataSourcesList } from "./utils";
import "../../styles/styles.css";
export default function DataSourceSelector(_ref) {
  var _head;

  let {
    onSelect,
    disabled,
    dataSources,
    maxSelections,
    selected
  } = _ref;
  const dataSourcesList = useMemo(() => getDataSourcesList(dataSources), [dataSources]);
  const [selectedDataSourceType, setSelectedDataSourceType] = useState((_head = head(dataSourcesList)) !== null && _head !== void 0 ? _head : new NativeDataSource(DATA_SOURCES[0]));
  const [selectedGroup, setSelectedGroup] = useState();

  const onGroupChange = group => {
    setSelectedGroup(group);
  };

  const onDataSourceSelect = selected => {
    onSelect(selected);
  };

  const onDataSourceTypeChange = sourceType => {
    setSelectedGroup(undefined);
    setSelectedDataSourceType(sourceType);
  };

  return /*#__PURE__*/React.createElement("div", {
    className: "start"
  }, /*#__PURE__*/React.createElement(CssReset, null), /*#__PURE__*/React.createElement("div", {
    className: "container-bordered column"
  }, /*#__PURE__*/React.createElement("div", {
    className: "row p-8 wrap"
  }, dataSourcesList.length > 1 && (dataSourcesList === null || dataSourcesList === void 0 ? void 0 : dataSourcesList.map(source => /*#__PURE__*/React.createElement(Chip, {
    onClick: () => onDataSourceTypeChange(source),
    selected: (selectedDataSourceType === null || selectedDataSourceType === void 0 ? void 0 : selectedDataSourceType.label) === source.label,
    key: "chip-".concat(source.label)
  }, source.label)))), /*#__PURE__*/React.createElement("div", {
    className: "column p-16"
  }, /*#__PURE__*/React.createElement(GroupSelector, {
    selectedGroup: selectedGroup,
    onSelect: onGroupChange,
    selectedDataType: selectedDataSourceType
  }), /*#__PURE__*/React.createElement("div", {
    className: "pt-16"
  }, /*#__PURE__*/React.createElement(DataSource, {
    maxSelections: maxSelections,
    disabled: disabled,
    selected: selected !== null && selected !== void 0 ? selected : [],
    onChange: onDataSourceSelect,
    selectedGroup: selectedGroup,
    selectedDataSourceType: selectedDataSourceType
  })))));
}