Top 10 Examples of "ahooks in functional component" in JavaScript

function InlineEditor({
  value,
  displayValue,
  title,
  onSave,
}: IInlineEditorProps) {
  const [isVisible, setIsVisible] = useState(false)
  const [inputVal, setInputVal] = useState(displayValue)
  const [isPosting, setIsPosting] = useState(false)

  const handleCancel = useCallback(() => {
    setIsVisible(false)
    setInputVal(displayValue)
  }, [displayValue])

  const handleSave = usePersistFn(async () => {
    if (!onSave) {
      setIsVisible(false)
      return
    }
    try {
      setIsPosting(true)
      // PD only accept modified config in the same value type,
      // i.e. true => false, but not true => "false"
      const r = await onSave(valueWithSameType(inputVal, value))
      if (r !== false) {
        // When onSave returns non-false, input value is not reverted and only popup is hidden
        setIsVisible(false)
      } else {
        // When onSave returns false, popup is not hidden and value is reverted
        setInputVal(displayValue)
      }

function MultiSelect(props: IMultiSelectProps) {
  const [internalVal, setInternalVal] = useControllableValue(props)
  const setInternalValPersist = usePersistFn(setInternalVal)
  const {
    items,
    filterFn,
    selectedValueTransKey,
    columnTitle,
    placeholder,
    value, // only to exclude from restProps
    onChange, // only to exclude from restProps
    ...restProps
  } = props

  const { t } = useTranslation()

  const columns: IColumn[] = useMemo(
    () => [
      {

},
    [onFilterChange]
  )

  const inputRef = useRef<input>(null)

  React.useImperativeHandle(ref, () =&gt; ({
    focusFilterInput() {
      inputRef.current?.focus()
    },
  }))

  // FIXME: We should put Input inside ScrollablePane after https://github.com/microsoft/fluentui/issues/13557 is resolved

  const containerRef = useRef(null)
  const containerSize = useSize(containerRef)

  const paneStyle = useMemo(
    () =&gt;
      ({
        position: 'relative',
        height: containerSize.height,
        maxHeight: tableMaxHeight ?? 400,
        width: tableWidth ?? 400,
      } as React.CSSProperties),
    [containerSize.height, tableMaxHeight, tableWidth]
  )

  const {
    className: containerClassName,
    style: containerStyle,
    ...containerRestProps

function MultiSelect(props: IMultiSelectProps) {
  const [internalVal, setInternalVal] = useControllableValue(props)
  const setInternalValPersist = usePersistFn(setInternalVal)
  const {
    items,
    filterFn,
    selectedValueTransKey,
    columnTitle,
    placeholder,
    value, // only to exclude from restProps
    onChange, // only to exclude from restProps
    ...restProps
  } = props

  const { t } = useTranslation()

  const columns: IColumn[] = useMemo(
    () => [

function Value({ item, onSaved }: IValueProps) {
  const handleSave = usePersistFn(async (newValue) => {
    try {
      const resp = await client.getInstance().configurationEdit({
        id: item.id,
        kind: item.kind,
        new_value: newValue,
      })
      if ((resp?.data?.warnings?.length ?? 0) > 0) {
        Modal.warning({
          title: 'Edit configuration is partially done',
          content: (
            <pre>{resp.data.warnings?.map((w) =&gt; w.message).join('\n\n')}</pre>
          ),
        })
      }
    } catch (e) {
      return false

function BaseAntCheckboxGroupHeader(props: IGroupHeaderProps) {
  const _classNames = getClassNames(props.styles, {
    theme: props.theme!,
    className: props.className,
    selected: props.selected,
    isCollapsed: props.group?.isCollapsed,
    compact: props.compact,
  })

  const _onHeaderClick = usePersistFn(() => {
    if (props.onToggleSelectGroup) {
      props.onToggleSelectGroup(props.group!)
    }
  })

  const _onToggleSelectGroupClick = usePersistFn(
    (ev: React.MouseEvent) => {
      if (props.onToggleSelectGroup) {
        props.onToggleSelectGroup(props.group!)
      }
      ev.preventDefault()
      ev.stopPropagation()
    }
  )

  const _onToggleCollapse = usePersistFn(
    (ev: React.MouseEvent) => {
      if (props.onToggleCollapse) {
        props.onToggleCollapse(props.group!)
      }
      ev.stopPropagation()
      ev.preventDefault()

function BaseAntCheckboxGroupHeader(props: IGroupHeaderProps) {
  const _classNames = getClassNames(props.styles, {
    theme: props.theme!,
    className: props.className,
    selected: props.selected,
    isCollapsed: props.group?.isCollapsed,
    compact: props.compact,
  })

  const _onHeaderClick = usePersistFn(() => {
    if (props.onToggleSelectGroup) {
      props.onToggleSelectGroup(props.group!)
    }
  })

  const _onToggleSelectGroupClick = usePersistFn(
    (ev: React.MouseEvent) => {
      if (props.onToggleSelectGroup) {
        props.onToggleSelectGroup(props.group!)
      }
      ev.preventDefault()
      ev.stopPropagation()
    }
  )

  const _onToggleCollapse = usePersistFn(

export default function ReportHistory() {
  const navigate = useNavigate()
  const { t } = useTranslation()
  const { data, isLoading, error } = useClientRequest((reqConfig) =>
    client.getInstance().diagnoseReportsGet(reqConfig)
  )
  const columns = useMemo(() => tableColumns(t), [t])

  const handleRowClick = usePersistFn(
    (rec, _idx, ev: React.MouseEvent) => {
      openLink(`/system_report/detail?id=${rec.id}`, ev, navigate)
    }
  )

  return (
    
  )
}

if (props.onToggleSelectGroup) {
      props.onToggleSelectGroup(props.group!)
    }
  })

  const _onToggleSelectGroupClick = usePersistFn(
    (ev: React.MouseEvent) => {
      if (props.onToggleSelectGroup) {
        props.onToggleSelectGroup(props.group!)
      }
      ev.preventDefault()
      ev.stopPropagation()
    }
  )

  const _onToggleCollapse = usePersistFn(
    (ev: React.MouseEvent) => {
      if (props.onToggleCollapse) {
        props.onToggleCollapse(props.group!)
      }
      ev.stopPropagation()
      ev.preventDefault()
    }
  )

  return (
    <div style="{props.viewport">
      </div>

setInputVal(displayValue)
      setIsVisible(false)
    } finally {
      setIsPosting(false)
    }
  })

  const handleInputValueChange = useCallback((e) => {
    setInputVal(e.target.value)
  }, [])

  useEffect(() => {
    setInputVal(displayValue)
  }, [displayValue])

  const renderPopover = usePersistFn(() => {
    return (
      
        <div>
          <input disabled="{isPosting}" size="small" value="{inputVal}">
        </div>
        <div>
          
            </div>