PromucFlow_constructor/app/client/src/components/propertyControls/StyledControls.tsx

import styled from "styled-components";
import { Select, MultiSelect } from "@blueprintjs/select";
import {
  Switch,
  InputGroup,
  Button,
  Classes,
  Popover,
  MenuItem,
  Menu,
} from "@blueprintjs/core";
import { DropdownOption } from "widgets/DropdownWidget";
import { ContainerOrientation } from "constants/WidgetConstants";
import { DateInput, DateRangeInput } from "@blueprintjs/datetime";
import { Colors } from "constants/Colors";
import { Skin, createGlobalStyle } from "constants/DefaultTheme";
import { AnyStyledComponent } from "styled-components";
import { ControlIcons } from "icons/ControlIcons";

type ControlWrapperProps = {
  orientation?: ContainerOrientation;
  isAction?: boolean;
};

export const ControlWrapper = styled.div<ControlWrapperProps>`
  display: ${(props) =>
    props.orientation === "HORIZONTAL" ? "flex" : "block"};
  justify-content: space-between;
  align-items: center;
  flex-direction: ${(props) =>
    props.orientation === "VERTICAL" ? "column" : "row"};
  padding: ${(props) => (props.isAction ? "0" : "4px 0 ")};
  & > label {
    color: ${(props) => props.theme.colors.paneText};
    margin-bottom: ${(props) => props.theme.spaces[1]}px;
    font-size: ${(props) => props.theme.fontSizes[3]}px;
  }
  &&& > label:first-of-type {
    display: block;
  }
  &&& > label {
    display: inline-block;
  }
`;

export const ControlPropertyLabelContainer = styled.div`
  display: flex;
  align-items: center;
  label {
    color: ${(props) => props.theme.colors.paneText};
    margin-bottom: ${(props) => props.theme.spaces[1]}px;
    font-size: ${(props) => props.theme.fontSizes[3]}px;
  }
  .underline {
    color: ${(props) => props.theme.colors.paneTextUnderline};
  }
`;

export const JSToggleButton = styled.span<{ active: boolean }>`
  margin: 0 3px;
  cursor: pointer;
  height: 24px;
  svg {
    height: 24px;
    rect {
      fill: ${(props) =>
        props.active
          ? props.theme.colors.primaryOld
          : props.theme.colors.paneIcon};
    }
  }
`;

export const StyledDropDownContainer = styled.div`
  &&&& .${Classes.BUTTON} {
    box-shadow: none;
    border-radius: 4px;
    background-color: ${Colors.SHARK};
    color: ${Colors.CADET_BLUE};
    background-image: none;
    &.code-highlight {
      .language-javascript {
        border: none;
        box-shadow: none;
        background: transparent;
        white-space: normal;
        word-break: break-word;
      }
      .bp3-button-text {
        white-space: normal;
        word-break: break-word;
        display: block;
        overflow: auto;
        overflow-y: hidden;
      }
    }
  }
  width: 100%;
`;

export const DropdownStyles = createGlobalStyle`
  .select-popover-wrapper {
    width: 100%;
    border-radius: ${(props) => props.theme.radii[1]}px;
    box-shadow:  0px 2px 4px rgba(67, 70, 74, 0.14);
    padding: ${(props) => props.theme.spaces[3]}px;
    background: white;
    && .${Classes.MENU} {
      max-width: 100%;
      max-height: auto;
    }
    &&&& .${Classes.MENU_ITEM} {
      border-radius: ${(props) => props.theme.radii[1]}px;
      &:hover {
        background: ${Colors.POLAR};
      }
      &.${Classes.ACTIVE} {
        background: ${Colors.POLAR};
        color: ${(props) => props.theme.colors.textDefault};
        position: relative;
        &.single-select {
          &:before {
            left: 0;
            top: -2px;
            position: absolute;
            content: "";
            background: ${(props) => props.theme.colors.primaryOld};
            border-radius: 4px 0 0 4px;
            width: 4px;
            height: 100%;
          }
        }
      }
    }    
  }
`;

export const StyledMenu = styled(Menu)`
  && {
    background: ${(props) => props.theme.dropdown[Skin.DARK].background};
    border-radius: unset;
  }
  .bp3-submenu .bp3-menu {
    background: ${(props) => props.theme.dropdown[Skin.DARK].background};
  }
`;

const DropDown = Select.ofType<DropdownOption>();
export const StyledDropDown = styled(DropDown)`
  div {
    flex: 1 1 auto;
  }
  span {
    width: 100%;
    position: relative;
  }
  .${Classes.BUTTON} {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }
  .${Classes.BUTTON_TEXT} {
    text-overflow: ellipsis;
    text-align: left;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  && {
    .${Classes.ICON} {
      width: fit-content;
      color: ${Colors.SLATE_GRAY};
    }
  }
`;

export const StyledPopover = styled(Popover)`
  .${Classes.POPOVER_TARGET} {
    display: flex;
  }
  div {
    flex: 1 1 auto;
  }
  span {
    width: 100%;
    position: relative;
  }
  .${Classes.BUTTON} {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }
  .${Classes.BUTTON_TEXT} {
    text-overflow: ellipsis;
    text-align: left;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  && {
    .${Classes.ICON} {
      width: fit-content;
      color: ${Colors.SLATE_GRAY};
    }
  }
`;

export const StyledMenuItem = styled(MenuItem)`
  &&&&&& {
    border-radius: ${(props) => props.theme.radii[1]}px;
    background: ${(props) => props.theme.dropdown[Skin.DARK].background};
    color: ${(props) => props.theme.dropdown[Skin.DARK].inActiveText};
    padding: 4px 8px;
    margin: 4px 0px;
    &:hover {
      background: ${(props) => props.theme.dropdown[Skin.DARK].hoverBG};
      &&&.bp3-menu-item.bp3-intent-danger:hover {
        background: ${(props) => props.theme.colors.error};
      }
    }
    &.${Classes.ACTIVE} {
      background: ${(props) => props.theme.dropdown[Skin.DARK].hoverBG};
      color: ${(props) => props.theme.dropdown[Skin.DARK].hoverText};
      position: relative;
      &.single-select {
        &:before {
          left: 0;
          top: -2px;
          position: absolute;
          content: "";
          background: ${(props) => props.theme.dropdown[Skin.DARK].hoverBG};
          border-radius: 4px 0 0 4px;
          width: 4px;
          height: 100%;
        }
      }
    }
    &&&& .${Classes.MENU} {
      background: ${(props) => props.theme.dropdown[Skin.DARK].inActiveBG};
    }
  }
`;

const MultiSelectDropDown = MultiSelect.ofType<DropdownOption>();
export const StyledMultiSelectDropDown = styled(MultiSelectDropDown)`
  &&& button {
    background: ${(props) => props.theme.colors.paneInputBG};
    color: ${(props) => props.theme.colors.textOnDarkBG};
    box-shadow: none;
  }
`;

export const StyledSwitch = styled(Switch)`
  &&&&& input:checked ~ span {
    background: ${(props) => props.theme.colors.primaryOld};
  }
`;

export 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};
      }
    }
  }
`;

export const StyledInputGroup = styled(InputGroup)`
  & > input {
    placeholder-text: ${(props) => props.placeholder};
    color: ${(props) => props.theme.colors.textOnDarkBG};
    background: ${(props) => props.theme.colors.paneInputBG};
  }
`;

export const StyledDatePicker = styled(DateInput)`
  > input {
    color: ${(props) => props.theme.colors.textOnDarkBG};
    background: ${(props) => props.theme.colors.paneInputBG};
    border: 1px solid green;
  }
`;

export const StyledDateRangePicker = styled(DateRangeInput)`
  > input {
    color: ${(props) => props.theme.colors.textOnDarkBG};
    background: ${(props) => props.theme.colors.paneInputBG};
    border: 1px solid green;
  }
`;

export const StyledPropertyPaneButton = styled(Button)`
  &&&& {
    background-color: ${(props) => props.theme.colors.infoOld};
    color: #ffffff;
    margin-top: 4px;
    .bp3-icon {
      color: #ffffff;
      margin-right: 4px;
    }
    svg {
      width: 14px;
      height: 14px;
    }
  }
`;

export const FieldWrapper = styled.div`
  position: relative;
  width: 100%;
`;

export const StyledEditIcon = styled(
  ControlIcons.SETTINGS_CONTROL as AnyStyledComponent,
)`
  padding: 0;
  position: absolute;
  margin-left: 0;
  cursor: pointer;
  right: 35px;
  & svg {
    width: 12px;
    height: 12px;
    position: relative;
    top: 2px;
    path {
      fill: ${(props) => props.theme.colors.paneSectionLabel};
    }
  }
`;

export const StyledDragIcon = styled(
  ControlIcons.DRAG_CONTROL as AnyStyledComponent,
)`
  padding: 0;
  position: absolute;
  margin-right: 15px;
  cursor: move;
  z-index: 1;
  left: 4px;
  svg {
    width: 16px;
    height: 16px;
    position: relative;
    top: 2px;
    path {
      fill: ${(props) => props.theme.colors.paneSectionLabel};
    }
  }
`;

export const StyledDeleteIcon = styled(
  ControlIcons.DELETE_COLUMN as AnyStyledComponent,
)`
  padding: 0;
  position: absolute;
  margin-left: 15px;
  cursor: pointer;
  right: ${(props) => props.marginRight ?? 16}px;
  svg {
    width: 24px;
    height: 24px;
    top: -2px;
    position: relative;
    path {
      fill: ${(props) => props.theme.colors.paneSectionLabel};
    }
  }
`;

export const FlexWrapper = styled.div`
  display: flex;
`;

export const StyledVisibleIcon = styled(
  ControlIcons.SHOW_COLUMN as AnyStyledComponent,
)`
  padding: 0;
  position: absolute;
  margin-left: 15px;
  cursor: pointer;
  right: ${(props) => props.marginRight ?? 12}px;
  svg {
    width: 24px;
    height: 24px;
    top: -2px;
    position: relative;
    path {
      fill: ${(props) => props.theme.colors.paneSectionLabel};
    }
  }
`;

export const StyledHiddenIcon = styled(
  ControlIcons.HIDE_COLUMN as AnyStyledComponent,
)`
  padding: 0;
  position: absolute;
  margin-left: 15px;
  cursor: pointer;
  right: ${(props) => props.marginRight ?? 12}px;
  svg {
    width: 14px;
    top: 3px;
    height: 14px;
    left: 3px;
    position: relative;
    path {
      fill: ${(props) => props.theme.colors.paneSectionLabel};
    }
  }
`;