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

light and dark theme added in dropdown component

Browse Source
This commit is contained in:
vicky_primathon.in 2020-05-19 22:54:38 +05:30
parent 77a94695f0
commit c6a883d965
10 changed files with 117 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/client/src/components/editorComponents/Button.tsx
View File

@ -21,6 +21,7 @@ const buttonStyles = css<{
intent?: Intent;
filled?: string;
fluid?: boolean;
themeType?: string;
}>`
${BlueprintButtonIntentsCSS}
&&&& {
@ -33,14 +34,18 @@ const buttonStyles = css<{
props.filled || props.outline ? "inherit" : "transparent"};
width: ${props => (props.fluid ? "100%" : "auto")};
color: ${props =>
props.themeType === "dark"
? props.theme.colors.textOnDarkBG
: props.theme.colors.textDefault};
}
${props => (props.outline ? outline : "")}
`;
const StyledButton = styled(BlueprintButton)<{
outline?: string;
intent?: Intent;
filled?: string;
themeType?: string;
}>`
${buttonStyles}
`;
@ -48,6 +53,7 @@ const StyledAnchorButton = styled(BlueprintAnchorButton)<{
outline?: string;
intent?: Intent;
filled?: string;
themeType?: string;
}>`
${buttonStyles}
`;
@ -67,9 +73,11 @@ export type ButtonProps = {
type?: "button" | "submit" | "reset";
className?: string;
fluid?: boolean;
themeType?: string;
};
export const Button = (props: ButtonProps) => {
console.log("theme", props.themeType);
const icon: IconName | undefined =
props.icon &&
(props.iconAlignment === Directions.LEFT ||
@ -94,7 +102,9 @@ export const Button = (props: ButtonProps) => {
type: props.type,
className: props.className,
fluid: props.fluid ? props.fluid.toString() : undefined,
themeType: props.themeType ? props.themeType : undefined,
};
// console.log("themeType", baseProps.themeType);
if (props.href) {
return (
<StyledAnchorButton

28
app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx
View File

@ -264,13 +264,12 @@ export type DynamicAutocompleteInputProps = {
link?: string;
baseMode?: string | object;
setMaxHeight?: boolean;
defaultValue?: string;
};
type Props = ReduxStateProps &
DynamicAutocompleteInputProps & {
input: Partial<WrappedFieldInputProps>;
} & {
forwardRef: React.RefObject<HTMLTextAreaElement>;
};
type State = {
@ -288,11 +287,10 @@ class DynamicAutocompleteInput extends Component<Props, State> {
isFocused: false,
autoCompleteVisible: false,
};
console.log("ref inside DynamicAutoComplete", props.forwardRef);
}
componentDidMount(): void {
if (this.props.forwardRef.current) {
if (this.textArea.current) {
const options: EditorConfiguration = {};
if (this.props.theme === "DARK") options.theme = "monokai";
if (!this.props.input.onChange || this.props.disabled) {
@ -304,7 +302,7 @@ class DynamicAutocompleteInput extends Component<Props, State> {
"Ctrl-Space": "autocomplete",
};
if (!this.props.allowTabIndent) extraKeys["Tab"] = false;
this.editor = CodeMirror.fromTextArea(this.props.forwardRef.current, {
this.editor = CodeMirror.fromTextArea(this.textArea.current, {
mode: this.props.mode || { name: "javascript", globalVars: true },
viewportMargin: 10,
tabSize: 2,
@ -368,6 +366,19 @@ class DynamicAutocompleteInput extends Component<Props, State> {
}
}
}
if (prevProps.defaultValue !== this.props.defaultValue) {
const cursorPosition = this.props.defaultValue
? this.props.defaultValue.length + 1
: 1;
this.editor.setValue(
this.props.defaultValue ? this.props.defaultValue : "",
);
this.editor.focus();
this.editor.setCursor({
line: 1,
ch: cursorPosition,
});
}
}
handleEditorFocus = () => {
@ -485,7 +496,6 @@ class DynamicAutocompleteInput extends Component<Props, State> {
hasError && this.state.isFocused && !this.state.autoCompleteVisible;
}
console.log(className);
console.log("textarea ref", this.props.forwardRef);
return (
<ErrorTooltip message={meta ? meta.error : ""} isOpen={showError}>
<Wrapper
@ -511,7 +521,7 @@ class DynamicAutocompleteInput extends Component<Props, State> {
)}
<textarea
ref={this.props.forwardRef}
ref={this.textArea}
{..._.omit(this.props.input, ["onChange", "value"])}
defaultValue={input.value}
placeholder={this.props.placeholder}
@ -544,6 +554,4 @@ const mapStateToProps = (state: AppState): ReduxStateProps => ({
dynamicData: getDataTreeForAutocomplete(state),
});
export default connect(mapStateToProps, null, null, {
forwardRef: true,
})(DynamicAutocompleteInput);
export default connect(mapStateToProps)(DynamicAutocompleteInput);

43
app/client/src/components/editorComponents/LightningMenu/index.tsx
View File

@ -16,7 +16,12 @@ const getApiOptions = (apis: RestAction[]) => ({
options: [
{
content: (
<Button text="Create new API" icon="plus" iconAlignment="left" />
<Button
text="Create new API"
icon="plus"
iconAlignment="left"
themeType="dark"
/>
),
},
],
@ -33,6 +38,7 @@ const getApiOptions = (apis: RestAction[]) => ({
},
openDirection: Directions.RIGHT,
openOnHover: false,
themeType: "dark",
});
const getQueryOptions = (queries: RestAction[]) => ({
@ -42,7 +48,12 @@ const getQueryOptions = (queries: RestAction[]) => ({
options: [
{
content: (
<Button text="Create new Query" icon="plus" iconAlignment="left" />
<Button
text="Create new Query"
icon="plus"
iconAlignment="left"
themeType="dark"
/>
),
},
],
@ -59,6 +70,7 @@ const getQueryOptions = (queries: RestAction[]) => ({
},
openDirection: Directions.RIGHT,
openOnHover: false,
themeType: "dark",
});
const lightningMenuOptions = (
@ -70,11 +82,11 @@ const lightningMenuOptions = (
{
options: [
{
content: "PlainText/HTML/JS",
content: "Plain Text",
disabled: false,
shouldCloseDropdown: true,
onSelect: () => {
updatePropertyValue("test");
updatePropertyValue("Plain Text");
},
},
{
@ -87,6 +99,27 @@ const lightningMenuOptions = (
disabled: false,
shouldCloseDropdown: false,
},
// {
// content: <CustomizedDropdown {...getQueryOptions(queries)} />,
// disabled: false,
// shouldCloseDropdown: false,
// },
{
content: "JS",
disabled: false,
shouldCloseDropdown: true,
onSelect: () => {
updatePropertyValue("{{}}");
},
},
{
content: "HTML",
disabled: false,
shouldCloseDropdown: true,
onSelect: () => {
updatePropertyValue("<p></p>");
},
},
],
},
],
@ -95,6 +128,7 @@ const lightningMenuOptions = (
trigger: {
text: "",
},
themeType: "dark",
});
type LightningMenuProps = {
@ -109,6 +143,7 @@ export const LightningMenu = (props: LightningMenuProps) => {
action => action.config.pageId === currentPageId,
);
});
// console.log("actions", actions);
const apis = actions
.filter(action => action.config.pluginType === "API")
.map(action => action.config);

1
app/client/src/components/propertyControls/ChartDataControl.tsx
View File

@ -113,7 +113,6 @@ function DataControlComponent(props: RenderComponentProps) {
theme={"DARK"}
singleLine={false}
placeholder=""
forwardRef={React.createRef<HTMLTextAreaElement>()}
/>
</StyledDynamicInput>
</StyledOptionControlWrapper>

1
app/client/src/components/propertyControls/CodeEditorControl.tsx
View File

@ -14,7 +14,6 @@ class CodeEditorControl extends BaseControl<ControlProps> {
touched: true,
}}
singleLine={false}
forwardRef={React.createRef<HTMLTextAreaElement>()}
/>
);
}

32
app/client/src/components/propertyControls/InputTextControl.tsx
View File

@ -27,10 +27,16 @@ export function InputText(props: {
isValid: boolean;
validationMessage?: string;
placeholder?: string;
innerRef?: React.Ref<HTMLTextAreaElement>;
defaultValue?: string;
}) {
const { validationMessage, value, isValid, onChange, placeholder } = props;
console.log("ref inside InputText", props.innerRef);
const {
validationMessage,
value,
isValid,
onChange,
placeholder,
defaultValue,
} = props;
return (
<StyledDynamicInput>
<DynamicAutocompleteInput
@ -45,25 +51,18 @@ export function InputText(props: {
theme={"DARK"}
singleLine={false}
placeholder={placeholder}
forwardRef={props.innerRef as React.RefObject<HTMLTextAreaElement>}
defaultValue={defaultValue}
/>
</StyledDynamicInput>
);
}
class InputTextControl extends BaseControl<InputControlProps> {
private inputElement: React.RefObject<HTMLTextAreaElement> = React.createRef<
HTMLTextAreaElement
>();
state = {
defaultValue: "",
};
updatePropertyValue = (value: string) => {
console.log(this.inputElement);
if (this.inputElement.current) {
console.log(this.inputElement.current);
const editor = CodeMirror.fromTextArea(this.inputElement.current);
console.log("editor", editor);
editor.setValue("value");
}
this.setState({ defaultValue: value });
};
render() {
@ -74,7 +73,6 @@ class InputTextControl extends BaseControl<InputControlProps> {
label,
placeholderText,
} = this.props;
console.log("ref inside InputTextControl", this.inputElement);
return (
<InputControlWrapper>
<Suspense fallback={<div />}>
@ -87,7 +85,7 @@ class InputTextControl extends BaseControl<InputControlProps> {
isValid={isValid}
validationMessage={validationMessage}
placeholder={placeholderText}
innerRef={this.inputElement}
defaultValue={this.state.defaultValue}
/>
</InputControlWrapper>
);

2
app/client/src/constants/Colors.tsx
View File

@ -43,6 +43,8 @@ export const Colors: Record<string, string> = {
BLUE_CHARCOAL: "#23292E",
TROUT: "#4C565E",
JAFFA_DARK: "#EF7541",
SOLID_MERCURY: "#E5E5E5",
TROUT_DARK: "#535B62",
};
export type Color = typeof Colors[keyof typeof Colors];

16
app/client/src/constants/DefaultTheme.tsx
View File

@ -275,6 +275,7 @@ export type Theme = {
hoverText: Color;
inActiveBG: Color;
inActiveText: Color;
border: Color;
};
};
authCard: {
@ -421,15 +422,16 @@ export const theme: Theme = {
dropdown: {
light: {
hoverBG: Colors.GREEN,
hoverText: Colors.textOnDarkBG,
inActiveBG: Colors.GEYSER_LIGHT,
inActiveText: Colors.GEYSER_LIGHT,
hoverText: Colors.WHITE,
inActiveBG: Colors.WHITE,
inActiveText: Colors.BLACK_PEARL,
},
dark: {
hoverBG: Colors.GEYSER_LIGHT,
hoverText: Colors.GEYSER_LIGHT,
inActiveBG: Colors.GEYSER_LIGHT,
inActiveText: Colors.GEYSER_LIGHT,
hoverBG: Colors.TROUT_DARK,
hoverText: Colors.WHITE,
inActiveBG: Colors.BLUE_CHARCOAL,
inActiveText: Colors.WHITE,
border: Colors.TROUT_DARK,
},
},
authCard: {

21
app/client/src/pages/common/CustomizedDropdown/StyledComponents.tsx
View File

@ -18,16 +18,23 @@ export const DropdownTrigger = styled.div`
outline: 0;
span {
color: inherit;
font-weight: 400;
}
&:hover {
background: inherit;
}
}
`;
export const DropdownContent = styled.div`
export const DropdownContent = styled.div<{ themeType: string }>`
&&& * {
font-size: ${props => props.theme.fontSizes[3]}px;
}
border: ${props => (props.themeType === "dark" ? "1px solid" : "")};
border-color: ${props =>
props.themeType === "dark"
? props.theme.dropdown[props.themeType].border
: ""};
background: ${props => props.theme.dropdown[props.themeType].inActiveBG};
`;
export const DropdownContentSection = styled.div<{ stick: boolean }>`
@ -56,13 +63,12 @@ export const DropdownContentSection = styled.div<{ stick: boolean }>`
}
`;
export const highlightOption = css<{ intent?: Intent }>`
color: ${props => props.theme.colors.textOnDarkBG};
export const highlightOption = css<{ intent?: Intent; themeType: string }>`
text-decoration: none;
background: ${props =>
props.intent ? IntentColors[props.intent] : IntentColors.primary};
color: ${props => props.theme.dropdown[props.themeType].hoverText};
background: ${props => props.theme.dropdown[props.themeType].hoverBG};
* {
color: ${props => props.theme.colors.textOnDarkBG};
color: ${props => props.theme.dropdown[props.themeType].hoverText};
}
`;
@ -70,6 +76,7 @@ export const Option = styled.div<{
intent?: Intent;
active?: boolean;
disabled?: boolean;
themeType: string;
}>`
padding: 8px 16px;
min-width: 200px;
@ -79,6 +86,8 @@ export const Option = styled.div<{
margin: 0;
}
cursor: pointer;
background: ${props => props.theme.dropdown[props.themeType].inActiveBG};
color: ${props => props.theme.dropdown[props.themeType].inActiveText};
&:hover {
${props => (!props.disabled ? highlightOption : ``)};
}

11
app/client/src/pages/common/CustomizedDropdown/index.tsx
View File

@ -45,6 +45,7 @@ export type CustomizedDropdownProps = {
openDirection: Direction;
openOnHover?: boolean;
usePortal?: boolean;
themeType?: string;
};
const getIcon = (icon?: string, intent?: Intent) => {
@ -71,7 +72,7 @@ const getIcon = (icon?: string, intent?: Intent) => {
const getContentSection = (
section: CustomizedDropdownOptionSection,
theme: Theme,
themeType: string,
) => {
return (
<React.Fragment>
@ -87,6 +88,7 @@ const getContentSection = (
onClick={option.onSelect}
active={!!option.active}
disabled={!!option.disabled}
themeType={themeType}
>
{option.content}
</Option>
@ -99,6 +101,7 @@ const getContentSection = (
export const CustomizedDropdown = (
props: CustomizedDropdownProps & { theme: Theme },
) => {
const themeType = props.themeType ? props.themeType : "light";
const icon = getIcon(props.trigger.icon, props.trigger.intent);
const trigger = (
<React.Fragment>
@ -112,13 +115,15 @@ export const CustomizedDropdown = (
iconAlignment={Directions.RIGHT}
text={props.trigger.text}
intent={props.trigger.intent}
themeType={props.themeType}
/>
)}
</React.Fragment>
);
const content = props.sections.map((section, index) => (
<DropdownContentSection key={index} stick={!!section.isSticky}>
{getContentSection(section, props.theme)}
{getContentSection(section, themeType)}
</DropdownContentSection>
));
return (
@ -137,7 +142,7 @@ export const CustomizedDropdown = (
enforceFocus={false}
>
<DropdownTrigger>{trigger}</DropdownTrigger>
<DropdownContent>{content}</DropdownContent>
<DropdownContent themeType={themeType}>{content}</DropdownContent>
</Popover>
);
};