mirror of
https://github.com/zhigang1992/react.git
synced 2026-02-11 22:32:32 +08:00
33d4c8b0c9
* 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>
86 lines
2.0 KiB
TypeScript
86 lines
2.0 KiB
TypeScript
import { NormalSizes, NormalTypes } from '../utils/prop-types'
|
|
import { GeistUIThemes, GeistUIThemesPalette } from '../themes/presets'
|
|
|
|
export interface SelectSize {
|
|
height: string
|
|
fontSize: string
|
|
minWidth: string
|
|
}
|
|
|
|
export const getSizes = (theme: GeistUIThemes, size?: NormalSizes) => {
|
|
const sizes: { [key in NormalSizes]: SelectSize } = {
|
|
medium: {
|
|
height: `calc(1.688 * ${theme.layout.gap})`,
|
|
fontSize: '.875rem',
|
|
minWidth: '10rem',
|
|
},
|
|
small: {
|
|
height: `calc(1.344 * ${theme.layout.gap})`,
|
|
fontSize: '.75rem',
|
|
minWidth: '8rem',
|
|
},
|
|
mini: {
|
|
height: `calc(1 * ${theme.layout.gap})`,
|
|
fontSize: '.75rem',
|
|
minWidth: '6.5rem',
|
|
},
|
|
large: {
|
|
height: `calc(2 * ${theme.layout.gap})`,
|
|
fontSize: '1.225rem',
|
|
minWidth: '12.5rem',
|
|
},
|
|
}
|
|
|
|
return size ? sizes[size] : sizes.medium
|
|
}
|
|
|
|
export type SelectColor = {
|
|
border: string
|
|
borderHover: string
|
|
iconBorder: string
|
|
placeholderColor: string
|
|
}
|
|
|
|
export const getColors = (
|
|
palette: GeistUIThemesPalette,
|
|
status?: NormalTypes,
|
|
): SelectColor => {
|
|
const colors: { [key in NormalTypes]: SelectColor } = {
|
|
default: {
|
|
border: palette.border,
|
|
borderHover: palette.foreground,
|
|
iconBorder: palette.accents_5,
|
|
placeholderColor: palette.accents_3,
|
|
},
|
|
secondary: {
|
|
border: palette.border,
|
|
borderHover: palette.foreground,
|
|
iconBorder: palette.accents_5,
|
|
placeholderColor: palette.accents_3,
|
|
},
|
|
success: {
|
|
border: palette.success,
|
|
borderHover: palette.successDark,
|
|
iconBorder: palette.success,
|
|
placeholderColor: palette.accents_3,
|
|
},
|
|
warning: {
|
|
border: palette.warning,
|
|
borderHover: palette.warningDark,
|
|
iconBorder: palette.warning,
|
|
|
|
placeholderColor: palette.accents_3,
|
|
},
|
|
error: {
|
|
border: palette.error,
|
|
borderHover: palette.errorDark,
|
|
iconBorder: palette.error,
|
|
|
|
placeholderColor: palette.error,
|
|
},
|
|
}
|
|
|
|
if (!status) return colors.default
|
|
return colors[status]
|
|
}
|