feat: add copy button for view layouts (#59)

gravity-ui · Jun 6, 2023 · c31fcbf · c31fcbf
1 parent 8f7c4c6
commit c31fcbf
Show file tree

Hide file tree

Showing 19 changed files with 117 additions and 16 deletions.
diff --git a/docs/spec.md b/docs/spec.md
@@ -65,6 +65,7 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 | viewSpec.layoutOpen        | `boolean`         |          | Expand [Layout](./config.md#layouts) at the first rendering                                                                                                                             |
 | viewSpec.link              | `any`             |          | A field containing information for forming a [link](#link) for a value                                                                                                                  |
 | viewSpec.placeholder       | `string`          |          | A short hint displayed in the field before the user enters the value                                                                                                                    |
+| viewSpec.copy              | `boolean`         |          | For `true`, will add a copy value button                                                                                                                                                |
 
 ### ObjectSpec
 
@@ -113,6 +114,7 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 | viewSpec.placeholder       | `string`                                                           |          | A short hint displayed in the field before the user enters the value                                                                                                                    |
 | viewSpec.themeLabel        | `'normal'` `'info'` `'danger'` `'warning'` `'success'` `'unknown'` |          | Label color                                                                                                                                                                             |
 | viewSpec.fileInput         | `object`                                                           |          | [Parameters](#FileInput) that must be passed to file input                                                                                                                              |
+| viewSpec.copy              | `boolean`                                                          |          | For `true`, will add a copy value button                                                                                                                                                |
 
 #### SizeParams
 

diff --git a/src/lib/core/types/specs.ts b/src/lib/core/types/specs.ts
@@ -64,6 +64,7 @@ export interface NumberSpec<LinkType = any> {
         layoutOpen?: boolean;
         link?: LinkType;
         placeholder?: string;
+        copy?: boolean;
     };
 }
 
@@ -125,6 +126,7 @@ export interface StringSpec<LinkType = any> {
             readAsMethod?: ReadAsMethod;
             ignoreText?: boolean;
         };
+        copy?: boolean;
     };
 }
 

diff --git a/src/lib/kit/components/CopyButton/CopyButton.scss b/src/lib/kit/components/CopyButton/CopyButton.scss
@@ -0,0 +1,6 @@
+@import '../../styles/variables.scss';
+
+.#{$ns}copy-button {
+    display: none;
+    margin: 2px 0 0 5px;
+}
diff --git a/src/lib/kit/components/CopyButton/CopyButton.tsx b/src/lib/kit/components/CopyButton/CopyButton.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {ClipboardButton} from '@gravity-ui/uikit';
+
+import {FormValue, Spec, isNumberSpec, isStringSpec} from '../../../core';
+import {block} from '../../utils';
+
+import './CopyButton.scss';
+
+const b = block('copy-button');
+
+export interface CopyButtonProps {
+    spec: Spec;
+    value: FormValue;
+}
+
+/**
+ *
+ * Use the with-copy-button scss mixin for visible on hover
+ */
+
+export const CopyButton: React.FC<CopyButtonProps> = ({spec, value}) => {
+    if ((isStringSpec(spec) || isNumberSpec(spec)) && spec.viewSpec.copy) {
+        return <ClipboardButton className={b()} text={`${value}`} size={14} />;
+    }
+
+    return null;
+};
diff --git a/src/lib/kit/components/CopyButton/index.ts b/src/lib/kit/components/CopyButton/index.ts
@@ -0,0 +1 @@
+export * from './CopyButton';
diff --git a/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.scss b/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.scss
@@ -1,4 +1,5 @@
 @import '../../../styles/variables.scss';
+@import '../../../styles/mixins.scss';
 
 .#{$ns}view-row {
     width: 100%;
@@ -46,4 +47,6 @@
             }
         }
     }
+
+    @include with-copy-button();
 }
diff --git a/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.tsx b/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {FormValue, Spec, ViewLayoutProps} from '../../../../core';
+import {CopyButton} from '../../../../kit';
 import {block, isNotEmptyValue} from '../../../utils';
 
 import './ViewRow.scss';
@@ -25,6 +26,7 @@ export const ViewRow = <T extends FormValue, S extends Spec>({
                 <div className={b('dots')} />
             </div>
             <div className={b('right')}>{children}</div>
+            <CopyButton spec={spec} value={value} />
         </div>
     );
 };
diff --git a/src/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.scss b/src/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.scss
@@ -1,19 +1,26 @@
 @import '../../../styles/variables.scss';
+@import '../../../styles/mixins.scss';
 
 .#{$ns}view-table-cell {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
 
-    & > .#{$ns}view-row:last-child {
-        margin-bottom: 0;
-    }
-
-    & > .#{$ns}view-transparent {
-        margin-bottom: 6px;
+    &__inner {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
 
-        &:last-child {
+        & > .#{$ns}view-row:last-child {
             margin-bottom: 0;
         }
+
+        & > .#{$ns}view-transparent {
+            margin-bottom: 6px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
     }
+
+    @include with-copy-button();
 }
diff --git a/src/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.tsx b/src/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {FormValue, Spec, ViewLayoutProps} from '../../../../core';
+import {CopyButton} from '../../../../kit';
 import {block, isNotEmptyValue} from '../../../utils';
 
 import './ViewTableCell.scss';
@@ -11,6 +12,19 @@ export const ViewTableCell = <T extends FormValue, S extends Spec>({
     value,
     spec,
     children,
-}: ViewLayoutProps<T, S>): JSX.Element => (
-    <div className={b()}>{isNotEmptyValue(value, spec) ? children : '—'}</div>
-);
+}: ViewLayoutProps<T, S>): JSX.Element => {
+    const empty = isNotEmptyValue(value, spec);
+
+    return (
+        <div className={b()}>
+            {empty ? (
+                <React.Fragment>
+                    <div className={b('inner')}>{children}</div>
+                    <CopyButton spec={spec} value={value} />
+                </React.Fragment>
+            ) : (
+                '—'
+            )}
+        </div>
+    );
+};
diff --git a/src/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.scss b/src/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.scss
@@ -1,9 +1,13 @@
 @import '../../../styles/variables.scss';
+@import '../../../styles/mixins.scss';
 
 .#{$ns}view-transparent {
+    display: flex;
     margin-bottom: 20px;
 
     &:last-child {
         margin-bottom: 0;
     }
+
+    @include with-copy-button();
 }
diff --git a/src/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.tsx b/src/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {FormValue, Spec, ViewLayoutProps} from '../../../../core';
+import {CopyButton} from '../../../../kit';
 import {block, isNotEmptyValue} from '../../../utils';
 
 import './ViewTransparent.scss';
@@ -12,4 +13,9 @@ export const ViewTransparent = <T extends FormValue, S extends Spec>({
     spec,
     children,
 }: ViewLayoutProps<T, S>) =>
-    isNotEmptyValue(value, spec) ? <div className={b()}>{children}</div> : null;
+    isNotEmptyValue(value, spec) ? (
+        <div className={b()}>
+            <div>{children}</div>
+            <CopyButton spec={spec} value={value} />
+        </div>
+    ) : null;
diff --git a/src/lib/kit/components/index.ts b/src/lib/kit/components/index.ts
@@ -1,5 +1,6 @@
 export * from './AccordeonCard';
 export * from './Card';
+export * from './CopyButton';
 export * from './ErrorWrapper';
 export * from './GroupIndent';
 export * from './Inputs';

diff --git a/src/lib/kit/constants/config.tsx b/src/lib/kit/constants/config.tsx
@@ -288,6 +288,7 @@ export const dynamicViewConfig: DynamicViewConfig = {
         },
         layouts: {
             row: ViewRow,
+            row_verbose: ViewRow,
             accordeon: ViewAccordeon,
             section: ViewSection,
             section2: ViewSection2,
@@ -306,6 +307,7 @@ export const dynamicViewConfig: DynamicViewConfig = {
         },
         layouts: {
             row: ViewRow,
+            row_verbose: ViewRow,
             table_item: ViewTableCell,
         },
     },
@@ -315,6 +317,7 @@ export const dynamicViewConfig: DynamicViewConfig = {
         },
         layouts: {
             row: ViewRow,
+            row_verbose: ViewRow,
             table_item: ViewTableCell,
             transparent: ViewTransparent,
         },
@@ -331,6 +334,7 @@ export const dynamicViewConfig: DynamicViewConfig = {
         },
         layouts: {
             row: ViewRow,
+            row_verbose: ViewRow,
             accordeon: ViewAccordeon,
             section: ViewSection,
             section2: ViewSection2,
@@ -354,6 +358,7 @@ export const dynamicViewConfig: DynamicViewConfig = {
         },
         layouts: {
             row: ViewRow,
+            row_verbose: ViewRow,
             table_item: ViewTableCell,
             transparent: ViewTransparent,
             section: ViewSection,

diff --git a/src/lib/kit/styles/mixins.scss b/src/lib/kit/styles/mixins.scss
@@ -0,0 +1,7 @@
+@import './variables.scss';
+
+@mixin with-copy-button() {
+    &:hover > .#{$ns}copy-button {
+        display: block;
+    }
+}
diff --git a/src/stories/Editor.stories.tsx b/src/stories/Editor.stories.tsx
@@ -32,15 +32,15 @@ const spec: ObjectSpec = {
     properties: {
         id: {
             type: SpecTypes.Number,
-            viewSpec: {type: 'base', layout: 'row', layoutTitle: 'id'},
+            viewSpec: {type: 'base', layout: 'row', layoutTitle: 'id', copy: true},
         },
         name: {
             type: SpecTypes.String,
-            viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Name'},
+            viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Name', copy: true},
         },
         description: {
             type: SpecTypes.String,
-            viewSpec: {type: 'textarea', layout: 'row', layoutTitle: 'Description'},
+            viewSpec: {type: 'textarea', layout: 'row', layoutTitle: 'Description', copy: true},
         },
         settings: {
             type: SpecTypes.Boolean,
@@ -102,6 +102,7 @@ const spec: ObjectSpec = {
                     type: 'base',
                     layout: 'row',
                     layoutTitle: 'Label',
+                    copy: true,
                 },
             },
             viewSpec: {

diff --git a/src/stories/StringMonaco.stories.tsx b/src/stories/StringMonaco.stories.tsx
@@ -33,6 +33,7 @@ const excludeOptions = [
     'viewSpec.placeholder',
     'viewSpec.themeLabel',
     'viewSpec.fileInput',
+    'viewSpec.copy',
 ];
 
 const template = (spec: StringSpec = baseSpec) => {

diff --git a/src/stories/StringPassword.stories.tsx b/src/stories/StringPassword.stories.tsx
@@ -32,6 +32,7 @@ const excludeOptions = [
     'viewSpec.monacoParams',
     'viewSpec.themeLabel',
     'viewSpec.fileInput',
+    'viewSpec.copy',
 ];
 
 const template = (spec: StringSpec = baseSpec) => {

diff --git a/src/stories/StringTextContent.stories.tsx b/src/stories/StringTextContent.stories.tsx
@@ -37,6 +37,7 @@ const excludeOptions = [
     'viewSpec.monacoParams',
     'viewSpec.placeholder',
     'viewSpec.fileInput',
+    'viewSpec.copy',
 ];
 
 const template = (spec: StringSpec = baseSpec) => {

diff --git a/src/stories/components/InputPreview/constants.ts b/src/stories/components/InputPreview/constants.ts
@@ -332,6 +332,11 @@ const fileInput: ObjectSpec = {
     },
 };
 
+const copy: BooleanSpec = {
+    type: SpecTypes.Boolean,
+    viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Copy'},
+};
+
 export const getArrayOptions = (): ObjectSpec => ({
     type: SpecTypes.Object,
     required: true,
@@ -427,6 +432,7 @@ export const getNumberOptions = (): ObjectSpec => ({
                 layoutDescription,
                 layoutOpen,
                 placeholder,
+                copy,
             },
             [
                 'disabled',
@@ -436,6 +442,7 @@ export const getNumberOptions = (): ObjectSpec => ({
                 'layoutDescription',
                 'layoutOpen',
                 'placeholder',
+                'copy',
             ],
         ),
     },
@@ -512,6 +519,7 @@ export const getStringOptions = (): ObjectSpec => ({
                 placeholder,
                 themeLabel,
                 fileInput,
+                copy,
             },
             [
                 'disabled',
@@ -525,6 +533,7 @@ export const getStringOptions = (): ObjectSpec => ({
                 'placeholder',
                 'themeLabel',
                 'fileInput',
+                'copy',
             ],
         ),
     },