mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-26 13:25:46 +08:00
feat: add status prop in checkbox, radio, select, slider and toggle (#530)
* feat: added status prop to set color by states test: check status success, warning and error * docs: added playground example and API reference fix: replaced ´_´ as it's not recommended to use fix: removed redundant return refactor: renamed prop from status to type test: update test with the renamed prop * docs: update prop references from status to type fix: status prop not updated to type fix: missing return * fix(select): set icons and hover state to follow the theme * test(slider): update snapshots * chore: always use relative paths when import types Co-authored-by: unix <unix.bio@gmail.com>
This commit is contained in:
gepd
@@ -50,6 +50,194 @@ exports[`Slider should render correctly 1`] = `
|
||||
</style></div>"
|
||||
`;
|
||||
|
||||
exports[`Slider should work with different status 1`] = `
|
||||
"<div><div class=\\"slider \\"><div class=\\"dot \\">0<style>
|
||||
.dot {
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 1.25rem;
|
||||
min-width: 1.25rem;
|
||||
line-height: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
user-select: none;
|
||||
font-weight: 700;
|
||||
font-size: 0.75rem;
|
||||
z-index: 100;
|
||||
background-color: #0070f3;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 0 calc(0.86 * 8pt);
|
||||
}
|
||||
|
||||
.dot.disabled {
|
||||
cursor: not-allowed !important;
|
||||
background-color: #eaeaea;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.dot.click {
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.dot:hover {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.dot:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
</style></div><style>
|
||||
.slider {
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
border-radius: 50px;
|
||||
background-color: #111;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style></div><div class=\\"slider \\"><div class=\\"dot \\">0<style>
|
||||
.dot {
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 1.25rem;
|
||||
min-width: 1.25rem;
|
||||
line-height: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
user-select: none;
|
||||
font-weight: 700;
|
||||
font-size: 0.75rem;
|
||||
z-index: 100;
|
||||
background-color: #0070f3;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 0 calc(0.86 * 8pt);
|
||||
}
|
||||
|
||||
.dot.disabled {
|
||||
cursor: not-allowed !important;
|
||||
background-color: #eaeaea;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.dot.click {
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.dot:hover {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.dot:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
</style></div><style>
|
||||
.slider {
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
border-radius: 50px;
|
||||
background-color: #0070f3;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style></div><div class=\\"slider \\"><div class=\\"dot \\">0<style>
|
||||
.dot {
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 1.25rem;
|
||||
min-width: 1.25rem;
|
||||
line-height: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
user-select: none;
|
||||
font-weight: 700;
|
||||
font-size: 0.75rem;
|
||||
z-index: 100;
|
||||
background-color: #0070f3;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 0 calc(0.86 * 8pt);
|
||||
}
|
||||
|
||||
.dot.disabled {
|
||||
cursor: not-allowed !important;
|
||||
background-color: #eaeaea;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.dot.click {
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.dot:hover {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.dot:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
</style></div><style>
|
||||
.slider {
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
border-radius: 50px;
|
||||
background-color: #f5a623;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style></div><div class=\\"slider \\"><div class=\\"dot \\">0<style>
|
||||
.dot {
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 1.25rem;
|
||||
min-width: 1.25rem;
|
||||
line-height: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
user-select: none;
|
||||
font-weight: 700;
|
||||
font-size: 0.75rem;
|
||||
z-index: 100;
|
||||
background-color: #0070f3;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 0 calc(0.86 * 8pt);
|
||||
}
|
||||
|
||||
.dot.disabled {
|
||||
cursor: not-allowed !important;
|
||||
background-color: #eaeaea;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.dot.click {
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.dot:hover {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.dot:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
</style></div><style>
|
||||
.slider {
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
border-radius: 50px;
|
||||
background-color: #e00;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style></div></div>"
|
||||
`;
|
||||
|
||||
exports[`Slider should work with hideValue 1`] = `
|
||||
"<div class=\\"slider \\"><div class=\\"dot \\"><style>
|
||||
.dot {
|
||||
|
||||
@@ -69,6 +69,18 @@ describe('Slider', () => {
|
||||
changeHandler.mockRestore()
|
||||
})
|
||||
|
||||
it('should work with different status', () => {
|
||||
const wrapper = mount(
|
||||
<div>
|
||||
<Slider type="secondary" />
|
||||
<Slider type="success" />
|
||||
<Slider type="warning" />
|
||||
<Slider type="error" />
|
||||
</div>,
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('should ignore events when disabled', async () => {
|
||||
let value = 0
|
||||
const changeHandler = jest.fn().mockImplementation(val => (value = val))
|
||||
|
||||
@@ -12,10 +12,13 @@ import useDrag, { DraggingEvent } from '../utils/use-drag'
|
||||
import useCurrentState from '../utils/use-current-state'
|
||||
import SliderDot from './slider-dot'
|
||||
import SliderMark from './slider-mark'
|
||||
import { getColors } from './styles'
|
||||
import { NormalTypes } from '../utils/prop-types'
|
||||
|
||||
interface Props {
|
||||
hideValue?: boolean
|
||||
value?: number
|
||||
type?: NormalTypes
|
||||
initialValue?: number
|
||||
step?: number
|
||||
max?: number
|
||||
@@ -28,6 +31,7 @@ interface Props {
|
||||
|
||||
const defaultProps = {
|
||||
hideValue: false,
|
||||
type: 'default' as NormalTypes,
|
||||
initialValue: 0,
|
||||
step: 1,
|
||||
min: 0,
|
||||
@@ -67,6 +71,7 @@ const getValue = (
|
||||
const Slider: React.FC<React.PropsWithChildren<SliderProps>> = ({
|
||||
hideValue,
|
||||
disabled,
|
||||
type,
|
||||
step,
|
||||
max,
|
||||
min,
|
||||
@@ -107,6 +112,8 @@ const Slider: React.FC<React.PropsWithChildren<SliderProps>> = ({
|
||||
[max, min, step, sideWidthRef],
|
||||
)
|
||||
|
||||
const { bg } = useMemo(() => getColors(theme.palette, type), [theme.palette, type])
|
||||
|
||||
const dragHandler = (event: DraggingEvent) => {
|
||||
if (disabled) return
|
||||
const currentOffset = event.currentX - event.startX
|
||||
@@ -162,9 +169,7 @@ const Slider: React.FC<React.PropsWithChildren<SliderProps>> = ({
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
border-radius: 50px;
|
||||
background-color: ${disabled
|
||||
? theme.palette.accents_2
|
||||
: theme.palette.accents_8};
|
||||
background-color: ${disabled ? theme.palette.accents_2 : bg};
|
||||
position: relative;
|
||||
cursor: ${disabled ? 'not-allow' : 'pointer'};
|
||||
}
|
||||
|
||||
32
components/slider/styles.ts
Normal file
32
components/slider/styles.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { GeistUIThemesPalette } from '../themes/presets'
|
||||
import { NormalTypes } from '../utils/prop-types'
|
||||
|
||||
export type SelectColor = {
|
||||
bg: string
|
||||
}
|
||||
|
||||
export const getColors = (
|
||||
palette: GeistUIThemesPalette,
|
||||
status?: NormalTypes,
|
||||
): SelectColor => {
|
||||
const colors: { [key in NormalTypes]: SelectColor } = {
|
||||
default: {
|
||||
bg: palette.accents_8,
|
||||
},
|
||||
secondary: {
|
||||
bg: palette.accents_8,
|
||||
},
|
||||
success: {
|
||||
bg: palette.success,
|
||||
},
|
||||
warning: {
|
||||
bg: palette.warning,
|
||||
},
|
||||
error: {
|
||||
bg: palette.error,
|
||||
},
|
||||
}
|
||||
|
||||
if (!status) return colors.default
|
||||
return colors[status]
|
||||
}
|
||||
Reference in New Issue
Block a user