Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: Connect drop down to redux state to fetch options dynamically (#10192)

Browse Source 
* Connect drop down control to redux state to fetch options dynamically when needed

* Moved whole selection logic to mapStateToProps

* Removing unused imports
This commit is contained in:
Ayush Pahwa 2022-01-06 15:33:20 +05:30 committed by GitHub
parent ed490304d9
commit eec4527af4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/client/src/components/formControls/DropDownControl.tsx
View File

@ -9,6 +9,8 @@ import {
WrappedFieldInputProps, WrappedFieldInputProps,
WrappedFieldMetaProps, WrappedFieldMetaProps,
} from "redux-form"; } from "redux-form";
import { connect } from "react-redux";
import { AppState } from "reducers";
const DropdownSelect = styled.div` const DropdownSelect = styled.div`
font-size: 14px; font-size: 14px;
@ -44,14 +46,16 @@ function renderDropdown(props: {
input?: WrappedFieldInputProps; input?: WrappedFieldInputProps;
meta?: WrappedFieldMetaProps; meta?: WrappedFieldMetaProps;
props: DropDownControlProps & { width?: string }; props: DropDownControlProps & { width?: string };
options: { label: string; value: string }[]; fetchOptionsCondtionally: boolean;
formName: string;
dropDownOptions: DropdownOption[];
}): JSX.Element { }): JSX.Element {
let selectedValue = props.input?.value; let selectedValue = props.input?.value;
if (_.isUndefined(props.input?.value)) { if (_.isUndefined(props.input?.value)) {
selectedValue = props?.props?.initialValue; selectedValue = props?.props?.initialValue;
} }
const selectedOption = const selectedOption =
props?.options.find( props.dropDownOptions.find(
(option: DropdownOption) => option.value === selectedValue, (option: DropdownOption) => option.value === selectedValue,
) || {}; ) || {};
return ( return (
@ -64,7 +68,7 @@ function renderDropdown(props: {
isMultiSelect={props?.props?.isMultiSelect} isMultiSelect={props?.props?.isMultiSelect}
onSelect={props.input?.onChange} onSelect={props.input?.onChange}
optionWidth="50vh" optionWidth="50vh"
options={props.options} options={props.dropDownOptions}
placeholder={props.props?.placeholderText} placeholder={props.props?.placeholderText}
selected={selectedOption} selected={selectedOption}
showLabelOnly showLabelOnly
@ -81,6 +85,25 @@ export interface DropDownControlProps extends ControlProps {
isMultiSelect?: boolean; isMultiSelect?: boolean;
isDisabled?: boolean; isDisabled?: boolean;
isSearchable?: boolean; isSearchable?: boolean;
fetchOptionsCondtionally?: boolean;
} }
const mapStateToProps = (state: AppState, ownProps: DropDownControlProps) => {
let dropDownOptions: DropdownOption[] = [];
export default DropDownControl; // if the component has an option enabled to fetch the options dynamically,
if (ownProps.fetchOptionsCondtionally) {
// TODO: this is just a test, will be updated once the fetchDynamicFormData is implemented
dropDownOptions = [
{ label: "Test1", value: "SINGLE" },
{ label: "Test2", value: "ALL" },
];
} else {
dropDownOptions = ownProps.options;
}
return {
dropDownOptions,
};
};
export default connect(mapStateToProps)(DropDownControl);