Skip to content

Commit 9ce5862

Browse files
xiejay97xiejay97
committed
chore(ui): remove flex-direction that reverse direction
1 parent 2cda99f commit 9ce5862

12 files changed

Lines changed: 367 additions & 340 deletions

File tree

‎packages/ui/src/components/accordion/Accordion.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,9 @@ export function DAccordion<ID extends DId, T extends DAccordionItem<ID>>(props:
129129
}
130130
};
131131

132+
const titleNode = <div className={`${dPrefix}accordion__item-title`}>{itemTitle}</div>;
133+
const arrowNode = itemArrow && <DownOutlined className={`${dPrefix}accordion__item-arrow`} dRotate={iconRotate} />;
134+
132135
return (
133136
<div
134137
key={itemId}
@@ -139,7 +142,6 @@ export function DAccordion<ID extends DId, T extends DAccordionItem<ID>>(props:
139142
<div
140143
id={buttonId}
141144
className={getClassName(`${dPrefix}accordion__item-button`, {
142-
[`${dPrefix}accordion__item-button--arrow-left`]: itemArrow === 'left',
143145
'is-disabled': itemDisabled,
144146
})}
145147
tabIndex={itemDisabled ? -1 : 0}
@@ -191,8 +193,17 @@ export function DAccordion<ID extends DId, T extends DAccordionItem<ID>>(props:
191193
}
192194
}}
193195
>
194-
<div className={`${dPrefix}accordion__item-title`}>{itemTitle}</div>
195-
{itemArrow && <DownOutlined className={`${dPrefix}accordion__item-arrow`} dRotate={iconRotate} />}
196+
{itemArrow === 'left' ? (
197+
<>
198+
{arrowNode}
199+
{titleNode}
200+
</>
201+
) : (
202+
<>
203+
{titleNode}
204+
{arrowNode}
205+
</>
206+
)}
196207
</div>
197208
<DCollapseTransition
198209
dOriginalSize={{

‎packages/ui/src/components/button/Button.tsx‎

Lines changed: 46 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,47 @@ function Button(props: DButtonProps, ref: React.ForwardedRef<HTMLButtonElement>)
5050
const disabled = restProps.disabled || dLoading || gDisabled;
5151

5252
const buttonIcon = (loading: boolean, iconRef?: React.RefObject<HTMLDivElement>, style?: React.CSSProperties) => (
53-
<div ref={iconRef} className={`${dPrefix}button__icon`} style={style}>
53+
<div
54+
ref={iconRef}
55+
className={getClassName(`${dPrefix}button__icon`, {
56+
[`${dPrefix}button__icon--right`]: dIconRight,
57+
})}
58+
style={style}
59+
>
5460
{loading ? <LoadingOutlined dSpin /> : dIcon}
5561
</div>
5662
);
5763

64+
const iconNode = checkNodeExist(dIcon) ? (
65+
buttonIcon(dLoading)
66+
) : (
67+
<DCollapseTransition
68+
dOriginalSize={{
69+
width: '',
70+
}}
71+
dCollapsedStyle={{
72+
width: 0,
73+
}}
74+
dIn={dLoading}
75+
dDuring={TTANSITION_DURING_SLOW}
76+
dHorizontal
77+
dStyles={{
78+
entering: {
79+
transition: ['width', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_SLOW}ms linear`).join(', '),
80+
},
81+
leaving: {
82+
transition: ['width', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_SLOW}ms linear`).join(', '),
83+
},
84+
leaved: { display: 'none' },
85+
}}
86+
dDestroyWhenLeaved
87+
>
88+
{(collapseRef, collapseStyle) => buttonIcon(true, collapseRef, collapseStyle)}
89+
</DCollapseTransition>
90+
);
91+
92+
const contentNode = <div>{children}</div>;
93+
5894
return (
5995
<DBaseDesign
6096
dComposeDesign={{
@@ -72,7 +108,6 @@ function Button(props: DButtonProps, ref: React.ForwardedRef<HTMLButtonElement>)
72108
[`${dPrefix}button--${size}`]: size,
73109
[`${dPrefix}button--block`]: dBlock,
74110
[`${dPrefix}button--icon`]: !children,
75-
[`${dPrefix}button--icon-right`]: dIconRight,
76111
'is-loading': dLoading,
77112
})}
78113
type={restProps.type ?? 'button'}
@@ -85,34 +120,17 @@ function Button(props: DButtonProps, ref: React.ForwardedRef<HTMLButtonElement>)
85120
}
86121
}}
87122
>
88-
{checkNodeExist(dIcon) ? (
89-
buttonIcon(dLoading)
123+
{dIconRight ? (
124+
<>
125+
{contentNode}
126+
{iconNode}
127+
</>
90128
) : (
91-
<DCollapseTransition
92-
dOriginalSize={{
93-
width: '',
94-
}}
95-
dCollapsedStyle={{
96-
width: 0,
97-
}}
98-
dIn={dLoading}
99-
dDuring={TTANSITION_DURING_SLOW}
100-
dHorizontal
101-
dStyles={{
102-
entering: {
103-
transition: ['width', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_SLOW}ms linear`).join(', '),
104-
},
105-
leaving: {
106-
transition: ['width', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_SLOW}ms linear`).join(', '),
107-
},
108-
leaved: { display: 'none' },
109-
}}
110-
dDestroyWhenLeaved
111-
>
112-
{(collapseRef, collapseStyle) => buttonIcon(true, collapseRef, collapseStyle)}
113-
</DCollapseTransition>
129+
<>
130+
{iconNode}
131+
{contentNode}
132+
</>
114133
)}
115-
<div>{children}</div>
116134
{waveNode}
117135
</button>
118136
)

‎packages/ui/src/components/fab/Fab.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,12 @@ export const DFab: {
5555
dList &&
5656
dList.map(({ placement, actions }, key) => (
5757
<div key={key} className={getClassName(`${dPrefix}fab__actions`, `${dPrefix}fab__actions--${placement}`)}>
58-
{React.Children.map(actions, (action, index) =>
58+
{React.Children.map(placement === 'right' || placement === 'bottom' ? actions : [...actions].reverse(), (action, index) =>
5959
cloneHTMLElement(action, {
6060
className: getClassName(action.props.className, `${dPrefix}fab__action`),
6161
style: {
6262
...action.props.style,
63-
animationDelay: `${index * 33}ms`,
63+
animationDelay: `${(placement === 'right' || placement === 'bottom' ? index : actions.length - 1 - index) * 33}ms`,
6464
},
6565
onClick: (e) => {
6666
action.props.onClick?.(e);

‎packages/ui/src/components/switch/Switch.tsx‎

Lines changed: 67 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -74,69 +74,82 @@ export function DSwitch(props: DSwitchProps): JSX.Element | null {
7474
leaved: { left: 2 },
7575
};
7676

77+
const switchNode = (
78+
<div className={`${dPrefix}switch__state-container`}>
79+
{dStateContent && (
80+
<div
81+
className={getClassName(`${dPrefix}switch__state-content`, `${dPrefix}switch__state-content--left`)}
82+
style={{ opacity: checked ? 1 : 0 }}
83+
>
84+
{dStateContent[0]}
85+
</div>
86+
)}
87+
{dStateContent && (
88+
<div className={`${dPrefix}switch__state-content`} style={{ opacity: checked ? 0 : 1 }}>
89+
{dStateContent[1]}
90+
</div>
91+
)}
92+
<DBaseInput dFormControl={dFormControl} dLabelFor>
93+
{({ render: renderBaseInput }) => {
94+
const input = renderBaseInput(
95+
<input
96+
ref={dRef?.input}
97+
className={`${dPrefix}switch__input`}
98+
type="checkbox"
99+
disabled={disabled || dLoading}
100+
role="switch"
101+
aria-checked={checked}
102+
onChange={() => {
103+
changeChecked(!checked);
104+
}}
105+
onFocus={() => {
106+
setIsFocus(true);
107+
}}
108+
onBlur={() => {
109+
setIsFocus(false);
110+
}}
111+
/>
112+
);
113+
114+
return isUndefined(dInputRender) ? input : dInputRender(input);
115+
}}
116+
</DBaseInput>
117+
<DTransition dIn={checked} dDuring={TTANSITION_DURING}>
118+
{(state) => (
119+
<div
120+
className={getClassName(`${dPrefix}switch__state-dot`, {
121+
'is-focus': isFocus,
122+
})}
123+
style={transitionStyles[state]}
124+
>
125+
{dLoading && <LoadingOutlined dSpin />}
126+
</div>
127+
)}
128+
</DTransition>
129+
</div>
130+
);
131+
const labelNode = checkNodeExist(children) && <div className={`${dPrefix}switch__label`}>{children}</div>;
132+
77133
return (
78134
<label
79135
{...restProps}
80136
className={getClassName(restProps.className, `${dPrefix}switch`, {
81-
[`${dPrefix}switch--label-left`]: dLabelPlacement === 'left',
82137
'is-checked': checked,
83138
'is-disabled': disabled,
84139
'is-loading': dLoading,
85140
})}
86141
>
87-
<div className={`${dPrefix}switch__state-container`}>
88-
{dStateContent && (
89-
<div
90-
className={getClassName(`${dPrefix}switch__state-content`, `${dPrefix}switch__state-content--left`)}
91-
style={{ opacity: checked ? 1 : 0 }}
92-
>
93-
{dStateContent[0]}
94-
</div>
95-
)}
96-
{dStateContent && (
97-
<div className={`${dPrefix}switch__state-content`} style={{ opacity: checked ? 0 : 1 }}>
98-
{dStateContent[1]}
99-
</div>
100-
)}
101-
<DBaseInput dFormControl={dFormControl} dLabelFor>
102-
{({ render: renderBaseInput }) => {
103-
const input = renderBaseInput(
104-
<input
105-
ref={dRef?.input}
106-
className={`${dPrefix}switch__input`}
107-
type="checkbox"
108-
disabled={disabled || dLoading}
109-
role="switch"
110-
aria-checked={checked}
111-
onChange={() => {
112-
changeChecked(!checked);
113-
}}
114-
onFocus={() => {
115-
setIsFocus(true);
116-
}}
117-
onBlur={() => {
118-
setIsFocus(false);
119-
}}
120-
/>
121-
);
122-
123-
return isUndefined(dInputRender) ? input : dInputRender(input);
124-
}}
125-
</DBaseInput>
126-
<DTransition dIn={checked} dDuring={TTANSITION_DURING}>
127-
{(state) => (
128-
<div
129-
className={getClassName(`${dPrefix}switch__state-dot`, {
130-
'is-focus': isFocus,
131-
})}
132-
style={transitionStyles[state]}
133-
>
134-
{dLoading && <LoadingOutlined dSpin />}
135-
</div>
136-
)}
137-
</DTransition>
138-
</div>
139-
{checkNodeExist(children) && <div className={`${dPrefix}switch__label`}>{children}</div>}
142+
{dLabelPlacement === 'left' ? (
143+
<>
144+
{labelNode}
145+
{switchNode}
146+
</>
147+
) : (
148+
<>
149+
{switchNode}
150+
{labelNode}
151+
</>
152+
)}
140153
</label>
141154
);
142155
}

0 commit comments

Comments
 (0)