diff --git a/src/components/MarkTypeStrategy/DateTime/Input.tsx b/src/components/MarkTypeStrategy/DateTime/Input.tsx new file mode 100644 index 0000000..fa68438 --- /dev/null +++ b/src/components/MarkTypeStrategy/DateTime/Input.tsx @@ -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(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 ( + + ) +} diff --git a/src/components/MarkTypeStrategy/DateTime/index.tsx b/src/components/MarkTypeStrategy/DateTime/index.tsx new file mode 100644 index 0000000..1892d49 --- /dev/null +++ b/src/components/MarkTypeStrategy/DateTime/index.tsx @@ -0,0 +1,7 @@ +import { MarkStrategy } from '../MarkStrategy' +import { MarkInputDateTime } from './Input' + +export const DateTimeStrategy: MarkStrategy = { + input: MarkInputDateTime, + render: ({ value }) => <>{value} +} diff --git a/src/components/MarkTypeStrategy/JobTitle/Input.tsx b/src/components/MarkTypeStrategy/JobTitle/Input.tsx new file mode 100644 index 0000000..47d2969 --- /dev/null +++ b/src/components/MarkTypeStrategy/JobTitle/Input.tsx @@ -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) + } + }) +} diff --git a/src/components/MarkTypeStrategy/JobTitle/index.tsx b/src/components/MarkTypeStrategy/JobTitle/index.tsx new file mode 100644 index 0000000..11f5d60 --- /dev/null +++ b/src/components/MarkTypeStrategy/JobTitle/index.tsx @@ -0,0 +1,7 @@ +import { MarkStrategy } from '../MarkStrategy' +import { MarkInputJobTitle } from './Input' + +export const JobTitleStrategy: MarkStrategy = { + input: MarkInputJobTitle, + render: ({ value }) => <>{value} +} diff --git a/src/components/MarkTypeStrategy/MarkStrategy.tsx b/src/components/MarkTypeStrategy/MarkStrategy.tsx index f842220..0ca0ebc 100644 --- a/src/components/MarkTypeStrategy/MarkStrategy.tsx +++ b/src/components/MarkTypeStrategy/MarkStrategy.tsx @@ -3,6 +3,8 @@ import { CurrentUserMark, Mark } from '../../types/mark' import { TextStrategy } from './Text' import { SignatureStrategy } from './Signature' import { FullNameStrategy } from './FullName' +import { JobTitleStrategy } from './JobTitle' +import { DateTimeStrategy } from './DateTime' export interface MarkInputProps { value: string @@ -30,5 +32,7 @@ export type MarkStrategies = { export const MARK_TYPE_CONFIG: MarkStrategies = { [MarkType.TEXT]: TextStrategy, [MarkType.SIGNATURE]: SignatureStrategy, - [MarkType.FULLNAME]: FullNameStrategy + [MarkType.FULLNAME]: FullNameStrategy, + [MarkType.JOBTITLE]: JobTitleStrategy, + [MarkType.DATETIME]: DateTimeStrategy } diff --git a/src/utils/mark.ts b/src/utils/mark.ts index 319371c..37bda6b 100644 --- a/src/utils/mark.ts +++ b/src/utils/mark.ts @@ -176,14 +176,12 @@ export const DEFAULT_TOOLBOX: DrawTool[] = [ { identifier: MarkType.JOBTITLE, icon: faBriefcase, - label: 'Job Title', - isComingSoon: true + label: 'Job Title' }, { identifier: MarkType.DATETIME, icon: faClock, - label: 'Date Time', - isComingSoon: true + label: 'Date Time' }, { identifier: MarkType.NUMBER,