{
);
}
- getControlType(): ControlType {
+ static getControlType() {
return "ACTION_SELECTOR";
}
}
diff --git a/app/client/src/components/propertyControls/BaseControl.tsx b/app/client/src/components/propertyControls/BaseControl.tsx
index 78dbef6dfd..d108a15cdf 100644
--- a/app/client/src/components/propertyControls/BaseControl.tsx
+++ b/app/client/src/components/propertyControls/BaseControl.tsx
@@ -14,8 +14,6 @@ abstract class BaseControl extends Component<
if (!_.isNil(this.props.onPropertyChange))
this.props.onPropertyChange(propertyName, propertyValue);
}
-
- abstract getControlType(): ControlType;
}
export interface ControlBuilder {
diff --git a/app/client/src/components/propertyControls/ChartDataControl.tsx b/app/client/src/components/propertyControls/ChartDataControl.tsx
new file mode 100644
index 0000000000..dd37a89e73
--- /dev/null
+++ b/app/client/src/components/propertyControls/ChartDataControl.tsx
@@ -0,0 +1,210 @@
+import React from "react";
+import BaseControl, { ControlProps } from "./BaseControl";
+import {
+ ControlWrapper,
+ StyledInputGroup,
+ StyledPropertyPaneButton,
+} from "./StyledControls";
+import styled from "constants/DefaultTheme";
+import { FormIcons } from "icons/FormIcons";
+import { AnyStyledComponent } from "styled-components";
+import DynamicAutocompleteInput from "components/editorComponents/DynamicAutocompleteInput";
+
+const StyledOptionControlWrapper = styled(ControlWrapper)`
+ display: flex;
+ justify-content: flex-start;
+ padding: 0;
+ width: 100%;
+`;
+
+const StyledOptionControlInputGroup = styled(StyledInputGroup)`
+ margin-right: 2px;
+ width: 100%;
+ margin-bottom: 0;
+ &&& {
+ input {
+ border: none;
+ color: ${props => props.theme.colors.textOnDarkBG};
+ background: ${props => props.theme.colors.paneInputBG};
+ &:focus {
+ border: none;
+ color: ${props => props.theme.colors.textOnDarkBG};
+ background: ${props => props.theme.colors.paneInputBG};
+ }
+ }
+ }
+`;
+
+const StyledDynamicInput = styled.div`
+ width: 100%;
+ &&& {
+ input {
+ border: none;
+ color: ${props => props.theme.colors.textOnDarkBG};
+ background: ${props => props.theme.colors.paneInputBG};
+ &:focus {
+ border: none;
+ color: ${props => props.theme.colors.textOnDarkBG};
+ background: ${props => props.theme.colors.paneInputBG};
+ }
+ }
+ }
+`;
+
+const StyledDeleteIcon = styled(FormIcons.DELETE_ICON as AnyStyledComponent)`
+ padding: 0;
+ position: relative;
+ margin-left: 15px;
+ cursor: pointer;
+`;
+
+type RenderComponentProps = {
+ index: number;
+ item: {
+ seriesName: string;
+ data: Array<{
+ x: string;
+ y: string;
+ }>;
+ };
+ length: number;
+ deleteOption: Function;
+ updateOption: Function;
+};
+
+function DataControlComponent(props: RenderComponentProps) {
+ const { deleteOption, updateOption, item, index, length } = props;
+ return (
+
+ {length > 1 && (
+
+ ) => {
+ updateOption(index, "seriesName", event.target.value);
+ }}
+ defaultValue={item.seriesName}
+ />
+ {
+ deleteOption(index);
+ }}
+ />
+
+ )}
+
+ | string,
+ ) => {
+ let value = event;
+ if (typeof event !== "string") {
+ value = event.target.value;
+ }
+ updateOption(index, "data", value);
+ },
+ }}
+ meta={{
+ error: "",
+ touched: true,
+ }}
+ theme={"DARK"}
+ singleLine={false}
+ placeholder=""
+ />
+
+
+ );
+}
+
+class ChartDataControl extends BaseControl {
+ render() {
+ const chartData: Array<{
+ seriesName: string;
+ data: Array<{
+ x: string;
+ y: string;
+ }>;
+ }> = this.props.propertyValue || [];
+ const dataLength = chartData.length;
+ return (
+
+ {chartData.map((data, index) => {
+ return (
+
+ );
+ })}
+
+
+ );
+ }
+
+ deleteOption = (index: number) => {
+ const chartData: object[] = this.props.propertyValue.slice();
+ chartData.splice(index, 1);
+ this.updateProperty(this.props.propertyName, chartData);
+ };
+
+ updateOption = (
+ index: number,
+ propertyName: string,
+ updatedValue: string,
+ ) => {
+ const chartData: Array<{
+ seriesName: string;
+ data: Array<{
+ x: string;
+ y: string;
+ }>;
+ }> = this.props.propertyValue;
+ this.updateProperty(
+ this.props.propertyName,
+ chartData.map((item, i) => {
+ if (index === i) {
+ if (propertyName === "seriesName") {
+ item.seriesName = updatedValue;
+ } else {
+ item.data = JSON.parse(updatedValue);
+ }
+ }
+ return item;
+ }),
+ );
+ };
+
+ addOption = () => {
+ const chartData: Array<{
+ seriesName: string;
+ data: Array<{
+ x: string;
+ y: string;
+ }>;
+ }> = this.props.propertyValue ? this.props.propertyValue.slice() : [];
+ chartData.push({ seriesName: "", data: [{ x: "", y: "" }] });
+ this.updateProperty(this.props.propertyName, chartData);
+ };
+
+ static getControlType() {
+ return "CHART_DATA";
+ }
+}
+
+export default ChartDataControl;
diff --git a/app/client/src/components/propertyControls/CodeEditorControl.tsx b/app/client/src/components/propertyControls/CodeEditorControl.tsx
index 234fd0b33f..f7ee11926d 100644
--- a/app/client/src/components/propertyControls/CodeEditorControl.tsx
+++ b/app/client/src/components/propertyControls/CodeEditorControl.tsx
@@ -1,6 +1,5 @@
import React, { ChangeEvent } from "react";
import BaseControl, { ControlProps } from "./BaseControl";
-import { ControlType } from "constants/PropertyControlConstants";
import DynamicAutocompleteInput from "components/editorComponents/DynamicAutocompleteInput";
import { EventOrValueHandler } from "redux-form";
class CodeEditorControl extends BaseControl {
@@ -25,7 +24,7 @@ class CodeEditorControl extends BaseControl {
this.updateProperty(this.props.propertyName, value);
};
- getControlType(): ControlType {
+ static getControlType() {
return "CODE_EDITOR";
}
}
diff --git a/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx b/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx
index ce6617e6be..67706b1e69 100644
--- a/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx
+++ b/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx
@@ -2,13 +2,12 @@ import React from "react";
import BaseControl, { ControlProps } from "./BaseControl";
import { StyledPropertyPaneButton } from "./StyledControls";
-import { ControlType } from "constants/PropertyControlConstants";
import { generateReactKey } from "utils/generators";
import styled from "constants/DefaultTheme";
import { AnyStyledComponent } from "styled-components";
import { FormIcons } from "icons/FormIcons";
import { InputText } from "components/propertyControls/InputTextControl";
-import DynamicActionCreator from "components/editorComponents/DynamicActionCreator";
+import { ActionCreator } from "components/editorComponents/actioncreator/ActionCreator";
export interface ColumnAction {
label: string;
@@ -54,7 +53,7 @@ class ColumnActionSelectorControl extends BaseControl<
/>
- props.theme.colors.paneTextBG};
+ color: ${props => props.theme.colors.textOnDarkBG};
+ font-size: ${props => props.theme.fontSizes[3]}px;
+ box-shadow: none;
+ }
+ }
+`;
+
+const LabelWrapper = styled.div`
+ color: ${props => props.theme.colors.paneText};
+ margin-bottom: 4px;
+ font-size: ${props => props.theme.fontSizes[3]}px;
+ margin-top: 10px;
+`;
+
+type DatePickerContorlState = {
+ date: Date;
+ dateValue: number;
+ isTimeEnabled: boolean;
+ timezone: string;
+};
+
+class DatePickerControl extends BaseControl<
+ DatePickerControlProps,
+ DatePickerContorlState
+> {
+ constructor(props: DatePickerControlProps) {
+ super(props);
+ const timezone =
+ this.props.propertyValue && this.props.propertyValue.timezone
+ ? this.props.propertyValue.timezone
+ : moment.tz.guess();
+ const isTimeEnabled =
+ this.props.propertyValue && this.props.propertyValue.isTimeEnabled
+ ? this.props.propertyValue.isTimeEnabled
+ : false;
+ const dateValue =
+ this.props.propertyValue && this.props.propertyValue.dateValue
+ ? this.props.propertyValue.dateValue
+ : new Date().getTime();
+ const offset = this.getOffset(timezone, dateValue);
+ const date = new Date(dateValue + offset);
+ this.state = {
+ date,
+ timezone,
+ dateValue,
+ isTimeEnabled,
+ };
+ }
+
+ componentDidMount() {
+ const timezone =
+ this.props.propertyValue && this.props.propertyValue.timezone
+ ? this.props.propertyValue.timezone
+ : moment.tz.guess();
+ const isTimeEnabled =
+ this.props.propertyValue && this.props.propertyValue.isTimeEnabled
+ ? this.props.propertyValue.isTimeEnabled
+ : false;
+ const dateValue =
+ this.props.propertyValue && this.props.propertyValue.dateValue
+ ? this.props.propertyValue.dateValue
+ : new Date().getTime();
+ const offset = this.getOffset(timezone, dateValue);
+ const date = new Date(dateValue + offset);
+ this.setState({
+ date,
+ timezone,
+ dateValue,
+ isTimeEnabled,
+ });
+ }
+
+ getOffset = (timezone: string, timeStamp: number) => {
+ return moment.tz.zone(timezone)!.utcOffset(timeStamp) * 60 * 1000;
+ };
-class DatePickerControl extends BaseControl {
render() {
+ const now = moment();
+ const year = now.get("year");
+ const date = now.get("date");
+ const month = now.get("month");
+ const minDate = now.clone().set({ month, date: date - 1, year: year - 20 });
+ const maxDate = now.clone().set({ month, date: date + 1, year: year + 20 });
+
return (
-
+
+
+ {TIMEZONE}
+
+ {ENABLE_TIME}
+
+
);
}
- formatDate = (date: Date): string => {
- return moment(date).format("DD/MM/YYYY");
+ onToggle = () => {
+ const { isTimeEnabled } = this.state;
+ this.setState({ isTimeEnabled: !isTimeEnabled }, () => {
+ this.updatePropertyValue();
+ });
};
- parseDate = (dateStr: string): Date => {
- return moment(dateStr).toDate();
+ onTimeZoneSelected = (timezone: string): void => {
+ const { dateValue } = this.state;
+ const offset = this.getOffset(timezone, dateValue);
+ const dateVisible = new Date(dateValue + offset);
+ this.setState({ timezone: timezone, date: dateVisible }, () => {
+ this.updatePropertyValue();
+ });
};
onDateSelected = (date: Date): void => {
- this.updateProperty(this.props.propertyName, date);
+ const { timezone } = this.state;
+ const offset = this.getOffset(timezone, date.getTime());
+ const dateValue = new Date(date.getTime() - offset).getTime();
+ this.setState({ date: date, dateValue: dateValue }, () => {
+ this.updatePropertyValue();
+ });
};
- getControlType(): ControlType {
+ updatePropertyValue = () => {
+ const { dateValue, isTimeEnabled, timezone } = this.state;
+ this.updateProperty(this.props.propertyName, {
+ timezone: timezone,
+ dateValue: dateValue,
+ isTimeEnabled: isTimeEnabled,
+ });
+ };
+
+ formatDate = (date: Date): string => {
+ let dateFormat = "DD/MM/YYYY";
+ if (this.state.isTimeEnabled) {
+ dateFormat = "DD/MM/YYYY HH:mm";
+ }
+ return moment(date).format(dateFormat);
+ };
+
+ parseDate = (dateStr: string): Date => {
+ const date = moment(dateStr).toDate();
+ return date;
+ };
+
+ static getControlType() {
return "DATE_PICKER";
}
}
export interface DatePickerControlProps extends ControlProps {
placeholderText: string;
- propertyValue: Date;
- enableTimePicker: boolean;
+ propertyValue: {
+ timezone: string;
+ dateValue: number;
+ isTimeEnabled: boolean;
+ };
}
export default DatePickerControl;
diff --git a/app/client/src/components/propertyControls/DropDownControl.tsx b/app/client/src/components/propertyControls/DropDownControl.tsx
index 46ef56d48a..9aba458854 100644
--- a/app/client/src/components/propertyControls/DropDownControl.tsx
+++ b/app/client/src/components/propertyControls/DropDownControl.tsx
@@ -4,7 +4,6 @@ import { Button, MenuItem } from "@blueprintjs/core";
import { IItemRendererProps } from "@blueprintjs/select";
import { StyledDropDown, StyledDropDownContainer } from "./StyledControls";
import { DropdownOption } from "widgets/DropdownWidget";
-import { ControlType } from "constants/PropertyControlConstants";
class DropDownControl extends BaseControl {
render() {
@@ -57,7 +56,7 @@ class DropDownControl extends BaseControl {
return selectedOption.value === this.props.propertyValue;
};
- getControlType(): ControlType {
+ static getControlType() {
return "DROP_DOWN";
}
}
diff --git a/app/client/src/components/propertyControls/InputTextControl.tsx b/app/client/src/components/propertyControls/InputTextControl.tsx
index 208b0446c0..e87f9ac006 100644
--- a/app/client/src/components/propertyControls/InputTextControl.tsx
+++ b/app/client/src/components/propertyControls/InputTextControl.tsx
@@ -2,7 +2,6 @@ import React from "react";
import BaseControl, { ControlProps } from "./BaseControl";
import { StyledDynamicInput } from "./StyledControls";
import { InputType } from "widgets/InputWidget";
-import { ControlType } from "constants/PropertyControlConstants";
import DynamicAutocompleteInput from "components/editorComponents/DynamicAutocompleteInput";
export function InputText(props: {
@@ -75,7 +74,7 @@ class InputTextControl extends BaseControl {
this.updateProperty(this.props.propertyName, value);
};
- getControlType(): ControlType {
+ static getControlType() {
return "INPUT_TEXT";
}
}
diff --git a/app/client/src/components/propertyControls/LocationSearchControl.tsx b/app/client/src/components/propertyControls/LocationSearchControl.tsx
new file mode 100644
index 0000000000..56a9b0da56
--- /dev/null
+++ b/app/client/src/components/propertyControls/LocationSearchControl.tsx
@@ -0,0 +1,95 @@
+import React, { MutableRefObject } from "react";
+import BaseControl, { ControlProps } from "./BaseControl";
+import styled from "styled-components";
+import SearchBox from "react-google-maps/lib/components/places/SearchBox";
+import StandaloneSearchBox from "react-google-maps/lib/components/places/StandaloneSearchBox";
+const { compose, withProps, lifecycle } = require("recompose");
+const { withScriptjs } = require("react-google-maps");
+
+const StyledInput = styled.input`
+ box-sizing: border-box;
+ border: 1px solid transparent;
+ width: 100%;
+ height: 32px;
+ padding: 0 5px;
+ border-radius: 3px;
+ font-size: 14px;
+ outline: none;
+ text-overflow: ellipses;
+ background: #272821;
+ color: ${props => props.theme.colors.textOnDarkBG};
+`;
+
+interface StandaloneSearchBoxProps {
+ onSearchBoxMounted: (ref: SearchBoxRef) => void;
+ onPlacesChanged: () => void;
+}
+
+type SearchBoxRef = MutableRefObject;
+
+const PlacesWithStandaloneSearchBox = compose(
+ withProps({
+ googleMapURL:
+ "https://maps.googleapis.com/maps/api/js?key=AIzaSyC2H_twoNbEKMm9Q0nYAh7715Dplg2asCI&v=3.exp&libraries=geometry,drawing,places",
+ loadingElement: ,
+ containerElement: ,
+ }),
+ lifecycle({
+ componentWillMount() {
+ let searchBox: SearchBoxRef = React.createRef();
+ this.setState({
+ places: [],
+ onSearchBoxMounted: (ref: SearchBoxRef) => {
+ searchBox = ref;
+ },
+ onPlacesChanged: () => {
+ if (searchBox === null) return;
+ if (searchBox.current === null) return;
+ if (searchBox.current.getPlaces === null) return;
+ const places = searchBox.current.getPlaces();
+ this.setState({
+ places,
+ });
+ this.props.onLocationSelection(places);
+ },
+ });
+ },
+ }),
+ withScriptjs,
+)((props: any) => (
+
+
+
+
+
+));
+
+class LocationSearchControl extends BaseControl {
+ onLocationSelection = (
+ places: Array<{
+ geometry: { location: { lat: () => number; lng: () => number } };
+ }>,
+ ) => {
+ const location = places[0].geometry.location;
+ const lat = location.lat();
+ const lng = location.lng();
+ const value = { lat, lng };
+ this.updateProperty(this.props.propertyName, value);
+ };
+ render() {
+ return (
+
+ );
+ }
+
+ static getControlType() {
+ return "LOCATION_SEARCH";
+ }
+}
+
+export default LocationSearchControl;
diff --git a/app/client/src/components/propertyControls/MultiSelectControl.tsx b/app/client/src/components/propertyControls/MultiSelectControl.tsx
index d0c54229d8..ba41b1236a 100644
--- a/app/client/src/components/propertyControls/MultiSelectControl.tsx
+++ b/app/client/src/components/propertyControls/MultiSelectControl.tsx
@@ -1,6 +1,5 @@
import React from "react";
import BaseControl, { ControlProps } from "./BaseControl";
-import { ControlType } from "constants/PropertyControlConstants";
import { MenuItem } from "@blueprintjs/core";
import { IItemRendererProps } from "@blueprintjs/select";
import { StyledMultiSelectDropDown } from "./StyledControls";
@@ -81,7 +80,7 @@ class MultiSelectControl extends BaseControl {
);
};
- getControlType(): ControlType {
+ static getControlType() {
return "MULTI_SELECT";
}
}
diff --git a/app/client/src/components/propertyControls/MultiSwitchControl.tsx b/app/client/src/components/propertyControls/MultiSwitchControl.tsx
new file mode 100644
index 0000000000..0e67483212
--- /dev/null
+++ b/app/client/src/components/propertyControls/MultiSwitchControl.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import BaseControl, { ControlProps } from "./BaseControl";
+import { IconName, ButtonGroup, Button, Classes } from "@blueprintjs/core";
+import { IconNames } from "@blueprintjs/icons";
+const iconNames: string[] = Object.values({ ...IconNames });
+
+class MultiSwitchControl extends BaseControl {
+ renderOption = (option: SwitchOption) => {
+ const isIcon: boolean =
+ !!option.icon && iconNames.indexOf(option.icon) > -1;
+ return (
+