Skip to content

Commit

Permalink
feat(ObjectBaseView): add inline variant
Browse files Browse the repository at this point in the history
  • Loading branch information
DakEnviy committed Sep 1, 2023
1 parent ac3039c commit 3c5ba43
Show file tree
Hide file tree
Showing 10 changed files with 115 additions and 56 deletions.
4 changes: 2 additions & 2 deletions src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
14 changes: 4 additions & 10 deletions src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -79,11 +77,7 @@ export const ObjectBase: React.FC<ObjectBaseProps> = ({
}

const specProperties = inline
? Object.fromEntries(
Object.entries(spec.properties).filter(
([, propSpec]) => isStringSpec(propSpec) || isNumberSpec(propSpec),
),
)
? filterPropertiesForObjectInline(spec.properties)
: spec.properties;

return (
Expand Down Expand Up @@ -124,6 +118,6 @@ export const ObjectBase: React.FC<ObjectBaseProps> = ({
);
};

export const Inline: ObjectIndependentInput = (props) => {
export const ObjectInline: ObjectIndependentInput = (props) => {
return <ObjectBase {...props} inline />;
};
36 changes: 0 additions & 36 deletions src/lib/kit/components/Views/ObjectBaseView.tsx

This file was deleted.

18 changes: 18 additions & 0 deletions src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
}
58 changes: 58 additions & 0 deletions src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.tsx
Original file line number Diff line number Diff line change
@@ -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<ObjectBaseViewProps> = ({
inline,
spec,
name,
Layout,
...restProps
}) => {
if (!spec.properties || !_.isObjectLike(spec.properties)) {
return null;
}

const specProperties = inline
? filterPropertiesForObjectInline(spec.properties)
: spec.properties;

const content = (
<div className={b('content', {inline})}>
{(spec.viewSpec.order || Object.keys(specProperties)).map((property: string) =>
specProperties[property] ? (
<ViewController
spec={specProperties[property]}
name={`${name ? name + '.' : ''}${property}`}
key={`${name ? name + '.' : ''}${property}`}
/>
) : null,
)}
</div>
);

if (!Layout) {
return content;
}

return (
<Layout spec={spec} name={name} {...restProps}>
{content}
</Layout>
);
};

export const ObjectInlineView: ObjectIndependentView = (props) => {
return <ObjectBaseView {...props} inline />;
};
1 change: 1 addition & 0 deletions src/lib/kit/components/Views/ObjectBaseView/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './ObjectBaseView';
8 changes: 6 additions & 2 deletions src/lib/kit/constants/config.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
FileInputView,
Group,
Group2,
Inline,
MonacoInput,
MonacoInputCard,
MonacoView,
Expand All @@ -29,6 +28,8 @@ import {
NumberWithScaleView,
ObjectBase,
ObjectBaseView,
ObjectInline,
ObjectInlineView,
ObjectValueInput,
ObjectValueInputView,
OneOf,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions src/lib/kit/utils/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './cn';
export * from './common';
export * from './bigIntMath';
export * from './objectInline';
9 changes: 9 additions & 0 deletions src/lib/kit/utils/objectInline.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import {Spec, isNumberSpec, isStringSpec} from '../../core';

export const filterPropertiesForObjectInline = (properties: Record<string, Spec>) => {
return Object.fromEntries(
Object.entries(properties).filter(
([, propSpec]) => isStringSpec(propSpec) || isNumberSpec(propSpec),
),
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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: {
Expand All @@ -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<typeof InlineBase> = (__, {viewMode}) => (
const Template: StoryFn<typeof ObjectInlineBase> = (__, {viewMode}) => (
<InputPreview
spec={spec}
value={value}
Expand Down

0 comments on commit 3c5ba43

Please sign in to comment.