From e3ec77a768e993723dbdb8d3bb6c292cbe018b80 Mon Sep 17 00:00:00 2001 From: Ishaan Puniani Date: Sat, 12 Sep 2020 15:36:02 +0200 Subject: [PATCH 1/3] Added inner-html field --- README.md | 4 ++++ demo/src/schema/all-available-fields.js | 11 ++++++++++- src/Field/InnerHtml.js | 19 +++++++++++++++++++ src/Field/index.js | 2 ++ 4 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 src/Field/InnerHtml.js diff --git a/README.md b/README.md index 09f37c6..16b70db 100644 --- a/README.md +++ b/README.md @@ -264,6 +264,10 @@ containers and keys or use the ones that come with the module. | | as | String | HTML tag to use for the inner-text field | | | htmlClass | String | HTML class for the tag used | | | defaultValue | String | Either used as a static value for the HTML element or as a placeholder when is not defined | +| inner-html | renderer | String | inner-html | +| | as | String | HTML tag to use for the inner-html field | +| | htmlClass | String | HTML class for the tag used | +| | defaultValue | String | Either used as a static value for the HTML element | | button | renderer | String | button | | | content | String | button inner html | diff --git a/demo/src/schema/all-available-fields.js b/demo/src/schema/all-available-fields.js index f7f9335..b5ed661 100644 --- a/demo/src/schema/all-available-fields.js +++ b/demo/src/schema/all-available-fields.js @@ -84,6 +84,15 @@ export default { htmlClass: 'text-muted d-block mb-3 mt-1', defaultValue: 'This is some raw html text content: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum' }, + innerHtml: { + type: "field", + renderer: "inner-html", + name: "innerText", + as: "p", + htmlClass: "text-muted d-block mb-3 mt-1", + defaultValue: + "

This is some raw html content

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum", + }, autocomplete: { name: "autocomplete", label: "Autocomplete", @@ -271,4 +280,4 @@ export default { } } } -} +} \ No newline at end of file diff --git a/src/Field/InnerHtml.js b/src/Field/InnerHtml.js new file mode 100644 index 0000000..32c416b --- /dev/null +++ b/src/Field/InnerHtml.js @@ -0,0 +1,19 @@ +import React from "react"; + +const InnerHtml = ({ config, formik, value, error }) => { + const { + name, + as: Component = "div", + htmlClass, + defaultValue = "", + ...attributes + } = config; + + return ( + +
+ + ); +}; + +export default React.memo(InnerHtml); diff --git a/src/Field/index.js b/src/Field/index.js index 65f6a15..875943d 100644 --- a/src/Field/index.js +++ b/src/Field/index.js @@ -8,6 +8,7 @@ import Wysiwyg from './Wysiwyg'; import Textarea from './Textarea'; import Checkbox from './Checkbox'; import InnerText from './InnerText'; +import InnerHtml from './InnerHtml'; import CodeEditor from './CodeEditor'; import ReactSelect from './ReactSelect'; import FileUploader from './FileUploader'; @@ -29,6 +30,7 @@ registerField('wysiwyg', Wysiwyg); registerField('textarea', Textarea); registerField('checkbox', Checkbox); registerField('inner-text', InnerText); +registerField('inner-html', InnerHtml); registerField('code-editor', CodeEditor); registerField('react-select', ReactSelect); registerField('autocomplete', Autocomplete); From cbd4572003a10c9e315520f2ee6ccf9247188124 Mon Sep 17 00:00:00 2001 From: Ishaan Puniani Date: Tue, 29 Sep 2020 21:33:35 +0200 Subject: [PATCH 2/3] added delimiter support in react-select --- demo/src/schema/all-available-fields.js | 17 +++++++++++++++++ src/Field/ReactSelect.js | 21 ++++++++++++++++----- 2 files changed, 33 insertions(+), 5 deletions(-) diff --git a/demo/src/schema/all-available-fields.js b/demo/src/schema/all-available-fields.js index b5ed661..7e0e2c3 100644 --- a/demo/src/schema/all-available-fields.js +++ b/demo/src/schema/all-available-fields.js @@ -160,6 +160,23 @@ export default { formGroupClass: "form-group mb-4", validation: [['array'], ['of', [['string']]]] }, + reactSelectCreatableMultiDelimited: { + type: "field", + renderer: "react-select", + name: "react-select-creatable-multi-delimited", + label: "React Select Creatable Multi Delimited with ','", + delimiter: ',', + isMulti: true, + isCreatable: true, + options: [], + menuIsOpen: false, + defaultValue: [], + components: { + DropdownIndicator: null + }, + formGroupClass: "form-group mb-4", + validation: [['array'], ['of', [['string']]]] + }, textarea: { name: "description", label: "Description", diff --git a/src/Field/ReactSelect.js b/src/Field/ReactSelect.js index b62b35a..56e78f7 100644 --- a/src/Field/ReactSelect.js +++ b/src/Field/ReactSelect.js @@ -52,6 +52,7 @@ const ReactSelect = ({ config, formik, value, error }) => { isDisabled = false, isClearable = false, isCreatable = false, + delimiter= '', options: initialOptions, ...attributes } = config; @@ -103,15 +104,25 @@ const ReactSelect = ({ config, formik, value, error }) => { switch (event.key) { case 'Enter': case 'Tab': - changeHandler( + if (delimiter && inputValue.indexOf(delimiter) > 1) { + changeHandler( setFieldValueWrapper(setFieldValue, name), formik, config, - [ ...selectedValue, inputValue ], + [...selectedValue, ...inputValue.split(delimiter)], 'onChange' - ); - setInputValue(''); - event.preventDefault(); + ); + } else { + changeHandler( + setFieldValueWrapper(setFieldValue, name), + formik, + config, + [...selectedValue, inputValue], + 'onChange' + ); + } + setInputValue(''); + event.preventDefault(); } }, ...attributes From 045889399c33308e56c2b84285ad4ec84d13c329 Mon Sep 17 00:00:00 2001 From: Ishaan Puniani Date: Wed, 30 Sep 2020 22:30:35 +0200 Subject: [PATCH 3/3] bug fix --- src/Field/ReactSelect.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Field/ReactSelect.js b/src/Field/ReactSelect.js index 56e78f7..dcfd355 100644 --- a/src/Field/ReactSelect.js +++ b/src/Field/ReactSelect.js @@ -104,7 +104,7 @@ const ReactSelect = ({ config, formik, value, error }) => { switch (event.key) { case 'Enter': case 'Tab': - if (delimiter && inputValue.indexOf(delimiter) > 1) { + if (delimiter && inputValue.indexOf(delimiter) >= 1) { changeHandler( setFieldValueWrapper(setFieldValue, name), formik,