-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #29 from Bill2015/develop-attribute-modify
Implement the attribute modify feature
- Loading branch information
Showing
13 changed files
with
341 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 13 additions & 0 deletions
13
src/pages/resource-detail/components/attributes/EditableBool.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
.root { | ||
align-self: center; | ||
margin-top: 3px; | ||
} | ||
|
||
.input { | ||
border: none; | ||
|
||
&:not(:checked) { | ||
border: 1px solid teal; | ||
border-radius: 100%; | ||
} | ||
} |
40 changes: 40 additions & 0 deletions
40
src/pages/resource-detail/components/attributes/EditableBool.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
/* eslint-disable react/jsx-props-no-spreading */ | ||
import { Box, BoxProps, Checkbox } from '@mantine/core'; | ||
import { MdCircle } from 'react-icons/md'; | ||
|
||
import classes from './EditableBool.module.scss'; | ||
|
||
export interface EditableBoolProps extends BoxProps { | ||
value: boolean; | ||
|
||
/** display name */ | ||
name: string; | ||
|
||
/** when text change vent | ||
* @param newValue new value of text */ | ||
onChange: (newValue: boolean) => void; | ||
} | ||
|
||
export function EditableBool(props: EditableBoolProps) { | ||
const { value, name, onChange, ...boxProps } = props; | ||
|
||
return ( | ||
<Checkbox | ||
{...boxProps} | ||
color="teal" | ||
size="0.9rem" | ||
name={name} | ||
variant="outline" | ||
// eslint-disable-next-line react/no-unstable-nested-components | ||
icon={({ className }) => ( | ||
// eslint-disable-next-line object-curly-newline | ||
<Box className={className} style={{ display: 'flex', alignItems: 'center', width: '13px' }}> | ||
<MdCircle /> | ||
</Box> | ||
)} | ||
checked={value} | ||
classNames={{ root: classes.root, input: classes.input }} | ||
onChange={(e) => onChange(e.currentTarget.checked)} | ||
/> | ||
); | ||
} |
72 changes: 72 additions & 0 deletions
72
src/pages/resource-detail/components/attributes/EditableDate.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
/* eslint-disable react/jsx-props-no-spreading */ | ||
import { useCallback, useRef, useState } from 'react'; | ||
import { BoxProps, Popover, Text } from '@mantine/core'; | ||
|
||
import { DatePicker } from '@mantine/dates'; | ||
import { formatDate, toDateTime } from '@utils/date'; | ||
|
||
export interface EditableDateProps extends BoxProps { | ||
value: string; | ||
|
||
/** display name */ | ||
name: string; | ||
|
||
/** when text change vent | ||
* @param newValue new value of text */ | ||
onChange: (newValue: string) => void; | ||
|
||
onEdit?: () => void; | ||
|
||
onEditFinished?: (newValue: string, isEdited: boolean) => void; | ||
} | ||
|
||
export function EditableDate(props: EditableDateProps) { | ||
const { value, name, onChange, onEdit, onEditFinished, ...boxProps } = props; | ||
const [inEdited, setInEdited] = useState<boolean>(false); | ||
const edited = useRef<boolean>(false); | ||
|
||
const handleClick = () => { | ||
setInEdited(true); | ||
if (onEdit) { | ||
onEdit(); | ||
} | ||
}; | ||
|
||
const handleBlur = useCallback((newVal: string) => { | ||
setInEdited(false); | ||
if (onEditFinished && inEdited) { | ||
onEditFinished(newVal, edited.current); | ||
} | ||
edited.current = false; | ||
}, [onEditFinished, inEdited]); | ||
|
||
// display value | ||
return ( | ||
<Popover | ||
position="bottom" | ||
withArrow | ||
arrowSize={10} | ||
shadow="md" | ||
opened={inEdited} | ||
onClose={() => handleBlur(value)} | ||
> | ||
<Popover.Target> | ||
<Text title="double click to edit" onDoubleClick={handleClick} {...boxProps}> | ||
{formatDate(value)} | ||
</Text> | ||
</Popover.Target> | ||
<Popover.Dropdown p={10} pt={5} pb={5}> | ||
<Text>{name}</Text> | ||
<DatePicker | ||
value={toDateTime(value)} | ||
onChange={(e) => { | ||
if (e) { | ||
onChange(e.toISOString()); | ||
edited.current = true; | ||
} | ||
}} | ||
/> | ||
</Popover.Dropdown> | ||
</Popover> | ||
); | ||
} |
Oops, something went wrong.