diff --git a/components/form/builder/package.json b/components/form/builder/package.json index b3633e63c..9e960aee2 100644 --- a/components/form/builder/package.json +++ b/components/form/builder/package.json @@ -22,6 +22,7 @@ "@s-ui/react-molecule-dropdown-option": "1", "@s-ui/react-molecule-field": "1", "@s-ui/react-molecule-input-field": "4", + "@s-ui/react-molecule-photo-uploader": "^2.17.0", "@s-ui/react-molecule-radio-button-field": "1", "@s-ui/react-molecule-radio-button-group": "1", "@s-ui/react-molecule-select-field": "1", diff --git a/components/form/builder/src/Checkbox/index.js b/components/form/builder/src/Checkbox/index.js index 5aa91258f..aac4b04f7 100644 --- a/components/form/builder/src/Checkbox/index.js +++ b/components/form/builder/src/Checkbox/index.js @@ -82,9 +82,8 @@ const Checkbox = ({ // render SUI component return (
diff --git a/components/form/builder/src/Icons/IconDelete.js b/components/form/builder/src/Icons/IconDelete.js new file mode 100644 index 000000000..362f73ee7 --- /dev/null +++ b/components/form/builder/src/Icons/IconDelete.js @@ -0,0 +1,14 @@ +import {memo} from 'react' +import PropTypes from 'prop-types' + +const SVG = ({className}) => ( + + + +) + +SVG.propTypes = { + className: PropTypes.string +} + +export default memo(SVG) diff --git a/components/form/builder/src/Icons/IconDragAndDrop.js b/components/form/builder/src/Icons/IconDragAndDrop.js new file mode 100644 index 000000000..7564f08cc --- /dev/null +++ b/components/form/builder/src/Icons/IconDragAndDrop.js @@ -0,0 +1,19 @@ +import {memo} from 'react' +import PropTypes from 'prop-types' + +const SVG = ({className}) => ( + + + +) + +SVG.propTypes = { + className: PropTypes.string +} + +export default memo(SVG) diff --git a/components/form/builder/src/Icons/IconInfo.js b/components/form/builder/src/Icons/IconInfo.js new file mode 100644 index 000000000..c93183e1b --- /dev/null +++ b/components/form/builder/src/Icons/IconInfo.js @@ -0,0 +1,14 @@ +import {memo} from 'react' +import PropTypes from 'prop-types' + +const SVG = ({className}) => ( + + + +) + +SVG.propTypes = { + className: PropTypes.string +} + +export default memo(SVG) diff --git a/components/form/builder/src/Icons/IconPlusPrimary.js b/components/form/builder/src/Icons/IconPlusPrimary.js new file mode 100644 index 000000000..14dd8d596 --- /dev/null +++ b/components/form/builder/src/Icons/IconPlusPrimary.js @@ -0,0 +1,17 @@ +import {memo} from 'react' +import PropTypes from 'prop-types' + +const SVG = ({className}) => ( + + + +) + +SVG.propTypes = { + className: PropTypes.string +} + +export default memo(SVG) diff --git a/components/form/builder/src/Icons/IconReject.js b/components/form/builder/src/Icons/IconReject.js new file mode 100644 index 000000000..1f08299c8 --- /dev/null +++ b/components/form/builder/src/Icons/IconReject.js @@ -0,0 +1,14 @@ +import {memo} from 'react' +import PropTypes from 'prop-types' + +const SVG = ({className}) => ( + + + +) + +SVG.propTypes = { + className: PropTypes.string +} + +export default memo(SVG) diff --git a/components/form/builder/src/Icons/IconRetry.js b/components/form/builder/src/Icons/IconRetry.js new file mode 100644 index 000000000..b0b973aed --- /dev/null +++ b/components/form/builder/src/Icons/IconRetry.js @@ -0,0 +1,14 @@ +import {memo} from 'react' +import PropTypes from 'prop-types' + +const SVG = ({className}) => ( + + + +) + +SVG.propTypes = { + className: PropTypes.string +} + +export default memo(SVG) diff --git a/components/form/builder/src/Icons/IconRotate.js b/components/form/builder/src/Icons/IconRotate.js new file mode 100644 index 000000000..cf5c298ad --- /dev/null +++ b/components/form/builder/src/Icons/IconRotate.js @@ -0,0 +1,17 @@ +import {memo} from 'react' +import PropTypes from 'prop-types' + +const SVG = ({className}) => ( + + + +) + +SVG.propTypes = { + className: PropTypes.string +} + +export default memo(SVG) diff --git a/components/form/builder/src/Images/index.js b/components/form/builder/src/Images/index.js new file mode 100644 index 000000000..a728379ef --- /dev/null +++ b/components/form/builder/src/Images/index.js @@ -0,0 +1,59 @@ +import MoleculePhotoUploader from '@s-ui/react-molecule-photo-uploader' + +import IconDelete from '../Icons/IconDelete.js' +import IconDragAndDrop from '../Icons/IconDragAndDrop.js' +import IconInfo from '../Icons/IconInfo.js' +import IconPlusPrimary from '../Icons/IconPlusPrimary.js' +import IconReject from '../Icons/IconReject.js' +import IconRetry from '../Icons/IconRetry.js' +import IconRotate from '../Icons/IconRotate.js' + +const _infoIcon = () => +const _rotateIcon = () => +const _deleteIcon = () => +const _dragPhotosIcon = () => +const _rejectPhotosIcon = () => +const _addMorePhotosIcon = () => +const _retryErrorPhotosIcon = () => + +const Images = ({field}) => { + return ( +
+ console.log(rejectedPhotos)} + callbackPhotosUploaded={acceptedPhotos => console.log(acceptedPhotos)} + callbackUploadPhoto={(file, oldUrl) => console.log(file, oldUrl)} + limitPhotosUploadedText="Máximo de fotos subidas" + limitPhotosUploadedNotification="Maxímo de 10 fotos subidas" + mainPhotoLabel="PRINCIPAL" + maxPhotos={10} + rotationDirection="clockwise" + initialPhotos={field?.values} + /> +
+ ) +} + +export default Images diff --git a/components/form/builder/src/Images/index.scss b/components/form/builder/src/Images/index.scss new file mode 100644 index 000000000..d40611f89 --- /dev/null +++ b/components/form/builder/src/Images/index.scss @@ -0,0 +1 @@ +@import '~@s-ui/react-molecule-photo-uploader/lib/index'; diff --git a/components/form/builder/src/ProxyField/index.js b/components/form/builder/src/ProxyField/index.js index f6045aadd..db210f78a 100644 --- a/components/form/builder/src/ProxyField/index.js +++ b/components/form/builder/src/ProxyField/index.js @@ -11,6 +11,7 @@ import FieldSetField from '../Standard/Fields/FieldSet/index.js' import PickerField from '../Standard/Fields/Picker/index.js' import MultiPickerField from '../Standard/Fields/Multicheckbox/index.js' import RangeField from '../Standard/Fields/Range/index.js' +import Images from '../Images/index.js' const ProxyField = ({ field, @@ -102,6 +103,19 @@ const ProxyField = ({ }) break + case FIELDS.IMAGES: + Field = Images({ + field, + tabIndex, + onChange, + onFocus, + onBlur, + errors, + alerts, + renderer + }) + break + default: { const rendererResponse = renderer({ id: field.id, diff --git a/components/form/builder/src/Standard/index.js b/components/form/builder/src/Standard/index.js index 432769dcd..185342ac1 100644 --- a/components/form/builder/src/Standard/index.js +++ b/components/form/builder/src/Standard/index.js @@ -11,7 +11,8 @@ const FIELDS = { FIELDSET: 'fieldset', PICKER: 'picker', MULTIPICKER: 'multipicker', - RANGE: 'range' + RANGE: 'range', + IMAGES: 'images' } const DISPLAYS = { @@ -172,34 +173,32 @@ const checkConstraintsFromField = (field, locale) => { return errorMessages } -const checkConstraintsFactory = - (json, locale) => - ({for: fieldID, all}) => { - let fieldsToValidate = [] - if (all && fieldID) { - window.console.warn( - '[form/builder]: checkConstraintsFactory: both modes validate all fields and validate a concrete field are not compatible, please use one of them' - ) - } else if (all) { - fieldsToValidate = fieldsNamesInOrderOfDefinition(json?.form?.fields) - } else if (fieldID) { - fieldsToValidate = [fieldID] +const checkConstraintsFactory = (json, locale) => ({for: fieldID, all}) => { + let fieldsToValidate = [] + if (all && fieldID) { + window.console.warn( + '[form/builder]: checkConstraintsFactory: both modes validate all fields and validate a concrete field are not compatible, please use one of them' + ) + } else if (all) { + fieldsToValidate = fieldsNamesInOrderOfDefinition(json?.form?.fields) + } else if (fieldID) { + fieldsToValidate = [fieldID] + } else { + window.console.warn( + '[form/builder]: checkConstraintsFactory: Specify if you want to validate a specific field or all the fields' + ) + } + + const fieldsWithErrors = {} + fieldsToValidate.forEach(fieldId => { + const field = pickFieldById(json.form.fields, fieldId) + if (!field.hidden) { + fieldsWithErrors[field.id] = checkConstraintsFromField(field, locale) } else { - window.console.warn( - '[form/builder]: checkConstraintsFactory: Specify if you want to validate a specific field or all the fields' - ) + fieldsWithErrors[field.id] = [] } - - const fieldsWithErrors = {} - fieldsToValidate.forEach(fieldId => { - const field = pickFieldById(json.form.fields, fieldId) - if (!field.hidden) { - fieldsWithErrors[field.id] = checkConstraintsFromField(field, locale) - } else { - fieldsWithErrors[field.id] = [] - } - }) - return fieldsWithErrors - } + }) + return fieldsWithErrors +} export {FIELDS, DISPLAYS, CONSTRAINTS, checkConstraintsFactory} diff --git a/components/form/builder/src/index.scss b/components/form/builder/src/index.scss index 6babb95d6..6cc988eb8 100644 --- a/components/form/builder/src/index.scss +++ b/components/form/builder/src/index.scss @@ -12,6 +12,7 @@ @import './Stepper/index'; @import './MultiButton/index'; @import './Range/Default/index'; +@import './Images/index'; $self: 'sui-FormBuilder';