diff --git a/apps/demo/src/app/examples/with-material-ui/dictionary/checkBox.component.tsx b/apps/demo/src/app/examples/with-material-ui/dictionary/checkBox.component.tsx index 176ea16..73edcef 100644 --- a/apps/demo/src/app/examples/with-material-ui/dictionary/checkBox.component.tsx +++ b/apps/demo/src/app/examples/with-material-ui/dictionary/checkBox.component.tsx @@ -16,6 +16,7 @@ export const Checkbox = ({ onChange, propRef, value, + shouldDisplayRequiredHint, }: { 'data-testid': string; errorMessage: string; @@ -29,9 +30,14 @@ export const Checkbox = ({ propRef: Ref; type?: string; value?: boolean; + shouldDisplayRequiredHint?: boolean; }) => { const inputProps = useMemo(() => ({ ref: propRef, 'aria-label': 'controlled' }), [propRef]); + if (shouldDisplayRequiredHint) { + label += ' *'; + } + return ( diff --git a/apps/demo/src/app/examples/with-material-ui/dictionary/date.component.tsx b/apps/demo/src/app/examples/with-material-ui/dictionary/date.component.tsx index 777ad0d..91ead9a 100644 --- a/apps/demo/src/app/examples/with-material-ui/dictionary/date.component.tsx +++ b/apps/demo/src/app/examples/with-material-ui/dictionary/date.component.tsx @@ -27,6 +27,7 @@ export const DateInput = ({ onChange, onBlur, propRef, + shouldDisplayRequiredHint, }: { 'data-testid': string; errors: FieldErrors; @@ -41,6 +42,7 @@ export const DateInput = ({ value?: string | number; validation: Validations; setFieldValue: (id: Path, value: any) => void; + shouldDisplayRequiredHint?: boolean; }) => { const inputProps = useMemo(() => ({ ref: propRef }), [propRef]); const rules = getValidationRulesHints({ @@ -50,6 +52,10 @@ export const DateInput = ({ const hasError = !!checkRules(value, rules).length; + if (shouldDisplayRequiredHint) { + label += ' *'; + } + return (
{ const inputProps = useMemo(() => ({ ref: propRef }), [propRef]); @@ -48,6 +50,10 @@ export const Password = ({ const hasError = !!checkRules(value, rules).length; + if (shouldDisplayRequiredHint) { + label += ' *'; + } + return ( { const inputProps = useMemo(() => ({ ref: propRef }), [propRef]); + if (shouldDisplayRequiredHint) { + label += ' *'; + } + return ( {label} diff --git a/apps/demo/src/app/examples/with-material-ui/dictionary/text.component.tsx b/apps/demo/src/app/examples/with-material-ui/dictionary/text.component.tsx index 42fb89d..ea37678 100644 --- a/apps/demo/src/app/examples/with-material-ui/dictionary/text.component.tsx +++ b/apps/demo/src/app/examples/with-material-ui/dictionary/text.component.tsx @@ -17,6 +17,7 @@ export const Text = ({ type, value, multiline, + shouldDisplayRequiredHint, }: { 'data-testid': string; errorMessage: string; @@ -31,10 +32,15 @@ export const Text = ({ type?: string; value?: string | number; multiline?: boolean; + shouldDisplayRequiredHint?: boolean; }) => { const inputProps = useMemo(() => ({ ref: propRef }), [propRef]); const error = errors && errors.type && errorMessage; + if (shouldDisplayRequiredHint) { + label += ' *'; + } + return ( ) => void; value: boolean; label: string; + shouldDisplayRequiredHint?: boolean; }) => { + if (shouldDisplayRequiredHint) { + label += ' *'; + } + return (
diff --git a/apps/demo/src/app/examples/with-styled-components/dictionary/date.component.tsx b/apps/demo/src/app/examples/with-styled-components/dictionary/date.component.tsx index b56b9a9..cd6969a 100644 --- a/apps/demo/src/app/examples/with-styled-components/dictionary/date.component.tsx +++ b/apps/demo/src/app/examples/with-styled-components/dictionary/date.component.tsx @@ -12,6 +12,7 @@ import { RuleList } from '../atoms/rule-list.component'; export const DateInput = ({ errors, validation, + shouldDisplayRequiredHint, label, ...props }: { @@ -23,6 +24,7 @@ export const DateInput = ({ id: string; setFieldValue: (id: Path, value: any) => void; onChange: (event: any) => void; + shouldDisplayRequiredHint?: boolean; }) => { const rules = getValidationRulesHints({ errors, @@ -32,6 +34,10 @@ export const DateInput = ({ const fieldError = errors && errors.type; const isValid = !!(props.value && !hasError && !fieldError); + if (shouldDisplayRequiredHint) { + label += ' *'; + } + return ( { const rules = getValidationRulesHints({ errors, @@ -27,11 +30,16 @@ export const Password = ({ const fieldError = errors && errors.type; const isValid = !!(props.value && !hasError && !fieldError); + if (shouldDisplayRequiredHint) { + label += ' *'; + } + return ( ) => void; value: string | number; label: string; choices: string[] | number[]; multiple?: boolean; + shouldDisplayRequiredHint?: boolean; }) => { + if (shouldDisplayRequiredHint) { + label += ' *'; + } + return (