diff --git a/app/client/package.json b/app/client/package.json index 36769ab170..df4967a0f7 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -14,6 +14,7 @@ "@blueprintjs/timezone": "^3.6.0", "@craco/craco": "^5.6.1", "@sentry/browser": "^5.6.3", + "@types/faker": "^4.1.7", "@types/fontfaceobserver": "^0.0.6", "@types/lodash": "^4.14.120", "@types/moment-timezone": "^0.5.10", @@ -34,6 +35,7 @@ "@uppy/webcam": "^1.3.1", "axios": "^0.18.0", "eslint": "^6.4.0", + "faker": "^4.1.0", "flow-bin": "^0.91.0", "fontfaceobserver": "^2.1.0", "fuse.js": "^3.4.5", diff --git a/app/client/src/assets/icons/control/more-vertical.svg b/app/client/src/assets/icons/control/more-vertical.svg new file mode 100755 index 0000000000..72b6deddf7 --- /dev/null +++ b/app/client/src/assets/icons/control/more-vertical.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/app/client/src/assets/icons/control/view.svg b/app/client/src/assets/icons/control/view.svg index 1c207b68b7..abe8f8eed4 100644 --- a/app/client/src/assets/icons/control/view.svg +++ b/app/client/src/assets/icons/control/view.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/app/client/src/components/designSystems/blueprint/FormDialogComponent.tsx b/app/client/src/components/designSystems/blueprint/FormDialogComponent.tsx new file mode 100644 index 0000000000..0d4650f05f --- /dev/null +++ b/app/client/src/components/designSystems/blueprint/FormDialogComponent.tsx @@ -0,0 +1,66 @@ +import React, { ReactNode, useState, useEffect } from "react"; +import { connect } from "react-redux"; +import { submit } from "redux-form"; +import { Dialog, Classes, Button, Intent, Callout } from "@blueprintjs/core"; + +type FormDialogComponentProps = { + isOpen: boolean; + title: string; + onClose: () => void; + form: ReactNode; + isSubmitting: boolean; + submitIntent: string; + formName: string; + error?: string; + dispatch: Function; +}; + +export const FormDialogComponent = (props: FormDialogComponentProps) => { + const submitHandler = () => props.dispatch(submit(props.formName)); + const [isPristine, makePristine] = useState(true); + + const clearErrors = () => { + makePristine(true); + }; + + useEffect(() => { + if (props.error) { + makePristine(false); + } + }, [props.error]); + + return ( + + {props.error && !isPristine && ( + {props.error} + )} +
{props.form}
+
+
+
+
+ + ); +}; + +export default connect()(FormDialogComponent); diff --git a/app/client/src/components/editorComponents/ContextDropdown.tsx b/app/client/src/components/editorComponents/ContextDropdown.tsx new file mode 100644 index 0000000000..a0e454d791 --- /dev/null +++ b/app/client/src/components/editorComponents/ContextDropdown.tsx @@ -0,0 +1,84 @@ +import React, { ReactNode } from "react"; +import styled from "styled-components"; +import { ItemRenderer, Select } from "@blueprintjs/select"; +import { Button, MenuItem } from "@blueprintjs/core"; +import { DropdownOption } from "widgets/DropdownWidget"; +import { ControlIconName, ControlIcons } from "icons/ControlIcons"; +import { noop } from "utils/AppsmithUtils"; +import { Intent } from "constants/DefaultTheme"; + +export type ContextDropdownOption = DropdownOption & { + onSelect: (event: React.MouseEvent) => void; + intent?: Intent; +}; +const Dropdown = Select.ofType(); + +const StyledMenuItem = styled(MenuItem)` + &&&&.bp3-menu-item:hover { + background: ${props => props.theme.colors.primary}; + color: ${props => props.theme.colors.textOnDarkBG}; + } + &&&.bp3-menu-item.bp3-intent-danger:hover { + background: ${props => props.theme.colors.error}; + } +`; + +type ContextDropdownProps = { + options: ContextDropdownOption[]; + className: string; + toggle: { + type: "icon" | "button"; + icon?: ControlIconName; + text?: string; + placeholder?: string; + }; +}; + +export const ContextDropdown = (props: ContextDropdownProps) => { + let trigger: ReactNode; + if (props.toggle.type === "icon" && props.toggle.icon) + trigger = ControlIcons[props.toggle.icon](); + if (props.toggle.type === "button" && props.toggle.text) + trigger =