first commit

frontend/node_modules/antd/es/transfer/style/index.d.ts

@@ -0,0 +1,36 @@
+import type { GetDefaultToken } from '../../theme/internal';
+export interface ComponentToken {
+    /**
+     * @desc 列表宽度
+     * @descEN Width of list
+     */
+    listWidth: number | string;
+    /**
+     * @desc 大号列表宽度
+     * @descEN Width of large list
+     */
+    listWidthLG: number | string;
+    /**
+     * @desc 列表高度
+     * @descEN Height of list
+     */
+    listHeight: number | string;
+    /**
+     * @desc 列表项高度
+     * @descEN Height of list item
+     */
+    itemHeight: number | string;
+    /**
+     * @desc 列表项纵向内边距
+     * @descEN Vertical padding of list item
+     */
+    itemPaddingBlock: number | string;
+    /**
+     * @desc 顶部高度
+     * @descEN Height of header
+     */
+    headerHeight: number | string;
+}
+export declare const prepareComponentToken: GetDefaultToken<'Transfer'>;
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: React.ReactElement) => React.ReactElement, string, string];
+export default _default;

frontend/node_modules/antd/es/transfer/style/index.js

@@ -0,0 +1,299 @@
+import { unit } from '@ant-design/cssinjs';
+import { operationUnit, resetComponent, resetIcon, textEllipsis } from '../../style';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
+const genTransferCustomizeStyle = token => {
+  const {
+    antCls,
+    componentCls,
+    listHeight,
+    controlHeightLG
+  } = token;
+  const tableCls = `${antCls}-table`;
+  const inputCls = `${antCls}-input`;
+  return {
+    [`${componentCls}-customize-list`]: {
+      [`${componentCls}-list`]: {
+        flex: '1 1 50%',
+        width: 'auto',
+        height: 'auto',
+        minHeight: listHeight,
+        minWidth: 0
+      },
+      // =================== Hook Components ===================
+      [`${tableCls}-wrapper`]: {
+        [`${tableCls}-small`]: {
+          border: 0,
+          borderRadius: 0,
+          [`${tableCls}-selection-column`]: {
+            width: controlHeightLG,
+            minWidth: controlHeightLG
+          }
+        },
+        [`${tableCls}-pagination${tableCls}-pagination`]: {
+          margin: 0,
+          padding: token.paddingXS
+        }
+      },
+      [`${inputCls}[disabled]`]: {
+        backgroundColor: 'transparent'
+      }
+    }
+  };
+};
+const genTransferStatusColor = (token, color) => {
+  const {
+    componentCls,
+    colorBorder
+  } = token;
+  return {
+    [`${componentCls}-list`]: {
+      borderColor: color,
+      '&-search:not([disabled])': {
+        borderColor: colorBorder
+      }
+    }
+  };
+};
+const genTransferStatusStyle = token => {
+  const {
+    componentCls
+  } = token;
+  return {
+    [`${componentCls}-status-error`]: Object.assign({}, genTransferStatusColor(token, token.colorError)),
+    [`${componentCls}-status-warning`]: Object.assign({}, genTransferStatusColor(token, token.colorWarning))
+  };
+};
+const genTransferListStyle = token => {
+  const {
+    componentCls,
+    colorBorder,
+    colorSplit,
+    lineWidth,
+    itemHeight,
+    headerHeight,
+    transferHeaderVerticalPadding,
+    itemPaddingBlock,
+    controlItemBgActive,
+    colorTextDisabled,
+    colorTextSecondary,
+    listHeight,
+    listWidth,
+    listWidthLG,
+    fontSizeIcon,
+    marginXS,
+    paddingSM,
+    lineType,
+    antCls,
+    iconCls,
+    motionDurationSlow,
+    controlItemBgHover,
+    borderRadiusLG,
+    colorBgContainer,
+    colorText,
+    controlItemBgActiveHover
+  } = token;
+  const contentBorderRadius = unit(token.calc(borderRadiusLG).sub(lineWidth).equal());
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    width: listWidth,
+    height: listHeight,
+    border: `${unit(lineWidth)} ${lineType} ${colorBorder}`,
+    borderRadius: token.borderRadiusLG,
+    '&-with-pagination': {
+      width: listWidthLG,
+      height: 'auto'
+    },
+    '&-search': {
+      [`${iconCls}-search`]: {
+        color: colorTextDisabled
+      }
+    },
+    '&-header': {
+      display: 'flex',
+      flex: 'none',
+      alignItems: 'center',
+      height: headerHeight,
+      // border-top is on the transfer dom. We should minus 1px for this
+      padding: `${unit(token.calc(transferHeaderVerticalPadding).sub(lineWidth).equal())} ${unit(paddingSM)} ${unit(transferHeaderVerticalPadding)}`,
+      color: colorText,
+      background: colorBgContainer,
+      borderBottom: `${unit(lineWidth)} ${lineType} ${colorSplit}`,
+      borderRadius: `${unit(borderRadiusLG)} ${unit(borderRadiusLG)} 0 0`,
+      '> *:not(:last-child)': {
+        marginInlineEnd: 4 // This is magic and fixed number, DO NOT use token since it may change.
+      },
+      '> *': {
+        flex: 'none'
+      },
+      '&-title': Object.assign(Object.assign({}, textEllipsis), {
+        flex: 'auto',
+        textAlign: 'end'
+      }),
+      '&-dropdown': Object.assign(Object.assign({}, resetIcon()), {
+        fontSize: fontSizeIcon,
+        transform: 'translateY(10%)',
+        cursor: 'pointer',
+        '&[disabled]': {
+          cursor: 'not-allowed'
+        }
+      })
+    },
+    '&-body': {
+      display: 'flex',
+      flex: 'auto',
+      flexDirection: 'column',
+      fontSize: token.fontSize,
+      // https://blog.csdn.net/qq449245884/article/details/107373672/
+      minHeight: 0,
+      '&-search-wrapper': {
+        position: 'relative',
+        flex: 'none',
+        padding: paddingSM
+      }
+    },
+    '&-content': {
+      flex: 'auto',
+      margin: 0,
+      padding: 0,
+      overflow: 'auto',
+      listStyle: 'none',
+      borderRadius: `0 0 ${contentBorderRadius} ${contentBorderRadius}`,
+      '&-item': {
+        display: 'flex',
+        alignItems: 'center',
+        minHeight: itemHeight,
+        padding: `${unit(itemPaddingBlock)} ${unit(paddingSM)}`,
+        transition: `all ${motionDurationSlow}`,
+        '> *:not(:last-child)': {
+          marginInlineEnd: marginXS
+        },
+        '> *': {
+          flex: 'none'
+        },
+        '&-text': Object.assign(Object.assign({}, textEllipsis), {
+          flex: 'auto'
+        }),
+        '&-remove': Object.assign(Object.assign({}, operationUnit(token)), {
+          color: colorBorder,
+          '&:hover, &:focus': {
+            color: colorTextSecondary
+          }
+        }),
+        [`&:not(${componentCls}-list-content-item-disabled)`]: {
+          '&:hover': {
+            backgroundColor: controlItemBgHover,
+            cursor: 'pointer'
+          },
+          [`&${componentCls}-list-content-item-checked:hover`]: {
+            backgroundColor: controlItemBgActiveHover
+          }
+        },
+        '&-checked': {
+          backgroundColor: controlItemBgActive
+        },
+        '&-disabled': {
+          color: colorTextDisabled,
+          cursor: 'not-allowed'
+        }
+      },
+      // Do not change hover style when `oneWay` mode
+      [`&-show-remove ${componentCls}-list-content-item:not(${componentCls}-list-content-item-disabled):hover`]: {
+        background: 'transparent',
+        cursor: 'default'
+      }
+    },
+    '&-pagination': {
+      padding: token.paddingXS,
+      textAlign: 'end',
+      borderTop: `${unit(lineWidth)} ${lineType} ${colorSplit}`,
+      [`${antCls}-pagination-options`]: {
+        paddingInlineEnd: token.paddingXS
+      }
+    },
+    '&-body-not-found': {
+      flex: 'none',
+      width: '100%',
+      margin: 'auto 0',
+      color: colorTextDisabled,
+      textAlign: 'center'
+    },
+    '&-footer': {
+      borderTop: `${unit(lineWidth)} ${lineType} ${colorSplit}`
+    },
+    // fix: https://github.com/ant-design/ant-design/issues/44489
+    '&-checkbox': {
+      lineHeight: 1
+    }
+  };
+};
+const genTransferStyle = token => {
+  const {
+    antCls,
+    iconCls,
+    componentCls,
+    marginXS,
+    marginXXS,
+    fontSizeIcon,
+    colorBgContainerDisabled
+  } = token;
+  return {
+    [componentCls]: Object.assign(Object.assign({}, resetComponent(token)), {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'stretch',
+      [`${componentCls}-disabled`]: {
+        [`${componentCls}-list`]: {
+          background: colorBgContainerDisabled
+        }
+      },
+      [`${componentCls}-list`]: genTransferListStyle(token),
+      [`${componentCls}-operation`]: {
+        display: 'flex',
+        flex: 'none',
+        flexDirection: 'column',
+        alignSelf: 'center',
+        margin: `0 ${unit(marginXS)}`,
+        verticalAlign: 'middle',
+        gap: marginXXS,
+        [`${antCls}-btn ${iconCls}`]: {
+          fontSize: fontSizeIcon
+        }
+      }
+    })
+  };
+};
+const genTransferRTLStyle = token => {
+  const {
+    componentCls
+  } = token;
+  return {
+    [`${componentCls}-rtl`]: {
+      direction: 'rtl'
+    }
+  };
+};
+export const prepareComponentToken = token => {
+  const {
+    fontSize,
+    lineHeight,
+    controlHeight,
+    controlHeightLG,
+    lineWidth
+  } = token;
+  const fontHeight = Math.round(fontSize * lineHeight);
+  return {
+    listWidth: 180,
+    listHeight: 200,
+    listWidthLG: 250,
+    headerHeight: controlHeightLG,
+    itemHeight: controlHeight,
+    itemPaddingBlock: (controlHeight - fontHeight) / 2,
+    transferHeaderVerticalPadding: Math.ceil((controlHeightLG - lineWidth - fontHeight) / 2)
+  };
+};
+// ============================== Export ==============================
+export default genStyleHooks('Transfer', token => {
+  const transferToken = mergeToken(token);
+  return [genTransferStyle(transferToken), genTransferCustomizeStyle(transferToken), genTransferStatusStyle(transferToken), genTransferRTLStyle(transferToken)];
+}, prepareComponentToken);