granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix SelectItem bug and lint warnings

Browse source
This commit is contained in:
Justin Edmund 2022-12-06 19:27:26 -08:00
parent dac1ed917d
commit 1621d53afa
4 changed files with 186 additions and 182 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

289
components/Button/index.tsx
View file

@ -37,154 +37,151 @@ const defaultProps = {
size: 'medium', size: 'medium',
} }
const Button = React.forwardRef<HTMLButtonElement, Props>( const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
( { accessoryIcon, active, blended, contained, size, text, ...props },
{ accessoryIcon, active, blended, contained, size, text, ...props }, forwardedRef
forwardedRef ) {
) => { const classes = classNames(
const classes = classNames( {
{ Button: true,
Button: true, Active: active,
Active: active, Blended: blended,
Blended: blended, Contained: contained,
Contained: contained, // 'btn-pressed': pressed,
// 'btn-pressed': pressed, // 'btn-disabled': disabled,
// 'btn-disabled': disabled, // save: props.icon === 'save',
// save: props.icon === 'save', // destructive: props.type == ButtonType.Destructive,
// destructive: props.type == ButtonType.Destructive, },
}, size,
size, props.className
props.className )
)
const hasAccessory = () => { const hasAccessory = () => {
if (accessoryIcon) if (accessoryIcon) return <span className="Accessory">{accessoryIcon}</span>
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 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 Button.defaultProps = defaultProps

2
components/Dialog/index.tsx
View file

@ -11,7 +11,7 @@ interface Props
> {} > {}
export const DialogContent = React.forwardRef<HTMLDivElement, Props>( export const DialogContent = React.forwardRef<HTMLDivElement, Props>(
({ children, ...props }, forwardedRef) => { function dialog({ children, ...props }, forwardedRef) {
const classes = classNames( const classes = classNames(
{ {
Dialog: true, Dialog: true,

43
components/Input/index.tsx
View file

@ -11,27 +11,28 @@ interface Props
label?: string label?: string
} }
const Input = React.forwardRef<HTMLInputElement, Props>( const Input = React.forwardRef<HTMLInputElement, Props>(function input(
(props: Props, forwardedRef) => { props: Props,
const classes = classNames({ Input: true }, props.className) forwardedRef
) {
const classes = classNames({ Input: true }, props.className)
return ( return (
<label className="Label" htmlFor={props.name}> <label className="Label" htmlFor={props.name}>
<input <input
{...props} {...props}
autoComplete="off" autoComplete="off"
className={classes} className={classes}
defaultValue={props.value || ''} defaultValue={props.value || ''}
ref={forwardedRef} ref={forwardedRef}
formNoValidate formNoValidate
/> />
{props.label} {props.label}
{props.error && props.error.length > 0 && ( {props.error && props.error.length > 0 && (
<p className="InputError">{props.error}</p> <p className="InputError">{props.error}</p>
)} )}
</label> </label>
) )
} })
)
export default Input export default Input

34
components/SelectItem/index.tsx
View file

@ -1,21 +1,27 @@
import React from 'react' import React, { ComponentProps } from 'react'
import * as Select from '@radix-ui/react-select' import * as Select from '@radix-ui/react-select'
import './index.scss' import './index.scss'
import classNames from 'classnames' import classNames from 'classnames'
const SelectItem = React.forwardRef<HTMLDivElement>( interface Props extends ComponentProps<'div'> {
({ children, className, ...props }, forwardedRef) => { value: string | number
return ( }
<Select.Item
className={classNames('SelectItem', className)} const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
{...props} { children, ...props },
ref={forwardedRef} forwardedRef
> ) {
<Select.ItemText>{children}</Select.ItemText> return (
</Select.Item> <Select.Item
) className={classNames('SelectItem', props.className)}
} {...props}
) ref={forwardedRef}
value={`${props.value}`}
>
<Select.ItemText>{children}</Select.ItemText>
</Select.Item>
)
})
export default SelectItem export default SelectItem