react#useImperativeHandle TypeScript Examples

ForwardCurrentTime: ForwardRefRenderFunction<GameCurrentTimeHandle, GameCurrentTimeProps> = (props, ref) => {
  const refMain = useRef<HTMLSpanElement>(null);
  const refMs = useRef<HTMLSpanElement>(null);

  useImperativeHandle(ref, () => ({
    updateTime(timeInMs) {
      const [timeHMS, timeMS] = formatGameTime(timeInMs, true).split(".");
      if (refMain.current) refMain.current.textContent = timeHMS;
      if (refMs.current) refMs.current.textContent = "." + timeMS;
    },
  }));
  return (
    <Typography component={"span"} sx={{ userSelect: "all" }}>
      <span ref={refMain}>0:00</span>

      <Typography component={"span"} sx={{ color: (theme) => darken(theme.palette.text.primary, 0.6) }} ref={refMs}>
        <span ref={refMs}>.000</span>
      </Typography>
    </Typography>
  );
}

Password = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement | null>) => {
	const { currentType, onReset, RevealPasswordButton } = useRevealPassword();
	const inputRef = useRef<HTMLInputElement | null>(null);

	useImperativeHandle(ref, () => inputRef.current);

	function handleClick() {
		if (inputRef.current) {
			inputRef.current.focus();
			const valueLength = inputRef.current.value.length || 0;
			inputRef.current.setSelectionRange(valueLength, valueLength);
		}
	}

	return (
		<Input
			{...props}
			type={currentType}
			ref={inputRef}
			onBlur={(event: React.FocusEvent<HTMLInputElement>) => {
				onReset();
				if (props.onBlur) {
					props.onBlur(event);
				}
			}}
			after={<RevealPasswordButton onClick={() => handleClick()} disabled={props.disabled} />}
		/>
	);
})

FloatingLabelInput = forwardRef<
  FloatingLabelInputRef,
  FloatingLabelInputProps
>(function FloatingLabelInput(props, ref) {
  const { name, label, errorMessage, inputProps } = props;

  const inputRef = useRef<HTMLInputElement | null>(null);
  const [value, setValue] = useState("");
  const isStickyLabel = value.length > 0;

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current?.focus(),
    clear: () => setValue(""),
  }));

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    setValue(newValue);
  };

  return (
    <label className="group">
      <div className="relative">
        <input
          {...inputProps}
          ref={(node) => {
            inputRef.current = node;
            props.inputRef?.(node);
          }}
          name={name}
          value={value}
          onChange={handleChange}
          className={classNames(
            "block w-full rounded border bg-transparent px-4 pt-6 pb-2",
            "border-2 border border-dark focus:border-primary",
            "text-base text-lighter transition-colors",
            {
              "border-danger": !!errorMessage,
            },
            inputProps.className
          )}
        />
        <span
          className={classNames(
            "absolute left-4 -translate-y-1/2 font-bold",
            "transition-all group-focus-within:top-4 group-focus-within:text-xs",
            {
              "top-1/2": !isStickyLabel,
              "top-4 text-xs": isStickyLabel,
              "text-danger": !!errorMessage,
            }
          )}
        >
          {label}
        </span>
      </div>

      {errorMessage && (
        <span className="block px-4 pt-4 text-sm text-danger" role="alert">
          <span aria-hidden className="inline-block w-[2ch]">
            ?
          </span>{" "}
          {errorMessage}
        </span>
      )}
    </label>
  );
})

test('Should work useImperativeHandle hook', () => {
  const fn = jest.fn()
  const useStore = () => {
    const [, setU] = useState(0)
    const [v, setV] = useState(0)
    const ref = useRef(5)
    useImperativeHandle(ref, () => v, [v])
    fn(ref.current)
    return {
      ref,
      setU,
      setV
    }
  }
  const A = () => {
    const { ref, setU, setV } = useBetween(useStore)
    return (
      <>
        <i>{ref.current}</i>
        <button onClick={() => setU(u => u + 1)} />
        <button onClick={() => setV(v => v + 1)} />
      </>
    )
  }
  const el = mount(<A />)
  const i = () => el.find('i').text()
  const setU = () => el.find('button').at(0).simulate('click')
  const setV = () => el.find('button').at(1).simulate('click')

  expect(fn).toBeCalledWith(5)
  expect(i()).toBe('0')
  setV()
  expect(i()).toBe('1')
  setV()
  expect(i()).toBe('2')
  setU()
  expect(i()).toBe('2')
});

RcClickTrigger = forwardRef(function <T> (
    props: IRcClickTriggerProps<T>,
    ref: Ref<HTMLSpanElement>
): JSX.Element {

    const {
        children,
        disabled,
        data,
        captureOptions,
        triggerId,
        disableToggleClose,
        ...extra
    } = props;

    const triggerRef = useRef<HTMLSpanElement>(null);

    useImperativeHandle(ref, () => triggerRef.current as HTMLSpanElement, [triggerRef.current]);

    const [clickTrigger, result] = useTrigger(
        (...args) => new Trigger(...args),
        {disabled, captureOptions, data, disableToggleClose},
        triggerRef,
        'click',
        triggerId
    );

    return (
        <span {...extra} ref={triggerRef} data-rc-id={`trigger___${clickTrigger.getId()}`}>
            {typeof children === 'function' ? children(result) : children}
        </span>
    );
}) as <T>(props: IRcClickTriggerProps<T>) => JSX.Element

DatePicker = forwardRef((props: any, ref: any) => {
  const [pickerInstance, setPickerInstance] = useState<Picker | null>(null);

  // mount effect wont work on model, need to call this after onAfterOpen event
  useImperativeHandle(ref, () => ({
    init: () => {
      const ele = document.querySelector(
        ".js-inline-picker"
      ) as HTMLElement | null;
      if (!ele) return;
      setPickerInstance(
        new Picker(ele, {
          inline: true,
          rows: 2,
        })
      );
    },
    getValue: () => {
      if (!pickerInstance) return "";
      return pickerInstance.getDate();
    },
  }));

  return (
    <Wrapper>
      <div className="js-inline-picker" />
    </Wrapper>
  );
})

export function TextLoadingBarImpl(
  { prettyEntityName }: LoadingBarProps,
  ref: React.Ref<LoadingBarHandle>
) {
  // value between 0 and 1
  const [fractionCompleted, setFractionCompleted] = useState(0);

  useImperativeHandle(ref, () => ({ setFractionCompleted }));

  const progressWidth = 20;

  let progressText = '';

  for (let i = 0; i < progressWidth; i++) {
    if (i < Math.floor(progressWidth * fractionCompleted)) {
      progressText += '=';
    } else {
      progressText += '\u00a0'; // &nbsp;
    }
  }

  const percentText = Math.floor(fractionCompleted * 100)
    .toString()
    .padStart(3, ' ');

  return (
    <span>
      [<Sub>{progressText}</Sub>]{' '}
      <span style={{ fontWeight: percentText === '100' ? 'bold' : undefined }}>
        {percentText}%{' '}
      </span>
      <LoadingTitle>{prettyEntityName}</LoadingTitle>
    </span>
  );
}

export function LegacyMultipleFilesForm(
  { fieldList, onFinish, onFinishFailed }: MultipleFilesFormProps,
  ref: React.Ref<FormInstance>
): React.ReactElement {
  const [form] = Form.useForm();

  useImperativeHandle(ref, () => form);

  const handleFinish = (data: UploadFormData): void => {
    const formData = processFileData(data);
    onFinish?.(formData);
  };

  return (
    <Form
      form={form}
      name="filesForm"
      data-testid="files-form"
      onFinish={handleFinish}
      onFinishFailed={onFinishFailed}
    >
      {fieldList?.map((item) => (
        <Form.Item key={item.name} name={item.name} label={item.name}>
          <Upload
            maxCount={isMultipleFiles(item.type) ? null : 1}
            beforeUpload={() => false}
          >
            <Button icon={<UploadOutlined />}>upload</Button>
          </Upload>
        </Form.Item>
      ))}
    </Form>
  );
}

ModalRegister = forwardRef<HTMLButtonElement, ButtonProps>(
  (props, ref) => {
    const [display, setDisplay] = useState(false)

    useImperativeHandle(ref, (): any => {
      return {
        openModal: () => open(),
        close: () => close()
      }
    })

    const open = () => {
      setDisplay(true)
    }

    const close = () => {
      setDisplay(false)
    }

    if (display) {
      return ReactDOM.createPortal(
        <div className={'modal-content'}>
          <div onClick={close} className={'modal-backdrop'}></div>
          <DisplayContext.Provider value={setDisplay}>
            <div className={'modal-box'}>{props.children}</div>
          </DisplayContext.Provider>
        </div>,
        document.getElementById('modal-root')
      )
    }
    return null
  }
)

HookModal: React.ForwardRefRenderFunction<THookModalRef, IHookModalProps> = ({ config, afterClose }, ref) => {
  const [visible, setVisible] = useState(true);
  const [mergedConfig, setMergedConfig] = useState({ ...defaultConfig, ...config });

  const handleClose = () => setVisible(false);

  useImperativeHandle(ref, () => ({
    destroy: handleClose,
    update: (newConfig: IModalStaticFuncConfig) => {
      setMergedConfig((originMergedConfig) => ({
        ...originMergedConfig,
        ...newConfig,
      }));
    },
  }));

  return <ConfirmModal visible={visible} close={handleClose} {...mergedConfig} afterClose={afterClose} />;
}

Checkbox = React.forwardRef(
  ({ label, value, className, id, ...rest }: CheckboxProps, ref) => {
    const checkboxRef = React.useRef<HTMLInputElement>(null)

    useImperativeHandle(ref, () => checkboxRef.current)
    return (
      <label
        className={clsx("flex items-center cursor-pointer", className)}
        htmlFor={id}
      >
        <input
          type="checkbox"
          ref={checkboxRef}
          className="form-checkbox w-[20px] h-[20px] rounded-base text-violet-60 focus:ring-0 mr-small border-grey-30"
          value={value}
          id={id}
          {...rest}
        />
        {label}
      </label>
    )
  }
)

Slides = React.forwardRef<SlidesRef, CarouselProps>(
  (props, ref) => {
    const carouselRef = useRef<CarouselRef>(null);

    useImperativeHandle(
      ref,
      () => ({
        next() {
          carouselRef.current?.next();
        },
        prev() {
          carouselRef.current?.prev();
        },
      }),
      []
    );

    return (
      <Carousel
        className="slides"
        ref={carouselRef}
        {...props}
        dots={false}
        swipe={false}
        adaptiveHeight={true}
        infinite={false}
        beforeChange={(current, next) => {
          console.log(current, next, carouselRef.current?.innerSlider);
        }}
      >
        {props.children}
      </Carousel>
    );
  }
)

ContextMenu = React.forwardRef<
    IContextMenuHandles,
    IContextMenuProps
>(({ anchorRef, renderContextMenu }, ref) => {
    const { anchorPoint, show, contextMenuRef, hide } = useContextMenu(
        anchorRef
    );

    useImperativeHandle(ref, () => ({
        hide,
    }));

    if (!show) {
        return null;
    }

    return (
        <Overlay
            render={() => (
                <div
                    className="ContextMenu"
                    style={{
                        top: anchorPoint.y,
                        left: anchorPoint.x,
                        position: 'fixed',
                        zIndex: 1000,
                    }}
                    ref={contextMenuRef}
                    onClick={hide}
                >
                    {renderContextMenu()}
                </div>
            )}
        />
    );
})

ModalForm = forwardRef(
  (
    { type, formProps, onSave, afterClose, children, ...rest }: ModalFormProps,
    ref,
  ) => {
    const [form] = Form.useForm();
    const tg = useI18NPrefix('global');
    useImperativeHandle(ref, () => form);

    const onOk = useCallback(() => {
      form.submit();
    }, [form]);

    const onAfterClose = useCallback(() => {
      form.resetFields();
      afterClose && afterClose();
    }, [form, afterClose]);

    return (
      <Modal
        {...rest}
        title={
          type === CommonFormTypes.SaveAs
            ? tg('button.saveAs')
            : `${type ? tg(`modal.title.${type}`) : ''}${rest.title}`
        }
        onOk={onOk}
        afterClose={onAfterClose}
      >
        <Form form={form} onFinish={onSave} {...formProps}>
          {children}
        </Form>
      </Modal>
    );
  },
)

TestComponent = forwardRef(function TestComponentImpl(props, ref) {
    const wallet = useWallet();
    useImperativeHandle(
        ref,
        () => ({
            getWalletContextState() {
                return wallet;
            },
        }),
        [wallet]
    );
    return null;
})

Component: React.ForwardRefRenderFunction<
  EditPolicyAccessDrawerRef,
  EditPolicyAccessDrawerProps
> = (props, ref) => {
  const { onClose } = props
  const [policy, setPolicy] = useState<IPermissionPolicy>(__defaultPolicy)
  const [dataSource, setDataSource] = useState<IPermissionAccess[]>([])

  const [visible, setVisible] = useState(false)
  const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([])

  // ref
  useImperativeHandle(ref, () => {
    return {
      // 打开抽屉
      open: (policy: IPermissionPolicy) => {
        services.permissionAccess.find_all_ext_status({ id: policy.id }).then((hr) => {
          setDataSource(hr.data.resource)
          setSelectedRowKeys(hr.data.resource.filter((item) => item.status).map((item) => item.id))
        })
        setPolicy(policy)
        setVisible(true)
      },
    }
  })

  // 关闭抽屉
  const closeDrawer = useCallback(() => {
    onClose && onClose()
    setVisible(false)
  }, [onClose])

  const handleSave = useCallback(async () => {
    console.log(policy)
    services.permissionPolicy.update_access({ id: policy.id, access: selectedRowKeys })
    closeDrawer()
  }, [policy, selectedRowKeys, closeDrawer])

  return (
    <Drawer
      title="访问规则配置"
      width={720}
      onClose={closeDrawer}
      visible={visible}
      bodyStyle={{ paddingBottom: 80 }}
    >
      <Form layout="vertical" requiredMark={false}>
        <Form.Item>
          <Table
            rowKey="id"
            rowSelection={{
              selectedRowKeys,
              onChange: (keys) => setSelectedRowKeys(keys as number[]),
            }}
            columns={columns}
            dataSource={dataSource}
            size="small"
          />
        </Form.Item>
        <Form.Item>
          <Space>
            <Button onClick={closeDrawer}>关闭</Button>
            <Button onClick={handleSave} type="primary">
              保存
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Drawer>
  )
}

Input: React.RefForwardingComponent<InputRef, InputProps> = (
  { name, icon, containerStyle = {}, ...rest },
  ref,
) => {
  const inputElementRef = useRef<any>(null);

  const { registerField, defaultValue = '', fieldName, error } = useField(name);
  const inputValueRef = useRef<InputValueReference>({ value: defaultValue });

  const [isFocused, setIsFocused] = useState(false);
  const [isFilled, setIsFilled] = useState(false);

  const handleInputFocus = useCallback(() => {
    setIsFocused(true);
  }, []);

  const handleInputBlur = useCallback(() => {
    setIsFocused(false);

    setIsFilled(!!inputValueRef.current.value);
  }, []);

  useImperativeHandle(ref, () => ({
    focus() {
      inputElementRef.current.focus();
    },
  }));

  useEffect(() => {
    registerField<string>({
      name: fieldName,
      ref: inputValueRef.current,
      path: 'value',
      setValue(ref: any, value) {
        inputValueRef.current.value = value;
        inputElementRef.current.setNativeProps({ text: value });
      },
      clearValue() {
        inputValueRef.current.value = '';
        inputElementRef.current.clear();
      },
    });
  }, [fieldName, registerField]);

  return (
    <Container style={containerStyle} isFocused={isFocused} isErrored={!!error}>
      <Icon isFilled={isFilled} isFocused={isFocused} name={icon} size={20} />
      <TextInput
        ref={inputElementRef}
        keyboardAppearance="dark"
        defaultValue={defaultValue}
        onFocus={handleInputFocus}
        onBlur={handleInputBlur}
        onChangeText={value => {
          inputValueRef.current.value = value;
        }}
        {...rest}
      />
    </Container>
  );
}

Container = <
RecordType extends DripTableRecordTypeBase = DripTableRecordTypeBase,
ExtraOptions extends DripTableExtraOptions = DripTableExtraOptions,
>(props: DripTableGeneratorProps<RecordType, ExtraOptions>, ref: React.ForwardedRef<DripTableGeneratorHandler>) => {
  if (props.schema && props.schema.columns.some(c => c.component || c.options)) {
    props = {
      ...props,
      schema: {
        ...props.schema,
        columns: props.schema.columns.map((column) => {
          // 兼容旧版本数据
          if ('ui:type' in column || 'ui:props' in column) {
            const key = column.key;
            if ('ui:type' in column) {
              console.warn(`[DripTable] Column ${key} "ui:type" is deprecated, please use "component" instead.`);
            }
            if ('ui:props' in column) {
              console.warn(`[DripTable] Column ${key} "ui:props" is deprecated, please use "options" instead.`);
            }
            return {
              ...Object.fromEntries(Object.entries(column).filter(([k]) => k !== 'ui:type' && k !== 'ui:props')),
              options: column['ui:props'] || column.options || void 0,
              component: column['ui:type'] || column.component,
            } as typeof column;
          }
          return column;
        }),
      },
    };
  }

  const wrapper = useRef(null);
  const initialState = defaultState();
  const store = useState(initialState);
  const context = useTableRoot(props, store, wrapper);

  useImperativeHandle(ref, () => context);

  const WrapperRef = forwardRef<GeneratorWrapperHandler, DripTableGeneratorProps<RecordType, ExtraOptions> & { store: GlobalStore }>(Wrapper);

  return (
    <ConfigProvider locale={zhCN}>
      <Ctx.Provider {...props} value={context}>
        <WrapperRef ref={wrapper} {...props} store={store} />
      </Ctx.Provider>
    </ConfigProvider>
  );
}

_Popover: React.ForwardRefRenderFunction<PopoverImperativeHandle | undefined, PopoverProps> = (
  {
    hideOnClick = true,
    onHide,
    onShow,
    triggerTarget,
    triggerMode = 'click',
    placement = 'bottom-start',
    children,
    offset = [0, 8],
    trigger,
    className,
    disabled,
    flipEnabled = true,
  },
  ref
) => {
  const tippyRef = useRef<Instance>()

  useImperativeHandle(ref, () => ({
    hide: () => tippyRef.current?.hide(),
    show: () => tippyRef.current?.show(),
  }))

  return (
    <Tippy
      maxWidth="100vw"
      disabled={disabled}
      trigger={triggerMode}
      hideOnClick={hideOnClick}
      interactive
      animation
      triggerTarget={triggerTarget}
      onCreate={(instance) => {
        tippyRef.current = instance
      }}
      onTrigger={onTrigger}
      onShow={(instance) => {
        onTrigger(instance)
        onShow?.()
      }}
      onHide={(instance) => {
        const box = instance.popper?.firstElementChild
        requestAnimationFrame(() => {
          box?.classList.remove('popover-enter-active')
          box?.classList.add('popover-exit-active')

          setTimeout(() => {
            instance.unmount()
            onHide?.()
          }, EXIT_ANIMATION_DURATION)
        })
      }}
      render={(attrs) => (
        <ContentContainer {...attrs} className={className}>
          {children}
        </ContentContainer>
      )}
      popperOptions={{
        modifiers: [{ name: 'flip', enabled: flipEnabled }],
      }}
      placement={placement}
      offset={offset}
    >
      <TriggerContainer tabIndex={0}>{trigger}</TriggerContainer>
    </Tippy>
  )
}

CreditCardForm = React.forwardRef<HTMLFormElement, Props>(({ onSubmit }, ref) => {
  const innerRef = useRef<HTMLFormElement>(null);

  const { control, formState, handleSubmit } = useForm<CreditCardFormData>({
    defaultValues: { ccNumber: '', ccExp: '', ccCsc: '' },
  });

  // Override standard form methods, this works for now:
  useImperativeHandle(ref, () => ({
    ...(innerRef.current ?? new HTMLFormElement()),
    checkValidity: () => innerRef.current?.checkValidity() ?? false,
    reportValidity: () => innerRef.current?.reportValidity() ?? false,
    submit: () => {
      handleSubmit(onSubmit)();
    },
  }));

  return (
    <form ref={innerRef} onSubmit={handleSubmit(onSubmit)}>
      <Controller
        control={control}
        name="ccNumber"
        render={({ field }) => (
          <NumberFormat
            fullWidth
            required
            autoComplete="cc-number"
            customInput={TextField}
            error={'ccNumber' in formState.errors}
            format="#### #### #### ####"
            label="Number"
            margin="normal"
            {...field}
          />
        )}
      />
      <Grid container spacing={2}>
        <Grid item xs={6}>
          <Controller
            control={control}
            name="ccExp"
            render={({ field }) => (
              <NumberFormat
                fullWidth
                required
                autoComplete="cc-csc"
                customInput={TextField}
                error={'ccExp' in formState.errors}
                format="## / ##"
                label="Expiry date"
                margin="normal"
                {...field}
              />
            )}
          />
        </Grid>
        <Grid item xs={6}>
          <Controller
            control={control}
            name="ccCsc"
            render={({ field }) => (
              <NumberFormat
                fullWidth
                required
                autoComplete="cc-csc"
                customInput={TextField}
                error={'ccCsc' in formState.errors}
                format="###"
                label="CVC"
                margin="normal"
                {...field}
              />
            )}
          />
        </Grid>
      </Grid>
    </form>
  );
})

function Input(props: InputProps, ref: any) {
  const {
    type,
    onChange,
    closeStyle,
    closeAble = true,
    className,
    ...rest
  } = props;
  const [value, setValue] = useState('');
  useImperativeHandle(
    ref,
    () => ({
      setValue,
    }),
    [setValue],
  );

  const change = (event: any) => {
    setValue(event.target.value);
    onChange && onChange(event.target.value);
  };

  const clean = () => {
    setValue('');
    onChange && onChange(undefined);
  };
  return (
    <div className={`${styles['container']} ${className}`}>
      <input
        type={type || 'text'}
        onChange={change}
        className={styles['common-input']}
        {...rest}
        value={value}
      />
      {value !== '' && closeAble && (
        <img
          src={deleteIcon}
          style={closeStyle}
          onClick={clean}
          className={styles['close-icon']}
        />
      )}
    </div>
  );
}

RcFocusTrigger = forwardRef(function <T> (
    props: IRcFocusTriggerProps<T>,
    ref: Ref<HTMLSpanElement>
): JSX.Element {

    const {
        children,
        disabled,
        data,
        captureOptions,
        triggerId,
        disableToggleClose,
        ...extra
    } = props;

    const triggerRef = useRef<HTMLSpanElement>(null);
    const [focusTrigger, result] = useTrigger(
        (...args) => new Trigger(...args),
        {disabled, captureOptions, data, disableToggleClose},
        triggerRef,
        'click',
        triggerId
    );

    useImperativeHandle(ref, () => triggerRef.current as HTMLSpanElement, [triggerRef.current]);

    const handleFocus = useCallback(() => focusTrigger.showPopper(), []);


    return (
        <span
            {...extra}
            ref={triggerRef}
            data-rc-id={`trigger___${focusTrigger.getId()}`}
            onFocusCapture={handleFocus}
        >
            {typeof children === 'function' ? children(result) : children}
        </span>
    );
}) as <T>(props: IRcFocusTriggerProps<T>) => JSX.Element

ReactFrappeChart = forwardRef((props: Props, parentRef) => {
  const ref = useRef<HTMLDivElement>(null)
  const chart = useRef<any>(null)
  const initialRender = useRef<boolean>(true)
  const { onDataSelect } = props

  useImperativeHandle(parentRef, () => ({
    export: () => {
      if (chart && chart.current) {
        chart.current.export()
      }
    },
  }))

  useEffect(() => {
    chart.current = new Chart(ref.current, {
      isNavigable: onDataSelect !== undefined,
      ...props,
    })
    if (onDataSelect) {
      chart.current.parent.addEventListener(
        'data-select',
        (e: SelectEvent & React.SyntheticEvent) => {
          e.preventDefault()
          onDataSelect(e)
        }
      )
    }
  }, [])

  useEffect(() => {
    if (initialRender.current) {
      initialRender.current = false
      return
    }
    chart.current.update(props.data)
  }, [props.data])

  return <div ref={ref} />
})

Table = <T extends object>(props: TableProps<T>) => {
  const {
    columns,
    data,
    initialSortBy,
    initialFilterBy,
    pageCount = 0,
    pageSize = 20,
    fetchData,
    disableFilters = false,
    renderPagination,
    renderExpanded,
    tableRef
  } = props;

  const stateReducer = (nextState: any, action: any, prevState: any) => {
    if (action.type === 'toggleSortBy' || action.type === 'setGlobalFilter') {
      return { ...nextState, pageIndex: 0 };
    }
    return nextState;
  };

  const instance = useTable(
    {
      columns,
      data,
      disableMultiSort: true,
      manualSortBy: Boolean(fetchData),
      manualPagination: Boolean(fetchData),
      manualFilters: Boolean(fetchData),
      autoResetSortBy: false,
      disableFilters,
      pageCount,
      stateReducer,
      initialState: {
        sortBy: initialSortBy ?? [],
        pageSize,
        pageIndex: 0,
        filters: initialFilterBy ?? [],
        globalFilter: []
      }
    },
    useFilters,
    useSortBy,
    useExpanded,
    usePagination
  );

  useImperativeHandle(tableRef, () => instance);

  const {
    state: { sortBy, pageIndex, filters }
  } = instance;

  useEffect(() => {
    fetchData &&
      fetchData({
        sort: sortBy,
        page: pageIndex + 1,
        pageSize,
        filters
      });
  }, [fetchData, sortBy, filters, pageIndex, pageSize]);

  return (
    <div className={classes.root}>
      <div className={classes.tableInner}>
        <UsaTable {...instance.getTableProps()} bordered={false}>
          <TableHead<T> {...instance} />
          <TableBody<T> {...instance} renderExpanded={renderExpanded} />
        </UsaTable>
      </div>
      {props.noResults && (
        <NoResults message={props.noResultsMessage!}></NoResults>
      )}
      {renderPagination && renderPagination(instance)}
    </div>
  );
}

FirstTimeNotice = React.forwardRef((props: {
  id: string;
  title: string;
  description: string;
  confirmButtonTitle?: string;
  confirmButtonRed?: boolean;
}, ref: React.Ref<FirstTimeNoticeHandle>) => {
  const classes = useStyles();
  const dialogId = `notice-${props.id}`;
  const noticeStatus = useSelector<ReduxStateAdmin, string | undefined>(state => state.account.account.account?.attrs?.[dialogId], shallowEqual);
  const [dontShowAgain, setDontShowAgain] = useState(noticeStatus !== ConfirmedButShowAgain);
  const isHidden = noticeStatus === ConfirmedAndDontShowAgain;
  const isHiddenOnFirstRender = useRef(isHidden);
  const [dialogState, setDialogState] = useState<((confirmed: boolean, dontShowAgain: boolean) => void) | undefined>(undefined);
  useImperativeHandle(ref, () => ({
    invoke: isHidden ? () => Promise.resolve(true) : async () => {
      const dialogResult = await new Promise<{ confirmed: boolean, dontShowAgain: boolean }>(resolve =>
        setDialogState(() => (confirmed, dontShowAgain) =>
          resolve({ confirmed, dontShowAgain })));
      if (dialogResult.confirmed) {
        const newNoticeStatus = dialogResult.dontShowAgain ? ConfirmedAndDontShowAgain : ConfirmedButShowAgain;
        if (newNoticeStatus !== noticeStatus)
          // Update in the background
          ServerAdmin.get().dispatchAdmin().then(dispatcher => dispatcher.accountAttrsUpdateAdmin({
            accountAttrsUpdateAdmin: {
              attrs: { [dialogId]: newNoticeStatus },
            }
          }));
      }
      return dialogResult.confirmed;
    }
  }), [isHidden, noticeStatus]); // eslint-disable-line react-hooks/exhaustive-deps

  if (isHiddenOnFirstRender.current) return null;

  const dialogConfirm = (confirmed: boolean) => {
    dialogState?.(confirmed, dontShowAgain);
    setDialogState(undefined);
  };
  return (
    <Dialog
      open={!!dialogState}
      onClose={() => dialogConfirm(false)}
    >
      <DialogTitle>{props.title}</DialogTitle>
      <DialogContent>
        <DialogContentText>{props.description}</DialogContentText>
      </DialogContent>
      <DialogActions>
        <FormControlLabel
          label='Do not show this message again'
          className={classes.dontShowAgainCheckbox}
          control={(
            <Checkbox
              size='small'
              color='default'
              checked={dontShowAgain}
              onChange={e => setDontShowAgain(!dontShowAgain)}
            />
          )}
        />
        <Button onClick={() => dialogConfirm(false)}>Back</Button>
        <Button onClick={() => dialogConfirm(true)}
          color={props.confirmButtonRed ? undefined : 'primary'}
          className={classNames(props.confirmButtonRed && classes.dontShowAgainCheckboxRed)}
        >{props.confirmButtonTitle || 'Continue'}</Button>
      </DialogActions>
    </Dialog>
  );
})

SheetWrap = forwardRef(
  (
    {
      data,
      children,
      setOptions,
      ...props
    }: {
      children: React.ReactNode;
      setOptions: (options: any) => void;
      data: SheetWrapData;
    } & SheetProps,
    ref: ForwardedRef<SheetWrapInstance>,
  ) => {
    const page = getCurrentPage();
    const sheetRef = useRef<SheetInstance>(null);
    const [promiseFn, setPromiseFn] = useState<any>({
      resolve: () => {},
      reject: () => {},
    });
    const [sheetProps, setSheetProps] = useState<Partial<SheetProps>>({});
    useEffect(() => {
      data[page] = {
        fn: ({ maskClosable, ...options }) =>
          new Promise((resolve, reject) => {
            setOptions(options);
            setSheetProps({ maskClosable });
            sheetRef.current?.setVisible(true);
            setPromiseFn({ reject, resolve });
          }),
        setVisible: sheetRef.current?.setVisible,
      };
    }, [data, page, setOptions]);
    useImperativeHandle(
      ref,
      () => ({ promiseRef: promiseFn, sheetRef: sheetRef.current }),
      [promiseFn],
    );
    return (
      <Sheet ref={sheetRef} {...props} {...sheetProps}>
        {children}
      </Sheet>
    );
  },
)

function QuaternaryButtonComponent<TagName extends AllowedTags>(
  {
    id,
    children,
    style,
    className,
    reverse,
    responsiveLabelClass,
    tag = 'button',
    ...props
  }: ButtonProps<TagName> & QuandaryButtonProps,
  ref?: Ref<ButtonElementType<TagName>>,
): ReactElement {
  const anchorRef = useRef<ButtonElementType<TagName>>(null);
  useImperativeHandle(ref, () => anchorRef?.current);
  const [isHovered, setIsHovered] = useState(false);
  const onLabelClick = (event: React.MouseEvent<HTMLLabelElement>): void => {
    event.preventDefault();
    anchorRef?.current?.click();
  };
  const labelProps =
    tag === 'a'
      ? {
          onMouseOver: () => setIsHovered(true),
          onMouseLeave: () => setIsHovered(false),
          onClick: onLabelClick,
        }
      : {};
  const labelDisplay = responsiveLabelClass ?? 'flex';

  return (
    <div
      style={style}
      className={classNames(
        { reverse },
        props.buttonSize,
        'btn-quaternary',
        'flex',
        'flex-row',
        'items-stretch',
        'select-none',
        className,
      )}
    >
      <Button
        {...props}
        id={id}
        tag={tag}
        ref={anchorRef}
        className={classNames(tag === 'a' && isHovered && 'hover')}
      />
      {children && (
        <label
          htmlFor={id}
          {...labelProps}
          className={classNames(
            'items-center font-bold cursor-pointer typo-callout',
            labelDisplay,
          )}
        >
          {children}
        </label>
      )}
    </div>
  );
}

TriggerPosHandle = forwardRef<TriggerPosRef>((_props, ref) => {
  const [draggingTP, setDraggingTP] = useState(false)
  const xScale = useRecoilValue(xScaleSelector)
  const height = useRecoilValue(plotHeightSelector)
  const [triggerPos, setTriggerPos] = useRecoilState(useTriggerPos.send)

  const xDomain = useRecoilValue(xDomainSelector)
  useImperativeHandle(ref, () => ({
    onMouseUp() {
      setDraggingTP(false)
    },
    onMouseMove(e) {
      if (draggingTP) {
        setTriggerPos(xScale.invert(e.nativeEvent.offsetX) / xDomain[1])
      }
    }
  }))
  const scaledX = xScale(triggerPos * xDomain[1])

  return (
    <>
      <line
        className="triggerPos"
        x1={scaledX}
        x2={scaledX}
        y1={height - margin.bottom}
        y2={margin.top}
      ></line>
      <line
        className="triggerPosHandle"
        onMouseDown={(e) => {
          e.preventDefault()
          e.stopPropagation()
          setDraggingTP(true)
        }}
        x1={scaledX}
        x2={scaledX}
        y1={height - margin.bottom}
        y2={margin.top}
      ></line>
      <text fill="currentColor" x={scaledX} dx="-1em" dy="1em">
        {Math.round(triggerPos * 100)}%
      </text>
    </>
  )
})

export function LegacyAdvancedBrickLibrary(
  { onDraggingChange, type = LayerType.BRICK }: AdvancedBrickLibraryProps,
  ref: React.Ref<any>
): React.ReactElement {
  const { t } = useTranslation(NS_NEXT_BUILDER);
  const { appId, brickList, storyList } = useBuilderUIContext();

  const [q, setQ] = useState<string>();
  const [category, setCategory] = useState<string>();
  const searchRef = useRef<any>();
  const rootNode = useBuilderNode({ isRoot: true });

  const handleSearch = (value: string): void => {
    setQ(value);
  };

  const handleSearchWithGroup = (value: string, category: string): void => {
    searchRef.current?.handleSearch(value);
    setCategory(category);
  };

  useImperativeHandle(ref, () => ({
    handleSearchWithGroup,
  }));

  const filteredBricks = React.useMemo(() => {
    return filterBricks({
      q,
      category,
      brickList: brickList ?? [],
      storyList,
      appId,
      rootNode,
      layerType: type,
      limit:
        type === LayerType.BRICK
          ? brickSearchResultLimit
          : widgetSearchResultLimit,
    });
  }, [storyList, q, category, brickList, appId, rootNode, type]);

  return (
    <div>
      <SearchComponent
        ref={searchRef}
        inputStyle={{ width: 260 }}
        placeholder={t(K.SEARCH_BRICKS_IN_LIBRARY)}
        onSearch={handleSearch}
      />
      {!isEmpty(filteredBricks) ? (
        <div
          className={styles.brickWrapper}
          style={{
            gridTemplateColumns: `repeat(${
              type !== LayerType.BRICK ? 4 : 3
            }, 1fr)`,
          }}
        >
          {filteredBricks.map((item) => (
            <li key={`${item.type}:${item.id}`} className={styles.itemWrapper}>
              <BrickItem
                layerType={type}
                brick={item}
                onDraggingChange={onDraggingChange}
              />
            </li>
          ))}
        </div>
      ) : (
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
      )}
    </div>
  );
}