629 lines
18 KiB
TypeScript
629 lines
18 KiB
TypeScript
import React, { useState, useEffect, useCallback } from "react";
|
|
import styled from "styled-components";
|
|
import { Icon, InputGroup } from "@blueprintjs/core";
|
|
import { debounce } from "lodash";
|
|
import { AnyStyledComponent } from "styled-components";
|
|
|
|
import CustomizedDropdown from "pages/common/CustomizedDropdown";
|
|
import { Directions } from "utils/helpers";
|
|
import { Colors } from "constants/Colors";
|
|
import { ControlIcons } from "icons/ControlIcons";
|
|
import { Skin } from "constants/DefaultTheme";
|
|
import AutoToolTipComponent from "./cellComponents/AutoToolTipComponent";
|
|
import {
|
|
OperatorTypes,
|
|
Condition,
|
|
Operator,
|
|
ReactTableFilter,
|
|
} from "./Constants";
|
|
import { DropdownOption } from "./TableFilters";
|
|
import { RenderOptionWrapper } from "./TableStyledWrappers";
|
|
|
|
//TODO(abhinav): Fix this cross import between widgets
|
|
import DatePickerComponent from "widgets/DatePickerWidget2/component";
|
|
import { TimePrecision } from "widgets/DatePickerWidget2/constants";
|
|
import { ColumnTypes, ReadOnlyColumnTypes } from "../constants";
|
|
|
|
const StyledRemoveIcon = styled(
|
|
ControlIcons.CLOSE_CIRCLE_CONTROL as AnyStyledComponent,
|
|
)`
|
|
padding: 0;
|
|
position: relative;
|
|
cursor: pointer;
|
|
&.hide-icon {
|
|
display: none;
|
|
}
|
|
`;
|
|
|
|
const LabelWrapper = styled.div`
|
|
width: 95px;
|
|
margin-left: 10px;
|
|
color: ${Colors.BLUE_BAYOUX};
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
`;
|
|
|
|
const FieldWrapper = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
margin-top: 14px;
|
|
`;
|
|
|
|
const DropdownWrapper = styled.div<{ width: number }>`
|
|
width: ${(props) => props.width}px;
|
|
margin-left: 10px;
|
|
`;
|
|
|
|
const StyledInputGroup = styled(InputGroup)`
|
|
background: ${Colors.WHITE};
|
|
border: 1px solid #d3dee3;
|
|
box-sizing: border-box;
|
|
border-radius: 2px;
|
|
color: ${Colors.OXFORD_BLUE};
|
|
height: 32px;
|
|
width: 150px;
|
|
margin-left: 10px;
|
|
input {
|
|
box-shadow: none;
|
|
}
|
|
`;
|
|
|
|
const DatePickerWrapper = styled.div`
|
|
margin-left: 10px;
|
|
width: 150px;
|
|
`;
|
|
|
|
const DropdownTrigger = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 32px;
|
|
background: ${Colors.WHITE};
|
|
border: 1px solid #d3dee3;
|
|
box-sizing: border-box;
|
|
border-radius: 2px;
|
|
font-size: 14px;
|
|
padding: 5px 12px 7px;
|
|
color: ${Colors.OXFORD_BLUE};
|
|
cursor: pointer;
|
|
&&& span {
|
|
margin-right: 0;
|
|
}
|
|
`;
|
|
|
|
const AutoToolTipComponentWrapper = styled(AutoToolTipComponent)`
|
|
width: 100%;
|
|
color: ${Colors.OXFORD_BLUE};
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin-right: 5px;
|
|
`;
|
|
|
|
const typeOperatorsMap: Record<ReadOnlyColumnTypes, DropdownOption[]> = {
|
|
[ColumnTypes.TEXT]: [
|
|
{ label: "contains", value: "contains", type: "input" },
|
|
{ label: "does not contain", value: "doesNotContain", type: "input" },
|
|
{ label: "starts with", value: "startsWith", type: "input" },
|
|
{ label: "ends with", value: "endsWith", type: "input" },
|
|
{ label: "is exactly", value: "isExactly", type: "input" },
|
|
{ label: "empty", value: "empty", type: "" },
|
|
{ label: "not empty", value: "notEmpty", type: "" },
|
|
],
|
|
[ColumnTypes.URL]: [
|
|
{ label: "contains", value: "contains", type: "input" },
|
|
{ label: "does not contain", value: "doesNotContain", type: "input" },
|
|
{ label: "starts with", value: "startsWith", type: "input" },
|
|
{ label: "ends with", value: "endsWith", type: "input" },
|
|
{ label: "is exactly", value: "isExactly", type: "input" },
|
|
{ label: "empty", value: "empty", type: "" },
|
|
{ label: "not empty", value: "notEmpty", type: "" },
|
|
],
|
|
[ColumnTypes.DATE]: [
|
|
{ label: "is", value: "is", type: "date" },
|
|
{ label: "is before", value: "isBefore", type: "date" },
|
|
{ label: "is after", value: "isAfter", type: "date" },
|
|
{ label: "is not", value: "isNot", type: "date" },
|
|
{ label: "empty", value: "empty", type: "" },
|
|
{ label: "not empty", value: "notEmpty", type: "" },
|
|
],
|
|
[ColumnTypes.IMAGE]: [
|
|
{ label: "empty", value: "empty", type: "" },
|
|
{ label: "not empty", value: "notEmpty", type: "" },
|
|
],
|
|
[ColumnTypes.VIDEO]: [
|
|
{ label: "empty", value: "empty", type: "" },
|
|
{ label: "not empty", value: "notEmpty", type: "" },
|
|
],
|
|
[ColumnTypes.NUMBER]: [
|
|
{ label: "is equal to", value: "isEqualTo", type: "input" },
|
|
{ label: "not equal to", value: "notEqualTo", type: "input" },
|
|
{ label: "greater than", value: "greaterThan", type: "input" },
|
|
{
|
|
label: "greater than or equal to",
|
|
value: "greaterThanEqualTo",
|
|
type: "input",
|
|
},
|
|
{ label: "less than", value: "lessThan", type: "input" },
|
|
{
|
|
label: "less than or equal to",
|
|
value: "lessThanEqualTo",
|
|
type: "input",
|
|
},
|
|
{ label: "empty", value: "empty", type: "" },
|
|
{ label: "not empty", value: "notEmpty", type: "" },
|
|
],
|
|
[ColumnTypes.CHECKBOX]: [
|
|
{ label: "is checked", value: "isChecked", type: "" },
|
|
{ label: "is unchecked", value: "isUnChecked", type: "" },
|
|
],
|
|
[ColumnTypes.SWITCH]: [
|
|
{ label: "is checked", value: "isChecked", type: "" },
|
|
{ label: "is unchecked", value: "isUnChecked", type: "" },
|
|
],
|
|
[ColumnTypes.SELECT]: [
|
|
{ label: "contains", value: "contains", type: "input" },
|
|
{ label: "does not contain", value: "doesNotContain", type: "input" },
|
|
{ label: "starts with", value: "startsWith", type: "input" },
|
|
{ label: "ends with", value: "endsWith", type: "input" },
|
|
{ label: "is exactly", value: "isExactly", type: "input" },
|
|
{ label: "empty", value: "empty", type: "" },
|
|
{ label: "not empty", value: "notEmpty", type: "" },
|
|
],
|
|
};
|
|
|
|
const operatorOptions: DropdownOption[] = [
|
|
{ label: "OR", value: OperatorTypes.OR, type: "" },
|
|
{ label: "AND", value: OperatorTypes.AND, type: "" },
|
|
];
|
|
|
|
const columnTypeNameMap: Record<ReadOnlyColumnTypes, string> = {
|
|
[ReadOnlyColumnTypes.TEXT]: "Text",
|
|
[ReadOnlyColumnTypes.VIDEO]: "Video",
|
|
[ReadOnlyColumnTypes.IMAGE]: "Image",
|
|
[ReadOnlyColumnTypes.NUMBER]: "Num",
|
|
[ReadOnlyColumnTypes.DATE]: "Date",
|
|
[ReadOnlyColumnTypes.URL]: "Url",
|
|
[ReadOnlyColumnTypes.CHECKBOX]: "Check",
|
|
[ReadOnlyColumnTypes.SWITCH]: "Check",
|
|
[ReadOnlyColumnTypes.SELECT]: "Text",
|
|
};
|
|
|
|
function RenderOption(props: { type: string; title: string; active: boolean }) {
|
|
return (
|
|
<RenderOptionWrapper selected={props.active}>
|
|
<div className="title">{props.title}</div>
|
|
<div className="type">
|
|
{columnTypeNameMap[props.type as ReadOnlyColumnTypes]}
|
|
</div>
|
|
</RenderOptionWrapper>
|
|
);
|
|
}
|
|
|
|
function RenderOptions(props: {
|
|
columns: DropdownOption[];
|
|
selectItem: (column: DropdownOption) => void;
|
|
placeholder: string;
|
|
value?: string | Condition;
|
|
showType?: boolean;
|
|
className?: string;
|
|
}) {
|
|
const [selectedValue, selectValue] = useState(props.placeholder);
|
|
const configs = {
|
|
sections: [
|
|
{
|
|
options: props.columns.map((column: DropdownOption) => {
|
|
const isActive = column.value === props.value;
|
|
return {
|
|
content: props.showType ? (
|
|
<RenderOption
|
|
active={isActive}
|
|
title={column.label}
|
|
type={column.type}
|
|
/>
|
|
) : (
|
|
column.label
|
|
),
|
|
value: column.value,
|
|
active: isActive,
|
|
onSelect: () => {
|
|
selectValue(column.label);
|
|
props.selectItem(column);
|
|
},
|
|
};
|
|
}),
|
|
},
|
|
],
|
|
openDirection: Directions.DOWN,
|
|
trigger: {
|
|
content: (
|
|
<DropdownTrigger className={props.className}>
|
|
<AutoToolTipComponentWrapper title={selectedValue}>
|
|
{selectedValue}
|
|
</AutoToolTipComponentWrapper>
|
|
<Icon color={Colors.SLATE_GRAY} icon="caret-down" iconSize={16} />
|
|
</DropdownTrigger>
|
|
),
|
|
},
|
|
skin: Skin.LIGHT,
|
|
};
|
|
useEffect(() => {
|
|
if (props.value && props.columns) {
|
|
const selectedOptions = props.columns.filter(
|
|
(i) => i.value === props.value,
|
|
);
|
|
if (selectedOptions && selectedOptions.length) {
|
|
selectValue(selectedOptions[0].label);
|
|
} else {
|
|
selectValue(props.placeholder);
|
|
}
|
|
} else {
|
|
selectValue(props.placeholder);
|
|
}
|
|
}, [props.value, props.placeholder, props.columns]);
|
|
return <CustomizedDropdown {...configs} />;
|
|
}
|
|
|
|
function RenderInput(props: {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
className?: string;
|
|
}) {
|
|
const debouncedOnChange = useCallback(debounce(props.onChange, 400), []);
|
|
const [value, setValue] = useState(props.value);
|
|
const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const value = event.target.value;
|
|
setValue(value);
|
|
debouncedOnChange(value);
|
|
};
|
|
useEffect(() => {
|
|
setValue(props.value);
|
|
}, [props.value]);
|
|
return (
|
|
<StyledInputGroup
|
|
className={props.className}
|
|
defaultValue={value}
|
|
onChange={onChange}
|
|
placeholder="Enter value"
|
|
type="text"
|
|
/>
|
|
);
|
|
}
|
|
|
|
type CascadeFieldProps = {
|
|
columns: DropdownOption[];
|
|
column: string;
|
|
condition: Condition;
|
|
value: any;
|
|
operator: Operator;
|
|
index: number;
|
|
hasAnyFilters: boolean;
|
|
applyFilter: (
|
|
filter: ReactTableFilter,
|
|
index: number,
|
|
isOperatorChange: boolean,
|
|
) => void;
|
|
removeFilter: (index: number) => void;
|
|
accentColor: string;
|
|
borderRadius: string;
|
|
};
|
|
|
|
type CascadeFieldState = {
|
|
column: string;
|
|
condition: Condition;
|
|
value: any;
|
|
operator: Operator;
|
|
conditions: DropdownOption[];
|
|
showConditions: boolean;
|
|
showInput: boolean;
|
|
showDateInput: boolean;
|
|
isDeleted: boolean;
|
|
isUpdate: boolean;
|
|
isOperatorChange: boolean;
|
|
};
|
|
|
|
const getConditions = (props: CascadeFieldProps) => {
|
|
const columnValue = props.column || "";
|
|
const filteredColumn = props.columns.filter((column: DropdownOption) => {
|
|
return columnValue === column.value;
|
|
});
|
|
if (filteredColumn.length) {
|
|
const type: ReadOnlyColumnTypes = filteredColumn[0]
|
|
.type as ReadOnlyColumnTypes;
|
|
return typeOperatorsMap[type];
|
|
} else {
|
|
return new Array<DropdownOption>(0);
|
|
}
|
|
};
|
|
|
|
const showConditionsField = (props: CascadeFieldProps) => {
|
|
const columnValue = props.column || "";
|
|
const filteredColumn = props.columns.filter((column: DropdownOption) => {
|
|
return columnValue === column.value;
|
|
});
|
|
return !!filteredColumn.length;
|
|
};
|
|
|
|
const showInputField = (
|
|
props: CascadeFieldProps,
|
|
conditions: DropdownOption[],
|
|
) => {
|
|
const conditionValue = props.condition || "";
|
|
const filteredConditions =
|
|
conditions &&
|
|
conditions.filter((condition: DropdownOption) => {
|
|
return condition.value === conditionValue;
|
|
});
|
|
return !!filteredConditions.length && filteredConditions[0].type === "input";
|
|
};
|
|
|
|
const showDateInputField = (
|
|
props: CascadeFieldProps,
|
|
conditions: DropdownOption[],
|
|
) => {
|
|
const conditionValue = props.condition || "";
|
|
const filteredConditions =
|
|
conditions &&
|
|
conditions.filter((condition: DropdownOption) => {
|
|
return condition.value === conditionValue;
|
|
});
|
|
return !!filteredConditions.length && filteredConditions[0].type === "date";
|
|
};
|
|
|
|
function calculateInitialState(props: CascadeFieldProps) {
|
|
const showConditions = showConditionsField(props);
|
|
const conditions = getConditions(props);
|
|
const showInput = showInputField(props, conditions);
|
|
const showDateInput = showDateInputField(props, conditions);
|
|
return {
|
|
operator: props.operator,
|
|
column: props.column,
|
|
condition: props.condition,
|
|
value: props.value,
|
|
conditions: conditions,
|
|
showConditions: showConditions,
|
|
showInput: showInput,
|
|
showDateInput: showDateInput,
|
|
isDeleted: false,
|
|
isUpdate: false,
|
|
isOperatorChange: false,
|
|
};
|
|
}
|
|
|
|
export enum CascadeFieldActionTypes {
|
|
SELECT_COLUMN = "SELECT_COLUMN",
|
|
SELECT_CONDITION = "SELECT_CONDITION",
|
|
CHANGE_VALUE = "CHANGE_VALUE",
|
|
SELECT_OPERATOR = "SELECT_OPERATOR",
|
|
UPDATE_FILTER = "UPDATE_FILTER",
|
|
DELETE_FILTER = "DELETE_FILTER",
|
|
}
|
|
|
|
type CascadeFieldAction = keyof typeof CascadeFieldActionTypes;
|
|
|
|
function CaseCaseFieldReducer(
|
|
state: CascadeFieldState,
|
|
action: {
|
|
type: CascadeFieldAction;
|
|
payload?: any;
|
|
},
|
|
) {
|
|
switch (action.type) {
|
|
case CascadeFieldActionTypes.SELECT_COLUMN:
|
|
const type: ReadOnlyColumnTypes = action.payload.type;
|
|
return {
|
|
...state,
|
|
column: action.payload.value,
|
|
condition: "",
|
|
conditions: typeOperatorsMap[type],
|
|
showConditions: true,
|
|
isUpdate: true,
|
|
};
|
|
case CascadeFieldActionTypes.SELECT_CONDITION:
|
|
return {
|
|
...state,
|
|
condition: action.payload.value,
|
|
showInput: action.payload.type === "input",
|
|
showDateInput: action.payload.type === "date",
|
|
value: action.payload.type === "" ? "" : state.value,
|
|
isUpdate: true,
|
|
};
|
|
case CascadeFieldActionTypes.CHANGE_VALUE:
|
|
return {
|
|
...state,
|
|
value: action.payload,
|
|
isUpdate: true,
|
|
};
|
|
case CascadeFieldActionTypes.SELECT_OPERATOR:
|
|
return {
|
|
...state,
|
|
operator: action.payload,
|
|
isUpdate: true,
|
|
isOperatorChange: true,
|
|
};
|
|
case CascadeFieldActionTypes.UPDATE_FILTER:
|
|
const calculatedState = calculateInitialState(action.payload);
|
|
return {
|
|
...calculatedState,
|
|
isUpdate: false,
|
|
};
|
|
case CascadeFieldActionTypes.DELETE_FILTER:
|
|
return {
|
|
...state,
|
|
isDeleted: true,
|
|
};
|
|
default:
|
|
throw new Error();
|
|
}
|
|
}
|
|
|
|
function CascadeField(props: CascadeFieldProps) {
|
|
const memoizedState = React.useMemo(() => calculateInitialState(props), [
|
|
props,
|
|
]);
|
|
return <Fields state={memoizedState} {...props} />;
|
|
}
|
|
|
|
function Fields(props: CascadeFieldProps & { state: CascadeFieldState }) {
|
|
const { applyFilter, hasAnyFilters, index, removeFilter } = props;
|
|
const [state, dispatch] = React.useReducer(CaseCaseFieldReducer, props.state);
|
|
const handleRemoveFilter = () => {
|
|
dispatch({ type: CascadeFieldActionTypes.DELETE_FILTER });
|
|
};
|
|
const selectColumn = (column: DropdownOption) => {
|
|
dispatch({
|
|
type: CascadeFieldActionTypes.SELECT_COLUMN,
|
|
payload: column,
|
|
});
|
|
};
|
|
const selectCondition = (condition: DropdownOption) => {
|
|
dispatch({
|
|
type: CascadeFieldActionTypes.SELECT_CONDITION,
|
|
payload: condition,
|
|
});
|
|
};
|
|
const onValueChange = (value: string) => {
|
|
dispatch({
|
|
type: CascadeFieldActionTypes.CHANGE_VALUE,
|
|
payload: value,
|
|
});
|
|
};
|
|
const onDateSelected = (date: string) => {
|
|
dispatch({
|
|
type: CascadeFieldActionTypes.CHANGE_VALUE,
|
|
payload: date,
|
|
});
|
|
};
|
|
const selectOperator = (option: DropdownOption) => {
|
|
dispatch({
|
|
type: CascadeFieldActionTypes.SELECT_OPERATOR,
|
|
payload: OperatorTypes[option.value as Operator],
|
|
});
|
|
};
|
|
|
|
const {
|
|
column,
|
|
condition,
|
|
conditions,
|
|
isDeleted,
|
|
isOperatorChange,
|
|
isUpdate,
|
|
operator,
|
|
showConditions,
|
|
showDateInput,
|
|
showInput,
|
|
value,
|
|
} = state;
|
|
useEffect(() => {
|
|
if (!isDeleted && isUpdate) {
|
|
applyFilter(
|
|
{ operator, column, condition, value },
|
|
index,
|
|
isOperatorChange,
|
|
);
|
|
} else if (isDeleted) {
|
|
removeFilter(index);
|
|
}
|
|
}, [
|
|
operator,
|
|
column,
|
|
condition,
|
|
value,
|
|
isDeleted,
|
|
isOperatorChange,
|
|
isUpdate,
|
|
index,
|
|
applyFilter,
|
|
removeFilter,
|
|
]);
|
|
|
|
useEffect(() => {
|
|
dispatch({
|
|
type: CascadeFieldActionTypes.UPDATE_FILTER,
|
|
payload: props,
|
|
});
|
|
}, [props]);
|
|
return (
|
|
<FieldWrapper className="t--table-filter">
|
|
<StyledRemoveIcon
|
|
className={`t--table-filter-remove-btn ${
|
|
hasAnyFilters ? "" : "hide-icon"
|
|
}`}
|
|
color={Colors.GRAY}
|
|
height={16}
|
|
onClick={handleRemoveFilter}
|
|
width={16}
|
|
/>
|
|
{index === 1 ? (
|
|
<DropdownWrapper width={95}>
|
|
<RenderOptions
|
|
className="t--table-filter-operators-dropdown"
|
|
columns={operatorOptions}
|
|
placeholder="or"
|
|
selectItem={selectOperator}
|
|
value={operator}
|
|
/>
|
|
</DropdownWrapper>
|
|
) : (
|
|
<LabelWrapper>
|
|
{index === 0 ? "Where" : OperatorTypes[props.operator]}
|
|
</LabelWrapper>
|
|
)}
|
|
<DropdownWrapper width={150}>
|
|
<RenderOptions
|
|
className="t--table-filter-columns-dropdown"
|
|
columns={props.columns}
|
|
placeholder="Attribute"
|
|
selectItem={selectColumn}
|
|
showType
|
|
value={column}
|
|
/>
|
|
</DropdownWrapper>
|
|
{showConditions ? (
|
|
<DropdownWrapper width={200}>
|
|
<RenderOptions
|
|
className="t--table-filter-conditions-dropdown"
|
|
columns={conditions}
|
|
placeholder=""
|
|
selectItem={selectCondition}
|
|
value={condition}
|
|
/>
|
|
</DropdownWrapper>
|
|
) : null}
|
|
{showInput ? (
|
|
<RenderInput
|
|
className="t--table-filter-value-input"
|
|
onChange={onValueChange}
|
|
value={value}
|
|
/>
|
|
) : null}
|
|
{showDateInput ? (
|
|
<DatePickerWrapper className="t--table-filter-date-input">
|
|
<DatePickerComponent
|
|
accentColor={props.accentColor}
|
|
backgroundColor="#fff"
|
|
borderRadius={props.borderRadius}
|
|
closeOnSelection
|
|
compactMode
|
|
dateFormat="YYYY-MM-DD HH:mm"
|
|
datePickerType="DATE_PICKER"
|
|
isDisabled={false}
|
|
isLoading={false}
|
|
labelText=""
|
|
onDateSelected={onDateSelected}
|
|
selectedDate={value}
|
|
shortcuts={false}
|
|
timePrecision={TimePrecision.MINUTE}
|
|
widgetId=""
|
|
withoutPortal
|
|
/>
|
|
</DatePickerWrapper>
|
|
) : null}
|
|
</FieldWrapper>
|
|
);
|
|
}
|
|
|
|
export default CascadeField;
|