├── .gitignore
├── src
    ├── Test.md
    ├── index.tsx
    ├── utils
    │   ├── DataStructure.ts
    │   ├── MockData.ts
    │   └── Types.ts
    ├── Test.tsx
    ├── components
    │   ├── Expression.tsx
    │   ├── Dropdown.tsx
    │   └── DownshiftSelect.tsx
    └── __tests__
    │   ├── Extractor.test.tsx
    │   └── __snapshots__
    │       └── Extractor.test.tsx.snap
├── .npmignore
├── .babelrc
├── .github
    └── workflows
    │   └── test.yml
├── styleguide.config.js
├── jest.config.js
├── webpack.config.js
├── tsconfig.json
├── LICENSE
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | coverage
4 | styleguide
5 | 


--------------------------------------------------------------------------------
/src/Test.md:
--------------------------------------------------------------------------------
1 | Expression builder
2 | 
3 | ```jsx
4 | import Editor from './Test'
5 | ;<Editor />
6 | ```
7 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | src
2 | demo
3 | coverage
4 | .github
5 | tsconfig.json
6 | jest.config.js
7 | .babelrc
8 | webpack.config.js
9 | styleguide.config.js


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"presets": ["@babel/preset-env", "@babel/preset-react"],
 3 | 	"plugins": ["@babel/plugin-proposal-class-properties"],
 4 | 	"overrides": [
 5 | 		{
 6 | 			"test": ["./src/**/*.tsx", "./src/*.tsx", "./src/*.ts", "./src/**/*.ts"],
 7 | 			"presets": ["@babel/preset-typescript"]
 8 | 		}
 9 | 	]
10 | }
11 | 


--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
 1 | name: test
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [master]
 6 |   pull_request:
 7 |     branches: [master]
 8 | 
 9 | jobs:
10 |   build:
11 |     runs-on: ubuntu-latest
12 |     steps:
13 |       - uses: actions/checkout@v2
14 |       - name: Install dependencies
15 |         run: yarn
16 |       - name: Run tests
17 |         run: yarn test
18 | 


--------------------------------------------------------------------------------
/styleguide.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	components: 'src/*.tsx',
 3 | 	propsParser: require('react-docgen-typescript').withCustomConfig(
 4 | 		'./tsconfig.json'
 5 | 	).parse,
 6 | 	webpackConfig: {
 7 | 		module: {
 8 | 			rules: [
 9 | 				{
10 | 					test: /\.(tsx|ts)?$/,
11 | 					exclude: /node_modules/,
12 | 					loader: 'babel-loader'
13 | 				}
14 | 			]
15 | 		}
16 | 	}
17 | }
18 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	transform: {
 3 | 		'^.+\\.tsx?$': 'ts-jest'
 4 | 	},
 5 | 
 6 | 	preset: 'ts-jest',
 7 | 	globals: {
 8 | 		'ts-jest': {
 9 | 			diagnostics: false
10 | 		}
11 | 	},
12 | 	setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
13 | 	modulePathIgnorePatterns: ['<rootDir>/dist'],
14 | 	testPathIgnorePatterns: ['<rootDir>/dist/', '<rootDir>/node_modules/']
15 | }
16 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var PeerDepsExternalsPlugin = require('peer-deps-externals-webpack-plugin')
 3 | 
 4 | module.exports = {
 5 | 	mode: 'production',
 6 | 	entry: './src/index.tsx',
 7 | 	plugins: [new PeerDepsExternalsPlugin()],
 8 | 	output: {
 9 | 		path: path.resolve('dist'),
10 | 		filename: 'main.js',
11 | 		libraryTarget: 'commonjs2'
12 | 	},
13 | 	resolve: {
14 | 		extensions: ['.ts', '.tsx', '.js']
15 | 	},
16 | 	module: {
17 | 		rules: [
18 | 			{
19 | 				test: /\.(tsx|ts)?$/,
20 | 				exclude: /(node_modules)/,
21 | 				use: 'babel-loader'
22 | 			}
23 | 		]
24 | 	}
25 | }
26 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"jsx": "react",
 4 | 		// Target latest version of ECMAScript.
 5 | 		"target": "esnext",
 6 | 		// Search under node_modules for non-relative imports.
 7 | 		"moduleResolution": "node",
 8 | 		// Process & infer types from .js files.
 9 | 		"allowJs": true,
10 | 		// Don't emit; allow Babel to transform files.
11 | 		"noEmit": true,
12 | 		// Enable strictest settings like strictNullChecks & noImplicitAny.
13 | 		"strict": true,
14 | 		// Disallow features that require cross-file information for emit.
15 | 		"isolatedModules": true,
16 | 		// Import non-ES modules as default imports.
17 | 		"esModuleInterop": true
18 | 	}
19 | }
20 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import Dropdown from './components/Dropdown'
 3 | import { EditorState, TreeNode } from './utils/DataStructure'
 4 | import { EditorType, ExtractorProps } from './utils/Types'
 5 | 
 6 | export { EditorState, TreeNode } from './utils/DataStructure'
 7 | 
 8 | const ExpressionBuilder: FC<ExtractorProps> = props => {
 9 | 	// create a root node for the component
10 | 	const rootNode = new TreeNode(null)
11 | 	// initialize the editor state with root node
12 | 	const EditorData: EditorType = new EditorState(rootNode)
13 | 
14 | 	return <Dropdown {...props} node={rootNode} EditorData={EditorData} />
15 | }
16 | 
17 | export default ExpressionBuilder
18 | 


--------------------------------------------------------------------------------
/src/utils/DataStructure.ts:
--------------------------------------------------------------------------------
 1 | import { NodeType, TreeNodeValueType } from './Types'
 2 | 
 3 | export class TreeNode {
 4 | 	value: TreeNodeValueType
 5 | 	children: NodeType[]
 6 | 	constructor(value: TreeNodeValueType) {
 7 | 		this.value = value
 8 | 		this.children = []
 9 | 	}
10 | 
11 | 	addChild(node: NodeType) {
12 | 		this.children.push(node)
13 | 	}
14 | 
15 | 	setValue(val: TreeNodeValueType) {
16 | 		this.value = val
17 | 	}
18 | 
19 | 	clearChildren() {
20 | 		this.children = []
21 | 	}
22 | }
23 | 
24 | export class EditorState {
25 | 	root: NodeType
26 | 
27 | 	constructor(node: NodeType) {
28 | 		this.root = node
29 | 	}
30 | 
31 | 	buildExpression = (node: NodeType = this.root): any => {
32 | 		let str = ''
33 | 		if (node.value.type !== 'fn') return node.value.data
34 | 		node.children.forEach((child, idx) => {
35 | 			str += this.buildExpression(child)
36 | 			str += idx === node.children.length - 1 ? '' : ', '
37 | 		})
38 | 		return `${node.value.data.label} (${str})`
39 | 	}
40 | }
41 | 


--------------------------------------------------------------------------------
/src/Test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ExpressionBuilder from './index'
 3 | import { functions, staticValues } from './utils/MockData'
 4 | 
 5 | const options = [...functions, ...staticValues]
 6 | 
 7 | const stringRegex = /"([^\\"]|\\")*"/
 8 | 
 9 | const cb1 = () => alert('valid!')
10 | const cb2 = () => alert('invalid!')
11 | 
12 | const onChangeFn = st => console.log('change', st.buildExpression())
13 | const expressionRootClass = 'root-class'
14 | const expressionInputClass = 'input-class'
15 | 
16 | const validationFn = val => {
17 | 	// mock api request
18 | 	const res = !isNaN(val) || stringRegex.test(val)
19 | 	// console.log(res)
20 | 	return res
21 | }
22 | 
23 | const Root = () => {
24 | 	return (
25 | 		<>
26 | 			<ExpressionBuilder
27 | 				onChangeFn={onChangeFn}
28 | 				expressionRootClass={expressionRootClass}
29 | 				expressionInputClass={expressionInputClass}
30 | 				options={options}
31 | 				placeholder="Enter your expression"
32 | 				initialFocus
33 | 				validationFn={validationFn}
34 | 			/>
35 | 		</>
36 | 	)
37 | }
38 | 
39 | export default Root
40 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Anshuman Verma
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/utils/MockData.ts:
--------------------------------------------------------------------------------
 1 | export const functions = [
 2 | 	{
 3 | 		value: 'SPLIT (dim, delimiter, occurrence_number)',
 4 | 		label: 'SPLIT',
 5 | 		type: 'function',
 6 | 		key: 'split',
 7 | 		keyLabel: 'f(x)',
 8 | 		params: ['dim', 'delimiter', 'occurrence_number'],
 9 | 		helper:
10 | 			'Returns the nth substring divided by a specified delimiter. Index, n, starts from 0'
11 | 	},
12 | 	{
13 | 		value: 'CONCAT (dim1, dim2)',
14 | 		label: 'CONCAT',
15 | 		key: 'concat',
16 | 		params: ['dim1', 'dim2'],
17 | 		type: 'function',
18 | 		keyLabel: 'f(x)',
19 | 		helper: 'Returns the concatenation of two strings.'
20 | 	},
21 | 	{
22 | 		value: 'SUB (dim, starting_at, ending_at)',
23 | 		label: 'SUB',
24 | 		key: 'sub',
25 | 		params: ['dim', 'starting_at', 'ending_at'],
26 | 		type: 'function',
27 | 		keyLabel: 'f(x)',
28 | 		helper:
29 | 			'Returns a substring between specified character indices. Index starts from 0'
30 | 	},
31 | 	{
32 | 		value: 'EXTRACT (dim, prefix_string, suffix_string)',
33 | 		label: 'EXTRACT',
34 | 		key: 'extract',
35 | 		params: ['dim1', 'prefix_string', 'suffix_string'],
36 | 		type: 'function',
37 | 		keyLabel: 'f(x)',
38 | 		helper:
39 | 			'Returns a substring between the first prefix_string and first suffix_string'
40 | 	}
41 | ]
42 | 
43 | export const staticValues = [
44 | 	{
45 | 		value: 'ACCOUNT',
46 | 		label: 'Account',
47 | 		type: 'dimension',
48 | 		keyLabel: 'dim',
49 | 		key: 'account',
50 | 		helper: 'Account dimension'
51 | 	},
52 | 	{
53 | 		value: 'AD',
54 | 		label: 'Ad',
55 | 		type: 'dimension',
56 | 		keyLabel: 'dim',
57 | 		key: 'ad',
58 | 		helper: 'Account ad'
59 | 	}
60 | ]
61 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "react-expression-builder",
 3 | 	"version": "1.0.8",
 4 | 	"description": "A bare-bones react component to build function expressions.",
 5 | 	"main": "dist/main.js",
 6 | 	"scripts": {
 7 | 		"test": "jest",
 8 | 		"start": "styleguidist server",
 9 | 		"build-example": "styleguidist build",
10 | 		"build": "webpack"
11 | 	},
12 | 	"repository": {
13 | 		"type": "git",
14 | 		"url": "git+https://github.com/anshumanv/react-expression-builder.git"
15 | 	},
16 | 	"keywords": [
17 | 		"react",
18 | 		"component",
19 | 		"expression",
20 | 		"statement",
21 | 		"build"
22 | 	],
23 | 	"author": "anshumanv",
24 | 	"license": "MIT",
25 | 	"bugs": {
26 | 		"url": "https://github.com/anshumanv/react-expression-builder/issues"
27 | 	},
28 | 	"homepage": "https://github.com/anshumanv/react-expression-builder#readme",
29 | 	"peerDependencies": {
30 | 		"react": "^16.12.0",
31 | 		"react-dom": "^16.12.0"
32 | 	},
33 | 	"devDependencies": {
34 | 		"@babel/core": "^7.8.3",
35 | 		"@babel/plugin-proposal-class-properties": "^7.8.3",
36 | 		"@babel/preset-env": "^7.8.3",
37 | 		"@babel/preset-react": "^7.8.3",
38 | 		"@babel/preset-typescript": "^7.8.3",
39 | 		"@testing-library/jest-dom": "^5.9.0",
40 | 		"@testing-library/react": "^9.4.0",
41 | 		"@types/react": "^16.9.19",
42 | 		"babel-loader": "^8.0.6",
43 | 		"jest": "^26.0.1",
44 | 		"peer-deps-externals-webpack-plugin": "^1.0.4",
45 | 		"react": "^16.12.0",
46 | 		"react-docgen-typescript": "^1.16.2",
47 | 		"react-dom": "^16.12.0",
48 | 		"react-styleguidist": "^10.6.0",
49 | 		"ts-jest": "^26.1.0",
50 | 		"typescript": "^3.7.5",
51 | 		"webpack": "^4.5.0",
52 | 		"webpack-cli": "^3.2.1"
53 | 	},
54 | 	"dependencies": {
55 | 		"downshift": "^4.0.7"
56 | 	}
57 | }
58 | 


--------------------------------------------------------------------------------
/src/utils/Types.ts:
--------------------------------------------------------------------------------
 1 | import { EditorState, TreeNode } from './DataStructure'
 2 | 
 3 | export interface ExtractorProps {
 4 | 	onChangeFn: (editorState: EditorType) => void
 5 | 	options: OptionType[]
 6 | }
 7 | 
 8 | export interface EditorType extends EditorState {}
 9 | 
10 | export interface NodeType extends TreeNode {}
11 | 
12 | export interface OptionType {
13 | 	key: string
14 | 	type: string
15 | 	params?: string[]
16 | 	keyLabel?: string
17 | 	label: string
18 | }
19 | 
20 | export interface TreeNodeValueType {
21 | 	data: OptionType
22 | 	type: string
23 | }
24 | 
25 | export interface DropdownProps {
26 | 	inputRef?: React.RefObject<HTMLInputElement>
27 | 	inputPlaceholder?: string
28 | 	placeholder: string
29 | 	onKeyDown?: () => void
30 | 	initialFocus?: boolean
31 | 	node: NodeType
32 | 	EditorData: EditorType
33 | 	handleValueChange?: () => void
34 | 	options: OptionType[]
35 | 	validationFn: (val: any) => boolean
36 | 	inputValue?: any
37 | 	onChangeFn: (state: EditorType) => void
38 | 	expressionRootClass: string | undefined
39 | 	expressionInputClass: string | undefined
40 | }
41 | 
42 | export interface SelectorPropTypes {
43 | 	inputRef: React.RefObject<HTMLInputElement>
44 | 	inputPlaceholder: string
45 | 	onKeyDown: (e) => void
46 | 	handleValueChange: (e) => void
47 | 	options: OptionType[]
48 | 	validationFn: (value: any) => boolean
49 | 	inputValue: string
50 | 	expressionInputClass: string | undefined
51 | }
52 | 
53 | export interface ExpressionRootPropTypes {
54 | 	// function name that matches the input
55 | 	fname: string
56 | 	// parent node on which we append child dropdown as per the fn param
57 | 	node: NodeType
58 | 	// Editor data which needs to be passed down to every level
59 | 	EditorData: EditorType
60 | 	setExp: (isExpression: boolean) => void
61 | 	options: OptionType[]
62 | 	setValue: (value: string) => void
63 | 	onChangeFn: (state: EditorType) => void
64 | 	expressionRootClass: string | undefined
65 | 	expressionInputClass: string | undefined
66 | 	validationFn: (val: string) => boolean
67 | }
68 | 


--------------------------------------------------------------------------------
/src/components/Expression.tsx:
--------------------------------------------------------------------------------
  1 | import React, { FC, useEffect, useRef, useState } from 'react'
  2 | import { TreeNode } from '../utils/DataStructure'
  3 | import { ExpressionRootPropTypes, OptionType } from '../utils/Types'
  4 | import Drop from './Dropdown'
  5 | 
  6 | const Expression: FC<ExpressionRootPropTypes> = (
  7 | 	props: ExpressionRootPropTypes
  8 | ) => {
  9 | 	const {
 10 | 		fname,
 11 | 		node,
 12 | 		EditorData,
 13 | 		setExp,
 14 | 		options,
 15 | 		setValue,
 16 | 		onChangeFn,
 17 | 		expressionRootClass = '',
 18 | 		expressionInputClass = '',
 19 | 		validationFn
 20 | 	} = props
 21 | 	const [rootFocus, setRootFocus] = useState(false)
 22 | 	const expressionRoot = useRef(null)
 23 | 	// find function metadata as per the given key.
 24 | 	const fnData: OptionType | undefined = options.find(
 25 | 		f => f.key === fname.toLowerCase()
 26 | 	)
 27 | 
 28 | 	useEffect(() => {
 29 | 		// create nodes for all children of the given function
 30 | 		const { params } = fnData!
 31 | 		params!.forEach(() => {
 32 | 			const refNode = new TreeNode({ data: '', type: 'string' })
 33 | 			node.addChild(refNode)
 34 | 		})
 35 | 	}, [])
 36 | 
 37 | 	const findNextNode = () => {
 38 | 		const initNode = (expressionRoot.current as any).firstElementChild
 39 | 		if (initNode.dataset.type === 'expression-root') return initNode
 40 | 		return initNode.firstElementChild
 41 | 	}
 42 | 
 43 | 	const findPrevNode = () => {
 44 | 		let initNode = expressionRoot.current as any
 45 | 		if (initNode.previousElementSibling) {
 46 | 			initNode = initNode.previousElementSibling
 47 | 			while (
 48 | 				initNode.lastElementChild &&
 49 | 				initNode.dataset.type === 'expression-root'
 50 | 			) {
 51 | 				initNode = initNode.lastElementChild
 52 | 			}
 53 | 			initNode = initNode.firstElementChild
 54 | 		} else {
 55 | 			if (initNode.parentElement.dataset.type === 'expression-root')
 56 | 				initNode = initNode.parentElement
 57 | 		}
 58 | 		return initNode
 59 | 	}
 60 | 
 61 | 	const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {
 62 | 		e.stopPropagation()
 63 | 		// remove node when backspace is pressed and expression is in focus
 64 | 		switch (e.keyCode) {
 65 | 			case 8:
 66 | 			case 46:
 67 | 				if (rootFocus) {
 68 | 					setExp(false)
 69 | 					node.clearChildren()
 70 | 					setValue('')
 71 | 				}
 72 | 				break
 73 | 			case 39:
 74 | 				findNextNode().focus()
 75 | 				break
 76 | 			case 37:
 77 | 				findPrevNode().focus()
 78 | 				break
 79 | 			default:
 80 | 				return
 81 | 		}
 82 | 	}
 83 | 
 84 | 	// Build the dom with dropdowns for the parameters of the function
 85 | 	const PHDom = () => {
 86 | 		const { params } = fnData!
 87 | 		return params!.map((param, i) => {
 88 | 			return (
 89 | 				<Drop
 90 | 					EditorData={EditorData}
 91 | 					key={i + param}
 92 | 					onChangeFn={onChangeFn}
 93 | 					options={options}
 94 | 					expressionInputClass={expressionInputClass}
 95 | 					expressionRootClass={expressionRootClass}
 96 | 					node={node.children && node.children[i]}
 97 | 					validationFn={validationFn}
 98 | 					initialFocus={i === 0}
 99 | 					placeholder={param}
100 | 				/>
101 | 			)
102 | 		})
103 | 	}
104 | 	if (fname) {
105 | 		return (
106 | 			<span
107 | 				ref={expressionRoot}
108 | 				className={expressionRootClass}
109 | 				data-type="expression-root"
110 | 				onKeyDown={handleKeyDown}
111 | 				onFocus={() => setRootFocus(true)}
112 | 				onBlur={() => setRootFocus(false)}
113 | 				tabIndex={0}
114 | 				style={{ display: 'flex' }}
115 | 			>
116 | 				{fnData!.label}({PHDom()})
117 | 			</span>
118 | 		)
119 | 	}
120 | 	return null
121 | }
122 | 
123 | export default Expression
124 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <h1 align="center"> react-expression-builder </h1>
  2 | <p align="center">
  3 | <a href="https://www.npmjs.com/package/react-expression-builder">
  4 |   <img src="https://img.shields.io/npm/v/react-expression-builder.svg?style=for-the-badge" align="center">
  5 | </a>
  6 | 
  7 | <a href="https://www.npmjs.com/package/react-expression-builder">
  8 |   <img src="https://img.shields.io/npm/dt/react-expression-builder.svg?style=for-the-badge" align="center">
  9 | </a>
 10 | 
 11 | <a href="https://github.com/anshumanv/react-expression-builder">
 12 |   <img src="https://img.shields.io/github/workflow/status/anshumanv/react-expression-builder/test?style=for-the-badge" align="center">
 13 | </a>
 14 | 
 15 | </p>
 16 | 
 17 | <hr>
 18 | 
 19 | <p align="center">A bare-bones react component to build function expressions with your data.</p>
 20 | 
 21 | ### Features
 22 | 
 23 | - Typeahead support
 24 | - Full keyboard navigation and deletion
 25 | - Easy custom styling as per input
 26 | - Input validation at granular level
 27 | - Customizable options
 28 | - Single Dependency, no bloat
 29 | 
 30 | ### Installation
 31 | 
 32 | Install the package -
 33 | 
 34 | ```sh
 35 | npm i react-expression-builder
 36 | 
 37 | OR
 38 | 
 39 | yarn add react-expression-builder
 40 | ```
 41 | 
 42 | ### Usage
 43 | 
 44 | ```js
 45 | import ExpressionBuilder from 'react-expression-builder'
 46 | 
 47 | //1. accumulate your options
 48 | // fn must have an additional property 'params' -  eg `params: ['dim', 'delimiter', 'occurrence_number']`
 49 | const options = [{..., key: '...', type: '...', label: '...',...}, {...}]
 50 | 
 51 | // regex to match entires within ""
 52 | const stringRegex = /"([^\\"]|\\")*"/
 53 | 
 54 | // Optional - Function called on every state change, store your changes on the server
 55 | const onChangeFn = editorState => console.log(editorState, editorState.buildExpression())
 56 | 
 57 | // Optional - class for the expression element, use for optional styling
 58 | const expressionRootClass = 'root-class'
 59 | 
 60 | // Optional - class for the input container
 61 | const expressionInputClass = 'input-class'
 62 | 
 63 | // Optional - Function which validates all the input values and returns a bool.
 64 | const validationFn = val => {
 65 | 	return !isNaN(val) || stringRegex.test(val)
 66 | }
 67 | 
 68 | <ExpressionBuilder
 69 |   onChangeFn={onChangeFn}
 70 |   options={options}
 71 |   expressionRootClass={expressionRootClass} // Optional
 72 |   expressionInputClass={expressionInputClass} // Optional
 73 |   placeholder="Enter your expression" // Optional
 74 |   initialFocus={true} // if you want your input to be focussed on mount by default
 75 |   validationFn={validationFn} // Optional
 76 | />
 77 | 
 78 | ```
 79 | 
 80 | ### Data Structure
 81 | 
 82 | Uses an N-Ary tree to store/manipulate the expression data, simple recursive function gives you the complete string. You can check [DataStructure.ts](https://github.com/anshumanv/react-expression-builder/blob/master/src/utils/DataStructure.ts) for the simple implementation, if curious.
 83 | 
 84 | Note - This only gives the skeleton and functionality, styling is upto the user, you can either make use of respective classes or wrap this component in a CSS-in-JS solution. For example, a nicely styled solution would look somewhat like [this](https://knitui.design/?path=/story/extractor--basic). This is not complete yet, need more work. Meanwhile, suggestions are appreciated.
 85 | 
 86 | ## Author
 87 | 
 88 | [Anshuman Verma](https://github.com/anshumanv)
 89 | 
 90 | [<img src="https://image.flaticon.com/icons/svg/185/185961.svg" width="35" padding="10">](https://twitter.com/Anshumaniac12)
 91 | [<img src="https://image.flaticon.com/icons/svg/185/185964.svg" width="35" padding="10">](https://linkedin.com/in/anshumanv12)
 92 | [<img src="https://image.flaticon.com/icons/svg/185/185981.svg" width="35" padding="10">](https://www.facebook.com/anshumanv12)
 93 | [<img src="https://image.flaticon.com/icons/svg/985/985680.svg" width="35" padding="10">](https://www.paypal.me/AnshumanVerma)
 94 | 
 95 | ## Contribute
 96 | 
 97 | Found a bug, please [create an issue](https://github.com/anshumanv/react-expression-builder/issues/new)
 98 | 
 99 | ## License
100 | 
101 | [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/anshumanv/react-expression-builder/blob/master/LICENSE)
102 | 
103 | > © Anshuman Verma
104 | 


--------------------------------------------------------------------------------
/src/components/Dropdown.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useRef, useState } from 'react'
  2 | import { DropdownProps } from '../utils/Types'
  3 | import DownSelect from './DownshiftSelect'
  4 | import Exp from './Expression'
  5 | 
  6 | const Drop = (props: DropdownProps) => {
  7 | 	const {
  8 | 		placeholder,
  9 | 		EditorData,
 10 | 		node,
 11 | 		initialFocus = false,
 12 | 		options,
 13 | 		validationFn,
 14 | 		onChangeFn,
 15 | 		expressionRootClass,
 16 | 		expressionInputClass
 17 | 	} = props
 18 | 
 19 | 	const [value, setValue] = useState<string>('')
 20 | 	const [exp, setExp] = useState<boolean>(false)
 21 | 	const dropRef = useRef<HTMLInputElement>(null)
 22 | 
 23 | 	useEffect(() => {
 24 | 		if (dropRef.current && initialFocus) {
 25 | 			dropRef.current.focus()
 26 | 		}
 27 | 	}, [dropRef.current])
 28 | 
 29 | 	const fnKeys: string[] = options
 30 | 		.filter(fn => fn.type === 'function')
 31 | 		.map(fn => fn.key)
 32 | 
 33 | 	const getValueType = value => {
 34 | 		if (fnKeys.includes(value.toLowerCase())) return 'fn'
 35 | 		const listOption = options.find(option => option.label === value)
 36 | 		return listOption ? listOption.type : 'string'
 37 | 	}
 38 | 
 39 | 	const getValueData = (type, value) => {
 40 | 		if (type === 'fn') {
 41 | 			return options.find(f => f.key === value.toLowerCase())
 42 | 		}
 43 | 		return value
 44 | 	}
 45 | 
 46 | 	const handleValueChange = e => {
 47 | 		const val = e.target.value
 48 | 		const valueType = getValueType(val)
 49 | 		const valueData = getValueData(valueType, val)
 50 | 		setValue(val)
 51 | 		node.setValue({ data: valueData, type: valueType })
 52 | 
 53 | 		// In case the input is a function, scaffold it's params
 54 | 		if (valueType === 'fn') setExp(true)
 55 | 
 56 | 		if (onChangeFn) onChangeFn(EditorData)
 57 | 	}
 58 | 
 59 | 	const getNextNode = () => {
 60 | 		let currElement
 61 | 		if (dropRef.current) {
 62 | 			currElement = dropRef.current.parentElement
 63 | 		}
 64 | 		// if the present element has a next sibling, directly switch to next
 65 | 		if (currElement.nextElementSibling)
 66 | 			currElement = currElement.nextElementSibling
 67 | 		// this is when you want to skip the top levels and only switch in text fields
 68 | 		else {
 69 | 			while (currElement && !currElement.nextElementSibling) {
 70 | 				currElement = currElement.parentElement
 71 | 				if (
 72 | 					currElement &&
 73 | 					currElement.dataset.type === 'knit-ui_extractor-root'
 74 | 				)
 75 | 					return
 76 | 			}
 77 | 			currElement = currElement.nextElementSibling
 78 | 		}
 79 | 
 80 | 		if (currElement.dataset.type !== 'expression-root')
 81 | 			currElement = currElement.firstElementChild
 82 | 
 83 | 		return currElement
 84 | 	}
 85 | 
 86 | 	const getPrevNode = () => {
 87 | 		let currElement
 88 | 		if (dropRef.current) {
 89 | 			currElement = dropRef.current.parentElement
 90 | 		}
 91 | 		// if the present element has a next sibling, directly switch to next
 92 | 		if (currElement.previousElementSibling)
 93 | 			currElement = currElement.previousElementSibling
 94 | 		else {
 95 | 			if (!currElement.previousElementSibling)
 96 | 				currElement = currElement.parentElement
 97 | 		}
 98 | 		// some transitions as per the element we arrive on
 99 | 		while (currElement.dataset.type === 'expression-root' && !initialFocus) {
100 | 			currElement = currElement.lastElementChild
101 | 		}
102 | 		if (currElement.dataset.type === 'expression-input-root') {
103 | 			currElement = currElement.firstElementChild
104 | 		}
105 | 		return currElement
106 | 	}
107 | 
108 | 	const handleDir = e => {
109 | 		e.stopPropagation()
110 | 		const inputNode = dropRef.current!
111 | 		switch (e.keyCode) {
112 | 			case 39:
113 | 				// only  at last caret position
114 | 				if (inputNode.selectionStart !== inputNode.value.length) return
115 | 				e.preventDefault()
116 | 				const nextNode = getNextNode()
117 | 				if (nextNode) nextNode.focus()
118 | 				break
119 | 			case 37:
120 | 				// only when at caret position is 0
121 | 				if (inputNode.selectionStart !== 0) return
122 | 				e.preventDefault()
123 | 				const prevNode = getPrevNode()
124 | 				if (prevNode) prevNode.focus()
125 | 				break
126 | 			default:
127 | 				break
128 | 		}
129 | 	}
130 | 
131 | 	if (!exp) {
132 | 		return (
133 | 			<DownSelect
134 | 				inputRef={dropRef}
135 | 				inputPlaceholder={placeholder}
136 | 				options={options}
137 | 				onKeyDown={e => handleDir(e)}
138 | 				inputValue={value}
139 | 				validationFn={validationFn}
140 | 				expressionInputClass={expressionInputClass}
141 | 				handleValueChange={handleValueChange}
142 | 			/>
143 | 		)
144 | 	}
145 | 	return (
146 | 		<Exp
147 | 			EditorData={EditorData}
148 | 			options={options}
149 | 			setExp={setExp}
150 | 			setValue={setValue}
151 | 			node={node}
152 | 			onChangeFn={onChangeFn}
153 | 			validationFn={validationFn}
154 | 			expressionRootClass={expressionRootClass}
155 | 			expressionInputClass={expressionInputClass}
156 | 			fname={value}
157 | 		/>
158 | 	)
159 | }
160 | 
161 | export default Drop
162 | 


--------------------------------------------------------------------------------
/src/components/DownshiftSelect.tsx:
--------------------------------------------------------------------------------
  1 | import { useCombobox } from 'downshift'
  2 | import React, { CSSProperties, useEffect, useRef, useState } from 'react'
  3 | import { OptionType, SelectorPropTypes } from '../utils/Types'
  4 | 
  5 | const menuStyles: CSSProperties = {
  6 | 	backgroundColor: 'white',
  7 | 	fontWeight: 'normal',
  8 | 	position: 'absolute'
  9 | }
 10 | 
 11 | const textContentStyle: CSSProperties = {
 12 | 	position: 'absolute',
 13 | 	top: 0,
 14 | 	left: 0,
 15 | 	visibility: 'hidden',
 16 | 	height: 0,
 17 | 	overflow: 'scroll',
 18 | 	whiteSpace: 'pre'
 19 | }
 20 | 
 21 | const DropdownCombobox: React.FC<SelectorPropTypes> = (
 22 | 	props: SelectorPropTypes
 23 | ) => {
 24 | 	const {
 25 | 		inputRef,
 26 | 		inputPlaceholder,
 27 | 		onKeyDown,
 28 | 		handleValueChange,
 29 | 		options,
 30 | 		validationFn,
 31 | 		inputValue,
 32 | 		expressionInputClass
 33 | 	} = props
 34 | 
 35 | 	const [inputItems, setInputItems] = useState<OptionType[]>(options)
 36 | 	const [valid, setValid] = useState<boolean>(true)
 37 | 	const [valueType, setValueType] = useState<string>('string')
 38 | 
 39 | 	const matchesAnInput: boolean = options.some(
 40 | 		item => item.label === inputValue
 41 | 	)
 42 | 
 43 | 	const textRef = useRef<HTMLDivElement>(null)
 44 | 
 45 | 	useEffect(() => {
 46 | 		setInputItems(
 47 | 			options.filter(item => {
 48 | 				return item.key.toLowerCase().startsWith(inputValue.toLowerCase())
 49 | 			})
 50 | 		)
 51 | 		if (validationFn) {
 52 | 			validationFn(inputValue) || matchesAnInput
 53 | 				? setValid(true)
 54 | 				: setValid(false)
 55 | 		}
 56 | 	}, [inputValue])
 57 | 
 58 | 	const handleValueTypeChange = (val: string): void => {
 59 | 		// check if the input value is present in any of the option
 60 | 		const isPresentInOptions = options.find(option => option.label === val)
 61 | 		if (isPresentInOptions) {
 62 | 			setValueType(isPresentInOptions.type)
 63 | 		} else {
 64 | 			setValueType('string') // can also use typeof formattedInputValue but it will result in string anyways
 65 | 		}
 66 | 	}
 67 | 
 68 | 	const stateReducer = (state, actionAndChanges) => {
 69 | 		const { stateChangeTypes } = useCombobox
 70 | 		switch (actionAndChanges.type) {
 71 | 			case stateChangeTypes.ItemClick:
 72 | 			case stateChangeTypes.InputKeyDownEnter:
 73 | 				// case useCombobox.stateChangeTypes.InputBlur:
 74 | 				handleValueChange({
 75 | 					target: {
 76 | 						value:
 77 | 							state.highlightedIndex > -1
 78 | 								? actionAndChanges.changes.selectedItem.label
 79 | 								: actionAndChanges.changes.inputValue || ''
 80 | 					}
 81 | 				})
 82 | 				if (state.highlightedIndex > -1) {
 83 | 					// handleValueTypeChange(actionAndChanges.changes.selectedItem.label)
 84 | 					setValueType(actionAndChanges.changes.selectedItem.type)
 85 | 				}
 86 | 
 87 | 				return {
 88 | 					...actionAndChanges.changes,
 89 | 					// if we had an item highlighted in the previous state.
 90 | 					...(state.highlightedIndex > -1 && {
 91 | 						inputValue: actionAndChanges.changes.selectedItem.key
 92 | 					})
 93 | 				}
 94 | 			default:
 95 | 				return actionAndChanges.changes // otherwise business as usual.
 96 | 		}
 97 | 	}
 98 | 
 99 | 	const {
100 | 		isOpen,
101 | 		openMenu,
102 | 		getMenuProps,
103 | 		getInputProps,
104 | 		getComboboxProps,
105 | 		highlightedIndex,
106 | 		getItemProps
107 | 	} = useCombobox({
108 | 		items: inputItems,
109 | 		defaultIsOpen: true,
110 | 		initialIsOpen: true,
111 | 		initialHighlightedIndex: 0,
112 | 		stateReducer
113 | 	})
114 | 
115 | 	const updateValueAndType = (e: React.ChangeEvent<HTMLInputElement>): void => {
116 | 		const val = (e.target as HTMLInputElement).value
117 | 
118 | 		handleValueChange(e)
119 | 		handleValueTypeChange(val)
120 | 	}
121 | 
122 | 	const getInputWidth = () => {
123 | 		if (textRef.current) {
124 | 			return textRef.current.scrollWidth + 8
125 | 		}
126 | 		return '10rem'
127 | 	}
128 | 
129 | 	const showMenu = isOpen && !matchesAnInput && inputItems.length > 0
130 | 
131 | 	return (
132 | 		<>
133 | 			{/* <label {...getLabelProps()}>Choose an element:</label> */}
134 | 			<div
135 | 				data-type="expression-input-root"
136 | 				{...getComboboxProps()}
137 | 				className={expressionInputClass}
138 | 			>
139 | 				<input
140 | 					{...getInputProps({
141 | 						onChange: updateValueAndType,
142 | 						onKeyDown: onKeyDown,
143 | 						value: inputValue,
144 | 						ref: inputRef,
145 | 						placeholder: inputPlaceholder,
146 | 						onFocus: () => openMenu()
147 | 					})}
148 | 					style={{
149 | 						width: getInputWidth()
150 | 					}}
151 | 					data-valid={valid}
152 | 					data-value-type={valueType}
153 | 				/>
154 | 				<div ref={textRef} style={textContentStyle}>
155 | 					{inputValue || inputPlaceholder}
156 | 				</div>
157 | 				{showMenu && (
158 | 					<ul
159 | 						data-type="expression-list"
160 | 						{...getMenuProps()}
161 | 						style={menuStyles}
162 | 					>
163 | 						{inputItems.map((item, index) => (
164 | 							<li
165 | 								data-type="expression-list-item"
166 | 								data-item-type={item.type}
167 | 								style={
168 | 									highlightedIndex === index
169 | 										? //  TODO: Make this configurable
170 | 										  { backgroundColor: '#f2f2f2' }
171 | 										: {}
172 | 								}
173 | 								key={`${item.key}${index}`}
174 | 								{...getItemProps({ item, index })}
175 | 							>
176 | 								<span>{item.label}</span>
177 | 								{/*TODO: Will enable this sometime in future to show the type of expression */}
178 | 								{/* <span>{item.keyLabel || ''}</span> */}
179 | 							</li>
180 | 						))}
181 | 					</ul>
182 | 				)}
183 | 			</div>
184 | 		</>
185 | 	)
186 | }
187 | 
188 | export default DropdownCombobox
189 | 


--------------------------------------------------------------------------------
/src/__tests__/Extractor.test.tsx:
--------------------------------------------------------------------------------
  1 | import { cleanup, fireEvent, render } from '@testing-library/react'
  2 | import React from 'react'
  3 | import Extractor from '../'
  4 | import { functions, staticValues } from '../utils/MockData'
  5 | 
  6 | afterEach(cleanup)
  7 | 
  8 | // functions for the extractor
  9 | const options = [...functions, ...staticValues]
 10 | 
 11 | const concatFunction = functions[1]
 12 | const adDimension = staticValues[1]
 13 | 
 14 | const onUpdate = editorState => {
 15 | 	return editorState.buildExpression()
 16 | }
 17 | 
 18 | const extractorProps = {
 19 | 	onChangeFn: onUpdate,
 20 | 	options: options
 21 | }
 22 | 
 23 | describe('Extractor renders properly', () => {
 24 | 	it('Renders correctly', () => {
 25 | 		const { asFragment } = render(<Extractor {...extractorProps} />)
 26 | 
 27 | 		// Get the options list which should be shown by default
 28 | 		const optionsList = document.querySelector('[data-type="expression-list"]')
 29 | 		expect(optionsList).toBeInTheDocument()
 30 | 
 31 | 		// Check initial focus on render
 32 | 		const { activeElement } = document
 33 | 		expect(activeElement!.parentElement).toHaveAttribute(
 34 | 			'data-type',
 35 | 			'expression-input-root'
 36 | 		)
 37 | 
 38 | 		// Input field should how focus initially
 39 | 		expect(asFragment()).toMatchSnapshot()
 40 | 	})
 41 | 	it('Scaffolds an expression on typing one', () => {
 42 | 		const { asFragment } = render(<Extractor {...extractorProps} />)
 43 | 		// Get the root input element
 44 | 		const { activeElement } = document
 45 | 		fireEvent.input(activeElement as any, {
 46 | 			target: { value: functions[0].key }
 47 | 		})
 48 | 
 49 | 		// Check that all params are scaffolded properly
 50 | 		const expressionInputRoots = document.querySelectorAll(
 51 | 			'[data-type="expression-input-root"]'
 52 | 		)
 53 | 		expect(expressionInputRoots).toHaveLength(3)
 54 | 
 55 | 		// Check that the expression root is created
 56 | 		const expressionRoots = document.querySelectorAll(
 57 | 			'[data-type="expression-root"]'
 58 | 		)
 59 | 		expect(expressionRoots).toHaveLength(1)
 60 | 
 61 | 		expect(asFragment()).toMatchSnapshot()
 62 | 	})
 63 | 	it('Hides options list on blur', () => {
 64 | 		const { asFragment } = render(<Extractor {...extractorProps} />)
 65 | 		// Initially the input has focus
 66 | 		// Get the options list which should be shown by default
 67 | 		const optionsList = document.querySelector('[data-type="expression-list"]')
 68 | 		expect(optionsList).toBeInTheDocument()
 69 | 
 70 | 		// create a new element and transfer focus
 71 | 		const newInput = document.createElement('input')
 72 | 		newInput.focus()
 73 | 
 74 | 		expect(optionsList).not.toBeInTheDocument()
 75 | 
 76 | 		expect(asFragment()).toMatchSnapshot()
 77 | 	})
 78 | 	it('Applies correct data attributes', () => {
 79 | 		const { asFragment } = render(<Extractor {...extractorProps} />)
 80 | 
 81 | 		// Get the root input element
 82 | 		const { activeElement } = document
 83 | 		fireEvent.input(activeElement as any, {
 84 | 			target: { value: staticValues[1].label }
 85 | 		})
 86 | 
 87 | 		// Check for attributes
 88 | 		expect(activeElement).toHaveAttribute('data-value-type', 'dimension')
 89 | 
 90 | 		expect(asFragment()).toMatchSnapshot()
 91 | 	})
 92 | })
 93 | 
 94 | describe('Extractor builds data structure properly', () => {
 95 | 	it('Fires the onChange function', () => {
 96 | 		const onChangeFn = jest.fn()
 97 | 		const { asFragment } = render(
 98 | 			<Extractor {...extractorProps} onChangeFn={onChangeFn} />
 99 | 		)
100 | 
101 | 		// Get the root input element
102 | 		const { activeElement } = document
103 | 		fireEvent.change(activeElement as any, {
104 | 			target: { value: adDimension.label }
105 | 		})
106 | 
107 | 		expect(onChangeFn).toHaveBeenCalled()
108 | 
109 | 		expect(asFragment()).toMatchSnapshot()
110 | 	})
111 | 
112 | 	it('Builds correct string on input', () => {
113 | 		const onChangeFn = jest.fn(editorState => editorState.buildExpression())
114 | 		const { asFragment } = render(
115 | 			<Extractor {...extractorProps} onChangeFn={onChangeFn} />
116 | 		)
117 | 
118 | 		// Scaffold and expression
119 | 		const { activeElement } = document
120 | 		fireEvent.change(activeElement as any, {
121 | 			target: { value: concatFunction.label }
122 | 		})
123 | 
124 | 		// Get scaffolded params
125 | 		const expressionParamsInput = document.querySelectorAll(
126 | 			'[data-type="expression-input-root"] input'
127 | 		)
128 | 		expect(expressionParamsInput).toHaveLength(2)
129 | 		fireEvent.change(expressionParamsInput[0], {
130 | 			target: { value: adDimension.label }
131 | 		})
132 | 		fireEvent.change(expressionParamsInput[1], { target: { value: '"_"' } })
133 | 
134 | 		expect(onChangeFn).toHaveBeenCalledTimes(3)
135 | 		expect(onChangeFn.mock.results[2].value).toEqual('CONCAT (Ad, "_")')
136 | 
137 | 		expect(asFragment()).toMatchSnapshot()
138 | 	})
139 | })
140 | 
141 | describe('Keyboard events work properly', () => {
142 | 	it('Should navigate to the expression root on pressing left on first param', () => {
143 | 		const { asFragment } = render(<Extractor {...extractorProps} />)
144 | 
145 | 		// Get the root input element
146 | 		let { activeElement } = document
147 | 		fireEvent.change(activeElement as any, {
148 | 			target: { value: concatFunction.key }
149 | 		})
150 | 
151 | 		// Active element will be changed to the first param of the expression
152 | 		activeElement = document.activeElement
153 | 
154 | 		// Fire left arrow key
155 | 		fireEvent.keyDown(activeElement as any, { keyCode: 37 })
156 | 
157 | 		// Check that the focus has shifted to the root of the expression
158 | 		activeElement = document.activeElement
159 | 		expect(activeElement).toHaveAttribute('data-type', 'expression-root')
160 | 
161 | 		expect(asFragment()).toMatchSnapshot()
162 | 	})
163 | 	it.skip('Should navigate to the next param on pressing right ', () => {
164 | 		const { asFragment } = render(<Extractor {...extractorProps} />)
165 | 
166 | 		// Get the root input element
167 | 		let { activeElement } = document
168 | 		fireEvent.change(activeElement as any, {
169 | 			target: { value: concatFunction.key }
170 | 		})
171 | 		// Active element will be changed to the first param of the expression
172 | 		activeElement = document.activeElement
173 | 		// Fire right arrow key
174 | 		fireEvent.keyDown(activeElement as any, { keyCode: 39 })
175 | 
176 | 		// Check that the focus has shifted to the root of the expression
177 | 		activeElement = document.activeElement
178 | 		expect(activeElement!.parentElement).toHaveAttribute(
179 | 			'data-type',
180 | 			'expression-input-root'
181 | 		)
182 | 		const allInputs = document.querySelectorAll(
183 | 			'[data-type="expression-input-root"]'
184 | 		)
185 | 		const lastInput = allInputs[1].firstElementChild
186 | 		expect(lastInput).toEqual(activeElement)
187 | 
188 | 		// Check that on pressing right, the focus stays for last param
189 | 		fireEvent.keyDown(activeElement as any, { keyCode: 39 })
190 | 		expect(document.activeElement).toEqual(lastInput)
191 | 
192 | 		expect(asFragment()).toMatchSnapshot()
193 | 	})
194 | 	it('Should delete the expression root on pressing backspace ', () => {
195 | 		const { asFragment } = render(<Extractor {...extractorProps} />)
196 | 
197 | 		// Get the root input element
198 | 		let { activeElement } = document
199 | 		fireEvent.change(activeElement as any, {
200 | 			target: { value: concatFunction.key }
201 | 		})
202 | 
203 | 		// Active element will be changed to the first param of the expression
204 | 		activeElement = document.activeElement
205 | 
206 | 		// Fire left arrow key
207 | 		fireEvent.keyDown(activeElement as any, { keyCode: 37 })
208 | 
209 | 		// Get the expression root
210 | 		activeElement = document.activeElement
211 | 
212 | 		// Press backspace
213 | 		fireEvent.keyDown(activeElement as any, { keyCode: 8 })
214 | 		// Expression root should have been removed by now
215 | 		expect(activeElement).not.toBeInTheDocument()
216 | 
217 | 		expect(asFragment()).toMatchSnapshot()
218 | 	})
219 | })
220 | 


--------------------------------------------------------------------------------
/src/__tests__/__snapshots__/Extractor.test.tsx.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`Extractor builds data structure properly Builds correct string on input 1`] = `
  4 | <DocumentFragment>
  5 |   <span
  6 |     class=""
  7 |     data-type="expression-root"
  8 |     style="display: flex;"
  9 |     tabindex="0"
 10 |   >
 11 |     CONCAT(
 12 |     <div
 13 |       aria-expanded="false"
 14 |       aria-haspopup="listbox"
 15 |       aria-owns="downshift-20-menu"
 16 |       class=""
 17 |       data-type="expression-input-root"
 18 |       role="combobox"
 19 |     >
 20 |       <input
 21 |         aria-autocomplete="list"
 22 |         aria-controls="downshift-20-menu"
 23 |         aria-labelledby="downshift-20-label"
 24 |         autocomplete="off"
 25 |         data-valid="true"
 26 |         data-value-type="dimension"
 27 |         id="downshift-19-input"
 28 |         placeholder="dim1"
 29 |         style="width: 8px;"
 30 |         value="Ad"
 31 |       />
 32 |       <div
 33 |         style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre;"
 34 |       >
 35 |         Ad
 36 |       </div>
 37 |     </div>
 38 |     <div
 39 |       aria-expanded="true"
 40 |       aria-haspopup="listbox"
 41 |       aria-owns="downshift-22-menu"
 42 |       class=""
 43 |       data-type="expression-input-root"
 44 |       role="combobox"
 45 |     >
 46 |       <input
 47 |         aria-activedescendant="downshift-22-item-0"
 48 |         aria-autocomplete="list"
 49 |         aria-controls="downshift-22-menu"
 50 |         aria-labelledby="downshift-22-label"
 51 |         autocomplete="off"
 52 |         data-valid="true"
 53 |         data-value-type="string"
 54 |         id="downshift-21-input"
 55 |         placeholder="dim2"
 56 |         style="width: 8px;"
 57 |         value="\\"_\\""
 58 |       />
 59 |       <div
 60 |         style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre;"
 61 |       >
 62 |         "_"
 63 |       </div>
 64 |     </div>
 65 |     )
 66 |   </span>
 67 | </DocumentFragment>
 68 | `;
 69 | 
 70 | exports[`Extractor builds data structure properly Fires the onChange function 1`] = `
 71 | <DocumentFragment>
 72 |   <div
 73 |     aria-expanded="true"
 74 |     aria-haspopup="listbox"
 75 |     aria-owns="downshift-16-menu"
 76 |     data-type="expression-input-root"
 77 |     role="combobox"
 78 |   >
 79 |     <input
 80 |       aria-autocomplete="list"
 81 |       aria-controls="downshift-16-menu"
 82 |       aria-labelledby="downshift-16-label"
 83 |       autocomplete="off"
 84 |       data-valid="true"
 85 |       data-value-type="dimension"
 86 |       id="downshift-15-input"
 87 |       style="width: 8px;"
 88 |       value="Ad"
 89 |     />
 90 |     <div
 91 |       style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre;"
 92 |     >
 93 |       Ad
 94 |     </div>
 95 |   </div>
 96 | </DocumentFragment>
 97 | `;
 98 | 
 99 | exports[`Extractor renders properly Applies correct data attributes 1`] = `
100 | <DocumentFragment>
101 |   <div
102 |     aria-expanded="true"
103 |     aria-haspopup="listbox"
104 |     aria-owns="downshift-14-menu"
105 |     data-type="expression-input-root"
106 |     role="combobox"
107 |   >
108 |     <input
109 |       aria-autocomplete="list"
110 |       aria-controls="downshift-14-menu"
111 |       aria-labelledby="downshift-14-label"
112 |       autocomplete="off"
113 |       data-valid="true"
114 |       data-value-type="dimension"
115 |       id="downshift-13-input"
116 |       style="width: 8px;"
117 |       value="Ad"
118 |     />
119 |     <div
120 |       style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre;"
121 |     >
122 |       Ad
123 |     </div>
124 |   </div>
125 | </DocumentFragment>
126 | `;
127 | 
128 | exports[`Extractor renders properly Hides options list on blur 1`] = `
129 | <DocumentFragment>
130 |   <div
131 |     aria-expanded="false"
132 |     aria-haspopup="listbox"
133 |     aria-owns="downshift-12-menu"
134 |     data-type="expression-input-root"
135 |     role="combobox"
136 |   >
137 |     <input
138 |       aria-autocomplete="list"
139 |       aria-controls="downshift-12-menu"
140 |       aria-labelledby="downshift-12-label"
141 |       autocomplete="off"
142 |       data-valid="true"
143 |       data-value-type="string"
144 |       id="downshift-11-input"
145 |       style="width: 8px;"
146 |       value=""
147 |     />
148 |     <div
149 |       style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre;"
150 |     />
151 |   </div>
152 | </DocumentFragment>
153 | `;
154 | 
155 | exports[`Extractor renders properly Renders correctly 1`] = `
156 | <DocumentFragment>
157 |   <div
158 |     aria-expanded="true"
159 |     aria-haspopup="listbox"
160 |     aria-owns="downshift-2-menu"
161 |     data-type="expression-input-root"
162 |     role="combobox"
163 |   >
164 |     <input
165 |       aria-activedescendant="downshift-2-item-0"
166 |       aria-autocomplete="list"
167 |       aria-controls="downshift-2-menu"
168 |       aria-labelledby="downshift-2-label"
169 |       autocomplete="off"
170 |       data-valid="true"
171 |       data-value-type="string"
172 |       id="downshift-1-input"
173 |       style="width: 8px;"
174 |       value=""
175 |     />
176 |     <div
177 |       style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre;"
178 |     />
179 |     <ul
180 |       aria-labelledby="downshift-2-label"
181 |       data-type="expression-list"
182 |       id="downshift-2-menu"
183 |       role="listbox"
184 |       style="background-color: white; font-weight: normal; position: absolute;"
185 |     >
186 |       <li
187 |         aria-selected="true"
188 |         data-item-type="function"
189 |         data-type="expression-list-item"
190 |         id="downshift-2-item-0"
191 |         role="option"
192 |         style="background-color: rgb(242, 242, 242);"
193 |       >
194 |         <span>
195 |           SPLIT
196 |         </span>
197 |       </li>
198 |       <li
199 |         aria-selected="false"
200 |         data-item-type="function"
201 |         data-type="expression-list-item"
202 |         id="downshift-2-item-1"
203 |         role="option"
204 |       >
205 |         <span>
206 |           CONCAT
207 |         </span>
208 |       </li>
209 |       <li
210 |         aria-selected="false"
211 |         data-item-type="function"
212 |         data-type="expression-list-item"
213 |         id="downshift-2-item-2"
214 |         role="option"
215 |       >
216 |         <span>
217 |           SUB
218 |         </span>
219 |       </li>
220 |       <li
221 |         aria-selected="false"
222 |         data-item-type="function"
223 |         data-type="expression-list-item"
224 |         id="downshift-2-item-3"
225 |         role="option"
226 |       >
227 |         <span>
228 |           EXTRACT
229 |         </span>
230 |       </li>
231 |       <li
232 |         aria-selected="false"
233 |         data-item-type="dimension"
234 |         data-type="expression-list-item"
235 |         id="downshift-2-item-4"
236 |         role="option"
237 |       >
238 |         <span>
239 |           Account
240 |         </span>
241 |       </li>
242 |       <li
243 |         aria-selected="false"
244 |         data-item-type="dimension"
245 |         data-type="expression-list-item"
246 |         id="downshift-2-item-5"
247 |         role="option"
248 |       >
249 |         <span>
250 |           Ad
251 |         </span>
252 |       </li>
253 |     </ul>
254 |   </div>
255 | </DocumentFragment>
256 | `;
257 | 
258 | exports[`Extractor renders properly Scaffolds an expression on typing one 1`] = `
259 | <DocumentFragment>
260 |   <span
261 |     class=""
262 |     data-type="expression-root"
263 |     style="display: flex;"
264 |     tabindex="0"
265 |   >
266 |     SPLIT(
267 |     <div
268 |       aria-expanded="true"
269 |       aria-haspopup="listbox"
270 |       aria-owns="downshift-6-menu"
271 |       class=""
272 |       data-type="expression-input-root"
273 |       role="combobox"
274 |     >
275 |       <input
276 |         aria-activedescendant="downshift-6-item-0"
277 |         aria-autocomplete="list"
278 |         aria-controls="downshift-6-menu"
279 |         aria-labelledby="downshift-6-label"
280 |         autocomplete="off"
281 |         data-valid="true"
282 |         data-value-type="string"
283 |         id="downshift-5-input"
284 |         placeholder="dim"
285 |         style="width: 8px;"
286 |         value=""
287 |       />
288 |       <div
289 |         style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre;"
290 |       >
291 |         dim
292 |       </div>
293 |       <ul
294 |         aria-labelledby="downshift-6-label"
295 |         data-type="expression-list"
296 |         id="downshift-6-menu"
297 |         role="listbox"
298 |         style="background-color: white; font-weight: normal; position: absolute;"
299 |       >
300 |         <li
301 |           aria-selected="true"
302 |           data-item-type="function"
303 |           data-type="expression-list-item"
304 |           id="downshift-6-item-0"
305 |           role="option"
306 |           style="background-color: rgb(242, 242, 242);"
307 |         >
308 |           <span>
309 |             SPLIT
310 |           </span>
311 |         </li>
312 |         <li
313 |           aria-selected="false"
314 |           data-item-type="function"
315 |           data-type="expression-list-item"
316 |           id="downshift-6-item-1"
317 |           role="option"
318 |         >
319 |           <span>
320 |             CONCAT
321 |           </span>
322 |         </li>
323 |         <li
324 |           aria-selected="false"
325 |           data-item-type="function"
326 |           data-type="expression-list-item"
327 |           id="downshift-6-item-2"
328 |           role="option"
329 |         >
330 |           <span>
331 |             SUB
332 |           </span>
333 |         </li>
334 |         <li
335 |           aria-selected="false"
336 |           data-item-type="function"
337 |           data-type="expression-list-item"
338 |           id="downshift-6-item-3"
339 |           role="option"
340 |         >
341 |           <span>
342 |             EXTRACT
343 |           </span>
344 |         </li>
345 |         <li
346 |           aria-selected="false"
347 |           data-item-type="dimension"
348 |           data-type="expression-list-item"
349 |           id="downshift-6-item-4"
350 |           role="option"
351 |         >
352 |           <span>
353 |             Account
354 |           </span>
355 |         </li>
356 |         <li
357 |           aria-selected="false"
358 |           data-item-type="dimension"
359 |           data-type="expression-list-item"
360 |           id="downshift-6-item-5"
361 |           role="option"
362 |         >
363 |           <span>
364 |             Ad
365 |           </span>
366 |         </li>
367 |       </ul>
368 |     </div>
369 |     <div
370 |       aria-expanded="false"
371 |       aria-haspopup="listbox"
372 |       aria-owns="downshift-8-menu"
373 |       class=""
374 |       data-type="expression-input-root"
375 |       role="combobox"
376 |     >
377 |       <input
378 |         aria-autocomplete="list"
379 |         aria-controls="downshift-8-menu"
380 |         aria-labelledby="downshift-8-label"
381 |         autocomplete="off"
382 |         data-valid="true"
383 |         data-value-type="string"
384 |         id="downshift-7-input"
385 |         placeholder="delimiter"
386 |         style="width: 8px;"
387 |         value=""
388 |       />
389 |       <div
390 |         style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre;"
391 |       >
392 |         delimiter
393 |       </div>
394 |     </div>
395 |     <div
396 |       aria-expanded="false"
397 |       aria-haspopup="listbox"
398 |       aria-owns="downshift-10-menu"
399 |       class=""
400 |       data-type="expression-input-root"
401 |       role="combobox"
402 |     >
403 |       <input
404 |         aria-autocomplete="list"
405 |         aria-controls="downshift-10-menu"
406 |         aria-labelledby="downshift-10-label"
407 |         autocomplete="off"
408 |         data-valid="true"
409 |         data-value-type="string"
410 |         id="downshift-9-input"
411 |         placeholder="occurrence_number"
412 |         style="width: 8px;"
413 |         value=""
414 |       />
415 |       <div
416 |         style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre;"
417 |       >
418 |         occurrence_number
419 |       </div>
420 |     </div>
421 |     )
422 |   </span>
423 | </DocumentFragment>
424 | `;
425 | 
426 | exports[`Keyboard events work properly Should delete the expression root on pressing backspace  1`] = `
427 | <DocumentFragment>
428 |   <div
429 |     aria-expanded="true"
430 |     aria-haspopup="listbox"
431 |     aria-owns="downshift-36-menu"
432 |     data-type="expression-input-root"
433 |     role="combobox"
434 |   >
435 |     <input
436 |       aria-activedescendant="downshift-36-item-0"
437 |       aria-autocomplete="list"
438 |       aria-controls="downshift-36-menu"
439 |       aria-labelledby="downshift-36-label"
440 |       autocomplete="off"
441 |       data-valid="true"
442 |       data-value-type="string"
443 |       id="downshift-35-input"
444 |       style="width: 8px;"
445 |       value=""
446 |     />
447 |     <div
448 |       style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre;"
449 |     />
450 |     <ul
451 |       aria-labelledby="downshift-36-label"
452 |       data-type="expression-list"
453 |       id="downshift-36-menu"
454 |       role="listbox"
455 |       style="background-color: white; font-weight: normal; position: absolute;"
456 |     >
457 |       <li
458 |         aria-selected="true"
459 |         data-item-type="function"
460 |         data-type="expression-list-item"
461 |         id="downshift-36-item-0"
462 |         role="option"
463 |         style="background-color: rgb(242, 242, 242);"
464 |       >
465 |         <span>
466 |           SPLIT
467 |         </span>
468 |       </li>
469 |       <li
470 |         aria-selected="false"
471 |         data-item-type="function"
472 |         data-type="expression-list-item"
473 |         id="downshift-36-item-1"
474 |         role="option"
475 |       >
476 |         <span>
477 |           CONCAT
478 |         </span>
479 |       </li>
480 |       <li
481 |         aria-selected="false"
482 |         data-item-type="function"
483 |         data-type="expression-list-item"
484 |         id="downshift-36-item-2"
485 |         role="option"
486 |       >
487 |         <span>
488 |           SUB
489 |         </span>
490 |       </li>
491 |       <li
492 |         aria-selected="false"
493 |         data-item-type="function"
494 |         data-type="expression-list-item"
495 |         id="downshift-36-item-3"
496 |         role="option"
497 |       >
498 |         <span>
499 |           EXTRACT
500 |         </span>
501 |       </li>
502 |       <li
503 |         aria-selected="false"
504 |         data-item-type="dimension"
505 |         data-type="expression-list-item"
506 |         id="downshift-36-item-4"
507 |         role="option"
508 |       >
509 |         <span>
510 |           Account
511 |         </span>
512 |       </li>
513 |       <li
514 |         aria-selected="false"
515 |         data-item-type="dimension"
516 |         data-type="expression-list-item"
517 |         id="downshift-36-item-5"
518 |         role="option"
519 |       >
520 |         <span>
521 |           Ad
522 |         </span>
523 |       </li>
524 |     </ul>
525 |   </div>
526 | </DocumentFragment>
527 | `;
528 | 
529 | exports[`Keyboard events work properly Should navigate to the expression root on pressing left on first param 1`] = `
530 | <DocumentFragment>
531 |   <span
532 |     class=""
533 |     data-type="expression-root"
534 |     style="display: flex;"
535 |     tabindex="0"
536 |   >
537 |     CONCAT(
538 |     <div
539 |       aria-expanded="false"
540 |       aria-haspopup="listbox"
541 |       aria-owns="downshift-26-menu"
542 |       class=""
543 |       data-type="expression-input-root"
544 |       role="combobox"
545 |     >
546 |       <input
547 |         aria-autocomplete="list"
548 |         aria-controls="downshift-26-menu"
549 |         aria-labelledby="downshift-26-label"
550 |         autocomplete="off"
551 |         data-valid="true"
552 |         data-value-type="string"
553 |         id="downshift-25-input"
554 |         placeholder="dim1"
555 |         style="width: 8px;"
556 |         value=""
557 |       />
558 |       <div
559 |         style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre;"
560 |       >
561 |         dim1
562 |       </div>
563 |     </div>
564 |     <div
565 |       aria-expanded="false"
566 |       aria-haspopup="listbox"
567 |       aria-owns="downshift-28-menu"
568 |       class=""
569 |       data-type="expression-input-root"
570 |       role="combobox"
571 |     >
572 |       <input
573 |         aria-autocomplete="list"
574 |         aria-controls="downshift-28-menu"
575 |         aria-labelledby="downshift-28-label"
576 |         autocomplete="off"
577 |         data-valid="true"
578 |         data-value-type="string"
579 |         id="downshift-27-input"
580 |         placeholder="dim2"
581 |         style="width: 8px;"
582 |         value=""
583 |       />
584 |       <div
585 |         style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre;"
586 |       >
587 |         dim2
588 |       </div>
589 |     </div>
590 |     )
591 |   </span>
592 | </DocumentFragment>
593 | `;
594 | 
595 | exports[`Keyboard events work properly Should navigate to the next param on pressing right  1`] = `
596 | <DocumentFragment>
597 |   <span
598 |     class=""
599 |     data-type="expression-root"
600 |     style="display: flex;"
601 |     tabindex="0"
602 |   >
603 |     CONCAT(
604 |     <div
605 |       aria-expanded="false"
606 |       aria-haspopup="listbox"
607 |       aria-owns="downshift-10-menu"
608 |       class=""
609 |       data-type="expression-input-root"
610 |       role="combobox"
611 |     >
612 |       <input
613 |         aria-autocomplete="list"
614 |         aria-controls="downshift-10-menu"
615 |         aria-labelledby="downshift-10-label"
616 |         autocomplete="off"
617 |         data-valid="true"
618 |         data-value-type="string"
619 |         id="downshift-9-input"
620 |         placeholder="dim1"
621 |         style="width: 8px;"
622 |         value=""
623 |       />
624 |       <div
625 |         style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre;"
626 |       >
627 |         dim1
628 |       </div>
629 |     </div>
630 |     <div
631 |       aria-expanded="true"
632 |       aria-haspopup="listbox"
633 |       aria-owns="downshift-12-menu"
634 |       class=""
635 |       data-type="expression-input-root"
636 |       role="combobox"
637 |     >
638 |       <input
639 |         aria-activedescendant="downshift-12-item-0"
640 |         aria-autocomplete="list"
641 |         aria-controls="downshift-12-menu"
642 |         aria-labelledby="downshift-12-label"
643 |         autocomplete="off"
644 |         data-valid="true"
645 |         data-value-type="string"
646 |         id="downshift-11-input"
647 |         placeholder="dim2"
648 |         style="width: 8px;"
649 |         value=""
650 |       />
651 |       <div
652 |         style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre;"
653 |       >
654 |         dim2
655 |       </div>
656 |       <ul
657 |         aria-labelledby="downshift-12-label"
658 |         data-type="expression-list"
659 |         id="downshift-12-menu"
660 |         role="listbox"
661 |         style="background-color: white; font-weight: normal; position: absolute;"
662 |       >
663 |         <li
664 |           aria-selected="true"
665 |           data-item-type="function"
666 |           data-type="expression-list-item"
667 |           id="downshift-12-item-0"
668 |           role="option"
669 |           style="background-color: rgb(242, 242, 242);"
670 |         >
671 |           <span>
672 |             SPLIT
673 |           </span>
674 |         </li>
675 |         <li
676 |           aria-selected="false"
677 |           data-item-type="function"
678 |           data-type="expression-list-item"
679 |           id="downshift-12-item-1"
680 |           role="option"
681 |         >
682 |           <span>
683 |             CONCAT
684 |           </span>
685 |         </li>
686 |         <li
687 |           aria-selected="false"
688 |           data-item-type="function"
689 |           data-type="expression-list-item"
690 |           id="downshift-12-item-2"
691 |           role="option"
692 |         >
693 |           <span>
694 |             SUB
695 |           </span>
696 |         </li>
697 |         <li
698 |           aria-selected="false"
699 |           data-item-type="function"
700 |           data-type="expression-list-item"
701 |           id="downshift-12-item-3"
702 |           role="option"
703 |         >
704 |           <span>
705 |             EXTRACT
706 |           </span>
707 |         </li>
708 |         <li
709 |           aria-selected="false"
710 |           data-item-type="dimension"
711 |           data-type="expression-list-item"
712 |           id="downshift-12-item-4"
713 |           role="option"
714 |         >
715 |           <span>
716 |             Account
717 |           </span>
718 |         </li>
719 |         <li
720 |           aria-selected="false"
721 |           data-item-type="dimension"
722 |           data-type="expression-list-item"
723 |           id="downshift-12-item-5"
724 |           role="option"
725 |         >
726 |           <span>
727 |             Ad
728 |           </span>
729 |         </li>
730 |       </ul>
731 |     </div>
732 |     )
733 |   </span>
734 | </DocumentFragment>
735 | `;
736 | 


--------------------------------------------------------------------------------