diff --git a/example/swagger-files/types.json b/example/swagger-files/types.json index 33865c119..999c5c6ef 100644 --- a/example/swagger-files/types.json +++ b/example/swagger-files/types.json @@ -98,6 +98,12 @@ "type": "string", "format": "date" }, + "string (format: date, with pattern)": { + "type": "string", + "format": "date", + "description": "This accepts a pattern of matching `(\\d{4})-(\\d{2})-(\\d{2})`", + "pattern": "(\\d{4})-(\\d{2})-(\\d{2})" + }, "string (format: date-time)": { "description": "Unsupported due to the varying ways that `date-time` is utilized in API definitions for representing dates, the [lack of wide browser support for the input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local#Browser_compatibility), and that it's not [RFC 3339](https://tools.ietf.org/html/rfc3339) compliant.", "type": "string", diff --git a/packages/api-explorer/__tests__/Params.test.jsx b/packages/api-explorer/__tests__/Params.test.jsx index 91aa2815c..4dcef042f 100644 --- a/packages/api-explorer/__tests__/Params.test.jsx +++ b/packages/api-explorer/__tests__/Params.test.jsx @@ -239,18 +239,27 @@ describe('oneOf/anyOf', () => { }); describe('schema handling', () => { - describe('minLength / maxLength', () => { - it('should put a `minLength` and `maxLength` attribute on an input', () => { - const params = mount( -
- -
- ); + it('should put a `minLength` and `maxLength` attribute on an input', () => { + const params = mount( +
+ +
+ ); - expect(params.find('input')).toHaveLength(1); - expect(params.find('input').props()).toHaveProperty('minLength', 5); - expect(params.find('input').props()).toHaveProperty('maxLength', 20); - }); + expect(params.find('input')).toHaveLength(1); + expect(params.find('input').props()).toHaveProperty('minLength', 5); + expect(params.find('input').props()).toHaveProperty('maxLength', 20); + }); + + it('should put a `pattern` on an input', () => { + const params = mount( +
+ +
+ ); + + expect(params.find('input')).toHaveLength(1); + expect(params.find('input').props()).toHaveProperty('pattern', '(\\d{4})-(\\d{2})-(\\d{2})'); }); describe('format', () => { diff --git a/packages/api-explorer/__tests__/__fixtures__/string/oas.json b/packages/api-explorer/__tests__/__fixtures__/string/oas.json index 14b1aa57f..4ffa2d28d 100644 --- a/packages/api-explorer/__tests__/__fixtures__/string/oas.json +++ b/packages/api-explorer/__tests__/__fixtures__/string/oas.json @@ -125,6 +125,26 @@ } } }, + "/format-string-with-pattern": { + "get": { + "requestBody": { + "content": { + "application/json": { + "schema": { + "type": "object", + "properties": { + "string pattern": { + "type": "string", + "format": "date", + "pattern": "(\\d{4})-(\\d{2})-(\\d{2})" + } + } + } + } + } + } + } + }, "/format-unknown": { "get": { "requestBody": { diff --git a/packages/oas-form/src/components/widgets/BaseInput.js b/packages/oas-form/src/components/widgets/BaseInput.js index 25c217298..03240116d 100644 --- a/packages/oas-form/src/components/widgets/BaseInput.js +++ b/packages/oas-form/src/components/widgets/BaseInput.js @@ -65,6 +65,10 @@ function BaseInput(props) { inputProps.maxLength = schema.maxLength; } + if (typeof schema.pattern !== 'undefined') { + inputProps.pattern = schema.pattern; + } + const _onChange = ({ target: { value } }) => { return props.onChange(value === '' ? options.emptyValue : value); };