@nyris/nyris-webapp 0.2.5 → 0.3.2

package/src/components/input/inputSearch.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Button, Box } from "@material-ui/core";
+import ClearOutlinedIcon from "@material-ui/icons/ClearOutlined";
+import { connectSearchBox } from "react-instantsearch-dom";
+import { useHistory } from "react-router-dom";
+import { useAppDispatch } from "Store/Store";
+import { reset } from "Store/Search";
+import { debounce } from "lodash";
+import { useCallback } from "react";
+
+const SearchBox = ({ currentRefinement, isSearchStalled, refine }: any) => {
+  const focusInp: any = useRef();
+  const history = useHistory();
+  const [, setShowBtnClear] = useState<boolean>(true);
+  const [valueInput, setValueInput] = useState<string>("");
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    if (focusInp?.current) {
+      focusInp?.current.focus();
+    }
+  }, [focusInp]);
+
+  useEffect(() => {
+    // if (currentRefinement) {
+    setValueInput(currentRefinement);
+    // }
+  }, [currentRefinement]);
+
+  useEffect(() => {
+    if (valueInput.length > 0) {
+      setShowBtnClear(true);
+    }
+    setShowBtnClear(false);
+  }, [valueInput]);
+
+  const debounceSearch = useCallback(
+    debounce((nextValue: any) => refine(nextValue), 0),
+    []
+  );
+
+  return (
+    <Box className="wrap-input-search">
+      <Box p={2} display={"flex"} className="box-input-search">
+        <form noValidate action="" role="search">
+          <input
+            style={{ border: "0px", width: "100%" }}
+            className="input-search"
+            value={valueInput}
+            onChange={(event) => {
+              setValueInput(event.currentTarget.value);
+              debounceSearch(event.currentTarget.value);
+            }}
+            ref={focusInp}
+          />
+          {history.location.pathname === "/result" && (
+            <Button
+              className="btn-clear-text"
+              onClick={() => {
+                setValueInput("");
+                refine("");
+                dispatch(reset(""));
+                history.push("/");
+                return;
+              }}
+            >
+              <ClearOutlinedIcon style={{ fontSize: 12, color: "#2B2C46" }} />
+            </Button>
+          )}
+        </form>
+      </Box>
+    </Box>
+  );
+};
+
+const CustomSearchBox = connectSearchBox(SearchBox);
+export default CustomSearchBox;

package/src/components/modal/DefaultModal.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Modal from "@material-ui/core/Modal";
+
+interface Props {
+  children: JSX.Element;
+  openModal: boolean;
+  handleClose: (e: any) => void;
+}
+
+function DefaultModal(props: Props) {
+  const { children, openModal = false, handleClose } = props;
+
+  return (
+    <Modal
+      open={openModal}
+      onClose={handleClose}
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      {children}
+    </Modal>
+  );
+}
+
+export default DefaultModal;

package/src/components/preview/preview.tsx

@@ -0,0 +1,433 @@
+import React from "react";
+import { Layer, Stage, Image, Circle, Rect } from "react-konva";
+import Konva from "konva";
+import { NodeGroup } from "react-move";
+
+type PreviewElem = "tl" | "tr" | "bl" | "br" | "rect";
+
+interface RectCoords {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+
+interface PreviewProps {
+  image: HTMLCanvasElement;
+  initialRegion: any;
+  regions: any[];
+  onSelectionChange?: (r: any) => void;
+  maxWidth: number;
+  maxHeight: number;
+  dotColor: string;
+}
+
+interface PreviewState extends RectCoords {
+  tlHover: boolean;
+  trHover: boolean;
+  blHover: boolean;
+  brHover: boolean;
+  dotHover: boolean;
+  rectHover: boolean;
+}
+interface WH {
+  w: number;
+  h: number;
+}
+
+function getThumbSizeLongestEdge(
+  maxW: number,
+  maxH: number,
+  iW: number,
+  iH: number
+): WH {
+  let iR = iW / iH;
+  let dR = maxW / maxH;
+  if (dR > iR) {
+    return {
+      w: (iW * maxH) / iH,
+      h: maxH,
+    };
+  }
+  return {
+    w: maxW,
+    h: (iH * maxW) / iW,
+  };
+}
+
+class Preview extends React.Component<PreviewProps, PreviewState> {
+  private readonly selectionRef: React.RefObject<any>;
+  private animation?: Konva.Animation;
+
+  private handleDragMoveRect = this.handleDragMove.bind(this, "rect");
+  private handleDragMoveTl = this.handleDragMove.bind(this, "tl");
+  private handleDragMoveTr = this.handleDragMove.bind(this, "tr");
+  private handleDragMoveBl = this.handleDragMove.bind(this, "bl");
+  private handleDragMoveBr = this.handleDragMove.bind(this, "br");
+
+  private handleDragBoundTl = ({ x, y }: { x: number; y: number }) => {
+    let [minX, minY] = [100, 100];
+    let { x2, y2 } = this.scaleToPreviewPixels(this.state);
+    return {
+      x: Math.max(Math.min(x, x2 - minX), 0),
+      y: Math.max(Math.min(y, y2 - minY), 0),
+    };
+  };
+
+  private handleDragBoundTr = ({ x, y }: { x: number; y: number }) => {
+    let [minX, minY] = [100, 100];
+    let { x1, y2, width } = this.scaleToPreviewPixels(this.state);
+    return {
+      x: Math.min(Math.max(x, x1 + minX), width),
+      y: Math.max(Math.min(y, y2 - minY), 0),
+    };
+  };
+  private handleDragBoundBl = ({ x, y }: { x: number; y: number }) => {
+    let [minX, minY] = [100, 100];
+    let { x2, y1, height } = this.scaleToPreviewPixels(this.state);
+    return {
+      x: Math.max(Math.min(x, x2 - minX), 0),
+      y: Math.min(Math.max(y, y1 + minY), height),
+    };
+  };
+
+  private handleDragBoundBr = ({ x, y }: { x: number; y: number }) => {
+    let [minX, minY] = [100, 100];
+    let { x1, y1, width, height } = this.scaleToPreviewPixels(this.state);
+    return {
+      x: Math.min(Math.max(x, x1 + minX), width),
+      y: Math.min(Math.max(y, y1 + minY), height),
+    };
+  };
+
+  private handleDragBoundRect = ({ x, y }: { x: number; y: number }) => {
+    let { x1, x2, y1, y2, width, height } = this.scaleToPreviewPixels(
+      this.state
+    );
+    let elemWidth = x2 - x1;
+    let elemHeight = y2 - y1;
+    return {
+      x: Math.max(Math.min(x, width - elemWidth), 0),
+      y: Math.max(Math.min(y, height - elemHeight), 0),
+    };
+  };
+
+  constructor(props: PreviewProps) {
+    super(props);
+    this.selectionRef = React.createRef<Konva.Shape>();
+    this.state = {
+      tlHover: false,
+      trHover: false,
+      blHover: false,
+      brHover: false,
+      dotHover: false,
+      rectHover: false,
+      ...props.initialRegion,
+    };
+  }
+
+  private handleDragMove(
+    elem: PreviewElem,
+    evt: Konva.KonvaEventObject<DragEvent>
+  ) {
+    let { x1, x2, y1, y2, width, height } = this.scaleToPreviewPixels(
+      this.state
+    );
+    if (evt.target instanceof Konva.Stage) {
+      return;
+    }
+
+    let { x: newX, y: newY } = evt.target.getAbsolutePosition();
+    let { width: elemWidth, height: elemHeight } = evt.target.getSize();
+    switch (elem) {
+      case "rect":
+        x1 = newX;
+        y1 = newY;
+        x2 = newX + elemWidth;
+        y2 = newY + elemHeight;
+        break;
+      case "tl":
+        x1 = newX;
+        y1 = newY;
+        break;
+      case "tr":
+        x2 = newX;
+        y1 = newY;
+        break;
+      case "bl":
+        x1 = newX;
+        y2 = newY;
+        break;
+      case "br":
+        x2 = newX;
+        y2 = newY;
+        break;
+    }
+    let newState = {
+      x1: x1 / width,
+      x2: x2 / width,
+      y1: y1 / height,
+      y2: y2 / height,
+    };
+    this.setSelection(newState);
+  }
+
+  private scaleToPreviewPixels({ x1, x2, y1, y2 }: any) {
+    let { w: width, h: height } = getThumbSizeLongestEdge(
+      this.props.maxWidth,
+      this.props.maxHeight,
+      this.props.image.width,
+      this.props.image.height
+    );
+    return {
+      x1: x1 * width,
+      x2: x2 * width,
+      y1: y1 * height,
+      y2: y2 * height,
+      width,
+      height,
+    };
+  }
+
+  componentDidMount(): void {
+    let speed = 40;
+    this.animation = new Konva.Animation(
+      (frame?: { timeDiff: number; time: number }) => {
+        if (!frame) {
+          return;
+        }
+        let angleDiff = (frame.time * speed) / 1000;
+        this.selectionRef.current.dashOffset(-angleDiff);
+      },
+      this.selectionRef.current.getLayer()
+    );
+    this.animation.start();
+  }
+
+  componentWillUnmount(): void {
+    this.animation && this.animation.stop();
+  }
+
+  setSelection(r: RectCoords) {
+    this.setState(r);
+    if (this.props.onSelectionChange) {
+      this.props.onSelectionChange(r);
+    }
+  }
+
+  getCursor() {
+    if (this.state.dotHover) {
+      return "pointer";
+    }
+    if (this.state.tlHover) {
+      return "nw-resize";
+    }
+    if (this.state.trHover) {
+      return "ne-resize";
+    }
+    if (this.state.blHover) {
+      return "sw-resize";
+    }
+    if (this.state.brHover) {
+      return "se-resize";
+    }
+    if (this.state.rectHover) {
+      return "move";
+    }
+    return "default";
+  }
+
+  render() {
+    const { image, regions } = this.props;
+    if (!image) {
+      return null;
+    }
+
+    const { x1, x2, y1, y2, width, height }: any = this.scaleToPreviewPixels(
+      this.state
+    );
+
+    const dots = regions.map((region: any, i: any) => {
+      let { x1, x2, y1, y2 } = region;
+      return {
+        // get middle of box and map to pixels
+        region,
+        x: width * ((x2 - x1) / 2 + x1),
+        y: height * ((y2 - y1) / 2 + y1),
+        key: i,
+      };
+    });
+
+    let gripSize = 40;
+    let gripOpacity = 0.3;
+    let gripOpacityOver = 0.6;
+    let darkOpacity = 0.3;
+
+    return (
+      <Stage
+        width={width}
+        height={height}
+        style={{
+          cursor: this.getCursor(),
+          width: width,
+          height: height,
+          margin: "auto",
+          marginBottom: "5%",
+        }}
+      >
+        <Layer key="img">
+          <Image image={image} width={width} height={height} />
+        </Layer>
+        <Layer key="selection">
+          {/* Selection box */}
+          <Rect
+            stroke="white"
+            strokeWidth={2}
+            x={x1}
+            y={y1}
+            width={x2 - x1}
+            height={y2 - y1}
+          />
+          <Rect
+            stroke="black"
+            draggable={true}
+            onDragMove={this.handleDragMoveRect}
+            dragBoundFunc={this.handleDragBoundRect}
+            onMouseOver={() => this.setState({ rectHover: true })}
+            onMouseOut={() => this.setState({ rectHover: false })}
+            opacity={0.8}
+            strokeWidth={2}
+            x={x1}
+            y={y1}
+            width={x2 - x1}
+            height={y2 - y1}
+            dash={[15, 15]}
+            ref={this.selectionRef}
+          />
+          {/* grips */}
+          <Rect
+            fill="black"
+            draggable={true}
+            onDragMove={this.handleDragMoveTl}
+            dragBoundFunc={this.handleDragBoundTl}
+            onMouseOver={() => this.setState({ tlHover: true })}
+            onMouseOut={() => this.setState({ tlHover: false })}
+            opacity={this.state.tlHover ? gripOpacityOver : gripOpacity}
+            width={gripSize}
+            height={gripSize}
+            x={x1}
+            y={y1}
+          />
+          <Rect
+            fill="black"
+            draggable={true}
+            onDragMove={this.handleDragMoveTr}
+            dragBoundFunc={this.handleDragBoundTr}
+            onMouseOver={() => this.setState({ trHover: true })}
+            onMouseOut={() => this.setState({ trHover: false })}
+            opacity={this.state.trHover ? gripOpacityOver : gripOpacity}
+            width={gripSize}
+            height={gripSize}
+            x={x2}
+            y={y1}
+            offsetX={gripSize}
+          />
+          <Rect
+            fill="black"
+            draggable={true}
+            onDragMove={this.handleDragMoveBl}
+            dragBoundFunc={this.handleDragBoundBl}
+            onMouseOver={() => this.setState({ blHover: true })}
+            onMouseOut={() => this.setState({ blHover: false })}
+            opacity={this.state.blHover ? gripOpacityOver : gripOpacity}
+            width={gripSize}
+            height={gripSize}
+            x={x1}
+            y={y2}
+            offsetY={gripSize}
+          />
+          <Rect
+            fill="black"
+            draggable={true}
+            onDragMove={this.handleDragMoveBr}
+            dragBoundFunc={this.handleDragBoundBr}
+            onMouseOver={() => this.setState({ brHover: true })}
+            onMouseOut={() => this.setState({ brHover: false })}
+            opacity={this.state.brHover ? gripOpacityOver : gripOpacity}
+            width={gripSize}
+            height={gripSize}
+            x={x2}
+            y={y2}
+            offsetY={gripSize}
+            offsetX={gripSize}
+          />
+          {/* Dark areas */}
+          <Rect
+            fill="black"
+            opacity={darkOpacity}
+            x={0}
+            y={0}
+            width={width}
+            height={y1}
+          />
+          <Rect
+            fill="black"
+            opacity={darkOpacity}
+            x={0}
+            y={y2}
+            width={width}
+            height={height - y2}
+          />
+          <Rect
+            fill="black"
+            opacity={darkOpacity}
+            x={0}
+            y={y1}
+            width={x1}
+            height={y2 - y1}
+          />
+          <Rect
+            fill="black"
+            opacity={darkOpacity}
+            x={x2}
+            y={y1}
+            width={width - x2}
+            height={y2 - y1}
+          />
+        </Layer>
+        <NodeGroup
+          data={dots}
+          keyAccessor={(r) => r.key}
+          start={(d, i) => ({ opacity: 0, x: -100, y: d.y })}
+          enter={(d, i) => ({
+            opacity: [1],
+            x: [d.x],
+            y: d.y,
+            timing: { delay: i * 100, duration: 300 },
+          })}
+        >
+          {(ds) => (
+            <Layer key="dots">
+              {ds.map(({ key, data, state: position }) => (
+                <Circle
+                  onClick={() => this.setSelection(data.region)}
+                  onTap={() => this.setSelection(data.region)}
+                  onMouseOver={() => this.setState({ dotHover: true })}
+                  onMouseOut={() => this.setState({ dotHover: false })}
+                  key={key}
+                  radius={7}
+                  {...position}
+                  stroke={this.props.dotColor}
+                  fill="white"
+                  strokeWidth={4}
+                />
+              ))}
+            </Layer>
+          )}
+        </NodeGroup>
+      </Stage>
+    );
+  }
+}
+
+export default Preview;

package/src/components/results/ItemResult.tsx

@@ -0,0 +1,155 @@
+import { Box, Button, Grid, Typography } from "@material-ui/core";
+import React from "react";
+import IconSupport from "common/assets/icons/support.svg";
+import IconLike from "common/assets/icons/icon_like.svg";
+import IconDisLike from "common/assets/icons/icon_dislike.svg";
+import IconShare from "common/assets/icons/Fill.svg";
+import IconBookmark from "common/assets/icons/book_mark.svg";
+import IconModalImage from "common/assets/icons/icon_modal_image.svg";
+
+interface Props {
+  dataItem: any;
+  handlerToggleModal?: any;
+  handleClose?: () => void;
+  handlerToggleModalShare?: () => void;
+  isHover?: boolean;
+  indexItem?: number;
+  onSearchImage?: any;
+  handlerFeedback?: any;
+}
+
+function ItemResult(props: Props) {
+  const {
+    dataItem,
+    handlerToggleModal,
+    handlerToggleModalShare,
+    isHover = false,
+    onSearchImage,
+    handlerFeedback,
+  } = props;
+  const { img, sku, title, main_image_link } = dataItem;
+
+  return (
+    <Box className="wrap-main-item-result">
+      <Box className="box-top">
+        {!isHover && (
+          <Box className="box-icon-modal">
+            <Button
+              onClick={(e: any) => {
+                e.preventDefault();
+                onSearchImage(main_image_link);
+                // handlerToggleModal();
+              }}
+            >
+              <img
+                src={IconModalImage}
+                alt="icon_modal"
+                width={21}
+                height={21}
+              />
+            </Button>
+          </Box>
+        )}
+
+        <Box className="box-image">
+          <Button
+            style={{ width: "100%", height: "100%", padding: 0, zIndex: 9 }}
+            onClick={handlerToggleModal}
+          >
+            <img
+              src={img?.url ? img?.url : main_image_link}
+              alt="image_item"
+              className="img-style"
+            />
+          </Button>
+          {isHover && (
+            <Box className="box-hover">
+              <Button>View item</Button>
+            </Box>
+          )}
+        </Box>
+      </Box>
+      <Box
+        className="box-content"
+        display={"flex"}
+        style={{ flexDirection: "column" }}
+      >
+        <Box className="box-top">
+          <Grid container justifyContent="space-between">
+            <Grid item xs={10}>
+              <Typography className="text-f8 max-line-1">SKU: {sku}</Typography>
+              <Typography className="text-f9 text-bold max-line-3">
+                {title}
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Button className="btn-item">
+                <img
+                  src={IconBookmark}
+                  alt="image_item"
+                  className="icon_action"
+                />
+              </Button>
+            </Grid>
+          </Grid>
+        </Box>
+
+        <Box className="box-bottom">
+          <Grid container justifyContent="space-between" alignItems="center">
+            <Grid item>
+              <Box display={"flex"} alignItems={"center"}>
+                <Button
+                  className="btn-item"
+                  onClick={() => handlerFeedback("like")}
+                >
+                  <img
+                    src={IconLike}
+                    alt="image_item"
+                    className="icon_action"
+                  />
+                </Button>
+                <Button
+                  className="btn-item"
+                  onClick={() => handlerFeedback("dislike")}
+                >
+                  <img
+                    src={IconDisLike}
+                    alt="image_item"
+                    className="icon_action"
+                  />
+                </Button>
+              </Box>
+            </Grid>
+            <Grid item>
+              <Box display={"flex"} alignItems={"center"}>
+                <Button className="btn-item" onClick={handlerToggleModalShare}>
+                  <img
+                    src={IconShare}
+                    alt="image_item"
+                    className="icon_action"
+                  />
+                </Button>
+                <Button className="btn-item">
+                  <Box
+                    className="box-gray text-center box-support"
+                    display={"flex"}
+                    justifyContent={"center"}
+                    alignItems={"center"}
+                  >
+                    <img
+                      src={IconSupport}
+                      alt="image_item"
+                      className="icon_support"
+                    />
+                  </Box>
+                </Button>
+              </Box>
+            </Grid>
+          </Grid>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export default ItemResult;