@zykj2024/much-library 1.1.7-beta.2 → 1.1.7-beta.4

package/dist/esm/McListSelect/index.less

@@ -0,0 +1,257 @@
+.mcListSelectOptionMixin(@hoverBackground: #F5F5F5) {
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  padding: 0 12px;
+
+  &:hover {
+    background: @hoverBackground;
+  }
+
+  .ant-checkbox + span {
+    width: calc(100% - 16px);
+    padding-right: 0;
+  }
+}
+
+.mc-list-select {
+  width: 100%;
+
+  &__label {
+    position: absolute;
+    top: 0;
+    left: 11px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    color: #262626;
+    font-size: 14px;
+
+    &::after {
+      margin-left: 2px;
+      content: '\FF1A';
+    }
+
+    &.mc-list-select--disabled {
+      color: rgba(0, 0, 0, 25%);
+      cursor: no-drop;
+    }
+  }
+
+  &__content {
+    width: 100%;
+    height: 100%;
+
+    &.ant-select {
+      .ant-select-selector {
+        padding-left: var(--selector-pl);
+
+        .ant-select-selection-overflow-item-rest .ant-select-selection-item {
+          padding-left: 4px;
+          color: #fff;
+          background: #325cf7;
+
+          .ant-select-selection-item-content {
+            margin-right: 0;
+          }
+        }
+
+        .ant-select-selection-item[title*='「'][title$='」'] {
+          color: var(--inexistent-color);
+        }
+      }
+
+      &.ant-select-single .ant-select-selector .ant-select-selection-search {
+        left: var(--selector-pl);
+      }
+
+      &.ant-select-multiple .ant-select-selector {
+        .ant-select-selection-placeholder {
+          left: var(--selector-pl);
+        }
+
+        .ant-select-selection-search {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  &.mc-list-select--inline
+    .ant-select-selection-overflow-item:not(
+      .ant-select-selection-overflow-item-rest,
+      .ant-select-selection-overflow-item-suffix
+    ) {
+    flex: 1;
+    min-width: 0;
+    margin-right: 4px;
+  }
+
+  &__dropdown-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    height: 48px;
+    column-gap: 8px;
+  }
+
+  &-panel {
+    width: 560px;
+    display: flex;
+    height: 400px;
+    column-gap: 8px;
+    position: relative;
+
+    &__title {
+      font-weight: 500;
+    }
+
+    &__card {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+
+      &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 40px;
+        padding: 0 12px;
+        background: #fafafa;
+      }
+
+      &__search {
+        padding: 8px 12px;
+
+        .mc-search {
+          width: 100%;
+        }
+      }
+
+      &__checkall {
+        height: 40px;
+
+        &__inner {
+          .mcListSelectOptionMixin(#EAEEFE);
+        }
+      }
+
+      &__footer {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        height: 40px;
+        padding: 0 7px 0 12px;
+
+        .ant-pagination {
+          width: 100%;
+
+          .ant-pagination-total-text {
+            margin-right: auto;
+          }
+
+          .ant-pagination-item-link {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+
+          .ant-pagination-simple-pager input {
+            background: #f0f2f5;
+
+            &:not(:hover, :focus) {
+              border-color: #f0f2f5;
+            }
+          }
+        }
+      }
+
+      &__left {
+        width: 312px;
+
+        .mc-list-select-panel__card__empty {
+          margin-top: 60px;
+        }
+      }
+
+      &__right {
+        width: 240px;
+
+        .mc-list-select-panel__card__empty {
+          margin-top: 148px;
+        }
+      }
+    }
+
+    &__options {
+      flex: 1;
+      overflow: auto;
+    }
+
+    &__option {
+      .mcListSelectOptionMixin();
+    }
+
+    &__selected-list-wrapper {
+      flex: 1;
+      padding: 8px;
+      overflow: auto;
+    }
+
+    &__selected-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    &__selected-item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 40px;
+      padding: 0 8px;
+      overflow: hidden;
+      background: #f5f5f5;
+      border-radius: 4px;
+
+      &__drag {
+        flex-shrink: 0;
+        margin-left: -4px;
+        color: #8c8c8c;
+
+        &:hover {
+          background: rgba(38, 38, 38, 15%) !important;
+          cursor: move;
+        }
+      }
+
+      &__remove {
+        flex-shrink: 0;
+        margin-left: 8px;
+        color: #8c8c8c;
+
+        &:hover {
+          color: #262626;
+          cursor: pointer;
+        }
+      }
+    }
+
+    &--disabled {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 9;
+      background: rgba(228, 228, 228, 30%);
+      border-radius: 4px;
+      cursor: no-drop;
+    }
+  }
+}

package/dist/esm/McModalProvider/index.d.ts

@@ -0,0 +1,174 @@
+import React, { ReactNode } from 'react';
+export interface McModalState {
+    id: string;
+    args?: Record<string, unknown>;
+    visible?: boolean;
+    delayVisible?: boolean;
+    keepMounted?: boolean;
+}
+export interface McModalStore {
+    [key: string]: McModalState;
+}
+export interface McModalAction {
+    type: string;
+    payload: {
+        modalId: string;
+        args?: Record<string, unknown>;
+        flags?: Record<string, unknown>;
+    };
+}
+/**
+ * The handler to manage a modal returned by {@link useModal | useModal} hook.
+ */
+export interface McModalHandler<Props = Record<string, unknown>> extends McModalState {
+    /**
+     * Whether a modal is visible, it's controlled by {@link McModalHandler.show | show}/{@link McModalHandler.hide | hide} method.
+     */
+    visible: boolean;
+    /**
+     * If you don't want to remove the modal from the tree after hide when using helpers, set it to true.
+     */
+    keepMounted: boolean;
+    /**
+     * Show the modal, it will change {@link McModalHandler.visible | visible} state to true.
+     * @param args - an object passed to modal component as props.
+     */
+    show: (args?: Props) => Promise<unknown>;
+    /**
+     * Hide the modal, it will change {@link McModalHandler.visible | visible} state to false.
+     */
+    hide: () => Promise<unknown>;
+    /**
+     * Resolve the promise returned by {@link McModalHandler.show | show} method.
+     */
+    resolve: (args?: unknown) => void;
+    /**
+     * Reject the promise returned by {@link McModalHandler.show | show} method.
+     */
+    reject: (args?: unknown) => void;
+    /**
+     * Remove the modal component from React component tree. It improves performance compared to just making a modal invisible.
+     */
+    remove: () => void;
+    /**
+     * Resolve the promise returned by {@link McModalHandler.hide | hide} method.
+     */
+    resolveHide: (args?: unknown) => void;
+}
+export interface McModalHocProps {
+    id: string;
+    defaultVisible?: boolean;
+    keepMounted?: boolean;
+}
+export declare const McModalContext: React.Context<McModalStore>;
+declare let dispatch: React.Dispatch<McModalAction>;
+export declare const reducer: (state: McModalStore | undefined, action: McModalAction) => McModalStore;
+declare function getModal(modalId: string): React.FC<any> | undefined;
+export declare const register: <T extends React.FC<any>>(id: string, comp: T, props?: Partial<McModalArgs<T>>) => void;
+type McModalArgs<T> = T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any> ? React.ComponentProps<T> : Record<string, unknown>;
+export declare function show<T extends any, C extends any, P extends Partial<McModalArgs<React.FC<C>>>>(modal: React.FC<C>, args?: P): Promise<T>;
+export declare function show<T extends any>(modal: string, args?: Record<string, unknown>): Promise<T>;
+export declare function show<T extends any, P extends any>(modal: string, args: P): Promise<T>;
+export declare function hide<T>(modal: string | React.FC<any>): Promise<T>;
+export declare const remove: (modal: string | React.FC<any>) => void;
+export declare function useModal(): McModalHandler;
+export declare function useModal(modal: string, args?: Record<string, unknown>): McModalHandler;
+export declare function useModal<C extends any, P extends Partial<McModalArgs<React.FC<C>>>>(modal: React.FC<C>, args?: P): Omit<McModalHandler, 'show'> & {
+    show: (args?: P) => Promise<unknown>;
+};
+export declare const create: <P extends {}>(Comp: React.ComponentType<P>) => React.FC<P & McModalHocProps>;
+/**
+ * Unregister a modal.
+ * @param id - The id of the modal.
+ */
+export declare const unregister: (id: string) => void;
+export declare const Provider: ({ children, dispatch: givenDispatch, modals: givenModals, }: {
+    children: ReactNode;
+    dispatch?: React.Dispatch<McModalAction> | undefined;
+    modals?: McModalStore | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Declarative way to register a modal.
+ * @param id - The id of the modal.
+ * @param component - The modal Component.
+ * @returns
+ */
+export declare const ModalDef: ({ id, component, }: {
+    id: string;
+    component: React.FC<any>;
+}) => 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 declare const ModalHolder: ({ modal, handler, ...restProps }: {
+    [key: string]: any;
+    modal: string | React.FC<any>;
+    handler: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const antdModalV4: (modal: McModalHandler) => {
+    visible: boolean;
+    onCancel: () => void;
+    onOk: () => void;
+    afterClose: () => void;
+};
+export declare const antdModal: (modal: McModalHandler) => {
+    open: boolean;
+    onCancel: () => void;
+    onOk: () => void;
+    afterClose: () => void;
+};
+export declare const antdDrawerV4: (modal: McModalHandler) => {
+    visible: boolean;
+    onClose: () => void;
+    afterVisibleChange: (visible: boolean) => void;
+};
+export declare const antdDrawer: (modal: McModalHandler) => {
+    open: boolean;
+    onClose: () => void;
+    afterOpenChange: (visible: boolean) => void;
+};
+declare const McModal: {
+    Provider: ({ children, dispatch: givenDispatch, modals: givenModals, }: {
+        children: ReactNode;
+        dispatch?: React.Dispatch<McModalAction> | undefined;
+        modals?: McModalStore | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    ModalDef: ({ id, component, }: {
+        id: string;
+        component: React.FC<any>;
+    }) => null;
+    ModalHolder: ({ modal, handler, ...restProps }: {
+        [key: string]: any;
+        modal: string | React.FC<any>;
+        handler: any;
+    }) => import("react/jsx-runtime").JSX.Element;
+    McModalContext: React.Context<McModalStore>;
+    create: <P extends {}>(Comp: React.ComponentType<P>) => React.FC<P & McModalHocProps>;
+    register: <T extends React.FC<any>>(id: string, comp: T, props?: Partial<McModalArgs<T>>) => void;
+    getModal: typeof getModal;
+    show: typeof show;
+    hide: typeof hide;
+    remove: (modal: string | React.FC<any>) => void;
+    useModal: typeof useModal;
+    reducer: (state: McModalStore | undefined, action: McModalAction) => McModalStore;
+    antdModal: (modal: McModalHandler) => {
+        open: boolean;
+        onCancel: () => void;
+        onOk: () => void;
+        afterClose: () => void;
+    };
+    antdDrawer: (modal: McModalHandler) => {
+        open: boolean;
+        onClose: () => void;
+        afterOpenChange: (visible: boolean) => void;
+    };
+};
+export default McModal;