crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-04 04:01:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

styles: btn common with icon as prefix and suffix

Browse Source
This commit is contained in:
lytrankieio123 2021-08-24 11:29:57 +07:00
parent 1ab91ca34a
commit 81868c889e
3 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pages/index.tsx
View File

@ -10,8 +10,8 @@ export default function Home() {
<ButtonCommon type={ButonType.light} >{ButonType.light} - Button light</ButtonCommon> <ButtonCommon type={ButonType.light} >{ButonType.light} - Button light</ButtonCommon>
<ButtonCommon type={ButonType.light} disabled>{ButonType.light} - Button light</ButtonCommon> <ButtonCommon type={ButonType.light} disabled>{ButonType.light} - Button light</ButtonCommon>
<ButtonCommon type={ButonType.light} loading = {true}>{ButonType.light} - Button light</ButtonCommon> <ButtonCommon type={ButonType.light} loading = {true}>{ButonType.light} - Button light</ButtonCommon>
<ButtonCommon size={ButtonSize.large} loading={true}>{ButtonSize.large} - Button default large</ButtonCommon> <ButtonCommon size={ButtonSize.large} icon={<IconBuy/>}>{ButtonSize.large} - Button default large</ButtonCommon>
<ButtonCommon icon={<IconBuy/>} disabled>Button with icon disabled</ButtonCommon> <ButtonCommon icon={<IconBuy/>} disabled isIconSuffix={true}>Button with icon disabled</ButtonCommon>
<ButtonCommon icon={<IconBuy/>} type={ButonType.light}>Button with icon</ButtonCommon> <ButtonCommon icon={<IconBuy/>} type={ButonType.light}>Button with icon</ButtonCommon>
<p>Go to <code>pages/index.tsx</code> to get your hand dirty!</p> <p>Go to <code>pages/index.tsx</code> to get your hand dirty!</p>
<p>Go to <code>src/components</code> to make your awesome component!</p> <p>Go to <code>src/components</code> to make your awesome component!</p>

9
src/components/common/ButtonCommon/ButtonCommon.module.scss
View File

@ -58,8 +58,15 @@
} }
} }
&.preserve {
flex-direction: row-reverse;
.icon {
margin: 0 0 0 1.6rem;
}
}
.icon { .icon {
margin-right: 0.8rem; margin: 0 1.6rem 0 0;
svg path { svg path {
fill: currentColor; fill: currentColor;
} }

10
src/components/common/ButtonCommon/ButtonCommon.tsx
View File

@ -1,5 +1,5 @@
import classNames from 'classnames' import classNames from 'classnames'
import React from 'react' import React, { memo } from 'react'
import { ButonType, ButtonSize } from 'src/utils/constanst.utils' import { ButonType, ButtonSize } from 'src/utils/constanst.utils'
import s from './ButtonCommon.module.scss' import s from './ButtonCommon.module.scss'
@ -8,19 +8,21 @@ interface Props {
type?: ButonType, type?: ButonType,
size?: ButtonSize, size?: ButtonSize,
icon?: any, icon?: any,
isIconSuffix?: boolean,
loading?: boolean, loading?: boolean,
disabled?: boolean, disabled?: boolean,
onClick?: () => void, onClick?: () => void,
} }
const ButtonCommon = ({ type = ButonType.primary, size = ButtonSize.default, const ButtonCommon = memo(({ type = ButonType.primary, size = ButtonSize.default,
icon, loading, disabled, children, onClick }: Props) => { icon, loading, disabled, isIconSuffix, children, onClick }: Props) => {
return ( return (
<button className={classNames({ <button className={classNames({
[s.buttonCommon]: true, [s.buttonCommon]: true,
[s[type]]: !!type, [s[type]]: !!type,
[s[size]]: !!size, [s[size]]: !!size,
[s.loading]: loading, [s.loading]: loading,
[s.preserve]: isIconSuffix,
})} })}
disabled={disabled} disabled={disabled}
onClick={onClick} onClick={onClick}
@ -31,6 +33,6 @@ const ButtonCommon = ({ type = ButonType.primary, size = ButtonSize.default,
<span className={s.label}>{children}</span> <span className={s.label}>{children}</span>
</button> </button>
) )
} })
export default ButtonCommon export default ButtonCommon