feat(ObjectValue): added new input object value (#28)

Author: NasgulNexus

src/lib/kit/components/Inputs/ObjectValueInput/ObjectValueInput.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import _ from 'lodash';
+
+import {Controller, FieldValue, ObjectIndependentInput, ValidateError} from '../../../../core';
+
+const OBJECT_VALUE_PROPERTY_NAME = 'value';
+
+export const ObjectValueInput: ObjectIndependentInput = ({spec, input, name}) => {
+    const parentOnChange = React.useCallback(
+        (childName: string, childValue: FieldValue, childErrors?: Record<string, ValidateError>) =>
+            input.onChange(
+                (currentValue) =>
+                    _.set(
+                        {...(currentValue || {})},
+                        childName.split(`${name}.`).join(''),
+                        childValue,
+                    ),
+                childErrors,
+            ),
+        [input.onChange, input.name],
+    );
+
+    const parentOnUnmount = React.useCallback(
+        (childName: string) => input.onChange((currentValue) => currentValue, {[childName]: false}),
+        [input.onChange],
+    );
+
+    const specProperties = {...spec.properties};
+
+    if (!specProperties[OBJECT_VALUE_PROPERTY_NAME]) {
+        return null;
+    }
+
+    return (
+        <Controller
+            initialValue={input.value?.[OBJECT_VALUE_PROPERTY_NAME]}
+            spec={specProperties[OBJECT_VALUE_PROPERTY_NAME]}
+            name={`${name}.${OBJECT_VALUE_PROPERTY_NAME}`}
+            key={`${name}.${OBJECT_VALUE_PROPERTY_NAME}`}
+            parentOnChange={parentOnChange}
+            parentOnUnmount={parentOnUnmount}
+        />
+    );
+};

src/lib/kit/components/Inputs/ObjectValueInput/index.ts

@@ -0,0 +1 @@
+export * from './ObjectValueInput';

src/lib/kit/components/Inputs/index.ts

@@ -4,6 +4,7 @@ export * from './Checkbox';
 export * from './FileInput';
 export * from './MultiSelect';
 export * from './ObjectBase';
+export * from './ObjectValueInput';
 export * from './OneOf';
 export * from './OneOfCard';
 export * from './Secret';

src/lib/kit/components/Views/ObjectValueInputView/ObjectValueInputView.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import {ObjectIndependentView, ViewController} from '../../../../core';
+
+const OBJECT_VALUE_PROPERTY_NAME = 'value';
+
+export const ObjectValueInputView: ObjectIndependentView = ({spec, name}) => {
+    const specProperties = {...spec.properties};
+
+    if (!specProperties[OBJECT_VALUE_PROPERTY_NAME]) {
+        return null;
+    }
+
+    return (
+        <ViewController
+            spec={specProperties[OBJECT_VALUE_PROPERTY_NAME]}
+            name={`${name}.${OBJECT_VALUE_PROPERTY_NAME}`}
+        />
+    );
+};

src/lib/kit/components/Views/ObjectValueInputView/index.ts

@@ -0,0 +1 @@
+export * from './ObjectValueInputView';

src/lib/kit/components/Views/index.ts

@@ -6,6 +6,7 @@ export * from './MonacoInputView';
 export * from './MultiSelectView';
 export * from './NumberWithScaleView';
 export * from './ObjectBaseView';
+export * from './ObjectValueInputView';
 export * from './OneOfCardView';
 export * from './OneOfView';
 export * from './TableArrayView';

src/lib/kit/constants/config.tsx

@@ -24,6 +24,8 @@ import {
     NumberWithScaleView,
     ObjectBase,
     ObjectBaseView,
+    ObjectValueInput,
+    ObjectValueInputView,
     OneOf,
     OneOfCard,
     OneOfCardView,
@@ -130,6 +132,7 @@ export const dynamicConfig: DynamicFormConfig = {
             secret: {Component: Secret, independent: true},
             base: {Component: ObjectBase, independent: true},
             text_link: {Component: TextLink, independent: true},
+            object_value: {Component: ObjectValueInput, independent: true},
         },
         layouts: {
             row: Row,
@@ -228,6 +231,7 @@ export const dynamicCardConfig: DynamicFormConfig = {
             secret: {Component: Secret, independent: true},
             base: {Component: ObjectBase, independent: true},
             text_link: {Component: TextLink, independent: true},
+            object_value: {Component: ObjectValueInput, independent: true},
         },
         layouts: {
             row: Row2,
@@ -315,6 +319,7 @@ export const dynamicViewConfig: DynamicViewConfig = {
             secret: undefined,
             base: {Component: ObjectBaseView, independent: true},
             text_link: {Component: TextLinkView, independent: true},
+            object_value: {Component: ObjectValueInputView, independent: true},
         },
         layouts: {
             row: ViewRow,
@@ -395,6 +400,7 @@ export const dynamicViewCardConfig: DynamicViewConfig = {
             secret: undefined,
             base: {Component: ObjectBaseView, independent: true},
             text_link: {Component: TextLinkView, independent: true},
+            object_value: {Component: ObjectValueInputView, independent: true},
         },
         layouts: {
             row: ViewRow2,

src/stories/ObjectTextLink.stories.tsx

@@ -31,7 +31,7 @@ const baseSpec: ObjectSpec = {
 
 const value = {link: 'https://gravity-ui.com'};
 
-const excludeOptions = ['description', 'validator', 'viewSpec'];
+const excludeOptions = ['description', 'validator', 'viewSpec', 'required'];
 
 const template = (spec: ObjectSpec = baseSpec) => {
     const Template: ComponentStory<typeof TextLinkBase> = (__, {viewMode}) => (

src/stories/ObjectValue.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import {ComponentStory} from '@storybook/react';
+
+import {ObjectSpec, ObjectValueInput as ObjectValueInputBase, SpecTypes} from '../lib';
+
+import {InputPreview} from './components';
+
+export default {
+    title: 'Object/ObjectValue',
+    component: ObjectValueInputBase,
+};
+
+const baseSpec: ObjectSpec = {
+    type: SpecTypes.Object,
+    properties: {
+        value: {
+            type: SpecTypes.String,
+            viewSpec: {
+                type: 'base',
+                layout: 'row',
+                layoutTitle: 'Value',
+            },
+        },
+    },
+    viewSpec: {
+        type: 'object_value',
+    },
+};
+
+const excludeOptions = ['description', 'validator', 'viewSpec', 'required'];
+
+const template = (spec: ObjectSpec = baseSpec) => {
+    const Template: ComponentStory<typeof ObjectValueInputBase> = (__, {viewMode}) => (
+        <InputPreview spec={spec} excludeOptions={excludeOptions} viewMode={viewMode} />
+    );
+
+    return Template;
+};
+
+export const ObjectValue = template();