Fix SelectItem bug and lint warnings
This commit is contained in:
parent
dac1ed917d
commit
1621d53afa
4 changed files with 186 additions and 182 deletions
|
|
@ -37,154 +37,151 @@ const defaultProps = {
|
|||
size: 'medium',
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, Props>(
|
||||
(
|
||||
{ accessoryIcon, active, blended, contained, size, text, ...props },
|
||||
forwardedRef
|
||||
) => {
|
||||
const classes = classNames(
|
||||
{
|
||||
Button: true,
|
||||
Active: active,
|
||||
Blended: blended,
|
||||
Contained: contained,
|
||||
// 'btn-pressed': pressed,
|
||||
// 'btn-disabled': disabled,
|
||||
// save: props.icon === 'save',
|
||||
// destructive: props.type == ButtonType.Destructive,
|
||||
},
|
||||
size,
|
||||
props.className
|
||||
)
|
||||
const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
|
||||
{ accessoryIcon, active, blended, contained, size, text, ...props },
|
||||
forwardedRef
|
||||
) {
|
||||
const classes = classNames(
|
||||
{
|
||||
Button: true,
|
||||
Active: active,
|
||||
Blended: blended,
|
||||
Contained: contained,
|
||||
// 'btn-pressed': pressed,
|
||||
// 'btn-disabled': disabled,
|
||||
// save: props.icon === 'save',
|
||||
// destructive: props.type == ButtonType.Destructive,
|
||||
},
|
||||
size,
|
||||
props.className
|
||||
)
|
||||
|
||||
const hasAccessory = () => {
|
||||
if (accessoryIcon)
|
||||
return <span className="Accessory">{accessoryIcon}</span>
|
||||
}
|
||||
|
||||
const hasText = () => {
|
||||
if (text) return <span className="Text">{text}</span>
|
||||
}
|
||||
|
||||
return (
|
||||
<button {...props} className={classes} ref={forwardedRef}>
|
||||
{hasAccessory()}
|
||||
{hasText()}
|
||||
</button>
|
||||
)
|
||||
|
||||
// useEffect(() => {
|
||||
// if (props.type) setButtonType(props.type)
|
||||
// }, [props.type])
|
||||
|
||||
// const addIcon = (
|
||||
// <span className="icon">
|
||||
// <AddIcon />
|
||||
// </span>
|
||||
// )
|
||||
|
||||
// const menuIcon = (
|
||||
// <span className="icon">
|
||||
// <MenuIcon />
|
||||
// </span>
|
||||
// )
|
||||
|
||||
// const linkIcon = (
|
||||
// <span className="icon stroke">
|
||||
// <LinkIcon />
|
||||
// </span>
|
||||
// )
|
||||
|
||||
// const checkIcon = (
|
||||
// <span className="icon check">
|
||||
// <CheckIcon />
|
||||
// </span>
|
||||
// )
|
||||
|
||||
// const crossIcon = (
|
||||
// <span className="icon">
|
||||
// <CrossIcon />
|
||||
// </span>
|
||||
// )
|
||||
|
||||
// const editIcon = (
|
||||
// <span className="icon">
|
||||
// <EditIcon />
|
||||
// </span>
|
||||
// )
|
||||
|
||||
// const saveIcon = (
|
||||
// <span className="icon stroke">
|
||||
// <SaveIcon />
|
||||
// </span>
|
||||
// )
|
||||
|
||||
// const settingsIcon = (
|
||||
// <span className="icon settings">
|
||||
// <SettingsIcon />
|
||||
// </span>
|
||||
// )
|
||||
|
||||
// function getIcon() {
|
||||
// let icon: React.ReactNode
|
||||
|
||||
// switch (props.icon) {
|
||||
// case 'new':
|
||||
// icon = addIcon
|
||||
// break
|
||||
// case 'menu':
|
||||
// icon = menuIcon
|
||||
// break
|
||||
// case 'link':
|
||||
// icon = linkIcon
|
||||
// break
|
||||
// case 'check':
|
||||
// icon = checkIcon
|
||||
// break
|
||||
// case 'cross':
|
||||
// icon = crossIcon
|
||||
// break
|
||||
// case 'edit':
|
||||
// icon = editIcon
|
||||
// break
|
||||
// case 'save':
|
||||
// icon = saveIcon
|
||||
// break
|
||||
// case 'settings':
|
||||
// icon = settingsIcon
|
||||
// break
|
||||
// }
|
||||
|
||||
// return icon
|
||||
// }
|
||||
|
||||
// function handleMouseDown() {
|
||||
// setPressed(true)
|
||||
// }
|
||||
|
||||
// function handleMouseUp() {
|
||||
// setPressed(false)
|
||||
// }
|
||||
// return (
|
||||
// <button
|
||||
// className={classes}
|
||||
// disabled={disabled}
|
||||
// onMouseDown={handleMouseDown}
|
||||
// onMouseUp={handleMouseUp}
|
||||
// ref={forwardedRef}
|
||||
// {...props}
|
||||
// >
|
||||
// {getIcon()}
|
||||
|
||||
// {props.type != ButtonType.IconOnly ? (
|
||||
// <span className="text">{children}</span>
|
||||
// ) : (
|
||||
// ''
|
||||
// )}
|
||||
// </button>
|
||||
// )
|
||||
const hasAccessory = () => {
|
||||
if (accessoryIcon) return <span className="Accessory">{accessoryIcon}</span>
|
||||
}
|
||||
)
|
||||
|
||||
const hasText = () => {
|
||||
if (text) return <span className="Text">{text}</span>
|
||||
}
|
||||
|
||||
return (
|
||||
<button {...props} className={classes} ref={forwardedRef}>
|
||||
{hasAccessory()}
|
||||
{hasText()}
|
||||
</button>
|
||||
)
|
||||
|
||||
// useEffect(() => {
|
||||
// if (props.type) setButtonType(props.type)
|
||||
// }, [props.type])
|
||||
|
||||
// const addIcon = (
|
||||
// <span className="icon">
|
||||
// <AddIcon />
|
||||
// </span>
|
||||
// )
|
||||
|
||||
// const menuIcon = (
|
||||
// <span className="icon">
|
||||
// <MenuIcon />
|
||||
// </span>
|
||||
// )
|
||||
|
||||
// const linkIcon = (
|
||||
// <span className="icon stroke">
|
||||
// <LinkIcon />
|
||||
// </span>
|
||||
// )
|
||||
|
||||
// const checkIcon = (
|
||||
// <span className="icon check">
|
||||
// <CheckIcon />
|
||||
// </span>
|
||||
// )
|
||||
|
||||
// const crossIcon = (
|
||||
// <span className="icon">
|
||||
// <CrossIcon />
|
||||
// </span>
|
||||
// )
|
||||
|
||||
// const editIcon = (
|
||||
// <span className="icon">
|
||||
// <EditIcon />
|
||||
// </span>
|
||||
// )
|
||||
|
||||
// const saveIcon = (
|
||||
// <span className="icon stroke">
|
||||
// <SaveIcon />
|
||||
// </span>
|
||||
// )
|
||||
|
||||
// const settingsIcon = (
|
||||
// <span className="icon settings">
|
||||
// <SettingsIcon />
|
||||
// </span>
|
||||
// )
|
||||
|
||||
// function getIcon() {
|
||||
// let icon: React.ReactNode
|
||||
|
||||
// switch (props.icon) {
|
||||
// case 'new':
|
||||
// icon = addIcon
|
||||
// break
|
||||
// case 'menu':
|
||||
// icon = menuIcon
|
||||
// break
|
||||
// case 'link':
|
||||
// icon = linkIcon
|
||||
// break
|
||||
// case 'check':
|
||||
// icon = checkIcon
|
||||
// break
|
||||
// case 'cross':
|
||||
// icon = crossIcon
|
||||
// break
|
||||
// case 'edit':
|
||||
// icon = editIcon
|
||||
// break
|
||||
// case 'save':
|
||||
// icon = saveIcon
|
||||
// break
|
||||
// case 'settings':
|
||||
// icon = settingsIcon
|
||||
// break
|
||||
// }
|
||||
|
||||
// return icon
|
||||
// }
|
||||
|
||||
// function handleMouseDown() {
|
||||
// setPressed(true)
|
||||
// }
|
||||
|
||||
// function handleMouseUp() {
|
||||
// setPressed(false)
|
||||
// }
|
||||
// return (
|
||||
// <button
|
||||
// className={classes}
|
||||
// disabled={disabled}
|
||||
// onMouseDown={handleMouseDown}
|
||||
// onMouseUp={handleMouseUp}
|
||||
// ref={forwardedRef}
|
||||
// {...props}
|
||||
// >
|
||||
// {getIcon()}
|
||||
|
||||
// {props.type != ButtonType.IconOnly ? (
|
||||
// <span className="text">{children}</span>
|
||||
// ) : (
|
||||
// ''
|
||||
// )}
|
||||
// </button>
|
||||
// )
|
||||
})
|
||||
|
||||
Button.defaultProps = defaultProps
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ interface Props
|
|||
> {}
|
||||
|
||||
export const DialogContent = React.forwardRef<HTMLDivElement, Props>(
|
||||
({ children, ...props }, forwardedRef) => {
|
||||
function dialog({ children, ...props }, forwardedRef) {
|
||||
const classes = classNames(
|
||||
{
|
||||
Dialog: true,
|
||||
|
|
|
|||
|
|
@ -11,27 +11,28 @@ interface Props
|
|||
label?: string
|
||||
}
|
||||
|
||||
const Input = React.forwardRef<HTMLInputElement, Props>(
|
||||
(props: Props, forwardedRef) => {
|
||||
const classes = classNames({ Input: true }, props.className)
|
||||
const Input = React.forwardRef<HTMLInputElement, Props>(function input(
|
||||
props: Props,
|
||||
forwardedRef
|
||||
) {
|
||||
const classes = classNames({ Input: true }, props.className)
|
||||
|
||||
return (
|
||||
<label className="Label" htmlFor={props.name}>
|
||||
<input
|
||||
{...props}
|
||||
autoComplete="off"
|
||||
className={classes}
|
||||
defaultValue={props.value || ''}
|
||||
ref={forwardedRef}
|
||||
formNoValidate
|
||||
/>
|
||||
{props.label}
|
||||
{props.error && props.error.length > 0 && (
|
||||
<p className="InputError">{props.error}</p>
|
||||
)}
|
||||
</label>
|
||||
)
|
||||
}
|
||||
)
|
||||
return (
|
||||
<label className="Label" htmlFor={props.name}>
|
||||
<input
|
||||
{...props}
|
||||
autoComplete="off"
|
||||
className={classes}
|
||||
defaultValue={props.value || ''}
|
||||
ref={forwardedRef}
|
||||
formNoValidate
|
||||
/>
|
||||
{props.label}
|
||||
{props.error && props.error.length > 0 && (
|
||||
<p className="InputError">{props.error}</p>
|
||||
)}
|
||||
</label>
|
||||
)
|
||||
})
|
||||
|
||||
export default Input
|
||||
|
|
|
|||
|
|
@ -1,21 +1,27 @@
|
|||
import React from 'react'
|
||||
import React, { ComponentProps } from 'react'
|
||||
import * as Select from '@radix-ui/react-select'
|
||||
|
||||
import './index.scss'
|
||||
import classNames from 'classnames'
|
||||
|
||||
const SelectItem = React.forwardRef<HTMLDivElement>(
|
||||
({ children, className, ...props }, forwardedRef) => {
|
||||
return (
|
||||
<Select.Item
|
||||
className={classNames('SelectItem', className)}
|
||||
{...props}
|
||||
ref={forwardedRef}
|
||||
>
|
||||
<Select.ItemText>{children}</Select.ItemText>
|
||||
</Select.Item>
|
||||
)
|
||||
}
|
||||
)
|
||||
interface Props extends ComponentProps<'div'> {
|
||||
value: string | number
|
||||
}
|
||||
|
||||
const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
|
||||
{ children, ...props },
|
||||
forwardedRef
|
||||
) {
|
||||
return (
|
||||
<Select.Item
|
||||
className={classNames('SelectItem', props.className)}
|
||||
{...props}
|
||||
ref={forwardedRef}
|
||||
value={`${props.value}`}
|
||||
>
|
||||
<Select.ItemText>{children}</Select.ItemText>
|
||||
</Select.Item>
|
||||
)
|
||||
})
|
||||
|
||||
export default SelectItem
|
||||
|
|
|
|||
Loading…
Reference in a new issue