@dhis2-ui/selector-bar 7.10.0

package/build/es/selector-bar-item/selector-bar-item.js

@@ -0,0 +1,77 @@
+import _JSXStyle from "styled-jsx/style";
+import { Card } from '@dhis2-ui/card';
+import { Layer } from '@dhis2-ui/layer';
+import { Popper } from '@dhis2-ui/popper';
+import { colors, spacers } from '@dhis2/ui-constants';
+import { IconChevronUp24, IconChevronDown24 } from '@dhis2/ui-icons';
+import PropTypes from 'prop-types';
+import React, { useRef } from 'react';
+const offsetModifier = {
+  name: 'offset',
+  options: {
+    offset: [0, 2]
+  }
+};
+/**
+ * The reason this component expects the "open" state and "setOpen" function is
+ * because certain actions inside the props.children might have to set "open"
+ * to false as well.
+ * A good example is selecting a value (which is not a click outside) and this
+ * component neither has any control over that component nor does it have a way
+ * to "observe" that behavior. Especially for selection bar items that allow
+ * "multiple" selections, this would be more or less impossible to predict
+ * inside this component
+ */
+
+export const SelectorBarItem = ({
+  open,
+  setOpen,
+  children,
+  disabled,
+  label,
+  value,
+  noValueMessage
+}) => {
+  const buttonRef = useRef();
+  const Icon = open ? IconChevronUp24 : IconChevronDown24;
+  return /*#__PURE__*/React.createElement("button", {
+    ref: buttonRef,
+    disabled: disabled,
+    onClick: () => setOpen(true),
+    className: _JSXStyle.dynamic([["3065814091", [
+    /*
+     * The arrow icon has ~4px empty space on the sides,
+     * that's why the padding on the right is only 8px.
+     */
+    '', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4]]]) + " " + "selector-bar-item"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3065814091", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4]]]) + " " + "label"
+  }, label), !disabled && /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3065814091", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4]]]) + " " + "value"
+  }, value || noValueMessage), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3065814091", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4]]]) + " " + "toggle-icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: _JSXStyle.dynamic([["3065814091", ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4]]])
+  })), open && /*#__PURE__*/React.createElement(Layer, {
+    onClick: (_, evt) => {
+      evt.stopPropagation();
+      setOpen(false);
+    }
+  }, /*#__PURE__*/React.createElement(Popper, {
+    reference: buttonRef,
+    placement: "bottom-end",
+    modifiers: [offsetModifier]
+  }, /*#__PURE__*/React.createElement(Card, null, children))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3065814091",
+    dynamic: ['', spacers.dp8, spacers.dp12, colors.grey400, colors.grey600, spacers.dp8, spacers.dp4]
+  }, [`.selector-bar-item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;background:none;height:40px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;${''} padding:0 ${spacers.dp8} 0 ${spacers.dp12};font-size:14px;line-height:16px;border:none;box-shadow:0px 0px 0px 1px ${colors.grey400};}`, ".selector-bar-item.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;}", `.label.__jsx-style-dynamic-selector{color:${colors.grey600};}`, `.value.__jsx-style-dynamic-selector{padding-left:${spacers.dp8};}`, `.toggle-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:${spacers.dp4};height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}`]));
+};
+SelectorBarItem.propTypes = {
+  children: PropTypes.any.isRequired,
+  label: PropTypes.string.isRequired,
+  noValueMessage: PropTypes.string.isRequired,
+  open: PropTypes.bool.isRequired,
+  setOpen: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+  value: PropTypes.string
+};

package/build/es/selector-bar-item/selector-bar-item.stories.e2e.js

@@ -0,0 +1,79 @@
+import { SingleSelectField, SingleSelectOption } from '@dhis2-ui/select';
+import React, { useState } from 'react';
+import { SelectorBarItem } from './selector-bar-item.js';
+const options = [{
+  value: 'value 1',
+  label: 'label 1'
+}, {
+  value: 'value 2',
+  label: 'label 2'
+}, {
+  value: 'value 3',
+  label: 'label 3'
+}];
+
+const createStateDecorator = args => {
+  return fn => {
+    const [selected, setSelected] = useState((args === null || args === void 0 ? void 0 : args.selected) || '');
+    const [open, setOpen] = useState((args === null || args === void 0 ? void 0 : args.open) || false);
+    return fn({
+      selected,
+      open,
+      setSelected,
+      setOpen
+    });
+  };
+};
+
+const createStory = () => (_, {
+  open,
+  setOpen,
+  selected,
+  setSelected
+}) => {
+  var _options$find;
+
+  return /*#__PURE__*/React.createElement(SelectorBarItem, {
+    label: "Selection bar item",
+    noValueMessage: "No value message",
+    open: open,
+    setOpen: setOpen,
+    value: ((_options$find = options.find(({
+      value
+    }) => value === selected)) === null || _options$find === void 0 ? void 0 : _options$find.label) || ''
+  }, /*#__PURE__*/React.createElement(SingleSelectField, {
+    selected: selected,
+    onChange: ({
+      selected: nextSelected
+    }) => {
+      setSelected(nextSelected);
+      setOpen(false);
+    }
+  }, options.map(({
+    value,
+    label
+  }) => /*#__PURE__*/React.createElement(SingleSelectOption, {
+    key: value,
+    value: value,
+    label: label
+  }))));
+};
+
+export default {
+  title: 'SelectorBarItem'
+};
+export const ClosedNoValue = createStory();
+ClosedNoValue.decorators = [createStateDecorator()];
+export const OpenNoValue = createStory();
+OpenNoValue.decorators = [createStateDecorator({
+  open: true
+})];
+export const ClosedWithValue = createStory();
+ClosedWithValue.decorators = [createStateDecorator({
+  selected: 'value 1'
+})];
+export const OpenWithValue = createStory();
+OpenWithValue.decorators = [createStateDecorator({
+  open: true,
+  selected: 'value 1'
+})];

package/package.json

@@ -0,0 +1,59 @@
+{
+    "name": "@dhis2-ui/selector-bar",
+    "version": "7.10.0",
+    "description": "UI Select",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/dhis2/ui.git",
+        "directory": "components/selector-bar"
+    },
+    "homepage": "https://github.com/dhis2/ui#readme",
+    "license": "BSD-3-Clause",
+    "private": false,
+    "main": "./build/cjs/index.js",
+    "module": "./build/es/index.js",
+    "exports": {
+        "import": "./build/es/index.js",
+        "require": "./build/cjs/index.js"
+    },
+    "sideEffects": false,
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "build": "d2-app-scripts build",
+        "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
+    },
+    "peerDependencies": {
+        "@dhis2/d2-i18n": "^1",
+        "react": "^16.8",
+        "react-dom": "^16.8",
+        "styled-jsx": "^4"
+    },
+    "dependencies": {
+        "@dhis2-ui/button": "7.10.0",
+        "@dhis2-ui/card": "7.10.0",
+        "@dhis2-ui/popper": "7.10.0",
+        "@dhis2-ui/layer": "7.10.0",
+        "@dhis2/ui-constants": "7.10.0",
+        "@dhis2/ui-icons": "7.10.0",
+        "@testing-library/react": "^12.1.2",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.7.2"
+    },
+    "devDependencies": {
+        "@dhis2-ui/css": "7.10.0",
+        "@dhis2-ui/menu": "7.10.0",
+        "@dhis2-ui/organisation-unit-tree": "7.10.0",
+        "@dhis2-ui/select": "7.10.0",
+        "@dhis2/d2-i18n": "^1.1.0",
+        "@testing-library/jest-dom": "^5.16.1",
+        "react": "16.13",
+        "react-dom": "16.13",
+        "styled-jsx": "^4.0.1"
+    },
+    "files": [
+        "build"
+    ]
+}