* 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
GitHub
parent
d5ea87017f
commit
5cceb52756
|
|
@ -226,3 +226,52 @@ To incorporate the markdown widget into your rjsf form, follow these steps:
|
|||
"ui:widget": "markdown"
|
||||
```
|
||||
|
||||
|
||||
### 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.
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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,11 +335,11 @@ 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 {
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -720,7 +723,7 @@ hr {
|
|||
border-top: 1px solid;
|
||||
color: inherit;
|
||||
margin: 1rem 0;
|
||||
opacity: .25;
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -72,3 +72,35 @@
|
|||
.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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue