@infinite-table/infinite-react 0.4.13 → 0.5.1

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package/build/buildPackageJson.js

@@ -0,0 +1,43 @@
+const fs = require('fs');
+const resolve = require('path').resolve;
+const sourcePackagePath = resolve(__dirname, '../package.json');
+
+const packageJSON = require(sourcePackagePath);
+
+const toDelete = [
+  'devDependencies',
+  'husky',
+  'prettier',
+  'files',
+  'lint-staged',
+  'scripts',
+  'private',
+];
+toDelete.forEach((key) => delete packageJSON[key]);
+
+['main', 'module', 'typings'].forEach((key) => {
+  let value = packageJSON[key];
+
+  value = value.split('/');
+  if (value[0] === 'dist') {
+    value = value.splice(1).join('/');
+  }
+
+  packageJSON[key] = value.join('/');
+});
+
+packageJSON.publishedAt = Date.now();
+const content = JSON.stringify(packageJSON, null, 2);
+
+const path = resolve(__dirname, '../dist', 'package.json');
+fs.writeFile(path, content, 'utf8', (err) => {
+  if (err) {
+    console.error(err);
+    throw err;
+  } else {
+    console.log(
+      'DONE building package.json with version ',
+      packageJSON.version,
+    );
+  }
+});

package/build/scripts/test.js

@@ -0,0 +1,37 @@
+const fs = require('fs');
+const path = require('path');
+const carsales = require('../../examples/src/datasets/carsales.json');
+
+function getRandomNumberBetween(min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+const color = [
+  'white',
+  'white',
+  'white',
+  'black',
+  'yellow',
+  'white',
+  'black',
+  'blue',
+  'blue',
+  'blue',
+  'green',
+  'red',
+  'red',
+  'magenta',
+  'silver',
+  'silver',
+];
+
+carsales.forEach((sale, index) => {
+  // sale.id = index;
+  sale.color = color[getRandomNumberBetween(0, color.length - 1)];
+});
+
+fs.writeFileSync(
+  path.resolve(__dirname, '../../examples/src/datasets/carsales.json'),
+  JSON.stringify(carsales, null, 2),
+  'utf8',
+);

package/bundler.config.js

@@ -0,0 +1,25 @@
+//@ts-check
+module.exports = {
+  compilationOptions: {
+    followSymlinks: true,
+    preferredConfigPath: './tsconfig.typebundler.json',
+  },
+
+  entries: [
+    {
+      filePath: 'dist/index.d.ts',
+      outFile: 'dist/bundle.d.ts',
+
+      failOnClass: false,
+
+      libraries: {
+        allowedTypesLibraries: [],
+        importedLibraries: ['node', 'typescript'],
+        inlinedLibraries: [],
+      },
+      output: {
+        noBanner: true,
+      },
+    },
+  ],
+};

package/globals.d.ts

@@ -0,0 +1,7 @@
+export {};
+
+declare global {
+  var __DEV__: boolean;
+  var __VERSION__: string;
+  var __VERSION_TIMESTAMP__: number;
+}

package/package.json

@@ -10,18 +10,117 @@
     "react-datagrid",
     "react-infinite"
   ],
-  "version": "0.4.13",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/infinite-table/infinite-react.git"
+  },
+  "bugs": {
+    "url": "https://github.com/infinite-table/infinite-react/issues"
+  },
+  "version": "0.5.1",
   "main": "index.js",
   "module": "index.esm.js",
   "typings": "index.d.ts",
+  "scripts": {
+    "build": "rimraf dist && npm run tsc && npm run concat-dts && node ./build/buildPackageJson.js && npm run esbuild && npm run update-md && cp LICENSE.md ./dist && cp ../README.md ./dist",
+    "watch": "npm run esbuild-esm && concurrently \"npm run tscw\" \"npm run esbuild-esm-watch\" \"npm run concat-dts-watch\"",
+    "rollup-types": "rollup -c rollup.config.js",
+    "update-md": "npm run --prefix .. doctoc",
+    "esbuild": "npm run esbuild-esm && npm run esbuild-cjs",
+    "esbuild-deepmap": "npm run esbuild-deepmap-esm && npm run esbuild-deepmap-cjs",
+    "esbuild-deepmap-esm": "node run-build-deepmap.js esm",
+    "esbuild-esm": "node run-build.js esm",
+    "esbuild-esm-watch": "node run-build.js esm --watch",
+    "esbuild-cjs": "node run-build.js cjs",
+    "esbuild-deepmap-cjs": "node run-build-deepmap.js cjs",
+    "esbuild-cjs-watch": "node run-build.js cjs --watch",
+    "test": "npm run --prefix=examples test ",
+    "//-": " only build declaration files",
+    "tsc": "tsc --project tsconfig.build.json",
+    "concat-dts": "tsup src/index.tsx --dts-only",
+    "concat-dts-watch": "tsup src/index.tsx --dts-only --watch",
+    "xxx - no longer used - bundle-types": "dts-bundle-generator --config bundler.config.js",
+    "tscw": "tsc --watch --project tsconfig.dev.json --outDir dist",
+    "xxx - no longer used - concat-dts": "node run-dts-concat.js",
+    "typedoc": "typedoc",
+    "lint": "tsdx lint src",
+    "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,scss,css,md}'",
+    "/": "//",
+    "/--- should not run locally ----": "//",
+    "/--- as this is run via github actions CI ----": "//",
+    "registry-publish": "npm publish dist --access public",
+    "registry-publish-canary": "npm publish dist --access public --tag canary",
+    "//": "// only used in the release.yml workflow",
+    "release:canary-nobump": "npm run registry-publish-canary",
+    "release:nobump": "npm run registry-publish",
+    "///": "//",
+    "bump:canary": "npm version prerelease --preid=canary",
+    "bump:major:canary": "npm version premajor --preid=canary",
+    "bump:minor:canary": "npm version preminor --preid=canary",
+    "bump:patch:canary": "npm version prepatch --preid=canary",
+    "////": "//",
+    "bump:patch": "npm version patch",
+    "bump:minor": "npm version minor",
+    "bump:major": "npm version major"
+  },
   "peerDependencies": {
     "react": ">=16"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.(js|jsx|ts|tsx)": [
+      "echo ok",
+      "git add"
+    ],
+    "src/**/*.(js|jsx|ts|tsx|json|scss|css|md)": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "devDependencies": {
+    "@babel/runtime-corejs2": "^7.6.3",
+    "@types/debug": "^4.1.7",
+    "@types/jest": "^24.0.19",
+    "@types/node": "^18.8.0",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "@vanilla-extract/css": "^1.9.1",
+    "@vanilla-extract/esbuild-plugin": "^2.2.0",
+    "@vanilla-extract/recipes": "^0.2.5",
+    "@vanilla-extract/sprinkles": "^1.5.0",
+    "autoprefixer": "^10.4.0",
+    "camelcase": "^6.0.0",
+    "concurrently": "^6.2.0",
+    "csstype": "^2.6.10",
+    "dts-bundle-generator": "^5.9.0",
+    "dts-generator": "^3.0.0",
+    "esbuild": "^0.12.9",
+    "husky": "^4.2.3",
+    "lint-staged": "^10.0.8",
+    "postcss": "^8.4.17",
+    "prettier": "^2.5.0",
+    "prettier-eslint": "^13.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^2.55.1",
+    "rollup-plugin-dts": "^3.0.2",
+    "ts-node": "^8.8.2",
+    "tsc-prog": "^2.2.1",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.1.0",
+    "tsup": "^5.11.13",
+    "typedoc": "^0.23.16",
+    "typescript": "4.6.2"
+  },
   "dependencies": {
     "binary-search": "^1.3.6",
     "debug": "^4.3.1"
   },
   "license": "Commercial & Open Source",
   "//": "will be updated at build time",
-  "publishedAt": 1662407924032
-}
+  "publishedAt": 1624970570587
+}

package/rollup.config.js

@@ -0,0 +1,15 @@
+import dts from 'rollup-plugin-dts';
+const config = [
+  {
+    input: './dist/index.d.ts',
+    external: () => false,
+    output: [{ file: 'dist/index.d.ts', format: 'es' }],
+    plugins: [
+      dts({
+        respectExternal: false,
+      }),
+    ],
+  },
+];
+
+export default config;

package/run-build-deepmap.js

@@ -0,0 +1,47 @@
+const fs = require('fs');
+const path = require('path');
+
+const packageJSON = require('./src/utils/DeepMap/package.json');
+const format = process.argv[2];
+const watch = process.argv[3] === '--watch';
+
+if (!format || !(format in { esm: true, cjs: true })) {
+  throw 'Invalid format supplied';
+}
+
+require('esbuild')
+  .build({
+    entryPoints: [path.resolve(__dirname, 'src/utils/DeepMap/index.ts')],
+    bundle: true,
+    plugins: [],
+    define: {},
+    watch: watch
+      ? {
+          onRebuild(error, result) {
+            if (error) console.error('watch build failed:', error);
+            else console.log('watch build succeeded:', result);
+          },
+        }
+      : null,
+    external: [],
+    format: format,
+    bundle: true,
+    platform: 'browser',
+    outfile: path.resolve(
+      __dirname,
+      `dist-deepmap/index${format === 'esm' ? '.esm' : ''}.js`,
+    ),
+  })
+  .then(() => {
+    try {
+      fs.writeFileSync(
+        path.resolve(__dirname, './dist-deepmap/package.json'),
+        JSON.stringify(packageJSON, null, 2),
+        'utf8',
+      );
+    } catch (ex) {
+      console.error('Cannot find or write dist-deepmap/package.json');
+      console.error(ex);
+    }
+  })
+  .catch(() => process.exit(1));

package/run-build.js

@@ -0,0 +1,45 @@
+const { vanillaExtractPlugin } = require('@vanilla-extract/esbuild-plugin');
+
+const format = process.argv[2];
+const watch = process.argv[3] === '--watch';
+
+if (!format || !(format in { esm: true, cjs: true })) {
+  throw 'Invalid format supplied';
+}
+
+const postcss = require('postcss');
+const autoprefixer = require('autoprefixer');
+
+async function processCss(css) {
+  const result = await postcss([autoprefixer]).process(css, {
+    from: undefined /* suppress source map warning */,
+  });
+
+  return result.css;
+}
+
+require('esbuild').build({
+  entryPoints: ['src/index.tsx'],
+  bundle: true,
+  plugins: [vanillaExtractPlugin({ processCss, identifiers: 'short' })],
+  define: {
+    __DEV__: JSON.stringify(false),
+    __VERSION__: JSON.stringify(require('./package.json').version),
+    __VERSION_TIMESTAMP__: JSON.stringify(
+      require('./package.json').publishedAt,
+    ),
+  },
+  watch: watch
+    ? {
+        onRebuild(error, result) {
+          if (error) console.error('watch build failed:', error);
+          else console.log('watch build succeeded:', result);
+        },
+      }
+    : null,
+  external: ['react', 'react-dom'],
+  format: format,
+  bundle: true,
+  platform: 'browser',
+  outfile: `dist/index${format === 'esm' ? '.esm' : ''}.js`,
+});

package/run-dts-concat.js

@@ -0,0 +1,21 @@
+const fs = require('fs');
+const tsc = require('tsc-prog');
+
+tsc.build({
+  basePath: __dirname,
+  configFilePath: 'tsconfig.build.json',
+  compilerOptions: {
+    rootDir: 'src',
+    outDir: 'dist',
+    declaration: true, // must be set
+  },
+  bundleDeclaration: {
+    entryPoint: 'index.d.ts', // relative to the OUTPUT directory ('dist' here)
+  },
+});
+
+let contents = fs.readFileSync('./dist/index.d.ts', 'utf8');
+
+contents = contents.replace(/`/g, '');
+
+fs.writeFileSync('./dist/index.d.ts', contents, 'utf8');

package/src/components/CSSVariableWatch.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { dbg, err } from '../utils/debug';
+
+import { useResizeObserver } from './ResizeObserver';
+
+const error = err('CSSVariableWatch');
+const debug = dbg('CSSVariableWatch');
+
+type CSSVariableWatcherProps = {
+  varName: string;
+  onChange: (value: number) => void;
+};
+
+const WRAPPER_STYLE: React.CSSProperties = {
+  position: 'absolute',
+  pointerEvents: 'none',
+  width: 0,
+  height: 0,
+  lineHeight: 0,
+  fontSize: 0,
+  overflow: 'hidden',
+};
+
+export const useCSSVariableWatch = (
+  params: CSSVariableWatcherProps & {
+    ref: React.MutableRefObject<HTMLElement | null>;
+  },
+) => {
+  const lastValueRef = useRef<number>(0);
+  const onResize = React.useCallback(
+    ({ height }: { height: number }) => {
+      if (height && height !== lastValueRef.current) {
+        lastValueRef.current = height;
+        params.onChange(height);
+      }
+    },
+    [params.onChange],
+  );
+  useResizeObserver(params.ref, onResize, { earlyAttach: true });
+
+  React.useLayoutEffect(() => {
+    const value = params.ref.current!.getBoundingClientRect().height;
+
+    if (value) {
+      lastValueRef.current = value;
+
+      debug(`Variable ${params.varName} found and equals ${value}.`);
+      return params.onChange(value);
+    } else {
+      error(
+        `Specified variable ${params.varName} not found or does not have a numeric value.`,
+      );
+    }
+  }, []);
+};
+
+export const CSSVariableWatch = (props: CSSVariableWatcherProps) => {
+  const domRef = useRef<HTMLDivElement>(null);
+
+  useCSSVariableWatch({
+    ...props,
+    ref: domRef,
+  });
+
+  return (
+    <div
+      data-name="css-variable-watcher"
+      data-var={props.varName}
+      style={WRAPPER_STYLE}
+    >
+      <div
+        ref={domRef}
+        style={{
+          height: props.varName.startsWith('var(')
+            ? props.varName
+            : `var(${props.varName})`,
+        }}
+      ></div>
+    </div>
+  );
+};

package/src/components/DataSource/BooleanCollectionState.ts

@@ -0,0 +1,214 @@
+export type BooleanCollectionStateKeys<KeyType extends string | number> =
+  | true
+  | Record<KeyType, true>;
+
+export type BooleanCollectionStateObject<KeyType extends string | number> = {
+  positiveItems: BooleanCollectionStateKeys<KeyType>;
+  negativeItems: BooleanCollectionStateKeys<KeyType>;
+};
+
+export abstract class BooleanCollectionState<
+  StateObject,
+  KeyType extends string | number = string,
+> {
+  protected positiveMap?: Map<KeyType, true>;
+  protected negativeMap?: Map<KeyType, true>;
+
+  protected allNegative!: boolean;
+  protected allPositive!: boolean;
+
+  private initialState!: BooleanCollectionStateObject<KeyType>;
+
+  constructor(
+    state:
+      | BooleanCollectionStateObject<KeyType>
+      | BooleanCollectionState<StateObject, KeyType>,
+  ) {
+    const stateObject =
+      state instanceof Object.getPrototypeOf(this).constructor
+        ? //@ts-ignore
+          state.getState()
+        : state;
+
+    const positiveItems = this.getPositiveFromState(stateObject);
+    const negativeItems = this.getNegativeFromState(stateObject);
+
+    this.update({
+      negativeItems,
+      positiveItems,
+    });
+  }
+
+  abstract getPositiveFromState(
+    state: StateObject,
+  ): BooleanCollectionStateKeys<KeyType>;
+  abstract getNegativeFromState(
+    state: StateObject,
+  ): BooleanCollectionStateKeys<KeyType>;
+
+  abstract getState(): StateObject;
+
+  protected getInitialState() {
+    return this.initialState;
+  }
+
+  // protected getState(): BooleanCollectionStateObject<KeyType> {
+  //   return {
+  //     positiveItems: this.allPositive
+  //       ? true
+  //       : this.positiveMap?.topDownKeys() ?? [],
+  //     negativeItems: this.allNegative
+  //       ? true
+  //       : this.negativeMap?.topDownKeys() ?? [],
+  //   };
+  // }
+
+  public destroy() {
+    this.positiveMap?.clear();
+    this.negativeMap?.clear();
+
+    delete this.positiveMap;
+    delete this.negativeMap;
+  }
+
+  private update(state: BooleanCollectionStateObject<KeyType>) {
+    const { positiveItems, negativeItems } = state;
+
+    this.allNegative = negativeItems === true;
+    this.allPositive = positiveItems === true;
+
+    if (this.allNegative && this.allPositive) {
+      throw `Cannot have both negativeItems and positiveItems be true!`;
+    }
+
+    if (negativeItems && negativeItems !== true) {
+      if (!this.negativeMap) {
+        this.negativeMap = new Map();
+      }
+      this.negativeMap.clear();
+
+      for (let k in negativeItems) {
+        if (negativeItems.hasOwnProperty(k)) {
+          this.negativeMap.set(k, true);
+        }
+      }
+      if (this.positiveMap) {
+        this.positiveMap.clear();
+      }
+    }
+
+    if (positiveItems && positiveItems !== true) {
+      if (!this.positiveMap) {
+        this.positiveMap = new Map();
+      }
+      this.positiveMap.clear();
+
+      for (let k in positiveItems) {
+        if (positiveItems.hasOwnProperty(k)) {
+          this.positiveMap.set(k, true);
+        }
+      }
+
+      if (this.negativeMap) {
+        this.negativeMap.clear();
+      }
+    }
+  }
+
+  protected isDefaultNegativeSelection() {
+    return this.allNegative;
+  }
+
+  protected isDefaultPositiveSelection() {
+    return this.allPositive;
+  }
+
+  protected areAllNegative() {
+    return (
+      this.allNegative &&
+      (this.positiveMap ? this.positiveMap.size === 0 : true)
+    );
+  }
+  protected areAllPositive() {
+    return (
+      this.allPositive &&
+      (this.negativeMap ? this.negativeMap.size === 0 : true)
+    );
+  }
+
+  protected makeAllNegative() {
+    this.update({
+      negativeItems: true,
+      positiveItems: {} as Record<KeyType, true>,
+    });
+  }
+
+  protected makeAllPositive() {
+    this.update({
+      positiveItems: true,
+      negativeItems: {} as Record<KeyType, true>,
+    });
+  }
+
+  protected isItemPositive(key: KeyType) {
+    key = `${key}` as KeyType;
+    if (this.allPositive === true) {
+      if (this.allNegative === true) {
+        throw 'Cannot have both positiveItems and negativeItems be "true"';
+      }
+
+      return !this.negativeMap?.has(key as KeyType);
+    }
+
+    return !!this.positiveMap?.has(key as KeyType);
+  }
+
+  protected isItemNegative(key: KeyType) {
+    return !this.isItemPositive(key);
+  }
+
+  protected setItemValue(key: KeyType, shouldMakePositive: boolean) {
+    key = `${key}` as KeyType;
+    if (shouldMakePositive === this.isItemPositive(key)) {
+      return;
+    }
+
+    if (shouldMakePositive) {
+      if (this.allNegative === true) {
+        if (!this.positiveMap) {
+          throw `No positiveMap found when trying to set item ${key} be positive`;
+        }
+        this.positiveMap.set(key, true);
+      } else if (this.allPositive === true) {
+        if (!this.negativeMap) {
+          throw `No negativeMap found when trying to set item ${key} be positive`;
+        }
+        this.negativeMap.delete(key);
+      }
+    } else {
+      // we should collapse the item
+      if (this.allPositive === true) {
+        if (!this.negativeMap) {
+          throw `No negativeMap found when trying to set item ${key} be negative`;
+        }
+        this.negativeMap.set(key, true);
+      } else if (this.allNegative === true) {
+        if (!this.positiveMap) {
+          throw `No positiveMap found when trying to set item ${key} be negative`;
+        }
+        this.positiveMap?.delete(key);
+      }
+    }
+  }
+
+  protected makeItemNegative(key: KeyType) {
+    this.setItemValue(key, false);
+  }
+  protected makeItemPositive(key: KeyType) {
+    this.setItemValue(key, true);
+  }
+
+  protected toggleItem(key: KeyType) {
+    this.setItemValue(key, !this.isItemPositive(key));
+  }
+}