@rhc-shared-components/form-multi-select-component 0.0.0

package/README.md

@@ -0,0 +1,30 @@
+# @rhc-shared-components/sample-project
+
+> project description
+
+[![NPM](https://img.shields.io/npm/v/@rhc-shared-components/sample-project.svg)](https://www.npmjs.com/package/@rhc-shared-components/sample-project) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+## Install
+
+```bash
+npm install --save @rhc-shared-components/sample-project
+```
+
+## Usage
+
+```tsx
+import React, { Component } from 'react'
+
+import MyComponent from '@rhc-shared-components/sample-project'
+import '@rhc-shared-components/sample-project/dist/index.css'
+
+class Example extends Component {
+  render() {
+    return <MyComponent />
+  }
+}
+```
+
+## License
+
+MIT © [authorGithubUsername](https://github.com/authorGithubUsername)

package/dist/FormMultiSelectInput.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import './styles.scss';
+export interface IMultiSelectItem {
+    value: string;
+    description?: string;
+}
+export interface FormMultiSelectInputProps {
+    name: string;
+    label: string;
+    isRequired?: boolean;
+    placeholder?: string;
+    selectOptions: IMultiSelectItem[];
+    ariaLabel?: string;
+    helperText?: string;
+    maxItems?: number;
+    maxHeight?: string | number;
+}
+declare const FormMultiSelectInput: React.FC<FormMultiSelectInputProps>;
+export default FormMultiSelectInput;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import FormMultiSelectInput from './FormMultiSelectInput';
+export { FormMultiSelectInput };

package/dist/index.js

@@ -0,0 +1,137 @@
+var React = require('react');
+var formik = require('formik');
+var reactCore = require('@patternfly/react-core');
+var formGroupContainer = require('@rhc-shared-components/form-group-container');
+var lodash = require('lodash');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return n;
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var _excluded = ["label", "isRequired", "children", "selectOptions", "ariaLabel", "placeholder", "helperText", "maxItems", "maxHeight"];
+
+var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
+  var label = _ref.label,
+      isRequired = _ref.isRequired,
+      selectOptions = _ref.selectOptions,
+      _ref$ariaLabel = _ref.ariaLabel,
+      ariaLabel = _ref$ariaLabel === void 0 ? 'Select Input' : _ref$ariaLabel,
+      placeholder = _ref.placeholder,
+      helperText = _ref.helperText,
+      maxItems = _ref.maxItems,
+      maxHeight = _ref.maxHeight,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var _useField = formik.useField(rest),
+      meta = _useField[1];
+
+  var value = meta.value;
+
+  var _useFormikContext = formik.useFormikContext(),
+      isSubmitting = _useFormikContext.isSubmitting,
+      setFieldValue = _useFormikContext.setFieldValue,
+      validateField = _useFormikContext.validateField;
+
+  var _React$useState = React__namespace.useState(false),
+      isOpen = _React$useState[0],
+      setIsOpen = _React$useState[1];
+
+  var _React$useState2 = React__namespace.useState([]),
+      selected = _React$useState2[0],
+      setSelected = _React$useState2[1];
+
+  var onSelect = function onSelect(_event, selection) {
+    if (value.includes(selection)) {
+      setFieldValue(rest.name, value.filter(function (item) {
+        return item !== selection;
+      }));
+      validateField(rest.name);
+    } else {
+      if (maxItems && value.length === maxItems) {
+        return;
+      }
+
+      setFieldValue(rest.name, [].concat(value, [selection]));
+      validateField(rest.name);
+    }
+  };
+
+  React__namespace.useEffect(function () {
+    setSelected(value);
+  }, [value]);
+
+  var onClear = function onClear() {
+    setFieldValue(rest.name, []);
+    validateField(rest.name);
+    setIsOpen(false);
+  };
+
+  var onToggle = function onToggle() {
+    setIsOpen(!isOpen);
+  };
+
+  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(formGroupContainer.FormGroupContainer, {
+    validated: meta.error ? reactCore.ValidatedOptions.error : reactCore.ValidatedOptions["default"],
+    helperTextInvalid: meta.error,
+    isRequired: isRequired,
+    fieldId: rest.name,
+    label: label,
+    helperText: helperText
+  }, React__namespace.createElement(reactCore.Select, Object.assign({
+    variant: reactCore.SelectVariant.typeaheadMulti,
+    "aria-labelledby": rest.name,
+    typeAheadAriaLabel: placeholder || 'Select the options',
+    placeholderText: placeholder || 'Select the options',
+    onToggle: onToggle,
+    onSelect: onSelect,
+    onClear: onClear,
+    selections: selected,
+    isOpen: isOpen
+  }, maxHeight && {
+    maxHeight: maxHeight
+  }, {
+    isDisabled: isSubmitting,
+    "aria-label": ariaLabel
+  }, rest), lodash.map(selectOptions, function (option, index) {
+    return React__namespace.createElement(reactCore.SelectOption, Object.assign({
+      key: index,
+      value: option.value,
+      label: option.value
+    }, option.description && {
+      description: option.description
+    }));
+  }))));
+};
+
+exports.FormMultiSelectInput = FormMultiSelectInput;

package/dist/index.modern.js

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { useField, useFormikContext } from 'formik';
+import { ValidatedOptions, Select, SelectVariant, SelectOption } from '@patternfly/react-core';
+import { FormGroupContainer } from '@rhc-shared-components/form-group-container';
+import { map } from 'lodash';
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+const _excluded = ["label", "isRequired", "children", "selectOptions", "ariaLabel", "placeholder", "helperText", "maxItems", "maxHeight"];
+
+const FormMultiSelectInput = _ref => {
+  let {
+    label,
+    isRequired,
+    selectOptions,
+    ariaLabel = 'Select Input',
+    placeholder,
+    helperText,
+    maxItems,
+    maxHeight
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  const [, meta] = useField(rest);
+  const {
+    value
+  } = meta;
+  const {
+    isSubmitting,
+    setFieldValue,
+    validateField
+  } = useFormikContext();
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState([]);
+
+  const onSelect = (_event, selection) => {
+    if (value.includes(selection)) {
+      setFieldValue(rest.name, value.filter(item => item !== selection));
+      validateField(rest.name);
+    } else {
+      if (maxItems && value.length === maxItems) {
+        return;
+      }
+
+      setFieldValue(rest.name, [...value, selection]);
+      validateField(rest.name);
+    }
+  };
+
+  React.useEffect(() => {
+    setSelected(value);
+  }, [value]);
+
+  const onClear = () => {
+    setFieldValue(rest.name, []);
+    validateField(rest.name);
+    setIsOpen(false);
+  };
+
+  const onToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return React.createElement(React.Fragment, null, React.createElement(FormGroupContainer, {
+    validated: meta.error ? ValidatedOptions.error : ValidatedOptions.default,
+    helperTextInvalid: meta.error,
+    isRequired: isRequired,
+    fieldId: rest.name,
+    label: label,
+    helperText: helperText
+  }, React.createElement(Select, Object.assign({
+    variant: SelectVariant.typeaheadMulti,
+    "aria-labelledby": rest.name,
+    typeAheadAriaLabel: placeholder || 'Select the options',
+    placeholderText: placeholder || 'Select the options',
+    onToggle: onToggle,
+    onSelect: onSelect,
+    onClear: onClear,
+    selections: selected,
+    isOpen: isOpen
+  }, maxHeight && {
+    maxHeight
+  }, {
+    isDisabled: isSubmitting,
+    "aria-label": ariaLabel
+  }, rest), map(selectOptions, (option, index) => React.createElement(SelectOption, Object.assign({
+    key: index,
+    value: option.value,
+    label: option.value
+  }, option.description && {
+    description: option.description
+  }))))));
+};
+
+export { FormMultiSelectInput };

package/dist/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@rhc-shared-components/form-multi-select-component",
+  "version": "0.0.0",
+  "description": "project description",
+  "author": "shkale",
+  "license": "MIT",
+  "repository": "https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/",
+  "main": "dist/index.js",
+  "module": "dist/index.modern.js",
+  "source": "src/index.tsx",
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "build": "microbundle --css inline --no-sourcemap --no-compress --format modern,cjs --jsx React.createElement",
+    "start": "microbundle watch --css inline --no-compress --format modern,cjs --jsx React.createElement",
+    "clean": "rimraf dist",
+    "prepare": "run-s clean build",
+    "test": "run-s test:unit test:lint test:build",
+    "test:build": "run-s build",
+    "test:lint": "eslint .",
+    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
+    "test:watch": "react-scripts test --env=jsdom",
+    "predeploy": "cd example && yarn install && yarn run build"
+  },
+  "peerDependencies": {
+    "@patternfly/react-core": ">=4.101.3",
+    "formik": ">=2.1.4",
+    "react": ">=16.13.1",
+    "react-dom": ">=16.13.1"
+  },
+  "devDependencies": {
+    "@rhc-shared-components/form-group-container": "^0.2.9",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.5.0",
+    "@testing-library/user-event": "^7.2.1",
+    "@types/jest": "^25.1.4",
+    "@types/node": "^12.12.38",
+    "@types/react": "^16.9.27",
+    "@types/react-dom": "^16.9.7",
+    "@typescript-eslint/eslint-plugin": "^2.26.0",
+    "@typescript-eslint/parser": "^2.26.0",
+    "babel-eslint": "^10.0.3",
+    "cross-env": "^7.0.2",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-config-standard": "^14.1.0",
+    "eslint-config-standard-react": "^9.2.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-node": "^11.0.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-standard": "^4.0.1",
+    "microbundle": "^0.13.3",
+    "node-sass": "^4.0.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.0.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "^3.4.1",
+    "rimraf": "^3.0.2",
+    "typescript": "^3.7.5"
+  },
+  "dependencies": {
+    "@patternfly/react-core": "^4.101.3",
+    "@rhc-shared-components/form-group-container": "^0.2.9",
+    "@types/lodash": "^4.14.177",
+    "formik": "^2.1.4",
+    "lodash": "^4.17.21",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}