react-use#useSetState TypeScript Examples

useUpdate = <T extends object>(
  initState: NullableValue<T>,
): [NullableValue<T>, UpdaterFn<NullableValue<T>>, UpdateFn<NullableValue<T>>, ResetFn] => {
  const [state, _update] = useSetState<NullableValue<T>>(initState || {});
  // 使用ref，避免updater的更新方法中，在闭包里使用上次的state
  const ref = React.useRef(state);
  ref.current = state;

  const update: any = React.useCallback(
    (args: any) => {
      // 扩展 update 的使用, 使用方法同 useState((preState) => preState + 1)
      if (isFunction(args)) {
        return _update((prev) => args(prev));
      } else {
        return _update(args);
      }
    },
    [_update],
  );

  const updater: any = React.useMemo(() => {
    const result = {};
    Object.keys(ref.current).forEach((k) => {
      result[k] = (patch: Function | any) => {
        const newPart = patch instanceof Function ? patch(ref.current[k], ref.current) : patch;
        ref.current[k] = newPart;
        return _update({ [k]: newPart } as Partial<NullableValue<T>>);
      };
    });
    return result;
  }, [_update]);

  const reset = React.useCallback(() => _update(initState), [_update, initState]);

  return [state, updater, update, reset];
}

VariationForm: React.VFC<Props> = ({ onChange, product }) => {
  const variations = getVariations(product);

  const [formState, setFormState] = useSetState<Record<string, string | undefined>>(
    mapValues(variations, () => undefined),
  );

  useEffect(() => {
    const variation = product.variations?.nodes?.find((variation) =>
      variation?.attributes?.nodes?.every(
        (attribute) => attribute?.name != null && attribute.value === formState[attribute.name],
      ),
    );
    onChange(variation ?? undefined);
  }, [formState, onChange, product]);

  return (
    <div>
      {Object.entries(variations).map(([name, attribute]) => (
        <Box key={name} sx={{ my: 2 }}>
          <Typography gutterBottom variant="h4">
            {startCase(name.replace(/^pa_/, ''))}
          </Typography>
          <Stack direction="row" spacing={1}>
            {attribute.options.map((option) =>
              name === 'pa_color' ? (
                <ColorSwatch
                  key={option}
                  color={option}
                  selected={option === formState[name]}
                  onClick={() => {
                    setFormState({ [name]: option });
                  }}
                />
              ) : (
                <Button
                  key={option}
                  circle
                  color={option === formState[name] ? 'primary' : 'secondary'}
                  variant={option === formState[name] ? 'contained' : 'outlined'}
                  onClick={() => {
                    setFormState({ [name]: option });
                  }}
                >
                  {option}
                </Button>
              ),
            )}
          </Stack>
        </Box>
      ))}
    </div>
  );
}

Layout = ({ prefixCls: customizePrefixCls, fixed, className, style, children }: LayoutProps) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const prefixCls = usePrefixCls('layout', customizePrefixCls);
  const [localLayoutState, setLayoutState] = useSetState<LayoutState>(initLayoutState);
  const [localContentState, setContentState] = useSetState<ContentState>(initContentState);
  const [siders, removeSider, updateSiders, margin] = useSiders();
  const { layoutState: parentLayoutState } = useContext(LayoutContext);

  useEffect(() => {
    setLayoutState({ fixed });
  }, [fixed, setLayoutState]);

  const mergedStyle = {
    ...{ marginLeft: margin[0], marginRight: margin[1] },
    ...(parentLayoutState.fixed ? { height: 'calc(100% - 60px)' } : {}),
    ...style,
  };

  return (
    <LayoutContext.Provider
      value={{
        contentState: localContentState,
        layoutState: localLayoutState,
        setLayoutState,
        setContentState,
        removeSider,
        updateSiders,
      }}
    >
      <section
        ref={containerRef}
        className={classNames(prefixCls, className, {
          [`${prefixCls}-has-sider`]: siders.length > 0,
          [`${prefixCls}-fixed`]: fixed,
        })}
        style={mergedStyle}
      >
        {children}
      </section>
    </LayoutContext.Provider>
  );
}

QRGenerator = () => {
  const { t } = useTranslation("qr_generator");
  const imgRef = useRef<HTMLImageElement>(null);
  const fileFieldRef = React.useRef<HTMLInputElement>(null);

  const [showPreview, setShowPreview] = useState(false);
  const [qrCode, setQrCode] = useState<QrCodeWithLogo | null>(null);
  const [state, setState] = useSetState<EnhancedEncodeParam>({
    typeEn: "Stores/Shopping Malls",
    typeZh: "商店/商場",
    nameEn: "CityWalk",
    nameZh: "荃新天地",
    type: "IMPORT",
    venueCode: "0",
    venueID: "WHBvLDSa",
    addressEn: "1 & 18 Yeung Uk Rd, Tsuen Wan, Hong Kong",
    addressZh: "荃灣楊屋道1號",
    customImg: null,
  });

  const isVenueCodeValid = state.venueCode.length === 1;
  const isVenueIdValid = state.venueID.length === 8;

  const isValidData = isVenueCodeValid && isVenueIdValid;

  useEffect(() => {
    if (!imgRef.current || !isValidData) return;
    const encodedString = qrEncode(state);

    const qrCode = new QrCodeWithLogo({
      image: imgRef.current,
      content: encodedString,
      width: 380,
      logo: {
        src: state.customImg || baseIcon,
        logoRadius: 8,
        borderSize: 0,
      },
    });

    qrCode.toImage();
    setQrCode(qrCode);
  }, [state, isValidData]);

  const handleFileSelected = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || []);
    const img = head(files);
    if (!img) {
      setState({ customImg: null });
    } else {
      const reader = new FileReader();
      reader.readAsDataURL(img);
      reader.onload = () => setState({ customImg: String(reader.result) });
    }
  };

  const handleDownload = () => {
    if (!qrCode) return;
    qrCode.downloadImage("QR Code");
  };

  return (
    <PageWrapper>
      <Header backPath="/" name={t("name")} />
      <ContentWrapper id="scroll">
        <StyledForm>
          <StyledTextField
            label={t("form.typeZh")}
            value={state.typeZh}
            onChange={(e) => {
              setState({ typeZh: e.target.value });
            }}
          />
          <StyledTextField
            label={t("form.typeEn")}
            value={state.typeEn}
            onChange={(e) => {
              setState({ typeEn: e.target.value });
            }}
          />
          <StyledTextField
            label={t("form.nameZh")}
            value={state.nameZh}
            onChange={(e) => {
              setState({ nameZh: e.target.value });
            }}
          />
          <StyledTextField
            label={t("form.nameEn")}
            value={state.nameEn}
            onChange={(e) => {
              setState({ nameEn: e.target.value });
            }}
          />
          <StyledTextField
            label={t("form.addressZh")}
            value={state.addressZh}
            onChange={(e) => {
              setState({ addressZh: e.target.value });
            }}
          />
          <StyledTextField
            label={t("form.addressEn")}
            value={state.addressEn}
            onChange={(e) => {
              setState({ addressEn: e.target.value });
            }}
          />
          <StyledTextField
            label={t("form.type")}
            value={state.type}
            onChange={(e) => {
              setState({ type: e.target.value });
            }}
          />
          <StyledTextField
            label={t("form.venue_code")}
            value={state.venueCode}
            onChange={(e) => {
              setState({ venueCode: e.target.value });
            }}
            error={!isVenueCodeValid}
            inputProps={{
              maxLength: 1,
            }}
          />
          <StyledTextField
            label={t("form.venue_id")}
            value={state.venueID}
            onChange={(e) => {
              setState({ venueID: e.target.value });
            }}
            error={!isVenueIdValid}
            inputProps={{
              maxLength: 8,
            }}
          />
          <StyledInputWrapper>
            <div>{t("form.custom_icon")}</div>
            <StyledFileInput
              type="file"
              name="avatar"
              accept="image/png, image/jpeg"
              ref={fileFieldRef}
              onChange={handleFileSelected}
            />
          </StyledInputWrapper>
        </StyledForm>
        <Divider />
        <Actions>
          <ButtonGroup aria-label="outlined primary button group">
            <Button
              variant="contained"
              size="small"
              startIcon={<SaveIcon />}
              onClick={handleDownload}
              disabled={!isValidData}
            >
              {t("global:button.save")}
            </Button>
            <Button
              variant="contained"
              size="small"
              startIcon={<SaveIcon />}
              onClick={() => {
                setShowPreview(true);
              }}
              disabled={!isValidData}
            >
              {t("global:button.preview")}
            </Button>
          </ButtonGroup>
        </Actions>
        <StyledQrCode ref={imgRef} alt="qrCode" />
      </ContentWrapper>
      {showPreview && (
        <QRPreview
          data={state}
          onLeave={() => {
            setShowPreview(false);
          }}
        />
      )}
    </PageWrapper>
  );
}