Merge pull request #970 from data-driven-forms/common-typings

Common typings

Author: rvsia

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
     "ecmaVersion": 6,
     "sourceType": "module",
@@ -22,7 +22,7 @@
     "arguments": true
   },
   "plugins": ["prettier"],
-  "extends": ["react-app", "eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended", "prettier/react"],
+  "extends": ["react-app", "eslint:recommended", "plugin:react/recommended"],
   "env": {
     "es6": true,
     "browser": true,

babel.config.js

@@ -7,7 +7,7 @@ const camelToSnake = (string) => {
   };
 
 module.exports = {
-    presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+    presets: ["@babel/preset-env", "@babel/preset-react", ["@babel/preset-typescript", {allowNamespaces: true}]],
     plugins: [
       "@babel/plugin-transform-runtime",
       "@babel/plugin-syntax-dynamic-import",

package.json

@@ -16,7 +16,7 @@
     "release": "semantic-release",
     "codecov": "codecov",
     "start-demo": "lerna run start --scope=@data-driven-forms/react-render-demo",
-    "lint": "yarn eslint ./packages/*/src",
+    "lint": "yarn eslint ./packages/*/src --ext .js",
     "lint:ts": "tslint -c ./tslint.json 'packages/**/*.d.ts'",
     "generate-template": "node ./scripts/generate-mapper.js",
     "clean-build": "node ./scripts/clean-build.js",
@@ -52,8 +52,9 @@
     "globalSetup": "<rootDir>/config/globalSetup.js"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.9.0",
-    "@babel/preset-typescript": "^7.9.0",
+    "@babel/eslint-parser": "^7.13.8",
+    "@babel/plugin-transform-runtime": "^7.13.9",
+    "@babel/preset-typescript": "^7.13.0",
     "@khala/commit-analyzer-wildcard": "^2.4.1",
     "@khala/npm-release-monorepo": "^2.4.1",
     "@khala/wildcard-release-notes": "^2.4.1",
@@ -67,17 +68,16 @@
     "atob-lite": "^2.0.0",
     "babel-plugin-transform-imports": "^2.0.0",
     "dtslint": "^3.6.4",
-    "eslint": "^6.8.0",
-    "eslint-config-i-am-meticulous": "^12.0.0",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-config-react-app": "^5.2.0",
-    "eslint-loader": "^3.0.3",
-    "eslint-plugin-flowtype": "^4.6.0",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.18.3",
-    "eslint-plugin-react-hooks": "^2.4.0",
+    "eslint": "^7.21.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-flowtype": "^5.3.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "fs-extra": "^9.0.1",
     "glob": "^7.1.6",
     "identity-obj-proxy": "^3.0.0",

packages/common/package.json

@@ -6,9 +6,11 @@
   "main": "index.js",
   "module": "esm/index.js",
   "scripts": {
-    "build": "yarn build:cjs && yarn build:esm",
+    "build": "yarn build:cjs && yarn build:esm && yarn build:typings && yarn build:packages",
     "build:cjs": "BABEL_ENV=cjs babel src --out-dir ./",
-    "build:esm": "BABEL_ENV=esm babel src --out-dir ./esm"
+    "build:esm": "BABEL_ENV=esm babel src --out-dir ./esm",
+    "build:typings": "node ../../scripts/generate-typings.js",
+    "build:packages": "node ../../scripts/generate-packages.js"
   },
   "repository": "[email protected]:data-driven-forms/react-forms.git",
   "devDependencies": {

packages/common/src/demoschema/demoschema.d.ts

@@ -0,0 +1,5 @@
+import { Schema } from "@data-driven-forms/react-form-renderer";
+
+declare const demoschema: Schema;
+
+export default demoschema;

packages/common/src/demoschema.js renamed to packages/common/src/demoschema/demoschema.js

@@ -0,0 +1 @@
+export { default } from './demoschema';

packages/common/src/demoschema/index.d.ts

@@ -0,0 +1 @@
+export { default } from './demoschema';

packages/common/src/demoschema/index.js

@@ -0,0 +1,18 @@
+import { AnyObject, Input } from "@data-driven-forms/react-form-renderer";
+
+export type DualListSelectCommonProps<
+  FieldValue,
+  SelectProps = {}
+>  = {
+  DualListSelect: React.ComponentType;
+  options: {
+    [key: string]: any;
+    label: React.ReactNode,
+    value: any 
+  }[];
+  input: Input<FieldValue>;
+} & SelectProps & AnyObject;
+
+declare const DualListSelectCommon: React.ComponentType<DualListSelectCommonProps<any, {}>>;
+
+export default DualListSelectCommon;

packages/common/src/dual-list-select/dual-list-select.d.ts

@@ -0,0 +1,102 @@
+import React, { useReducer } from 'react';
+import PropTypes from 'prop-types';
+import isEqual from 'lodash/isEqual';
+
+import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+
+import reducer, { initialState } from './reducer';
+
+const getOptionsGroup = (value, lastClicked, options) => {
+  const lastIndex = options.map(({ value }) => value.toString()).indexOf(lastClicked.toString());
+  const currentIndex = options.map(({ value }) => value.toString()).indexOf(value);
+  const startIndex = Math.min(lastIndex, currentIndex);
+  const endIndex = Math.max(lastIndex, currentIndex) + 1;
+  return [...options.slice(startIndex, endIndex).map(({ value }) => value.toString())];
+};
+
+const handleOptionClick = (event, value, options, isRight, dispatch, state) => {
+  const selectedKey = isRight ? 'selectedLeftValues' : 'selectedRightValues';
+  const lastKey = isRight ? 'lastLeftClicked' : 'lastRightClicked';
+  if (event.shiftKey && state[lastKey]) {
+    dispatch({ type: 'setSelectedValue', value, values: getOptionsGroup(value, state[lastKey], options), isRight });
+  } else if (event.ctrlKey && state[lastKey]) {
+    const selectedValues = state[selectedKey].includes(value) ? state[selectedKey].filter((item) => item !== value) : [...state[selectedKey], value];
+
+    dispatch({ type: 'setSelectedValue', value, values: selectedValues, isRight });
+  } else {
+    dispatch({ type: 'setSelectedValue', value, values: [value], isRight });
+  }
+};
+
+const DualListSelectCommon = (props) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const { DualListSelect, ...rest } = useFieldApi({
+    ...props,
+    isEqual: (current, initial) => isEqual([...(current || [])].sort(), [...(initial || [])].sort())
+  });
+
+  const leftValues = rest.options
+    .filter((option) => !rest.input.value.includes(option.value) && option.label.includes(state.filterOptions))
+    .sort((a, b) => (state.sortLeftDesc ? a.label.localeCompare(b.label) : b.label.localeCompare(a.label)));
+  const rightValues = rest.options
+    .filter((option) => rest.input.value.includes(option.value) && option.label.includes(state.filterValue))
+    .sort((a, b) => (state.sortRightDesc ? a.label.localeCompare(b.label) : b.label.localeCompare(a.label)));
+
+  const handleOptionsClick = (event, value) => handleOptionClick(event, value, leftValues, true, dispatch, state);
+
+  const handleValuesClick = (event, value) => handleOptionClick(event, value, rightValues, false, dispatch, state);
+
+  const handleMoveRight = () => {
+    rest.input.onChange([...rest.input.value, ...state.selectedLeftValues]);
+    dispatch({ type: 'clearLeftOptions' });
+  };
+
+  const handleMoveLeft = () => {
+    rest.input.onChange(rest.input.value.filter((value) => !state.selectedRightValues.includes(value)));
+    dispatch({ type: 'clearRightValues' });
+  };
+
+  const sortOptions = () => dispatch({ type: 'sortOptions' });
+
+  const sortValues = () => dispatch({ type: 'sortValue' });
+
+  const filterOptions = (value) => dispatch({ type: 'setFilterOptions', value });
+
+  const filterValues = (value) => dispatch({ type: 'setFilterValue', value });
+
+  const handleClearLeftValues = () => {
+    dispatch({ type: 'clearLeftValues' });
+    rest.input.onChange([...rest.input.value, ...leftValues.map(({ value }) => value)]);
+  };
+
+  const handleClearRightValues = () => {
+    dispatch({ type: 'clearRightValue' });
+    rest.input.onChange([...rest.input.value.filter((val) => !rightValues.find(({ value }) => val === value))]);
+  };
+
+  return (
+    <DualListSelect
+      {...rest}
+      leftValues={leftValues}
+      rightValues={rightValues}
+      handleOptionsClick={handleOptionsClick}
+      handleValuesClick={handleValuesClick}
+      handleMoveRight={handleMoveRight}
+      handleMoveLeft={handleMoveLeft}
+      sortOptions={sortOptions}
+      sortValues={sortValues}
+      filterOptions={filterOptions}
+      filterValues={filterValues}
+      handleClearLeftValues={handleClearLeftValues}
+      handleClearRightValues={handleClearRightValues}
+      state={state}
+    />
+  );
+};
+
+DualListSelectCommon.propTypes = {
+  DualListSelect: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+};
+
+export default DualListSelectCommon;