3a4d900235
* Adding blank components. * Adding Todo note for tree * Adding todo note for LighteningMenu * ads button component * Adding storybook support. * storybook integrated with button component * ads button component props completed * button component icon and loading logic implemented * button component completed * Added a text knob. * Adding default text for button. * Merging theme and other fixes. * Fixed info button. * Better types. * Adding background param to components. * Re-using vsariant for callount. * Added props for Text input. * Adding text component. * feedback changes added in button and icon component * type any removed in button component * function naming corrected * Changing empty string to null * Adding enum for DropdownDisplayType. * Change Spinner path * Fixing spinner issues. Co-authored-by: Rohit Kumawat <rohit.kumawat@primathon.in>
95 lines
2.5 KiB
TypeScript
95 lines
2.5 KiB
TypeScript
import React from "react";
|
|
import BaseControl, { ControlProps } from "./BaseControl";
|
|
import styled from "styled-components";
|
|
import { MenuItem } from "@blueprintjs/core";
|
|
import { IItemRendererProps } from "@blueprintjs/select";
|
|
import DropdownField from "components/editorComponents/form/fields/DropdownField";
|
|
import { DropdownOption } from "widgets/DropdownWidget";
|
|
import { ControlType } from "constants/PropertyControlConstants";
|
|
import { theme } from "constants/DefaultTheme";
|
|
import FormLabel from "components/editorComponents/FormLabel";
|
|
|
|
const DropdownSelect = styled.div`
|
|
font-size: 14px;
|
|
width: 50vh;
|
|
`;
|
|
|
|
const customSelectStyles = {
|
|
option: (
|
|
styles: { [x: string]: any },
|
|
{ data, isDisabled, isFocused, isSelected }: any,
|
|
) => {
|
|
return {
|
|
...styles,
|
|
backgroundColor: isDisabled
|
|
? undefined
|
|
: isSelected
|
|
? theme.colors.primaryOld
|
|
: isFocused
|
|
? theme.colors.hover
|
|
: undefined,
|
|
":active": {
|
|
...styles[":active"],
|
|
backgroundColor:
|
|
!isDisabled &&
|
|
(isSelected ? theme.colors.primaryOld : theme.colors.hover),
|
|
},
|
|
};
|
|
},
|
|
};
|
|
|
|
class DropDownControl extends BaseControl<DropDownControlProps> {
|
|
render() {
|
|
const { configProperty, options, label, isRequired } = this.props;
|
|
|
|
return (
|
|
<div>
|
|
<FormLabel>
|
|
{label} {isRequired && "*"}
|
|
</FormLabel>
|
|
<DropdownSelect data-cy={configProperty}>
|
|
<DropdownField
|
|
placeholder=""
|
|
name={configProperty}
|
|
options={options}
|
|
customSelectStyles={customSelectStyles}
|
|
width={"50vh"}
|
|
/>
|
|
</DropdownSelect>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
renderItem = (option: DropdownOption, itemProps: IItemRendererProps) => {
|
|
if (!itemProps.modifiers.matchesPredicate) {
|
|
return null;
|
|
}
|
|
const isSelected: boolean = this.isOptionSelected(option);
|
|
return (
|
|
<MenuItem
|
|
className="single-select"
|
|
active={isSelected}
|
|
key={option.value}
|
|
onClick={itemProps.handleClick}
|
|
text={option.label}
|
|
/>
|
|
);
|
|
};
|
|
|
|
isOptionSelected = (selectedOption: DropdownOption) => {
|
|
return selectedOption.value === this.props.propertyValue;
|
|
};
|
|
|
|
getControlType(): ControlType {
|
|
return "DROP_DOWN";
|
|
}
|
|
}
|
|
|
|
export interface DropDownControlProps extends ControlProps {
|
|
options: DropdownOption[];
|
|
placeholderText: string;
|
|
propertyValue: string;
|
|
}
|
|
|
|
export default DropDownControl;
|