empty Posts - Answer Overflow

empty

•Created by empty on 7/4/2024 in #front-end

problem with input type number

Hi guys, when the value of quantity is 0 and I enter 1 the input field display "01" while the quantity is 1. Can anyone help me explain why ? I'm using MUI. This case only occurs when I use type number. With type text, it worked

  const [quantity, setQuantity] = useState(0);
  const [stock, setStock] = useState(0);

  const handleOnChangeQuantity = (
    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    if (!e.target.value) return setQuantity(0);
    if (+e.target.value > stock) return setQuantity(stock);
    setQuantity(+e.target.value);
  };

  <TextFieldCustom
                type="number"
                fullWidth
                value={quantity}
                onChange={handleOnChangeQuantity}
                className={styles["input-number"]}
                inputProps={{ min: 0, max: stock }}
   />

  const [quantity, setQuantity] = useState(0);
  const [stock, setStock] = useState(0);

  const handleOnChangeQuantity = (
    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    if (!e.target.value) return setQuantity(0);
    if (+e.target.value > stock) return setQuantity(stock);
    setQuantity(+e.target.value);
  };

  <TextFieldCustom
                type="number"
                fullWidth
                value={quantity}
                onChange={handleOnChangeQuantity}
                className={styles["input-number"]}
                inputProps={{ min: 0, max: stock }}
   />

5 replies

KPCKevin Powell - Community

•Created by empty on 7/3/2024 in #front-end

truncate style does not work

7 replies

KPCKevin Powell - Community

•Created by empty on 6/26/2024 in #front-end

Problem with transition height

Hi guys, I'm trying to hide the tabs on scroll down and show on scroll up but I'm facing this problem. Can anyone help me? I'm using MUI and this is how I toggle the height.

<Box
 sx={{
   display: "grid",
   gridTemplateRows: isShowTabs ? "1fr" : "0fr",
   transition: "500ms grid-template-rows ease",
 }}
 >
  ......
 </Box>

<Box
 sx={{
   display: "grid",
   gridTemplateRows: isShowTabs ? "1fr" : "0fr",
   transition: "500ms grid-template-rows ease",
 }}
 >
  ......
 </Box>

18 replies

KPCKevin Powell - Community

•Created by empty on 6/19/2024 in #front-end

infinite scroll

Hi guys, I'm facing a problem with react-infinite-scroll-component. When I scroll to the bottom the fetchNext func is not called. Can anyone help me?

const WishList = () => {
  const [productList, setProductList] = useState<WishListProductResponse>();
  const [pagination, setPagination] = useState({
    page: 1,
    limit: 4,
  });

  const hasMore =
    typeof productList?.totalPages === "number"
      ? productList.totalPages !== pagination.page
      : false;

  const fetchNext = () => {
    setPagination({
      ...pagination,
      page: pagination.page + 1,
    });
  };

 useEffect(() => {
    const loadWishList = async () => {
      const result = await callAPIWithToken.get(
        "/api/merchant/products/favorite/",
        {
          params: {
            limit: pagination.limit,
            page: pagination.page,
          },
        }
      );

      if (result.data.success) {
        if (!productList?.data) {
          setProductList(result.data);
        } else {
          setProductList({
            ...result.data,
            data: [...productList.data, ...result.data.data],
          });
        }
      }
    };
    loadWishList();
  }, [pagination.page]);


 return (
    <>
        <>
        <InfiniteScroll
          dataLength={productList?.totalItems}
          next={fetchNext}
          hasMore={hasMore}
          height="100%"
          loader={
            <LinearProgress
              style={{
                marginBottom: "20px",
                width: "calc(100% - 16px)",
              }}
            />
          }
        >
          <Box mb={4}>
            <Grid container spacing={2}>
              {productList?.data.map((item, index) => (
               ....
              ))}
            </Grid>
          </Box>
        </InfiniteScroll>
      </>
    </>
  );
};

export default WishList;

const WishList = () => {
  const [productList, setProductList] = useState<WishListProductResponse>();
  const [pagination, setPagination] = useState({
    page: 1,
    limit: 4,
  });

  const hasMore =
    typeof productList?.totalPages === "number"
      ? productList.totalPages !== pagination.page
      : false;

  const fetchNext = () => {
    setPagination({
      ...pagination,
      page: pagination.page + 1,
    });
  };

 useEffect(() => {
    const loadWishList = async () => {
      const result = await callAPIWithToken.get(
        "/api/merchant/products/favorite/",
        {
          params: {
            limit: pagination.limit,
            page: pagination.page,
          },
        }
      );

      if (result.data.success) {
        if (!productList?.data) {
          setProductList(result.data);
        } else {
          setProductList({
            ...result.data,
            data: [...productList.data, ...result.data.data],
          });
        }
      }
    };
    loadWishList();
  }, [pagination.page]);


 return (
    <>
        <>
        <InfiniteScroll
          dataLength={productList?.totalItems}
          next={fetchNext}
          hasMore={hasMore}
          height="100%"
          loader={
            <LinearProgress
              style={{
                marginBottom: "20px",
                width: "calc(100% - 16px)",
              }}
            />
          }
        >
          <Box mb={4}>
            <Grid container spacing={2}>
              {productList?.data.map((item, index) => (
               ....
              ))}
            </Grid>
          </Box>
        </InfiniteScroll>
      </>
    </>
  );
};

export default WishList;

1 replies

KPCKevin Powell - Community

•Created by empty on 4/22/2024 in #front-end

get Text and link (if exists) when users highlight text on screen.

16 replies

KPCKevin Powell - Community

•Created by empty on 4/19/2024 in #front-end

Sticky position

6 replies

KPCKevin Powell - Community

•Created by empty on 3/12/2024 in #front-end

Can not move around on mobile devices if user touch input field

Hi guys, I'm facing a problem. When my app is on mobile and I zoom in the screen I can not swipe left and right if I touch the input field. Is there any solution to fix it? I have try to use touch-action: none on input field but it does not work

1 replies

KPCKevin Powell - Community

•Created by empty on 1/31/2024 in #front-end

Styling position

Hi guys, I'm trying to style the same position for the money after the text without set a fixed width. For example: Subtotal: $100 Total : $100.000 Is there any way to solve this problem? here is the codepen https://codepen.io/minh-thinh/pen/rNRJZNW

6 replies

Gaming

Programming