From 3c5ba4392db5bd46ac82289194f38b23d1141180 Mon Sep 17 00:00:00 2001 From: golbahsg Date: Fri, 1 Sep 2023 18:46:11 +0300 Subject: [PATCH] feat(ObjectBaseView): add inline variant --- .../Inputs/ObjectBase/ObjectBase.scss | 4 +- .../Inputs/ObjectBase/ObjectBase.tsx | 14 ++--- .../kit/components/Views/ObjectBaseView.tsx | 36 ------------ .../Views/ObjectBaseView/ObjectBaseView.scss | 18 ++++++ .../Views/ObjectBaseView/ObjectBaseView.tsx | 58 +++++++++++++++++++ .../components/Views/ObjectBaseView/index.ts | 1 + src/lib/kit/constants/config.tsx | 8 ++- src/lib/kit/utils/index.ts | 1 + src/lib/kit/utils/objectInline.ts | 9 +++ ...e.stories.tsx => ObjectInline.stories.tsx} | 22 +++++-- 10 files changed, 115 insertions(+), 56 deletions(-) delete mode 100644 src/lib/kit/components/Views/ObjectBaseView.tsx create mode 100644 src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.scss create mode 100644 src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.tsx create mode 100644 src/lib/kit/components/Views/ObjectBaseView/index.ts create mode 100644 src/lib/kit/utils/objectInline.ts rename src/stories/{Inline.stories.tsx => ObjectInline.stories.tsx} (59%) diff --git a/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss index 561d4e96..a70375cc 100644 --- a/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss +++ b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss @@ -1,11 +1,11 @@ @import '../../../styles/variables.scss'; -.#{$ns}objectbase { +.#{$ns}object-base { &__content { &_inline { display: flex; - > .#{$ns}use-search { + & > .#{$ns}use-search { flex: auto; margin-bottom: 0; margin-right: 8px; diff --git a/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx index b60c73e3..caf1c285 100644 --- a/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx +++ b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx @@ -12,15 +12,13 @@ import { ObjectIndependentInputProps, ObjectValue, ValidateError, - isNumberSpec, - isStringSpec, transformArrIn, } from '../../../../core'; -import {block} from '../../../utils'; +import {block, filterPropertiesForObjectInline} from '../../../utils'; import './ObjectBase.scss'; -const b = block('objectbase'); +const b = block('object-base'); export interface ObjectBaseProps extends ObjectIndependentInputProps { inline?: boolean; @@ -79,11 +77,7 @@ export const ObjectBase: React.FC = ({ } const specProperties = inline - ? Object.fromEntries( - Object.entries(spec.properties).filter( - ([, propSpec]) => isStringSpec(propSpec) || isNumberSpec(propSpec), - ), - ) + ? filterPropertiesForObjectInline(spec.properties) : spec.properties; return ( @@ -124,6 +118,6 @@ export const ObjectBase: React.FC = ({ ); }; -export const Inline: ObjectIndependentInput = (props) => { +export const ObjectInline: ObjectIndependentInput = (props) => { return ; }; diff --git a/src/lib/kit/components/Views/ObjectBaseView.tsx b/src/lib/kit/components/Views/ObjectBaseView.tsx deleted file mode 100644 index bce0dec5..00000000 --- a/src/lib/kit/components/Views/ObjectBaseView.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; - -import _ from 'lodash'; - -import {ObjectIndependentView, Spec, ViewController} from '../../../core'; - -export const ObjectBaseView: ObjectIndependentView = ({spec, name, Layout, ...restProps}) => { - if (!_.isObjectLike(spec.properties)) { - return null; - } - - const specProperties = {...spec.properties} as Record; - const content = ( - - {(spec.viewSpec.order || Object.keys(specProperties)).map((property: string) => - specProperties[property] ? ( - - ) : null, - )} - - ); - - if (!Layout) { - return content; - } - - return ( - - {content} - - ); -}; diff --git a/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.scss b/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.scss new file mode 100644 index 00000000..c9f31511 --- /dev/null +++ b/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.scss @@ -0,0 +1,18 @@ +@import '../../../styles/variables.scss'; + +.#{$ns}object-base-view { + &__content { + &_inline { + display: flex; + + & > div { + flex: auto; + margin-right: 8px; + + &:last-child { + margin-right: 0; + } + } + } + } +} diff --git a/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.tsx b/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.tsx new file mode 100644 index 00000000..84b623df --- /dev/null +++ b/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.tsx @@ -0,0 +1,58 @@ +import React from 'react'; + +import _ from 'lodash'; + +import {ObjectIndependentView, ObjectIndependentViewProps, ViewController} from '../../../../core'; +import {block, filterPropertiesForObjectInline} from '../../../utils'; + +import './ObjectBaseView.scss'; + +const b = block('object-base-view'); + +export interface ObjectBaseViewProps extends ObjectIndependentViewProps { + inline?: boolean; +} + +export const ObjectBaseView: React.FC = ({ + inline, + spec, + name, + Layout, + ...restProps +}) => { + if (!spec.properties || !_.isObjectLike(spec.properties)) { + return null; + } + + const specProperties = inline + ? filterPropertiesForObjectInline(spec.properties) + : spec.properties; + + const content = ( +
+ {(spec.viewSpec.order || Object.keys(specProperties)).map((property: string) => + specProperties[property] ? ( + + ) : null, + )} +
+ ); + + if (!Layout) { + return content; + } + + return ( + + {content} + + ); +}; + +export const ObjectInlineView: ObjectIndependentView = (props) => { + return ; +}; diff --git a/src/lib/kit/components/Views/ObjectBaseView/index.ts b/src/lib/kit/components/Views/ObjectBaseView/index.ts new file mode 100644 index 00000000..55d4152b --- /dev/null +++ b/src/lib/kit/components/Views/ObjectBaseView/index.ts @@ -0,0 +1 @@ +export * from './ObjectBaseView'; diff --git a/src/lib/kit/constants/config.tsx b/src/lib/kit/constants/config.tsx index 148e5ca8..fccc751f 100644 --- a/src/lib/kit/constants/config.tsx +++ b/src/lib/kit/constants/config.tsx @@ -14,7 +14,6 @@ import { FileInputView, Group, Group2, - Inline, MonacoInput, MonacoInputCard, MonacoView, @@ -29,6 +28,8 @@ import { NumberWithScaleView, ObjectBase, ObjectBaseView, + ObjectInline, + ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, @@ -145,7 +146,7 @@ export const dynamicConfig: DynamicFormConfig = { object_value: {Component: ObjectValueInput, independent: true}, multi_oneof: {Component: MultiOneOf, independent: true}, multi_oneof_flat: {Component: MultiOneOfFlat, independent: true}, - inline: {Component: Inline, independent: true}, + inline: {Component: ObjectInline, independent: true}, }, layouts: { row: Row, @@ -248,6 +249,7 @@ export const dynamicCardConfig: DynamicFormConfig = { object_value: {Component: ObjectValueInput, independent: true}, multi_oneof: {Component: MultiOneOf, independent: true}, multi_oneof_flat: {Component: MultiOneOfFlat, independent: true}, + inline: {Component: ObjectInline, independent: true}, }, layouts: { row: Row2, @@ -343,6 +345,7 @@ export const dynamicViewConfig: DynamicViewConfig = { object_value: {Component: ObjectValueInputView, independent: true}, multi_oneof: {Component: MultiOneOfView, independent: true}, multi_oneof_flat: {Component: MultiOneOfFlatView, independent: true}, + inline: {Component: ObjectInlineView, independent: true}, }, layouts: { row: ViewRow, @@ -429,6 +432,7 @@ export const dynamicViewCardConfig: DynamicViewConfig = { object_value: {Component: ObjectValueInputView, independent: true}, multi_oneof: {Component: MultiOneOfView, independent: true}, multi_oneof_flat: {Component: MultiOneOfFlatView, independent: true}, + inline: {Component: ObjectInlineView, independent: true}, }, layouts: { row: ViewRow2, diff --git a/src/lib/kit/utils/index.ts b/src/lib/kit/utils/index.ts index 2e92eec5..cc72e81d 100644 --- a/src/lib/kit/utils/index.ts +++ b/src/lib/kit/utils/index.ts @@ -1,3 +1,4 @@ export * from './cn'; export * from './common'; export * from './bigIntMath'; +export * from './objectInline'; diff --git a/src/lib/kit/utils/objectInline.ts b/src/lib/kit/utils/objectInline.ts new file mode 100644 index 00000000..0d6f705b --- /dev/null +++ b/src/lib/kit/utils/objectInline.ts @@ -0,0 +1,9 @@ +import {Spec, isNumberSpec, isStringSpec} from '../../core'; + +export const filterPropertiesForObjectInline = (properties: Record) => { + return Object.fromEntries( + Object.entries(properties).filter( + ([, propSpec]) => isStringSpec(propSpec) || isNumberSpec(propSpec), + ), + ); +}; diff --git a/src/stories/Inline.stories.tsx b/src/stories/ObjectInline.stories.tsx similarity index 59% rename from src/stories/Inline.stories.tsx rename to src/stories/ObjectInline.stories.tsx index 63c3c71e..a2b50af5 100644 --- a/src/stories/Inline.stories.tsx +++ b/src/stories/ObjectInline.stories.tsx @@ -2,13 +2,13 @@ import React from 'react'; import {StoryFn} from '@storybook/react'; -import {Inline as InlineBase, ObjectSpec, SpecTypes} from '../lib'; +import {ObjectInline as ObjectInlineBase, ObjectSpec, SpecTypes} from '../lib'; import {InputPreview} from './components'; export default { title: 'Object/Inline', - component: InlineBase, + component: ObjectInlineBase, }; const baseSpec: ObjectSpec = { @@ -17,11 +17,21 @@ const baseSpec: ObjectSpec = { gender: { type: SpecTypes.String, enum: ['male', 'female', 'other'], - viewSpec: {type: 'select', placeholder: 'Choose gender'}, + viewSpec: { + type: 'select', + placeholder: 'Choose gender', + layout: 'transparent', + layoutTitle: 'Gender', + }, }, name: { - type: SpecTypes.Number, - viewSpec: {type: 'base', placeholder: 'Type your name'}, + type: SpecTypes.String, + viewSpec: { + type: 'base', + placeholder: 'Type your name', + layout: 'transparent', + layoutTitle: 'Name', + }, }, }, viewSpec: { @@ -36,7 +46,7 @@ const value = {gender: 'other', name: 'Foo'}; const excludeOptions = ['description', 'viewSpec.type', 'viewSpec.oneOfParams']; const template = (spec: ObjectSpec = baseSpec) => { - const Template: StoryFn = (__, {viewMode}) => ( + const Template: StoryFn = (__, {viewMode}) => (