@ant-design/pro-components 3.1.0-0 → 3.1.1-1

package/lib/list/style/index.js

@@ -1,16 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.techUiListActive = void 0;
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _cssinjs = require("@ant-design/cssinjs");
 var _provider = require("../../provider");
-var techUiListActive = exports.techUiListActive = new _cssinjs.Keyframes('techUiListActive', {
+const techUiListActive = exports.techUiListActive = new _cssinjs.Keyframes('techUiListActive', {
   '0%': {
     backgroundColor: 'unset'
   },
@@ -21,221 +18,291 @@ var techUiListActive = exports.techUiListActive = new _cssinjs.Keyframes('techUi
     backgroundColor: 'unset'
   }
 });
-var genProListStyle = function genProListStyle(token) {
-  var _row;
-  return (0, _defineProperty2.default)({}, token.componentCls, (0, _defineProperty2.default)((0, _defineProperty2.default)({
-    backgroundColor: 'transparent'
-  }, "".concat(token.proComponentsCls, "-table-alert"), {
-    marginBlockEnd: '16px'
-  }), '&-row', (_row = {
-    borderBlockEnd: "1px solid ".concat(token.colorSplit)
-  }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_row, "".concat(token.antCls, "-list-item-meta-title"), {
-    borderBlockEnd: 'none',
-    margin: 0
-  }), '&:last-child', (0, _defineProperty2.default)({
-    borderBlockEnd: 'none'
-  }, "".concat(token.antCls, "-list-item"), {
-    borderBlockEnd: 'none'
-  })), '&:hover', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    backgroundColor: 'rgba(0, 0, 0, 0.02)',
-    transition: 'background-color 0.3s'
-  }, "".concat(token.antCls, "-list-item-action"), {
-    display: 'block'
-  }), "".concat(token.antCls, "-list-item-extra"), {
-    display: 'flex'
-  }), "".concat(token.componentCls, "-row-extra"), {
-    display: 'block'
-  }), "".concat(token.componentCls, "-row-subheader-actions"), {
-    display: 'block'
-  })), '&-card', (0, _defineProperty2.default)({
-    marginBlock: 8,
-    marginInline: 0,
-    paddingBlock: 0,
-    paddingInline: 8,
-    '&:hover': {
-      backgroundColor: 'transparent'
-    }
-  }, "".concat(token.antCls, "-list-item-meta-title"), {
-    flexShrink: 9,
-    marginBlock: 0,
-    marginInline: 0,
-    lineHeight: '22px'
-  })), "&".concat(token.componentCls, "-row-editable"), (0, _defineProperty2.default)({}, "".concat(token.componentCls, "-list-item"), {
-    '&-meta': {
-      '&-avatar,&-description,&-title': {
-        paddingBlock: 6,
-        paddingInline: 0,
-        '&-editable': {
-          paddingBlock: 0
+const genProListStyle = token => {
+  return {
+    [token.componentCls]: {
+      backgroundColor: 'transparent',
+      [`${token.proComponentsCls}-table-alert`]: {
+        marginBlockEnd: '16px'
+      },
+      '&-row': {
+        borderBlockEnd: `1px solid ${token.colorSplit}`,
+        [`${token.antCls}-list-item-meta-title`]: {
+          borderBlockEnd: 'none',
+          margin: 0
+        },
+        '&:last-child': {
+          borderBlockEnd: 'none',
+          [`${token.antCls}-list-item`]: {
+            borderBlockEnd: 'none'
+          }
+        },
+        '&:hover': {
+          backgroundColor: 'rgba(0, 0, 0, 0.02)',
+          transition: 'background-color 0.3s',
+          [`${token.antCls}-list-item-action`]: {
+            display: 'block'
+          },
+          [`${token.antCls}-list-item-extra`]: {
+            display: 'flex'
+          },
+          [`${token.componentCls}-row-extra`]: {
+            display: 'block'
+          },
+          [`${token.componentCls}-row-subheader-actions`]: {
+            display: 'block'
+          }
+        },
+        '&-card': {
+          marginBlock: 8,
+          marginInline: 0,
+          paddingBlock: 0,
+          paddingInline: 8,
+          '&:hover': {
+            backgroundColor: 'transparent'
+          },
+          [`${token.antCls}-list-item-meta-title`]: {
+            flexShrink: 9,
+            marginBlock: 0,
+            marginInline: 0,
+            lineHeight: '22px'
+          }
+        },
+        [`&${token.componentCls}-row-editable`]: {
+          [`${token.componentCls}-list-item`]: {
+            '&-meta': {
+              '&-avatar,&-description,&-title': {
+                paddingBlock: 6,
+                paddingInline: 0,
+                '&-editable': {
+                  paddingBlock: 0
+                }
+              }
+            },
+            '&-action': {
+              display: 'block'
+            }
+          }
+        },
+        [`&${token.componentCls}-row-selected`]: {
+          backgroundColor: token.colorPrimaryBgHover,
+          '&:hover': {
+            backgroundColor: token.colorPrimaryBgHover
+          }
+        },
+        [`&${token.componentCls}-row-type-new`]: {
+          animationName: techUiListActive,
+          animationDuration: '3s'
+        },
+        [`&${token.componentCls}-row-type-inline`]: {
+          [`${token.componentCls}-row-title`]: {
+            fontWeight: 'normal'
+          }
+        },
+        [`&${token.componentCls}-row-type-top`]: {
+          backgroundImage: "url('https://gw.alipayobjects.com/zos/antfincdn/DehQfMbOJb/icon.svg')",
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'left top',
+          backgroundSize: '12px 12px'
+        },
+        '&-show-action-hover': {
+          [`${token.antCls}-list-item-action,
+            ${token.proComponentsCls}-card-extra,
+            ${token.proComponentsCls}-card-actions`]: {
+            display: 'flex'
+          }
+        },
+        '&-show-extra-hover': {
+          [`${token.antCls}-list-item-extra`]: {
+            display: 'none'
+          }
+        },
+        '&-extra': {
+          display: 'none'
+        },
+        '&-subheader': {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          height: '44px',
+          paddingInline: 24,
+          paddingBlock: 0,
+          color: token.colorTextSecondary,
+          lineHeight: '44px',
+          background: 'rgba(0, 0, 0, 0.02)',
+          '&-actions': {
+            display: 'none'
+          },
+          '&-actions *': {
+            marginInlineEnd: 8,
+            '&:last-child': {
+              marginInlineEnd: 0
+            }
+          }
+        },
+        '&-expand-icon': {
+          marginInlineEnd: 8,
+          display: 'flex',
+          fontSize: 12,
+          cursor: 'pointer',
+          height: '24px',
+          marginRight: 4,
+          color: token.colorTextSecondary,
+          '> .anticon > svg': {
+            transition: '0.3s'
+          }
+        },
+        '&-expanded': {
+          ' > .anticon > svg': {
+            transform: 'rotate(90deg)'
+          }
+        },
+        '&-title': {
+          marginInlineEnd: '16px',
+          wordBreak: 'break-all',
+          cursor: 'pointer',
+          '&-editable': {
+            paddingBlock: 8
+          },
+          '&:hover': {
+            color: token.colorPrimary
+          }
+        },
+        '&-content': {
+          position: 'relative',
+          display: 'flex',
+          flex: '1',
+          flexDirection: 'column',
+          marginBlock: 0,
+          marginInline: 32
+        },
+        '&-subTitle': {
+          color: 'rgba(0, 0, 0, 0.45)',
+          '&-editable': {
+            paddingBlock: 8
+          }
+        },
+        '&-description': {
+          marginBlockStart: '4px',
+          wordBreak: 'break-all'
+        },
+        '&-avatar': {
+          display: 'flex'
+        },
+        '&-header': {
+          display: 'flex',
+          flex: '1',
+          justifyContent: 'flex-start',
+          h4: {
+            margin: 0,
+            padding: 0
+          }
+        },
+        '&-header-container': {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-start'
+        },
+        '&-header-option': {
+          display: 'flex'
+        },
+        '&-checkbox': {
+          width: '16px',
+          marginInlineEnd: '12px'
+        },
+        '&-no-split': {
+          [`${token.componentCls}-row`]: {
+            borderBlockEnd: 'none'
+          },
+          [`${token.antCls}-list ${token.antCls}-list-item`]: {
+            borderBlockEnd: 'none'
+          }
+        },
+        '&-bordered': {
+          [`${token.componentCls}-toolbar`]: {
+            borderBlockEnd: `1px solid ${token.colorSplit}`
+          }
+        },
+        [`${token.antCls}-list-vertical`]: {
+          [`${token.componentCls}-row`]: {
+            borderBlockEnd: '12px 18px 12px 24px'
+          },
+          '&-header-title': {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            justifyContent: 'center'
+          },
+          '&-content': {
+            marginBlock: 0,
+            marginInline: 0
+          },
+          '&-subTitle': {
+            marginBlockStart: 8
+          },
+          [`${token.antCls}-list-item-extra`]: {
+            display: 'flex',
+            alignItems: 'center',
+            marginInlineStart: '32px',
+            [`${token.componentCls}-row-description`]: {
+              marginBlockStart: 16
+            }
+          },
+          [`${token.antCls}-list-bordered ${token.antCls}-list-item`]: {
+            paddingInline: 0
+          },
+          [`${token.componentCls}-row-show-extra-hover`]: {
+            [`${token.antCls}-list-item-extra `]: {
+              display: 'none'
+            }
+          }
+        },
+        [`${token.antCls}-list-pagination`]: {
+          marginBlockStart: token.margin,
+          marginBlockEnd: token.margin
+        },
+        [`${token.antCls}-list-list`]: {
+          '&-item': {
+            cursor: 'pointer',
+            paddingBlock: 12,
+            paddingInline: 12
+          }
+        },
+        [`${token.antCls}-list-vertical ${token.proComponentsCls}-list-row`]: {
+          '&-header': {
+            paddingBlock: 0,
+            paddingInline: 0,
+            borderBlockEnd: 'none'
+          },
+          [`${token.antCls}-list-item`]: {
+            width: '100%',
+            paddingBlock: 12,
+            paddingInlineStart: 24,
+            paddingInlineEnd: 18,
+            [`${token.antCls}-list-item-meta-avatar`]: {
+              display: 'flex',
+              alignItems: 'center',
+              marginInlineEnd: 8
+            },
+            [`${token.antCls}-list-item-action-split`]: {
+              display: 'none'
+            },
+            [`${token.antCls}-list-item-meta-title`]: {
+              marginBlock: 0,
+              marginInline: 0
+            }
+          }
         }
       }
-    },
-    '&-action': {
-      display: 'block'
-    }
-  })), "&".concat(token.componentCls, "-row-selected"), {
-    backgroundColor: token.colorPrimaryBgHover,
-    '&:hover': {
-      backgroundColor: token.colorPrimaryBgHover
-    }
-  }), "&".concat(token.componentCls, "-row-type-new"), {
-    animationName: techUiListActive,
-    animationDuration: '3s'
-  }), "&".concat(token.componentCls, "-row-type-inline"), (0, _defineProperty2.default)({}, "".concat(token.componentCls, "-row-title"), {
-    fontWeight: 'normal'
-  })), "&".concat(token.componentCls, "-row-type-top"), {
-    backgroundImage: "url('https://gw.alipayobjects.com/zos/antfincdn/DehQfMbOJb/icon.svg')",
-    backgroundRepeat: 'no-repeat',
-    backgroundPosition: 'left top',
-    backgroundSize: '12px 12px'
-  }), '&-show-action-hover', (0, _defineProperty2.default)({}, "".concat(token.antCls, "-list-item-action,\n            ").concat(token.proComponentsCls, "-card-extra,\n            ").concat(token.proComponentsCls, "-card-actions"), {
-    display: 'flex'
-  })), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_row, '&-show-extra-hover', (0, _defineProperty2.default)({}, "".concat(token.antCls, "-list-item-extra"), {
-    display: 'none'
-  })), '&-extra', {
-    display: 'none'
-  }), '&-subheader', {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    height: '44px',
-    paddingInline: 24,
-    paddingBlock: 0,
-    color: token.colorTextSecondary,
-    lineHeight: '44px',
-    background: 'rgba(0, 0, 0, 0.02)',
-    '&-actions': {
-      display: 'none'
-    },
-    '&-actions *': {
-      marginInlineEnd: 8,
-      '&:last-child': {
-        marginInlineEnd: 0
-      }
-    }
-  }), '&-expand-icon', {
-    marginInlineEnd: 8,
-    display: 'flex',
-    fontSize: 12,
-    cursor: 'pointer',
-    height: '24px',
-    marginRight: 4,
-    color: token.colorTextSecondary,
-    '> .anticon > svg': {
-      transition: '0.3s'
-    }
-  }), '&-expanded', {
-    ' > .anticon > svg': {
-      transform: 'rotate(90deg)'
-    }
-  }), '&-title', {
-    marginInlineEnd: '16px',
-    wordBreak: 'break-all',
-    cursor: 'pointer',
-    '&-editable': {
-      paddingBlock: 8
-    },
-    '&:hover': {
-      color: token.colorPrimary
-    }
-  }), '&-content', {
-    position: 'relative',
-    display: 'flex',
-    flex: '1',
-    flexDirection: 'column',
-    marginBlock: 0,
-    marginInline: 32
-  }), '&-subTitle', {
-    color: 'rgba(0, 0, 0, 0.45)',
-    '&-editable': {
-      paddingBlock: 8
-    }
-  }), '&-description', {
-    marginBlockStart: '4px',
-    wordBreak: 'break-all'
-  }), '&-avatar', {
-    display: 'flex'
-  }), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_row, '&-header', {
-    display: 'flex',
-    flex: '1',
-    justifyContent: 'flex-start',
-    h4: {
-      margin: 0,
-      padding: 0
-    }
-  }), '&-header-container', {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-start'
-  }), '&-header-option', {
-    display: 'flex'
-  }), '&-checkbox', {
-    width: '16px',
-    marginInlineEnd: '12px'
-  }), '&-no-split', (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.componentCls, "-row"), {
-    borderBlockEnd: 'none'
-  }), "".concat(token.antCls, "-list ").concat(token.antCls, "-list-item"), {
-    borderBlockEnd: 'none'
-  })), '&-bordered', (0, _defineProperty2.default)({}, "".concat(token.componentCls, "-toolbar"), {
-    borderBlockEnd: "1px solid ".concat(token.colorSplit)
-  })), "".concat(token.antCls, "-list-vertical"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.componentCls, "-row"), {
-    borderBlockEnd: '12px 18px 12px 24px'
-  }), '&-header-title', {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    justifyContent: 'center'
-  }), '&-content', {
-    marginBlock: 0,
-    marginInline: 0
-  }), '&-subTitle', {
-    marginBlockStart: 8
-  }), "".concat(token.antCls, "-list-item-extra"), (0, _defineProperty2.default)({
-    display: 'flex',
-    alignItems: 'center',
-    marginInlineStart: '32px'
-  }, "".concat(token.componentCls, "-row-description"), {
-    marginBlockStart: 16
-  })), "".concat(token.antCls, "-list-bordered ").concat(token.antCls, "-list-item"), {
-    paddingInline: 0
-  }), "".concat(token.componentCls, "-row-show-extra-hover"), (0, _defineProperty2.default)({}, "".concat(token.antCls, "-list-item-extra "), {
-    display: 'none'
-  }))), "".concat(token.antCls, "-list-pagination"), {
-    marginBlockStart: token.margin,
-    marginBlockEnd: token.margin
-  }), "".concat(token.antCls, "-list-list"), {
-    '&-item': {
-      cursor: 'pointer',
-      paddingBlock: 12,
-      paddingInline: 12
-    }
-  }), "".concat(token.antCls, "-list-vertical ").concat(token.proComponentsCls, "-list-row"), (0, _defineProperty2.default)({
-    '&-header': {
-      paddingBlock: 0,
-      paddingInline: 0,
-      borderBlockEnd: 'none'
     }
-  }, "".concat(token.antCls, "-list-item"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    width: '100%',
-    paddingBlock: 12,
-    paddingInlineStart: 24,
-    paddingInlineEnd: 18
-  }, "".concat(token.antCls, "-list-item-meta-avatar"), {
-    display: 'flex',
-    alignItems: 'center',
-    marginInlineEnd: 8
-  }), "".concat(token.antCls, "-list-item-action-split"), {
-    display: 'none'
-  }), "".concat(token.antCls, "-list-item-meta-title"), {
-    marginBlock: 0,
-    marginInline: 0
-  }))))));
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('ProList', function (token) {
-    var proListToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('ProList', token => {
+    const proListToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProListStyle(proListToken)];
   });
 }