Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat : integrated form composer with Searchable dropdown #1258

Open
wants to merge 2 commits into
base: sandbox-develop
Choose a base branch
from
Open

Feat : integrated form composer with Searchable dropdown #1258

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7ba2896
Feat : integrated form composer with Searchable dropdown
ashish-egov Aug 8, 2024
2be840e
Merge remote-tracking branch 'origin/sandbox-develop' into searchAble…
ashish-egov Aug 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions micro-frontends/sandbox-ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"react-dom": "18.3.1",
"react-i18next": "15.0.0",
"react-router-dom": "6.25.1",
"react-select": "^5.8.0",
"webpack-dev-server": "^5.0.4"
},
"devDependencies": {
Expand Down
80 changes: 63 additions & 17 deletions micro-frontends/sandbox-ui/packages/components/src/CustomWidgets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,37 @@
import React from 'react';
import Select from 'react-select';

export const CustomDatePicker = ({ value, onChange, label }) => {
const handleChange = (event) => {
const date = event.target.value;
onChange(date ? new Date(date).toISOString() : '');
};

const inputStyle = {
width: '100%',
boxSizing: 'border-box',
paddingRight: '0.75rem', // Add padding to create space for the date icon
outline: '0.125rem solid transparent',
outlineOffset: '0.125rem',
height: '2.5rem',
backgroundColor: '#fff',
fontStyle: 'normal',
fontFamily: 'Roboto',
fontSize: '1rem',
border: '0.063rem solid #787878',
color: '#363636',
lineHeight: '1.5rem'
};

return (
<div style={{ marginBottom: '10px' }}>
{label && <label style={{ display: 'block', marginBottom: '5px' }}>{label}</label>}
<div style={{ marginBottom: '1rem' }}>
{label && <label style={{ display: 'block', marginBottom: '0.5rem' }}>{label}</label>}
<input
className='digit-citizenCard-input'
type='date'
value={value ? value.split('T')[0] : ''}
onChange={handleChange}
style={inputStyle} // Apply the custom style
/>
</div>
);
Expand All @@ -22,24 +40,52 @@ export const CustomDatePicker = ({ value, onChange, label }) => {

export const CustomDropdown = ({ options, value, onChange, label }) => {

const handleChange = (event) => {
onChange(event.target.value);
const handleChange = (selectedOption) => {
onChange(selectedOption.value);
};

const customStyles = {
control: (base) => ({
...base,
width: '100%',
boxSizing: 'border-box',
paddingLeft: 0,
outline: '0.125rem solid transparent',
outlineOffset: '0.125rem',
height: '2.5rem',
backgroundColor: '#fff',
fontStyle: 'normal',
fontFamily: 'Roboto',
fontSize: '1rem',
border: '0.063rem solid #787878',
color: '#363636',
lineHeight: '1.5rem',
borderRadius: 0,
}),
valueContainer: (base) => ({
...base
})
};

// Convert options to the format expected by react-select
const formattedOptions = options.map(option => ({
value: option.value,
label: option.label
}));

// Find the currently selected option
const selectedValue = formattedOptions.find(option => option.value === value);

return (
<div style={{ marginBottom: '10px' }}>
{label && <label style={{ display: 'block', marginBottom: '5px' }}>{label}</label>}
<select
className='digit-citizenCard-input'
value={value}
<div style={{ marginBottom: '1rem' }}>
{label && <label style={{ display: 'block', marginBottom: '0.5rem' }}>{label}</label>}
<Select
// className='digit-citizenCard-input'
value={selectedValue}
onChange={handleChange}
>
{options.map((option, index) => (
<option key={index} value={option.value}>
{option.label}
</option>
))}
</select>
options={formattedOptions}
styles={customStyles} // Apply the custom styles
/>
</div>
);
};
};
15 changes: 15 additions & 0 deletions micro-frontends/sandbox-ui/packages/components/src/hoc/FormComposer/CheckBox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from 'react';

export const CheckBox = ({ checked, onChange, label }) => {
return (
<label style={{ display: 'flex', flexDirection: 'column', alignItems: 'start' }}>
{label}
<input
type="checkbox"
checked={checked}
onChange={onChange}
style={{ width: '2vh', height: '2vw' }}
/>
</label>
);
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Enhance accessibility with htmlFor and id attributes.

To improve accessibility, associate the <label> with the <input> using htmlFor and id attributes.

3c3
< export const CheckBox = ({ checked, onChange, label }) => {
---
> export const CheckBox = ({ checked, onChange, label, id }) => {
5c5
<         <label style={{ display: 'flex', flexDirection: 'column', alignItems: 'start' }}>
---
>         <label htmlFor={id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'start' }}>
11c11
<                 type="checkbox"
---
>                 id={id} type="checkbox"
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const CheckBox = ({ checked, onChange, label }) => {
return (
<label style={{ display: 'flex', flexDirection: 'column', alignItems: 'start' }}>
{label}
<input
type="checkbox"
checked={checked}
onChange={onChange}
style={{ width: '2vh', height: '2vw' }}
/>
</label>
);
};
export const CheckBox = ({ checked, onChange, label, id }) => {
return (
<label htmlFor={id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'start' }}>
{label}
<input
id={id} type="checkbox"
checked={checked}
onChange={onChange}
style={{ width: '2vh', height: '2vw' }}
/>
</label>
);
};

52 changes: 52 additions & 0 deletions micro-frontends/sandbox-ui/packages/components/src/hoc/FormComposer/EnumBasedDropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import React from 'react';
import Select from 'react-select';


export const EnumBasedDropdown = ({ options, value, onChange }) => {
const handleChange = (selectedOption) => {
onChange(selectedOption.value);
};

const customStyles = {
control: (base) => ({
...base,
width: '100%',
boxSizing: 'border-box',
paddingLeft: 0,
outline: '0.125rem solid transparent',
outlineOffset: '0.125rem',
height: '2.5rem',
backgroundColor: '#fff',
fontStyle: 'normal',
fontFamily: 'Roboto',
fontSize: '1rem',
border: '0.063rem solid #787878',
color: '#363636',
lineHeight: '1.5rem',
borderRadius: 0,
}),
valueContainer: (base) => ({
...base
})
};

// Convert enum values to the format expected by react-select
const formattedOptions = options.map(option => ({
value: option,
label: option
}));

// Find the currently selected option
const selectedValue = formattedOptions.find(option => option.value === value);

return (
<div style={{ marginBottom: '1rem' }}>
<Select
value={selectedValue}
onChange={handleChange}
options={formattedOptions}
styles={customStyles} // Apply the custom styles
/>
</div>
);
};
39 changes: 2 additions & 37 deletions micro-frontends/sandbox-ui/packages/components/src/hoc/FormComposer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,45 +5,11 @@ import { getUpdatedUISchema } from "./formTabUtils";
import Stepper from "react-stepper-horizontal";
import useLastUpdatedField from "../../hooks/useLastUpdatedField";
import DigitUIComponents from "../../DigitUIComponents";
import { EnumBasedDropdown } from "./EnumBasedDropdown";
import { CheckBox } from "./CheckBox";

const { TextInput, Button } = DigitUIComponents;

const EnumBasedDropdown = ({ options, value, onChange }) => {
const handleChange = (event) => {
onChange(event.target.value);
};

return (
<div style={{ marginBottom: '10px' }}>
<select
className='digit-citizenCard-input'
value={value}
onChange={handleChange}
>
{options.map((option, index) => (
<option key={index} value={option}>
{option}
</option>
))}
</select>
</div>
);
};

const CheckBox = ({ checked, onChange, label }) => {
return (
<label style={{ display: 'flex', flexDirection: 'column', alignItems: 'start' }}>
{label}
<input
type="checkbox"
checked={checked}
onChange={onChange}
style={{ width: '2vh', height: '2vw' }}
/>
</label>
);
};


const RenderIndividualField = React.memo(
({ name, property, uiWidget, control, errors, customWidgets }) => {
Expand Down Expand Up @@ -234,7 +200,6 @@ const RenderField = ({
}
return null;
}
console.log(property, " pppppppppppppppppp")
if (property.type === "array") {
return (
<RenderArrayField
Expand Down