feat: add print format

gravity-ui · Jul 5, 2024 · 1c347fa · 1c347fa
1 parent 0878828
commit 1c347fa
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 9 deletions.
diff --git a/docs/spec.md b/docs/spec.md
@@ -168,6 +168,7 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 | Property     | Type                                                 | Required | Description                                                                                                     |
 | :----------- | :--------------------------------------------------- | :------: | :-------------------------------------------------------------------------------------------------------------- |
 | outputFormat | `string` \| string \| date \| timestamp \| date_time |          | Format returning string (for backend and logic). [Available formats](https://day.js.org/docs/en/display/format) |
+| printFormat  | `string`                                             |          | Format print string (for view in read form). [Available formats](https://day.js.org/docs/en/display/format)     |
 
 You can provide all props of [original component](https://preview.gravity-ui.com/date-components/?path=/docs/components-datepicker--docs) through [viewSpec.inputProps](./input-props-map.md).
 

diff --git a/src/lib/core/types/specs.ts b/src/lib/core/types/specs.ts
@@ -176,6 +176,7 @@ export interface StringSpec<
         };
         dateInput?: {
             outputFormat?: string;
+            printFormat?: string;
         };
         copy?: boolean;
         selectParams?: {

diff --git a/src/lib/kit/components/Inputs/DateInput/DateInput.tsx b/src/lib/kit/components/Inputs/DateInput/DateInput.tsx
@@ -7,7 +7,7 @@ import {block} from '../../../utils';
 
 import './DateInput.scss';
 
-export const DefaultDateFormat = 'DD-MM-YYYY';
+export const DEFAULT_DATE_FORMAT = 'DD-MM-YYYY';
 
 const b = block('date-input');
 
@@ -21,7 +21,8 @@ export const DateInput: React.FC<StringInputProps<DateProps>> = ({
     inputProps,
 }) => {
     const {value, onChange, onBlur, onFocus} = input;
-    const outputFormat = spec.viewSpec.dateInput?.outputFormat;
+    const dateInput = spec.viewSpec.dateInput;
+    const outputFormat = dateInput?.outputFormat;
 
     const onUpdate = useCallback(
         (date: DateTime | null) => {
@@ -42,9 +43,13 @@ export const DateInput: React.FC<StringInputProps<DateProps>> = ({
                         } as any);
                         break;
                     case 'string':
-                    default:
+                    case undefined:
+                    case '':
                         onChange(date.toISOString());
                         break;
+                    default:
+                        onChange(date.format(outputFormat));
+                        break;
                 }
             }
         },
@@ -53,8 +58,8 @@ export const DateInput: React.FC<StringInputProps<DateProps>> = ({
 
     const props: DatePickerProps = {
         hasClear: true,
+        format: dateInput?.printFormat || DEFAULT_DATE_FORMAT,
         ...inputProps,
-        format: inputProps?.format || DefaultDateFormat,
         onBlur: onBlur as (e: React.FocusEvent<HTMLElement>) => void,
         onFocus: onFocus as (e: React.FocusEvent<HTMLElement>) => void,
         value: value

diff --git a/src/lib/kit/components/Views/DateView/DateView.tsx b/src/lib/kit/components/Views/DateView/DateView.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {StringSpec, StringViewProps} from '../../../../core';
-import {BaseView, DefaultDateFormat} from '../../../components';
+import {BaseView, DEFAULT_DATE_FORMAT} from '../../../components';
 import {dateTimeParse} from '@gravity-ui/date-utils';
 import isObject from 'lodash/isObject';
 import {DatePickerProps} from '@gravity-ui/date-components/dist/esm/components/DatePicker/DatePicker';
@@ -17,10 +17,10 @@ export const DateView: React.FC<StringViewProps> = ({value, spec, ...restProps})
             ? (value as any)?.seconds * 1000
             : value;
 
-    const dateSpec = spec.viewSpec.dateInput;
-    const inputFormat = (spec as StringSpec<any, DatePickerProps | undefined>)!.viewSpec.inputProps
-        ?.format;
-    const format = (dateSpec && inputFormat) || DefaultDateFormat;
+    const localSpec = (spec as StringSpec<any, DatePickerProps | undefined>)!.viewSpec;
+
+    const format =
+        localSpec.inputProps?.format || localSpec.dateInput?.printFormat || DEFAULT_DATE_FORMAT;
 
     if (formatedValue && format) {
         formatedValue = dateTimeParse(formatedValue)?.format(format) || formatedValue;

diff --git a/src/stories/components/InputPreview/constants.ts b/src/stories/components/InputPreview/constants.ts
@@ -482,6 +482,10 @@ const dateInput: ObjectSpec = {
             type: SpecTypes.String,
             viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Output format'},
         },
+        printFormat: {
+            type: SpecTypes.String,
+            viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Print format'},
+        },
     },
     viewSpec: {
         type: 'base',