feat(marks): add job title and datetime
This commit is contained in:
parent
cc681af11a
commit
c8f0d135f1
25
src/components/MarkTypeStrategy/DateTime/Input.tsx
Normal file
25
src/components/MarkTypeStrategy/DateTime/Input.tsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { MarkInputProps } from '../MarkStrategy'
|
||||||
|
import styles from '../../MarkFormField/style.module.scss'
|
||||||
|
import { useEffect, useRef } from 'react'
|
||||||
|
|
||||||
|
export const MarkInputDateTime = ({ handler, placeholder }: MarkInputProps) => {
|
||||||
|
const ref = useRef<HTMLInputElement>(null)
|
||||||
|
useEffect(() => {
|
||||||
|
if (ref.current) {
|
||||||
|
ref.current.value = new Date().toISOString().slice(0, 16)
|
||||||
|
if (ref.current.valueAsDate) {
|
||||||
|
handler(ref.current.valueAsDate.toUTCString())
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [handler])
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type="datetime-local"
|
||||||
|
ref={ref}
|
||||||
|
className={styles.input}
|
||||||
|
placeholder={placeholder}
|
||||||
|
readOnly={true}
|
||||||
|
disabled={true}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
7
src/components/MarkTypeStrategy/DateTime/index.tsx
Normal file
7
src/components/MarkTypeStrategy/DateTime/index.tsx
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { MarkStrategy } from '../MarkStrategy'
|
||||||
|
import { MarkInputDateTime } from './Input'
|
||||||
|
|
||||||
|
export const DateTimeStrategy: MarkStrategy = {
|
||||||
|
input: MarkInputDateTime,
|
||||||
|
render: ({ value }) => <>{value}</>
|
||||||
|
}
|
20
src/components/MarkTypeStrategy/JobTitle/Input.tsx
Normal file
20
src/components/MarkTypeStrategy/JobTitle/Input.tsx
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import { useDidMount } from '../../../hooks'
|
||||||
|
import { useLocalStorage } from '../../../hooks/useLocalStorage'
|
||||||
|
import { MarkInputProps } from '../MarkStrategy'
|
||||||
|
import { MarkInputText } from '../Text/Input'
|
||||||
|
|
||||||
|
export const MarkInputJobTitle = (props: MarkInputProps) => {
|
||||||
|
const [jobTitle, setjobTitle] = useLocalStorage('mark-jobtitle', '')
|
||||||
|
useDidMount(() => {
|
||||||
|
props.handler(jobTitle)
|
||||||
|
})
|
||||||
|
return MarkInputText({
|
||||||
|
...props,
|
||||||
|
placeholder: 'Job Title',
|
||||||
|
value: jobTitle,
|
||||||
|
handler: (value) => {
|
||||||
|
setjobTitle(value)
|
||||||
|
props.handler(value)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
7
src/components/MarkTypeStrategy/JobTitle/index.tsx
Normal file
7
src/components/MarkTypeStrategy/JobTitle/index.tsx
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { MarkStrategy } from '../MarkStrategy'
|
||||||
|
import { MarkInputJobTitle } from './Input'
|
||||||
|
|
||||||
|
export const JobTitleStrategy: MarkStrategy = {
|
||||||
|
input: MarkInputJobTitle,
|
||||||
|
render: ({ value }) => <>{value}</>
|
||||||
|
}
|
@ -3,6 +3,8 @@ import { CurrentUserMark, Mark } from '../../types/mark'
|
|||||||
import { TextStrategy } from './Text'
|
import { TextStrategy } from './Text'
|
||||||
import { SignatureStrategy } from './Signature'
|
import { SignatureStrategy } from './Signature'
|
||||||
import { FullNameStrategy } from './FullName'
|
import { FullNameStrategy } from './FullName'
|
||||||
|
import { JobTitleStrategy } from './JobTitle'
|
||||||
|
import { DateTimeStrategy } from './DateTime'
|
||||||
|
|
||||||
export interface MarkInputProps {
|
export interface MarkInputProps {
|
||||||
value: string
|
value: string
|
||||||
@ -30,5 +32,7 @@ export type MarkStrategies = {
|
|||||||
export const MARK_TYPE_CONFIG: MarkStrategies = {
|
export const MARK_TYPE_CONFIG: MarkStrategies = {
|
||||||
[MarkType.TEXT]: TextStrategy,
|
[MarkType.TEXT]: TextStrategy,
|
||||||
[MarkType.SIGNATURE]: SignatureStrategy,
|
[MarkType.SIGNATURE]: SignatureStrategy,
|
||||||
[MarkType.FULLNAME]: FullNameStrategy
|
[MarkType.FULLNAME]: FullNameStrategy,
|
||||||
|
[MarkType.JOBTITLE]: JobTitleStrategy,
|
||||||
|
[MarkType.DATETIME]: DateTimeStrategy
|
||||||
}
|
}
|
||||||
|
@ -176,14 +176,12 @@ export const DEFAULT_TOOLBOX: DrawTool[] = [
|
|||||||
{
|
{
|
||||||
identifier: MarkType.JOBTITLE,
|
identifier: MarkType.JOBTITLE,
|
||||||
icon: faBriefcase,
|
icon: faBriefcase,
|
||||||
label: 'Job Title',
|
label: 'Job Title'
|
||||||
isComingSoon: true
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.DATETIME,
|
identifier: MarkType.DATETIME,
|
||||||
icon: faClock,
|
icon: faClock,
|
||||||
label: 'Date Time',
|
label: 'Date Time'
|
||||||
isComingSoon: true
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.NUMBER,
|
identifier: MarkType.NUMBER,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user