How to use @umijs/hooks - 10 common examples
To help you get started, we’ve selected a few @umijs/hooks 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 / Statement / components / StatementsOverview.tsx View on Github 
detailPagePath,
}: Props) {
const { t } = useTranslation()
const { searchOptions, setSearchOptions } = useContext(SearchContext)
// combine the context to state
const [state, dispatch] = useReducer(reducer, {
...initState,
...searchOptions,
})
const [refreshTimes, setRefreshTimes] = useState(0)
const [showSettings, setShowSettings] = useState(false)
const [columns, setColumns] = useState([])
const [visibleColumnKeys, setVisibleColumnKeys] = useLocalStorageState(
VISIBLE_COLUMN_KEYS,
defColumnKeys
)
const [showFullSQL, setShowFullSQL] = useLocalStorageState(
SHOW_FULL_SQL,
false
)
useEffect(() => {
async function queryInstances() {
const res = await onFetchInstances()
dispatch({
type: 'save_instances',
payload: res || [],
})
if (res?.length === 1 && !state.curInstance) {const { searchOptions, setSearchOptions } = useContext(SearchContext)
// combine the context to state
const [state, dispatch] = useReducer(reducer, {
...initState,
...searchOptions,
})
const [refreshTimes, setRefreshTimes] = useState(0)
const [showSettings, setShowSettings] = useState(false)
const [columns, setColumns] = useState([])
const [visibleColumnKeys, setVisibleColumnKeys] = useLocalStorageState(
VISIBLE_COLUMN_KEYS,
defColumnKeys
)
const [showFullSQL, setShowFullSQL] = useLocalStorageState(
SHOW_FULL_SQL,
false
)
useEffect(() => {
async function queryInstances() {
const res = await onFetchInstances()
dispatch({
type: 'save_instances',
payload: res || [],
})
if (res?.length === 1 && !state.curInstance) {
dispatch({
type: 'change_instance',
payload: res[0].uuid,
})}
const sel = selection.current
sel.setChangeEvents(false)
sel.setAllItems(tableItems)
if (internalVal && internalVal.length > 0) {
sel.resetAllSelection(internalVal)
} else if (defaultSelectAll) {
sel.setAllSelectionSelected(true)
}
sel.setChangeEvents(true)
dataHasLoaded.current = true
// [defaultSelectAll, internalVal] is not needed
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [tableItems])
const getInstanceByKeys = usePersistFn((keys: string[]) => {
const keyToItemMap = {}
for (const item of tableItems) {
keyToItemMap[item.key] = item
}
return keys.map((key) => keyToItemMap[key])
})
const getInstanceByKey = usePersistFn((key: string) => {
return getInstanceByKeys([key])[0]
})
React.useImperativeHandle(ref, () => ({
getInstanceByKey,
getInstanceByKeys,
}))function InstanceSelect(
props: IInstanceSelectProps,
ref: React.Ref
) {
const [internalVal, setInternalVal] = useControllableValue(props)
const setInternalValPersist = usePersistFn(setInternalVal)
const {
enableTiFlash,
defaultSelectAll,
value, // only to exclude from restProps
onChange, // only to exclude from restProps
...restProps
} = props
const { t } = useTranslation()
const {
data: dataTiDB,
isLoading: loadingTiDB,
} = useClientRequest((reqConfig) =>
client.getInstance().getTiDBTopology(reqConfig)
)}
try {
const res = await client.getInstance().startProfiling(req)
navigate(`/instance_profiling/${res.data.id}`)
} catch (e) {
// FIXME
Modal.error({
content: e.message,
})
}
setSubmitting(false)
},
[navigate]
)
const handleRowClick = usePersistFn(
(rec, _idx, ev: React.MouseEvent) => {
openLink(`/instance_profiling/${rec.id}`, ev, navigate)
}
)
const historyTableColumns = useMemo(
() => [
{
name: t('instance_profiling.list.table.columns.targets'),
key: 'targets',
minWidth: 150,
maxWidth: 250,
onRender: (rec) => {
// TODO: Extract to utility function
const r: string[] = []
if (rec.target_stats.num_tidb_nodes) {}
sel.setChangeEvents(true)
dataHasLoaded.current = true
// [defaultSelectAll, internalVal] is not needed
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [tableItems])
const getInstanceByKeys = usePersistFn((keys: string[]) => {
const keyToItemMap = {}
for (const item of tableItems) {
keyToItemMap[item.key] = item
}
return keys.map((key) => keyToItemMap[key])
})
const getInstanceByKey = usePersistFn((key: string) => {
return getInstanceByKeys([key])[0]
})
React.useImperativeHandle(ref, () => ({
getInstanceByKey,
getInstanceByKeys,
}))
const renderValue = useCallback(
(selectedKeys) => {
if (
tableItems.length === 0 ||
!selectedKeys ||
selectedKeys.length === 0
) {
return nullconst dropdownOverlayRef = useRef(null)
const containerRef = useRef(null)
const overlay = useMemo(() => {
return (
<div>
{dropdownRender()}
</div>
)
}, [dropdownRender, overlayClassName, handleOverlayMouseDown])
useEventListener('mousedown', (ev: MouseEvent) => {
// Close the dropdown if click outside
if (!dropdownVisible) {
return
}
const hitElements = [dropdownOverlayRef.current, containerRef.current]
if (
hitElements.every(
(e) =>
!e ||
!ev.target ||
(!e.contains(ev.target as HTMLElement) && e !== ev.target)
)
) {
setDropdownVisible(false)
}
})function InstanceSelect(
props: IInstanceSelectProps,
ref: React.Ref
) {
const [internalVal, setInternalVal] = useControllableValue(props)
const setInternalValPersist = usePersistFn(setInternalVal)
const {
enableTiFlash,
defaultSelectAll,
value, // only to exclude from restProps
onChange, // only to exclude from restProps
...restProps
} = props
const { t } = useTranslation()
const {
data: dataTiDB,
isLoading: loadingTiDB,
} = useClientRequest((reqConfig) =>
client.getInstance().getTiDBTopology(reqConfig)function useSignInSubmit(
successRoute,
fnLoginForm: (form) => UserAuthenticateForm,
onFailure: () => void
) {
const { t } = useTranslation()
const [loading, setLoading] = useState(false)
const [error, setError] = useState(null)
const clearErrorMsg = useCallback(() => {
setError(null)
}, [])
const handleSubmit = usePersistFn(async (form) => {
try {
clearErrorMsg()
setLoading(true)
const r = await client.getInstance().userLogin(fnLoginForm(form), {
errorStrategy: ErrorStrategy.Custom,
})
auth.setAuthToken(r.data.token)
message.success(t('signin.message.success'))
singleSpa.navigateToUrl(successRoute)
} catch (e) {
if (!e.handled) {
setError(t('signin.message.error', { msg: e.message }))
onFailure()
}
} finally {
setLoading(false)const container = divRef.current
chart.current = await heatmapChart(
d3.select(container),
props.data,
props.dataTag,
props.onBrush,
props.onZoom
)
props.onChartInit(chart.current)
updateChartSize()
}
}
init()
}, [props, props.data, props.dataTag])
useEventListener('resize', () => {
updateChartSize()
})
return <div>
}
</div>
