react#CSSProperties TypeScript Examples

/**
 * Use this style within a scrollable panel
 */
export function scrollableContentType(
  width: number | string = "fit-content",
  height: number | string = "fit-content"
): CSSProperties {
  return {
    width,
    height,
    paddingBottom: 4,
    flexGrow: 0,
  };
}

styles = {
  csvReader: {
    display: 'flex',
    flexDirection: 'row',
    marginBottom: 10,
  } as CSSProperties,
  browseFile: {
    width: '20%',
  } as CSSProperties,
  acceptedFile: {
    border: '1px solid #ccc',
    height: 45,
    lineHeight: 2.5,
    paddingLeft: 10,
    width: '80%',
  } as CSSProperties,
  remove: {
    borderRadius: 0,
    padding: '0 20px',
  } as CSSProperties,
  progressBarBackgroundColor: {
    backgroundColor: 'red',
  } as CSSProperties,
}

/**
 * The style of a label tag
 * @param width Lable width
 */
export function labelStyle(width = 34): CSSProperties {
  return {
    flexShrink: 0,
    flexGrow: 0,
    width,
    fontWeight: 600,
  };
}

export function DeleteWithUndo(
    props: PropsWithChildren<{
        endpoint: string
        object: {
            name?: string
            id: number
        }
        className: string
        style: CSSProperties
        callback: () => void
    }>
): JSX.Element {
    const { className, style, children } = props
    return (
        <a
            href="#"
            onClick={(e) => {
                e.preventDefault()
                e.stopPropagation()
                deleteWithUndo(props)
            }}
            className={className}
            style={style}
        >
            {children}
        </a>
    )
}

styles = {
  progressBar: {
    borderRadius: 3,
    boxShadow: 'inset 0 1px 3px rgba(0, 0, 0, .2)',
    bottom: 14,
    width: '100%',
    // position: 'absolute',
  } as CSSProperties,
  button: {
    position: 'inherit',
    width: '100%',
  } as CSSProperties,
  fill: {
    backgroundColor: DEFAULT_PROGRESS_BAR_COLOR,
    borderRadius: 3,
    height: 10,
    transition: 'width 500ms ease-in-out',
  } as CSSProperties,
}

sidebarPlaceholderStyle: CSSProperties = {
  display: "flex",
  flexDirection: "column",
  flexGrow: 1,
  flexShrink: 1,
  width: "100%",
  height: "100%",
  justifyContent: "center",
  alignItems: "center",
  fontSize: "0.8em",
  fontFamily: "var(--console-font)",
  color: "#cccccc",
}

Background = ({ children, image, imageMobile = image, size = 'auto' }: BackgroundProps) => {
  const style: CSSProperties = {
    ['--background--image' as any]: `url(/images/${image})`,
    ['--background--image-mobile' as any]: `url(/images/${imageMobile})`,
    ['--background-size' as any]: size,
  };

  return (
    <section data-testid="Background" className={styles.root} style={style}>
      {children}
    </section>
  );
}

export function IconText({ style }: { style?: CSSProperties }): JSX.Element {
    return (
        <svg width="1em" height="1em" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" style={style}>
            <g clipPath="url(#clip0)">
                <path d="M0 7.76876V3H21.2892V7.76876H13.5025V28.7966H7.78895V7.76876H0Z" fill="currentColor" />
                <path d="M0 7.76876V3H21.2892V7.76876H13.5025V28.7966H7.78895V7.76876H0Z" fill="currentColor" />
                <path
                    d="M22.8694 18.382H26.7333V18.3797H32.0001V16.3069H17.6038V18.3797H22.8694V18.382Z"
                    fill="currentColor"
                />
                <path
                    d="M22.8694 23.632H26.7333V23.6297H32.0001V21.5569H17.6038V23.6297H22.8694V23.632Z"
                    fill="currentColor"
                />
                <path
                    d="M22.8694 28.8825H26.7333V28.8802H32.0001V26.8074H17.6038V28.8802H22.8694V28.8825Z"
                    fill="currentColor"
                />
            </g>
            <defs>
                <clipPath id="clip0">
                    <rect width="1em" height="1em" fill="white" />
                </clipPath>
            </defs>
        </svg>
    )
}

Component = ({
  secondaryColor,
  speed,
  still,
  thickness,
  ...svgProps
}: SecondaryColorSpinnerProps) => {
  const strokeWidth = 4 * (thickness / 100);
  const circleStyle: CSSProperties = !still
    ? { animation: `spinners-react-circular ${140 / speed}s linear infinite` }
    : {};

  return (
    <svg fill="none" {...svgProps} viewBox="0 0 66 66">
      <circle
        cx="33"
        cy="33"
        fill="none"
        r="28"
        stroke={secondaryColor}
        strokeWidth={strokeWidth}
      />
      <circle
        cx="33"
        cy="33"
        fill="none"
        r="28"
        stroke="currentColor"
        strokeDasharray="1, 174"
        strokeDashoffset="306"
        strokeLinecap="round"
        strokeWidth={strokeWidth}
        style={circleStyle}
      />
    </svg>
  );
}

export function DecorativeMessageBubble(props: {element: React.ElementType, className?: string, style?: React.CSSProperties, tapbacks?: TapbackItem[], stickers?: StickerItem[], children: React.ReactNode, [x: string]: any}) {
	const {className, style, tapbacks, stickers, children, ...rest} = props;
	
	const [isPeeking, setPeeking] = useState(false);
	
	function enablePeeking() {
		setPeeking(true);
	}
	
	function disablePeeking() {
		setPeeking(false);
	}
	
	return (
		<props.element className={(props.className ?? "") + (props.tapbacks ? " " + styles.tapbackMargin : "")} style={props.style} onMouseEnter={enablePeeking} onMouseLeave={disablePeeking} {...rest}>
			{props.stickers && <MessageModifierStickerStack modifiers={props.stickers} reveal={isPeeking} />}
			{props.tapbacks && <MessageModifierTapbackRow modifiers={props.tapbacks} />}
			{props.children}
		</props.element>
	);
}

function SortIcon({
  size = 32,
  style,
  className,
  order,
}: {
  style?: CSSProperties
  className?: string
  size?: number
  order?: SortOrder
}) {
  return (
    <svg
      style={style}
      className={className}
      focusable="false"
      preserveAspectRatio="xMidYMid meet"
      width={size}
      height={size}
      viewBox="0 0 32 32"
      aria-hidden="true"
    >
      <path fill={order === 'asc' ? '#23A3FF' : '#bfbfbf'} transform="translate(0, 4)" d="M8 8L16 0 24 8z" />
      <path fill={order === 'desc' ? '#23A3FF' : '#bfbfbf'} transform="translate(0, -4)" d="M24 24L16 32 8 24z " />
    </svg>
  )
}

fillCoordinate = (): JSX.Element => {
    const { options } = this.props;
    const styleRegion = {
      position: 'absolute',
      width: options.baseMap.width + 'px',
      height: options.baseMap.height + 'px',
      top: '15%',
      left: 0,
    } as React.CSSProperties;
    // const xMinInitialSpace = parseInt(options.coordinateSpaceInitial.coordinate.xMin, 10);
    // const xMaxInitialSpace = parseInt(options.coordinateSpaceInitial.coordinate.xMax, 10);
    // const yMinInitialSpace = parseInt(options.coordinateSpaceInitial.coordinate.yMin, 10);
    // const yMaxInitialSpace = parseInt(options.coordinateSpaceInitial.coordinate.yMax, 10);
    let mapItems: JSX.Element[];
    mapItems = options.regionCoordinateSpace.map((line: RegionClass, index: number) => (
      <DrawRectangleExtend
        key={'drawRectangleExtend' + index.toString()}
        uneCoor={line}
        useLimit={false}
        limit={options.coordinateSpaceInitial.coordinate}
        onOptionsChange={this.props.onOptionsChange}
        options={this.props.options}
        data={this.props.data}
        id={'region' + line.id.toString()}
        //isEnabled={true}
        buttonAddLinkIsActive={this.state.buttonAddLinkIsActive}
        buttonAddIncurvedLinkIsActive={this.state.buttonAddIncurvedLinkIsActive}
        widthInitialSpaceDefault={line.widthInitialSpaceDefault}
        heightInitialSpaceDefault={line.heightInitialSpaceDefault}
      />
    ));
    return <ul style={styleRegion}>{mapItems}</ul>;
  };

infoText: CSSProperties = { color: 'InfoText' }

defaultInputStyle: CSSProperties = {
  backgroundColor: 'white',
  border: `1px solid #cbd5e0`,
  boxSizing: 'border-box',
  boxShadow: `0px 2px 7px rgba(0, 0, 0, 0.15)`,
  marginBottom: '5.4px',
  outline: 'none',
  padding: '0 12px',
  textOverflow: 'ellipses',

  position: 'absolute',
  left: '10px',
  top: '10px',
  zIndex: '1',

  width: '70%',
  height: '40px',
}

DrawerLayoutRender: React.ForwardRefRenderFunction<unknown, DrawerLayoutProps> = (
    props: DrawerLayoutProps,
    ref: any
) => {
    const { children, drawer, classes, ...otherDivProps } = props;
    const theme = useTheme();
    const [padding, setPadding] = useState<number | string>(0);
    const [drawerOpen, setDrawerOpen] = useState(false);
    const defaultClasses = useStyles();

    const style: CSSProperties = { paddingLeft: 0, paddingRight: 0 };
    style.paddingLeft = theme.direction === 'ltr' ? padding : 0;
    style.paddingRight = theme.direction === 'rtl' ? padding : 0;

    return (
        <DrawerLayoutContext.Provider
            value={{
                setPadding,
                setDrawerOpen,
            }}
        >
            <div
                ref={ref}
                className={clsx(defaultClasses.root, classes.root, {
                    [defaultClasses.expanded]: !drawerOpen,
                    [classes.expanded]: !drawerOpen,
                })}
                {...otherDivProps}
            >
                <div className={clsx(defaultClasses.drawer, classes.drawer)}>{drawer}</div>
                <div className={clsx(defaultClasses.content, classes.content)} style={style}>
                    {children}
                </div>
            </div>
        </DrawerLayoutContext.Provider>
    );
}

private getTranslateStyle(stopAnimate?: boolean): CSSProperties {
        const {currentIndex, carouselSize, delay} = this;
        const time = stopAnimate ? 0 : delay;
        const translateSize = (-1 - currentIndex) * carouselSize.width;
        return {
            transform: `translateX(${translateSize}px)`,
            transitionDuration: `${time}ms`
        };
    }

export function SortableTreeItem({id, depth, ...props}: Props) {
  const {
    attributes,
    isDragging,
    isSorting,
    listeners,
    setDraggableNodeRef,
    setDroppableNodeRef,
    transform,
    transition,
  } = useSortable({
    id,
    animateLayoutChanges,
  });
  const style: CSSProperties = {
    transform: CSS.Translate.toString(transform),
    transition,
  };

  return (
    <TreeItem
      ref={setDraggableNodeRef}
      wrapperRef={setDroppableNodeRef}
      style={style}
      depth={depth}
      ghost={isDragging}
      disableSelection={iOS}
      disableInteraction={isSorting}
      handleProps={{
        ...attributes,
        ...listeners,
      }}
      {...props}
    />
  );
}

responsiveIframeStyles: CSSProperties = {
  position: "absolute",
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  height: "100%",
  width: "100%",
}

function Tag({
  tag: { style, values },
  element,
  onHover,
}: {
  tag: { style: CSSProperties; values: string[] };
  element?: string;
  onHover?: (hover: boolean) => void;
}) {
  return React.createElement(
    element ?? "td",
    { className: "badge", style },
    ...separateArrayBy(
      values.map((value) => (
        <div
          className="badge-text"
          onMouseOver={() => onHover?.(true)}
          onMouseOut={() => onHover?.(false)}
        >
          {value}
        </div>
      )),
      // This space is important -> otherwise copy/pasting will not include a space
      <span className="badge-divider"> </span>
    )
  );
}

IconDisplaySection = ({ children, style }: { children: ReactNode, style?: CSSProperties }) => (
  <section
    style={{
      display: "flex",
      justifyContent: "flex-start",
      flexFlow: "row wrap",
      ...style,
    }}
  >
    {children}
  </section>
)

useTooltipTransform = (
  wrapper: HTMLDivElement | null,
  tooltip: HTMLDivElement | null,
  placement: TooltipPlacement
): CSSProperties => {
  const calculateTransformStyle = (): CSSProperties => {
    if (!wrapper || !tooltip) {
      return {};
    }

    const wrapperBoundingRect = wrapper.getBoundingClientRect();
    const wrapperWidth = wrapperBoundingRect.right - wrapperBoundingRect.left;
    const wrapperHeight = wrapperBoundingRect.bottom - wrapperBoundingRect.top;

    const tooltipBoundingRect = tooltip.getBoundingClientRect();
    const tooltipWidth = tooltipBoundingRect.right - tooltipBoundingRect.left;
    const tooltipHeight = tooltipBoundingRect.bottom - tooltipBoundingRect.top;

    let left = wrapperBoundingRect.left + wrapperWidth / 2 - tooltipWidth / 2;
    let top = wrapperBoundingRect.top + wrapperHeight / 2 - tooltipHeight / 2;

    switch (placement) {
      case TooltipPlacement.Top:
        top = wrapperBoundingRect.top - tooltipHeight - tooltipPadding;
        break;
      case TooltipPlacement.Bottom:
        top = wrapperBoundingRect.bottom + tooltipPadding;
        break;
      case TooltipPlacement.Left:
        left = wrapperBoundingRect.left - tooltipWidth - tooltipPadding;
        break;
      case TooltipPlacement.Right:
        left = wrapperBoundingRect.right + tooltipPadding;
        break;
    }

    return {
      transform: `translate3d(${left}px, ${top}px, 0px)`,
    };
  };

  return useMemo(() => calculateTransformStyle(), [wrapper, tooltip]);
}

export function useCoordinateSpace({
  width,
  height,
  margin = { top: 0, bottom: 0, left: 0, right: 0 },
  gutter = { top: 0, bottom: 0, left: 0, right: 0 },
}: CoordinateSpaceParams): {
  coordinateSpace: SpaceRect;
  canvasStyle: CSSProperties;
} {
  const coordinateSpace = useMemo(() => {
    const w = width + margin.left + margin.right;
    const h = height + margin.top + margin.bottom;

    return {
      x: gutter.left,
      y: gutter.top,
      width: w - gutter.left - gutter.right,
      height: h - gutter.top - gutter.bottom,
      top: gutter.top,
      left: gutter.left,
      right: w - gutter.right,
      bottom: h - gutter.bottom,
    };
  }, [
    gutter.bottom,
    gutter.left,
    gutter.right,
    gutter.top,
    height,
    margin.bottom,
    margin.left,
    margin.right,
    margin.top,
    width,
  ]);

  const canvasStyle = useMemo<CSSProperties>(() => {
    return {
      width: width + margin.left + margin.right,
      height: height + margin.top + margin.bottom,
      marginTop: -margin.top,
      marginLeft: -margin.left,
    };
  }, [height, margin.bottom, margin.left, margin.right, margin.top, width]);

  return { coordinateSpace, canvasStyle };
}

styles = {
  zone: {
    alignItems: 'center',
    border: `2px dashed ${GREY}`,
    borderRadius: 20,
    display: 'flex',
    flexDirection: 'column',
    height: '100%',
    justifyContent: 'center',
    padding: 20,
  } as CSSProperties,
  file: {
    background: 'linear-gradient(to bottom, #EEE, #DDD)',
    borderRadius: 20,
    display: 'flex',
    height: 120,
    width: 120,
    position: 'relative',
    zIndex: 10,
    flexDirection: 'column',
    justifyContent: 'center',
  } as CSSProperties,
  info: {
    alignItems: 'center',
    display: 'flex',
    flexDirection: 'column',
    paddingLeft: 10,
    paddingRight: 10,
  } as CSSProperties,
  size: {
    backgroundColor: GREY_LIGHT,
    borderRadius: 3,
    marginBottom: '0.5em',
    justifyContent: 'center',
    display: 'flex',
  } as CSSProperties,
  name: {
    backgroundColor: GREY_LIGHT,
    borderRadius: 3,
    fontSize: 12,
    marginBottom: '0.5em',
  } as CSSProperties,
  progressBar: {
    bottom: 14,
    position: 'absolute',
    width: '100%',
    paddingLeft: 10,
    paddingRight: 10,
  } as CSSProperties,
  zoneHover: {
    borderColor: GREY_DIM,
  } as CSSProperties,
  default: {
    borderColor: GREY,
  } as CSSProperties,
  remove: {
    height: 23,
    position: 'absolute',
    right: 6,
    top: 6,
    width: 23,
  } as CSSProperties,
}

/**
 * @category Preview components
 */
export function ImagePreview({ size, url }: ImagePreviewProps) {

    const [onHover, setOnHover] = useState(false);

    const imageSize = useMemo(() => getThumbnailMeasure(size), [size]);
    const classes = useStyles({ imageSize });

    if (size === "tiny") {
        return (
            <img src={url}
                 key={"tiny_image_preview_" + url}
                 className={classes.imageTiny}/>
        );
    }

    const imageStyle: CSSProperties =
        {
            maxWidth: "100%",
            maxHeight: "100%",
            borderRadius: "4px"
        };

    return (
        <div
            className={classes.imageWrap}
            key={"image_preview_" + url}
            onMouseEnter={() => setOnHover(true)}
            onMouseMove={() => setOnHover(true)}
            onMouseLeave={() => setOnHover(false)}>

            <img src={url}
                 className={classes.image}
                 style={imageStyle}/>

            {onHover && (
                <>
                    <Tooltip title="Copy url to clipboard">
                        <div className={classes.copyIcon}>
                            <IconButton
                                size={"small"}
                                onClick={(e) => {
                                    e.stopPropagation();
                                    navigator.clipboard.writeText(url);
                                }}>
                                <ContentPasteIcon htmlColor={"#666"} fontSize={"small"} />
                            </IconButton>
                        </div>
                    </Tooltip>
                    <Tooltip title="Open image in new tab">
                        <a
                            className={classes.previewIcon}
                            href={url}
                            rel="noopener noreferrer"
                            target="_blank">
                            <IconButton
                                size={"small"}
                                onClick={(e) => e.stopPropagation()}>
                                <OpenInNewIcon htmlColor={"#666"} fontSize={"small"} />
                            </IconButton>
                        </a>
                    </Tooltip>
                </>
            )}
        </div>

    );
}

Icon: React.FC<Props> = ({
  iconName,
  xclass,
  width,
  height,
  fill,
  rotate,
  style,
  children,
}) => {
  const themeService = getThemeService();
  const fillValue =
    fill === null || fill === undefined
      ? "white"
      : fill.startsWith("--")
      ? themeService.getProperty(fill)
      : fill;
  const styleValue: CSSProperties = {
    width: `${
      width === undefined
        ? themeService.getProperty("--icon-default-size")
        : width
    }px`,
    height: `${
      height === undefined
        ? themeService.getProperty("--icon-default-size")
        : height
    }px`,
    fill: `${fillValue}`,
    transform: `rotate(${rotate ?? 0}deg)`,
    flexShrink: 0,
    flexGrow: 0,
  };
  if (iconName?.startsWith("@")) {
    const imageInfo = themeService.getImageIcon(iconName.substr(1));
    return (
      <img
        src={`data:image/${imageInfo.type};base64,${imageInfo.data}`}
        style={{ width, height }}
      />
    );
  }
  if (iconName) {
    const iconInfo = themeService.getIcon(iconName);
    return (
      <svg
        className={xclass}
        xmlns="http://www.w3.org/2000/svg"
        style={{ ...styleValue, ...style }}
        viewBox={"0 0 " + iconInfo.width + " " + iconInfo.height}
      >
        {children}
        <path
          d={iconInfo.path}
          fillRule={iconInfo["fill-rule"] as any}
          clipRule={iconInfo["clip-rule"]}
        />
      </svg>
    );
  }
  return <div />;
}