@zykj2024/much-library 1.0.9

package/dist/McModalProvider/index.js

@@ -0,0 +1,498 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+var _excluded = ["defaultVisible", "keepMounted", "id"],
+  _excluded2 = ["modal", "handler"];
+import React, { useCallback, useContext, useEffect, useMemo, useReducer } from 'react';
+
+/**
+ * The handler to manage a modal returned by {@link useModal | useModal} hook.
+ */
+
+// Omit will not work if extends Record<string, unknown>, which is not needed here
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var symModalId = Symbol('McModalId');
+var initialState = {};
+export var McModalContext = /*#__PURE__*/React.createContext(initialState);
+var McModalIdContext = /*#__PURE__*/React.createContext(null);
+var MODAL_REGISTRY = {};
+var ALREADY_MOUNTED = {};
+var uidSeed = 0;
+var dispatch = function dispatch() {
+  throw new Error('No dispatch method detected, did you embed your app with McModal.Provider?');
+};
+var getUid = function getUid() {
+  return "_mc_modal_".concat(uidSeed++);
+};
+
+// Modal reducer used in useReducer hook.
+export var reducer = function reducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var action = arguments.length > 1 ? arguments[1] : undefined;
+  switch (action.type) {
+    case 'McModal/show':
+      {
+        var _action$payload = action.payload,
+          _modalId = _action$payload.modalId,
+          _args = _action$payload.args;
+        return _objectSpread(_objectSpread({}, state), {}, _defineProperty({}, _modalId, _objectSpread(_objectSpread({}, state[_modalId]), {}, {
+          id: _modalId,
+          args: _args,
+          // If modal is not mounted, mount it first then make it visible.
+          // There is logic inside HOC wrapper to make it visible after its first mount.
+          // This mechanism ensures the entering transition.
+          visible: !!ALREADY_MOUNTED[_modalId],
+          delayVisible: !ALREADY_MOUNTED[_modalId]
+        })));
+      }
+    case 'McModal/hide':
+      {
+        var _modalId2 = action.payload.modalId;
+        if (!state[_modalId2]) return state;
+        return _objectSpread(_objectSpread({}, state), {}, _defineProperty({}, _modalId2, _objectSpread(_objectSpread({}, state[_modalId2]), {}, {
+          visible: false
+        })));
+      }
+    case 'McModal/remove':
+      {
+        var _modalId3 = action.payload.modalId;
+        var newState = _objectSpread({}, state);
+        delete newState[_modalId3];
+        return newState;
+      }
+    case 'McModal/setFlags':
+      {
+        var _action$payload2 = action.payload,
+          _modalId4 = _action$payload2.modalId,
+          flags = _action$payload2.flags;
+        return _objectSpread(_objectSpread({}, state), {}, _defineProperty({}, _modalId4, _objectSpread(_objectSpread({}, state[_modalId4]), flags)));
+      }
+    default:
+      return state;
+  }
+};
+
+// Get modal component by modal id
+function getModal(modalId) {
+  var _MODAL_REGISTRY$modal;
+  return (_MODAL_REGISTRY$modal = MODAL_REGISTRY[modalId]) === null || _MODAL_REGISTRY$modal === void 0 ? void 0 : _MODAL_REGISTRY$modal.comp;
+}
+
+// action creator to show a modal
+function showModal(modalId, args) {
+  return {
+    type: 'McModal/show',
+    payload: {
+      modalId: modalId,
+      args: args
+    }
+  };
+}
+
+// action creator to set flags of a modal
+function setModalFlags(modalId, flags) {
+  return {
+    type: 'McModal/setFlags',
+    payload: {
+      modalId: modalId,
+      flags: flags
+    }
+  };
+}
+// action creator to hide a modal
+function hideModal(modalId) {
+  return {
+    type: 'McModal/hide',
+    payload: {
+      modalId: modalId
+    }
+  };
+}
+
+// action creator to remove a modal
+function removeModal(modalId) {
+  return {
+    type: 'McModal/remove',
+    payload: {
+      modalId: modalId
+    }
+  };
+}
+var modalCallbacks = {};
+var hideModalCallbacks = {};
+var getModalId = function getModalId(modal) {
+  if (typeof modal === 'string') return modal;
+  // @ts-ignore
+  if (!modal[symModalId]) {
+    // @ts-ignore
+    modal[symModalId] = getUid();
+  }
+  // @ts-ignore
+  return modal[symModalId];
+};
+
+// All registered modals will be rendered in modal placeholder
+export var register = function register(id, comp, props) {
+  if (!MODAL_REGISTRY[id]) {
+    MODAL_REGISTRY[id] = {
+      comp: comp,
+      props: props
+    };
+  } else {
+    MODAL_REGISTRY[id].props = props;
+  }
+};
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function show(modal, args) {
+  var modalId = getModalId(modal);
+  if (typeof modal !== 'string' && !MODAL_REGISTRY[modalId]) {
+    register(modalId, modal);
+  }
+  dispatch(showModal(modalId, args));
+  if (!modalCallbacks[modalId]) {
+    // `!` tell ts that theResolve will be written before it is used
+    var theResolve;
+    // `!` tell ts that theResolve will be written before it is used
+    var theReject;
+    var promise = new Promise(function (resolve, reject) {
+      theResolve = resolve;
+      theReject = reject;
+    });
+    modalCallbacks[modalId] = {
+      resolve: theResolve,
+      reject: theReject,
+      promise: promise
+    };
+  }
+  return modalCallbacks[modalId].promise;
+}
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function hide(modal) {
+  var modalId = getModalId(modal);
+  dispatch(hideModal(modalId));
+  // Should also delete the callback for modal.resolve #35
+  delete modalCallbacks[modalId];
+  if (!hideModalCallbacks[modalId]) {
+    // `!` tell ts that theResolve will be written before it is used
+    var theResolve;
+    // `!` tell ts that theResolve will be written before it is used
+    var theReject;
+    var promise = new Promise(function (resolve, reject) {
+      theResolve = resolve;
+      theReject = reject;
+    });
+    hideModalCallbacks[modalId] = {
+      resolve: theResolve,
+      reject: theReject,
+      promise: promise
+    };
+  }
+  return hideModalCallbacks[modalId].promise;
+}
+export var remove = function remove(modal) {
+  var modalId = getModalId(modal);
+  dispatch(removeModal(modalId));
+  delete modalCallbacks[modalId];
+  delete hideModalCallbacks[modalId];
+};
+var setFlags = function setFlags(modalId, flags) {
+  dispatch(setModalFlags(modalId, flags));
+};
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useModal(modal, args) {
+  var modals = useContext(McModalContext);
+  var contextModalId = useContext(McModalIdContext);
+  var modalId = null;
+  var isUseComponent = modal && typeof modal !== 'string';
+  if (!modal) {
+    modalId = contextModalId;
+  } else {
+    modalId = getModalId(modal);
+  }
+
+  // Only if contextModalId doesn't exist
+  if (!modalId) throw new Error('No modal id found in McModal.useModal.');
+  var mid = modalId;
+  // If use a component directly, register it.
+  useEffect(function () {
+    if (isUseComponent && !MODAL_REGISTRY[mid]) {
+      register(mid, modal, args);
+    }
+  }, [isUseComponent, mid, modal, args]);
+  var modalInfo = modals[mid];
+  var showCallback = useCallback(function (args) {
+    return show(mid, args);
+  }, [mid]);
+  var hideCallback = useCallback(function () {
+    return hide(mid);
+  }, [mid]);
+  var removeCallback = useCallback(function () {
+    return remove(mid);
+  }, [mid]);
+  var resolveCallback = useCallback(function (args) {
+    var _modalCallbacks$mid;
+    (_modalCallbacks$mid = modalCallbacks[mid]) === null || _modalCallbacks$mid === void 0 || _modalCallbacks$mid.resolve(args);
+    delete modalCallbacks[mid];
+  }, [mid]);
+  var rejectCallback = useCallback(function (args) {
+    var _modalCallbacks$mid2;
+    (_modalCallbacks$mid2 = modalCallbacks[mid]) === null || _modalCallbacks$mid2 === void 0 || _modalCallbacks$mid2.reject(args);
+    delete modalCallbacks[mid];
+  }, [mid]);
+  var resolveHide = useCallback(function (args) {
+    var _hideModalCallbacks$m;
+    (_hideModalCallbacks$m = hideModalCallbacks[mid]) === null || _hideModalCallbacks$m === void 0 || _hideModalCallbacks$m.resolve(args);
+    delete hideModalCallbacks[mid];
+  }, [mid]);
+  return useMemo(function () {
+    return {
+      id: mid,
+      args: modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.args,
+      visible: !!(modalInfo !== null && modalInfo !== void 0 && modalInfo.visible),
+      keepMounted: !!(modalInfo !== null && modalInfo !== void 0 && modalInfo.keepMounted),
+      show: showCallback,
+      hide: hideCallback,
+      remove: removeCallback,
+      resolve: resolveCallback,
+      reject: rejectCallback,
+      resolveHide: resolveHide
+    };
+  }, [mid, modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.args, modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.visible, modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.keepMounted, showCallback, hideCallback, removeCallback, resolveCallback, rejectCallback, resolveHide]);
+}
+export var create = function create(Comp) {
+  return function (_ref) {
+    var _modals$id;
+    var defaultVisible = _ref.defaultVisible,
+      keepMounted = _ref.keepMounted,
+      id = _ref.id,
+      props = _objectWithoutProperties(_ref, _excluded);
+    var _useModal = useModal(id),
+      args = _useModal.args,
+      show = _useModal.show;
+
+    // If there's modal state, then should mount it.
+    var modals = useContext(McModalContext);
+    var shouldMount = !!modals[id];
+    useEffect(function () {
+      // If defaultVisible, show it after mounted.
+      if (defaultVisible) {
+        show();
+      }
+      ALREADY_MOUNTED[id] = true;
+      return function () {
+        delete ALREADY_MOUNTED[id];
+      };
+    }, [id, show, defaultVisible]);
+    useEffect(function () {
+      if (keepMounted) setFlags(id, {
+        keepMounted: true
+      });
+    }, [id, keepMounted]);
+    var delayVisible = (_modals$id = modals[id]) === null || _modals$id === void 0 ? void 0 : _modals$id.delayVisible;
+    // If modal.show is called
+    //  1. If modal was mounted, should make it visible directly
+    //  2. If modal has not been mounted, should mount it first, then make it visible
+    useEffect(function () {
+      if (delayVisible) {
+        // delayVisible: false => true, it means the modal.show() is called, should show it.
+        show(args);
+      }
+    }, [delayVisible, args, show]);
+    if (!shouldMount) return null;
+    return /*#__PURE__*/_jsx(McModalIdContext.Provider, {
+      value: id,
+      children: /*#__PURE__*/_jsx(Comp, _objectSpread(_objectSpread({}, props), args))
+    });
+  };
+};
+
+/**
+ * Unregister a modal.
+ * @param id - The id of the modal.
+ */
+export var unregister = function unregister(id) {
+  delete MODAL_REGISTRY[id];
+};
+
+// The placeholder component is used to auto render modals when call modal.show()
+// When modal.show() is called, it means there've been modal info
+var McModalPlaceholder = function McModalPlaceholder() {
+  var modals = useContext(McModalContext);
+  var visibleModalIds = Object.keys(modals).filter(function (id) {
+    return !!modals[id];
+  });
+  visibleModalIds.forEach(function (id) {
+    if (!MODAL_REGISTRY[id] && !ALREADY_MOUNTED[id]) {
+      console.warn("No modal found for id: ".concat(id, ". Please check the id or if it is registered or declared via JSX."));
+      return;
+    }
+  });
+  var toRender = visibleModalIds.filter(function (id) {
+    return MODAL_REGISTRY[id];
+  }).map(function (id) {
+    return _objectSpread({
+      id: id
+    }, MODAL_REGISTRY[id]);
+  });
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: toRender.map(function (t) {
+      return /*#__PURE__*/_jsx(t.comp, _objectSpread({
+        id: t.id
+      }, t.props), t.id);
+    })
+  });
+};
+var InnerContextProvider = function InnerContextProvider(_ref2) {
+  var children = _ref2.children;
+  var arr = useReducer(reducer, initialState);
+  var modals = arr[0];
+  dispatch = arr[1];
+  return /*#__PURE__*/_jsxs(McModalContext.Provider, {
+    value: modals,
+    children: [children, /*#__PURE__*/_jsx(McModalPlaceholder, {})]
+  });
+};
+export var Provider = function Provider(_ref3) {
+  var children = _ref3.children,
+    givenDispatch = _ref3.dispatch,
+    givenModals = _ref3.modals;
+  if (!givenDispatch || !givenModals) {
+    return /*#__PURE__*/_jsx(InnerContextProvider, {
+      children: children
+    });
+  }
+  dispatch = givenDispatch;
+  return /*#__PURE__*/_jsxs(McModalContext.Provider, {
+    value: givenModals,
+    children: [children, /*#__PURE__*/_jsx(McModalPlaceholder, {})]
+  });
+};
+
+/**
+ * Declarative way to register a modal.
+ * @param id - The id of the modal.
+ * @param component - The modal Component.
+ * @returns
+ */
+export var ModalDef = function ModalDef(_ref4) {
+  var id = _ref4.id,
+    component = _ref4.component;
+  useEffect(function () {
+    register(id, component);
+    return function () {
+      unregister(id);
+    };
+  }, [id, component]);
+  return null;
+};
+
+/**
+ * A place holder allows to bind props to a modal.
+ * It assigns show/hide methods to handler object to show/hide the modal.
+ *
+ * Comparing to use the <MyMcModal id=../> directly, this approach allows use registered modal id to find the modal component.
+ * Also it avoids to create unique id for MyMcModal.
+ *
+ * @param modal - The modal id registered or a modal component.
+ * @param handler - The handler object to control the modal.
+ * @returns
+ */
+export var ModalHolder = function ModalHolder(_ref5) {
+  var _MODAL_REGISTRY$modal2;
+  var modal = _ref5.modal,
+    _ref5$handler = _ref5.handler,
+    handler = _ref5$handler === void 0 ? {} : _ref5$handler,
+    restProps = _objectWithoutProperties(_ref5, _excluded2);
+  var mid = useMemo(function () {
+    return getUid();
+  }, []);
+  var ModalComp = typeof modal === 'string' ? (_MODAL_REGISTRY$modal2 = MODAL_REGISTRY[modal]) === null || _MODAL_REGISTRY$modal2 === void 0 ? void 0 : _MODAL_REGISTRY$modal2.comp : modal;
+  if (!handler) {
+    throw new Error('No handler found in McModal.ModalHolder.');
+  }
+  if (!ModalComp) {
+    throw new Error("No modal found for id: ".concat(modal, " in McModal.ModalHolder."));
+  }
+  handler.show = useCallback(function (args) {
+    return show(mid, args);
+  }, [mid]);
+  handler.hide = useCallback(function () {
+    return hide(mid);
+  }, [mid]);
+  return /*#__PURE__*/_jsx(ModalComp, _objectSpread({
+    id: mid
+  }, restProps));
+};
+export var antdModalV4 = function antdModalV4(modal) {
+  return {
+    visible: modal.visible,
+    onOk: function onOk() {
+      return modal.hide();
+    },
+    onCancel: function onCancel() {
+      return modal.hide();
+    },
+    afterClose: function afterClose() {
+      // Need to resolve before remove
+      modal.resolveHide();
+      if (!modal.keepMounted) modal.remove();
+    }
+  };
+};
+export var antdModal = function antdModal(modal) {
+  var _antdModalV = antdModalV4(modal),
+    onOk = _antdModalV.onOk,
+    onCancel = _antdModalV.onCancel,
+    afterClose = _antdModalV.afterClose;
+  return {
+    open: modal.visible,
+    onOk: onOk,
+    onCancel: onCancel,
+    afterClose: afterClose
+  };
+};
+export var antdDrawerV4 = function antdDrawerV4(modal) {
+  return {
+    visible: modal.visible,
+    onClose: function onClose() {
+      return modal.hide();
+    },
+    afterVisibleChange: function afterVisibleChange(v) {
+      if (!v) {
+        modal.resolveHide();
+      }
+      if (!v && !modal.keepMounted) {
+        modal.remove();
+      }
+    }
+  };
+};
+export var antdDrawer = function antdDrawer(modal) {
+  var _antdDrawerV = antdDrawerV4(modal),
+    onClose = _antdDrawerV.onClose,
+    afterOpenChange = _antdDrawerV.afterVisibleChange;
+  return {
+    open: modal.visible,
+    onClose: onClose,
+    afterOpenChange: afterOpenChange
+  };
+};
+var McModal = {
+  Provider: Provider,
+  ModalDef: ModalDef,
+  ModalHolder: ModalHolder,
+  McModalContext: McModalContext,
+  create: create,
+  register: register,
+  getModal: getModal,
+  show: show,
+  hide: hide,
+  remove: remove,
+  useModal: useModal,
+  reducer: reducer,
+  antdModal: antdModal,
+  antdDrawer: antdDrawer
+};
+export default McModal;

package/dist/McPeriodSelect/demo/base.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 基础用法
+ * description: 通过 `value` 属性设置默认值，通过 `onChange` 事件获取当前值。
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McPeriodSelect/demo/base.js

@@ -0,0 +1,19 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 基础用法
+ * description: 通过 `value` 属性设置默认值，通过 `onChange` 事件获取当前值。
+ */
+
+import { McPeriodSelect } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return /*#__PURE__*/_jsx(McPeriodSelect, {
+    value: value,
+    onChange: setValue
+  });
+});

package/dist/McPeriodSelect/demo/half.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 改变单位时间长度为半小时
+ * description: 通过设置half属性为true，可以使选择的时间段的单位长度变为半小时。
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McPeriodSelect/demo/half.js

@@ -0,0 +1,20 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 改变单位时间长度为半小时
+ * description: 通过设置half属性为true，可以使选择的时间段的单位长度变为半小时。
+ */
+
+import { McPeriodSelect } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return /*#__PURE__*/_jsx(McPeriodSelect, {
+    value: value,
+    half: true,
+    onChange: setValue
+  });
+});