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

✨ feat: QuanittyInput

Browse Source 
:%s
This commit is contained in:
unknown 2021-08-23 17:37:12 +07:00
parent f604fbc787
commit b5ad6dd167
6 changed files with 155 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pages/index.tsx
View File

@ -1,4 +1,5 @@
import { useState } from 'react'
import {CarouselCommon, Layout, QuanittyInput } from 'src/components/common'
const dataTest = [{
text:1
@ -18,9 +19,8 @@ export default function Home() {
return (
<>
<CarouselCommon data={dataTest} Component={test} itemKey="test"/>
<QuanittyInput/>
<input type="number" />
<input type="text" />
<QuanittyInput type ="default" min={5} max={10} initValue={3}/>
<QuanittyInput type ="small" min={3} step={10}/>
</>
)
}

38
src/components/common/QuanittyInput/QuanittyInput.module.scss
View File

@ -1,13 +1,39 @@
// .quanittyInput::-webkit-outer-spin-button,
// .quanittyInput::-webkit-inner-spin-button {
// -webkit-appearance: none;
// margin: 0;
// }
@import '../../../styles/utilities';
.quanittyInputWarper{
border-color: theme("textColor.active");
@apply border border-solid inline-flex justify-between items-center custom-border-radius;
.plusIcon, .minusIcon{
&:hover{
cursor: pointer;
}
}
&.default{
max-width: 18.4rem;
min-height: 4rem;
.plusIcon, .minusIcon{
margin: 0.8rem;
width: 2.4rem;
height: 2.4rem;
}
}
&.small{
max-width: 10rem;
min-height: 2.8rem;
.plusIcon, .minusIcon{
margin: 0 0.6rem;
// width: 1rem;
// height: 1rem;
}
}
.quanittyInput{
@apply bg-background;
@apply bg-background outline-none w-1/2 text-center h-full font-bold;
font-size: 20px;
line-height: 28px;
color: theme("textColor.active");
&::-webkit-inner-spin-button, &::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0;
}
}
}

83
src/components/common/QuanittyInput/QuanittyInput.tsx
View File

@ -1,14 +1,81 @@
import React, { useState } from 'react'
import s from "./QuanittyInput.module.scss"
interface QuanittyInputProps {
import React, { ChangeEvent, useEffect, useState } from 'react'
import s from './QuanittyInput.module.scss'
import classNames from 'classnames'
import { Minus, Plus } from '@components/icons'
interface QuanittyInputProps
extends Omit<
React.InputHTMLAttributes<HTMLInputElement>,
'onChange' | 'min' | 'max' | 'step'
> {
type?: 'default' | 'small'
onChange?: (value: number) => void
initValue?: number
min?: number
max?: number
step?: number
}
const QuanittyInput = ({
type = 'default',
onChange,
initValue = 0,
min,
max,
step = 1,
...props
}: QuanittyInputProps) => {
const [value, setValue] = useState<number>(0)
useEffect(() => {
onChange && onChange(value)
}, [value])
useEffect(() => {
initValue && setValue(initValue)
}, [initValue])
const onPlusClick = () => {
if (max && value + step > max) {
setValue(max)
} else {
setValue(value + step)
}
}
const onMinusClick = () => {
if (min && value - step < min) {
setValue(min)
} else {
setValue(value - step)
}
}
const onValueChange = (e: ChangeEvent<HTMLInputElement>) => {
let value = Number(e.target.value) || 0
if (min && value < min) {
setValue(min)
} else if (max && value > max) {
setValue(max)
} else {
setValue(value)
}
}
const QuanittyInput = (props: QuanittyInputProps) => {
const [value, setvalue] = useState(0)
return (
<div>
<input type="number" value={value} onChange={(e)=>setvalue(+e.target.value)} className={s.quanittyInput}/>
<div className={classNames(s.quanittyInputWarper, { [s[type]]: type })}>
<div className={s.minusIcon} onClick={onMinusClick}>
<Minus />
</div>
<input
{...props}
type="number"
value={value}
onChange={onValueChange}
className={s.quanittyInput}
/>
<div className={s.plusIcon} onClick={onPlusClick}>
<Plus />
</div>
</div>
)
}

18
src/components/icons/Minus.tsx Normal file
View File

@ -0,0 +1,18 @@
const ArrowRight = ({ ...props }) => {
return (
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.6667 5.33317H6.66669V1.33317C6.66669 1.15636 6.59645 0.98679 6.47142 0.861766C6.3464 0.736742 6.17683 0.666504 6.00002 0.666504C5.82321 0.666504 5.65364 0.736742 5.52862 0.861766C5.40359 0.98679 5.33335 1.15636 5.33335 1.33317V5.33317H1.33335C1.15654 5.33317 0.986974 5.40341 0.861949 5.52843C0.736925 5.65346 0.666687 5.82303 0.666687 5.99984C0.666687 6.17665 0.736925 6.34622 0.861949 6.47124C0.986974 6.59627 1.15654 6.6665 1.33335 6.6665H5.33335V10.6665C5.33335 10.8433 5.40359 11.0129 5.52862 11.1379C5.65364 11.2629 5.82321 11.3332 6.00002 11.3332C6.17683 11.3332 6.3464 11.2629 6.47142 11.1379C6.59645 11.0129 6.66669 10.8433 6.66669 10.6665V6.6665H10.6667C10.8435 6.6665 11.0131 6.59627 11.1381 6.47124C11.2631 6.34622 11.3334 6.17665 11.3334 5.99984C11.3334 5.82303 11.2631 5.65346 11.1381 5.52843C11.0131 5.40341 10.8435 5.33317 10.6667 5.33317Z"
fill="#141414"
/>
</svg>
)
}
export default ArrowRight

18
src/components/icons/Plus.tsx Normal file
View File

@ -0,0 +1,18 @@
const ArrowLeft = ({ ...props }) => {
return (
<svg
width="12"
height="2"
viewBox="0 0 12 2"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.6667 0.333496H1.33335C1.15654 0.333496 0.986974 0.403734 0.861949 0.528758C0.736925 0.653783 0.666687 0.823352 0.666687 1.00016C0.666687 1.17697 0.736925 1.34654 0.861949 1.47157C0.986974 1.59659 1.15654 1.66683 1.33335 1.66683H10.6667C10.8435 1.66683 11.0131 1.59659 11.1381 1.47157C11.2631 1.34654 11.3334 1.17697 11.3334 1.00016C11.3334 0.823352 11.2631 0.653783 11.1381 0.528758C11.0131 0.403734 10.8435 0.333496 10.6667 0.333496Z"
fill="#141414"
/>
</svg>
)
}
export default ArrowLeft

2
tailwind.config.js
View File

@ -117,7 +117,7 @@ module.exports = {
},
caroucel:{
"arrow-height":"64px"
}
},
},
},
plugins: [require('postcss-import'), require('tailwindcss'), require('autoprefixer')]