-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
23 changed files
with
323 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| using EPiServer.Forms.Core.Internal.Autofill; | ||
| using EPiServer.Forms.Core.Internal.ExternalSystem; | ||
| using EPiServer.Forms.Core; | ||
| using Microsoft.AspNetCore.Http; | ||
| using System.Collections.Generic; | ||
| using System.Linq; | ||
|
|
||
| namespace AlloyMvcTemplates.CustomCode | ||
| { | ||
| /// <summary> | ||
| /// Always autofill FormElement with static suggestion list | ||
| /// </summary> | ||
| public class StaticAutofillSystem : IExternalSystem, IAutofillProvider | ||
| { | ||
| public virtual string Id | ||
| { | ||
| get { return "StaticAutofillSystem"; } | ||
| } | ||
|
|
||
| /// <summary> | ||
| /// This system does not have datasource, because it is static | ||
| /// </summary> | ||
| public virtual IEnumerable<IDatasource> Datasources | ||
| { | ||
| get | ||
| { | ||
| var ds1 = new Datasource() | ||
| { | ||
| Id = "StaticAutofillDatasource1", | ||
| Name = "Static Autofill Datasource 1", | ||
| OwnerSystem = this, | ||
| Columns = new Dictionary<string, string> { | ||
| { "staticds1email", "static ds1 email" }, | ||
| { "staticds1firstname", "static ds1 first name" } | ||
| } | ||
| }; | ||
|
|
||
| var ds2 = new Datasource() | ||
| { | ||
| Id = "StaticAutofillDatasource2", | ||
| Name = "Static Autofill Datasource 2", | ||
| OwnerSystem = this, | ||
| Columns = new Dictionary<string, string> { | ||
| { "staticds2avatar", "static ds2 avatar" }, | ||
| { "staticds2name", "static ds2 name" }, | ||
| { "staticds2bio", "static ds2 Bio" } | ||
| } | ||
| }; | ||
|
|
||
| return new[] { ds1, ds2 }; | ||
| } | ||
| } | ||
|
|
||
| /// <summary> | ||
| /// Returns a list of suggested values by field mapping key. | ||
| /// </summary> | ||
| /// <param name="fieldMappingKeys">List of field mapping keys</param> | ||
| /// <returns>Collection of suggested value</returns> | ||
| public virtual IEnumerable<string> GetSuggestedValues(IDatasource selectedDatasource, IEnumerable<RemoteFieldInfo> remoteFieldInfos, ElementBlockBase content, IFormContainerBlock formContainerBlock, HttpContext context) | ||
| { | ||
| if (selectedDatasource == null || remoteFieldInfos == null) | ||
| { | ||
| return Enumerable.Empty<string>(); | ||
| } | ||
|
|
||
| if (!Datasources.Any(ds => ds.Id == selectedDatasource.Id) // datasource belong to this system | ||
| || !remoteFieldInfos.Any(mi => mi.DatasourceId == selectedDatasource.Id)) // and remoteFieldInfos is for our system datasource | ||
| { | ||
| return Enumerable.Empty<string>(); | ||
| } | ||
|
|
||
| var activeRemoteFieldInfo = remoteFieldInfos.FirstOrDefault(mi => mi.DatasourceId == selectedDatasource.Id); | ||
| switch (activeRemoteFieldInfo.ColumnId) | ||
| { | ||
| case "staticds1email": | ||
| return new List<string> { | ||
| "[email protected]", | ||
| "[email protected]", | ||
| "[email protected]", | ||
| "[email protected]" | ||
| }; | ||
|
|
||
| case "staticds1firstname": | ||
| return new List<string> { | ||
| "Hung", | ||
| "Phu", | ||
| "Tuan", | ||
| "Thach" | ||
| }; | ||
|
|
||
| case "staticds2avatar": | ||
| return new List<string> { | ||
| "tuan.png", | ||
| "thach.jpg" | ||
| }; | ||
|
|
||
| case "staticds2name": | ||
| return new List<string>{ | ||
| "Tuan Do", | ||
| "Thach Nguyen", | ||
| "Hung Phan", | ||
| "Phu Nguyen" | ||
| }; | ||
|
|
||
| case "staticds2bio": | ||
| return new List<string> { | ||
| "I am from Vietnam", | ||
| "I am from Sweden" | ||
| }; | ||
| default: | ||
| return Enumerable.Empty<string>(); | ||
| } | ||
| } | ||
| } | ||
| } |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
19 changes: 19 additions & 0 deletions
19
src/@optimizely/forms-react/src/components/ElementWrapper.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import React, { ReactNode } from "react"; | ||
|
|
||
| export interface ElementWrapperProps{ | ||
| className: string | ||
| isVisible: boolean, | ||
| children: ReactNode | ||
| } | ||
|
|
||
| export default function ElementWrapper(props: ElementWrapperProps){ | ||
| return ( | ||
| <> | ||
| {props.isVisible && ( | ||
| <> | ||
| {props.children} | ||
| </> | ||
| )} | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
59 changes: 56 additions & 3 deletions
59
src/@optimizely/forms-react/src/components/elements/TextboxElementBlock.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,64 @@ | ||
| import { Textbox } from "@optimizely/forms-sdk"; | ||
| import React, { FunctionComponent} from "react"; | ||
| import React, { useRef} from "react"; | ||
| import { ValidatorType } from "../../models"; | ||
| import { FormValidationModel } from "../../models/FormValidationModel"; | ||
| import ElementWrapper from "../ElementWrapper"; | ||
|
|
||
| export interface TextboxElementBlockProps { | ||
| element: Textbox | ||
| } | ||
|
|
||
| export const TextboxElementBlock = (props: TextboxElementBlockProps) => { | ||
| //TODO: update code later | ||
| return (<>Textbox</>); | ||
| const {element} = props; | ||
| const formContext = {} as Record<string, object>; | ||
| const formValidationContext = {} as Record<string, FormValidationModel[]>; | ||
| const handleChange = () => {}; //TODO: update data to context | ||
| const handleBlur = () => {}; //TODO: validation, dependency | ||
|
|
||
| const isRequire = element.properties.validators?.some(v => v.type === ValidatorType.RequiredValidator); | ||
| const validatorClasses = element.properties.validators?.reduce((acc, obj) => `${acc} ${obj.model.validationCssClass}`, ""); | ||
|
|
||
| const extraAttr = useRef<any>({}); | ||
| if(isRequire){ | ||
| extraAttr.current = {...extraAttr.current, required: isRequire, "aria-required": isRequire }; | ||
| } | ||
| if(element.properties.descripton && element.properties.descripton.trim() !== ""){ | ||
| extraAttr.current = {...extraAttr.current, title: element.properties.descripton } | ||
| } | ||
| if(element.properties.forms_ExternalSystemsFieldMappings?.length > 0){ | ||
| extraAttr.current = {...extraAttr.current, list: `${element.key}_datalist` } | ||
| } | ||
|
|
||
| return ( | ||
| <ElementWrapper className={`FormTextbox ${validatorClasses ?? ""}`} isVisible={true}> | ||
| <label htmlFor={element.key} className="Form__Element__Caption"> | ||
| {element.properties.label} | ||
| </label> | ||
| <input name={element.key} id={element.key} type="text" className="FormTextbox__Input" | ||
| aria-describedby={`${element.key}_desc`} | ||
| placeholder={element.properties.placeHolder} | ||
| value={formContext[element.key]} | ||
| autoComplete={element.properties.autoComplete} | ||
| {...extraAttr.current} | ||
| onChange={handleChange} | ||
| onBlur={handleBlur}/> | ||
| {element.properties.validators?.map((v)=> { | ||
| let validationResult = formValidationContext[element.key]?.filter(r => r.type == v.type); | ||
| let valid = !validationResult || validationResult?.length == 0 || validationResult[0].valid; | ||
| return ( | ||
| <span key={v.type} className="Form__Element__ValidationError" id={`${element.key}_desc`} role="alert" | ||
| style={{display: valid ? "none" : ""}}> | ||
| {v.model.message} | ||
| </span> | ||
| ); | ||
| })} | ||
| {element.properties.forms_ExternalSystemsFieldMappings?.length > 0 && | ||
| <datalist id={`${element.key}_datalist`}> | ||
| {element.properties.forms_ExternalSystemsFieldMappings?.map(i => | ||
| <option value={i} key={i}></option> | ||
| )} | ||
| </datalist> | ||
| } | ||
| </ElementWrapper> | ||
| ); | ||
| } |
This file was deleted.
Oops, something went wrong.
5 changes: 5 additions & 0 deletions
5
src/@optimizely/forms-react/src/models/FormValidationModel.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| export interface FormValidationModel | ||
| { | ||
| type: string | ||
| valid: boolean | ||
| } |
Oops, something went wrong.