@vef-framework/hooks 1.0.122 → 1.0.123

package/cjs/index.cjs

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

package/cjs/lib.cjs

@@ -0,0 +1,56 @@
+"use strict";
+'use strict';
+
+var usehooks = require('@uidotdev/usehooks');
+var ahooks = require('ahooks');
+
+"use strict";
+
+Object.defineProperty(exports, "useClickAway", {
+  enumerable: true,
+  get: function () { return usehooks.useClickAway; }
+});
+Object.defineProperty(exports, "useMeasure", {
+  enumerable: true,
+  get: function () { return usehooks.useMeasure; }
+});
+Object.defineProperty(exports, "useDeepEffect", {
+  enumerable: true,
+  get: function () { return ahooks.useDeepCompareEffect; }
+});
+Object.defineProperty(exports, "useDeepLayoutEffect", {
+  enumerable: true,
+  get: function () { return ahooks.useDeepCompareLayoutEffect; }
+});
+Object.defineProperty(exports, "useElementSize", {
+  enumerable: true,
+  get: function () { return ahooks.useSize; }
+});
+Object.defineProperty(exports, "useEventListener", {
+  enumerable: true,
+  get: function () { return ahooks.useEventListener; }
+});
+Object.defineProperty(exports, "useKeyPress", {
+  enumerable: true,
+  get: function () { return ahooks.useKeyPress; }
+});
+Object.defineProperty(exports, "useMount", {
+  enumerable: true,
+  get: function () { return ahooks.useMount; }
+});
+Object.defineProperty(exports, "useUnmount", {
+  enumerable: true,
+  get: function () { return ahooks.useUnmount; }
+});
+Object.defineProperty(exports, "useUpdateEffect", {
+  enumerable: true,
+  get: function () { return ahooks.useUpdateEffect; }
+});
+Object.defineProperty(exports, "useUpdateLayoutEffect", {
+  enumerable: true,
+  get: function () { return ahooks.useUpdateLayoutEffect; }
+});
+Object.defineProperty(exports, "useUpdater", {
+  enumerable: true,
+  get: function () { return ahooks.useUpdate; }
+});

package/cjs/use-authorized-items.cjs

@@ -0,0 +1,26 @@
+"use strict";
+'use strict';
+
+var core = require('@vef-framework/core');
+var react = require('react');
+
+"use strict";
+function useAuthorizedItems(items) {
+  const { checkPermission } = core.useAuthContext();
+  return react.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]
+  );
+}
+
+exports.useAuthorizedItems = useAuthorizedItems;

package/cjs/use-color-tokens.cjs

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

package/cjs/use-computed-action-buttons.cjs

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

package/cjs/use-computed-options.cjs

@@ -0,0 +1,69 @@
+"use strict";
+'use strict';
+
+var useDataQuery = require('./use-data-query.cjs');
+var useFallbackOptions = require('./use-fallback-options.cjs');
+var useNormalizedOptions = require('./use-normalized-options.cjs');
+var useRemoteFilter = require('./use-remote-filter.cjs');
+
+"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.useRemoteFilter(filterable && filterFromRemote, apiParams, keywordKey);
+  const { data: options, isLoading } = useDataQuery.useDataQuery({
+    apiParams: mergedApiParams,
+    ...queryConfig
+  });
+  const [normalizedOptions, missingOptionValues, defaultOption] = useNormalizedOptions.useNormalizedDataOptions(
+    options ?? [],
+    {
+      labelKey,
+      valueKey,
+      descriptionKey,
+      childrenKey,
+      disabledKey,
+      defaultToFirst
+    },
+    {
+      isGrouped,
+      parsePinyin: filterable && !filterFromRemote,
+      selectedOptionValues
+    }
+  );
+  const { data: fallbackOptions, isLoading: isFallbackOptionsLoading } = useFallbackOptions.useFallbackOptions(
+    missingOptionValues,
+    {
+      fallbackOptionsApi: fallbackOptionsApi ?? queryConfig.api,
+      fallbackOptionsApiParams,
+      valuesKey,
+      resolveFallbackOptions
+    }
+  );
+  return {
+    onFilterKeywordChange,
+    isLoading,
+    normalizedOptions,
+    defaultOption,
+    fallbackOptions,
+    isFallbackOptionsLoading
+  };
+}
+
+exports.useComputedOptions = useComputedOptions;

package/cjs/use-context-disabled.cjs

@@ -0,0 +1,14 @@
+"use strict";
+'use strict';
+
+var react = require('react');
+
+"use strict";
+const DisabledContext = react.createContext(false);
+function useContextDisabled() {
+  return react.useContext(DisabledContext);
+}
+const DisabledContextProvider = DisabledContext.Provider;
+
+exports.DisabledContextProvider = DisabledContextProvider;
+exports.useContextDisabled = useContextDisabled;

package/cjs/use-data-query.cjs

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

package/cjs/use-deep-callback.cjs

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

package/cjs/use-deep-memo.cjs

@@ -0,0 +1,21 @@
+"use strict";
+'use strict';
+
+var shared = require('@vef-framework/shared');
+var react = require('react');
+
+"use strict";
+function useDeepMemo(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.isDeepEqual(value, another[index]));
+}
+
+exports.useDeepMemo = useDeepMemo;

package/cjs/use-deep-selector.cjs

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

package/cjs/use-fallback-options.cjs

@@ -0,0 +1,105 @@
+"use strict";
+'use strict';
+
+var core = require('@vef-framework/core');
+var shared = require('@vef-framework/shared');
+var ahooks = require('ahooks');
+var react = require('react');
+var useShallowMemo = require('./use-shallow-memo.cjs');
+
+"use strict";
+function useApi(missingOptionValues, {
+  fallbackOptionsApi,
+  fallbackOptionsApiParams,
+  valuesKey,
+  resolveFallbackOptions
+}, stubQueryApi, asyncFnQueryApi) {
+  const uniqueId = react.useId();
+  return useShallowMemo.useShallowMemo(() => {
+    if (missingOptionValues.length > 0) {
+      if (shared.isFunction(resolveFallbackOptions)) {
+        const params = {
+          key: uniqueId,
+          args: [missingOptionValues],
+          fn: resolveFallbackOptions
+        };
+        return [
+          asyncFnQueryApi,
+          params,
+          {
+            keepPreviousData: true
+          }
+        ];
+      }
+      if (fallbackOptionsApi) {
+        const params = {
+          ...fallbackOptionsApiParams,
+          [valuesKey ?? "ids"]: missingOptionValues
+        };
+        return [
+          fallbackOptionsApi,
+          params,
+          {
+            keepPreviousData: true
+          }
+        ];
+      }
+    }
+    return [
+      stubQueryApi,
+      [],
+      {
+        keepPreviousData: true,
+        initialData: []
+      }
+    ];
+  }, [
+    resolveFallbackOptions,
+    fallbackOptionsApi,
+    stubQueryApi,
+    uniqueId,
+    missingOptionValues,
+    asyncFnQueryApi,
+    fallbackOptionsApiParams,
+    valuesKey
+  ]);
+}
+function useFallbackOptions(missingOptionValues, {
+  fallbackOptionsApi,
+  fallbackOptionsApiParams,
+  valuesKey,
+  resolveFallbackOptions
+}) {
+  const {
+    useApiQuery,
+    stubQueryApi,
+    asyncFnQueryApi
+  } = core.useApiContext();
+  const [
+    api,
+    params,
+    options
+  ] = useApi(
+    missingOptionValues,
+    {
+      fallbackOptionsApi,
+      fallbackOptionsApiParams,
+      valuesKey,
+      resolveFallbackOptions
+    },
+    stubQueryApi,
+    asyncFnQueryApi
+  );
+  const result = useApiQuery(api, params, options);
+  ahooks.useUnmount(() => {
+    if (Object.is(api, stubQueryApi)) {
+      stubQueryApi.removeQueries(params);
+    }
+    if (Object.is(api, asyncFnQueryApi)) {
+      asyncFnQueryApi.removeQueries(params);
+    }
+  });
+  return result;
+}
+
+exports.useFallbackOptions = useFallbackOptions;

package/cjs/use-gap-size-normalizer.cjs

@@ -0,0 +1,38 @@
+"use strict";
+'use strict';
+
+var react = require('react');
+var useThemeTokens = require('./use-theme-tokens.cjs');
+
+"use strict";
+function useGapSizeNormalizer() {
+  const {
+    paddingXS,
+    paddingSM,
+    padding,
+    paddingMD,
+    paddingLG
+  } = useThemeTokens.useThemeTokens();
+  return react.useCallback((gap) => {
+    if (gap === "tiny") {
+      return paddingXS;
+    } else if (gap === "small") {
+      return paddingSM;
+    } else if (gap === "medium") {
+      return padding;
+    } else if (gap === "large") {
+      return paddingMD;
+    } else if (gap === "huge") {
+      return paddingLG;
+    }
+    return gap;
+  }, [
+    paddingXS,
+    paddingSM,
+    padding,
+    paddingMD,
+    paddingLG
+  ]);
+}
+
+exports.useGapSizeNormalizer = useGapSizeNormalizer;

package/cjs/use-normalized-gap-size.cjs

@@ -0,0 +1,12 @@
+"use strict";
+'use strict';
+
+var useGapSizeNormalizer = require('./use-gap-size-normalizer.cjs');
+
+"use strict";
+function useNormalizedGapSize(gap) {
+  const normalize = useGapSizeNormalizer.useGapSizeNormalizer();
+  return normalize(gap);
+}
+
+exports.useNormalizedGapSize = useNormalizedGapSize;