Sorting and Grouping Options

.eslintrc.js

@@ -13,7 +13,7 @@ module.exports = {
     'prettier',
   ],
   parserOptions: {
-    project: './tsconfig.json',
+    project: './tsconfig.eslint.json',
   },
   settings: {
     react: {

examples/animation/package.json

@@ -39,7 +39,7 @@
     "@rescripts/cli": "^0.0.16",
     "@rescripts/utilities": "^0.0.8",
     "@types/jest": "^26.0.23",
-    "@types/react": "^17.0.5",
+    "@types/react": "^17.0.7",
     "@types/react-dom": "^17.0.5",
     "react-refresh": "^0.10.0",
     "react-scripts": "^4.0.3",

examples/animation/tsconfig.c.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": false,
+    "noEmit": false,
+    "composite": true
+  }
+}

examples/animation/tsconfig.eslint.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.c.json",
+  "include": ["src/**/*.ts", "src/**/*.tsx", "*.js"]
+}

examples/basic/package.json

@@ -37,7 +37,7 @@
     "@rescripts/cli": "^0.0.16",
     "@rescripts/utilities": "^0.0.8",
     "@types/jest": "^26.0.23",
-    "@types/react": "^17.0.5",
+    "@types/react": "^17.0.7",
     "@types/react-dom": "^17.0.5",
     "react-refresh": "^0.10.0",
     "react-scripts": "^4.0.3",

examples/basic/tsconfig.c.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": false,
+    "noEmit": false,
+    "composite": true
+  }
+}

examples/basic/tsconfig.eslint.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.c.json",
+  "include": ["src/**/*.ts", "src/**/*.tsx", "*.js"]
+}

examples/column-resizing/package.json

@@ -37,7 +37,7 @@
     "@rescripts/cli": "^0.0.16",
     "@rescripts/utilities": "^0.0.8",
     "@types/jest": "^26.0.23",
-    "@types/react": "^17.0.5",
+    "@types/react": "^17.0.7",
     "@types/react-dom": "^17.0.5",
     "react-refresh": "^0.10.0",
     "react-scripts": "^4.0.3",

examples/column-resizing/tsconfig.c.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": false,
+    "noEmit": false,
+    "composite": true
+  }
+}

examples/column-resizing/tsconfig.eslint.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.c.json",
+  "include": ["src/**/*.ts", "src/**/*.tsx", "*.js"]
+}

examples/components/package.json

@@ -37,7 +37,7 @@
     "@rescripts/cli": "^0.0.16",
     "@rescripts/utilities": "^0.0.8",
     "@types/jest": "^26.0.23",
-    "@types/react": "^17.0.5",
+    "@types/react": "^17.0.7",
     "@types/react-dom": "^17.0.5",
     "react-refresh": "^0.10.0",
     "react-scripts": "^4.0.3",

examples/components/tsconfig.c.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": false,
+    "noEmit": false,
+    "composite": true
+  }
+}

examples/components/tsconfig.eslint.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.c.json",
+  "include": ["src/**/*.ts", "src/**/*.tsx", "*.js"]
+}

examples/controlled-state/package.json

@@ -37,7 +37,7 @@
     "@rescripts/cli": "^0.0.16",
     "@rescripts/utilities": "^0.0.8",
     "@types/jest": "^26.0.23",
-    "@types/react": "^17.0.5",
+    "@types/react": "^17.0.7",
     "@types/react-dom": "^17.0.5",
     "react-refresh": "^0.10.0",
     "react-scripts": "^4.0.3",

examples/controlled-state/tsconfig.c.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": false,
+    "noEmit": false,
+    "composite": true
+  }
+}

examples/controlled-state/tsconfig.eslint.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.c.json",
+  "include": ["src/**/*.ts", "src/**/*.tsx", "*.js"]
+}

examples/filter-action/package.json

@@ -37,7 +37,7 @@
     "@rescripts/cli": "^0.0.16",
     "@rescripts/utilities": "^0.0.8",
     "@types/jest": "^26.0.23",
-    "@types/react": "^17.0.5",
+    "@types/react": "^17.0.7",
     "@types/react-dom": "^17.0.5",
     "react-refresh": "^0.10.0",
     "react-scripts": "^4.0.3",

examples/filter-action/src/App.tsx

@@ -14,36 +14,47 @@ import LineUpLite, {
   LineUpLiteColumn,
   featureDefault,
   actionIconsRemixicon,
-  ColumnInstance,
-  ActionIcons,
-  LineUpLiteFilterAction,
-  UseFiltersColumnProps,
+  ActionLineUpProps,
 } from '@lineup-lite/table';
 import { defaultDarkColorScale, defaultColorScale } from '@lineup-lite/components';
 import '@lineup-lite/table/dist/table.css';
 import { data, Row } from './data';
 
-function MyFilterAction(props: { col: ColumnInstance<Row>; icons: ActionIcons }) {
-  const col = props.col as unknown as ColumnInstance<Row> & UseFiltersColumnProps<Row>;
+function useVisibleHelper() {
+  const [visible, setVisible] = useState([] as string[]);
 
-  const [visible, setVisible] = useState(false);
-  const showFilterDialog = useCallback(() => {
-    setVisible(!visible);
-  }, [visible, setVisible]);
-
-  return (
-    <>
-      <LineUpLiteFilterAction {...col} iconFilter={props.icons.filterColumn} toggleFilterColumn={showFilterDialog} />
-      {visible && (
-        <div className="filter-dialog">
-          {col.render('Summary')}
-          <button onClick={showFilterDialog} type="button">
-            Close
-          </button>
-        </div>
-      )}
-    </>
+  const toggleVisibility = useCallback(
+    (col: { id: string }) => {
+      setVisible((v) => (v.indexOf(col.id) >= 0 ? v.filter((d) => d !== col.id) : [...v, col.id]));
+    },
+    [setVisible]
   );
+  const isVisible = useCallback((col: { id: string }) => visible.indexOf(col.id) >= 0, [visible]);
+  return { toggleVisibility, isVisible };
+}
+
+function useFilterAction() {
+  const { toggleVisibility, isVisible } = useVisibleHelper();
+  return useMemo(() => {
+    const f: ActionLineUpProps<Row>['actionFilter'] = (col) => {
+      if (!col.canFilter) {
+        return undefined;
+      }
+      const handler = () => toggleVisibility(col);
+      return {
+        handler,
+        children: isVisible(col) ? (
+          <div className="filter-dialog">
+            {col.render('Summary')}
+            <button onClick={handler} type="button">
+              Close
+            </button>
+          </div>
+        ) : undefined,
+      };
+    };
+    return f;
+  }, [isVisible, toggleVisibility]);
 }
 
 function Table({ isDarkTheme }: { isDarkTheme: boolean }) {
@@ -63,13 +74,7 @@ function Table({ isDarkTheme }: { isDarkTheme: boolean }) {
   const features = useMemo(() => featureDefault<Row>(), []);
   const icons = useMemo(() => actionIconsRemixicon(), []);
 
-  const filterAction = useCallback((col: ColumnInstance<Row>, givenIcons: ActionIcons) => {
-    return (
-      <>
-        <MyFilterAction col={col} icons={givenIcons} />
-      </>
-    );
-  }, []);
+  const actionFilter = useFilterAction();
 
   return (
     <LineUpLite<Row>
@@ -78,7 +83,7 @@ function Table({ isDarkTheme }: { isDarkTheme: boolean }) {
       features={features}
       icons={icons}
       dark={isDarkTheme}
-      actions={filterAction}
+      actionFilter={actionFilter}
     />
   );
 }

examples/filter-action/tsconfig.c.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": false,
+    "noEmit": false,
+    "composite": true
+  }
+}

examples/filter-action/tsconfig.eslint.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.c.json",
+  "include": ["src/**/*.ts", "src/**/*.tsx", "*.js"]
+}

examples/flex-layout/package.json

@@ -37,7 +37,7 @@
     "@rescripts/cli": "^0.0.16",
     "@rescripts/utilities": "^0.0.8",
     "@types/jest": "^26.0.23",
-    "@types/react": "^17.0.5",
+    "@types/react": "^17.0.7",
     "@types/react-dom": "^17.0.5",
     "react-refresh": "^0.10.0",
     "react-scripts": "^4.0.3",

examples/flex-layout/tsconfig.c.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": false,
+    "noEmit": false,
+    "composite": true
+  }
+}

examples/flex-layout/tsconfig.eslint.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.c.json",
+  "include": ["src/**/*.ts", "src/**/*.tsx", "*.js"]
+}

examples/fontawesome/package.json

@@ -40,7 +40,7 @@
     "@rescripts/cli": "^0.0.16",
     "@rescripts/utilities": "^0.0.8",
     "@types/jest": "^26.0.23",
-    "@types/react": "^17.0.5",
+    "@types/react": "^17.0.7",
     "@types/react-dom": "^17.0.5",
     "react-refresh": "^0.10.0",
     "react-scripts": "^4.0.3",

examples/fontawesome/tsconfig.c.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": false,
+    "noEmit": false,
+    "composite": true
+  }
+}

examples/fontawesome/tsconfig.eslint.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.c.json",
+  "include": ["src/**/*.ts", "src/**/*.tsx", "*.js"]
+}

examples/group-options/.gitignore

@@ -0,0 +1,4 @@
+/build
+/node_modules
+!/src/react-app-env.d.ts
+.eslintcache

examples/group-options/.prettierignore

@@ -0,0 +1,6 @@
+/build
+/dist
+/docs
+/coverage
+/.prettierignore
+.browserslistrc

examples/group-options/.rescriptsrc.js

@@ -0,0 +1,25 @@
+const { removeWebpackPlugin } = require('@rescripts/utilities');
+const fs = require('fs');
+const path = require('path');
+
+function isWorkspace() {
+  return (
+    fs.existsSync('../../package.json') && JSON.parse(fs.readFileSync('../../package.json')).name === 'lineup-lite'
+  );
+}
+
+module.exports = [
+  (config) => {
+    config.resolve = removeWebpackPlugin('ModuleScopePlugin', config.resolve);
+
+    if (isWorkspace()) {
+      // create a shared cache directory
+      for (const loader of config.module.rules[1].oneOf) {
+        if (loader.options && loader.options.cacheDirectory) {
+          loader.options.cacheDirectory = path.resolve(__dirname, '../.cache/babel-loader');
+        }
+      }
+    }
+    return config;
+  },
+];