feat: add all collapse examples and repare style

packages/base/src/collapse/collapse-item.tsx

@@ -6,17 +6,24 @@ import { useCollapseItem } from '@sheinx/hooks';
 import AnimationList from '..//animation-list';
 
 const CollapseItem = (props: CollapseItemProps) => {
-  const { active, triggerRegion, expandIcon, onChange, expandContentPosition } =
-    useContext(groupContext);
+  const {
+    active,
+    triggerRegion,
+    expandIcon: parentExpandIcon,
+    onChange,
+    expandIconPosition,
+    extraPosition,
+    border,
+  } = useContext(groupContext);
   const {
     children,
-    name,
+    keygen,
     className,
     jssStyle,
     style,
     disabled,
     showExpandIcon = true,
-    expandContent,
+    expandIcon,
     title,
     extra,
     contentStyle,
@@ -25,22 +32,22 @@ const CollapseItem = (props: CollapseItemProps) => {
   const { judgeExpanded, getItemContentProps, getHeaderIconProps, getTitleProps, getExtraProps } =
     useCollapseItem({
       active,
-      name,
+      keygen,
       triggerRegion,
       disabled,
       onChange,
     });
   const headerIconItem = () => {
     const collapseItemIconClassName = classNames(
       jssStyle?.collapseItem.icon,
-      expandContentPosition === 'right'
+      expandIconPosition === 'right'
         ? jssStyle?.collapseItem.activeTransformRight
         : jssStyle?.collapseItem.activeTransform,
     );
     const headerIcon = showExpandIcon
-      ? expandContent !== undefined
-        ? expandContent
-        : expandIcon
+      ? expandIcon !== undefined
+        ? expandIcon
+        : parentExpandIcon
       : null;
     return (
       headerIcon && (
@@ -59,12 +66,12 @@ const CollapseItem = (props: CollapseItemProps) => {
     className,
     jssStyle?.collapseItem.wrapper,
     judgeExpanded && jssStyle?.collapseItem.active,
-    disabled && jssStyle?.collapseItem.disabled,
+    (disabled || triggerRegion === 'disabled') && jssStyle?.collapseItem.disabled,
+    !border && jssStyle?.collapseItem.borderLess,
   );
   const collapseItemHeaderClassName = classNames(
     jssStyle?.collapseItem.header,
     !showExpandIcon && jssStyle?.collapseItem.noIcon,
-    expandContentPosition === 'right' && jssStyle?.collapseItem.rightIcon,
     triggerRegion === 'header' && jssStyle?.collapseItem.region,
   );
 
@@ -91,9 +98,11 @@ const CollapseItem = (props: CollapseItemProps) => {
   return (
     <div className={collapseItemClassName} style={style}>
       <div {...getItemContentProps({ className: collapseItemHeaderClassName })}>
-        {headerIconItem()}
+        {expandIconPosition === 'left' && headerIconItem()}
+        {extraPosition === 'left' && extraItem()}
         <div {...getTitleProps({ className: jssStyle?.collapseItem.title })}>{title}</div>
-        {extraItem()}
+        {extraPosition === 'right' && extraItem()}
+        {expandIconPosition === 'right' && headerIconItem()}
       </div>
       {renderContent()}
     </div>

packages/base/src/collapse/collapse-item.type.ts

@@ -16,11 +16,11 @@ export interface CollapseItemClasses {
   expanded: string;
   contentMain: string;
   noIcon: string;
-  rightIcon: string;
   disabled: string;
   activeTransform: string;
   activeTransformRight: string;
   region: string;
+  borderLess: string;
 }
 
 export interface CollapseItemProps
@@ -30,7 +30,7 @@ export interface CollapseItemProps
     collapseItem: CollapseItemClasses;
   };
   showExpandIcon?: boolean;
-  expandContent?: ReactNode;
+  expandIcon?: ReactNode;
   extra?: ReactNode;
   title?: ReactNode;
   contentStyle?: CSSProperties;

packages/base/src/collapse/collapse.tsx

@@ -15,9 +15,10 @@ const Collapse = (props: CollapseProps) => {
     active: activeProps,
     accordion = false,
     onChange: onChangeProps,
-    triggerRegion,
-    expandContentPosition = 'left',
-    expandContent,
+    triggerRegion = 'header',
+    expandIconPosition = 'left',
+    extraPosition = 'right',
+    expandIcon,
     border = true,
   } = props;
 
@@ -37,11 +38,13 @@ const Collapse = (props: CollapseProps) => {
   const providerValue = {
     active,
     triggerRegion,
-    expandContentPosition,
+    expandIconPosition,
+    extraPosition,
+    border,
     expandIcon:
-      expandContent !== undefined
-        ? expandContent
-        : expandContentPosition === 'right'
+      expandIcon !== undefined
+        ? expandIcon
+        : expandIconPosition === 'right'
         ? Icons.AngleLeft
         : Icons.AngleRight,
     onChange,

packages/base/src/collapse/collapse.type.ts

@@ -13,13 +13,14 @@ export interface CollapseClasses {
 
 export interface CollapseProps
   extends Pick<CommonType, 'className' | 'style'>,
-    Pick<CollapseItemProps, 'expandContent'>,
+    Pick<CollapseItemProps, 'expandIcon'>,
     Pick<BaseCollapseItemContext, 'triggerRegion'>,
     BaseCollapseProps {
   jssStyle?: {
     collapse: CollapseClasses;
   };
   border?: boolean;
-  expandContentPosition?: 'left' | 'right';
+  expandIconPosition?: 'left' | 'right';
+  extraPosition?: 'left' | 'right';
   children?: ReactNode;
 }

packages/hooks/src/components/use-collapse/use-collapse-item.ts

@@ -3,16 +3,16 @@ import type { ObjectType } from '../../common/type';
 import type { BaseCollapseType } from './use-collapse-item.type';
 
 const useCollapseItem = (props: BaseCollapseType) => {
-  const { active, name, triggerRegion, disabled, onChange } = props;
-  const judgeExpanded = active.indexOf(name) > -1;
+  const { active, keygen, triggerRegion, disabled, onChange } = props;
+  const judgeExpanded = active.indexOf(keygen) > -1;
   const currentDisabled = triggerRegion === 'disabled' || disabled;
 
   type clickByReginType = React.MouseEvent<HTMLDivElement, MouseEvent>;
   const handleClickByRegion = usePersistFn((e: clickByReginType, regionKey: 0 | 1 | 2) => {
     if (currentDisabled) return;
     const triggerKey = triggerRegion === 'icon' ? 0 : triggerRegion === 'header' ? 1 : 2;
     if (regionKey === triggerKey || (triggerRegion === 'header' && [0, 1].includes(regionKey)))
-      onChange(name, e);
+      onChange(keygen, e);
   });
 
   const getItemContentProps = <TOther extends ObjectType>(

packages/hooks/src/components/use-collapse/use-collapse-item.type.ts

@@ -5,7 +5,7 @@ export interface BaseCollapseItemContext {
 }
 
 export interface BaseCollapseItemProps {
-  name: string;
+  keygen: string;
   disabled?: boolean;
 }
 

packages/shineout-style/src/collapse/collapse-item.ts

@@ -1,4 +1,5 @@
 import { JsStyles } from '../jss-style';
+import Token from '@sheinx/theme';
 
 export type CollapseItemClass =
   | 'wrapper'
@@ -10,42 +11,44 @@ export type CollapseItemClass =
   | 'extra'
   | 'content'
   | 'contentMain'
-  | 'rightIcon'
   | 'disabled'
   | 'activeTransform'
   | 'activeTransformRight'
   | 'expanded'
+  | 'borderLess'
   | 'region';
 
 const collapseItemStyle: JsStyles<CollapseItemClass> = {
   wrapper: {
     boxSizing: 'border-box',
-    borderBottom: '1px solid rgb(229,230,235)',
+    borderBottom: `${Token.collapseWrapperBorderSize} solid ${Token.collapseWrapperBorderColor}`,
     '&:last-child': {
       borderBottom: 0,
     },
+
+    gap: Token.collapseWrapperGap,
+    backgroundColor: Token.collapseWrapperBackgroundColor,
+    color: Token.collapseWrapperColor,
     height: 'auto',
     width: 'auto',
   },
+  borderLess: {
+    borderBottom: 'none',
+  },
   header: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
     boxSizing: 'border-box',
     overflow: 'hidden',
-    paddingTop: '8px',
-    paddingBottom: '8px',
-    backgroundColor: '#fff',
-    color: 'black',
-    fontSize: '14px',
-    lineHeight: '24px',
-    transition: 'border-color 0s ease 0s',
-    borderBottom: '1px solid transparent',
+    gap: Token.collapseHeaderGap,
+    fontSize: Token.collapseHeaderFontSize,
+    fontWeight: Token.collapseHeaderWeight,
+    color: Token.collapseHeaderColor,
+    lineHeight: Token.collapseHeaderLineHeight,
+    padding: `${Token.collapseWrapperPaddingY} ${Token.collapseWrapperPaddingX}`,
   },
   active: {
-    '& > $header': {
-      borderColor: 'rgb(201,205,212)',
-    },
     '& > header > $title': {
       fontWeight: 500,
     },
@@ -70,51 +73,34 @@ const collapseItemStyle: JsStyles<CollapseItemClass> = {
   icon: {
     display: 'flex',
     alignItems: 'center',
-    marginLeft: 8,
     cursor: 'pointer',
     '& svg': {
-      width: 14,
+      width: Token.collapseHeaderIconWidth,
     },
   },
   title: {
-    display: 'inline',
-    marginLeft: 8,
-    marginRight: 8,
     flex: 1,
   },
   extra: {
-    marginRight: '8px',
     cursor: 'pointer',
+    gap: Token.collapseHeaderExtraGap,
   },
   content: {
-    width: 'auto',
-    height: 'auto',
     overflow: 'hidden',
-    position: 'relative',
-    transition: 'height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1)',
-    color: 'rgb(29,33,41)',
-    // display: 'none',
   },
   contentMain: {
-    padding: '8px 13px 8px 34px',
-    backgroundColor: 'rgb(247,248,250)',
-    fontSize: '14px',
-  },
-  rightIcon: {
-    flexDirection: 'row-reverse',
-    '& > $icon': {
-      marginRight: '8px',
-      marginLeft: 0,
-    },
-    '& > $extra': {
-      marginRight: 0,
-      marginLeft: '8px',
-    },
+    fontSize: Token.collapseContentFontSize,
+    color: Token.collapseContentColor,
+    fontWeight: Token.collapseContentWeight,
+    lineHeight: Token.collapseContentLineHeight,
+    padding: `${Token.collapseContentPaddingY} ${Token.collapseContentPaddingRight} ${Token.collapseContentPaddingY} ${Token.collapseContentPaddingLeft}`,
+    backgroundColor: Token.collapseContentBackgroundColor,
+    gap: Token.collapseContentGap,
   },
   disabled: {
-    '& $header, $content': {
+    '& $header, $content, $extra, $icon': {
       cursor: 'not-allowed',
-      color: 'rgb(201,205,212)',
+      color: Token.collapseDisabledColor,
     },
   },
   expanded: {},

packages/shineout-style/src/collapse/collapse.ts

@@ -1,14 +1,14 @@
-// import token from '@sheinx/theme';
+import Token from '@sheinx/theme';
 import { JsStyles } from '../jss-style';
 
 export type CollapseClass = 'wrapper' | 'borderLess';
 
 const collapseStyle: JsStyles<CollapseClass> = {
   wrapper: {
     overflow: 'hidden',
-    borderRadius: '4px',
-    border: '1px solid rgb(229,230,235)',
-    lineHeight: '1.5715',
+    borderRadius: Token.collapseWrapperBorderRadius,
+    border: `${Token.collapseWrapperBorderSize} solid ${Token.collapseWrapperBorderColor}`,
+    color: Token.collapseWrapperColor,
   },
   borderLess: {
     border: 'none',

packages/shineout/src/collapse/__example__/01-base.tsx

@@ -10,37 +10,36 @@ import { Collapse } from 'shineout';
 export default () => {
   return (
     <div>
-      <Collapse
-        defaultActive={['1', '3']}
-        style={{ maxWidth: 1180 }}
-        triggerRegion='icon'
-        expandContentPosition='left'
-        border
-        onChange={() => {
-          console.log(1);
-        }}
-      >
-        <Collapse.Item title='dads' name='0'>
-          <Collapse style={{ maxWidth: 1180 }} triggerRegion='header' expandContentPosition='right'>
-            <Collapse.Item title='Beijing Toutiao Technology Co., Ltd.' name='1' extra='hello'>
-              Beijing Toutiao Technology Co., Ltd.
-            </Collapse.Item>
-          </Collapse>
+      <Collapse defaultActive={['1', '3']} style={{ maxWidth: 1180 }}>
+        <Collapse.Item title='This is panel header 1' keygen='0'>
+          Joy in living comes from having fine emotions, trusting them, giving them the freedom of a
+          bird in the open. Joy in living can never be assumed as a pose, or put on from the outside
+          as a mask. People who have this joy do not need to talk about it; they radiate it. They
+          just live out their joy and let it splash its sunlight and glow into other lives as
+          naturally as bird sings.
         </Collapse.Item>
-        <Collapse.Item title='Beijing Toutiao Technology Co., Ltd.' name='1' extra='hello'>
-          Beijing Toutiao Technology Co., Ltd.
+        <Collapse.Item title='This is panel header 2' keygen='1'>
+          Joy in living comes from having fine emotions, trusting them, giving them the freedom of a
+          bird in the open. Joy in living can never be assumed as a pose, or put on from the outside
+          as a mask. People who have this joy do not need to talk about it; they radiate it. They
+          just live out their joy and let it splash its sunlight and glow into other lives as
+          naturally as bird sings.
         </Collapse.Item>
 
-        <Collapse.Item title='Introduce' name='2' disabled>
-          is a content platform in China and around the world. Toutiao started out as a news
-          recommendation engine and gradually evolved into a platform delivering content in various
-          formats, such as texts, images, question-and-answer posts, microblogs, and videos.
+        <Collapse.Item title='This is panel header 3' keygen='2' disabled>
+          Joy in living comes from having fine emotions, trusting them, giving them the freedom of a
+          bird in the open. Joy in living can never be assumed as a pose, or put on from the outside
+          as a mask. People who have this joy do not need to talk about it; they radiate it. They
+          just live out their joy and let it splash its sunlight and glow into other lives as
+          naturally as bird sings.
         </Collapse.Item>
 
-        <Collapse.Item title='The Underlying AI Technology' name='3'>
-          artificial intelligence bot that writes news articles. The bot published 450 articles
-          during the 15-day 2016 Summer Olympics in Rio de Janeiro. In general, Xiaomingbot
-          published stories approximately two seconds after the event ended.
+        <Collapse.Item title='This is panel header 4' keygen='3' disabled>
+          Joy in living comes from having fine emotions, trusting them, giving them the freedom of a
+          bird in the open. Joy in living can never be assumed as a pose, or put on from the outside
+          as a mask. People who have this joy do not need to talk about it; they radiate it. They
+          just live out their joy and let it splash its sunlight and glow into other lives as
+          naturally as bird sings.
         </Collapse.Item>
       </Collapse>
     </div>