@vef-framework/hooks 1.0.122 → 1.0.123

package/cjs/use-normalized-menu-items.cjs

@@ -0,0 +1,48 @@
+"use strict";
+'use strict';
+
+var react = require('react');
+
+"use strict";
+function normalizeMenuItem(item) {
+  if (item.type === "item") {
+    return {
+      type: "item",
+      key: item.key,
+      label: item.label,
+      disabled: item.disabled,
+      icon: item.icon,
+      extra: item.extra
+    };
+  } else if (item.type === "submenu") {
+    return {
+      type: "submenu",
+      key: item.key,
+      label: item.label,
+      disabled: item.disabled,
+      icon: item.icon,
+      children: item.children.map(normalizeMenuItem)
+    };
+  } else if (item.type === "group") {
+    return {
+      type: "group",
+      key: item.key,
+      label: item.label,
+      children: item.children.map(normalizeMenuItem)
+    };
+  } else {
+    return {
+      type: "divider",
+      key: item.key
+    };
+  }
+}
+function useNormalizedMenuItems(items) {
+  return react.useMemo(
+    () => items.map(normalizeMenuItem),
+    [items]
+  );
+}
+
+exports.normalizeMenuItem = normalizeMenuItem;
+exports.useNormalizedMenuItems = useNormalizedMenuItems;

package/cjs/use-normalized-options.cjs

@@ -0,0 +1,104 @@
+"use strict";
+'use strict';
+
+var shared = require('@vef-framework/shared');
+var react = require('react');
+
+"use strict";
+function useNormalizedDataOptions(options, {
+  labelKey = "label",
+  valueKey = "value",
+  childrenKey = "children",
+  descriptionKey = "description",
+  disabledKey = "disabled",
+  defaultToFirst = false
+}, {
+  isTree = false,
+  isGrouped = false,
+  parsePinyin = false,
+  selectedOptionValues = []
+} = {}) {
+  return react.useMemo(() => {
+    const selectedOptionValuesSet = new Set(selectedOptionValues);
+    const isGroupedOptions = !isTree && isGrouped;
+    const normalizeOption = (option, isTopLevel = false) => {
+      const label = option[labelKey];
+      if (shared.isNullish(label)) {
+        if (labelKey === "label") {
+          throw new shared.VefError(-10001, `The label value of the option is required.`);
+        }
+        throw new shared.VefError(-10001, `The label value pointed by '${labelKey}' of the option is required.`);
+      }
+      const value = option[valueKey];
+      if (shared.isNullish(value)) {
+        if (valueKey === "value") {
+          throw new shared.VefError(-10002, `The value of the option is required.`);
+        }
+        throw new shared.VefError(-10002, `The value pointed by '${valueKey}' of the option is required.`);
+      }
+      const children = option[childrenKey];
+      const description = option[descriptionKey];
+      const disabled = option[disabledKey] ?? false;
+      const normalizedOption = {
+        ...option,
+        label,
+        value,
+        children,
+        description,
+        disabled
+      };
+      if (parsePinyin) {
+        const { labelText, descriptionText } = normalizedOption;
+        if (shared.isString(label) || shared.isString(labelText)) {
+          normalizedOption.labelPinyin = shared.parsePinyinFirstLetter(
+            shared.isString(label) ? label : labelText
+          ).join("");
+        }
+        if (shared.isString(description) || shared.isString(descriptionText)) {
+          normalizedOption.descriptionPinyin = shared.parsePinyinFirstLetter(
+            shared.isString(description) ? description : descriptionText
+          ).join("");
+        }
+      }
+      if ((!isTopLevel || !isGroupedOptions) && selectedOptionValuesSet.has(value)) {
+        selectedOptionValuesSet.delete(value);
+      }
+      if (shared.isArray(normalizedOption.children)) {
+        normalizedOption.children = normalizedOption.children.map((option2) => normalizeOption(option2));
+      }
+      return normalizedOption;
+    };
+    const normalizedOptions = options.map((option) => normalizeOption(option, true));
+    const missingOptionValues = Array.from(selectedOptionValuesSet);
+    if (!defaultToFirst) {
+      return [normalizedOptions, missingOptionValues];
+    }
+    if (isGroupedOptions) {
+      const firstNonEmptyGroupOption = normalizedOptions.find((item) => shared.isArray(item.children) && item.children.length > 0);
+      return [
+        normalizedOptions,
+        missingOptionValues,
+        firstNonEmptyGroupOption?.children?.[0]
+      ];
+    }
+    return [
+      normalizedOptions,
+      missingOptionValues,
+      normalizedOptions[0]
+    ];
+  }, [
+    childrenKey,
+    defaultToFirst,
+    descriptionKey,
+    disabledKey,
+    isGrouped,
+    isTree,
+    labelKey,
+    options,
+    parsePinyin,
+    // selectedOptionValues,
+    valueKey
+  ]);
+}
+
+exports.useNormalizedDataOptions = useNormalizedDataOptions;

package/cjs/use-option-filter.cjs

@@ -0,0 +1,20 @@
+"use strict";
+'use strict';
+
+var shared = require('@vef-framework/shared');
+var react = require('react');
+
+"use strict";
+function useOptionFilter(filterable, filterFromRemote) {
+  return react.useMemo(() => {
+    if (!filterable) {
+      return;
+    }
+    if (filterFromRemote) {
+      return false;
+    }
+    return (filterValue, option) => (shared.isString(option.label) && option.label.includes(filterValue) || shared.isString(option.labelText) && option.labelText.includes(filterValue) || option.labelPinyin?.includes(filterValue) || option.value.includes(filterValue) || shared.isString(option.description) && option.description.includes(filterValue) || shared.isString(option.descriptionText) && option.descriptionText.includes(filterValue) || option.descriptionPinyin?.includes(filterValue)) ?? false;
+  }, [filterable, filterFromRemote]);
+}
+
+exports.useOptionFilter = useOptionFilter;

package/cjs/use-remote-filter.cjs

@@ -0,0 +1,39 @@
+"use strict";
+'use strict';
+
+var shared = require('@vef-framework/shared');
+var react = require('react');
+
+"use strict";
+function useRemoteFilter(enabled, apiParams, keywordKey = "keyword") {
+  const [filterKeyword, setFilterKeyword] = react.useState();
+  const mergedApiParams = react.useMemo(() => {
+    if (!enabled) {
+      return apiParams;
+    }
+    const params = {
+      ...apiParams
+    };
+    const keywordToUse = shared.trim(filterKeyword);
+    if (keywordToUse) {
+      params[keywordKey] = keywordToUse;
+    }
+    return params;
+  }, [
+    enabled,
+    apiParams,
+    filterKeyword,
+    keywordKey
+  ]);
+  const handleInputKeyword = react.useMemo(() => {
+    if (!enabled) {
+      return;
+    }
+    return shared.debounce({ delay: 500 }, (keyword) => {
+      setFilterKeyword(keyword);
+    });
+  }, [enabled]);
+  return [mergedApiParams, handleInputKeyword];
+}
+
+exports.useRemoteFilter = useRemoteFilter;

package/cjs/use-shallow-callback.cjs

@@ -0,0 +1,13 @@
+"use strict";
+'use strict';
+
+var react = require('react');
+var useShallowMemo = require('./use-shallow-memo.cjs');
+
+"use strict";
+function useShallowCallback(callback, dependencies) {
+  const memoizedDependencies = useShallowMemo.useShallowMemo(() => dependencies, dependencies);
+  return react.useCallback(callback, memoizedDependencies);
+}
+
+exports.useShallowCallback = useShallowCallback;

package/cjs/use-shallow-memo.cjs

@@ -0,0 +1,21 @@
+"use strict";
+'use strict';
+
+var shared = require('@vef-framework/shared');
+var react = require('react');
+
+"use strict";
+function useShallowMemo(factory, dependencies) {
+  const lastDependencies = react.useRef();
+  const signal = react.useRef(0);
+  if (lastDependencies.current === void 0 || !isEqual(dependencies, lastDependencies.current)) {
+    signal.current += 1;
+  }
+  lastDependencies.current = dependencies;
+  return react.useMemo(factory, [signal.current]);
+}
+function isEqual(one, another) {
+  return one.length === another.length && one.every((value, index) => shared.isShallowEqual(value, another[index]));
+}
+
+exports.useShallowMemo = useShallowMemo;

package/cjs/use-shallow-selector.cjs

@@ -0,0 +1,16 @@
+"use strict";
+'use strict';
+
+var shared = require('@vef-framework/shared');
+var react = require('react');
+
+"use strict";
+function useShallowSelector(selector) {
+  const prevSelectedState = react.useRef();
+  return (state) => {
+    const nextSelectedState = selector(state);
+    return shared.isShallowEqual(prevSelectedState.current, nextSelectedState) ? prevSelectedState.current : prevSelectedState.current = nextSelectedState;
+  };
+}
+
+exports.useShallowSelector = useShallowSelector;

package/cjs/use-singleton.cjs

@@ -0,0 +1,16 @@
+"use strict";
+'use strict';
+
+var shared = require('@vef-framework/shared');
+var react = require('react');
+
+"use strict";
+function useSingleton(factory) {
+  const singleton = react.useRef();
+  if (shared.isNullish(singleton.current)) {
+    singleton.current = factory();
+  }
+  return singleton.current;
+}
+
+exports.useSingleton = useSingleton;

package/cjs/use-theme-tokens.cjs

@@ -0,0 +1,13 @@
+"use strict";
+'use strict';
+
+var antd = require('antd');
+
+"use strict";
+const { useToken } = antd.theme;
+function useThemeTokens() {
+  const { token } = useToken();
+  return token;
+}
+
+exports.useThemeTokens = useThemeTokens;

package/cjs/use-transient-store.cjs

@@ -0,0 +1,34 @@
+"use strict";
+'use strict';
+
+var shared = require('@vef-framework/shared');
+var react = require('react');
+
+"use strict";
+function useTransientStore({ subscribe, getState }, {
+  selector = (state) => state,
+  equalityFn = shared.isShallowEqual,
+  listener
+} = {}) {
+  const stateRef = react.useRef();
+  if (!stateRef.current) {
+    stateRef.current = selector(getState());
+  }
+  react.useEffect(
+    () => subscribe(
+      selector,
+      (state, prevState) => {
+        stateRef.current = state;
+        listener?.(state, prevState);
+      },
+      {
+        fireImmediately: false,
+        equalityFn
+      }
+    ),
+    [equalityFn, listener, selector, subscribe]
+  );
+  return stateRef;
+}
+
+exports.useTransientStore = useTransientStore;

package/cjs/use-window-size.cjs

@@ -0,0 +1,21 @@
+"use strict";
+'use strict';
+
+var ahooks = require('ahooks');
+
+"use strict";
+function useWindowSize() {
+  const [size, setSize] = ahooks.useRafState(() => ({
+    width: window.innerWidth,
+    height: window.innerHeight
+  }));
+  ahooks.useEventListener("resize", () => {
+    setSize({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+  });
+  return size;
+}
+
+exports.useWindowSize = useWindowSize;

package/esm/index.js

@@ -0,0 +1,29 @@
+"use strict";
+import './lib.js';
+export { useAuthorizedItems } from './use-authorized-items.js';
+export { useColorTokens, useDefaultColorTokens, useSemanticColorTokens } from './use-color-tokens.js';
+export { useComputedActionButtons } from './use-computed-action-buttons.js';
+export { useComputedOptions } from './use-computed-options.js';
+export { DisabledContextProvider, useContextDisabled } from './use-context-disabled.js';
+export { useDataQuery } from './use-data-query.js';
+export { useDeepCallback } from './use-deep-callback.js';
+export { useDeepMemo } from './use-deep-memo.js';
+export { useDeepSelector } from './use-deep-selector.js';
+export { useFallbackOptions } from './use-fallback-options.js';
+export { useGapSizeNormalizer } from './use-gap-size-normalizer.js';
+export { useNormalizedGapSize } from './use-normalized-gap-size.js';
+export { normalizeMenuItem, useNormalizedMenuItems } from './use-normalized-menu-items.js';
+export { useNormalizedDataOptions } from './use-normalized-options.js';
+export { useOptionFilter } from './use-option-filter.js';
+export { useRemoteFilter } from './use-remote-filter.js';
+export { useShallowCallback } from './use-shallow-callback.js';
+export { useShallowMemo } from './use-shallow-memo.js';
+export { useShallowSelector } from './use-shallow-selector.js';
+export { useSingleton } from './use-singleton.js';
+export { useThemeTokens } from './use-theme-tokens.js';
+export { useTransientStore } from './use-transient-store.js';
+export { useWindowSize } from './use-window-size.js';
+export { useClickAway, useMeasure } from '@uidotdev/usehooks';
+export { useDeepCompareEffect as useDeepEffect, useDeepCompareLayoutEffect as useDeepLayoutEffect, useSize as useElementSize, useEventListener, useKeyPress, useMount, useUnmount, useUpdateEffect, useUpdateLayoutEffect, useUpdate as useUpdater } from 'ahooks';
+
+"use strict";

package/esm/lib.js

@@ -0,0 +1,5 @@
+"use strict";
+export { useClickAway, useMeasure } from '@uidotdev/usehooks';
+export { useDeepCompareEffect as useDeepEffect, useDeepCompareLayoutEffect as useDeepLayoutEffect, useSize as useElementSize, useEventListener, useKeyPress, useMount, useUnmount, useUpdateEffect, useUpdateLayoutEffect, useUpdate as useUpdater } from 'ahooks';
+
+"use strict";

package/esm/use-authorized-items.js

@@ -0,0 +1,24 @@
+"use strict";
+import { useAuthContext } from '@vef-framework/core';
+import { useMemo } from 'react';
+
+"use strict";
+function useAuthorizedItems(items) {
+  const { checkPermission } = useAuthContext();
+  return useMemo(
+    () => items?.filter((item) => {
+      const { permissions } = item;
+      if (!permissions) {
+        return true;
+      }
+      const checkMode = item.checkMode ?? "any";
+      if (checkMode === "any") {
+        return permissions.some((permission) => checkPermission(permission));
+      }
+      return permissions.every((permission) => checkPermission(permission));
+    }),
+    [items, checkPermission]
+  );
+}
+
+export { useAuthorizedItems };

package/esm/use-color-tokens.js

@@ -0,0 +1,30 @@
+"use strict";
+import { defaultColorTypes, semanticColorTypes, capitalize } from '@vef-framework/shared';
+import { useMemo } from 'react';
+import { useThemeTokens } from './use-theme-tokens.js';
+
+"use strict";
+function useDefaultColorTokens() {
+  const tokens = useThemeTokens();
+  return useMemo(() => defaultColorTypes.reduce(
+    (map, color) => {
+      map.set(color, tokens[color]);
+      return map;
+    },
+    /* @__PURE__ */ new Map()
+  ), [tokens]);
+}
+function useSemanticColorTokens() {
+  const tokens = useThemeTokens();
+  return useMemo(() => semanticColorTypes.reduce((map, color) => {
+    map.set(color, tokens[`color${capitalize(color)}`]);
+    return map;
+  }, /* @__PURE__ */ new Map()), [tokens]);
+}
+function useColorTokens() {
+  const defaultColorTokens = useDefaultColorTokens();
+  const semanticColorTokens = useSemanticColorTokens();
+  return useMemo(() => new Map([...defaultColorTokens, ...semanticColorTokens]), [defaultColorTokens, semanticColorTokens]);
+}
+
+export { useColorTokens, useDefaultColorTokens, useSemanticColorTokens };

package/esm/use-computed-action-buttons.js

@@ -0,0 +1,43 @@
+"use strict";
+import { isFunction, defaultMessageTitle } from '@vef-framework/shared';
+import { useMemo } from 'react';
+
+"use strict";
+function useComputedActionButtons(buttons, context) {
+  return useMemo(() => buttons.filter((button) => {
+    const { show } = button;
+    if (isFunction(show)) {
+      return show(context);
+    }
+    return show ?? true;
+  }).map((button) => {
+    const {
+      disabled,
+      requireConfirmation,
+      confirmationMode,
+      confirmationTitle,
+      confirmationContent,
+      ...rest
+    } = button;
+    const computedButton = {
+      ...rest,
+      disabled: isFunction(disabled) ? disabled(context) : disabled ?? false,
+      requireConfirmation: isFunction(requireConfirmation) ? requireConfirmation(context) : requireConfirmation ?? false,
+      confirmationMode: isFunction(confirmationMode) ? confirmationMode(context) : confirmationMode ?? "simple",
+      confirmationTitle: isFunction(confirmationTitle) ? confirmationTitle(context) : confirmationTitle ?? defaultMessageTitle,
+      confirmationContent: isFunction(confirmationContent) ? confirmationContent(context) : confirmationContent ?? `确定要${rest.label}吗？`
+    };
+    if (computedButton.requireConfirmation && !computedButton.confirmationMode) {
+      computedButton.confirmationMode = "simple";
+    }
+    if (computedButton.requireConfirmation && !computedButton.confirmationTitle) {
+      computedButton.confirmationTitle = defaultMessageTitle;
+    }
+    if (computedButton.requireConfirmation && !computedButton.confirmationContent) {
+      computedButton.confirmationContent = `确定要${computedButton.label}吗？`;
+    }
+    return computedButton;
+  }), [buttons, context]);
+}
+
+export { useComputedActionButtons };

package/esm/use-computed-options.js

@@ -0,0 +1,67 @@
+"use strict";
+import { useDataQuery } from './use-data-query.js';
+import { useFallbackOptions } from './use-fallback-options.js';
+import { useNormalizedDataOptions } from './use-normalized-options.js';
+import { useRemoteFilter } from './use-remote-filter.js';
+
+"use strict";
+function useComputedOptions({
+  labelKey,
+  valueKey,
+  descriptionKey,
+  childrenKey,
+  disabledKey,
+  defaultToFirst,
+  filterable = false,
+  filterFromRemote = false,
+  keywordKey = "keyword",
+  valuesKey = "ids",
+  fallbackOptionsApi,
+  fallbackOptionsApiParams,
+  resolveFallbackOptions,
+  isGrouped = false,
+  selectedOptionValues,
+  apiParams,
+  ...queryConfig
+}) {
+  const [mergedApiParams, onFilterKeywordChange] = useRemoteFilter(filterable && filterFromRemote, apiParams, keywordKey);
+  const { data: options, isLoading } = useDataQuery({
+    apiParams: mergedApiParams,
+    ...queryConfig
+  });
+  const [normalizedOptions, missingOptionValues, defaultOption] = useNormalizedDataOptions(
+    options ?? [],
+    {
+      labelKey,
+      valueKey,
+      descriptionKey,
+      childrenKey,
+      disabledKey,
+      defaultToFirst
+    },
+    {
+      isGrouped,
+      parsePinyin: filterable && !filterFromRemote,
+      selectedOptionValues
+    }
+  );
+  const { data: fallbackOptions, isLoading: isFallbackOptionsLoading } = useFallbackOptions(
+    missingOptionValues,
+    {
+      fallbackOptionsApi: fallbackOptionsApi ?? queryConfig.api,
+      fallbackOptionsApiParams,
+      valuesKey,
+      resolveFallbackOptions
+    }
+  );
+  return {
+    onFilterKeywordChange,
+    isLoading,
+    normalizedOptions,
+    defaultOption,
+    fallbackOptions,
+    isFallbackOptionsLoading
+  };
+}
+
+export { useComputedOptions };

package/esm/use-context-disabled.js

@@ -0,0 +1,11 @@
+"use strict";
+import { createContext, useContext } from 'react';
+
+"use strict";
+const DisabledContext = createContext(false);
+function useContextDisabled() {
+  return useContext(DisabledContext);
+}
+const DisabledContextProvider = DisabledContext.Provider;
+
+export { DisabledContextProvider, useContextDisabled };

package/esm/use-data-query.js

@@ -0,0 +1,108 @@
+"use strict";
+import { useApiContext } from '@vef-framework/core';
+import { isNullish, isFunction } from '@vef-framework/shared';
+import { useUnmount } from 'ahooks';
+import { useMemo } from 'react';
+
+"use strict";
+function useApi({
+  data,
+  dataDictionaryKey,
+  api,
+  apiParams,
+  apiEnabled,
+  staleTime,
+  keepPreviousData,
+  placeholderData
+}, stubQueryApi, dataDictionaryApi) {
+  return useMemo(() => {
+    if (!isNullish(data)) {
+      return [
+        stubQueryApi,
+        data,
+        {
+          keepPreviousData: true,
+          initialData: data
+        }
+      ];
+    }
+    if (!isNullish(dataDictionaryKey)) {
+      return [
+        dataDictionaryApi,
+        {
+          ...apiParams,
+          key: dataDictionaryKey
+        },
+        {
+          enabled: apiEnabled ?? true,
+          staleTime,
+          keepPreviousData,
+          placeholderData
+        }
+      ];
+    }
+    if (!isNullish(api)) {
+      return [
+        api,
+        apiParams,
+        {
+          enabled: apiEnabled ?? true,
+          staleTime,
+          keepPreviousData,
+          placeholderData
+        }
+      ];
+    }
+    return [
+      stubQueryApi,
+      [],
+      {
+        keepPreviousData: true,
+        initialData: []
+      }
+    ];
+  }, [
+    data,
+    dataDictionaryKey,
+    api,
+    stubQueryApi,
+    dataDictionaryApi,
+    apiParams,
+    apiEnabled,
+    staleTime,
+    keepPreviousData,
+    placeholderData
+  ]);
+}
+function useDataQuery({ onFetched, ...config }) {
+  const {
+    useApiQuery,
+    stubQueryApi,
+    dataDictionaryApi: dataDictionaryQueryApi
+  } = useApiContext();
+  const [api, args, options] = useApi(config, stubQueryApi, dataDictionaryQueryApi);
+  const result = useApiQuery(api, args, options);
+  useUnmount(() => {
+    if (Object.is(api, stubQueryApi)) {
+      stubQueryApi.removeQueries(args);
+    }
+  });
+  const {
+    isSuccess,
+    data: rawData,
+    ...rest
+  } = result;
+  const data = useMemo(() => {
+    if (isSuccess && isFunction(onFetched)) {
+      return onFetched(rawData);
+    }
+    return rawData;
+  }, [isSuccess, rawData, onFetched]);
+  return {
+    ...rest,
+    isSuccess,
+    data
+  };
+}
+
+export { useDataQuery };