How to use ahooks - 10 common examples
To help you get started, we’ve selected a few ahooks examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
pingcap / tidb-dashboard / ui / lib / apps / Configuration / InlineEditor.tsx View on Github 
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, () => ({
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(
() =>
({
position: 'relative',
height: containerSize.height,
maxHeight: tableMaxHeight ?? 400,
width: tableWidth ?? 400,
} as React.CSSProperties),
[containerSize.height, tableMaxHeight, tableWidth]
)
const {
className: containerClassName,
style: containerStyle,
...containerRestPropsfunction 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) => w.message).join('\n\n')}</pre>
),
})
}
} catch (e) {
return falsefunction 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>
