sartography
/
spiff-arena
mirror of https://github.com/sartography/spiff-arena.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Numeric range field added (#799) (#800) 

* Numeric range field added (#799)

Added a custom field to handle numeric ranges. The field checks for the first key in the properties of the schema and will add min and max to it when the values are put in.

* autofix lint stuff

* updates to simplify the code, fix a few ux issues, and make more inline with current conventions w/ burnettk

* removed subkey from numeric range and added validation to ensure max is greater than min w/ burnettk

* added some comments to clarify how to use numeric range w/ burnettk

* added some documentation for the numeric range field w/ burnettk

---------

Co-authored-by: Kayvon-Martinez <142514475+Kayvon-Martinez@users.noreply.github.com>
Co-authored-by: burnettk <burnettk@users.noreply.github.com>
Co-authored-by: jasquat <jasquat@users.noreply.github.com>
This commit is contained in:
Kevin Burnett 2023-12-13 10:50:26 -08:00 committed by GitHub
parent d5ea87017f
commit 5cceb52756
6 changed files with 488 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
docs/Building_Diagrams/Forms.md
View File

@ -226,3 +226,52 @@ To incorporate the markdown widget into your rjsf form, follow these steps:
"ui:widget": "markdown"
```
![rsjf markdown](images/rsjf_markdown.png)
### Numeric Range Field
#### Overview
The `NumericRangeField` component is a new feature in the `spiffworkflow-frontend` that allows users to input numeric ranges. This component is designed to work with JSON schemas and provides two text inputs for users to enter minimum and maximum values for a given numeric range.
#### JSON Schema Example
Below is an example JSON schema that includes the numeric range field:
```json
{
"title": "Example Schema",
"type": "object",
"properties": {
"numericRange": {
"type": "object",
"title": "Numeric Range",
"properties": {
"min": {
"type": "number",
"title": "Minimum Value"
},
"max": {
"type": "number",
"title": "Maximum Value"
}
}
}
}
}
```
This schema defines a numeric range object with `min` and `max` properties, both of which are required.
#### Ui Schema Example
```json
{
"numericRange": {
"ui:field": "numeric-range"
}
}
```
#### Validation
This will automatically validate that the max value cannot be less than the min value.

304
spiffworkflow-frontend/package-lock.json generated
View File

@ -2030,11 +2030,11 @@
"integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
},
"node_modules/@babel/runtime": {
"version": "7.21.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
"integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
"version": "7.23.5",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz",
"integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==",
"dependencies": {
"regenerator-runtime": "^0.13.11"
"regenerator-runtime": "^0.14.0"
},
"engines": {
"node": ">=6.9.0"
@ -2052,6 +2052,11 @@
"node": ">=6.9.0"
}
},
"node_modules/@babel/runtime/node_modules/regenerator-runtime": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
"integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
},
"node_modules/@babel/template": {
"version": "7.22.15",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
@ -2197,35 +2202,35 @@
"integrity": "sha512-umeLoy8erTiFCG92Z29kJ8VH6fHfFE+75HwQH/WwIRqa2AvNYrkSCNpXtTGwW/EjnyvGA6VcfqirZhibuuHMaA=="
},
"node_modules/@carbon/colors": {
"version": "11.17.1",
"resolved": "https://registry.npmjs.org/@carbon/colors/-/colors-11.17.1.tgz",
"integrity": "sha512-Q2VlMaZcl3U9Qc1RQbhuf4M4SVuJIeE+NIIDExPCRFaWeuN/5EIUYxEkPgDqvkLU91QTu6lH8TqxFPZORlRvDA=="
"version": "11.20.0",
"resolved": "https://registry.npmjs.org/@carbon/colors/-/colors-11.20.0.tgz",
"integrity": "sha512-aWxYQ1G3TJWd9qmAqs/Tm6G0bcOAw32Ii8VraxIwhYSXFpteHczidMj12EduFBGFyK4JhYKb4ZuUfSKNNWKQ1w=="
},
"node_modules/@carbon/feature-flags": {
"version": "0.15.0",
"resolved": "https://registry.npmjs.org/@carbon/feature-flags/-/feature-flags-0.15.0.tgz",
"integrity": "sha512-pUuJ+iQ+jkrfP4+nFgsBqM3qNsgKY59y0dZX1y2amjROFOo6fn5s/L1ZqAXkLWvmtssOiR1VWbYg1zk4IMTv+g=="
"version": "0.16.0",
"resolved": "https://registry.npmjs.org/@carbon/feature-flags/-/feature-flags-0.16.0.tgz",
"integrity": "sha512-hCrfVZ6oVnPjjupelbvQX4D0i6GlZuKVverAf0LkOydXHrPjSyuEmg+czsylyCBg4r/hxtSTu91Tq6aqz/DsHg=="
},
"node_modules/@carbon/grid": {
"version": "11.16.1",
"resolved": "https://registry.npmjs.org/@carbon/grid/-/grid-11.16.1.tgz",
"integrity": "sha512-xrnySc/9jRebcVyATn6ArO9kQsgUcUDwrUrWPH5yt4AU7lDvzfpsxbO5NehRekURxPJjplr0DOhPAwC4qbuaaw==",
"version": "11.21.0",
"resolved": "https://registry.npmjs.org/@carbon/grid/-/grid-11.21.0.tgz",
"integrity": "sha512-Zzhos2we+HqM0obdQgma+OvLoM9dNGq07YcLxFxrc/vEOn/D01sner6dyMMqS2y8036zIaoqVMGArSzPfoxrLA==",
"dependencies": {
"@carbon/layout": "^11.16.1"
"@carbon/layout": "^11.20.0"
}
},
"node_modules/@carbon/icon-helpers": {
"version": "10.42.1",
"resolved": "https://registry.npmjs.org/@carbon/icon-helpers/-/icon-helpers-10.42.1.tgz",
"integrity": "sha512-LsXHvoi/RAxYQz1GC7Ae7WOwJE4HKOXYmSOWuDEtSEW94Adz/1w968pje/7Gfr7nsJ/GcP6lNcQoSpYq9iDSpQ=="
"version": "10.45.0",
"resolved": "https://registry.npmjs.org/@carbon/icon-helpers/-/icon-helpers-10.45.0.tgz",
"integrity": "sha512-HP92JjZoccDXwucstEJ9Cx8jq2HHJM/U/vPmgfeXYIaegIGfu2zQkL+MDn/fSzIKvQ+ckK/GCrm89K/S8fbtBA=="
},
"node_modules/@carbon/icons-react": {
"version": "11.22.1",
"resolved": "https://registry.npmjs.org/@carbon/icons-react/-/icons-react-11.22.1.tgz",
"integrity": "sha512-yBbx6pAzo78V/6Z004KXNoC1w6kW/ttm/FF02s9LnOwTDYcOP7tn97YlgO+hyeMsk4Xld5GrjJ5lZI/ss8qaug==",
"version": "11.31.0",
"resolved": "https://registry.npmjs.org/@carbon/icons-react/-/icons-react-11.31.0.tgz",
"integrity": "sha512-hGrxoH7Kt94WDVB/lNExUKzgNLcvvt2bH8Lxb894rgwNKbvxPgoJb7tncMJFz+tZwnDPwKvRdMX8kDFukA+rww==",
"hasInstallScript": true,
"dependencies": {
"@carbon/icon-helpers": "^10.42.1",
"@carbon/icon-helpers": "^10.45.0",
"@carbon/telemetry": "0.1.0",
"prop-types": "^15.7.2"
},
@ -2234,30 +2239,30 @@
}
},
"node_modules/@carbon/layout": {
"version": "11.16.1",
"resolved": "https://registry.npmjs.org/@carbon/layout/-/layout-11.16.1.tgz",
"integrity": "sha512-uUJmNrB7GKJzR/ZEzVxqGNb7US8UB1jL0X3lia3pnyqQ8Rcxq3y1RNmj/bfuI6LWC9GA0lLrsKRdKOpdLyqJMQ=="
"version": "11.20.0",
"resolved": "https://registry.npmjs.org/@carbon/layout/-/layout-11.20.0.tgz",
"integrity": "sha512-G9eJE3xb/J98Id9VvTA/b4v+2i/c+IiHAhxNPc0PPpPN6C/r6U4gJsG4yPgQnbuIU42cP9L8OvCrQr0mbrCMlA=="
},
"node_modules/@carbon/motion": {
"version": "11.13.1",
"resolved": "https://registry.npmjs.org/@carbon/motion/-/motion-11.13.1.tgz",
"integrity": "sha512-ohpfl9qVCEZzvr6cqDDEskqeTS797FSCLqADwZufbLjOBcUlRr2mq1rftTJcizLdNXutODvmFt0LJOGDOENHZg=="
"version": "11.16.0",
"resolved": "https://registry.npmjs.org/@carbon/motion/-/motion-11.16.0.tgz",
"integrity": "sha512-gr2oijosvrbV8I8dT+s+KTAzHswQ7GE1ffgKxMWWkdg4b91hlJ0qJe1BlG7ZnaHCRpeHKS12QQgnS/dy4yx92Q=="
},
"node_modules/@carbon/react": {
"version": "1.33.2",
"resolved": "https://registry.npmjs.org/@carbon/react/-/react-1.33.2.tgz",
"integrity": "sha512-WHJ+zv32gEerpXgPXmsdyDCOXWHTQu4Yff8VA96CNjEw7kVwDlvWVpbxm6GDnj1xdxB1bTZyXGPy//mxcj6psw==",
"version": "1.44.0",
"resolved": "https://registry.npmjs.org/@carbon/react/-/react-1.44.0.tgz",
"integrity": "sha512-tAnIDpB6kGCfQTl/Wx1k1K6KYxZeGutxAlBL2hrFkoUoknV81bHSeSbX2M9DQ52/aCFGW2HA3ECFdKGPnJuwNg==",
"hasInstallScript": true,
"dependencies": {
"@babel/runtime": "^7.18.3",
"@carbon/feature-flags": "^0.15.0",
"@carbon/icons-react": "^11.22.1",
"@carbon/layout": "^11.16.1",
"@carbon/styles": "^1.33.1",
"@carbon/feature-flags": "^0.16.0",
"@carbon/icons-react": "^11.31.0",
"@carbon/layout": "^11.20.0",
"@carbon/styles": "^1.44.0",
"@carbon/telemetry": "0.1.0",
"classnames": "2.3.2",
"copy-to-clipboard": "^3.3.1",
"downshift": "5.2.1",
"downshift": "8.2.3",
"flatpickr": "4.6.9",
"invariant": "^2.2.3",
"lodash.debounce": "^4.0.8",
@ -2278,17 +2283,17 @@
}
},
"node_modules/@carbon/styles": {
"version": "1.33.1",
"resolved": "https://registry.npmjs.org/@carbon/styles/-/styles-1.33.1.tgz",
"integrity": "sha512-KnccrmaFTVLVvtvietjGD1UcelMur5JHpVAcWt1Qsk+XsgLgJ3tPU4Rf13sTz9wo0B7fP7AGlpVstWV/W+6r9Q==",
"version": "1.44.0",
"resolved": "https://registry.npmjs.org/@carbon/styles/-/styles-1.44.0.tgz",
"integrity": "sha512-5geQru8tuQvZwo2x4oUQ6F6zYhrxAb/dLYjNCKrs6bM1Hf1Ha2mAiu4y/NXt9T0WcCQJs4CX8XEEOEn6iAyJww==",
"dependencies": {
"@carbon/colors": "^11.17.1",
"@carbon/feature-flags": "^0.15.0",
"@carbon/grid": "^11.16.1",
"@carbon/layout": "^11.16.1",
"@carbon/motion": "^11.13.1",
"@carbon/themes": "^11.21.1",
"@carbon/type": "^11.20.1",
"@carbon/colors": "^11.20.0",
"@carbon/feature-flags": "^0.16.0",
"@carbon/grid": "^11.21.0",
"@carbon/layout": "^11.20.0",
"@carbon/motion": "^11.16.0",
"@carbon/themes": "^11.28.0",
"@carbon/type": "^11.25.0",
"@ibm/plex": "6.0.0-next.6"
},
"peerDependencies": {
@ -2309,23 +2314,23 @@
}
},
"node_modules/@carbon/themes": {
"version": "11.21.1",
"resolved": "https://registry.npmjs.org/@carbon/themes/-/themes-11.21.1.tgz",
"integrity": "sha512-WMcx+RSXTSGxuqSG+6WHCCTeZ8mSaDWDOJsdp6p+bandc6OsvmrqbJDDgjE6YRucDThQYspLxRQF8i8/5mJ0sg==",
"version": "11.28.0",
"resolved": "https://registry.npmjs.org/@carbon/themes/-/themes-11.28.0.tgz",
"integrity": "sha512-LvUFGXjsJ6csTrSjSOhkmvKHA0wcJOGchPaBrnWZB5J0UVCW+66P7lLuQBkTab7qgwRp4VgOSOkGdPPFQuchWQ==",
"dependencies": {
"@carbon/colors": "^11.17.1",
"@carbon/layout": "^11.16.1",
"@carbon/type": "^11.20.1",
"@carbon/colors": "^11.20.0",
"@carbon/layout": "^11.20.0",
"@carbon/type": "^11.25.0",
"color": "^4.0.0"
}
},
"node_modules/@carbon/type": {
"version": "11.20.1",
"resolved": "https://registry.npmjs.org/@carbon/type/-/type-11.20.1.tgz",
"integrity": "sha512-CZSDN//3M7DhiMEzwNjDXpJ3Iqcaetu/hiFghxSACOuz88jni36Qj/qOg0ELZNrsswGk5GwnJx/IN1u40TAieA==",
"version": "11.25.0",
"resolved": "https://registry.npmjs.org/@carbon/type/-/type-11.25.0.tgz",
"integrity": "sha512-p3i5B0uANc2GwPBnbxRVg/KFMWkPV+5I52pkFCs87Bgx6T8r4jB0Y5iPPwsVn2aI5wOnDfiULwSC4JS0LCIgxA==",
"dependencies": {
"@carbon/grid": "^11.16.1",
"@carbon/layout": "^11.16.1"
"@carbon/grid": "^11.21.0",
"@carbon/layout": "^11.20.0"
}
},
"node_modules/@casl/ability": {
@ -9665,9 +9670,9 @@
}
},
"node_modules/compute-scroll-into-view": {
"version": "1.0.20",
"resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
"integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg=="
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
"integrity": "sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg=="
},
"node_modules/concat-map": {
"version": "0.0.1",
@ -12329,24 +12334,20 @@
"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
},
"node_modules/downshift": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/downshift/-/downshift-5.2.1.tgz",
"integrity": "sha512-uHX2OLbWthLR8QbR8NCI8OmjvvJxq8+PrA95KblFd9JyB1zVZh1HnszzsWMMCnMuH6IvsUtVfF5HY7XfijJ2dw==",
"version": "8.2.3",
"resolved": "https://registry.npmjs.org/downshift/-/downshift-8.2.3.tgz",
"integrity": "sha512-1HkvqaMTZpk24aqnXaRDnT+N5JCbpFpW+dCogB11+x+FCtfkFX0MbAO4vr/JdXi1VYQF174KjNUveBXqaXTPtg==",
"dependencies": {
"@babel/runtime": "^7.9.1",
"compute-scroll-into-view": "^1.0.13",
"prop-types": "^15.7.2",
"react-is": "^16.13.1"
"@babel/runtime": "^7.22.15",
"compute-scroll-into-view": "^3.0.3",
"prop-types": "^15.8.1",
"react-is": "^18.2.0",
"tslib": "^2.6.2"
},
"peerDependencies": {
"react": ">=0.14.9"
"react": ">=16.12.0"
}
},
"node_modules/downshift/node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/duplexer": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@ -29875,9 +29876,9 @@
}
},
"node_modules/tslib": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
"integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
},
"node_modules/tsutils": {
"version": "3.21.0",
@ -33490,11 +33491,18 @@
"integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
},
"@babel/runtime": {
"version": "7.21.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
"integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
"version": "7.23.5",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz",
"integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==",
"requires": {
"regenerator-runtime": "^0.13.11"
"regenerator-runtime": "^0.14.0"
},
"dependencies": {
"regenerator-runtime": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
"integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
}
}
},
"@babel/runtime-corejs2": {
@ -33642,62 +33650,62 @@
"integrity": "sha512-umeLoy8erTiFCG92Z29kJ8VH6fHfFE+75HwQH/WwIRqa2AvNYrkSCNpXtTGwW/EjnyvGA6VcfqirZhibuuHMaA=="
},
"@carbon/colors": {
"version": "11.17.1",
"resolved": "https://registry.npmjs.org/@carbon/colors/-/colors-11.17.1.tgz",
"integrity": "sha512-Q2VlMaZcl3U9Qc1RQbhuf4M4SVuJIeE+NIIDExPCRFaWeuN/5EIUYxEkPgDqvkLU91QTu6lH8TqxFPZORlRvDA=="
"version": "11.20.0",
"resolved": "https://registry.npmjs.org/@carbon/colors/-/colors-11.20.0.tgz",
"integrity": "sha512-aWxYQ1G3TJWd9qmAqs/Tm6G0bcOAw32Ii8VraxIwhYSXFpteHczidMj12EduFBGFyK4JhYKb4ZuUfSKNNWKQ1w=="
},
"@carbon/feature-flags": {
"version": "0.15.0",
"resolved": "https://registry.npmjs.org/@carbon/feature-flags/-/feature-flags-0.15.0.tgz",
"integrity": "sha512-pUuJ+iQ+jkrfP4+nFgsBqM3qNsgKY59y0dZX1y2amjROFOo6fn5s/L1ZqAXkLWvmtssOiR1VWbYg1zk4IMTv+g=="
"version": "0.16.0",
"resolved": "https://registry.npmjs.org/@carbon/feature-flags/-/feature-flags-0.16.0.tgz",
"integrity": "sha512-hCrfVZ6oVnPjjupelbvQX4D0i6GlZuKVverAf0LkOydXHrPjSyuEmg+czsylyCBg4r/hxtSTu91Tq6aqz/DsHg=="
},
"@carbon/grid": {
"version": "11.16.1",
"resolved": "https://registry.npmjs.org/@carbon/grid/-/grid-11.16.1.tgz",
"integrity": "sha512-xrnySc/9jRebcVyATn6ArO9kQsgUcUDwrUrWPH5yt4AU7lDvzfpsxbO5NehRekURxPJjplr0DOhPAwC4qbuaaw==",
"version": "11.21.0",
"resolved": "https://registry.npmjs.org/@carbon/grid/-/grid-11.21.0.tgz",
"integrity": "sha512-Zzhos2we+HqM0obdQgma+OvLoM9dNGq07YcLxFxrc/vEOn/D01sner6dyMMqS2y8036zIaoqVMGArSzPfoxrLA==",
"requires": {
"@carbon/layout": "^11.16.1"
"@carbon/layout": "^11.20.0"
}
},
"@carbon/icon-helpers": {
"version": "10.42.1",
"resolved": "https://registry.npmjs.org/@carbon/icon-helpers/-/icon-helpers-10.42.1.tgz",
"integrity": "sha512-LsXHvoi/RAxYQz1GC7Ae7WOwJE4HKOXYmSOWuDEtSEW94Adz/1w968pje/7Gfr7nsJ/GcP6lNcQoSpYq9iDSpQ=="
"version": "10.45.0",
"resolved": "https://registry.npmjs.org/@carbon/icon-helpers/-/icon-helpers-10.45.0.tgz",
"integrity": "sha512-HP92JjZoccDXwucstEJ9Cx8jq2HHJM/U/vPmgfeXYIaegIGfu2zQkL+MDn/fSzIKvQ+ckK/GCrm89K/S8fbtBA=="
},
"@carbon/icons-react": {
"version": "11.22.1",
"resolved": "https://registry.npmjs.org/@carbon/icons-react/-/icons-react-11.22.1.tgz",
"integrity": "sha512-yBbx6pAzo78V/6Z004KXNoC1w6kW/ttm/FF02s9LnOwTDYcOP7tn97YlgO+hyeMsk4Xld5GrjJ5lZI/ss8qaug==",
"version": "11.31.0",
"resolved": "https://registry.npmjs.org/@carbon/icons-react/-/icons-react-11.31.0.tgz",
"integrity": "sha512-hGrxoH7Kt94WDVB/lNExUKzgNLcvvt2bH8Lxb894rgwNKbvxPgoJb7tncMJFz+tZwnDPwKvRdMX8kDFukA+rww==",
"requires": {
"@carbon/icon-helpers": "^10.42.1",
"@carbon/icon-helpers": "^10.45.0",
"@carbon/telemetry": "0.1.0",
"prop-types": "^15.7.2"
}
},
"@carbon/layout": {
"version": "11.16.1",
"resolved": "https://registry.npmjs.org/@carbon/layout/-/layout-11.16.1.tgz",
"integrity": "sha512-uUJmNrB7GKJzR/ZEzVxqGNb7US8UB1jL0X3lia3pnyqQ8Rcxq3y1RNmj/bfuI6LWC9GA0lLrsKRdKOpdLyqJMQ=="
"version": "11.20.0",
"resolved": "https://registry.npmjs.org/@carbon/layout/-/layout-11.20.0.tgz",
"integrity": "sha512-G9eJE3xb/J98Id9VvTA/b4v+2i/c+IiHAhxNPc0PPpPN6C/r6U4gJsG4yPgQnbuIU42cP9L8OvCrQr0mbrCMlA=="
},
"@carbon/motion": {
"version": "11.13.1",
"resolved": "https://registry.npmjs.org/@carbon/motion/-/motion-11.13.1.tgz",
"integrity": "sha512-ohpfl9qVCEZzvr6cqDDEskqeTS797FSCLqADwZufbLjOBcUlRr2mq1rftTJcizLdNXutODvmFt0LJOGDOENHZg=="
"version": "11.16.0",
"resolved": "https://registry.npmjs.org/@carbon/motion/-/motion-11.16.0.tgz",
"integrity": "sha512-gr2oijosvrbV8I8dT+s+KTAzHswQ7GE1ffgKxMWWkdg4b91hlJ0qJe1BlG7ZnaHCRpeHKS12QQgnS/dy4yx92Q=="
},
"@carbon/react": {
"version": "1.33.2",
"resolved": "https://registry.npmjs.org/@carbon/react/-/react-1.33.2.tgz",
"integrity": "sha512-WHJ+zv32gEerpXgPXmsdyDCOXWHTQu4Yff8VA96CNjEw7kVwDlvWVpbxm6GDnj1xdxB1bTZyXGPy//mxcj6psw==",
"version": "1.44.0",
"resolved": "https://registry.npmjs.org/@carbon/react/-/react-1.44.0.tgz",
"integrity": "sha512-tAnIDpB6kGCfQTl/Wx1k1K6KYxZeGutxAlBL2hrFkoUoknV81bHSeSbX2M9DQ52/aCFGW2HA3ECFdKGPnJuwNg==",
"requires": {
"@babel/runtime": "^7.18.3",
"@carbon/feature-flags": "^0.15.0",
"@carbon/icons-react": "^11.22.1",
"@carbon/layout": "^11.16.1",
"@carbon/styles": "^1.33.1",
"@carbon/feature-flags": "^0.16.0",
"@carbon/icons-react": "^11.31.0",
"@carbon/layout": "^11.20.0",
"@carbon/styles": "^1.44.0",
"@carbon/telemetry": "0.1.0",
"classnames": "2.3.2",
"copy-to-clipboard": "^3.3.1",
"downshift": "5.2.1",
"downshift": "8.2.3",
"flatpickr": "4.6.9",
"invariant": "^2.2.3",
"lodash.debounce": "^4.0.8",
@ -33713,17 +33721,17 @@
}
},
"@carbon/styles": {
"version": "1.33.1",
"resolved": "https://registry.npmjs.org/@carbon/styles/-/styles-1.33.1.tgz",
"integrity": "sha512-KnccrmaFTVLVvtvietjGD1UcelMur5JHpVAcWt1Qsk+XsgLgJ3tPU4Rf13sTz9wo0B7fP7AGlpVstWV/W+6r9Q==",
"version": "1.44.0",
"resolved": "https://registry.npmjs.org/@carbon/styles/-/styles-1.44.0.tgz",
"integrity": "sha512-5geQru8tuQvZwo2x4oUQ6F6zYhrxAb/dLYjNCKrs6bM1Hf1Ha2mAiu4y/NXt9T0WcCQJs4CX8XEEOEn6iAyJww==",
"requires": {
"@carbon/colors": "^11.17.1",
"@carbon/feature-flags": "^0.15.0",
"@carbon/grid": "^11.16.1",
"@carbon/layout": "^11.16.1",
"@carbon/motion": "^11.13.1",
"@carbon/themes": "^11.21.1",
"@carbon/type": "^11.20.1",
"@carbon/colors": "^11.20.0",
"@carbon/feature-flags": "^0.16.0",
"@carbon/grid": "^11.21.0",
"@carbon/layout": "^11.20.0",
"@carbon/motion": "^11.16.0",
"@carbon/themes": "^11.28.0",
"@carbon/type": "^11.25.0",
"@ibm/plex": "6.0.0-next.6"
}
},
@ -33733,23 +33741,23 @@
"integrity": "sha512-kNWt0bkgPwGW0i5h7HFuljbKRXPvIhsKbB+1tEURAYLXoJg9iJLF1eGvWN5iVoFCS2zje4GR3OGOsvvKVe7Hlg=="
},
"@carbon/themes": {
"version": "11.21.1",
"resolved": "https://registry.npmjs.org/@carbon/themes/-/themes-11.21.1.tgz",
"integrity": "sha512-WMcx+RSXTSGxuqSG+6WHCCTeZ8mSaDWDOJsdp6p+bandc6OsvmrqbJDDgjE6YRucDThQYspLxRQF8i8/5mJ0sg==",
"version": "11.28.0",
"resolved": "https://registry.npmjs.org/@carbon/themes/-/themes-11.28.0.tgz",
"integrity": "sha512-LvUFGXjsJ6csTrSjSOhkmvKHA0wcJOGchPaBrnWZB5J0UVCW+66P7lLuQBkTab7qgwRp4VgOSOkGdPPFQuchWQ==",
"requires": {
"@carbon/colors": "^11.17.1",
"@carbon/layout": "^11.16.1",
"@carbon/type": "^11.20.1",
"@carbon/colors": "^11.20.0",
"@carbon/layout": "^11.20.0",
"@carbon/type": "^11.25.0",
"color": "^4.0.0"
}
},
"@carbon/type": {
"version": "11.20.1",
"resolved": "https://registry.npmjs.org/@carbon/type/-/type-11.20.1.tgz",
"integrity": "sha512-CZSDN//3M7DhiMEzwNjDXpJ3Iqcaetu/hiFghxSACOuz88jni36Qj/qOg0ELZNrsswGk5GwnJx/IN1u40TAieA==",
"version": "11.25.0",
"resolved": "https://registry.npmjs.org/@carbon/type/-/type-11.25.0.tgz",
"integrity": "sha512-p3i5B0uANc2GwPBnbxRVg/KFMWkPV+5I52pkFCs87Bgx6T8r4jB0Y5iPPwsVn2aI5wOnDfiULwSC4JS0LCIgxA==",
"requires": {
"@carbon/grid": "^11.16.1",
"@carbon/layout": "^11.16.1"
"@carbon/grid": "^11.21.0",
"@carbon/layout": "^11.20.0"
}
},
"@casl/ability": {
@ -39204,9 +39212,9 @@
}
},
"compute-scroll-into-view": {
"version": "1.0.20",
"resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
"integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg=="
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
"integrity": "sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg=="
},
"concat-map": {
"version": "0.0.1",
@ -41358,21 +41366,15 @@
"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
},
"downshift": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/downshift/-/downshift-5.2.1.tgz",
"integrity": "sha512-uHX2OLbWthLR8QbR8NCI8OmjvvJxq8+PrA95KblFd9JyB1zVZh1HnszzsWMMCnMuH6IvsUtVfF5HY7XfijJ2dw==",
"version": "8.2.3",
"resolved": "https://registry.npmjs.org/downshift/-/downshift-8.2.3.tgz",
"integrity": "sha512-1HkvqaMTZpk24aqnXaRDnT+N5JCbpFpW+dCogB11+x+FCtfkFX0MbAO4vr/JdXi1VYQF174KjNUveBXqaXTPtg==",
"requires": {
"@babel/runtime": "^7.9.1",
"compute-scroll-into-view": "^1.0.13",
"prop-types": "^15.7.2",
"react-is": "^16.13.1"
},
"dependencies": {
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
}
"@babel/runtime": "^7.22.15",
"compute-scroll-into-view": "^3.0.3",
"prop-types": "^15.8.1",
"react-is": "^18.2.0",
"tslib": "^2.6.2"
}
},
"duplexer": {
@ -54388,9 +54390,9 @@
}
},
"tslib": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
"integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
},
"tsutils": {
"version": "3.21.0",

37
spiffworkflow-frontend/src/components/CustomForm.tsx
View File

@ -1,10 +1,12 @@
import validator from '@rjsf/validator-ajv8';
import { ReactNode } from 'react';
import { RegistryFieldsType } from '@rjsf/utils';
import { Form } from '../rjsf/carbon_theme';
import { DATE_RANGE_DELIMITER } from '../config';
import DateRangePickerWidget from '../rjsf/custom_widgets/DateRangePicker/DateRangePickerWidget';
import TypeaheadWidget from '../rjsf/custom_widgets/TypeaheadWidget/TypeaheadWidget';
import MarkDownFieldWidget from '../rjsf/custom_widgets/MarkDownFieldWidget/MarkDownFieldWidget';
import NumericRangeField from '../rjsf/custom_widgets/NumericRangeField/NumericRangeField';
type OwnProps = {
id: string;
@ -30,12 +32,18 @@ export default function CustomForm({
children,
noValidate = false,
}: OwnProps) {
// set in uiSchema using the "ui:widget" key for a property
const rjsfWidgets = {
'date-range': DateRangePickerWidget,
markdown: MarkDownFieldWidget,
typeahead: TypeaheadWidget,
};
// set in uiSchema using the "ui:field" key for a property
const fields: RegistryFieldsType = {
'numeric-range': NumericRangeField,
};
const formatDateString = (dateString?: string) => {
let dateObject = new Date();
if (dateString) {
@ -176,6 +184,20 @@ export default function CustomForm({
}
};
const checkNumericRange = (
formDataToCheck: any,
propertyKey: string,
errors: any,
_jsonSchema: any,
_uiSchemaPassedIn?: any
) => {
if (formDataToCheck[propertyKey].min > formDataToCheck[propertyKey].max) {
errors[propertyKey].addError(
`must have min less than max on numeric range`
);
}
};
const checkFieldsWithCustomValidations = (
jsonSchema: any,
formDataToCheck: any,
@ -223,6 +245,20 @@ export default function CustomForm({
);
}
if (
currentUiSchema &&
'ui:field' in currentUiSchema &&
currentUiSchema['ui:field'] === 'numeric-range'
) {
checkNumericRange(
formDataToCheck,
propertyKey,
errors,
jsonSchemaToUse,
currentUiSchema
);
}
// recurse through all nested properties as well
let formDataToSend = formDataToCheck[propertyKey];
if (formDataToSend) {
@ -264,6 +300,7 @@ export default function CustomForm({
validator={validator}
customValidate={customValidate}
noValidate={noValidate}
fields={fields}
omitExtraData
>
{children}

107
spiffworkflow-frontend/src/index.css
View File

@ -1,7 +1,8 @@
/* site is mainly using white theme. */
/* header is mainly using g100 */
/* mockup wanted white, not grey, text */
.cds--header, a.cds--header__menu-item {
.cds--header,
a.cds--header__menu-item {
color: white;
}
@ -36,7 +37,7 @@
/* make this a little less prominent so the actual human beings completing tasks stand out */
.system-user-log-entry {
color: #B0B0B0;
color: #b0b0b0;
font-style: italic;
}
@ -45,7 +46,7 @@ h1 {
font-size: 28px;
line-height: 36px;
color: #161616;
margin-bottom: 1rem
margin-bottom: 1rem;
}
h2 {
@ -69,7 +70,7 @@ h3 {
.cds--btn.button-white-background {
color: #393939;
background: #FFFFFF;
background: #ffffff;
background-blend-mode: multiply;
border: 1px solid #393939;
}
@ -158,7 +159,7 @@ h3 {
}
.cds--header__global .cds--btn--primary {
background-color: #161616
background-color: #161616;
}
.cds--btn--primary {
background-color: #393939;
@ -168,7 +169,7 @@ h3 {
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
monospace;
}
.app-logo {
@ -184,20 +185,20 @@ code {
.active-task-highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
fill: yellow !important;
opacity: .6;
opacity: 0.6;
}
.completed-task-highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
fill: grey !important;
opacity: .4;
opacity: 0.4;
}
.cancelled-task-highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
fill: blue !important;
opacity: .2;
opacity: 0.2;
}
.errored-task-highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
fill: red !important;
opacity: .2;
opacity: 0.2;
}
.accordion-item-label {
@ -255,9 +256,9 @@ dl dd {
}
.diagram-editor-canvas {
border:1px solid #000000;
height:78vh;
width:90vw;
border: 1px solid #000000;
height: 78vh;
width: 90vw;
margin: 0 auto;
}
@ -299,7 +300,9 @@ dl dd {
content: none;
}
#user-profile-toggletip .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button{
#user-profile-toggletip
.cds--popover--tab-tip.cds--popover--open
.cds--popover--tab-tip__button {
background-color: #161616;
}
@ -332,18 +335,18 @@ dl dd {
}
.with-half-rem-bottom-margin {
margin-bottom: .5rem;
margin-bottom: 0.5rem;
}
.with-half-rem-top-margin {
margin-top: .5rem;
margin-top: 0.5rem;
}
.diagram-viewer-canvas {
border:1px solid #000000;
height:70vh;
width:90vw;
margin:auto;
border: 1px solid #000000;
height: 70vh;
width: 90vw;
margin: auto;
}
.breadcrumb {
@ -358,7 +361,6 @@ dl dd {
margin-top: 1rem;
}
/* Markdown Tables */
.markdown table {
color: #333;
@ -369,16 +371,16 @@ dl dd {
.markdown table thead th,
.markdown table tfoot th {
color: #777;
background: rgba(0,0,0,.1);
background: rgba(0, 0, 0, 0.1);
}
.markdown table th,
.markdown table td {
padding: .5rem;
padding: 0.5rem;
border: 1px solid lightgrey;
}
/* Zebra Table Style */
.markdown tbody tr:nth-of-type(odd) {
background: rgba(0,0,0,.05);
background: rgba(0, 0, 0, 0.05);
}
.form-instructions {
@ -387,7 +389,7 @@ dl dd {
/* Json Web Form CSS Fix - Bootstrap now requries that each li have a "list-inline-item." Also have a PR
in on this with the react-jsonschema-form repo. This is just a patch fix to allow date inputs to layout a little more cleanly */
.list-inline>li {
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
@ -398,7 +400,7 @@ in on this with the react-jsonschema-form repo. This is just a patch fix to allo
margin: 12px 24px 12px 0px;
width: 320px;
height: 264px;
background: #F4F4F4;
background: #f4f4f4;
order: 1;
float: left;
}
@ -484,7 +486,8 @@ td.actions-cell {
font-size: 14px;
}
th.table-header-right-align .cds--data-table, th.table-header-right-align .cds--table-header-label{
th.table-header-right-align .cds--data-table,
th.table-header-right-align .cds--table-header-label {
text-align: right;
}
@ -553,7 +556,7 @@ svg.notification-icon {
}
/* .no-wrap cds--label cds--label--inline cds--label--inline--md{ */
.no-wrap .cds--label--inline{
.no-wrap .cds--label--inline {
word-break: normal;
}
@ -577,7 +580,7 @@ svg.notification-icon {
/* lime green */
.tag-type-green:hover {
background-color: #80ee90;
background-color: #80ee90;
}
/* reset to initial modal css and avoid table specific css */
@ -702,7 +705,7 @@ svg.notification-icon {
}
/* Default to first color if more than 10 users */
.user-circle:nth-child(n+11) {
.user-circle:nth-child(n + 11) {
background-color: #8e8e8e;
}
@ -716,11 +719,11 @@ svg.notification-icon {
* and from markdown it's a little darker.
*/
hr {
border: 0;
border-top: 1px solid;
color: inherit;
margin: 1rem 0;
opacity: .25;
border: 0;
border-top: 1px solid;
color: inherit;
margin: 1rem 0;
opacity: 0.25;
}
.primary-file-text-suffix {
@ -734,7 +737,7 @@ hr {
.task-data-details-header {
margin-top: 1.5rem;
margin-bottom: .5rem;
margin-bottom: 0.5rem;
}
.explanatory-message {
@ -780,7 +783,16 @@ fieldset fieldset fieldset legend.header {
}
}
p, li, h1, h2, h3, h4, h5, h6, blockquote, hr {
p,
li,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
hr {
max-width: 640px;
}
li.cds--accordion__item {
@ -796,17 +808,20 @@ div.markdown-collapsed {
max-height: 200px;
overflow: hidden;
--mask: linear-gradient(to bottom,
rgba(0,0,0, 1) 0, rgba(0,0,0, 1) 40%,
rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0
) 100% 50% / 100% 100% repeat-x;
--mask: linear-gradient(
to bottom,
rgba(0, 0, 0, 1) 0,
rgba(0, 0, 0, 1) 40%,
rgba(0, 0, 0, 0) 95%,
rgba(0, 0, 0, 0) 0
)
100% 50% / 100% 100% repeat-x;
font: 2em/1.6em Arial;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.cds--data-table-content {
overflow-x: auto;
}
@ -843,18 +858,18 @@ div.onboarding {
/* makde the completed user form modal more readable */
.completed-task-modal .cds--modal-container {
background-color: #ffffff
background-color: #ffffff;
}
.completed-task-modal .cds--text-input:disabled,
.completed-task-modal .cds--text-area:disabled,
.completed-task-modal .cds--date-picker__input:disabled,
.completed-task-modal .cds--select-input:disabled,
.completed-task-modal .cds--select-input:hover:disabled {
--cds-text-disabled: rgba(22, 22, 22, .5);
background-color: var(--cds-field)
--cds-text-disabled: rgba(22, 22, 22, 0.5);
background-color: var(--cds-field);
}
.completed-task-modal .cds--form__helper-text--disabled {
--cds-text-disabled: rgba(22, 22, 22, .5);
--cds-text-disabled: rgba(22, 22, 22, 0.5);
}
.process-model-file-table {

34
spiffworkflow-frontend/src/rjsf/carbon_theme/index.css
View File

@ -71,4 +71,36 @@
.rjsf .array-item .rjsf-field {
margin-bottom: 0;
}
}
.rjsf .markdown-field-desc-text .field-description {
font-size: .8rem;
}
.rjsf .numeric--range-field-wrapper input {
width: auto;
}
.rjsf .numeric--range-field-inputs {
margin: 0.33rem 0 0 0;
display: flex;
align-items: center;
}
.rjsf .numeric--range-field-help-text {
font-size: var(--cds-helper-text-01-font-size, 0.75rem);
line-height: var(--cds-helper-text-01-line-height, 1.33333);
letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
z-index: 0;
color: var(--cds-text-secondary, #525252);
inline-size: 100%;
margin-block-start: 0.25rem;
opacity: 1;
}
.rjsf .error-message {
color: var(--cds-text-error);
font-size: var(--cds-helper-text-01-font-size, 0.75rem);
line-height: var(--cds-helper-text-01-line-height, 1.33333);
letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
}

155
spiffworkflow-frontend/src/rjsf/custom_widgets/NumericRangeField/NumericRangeField.tsx Normal file
View File

@ -0,0 +1,155 @@
import {
descriptionId,
FieldProps,
getTemplate,
getUiOptions,
} from '@rjsf/utils';
import { TextInput } from '@carbon/react';
import { getCommonAttributes } from '../../helpers';
// Example jsonSchema - NOTE: the "min" and "max" properties are special names and must be used:
// compensation":{
// "title": "Compensation (yearly), USD",
// "type": "object",
// "properties": {
// "min": {
// "type": "number"
// },
// "max": {
// "type": "number"
// }
// }
// }
//
// Example uiSchema:
// "compensation": {
// "ui:field": "numeric-range",
// }
// eslint-disable-next-line sonarjs/cognitive-complexity
export default function NumericRangeField({
id,
schema,
uiSchema,
idSchema,
disabled,
readonly,
onChange,
autofocus,
label,
rawErrors = [],
formData,
registry,
}: FieldProps) {
const commonAttributes = getCommonAttributes(
label,
schema,
uiSchema,
rawErrors
);
const description = schema?.description || uiSchema?.['ui:description'];
const uiOptions = getUiOptions(uiSchema || {});
const DescriptionFieldTemplate = getTemplate(
'DescriptionFieldTemplate',
registry,
uiOptions
);
const formatNumberString = (numberString: string): string => {
if (numberString) {
return numberString.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
return '0';
};
const parseNumberString = (numberString: string) =>
Number(numberString.replace(/,/g, ''));
// create two number inputs for min and max compensation
const min = formData?.min || 0;
const max = formData?.max || 0;
// the text input eventually breaks when the number gets too big.
// we are not sure what the cut off really is but seems unlikely
// people will need to go this high.
const maxNumber = 999_999_999_999;
const onChangeLocal = (nameToChange: any, event: any) => {
event.preventDefault();
const numberValue = parseNumberString(event.target.value);
if (numberValue > maxNumber) {
return;
}
if (!disabled && !readonly) {
if (nameToChange === 'min' && numberValue > max) {
onChange({
...(formData || {}),
min: numberValue,
max: numberValue,
});
} else {
onChange({
...(formData || {}),
...{ max, min },
[nameToChange]: numberValue,
});
}
}
};
return (
<div className="numeric--range-field-wrapper">
<div className="numeric--range-field-label">
<h5>{commonAttributes.label}</h5>
{description && (
<div className="markdown-field-desc-text">
<DescriptionFieldTemplate
id={descriptionId(idSchema)}
description={description}
schema={schema}
uiSchema={uiSchema}
registry={registry}
/>
</div>
)}
</div>
<div className="numeric--range-field-inputs">
<TextInput
id={`${id}-min`}
labelText={`Minimum ${schema.title || ''}`}
disabled={disabled}
readonly={readonly}
value={formatNumberString(min)}
onChange={(values: any) => {
onChangeLocal('min', values);
}}
invalid={commonAttributes.invalid}
defaultValue="0"
autofocus={autofocus}
/>
<TextInput
id={`${id}-max`}
labelText={`Maximum ${schema.title || ''}`}
disabled={disabled}
readonly={readonly}
value={formatNumberString(max)}
onChange={(values: any) => onChangeLocal('max', values)}
defaultValue="0"
invalid={commonAttributes.invalid}
/>
</div>
{commonAttributes.errorMessageForField && (
<div className="error-message">
{commonAttributes.errorMessageForField}
</div>
)}
{commonAttributes.helperText && (
<p className="numeric--range-field-help-text">
{commonAttributes.helperText}
</p>
)}
</div>
);
}