Skip to content

Commit

Permalink
feat(ObjectBase): add inline variant
Browse files Browse the repository at this point in the history
  • Loading branch information
DakEnviy committed Aug 30, 2023
1 parent ff23507 commit 653ff92
Show file tree
Hide file tree
Showing 4 changed files with 112 additions and 8 deletions.
19 changes: 19 additions & 0 deletions src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
@import '../../../styles/variables.scss';

.#{$ns}objectbase {
&__content {
&_inline {
display: flex;

> .#{$ns}use-search {
flex: auto;
margin-bottom: 0;
margin-right: 8px;

&:last-child {
margin-right: 0;
}
}
}
}
}
48 changes: 40 additions & 8 deletions src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,30 @@ import {
FieldObjectValue,
FieldValue,
ObjectIndependentInput,
ObjectIndependentInputProps,
ObjectValue,
Spec,
ValidateError,
isNumberSpec,
isStringSpec,
transformArrIn,
} from '../../../../core';
import {block} from '../../../utils';

export const ObjectBase: ObjectIndependentInput = ({spec, name, Layout, ...restProps}) => {
import './ObjectBase.scss';

const b = block('objectbase');

export interface ObjectBaseProps extends ObjectIndependentInputProps {
inline?: boolean;
}

export const ObjectBase: React.FC<ObjectBaseProps> = ({
inline,
spec,
name,
Layout,
...restProps
}) => {
const addBtn = React.useMemo(
() => (
<Button
Expand Down Expand Up @@ -49,18 +66,28 @@ export const ObjectBase: ObjectIndependentInput = ({spec, name, Layout, ...restP
);

const content = React.useMemo(() => {
if (!_.isObjectLike(spec.properties) || !Object.keys(spec.properties || {}).length) {
if (
!spec.properties ||
!_.isObjectLike(spec.properties) ||
!Object.keys(spec.properties || {}).length
) {
return null;
}

if (!restProps.input.value) {
return addBtn;
}

const specProperties = {...spec.properties} as Record<string, Spec>;
const specProperties = inline
? Object.fromEntries(
Object.entries(spec.properties).filter(
([, propSpec]) => isStringSpec(propSpec) || isNumberSpec(propSpec),
),
)
: spec.properties;

return (
<React.Fragment>
<div className={b('content', {inline})}>
{(spec.viewSpec.order || Object.keys(specProperties)).map((property: string) =>
specProperties[property] ? (
<Controller
Expand All @@ -73,16 +100,17 @@ export const ObjectBase: ObjectIndependentInput = ({spec, name, Layout, ...restP
/>
) : null,
)}
</React.Fragment>
</div>
);
}, [
spec.properties,
spec.viewSpec.order,
name,
restProps.input.value,
restProps.input.parentOnUnmount,
inline,
addBtn,
name,
parentOnChange,
restProps.input.parentOnUnmount,
]);

if (!Layout || !content) {
Expand All @@ -95,3 +123,7 @@ export const ObjectBase: ObjectIndependentInput = ({spec, name, Layout, ...restP
</Layout>
);
};

export const Inline: ObjectIndependentInput = (props) => {
return <ObjectBase {...props} inline />;
};
2 changes: 2 additions & 0 deletions src/lib/kit/constants/config.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
FileInputView,
Group,
Group2,
Inline,
MonacoInput,
MonacoInputCard,
MonacoView,
Expand Down Expand Up @@ -144,6 +145,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},
},
layouts: {
row: Row,
Expand Down
51 changes: 51 additions & 0 deletions src/stories/Inline.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import React from 'react';

import {StoryFn} from '@storybook/react';

import {Inline as InlineBase, ObjectSpec, SpecTypes} from '../lib';

import {InputPreview} from './components';

export default {
title: 'Object/Inline',
component: InlineBase,
};

const baseSpec: ObjectSpec = {
type: SpecTypes.Object,
properties: {
gender: {
type: SpecTypes.String,
enum: ['male', 'female', 'other'],
viewSpec: {type: 'select', placeholder: 'Choose gender'},
},
name: {
type: SpecTypes.Number,
viewSpec: {type: 'base', placeholder: 'Type your name'},
},
},
viewSpec: {
type: 'inline',
layout: 'row',
layoutTitle: 'Candidate',
},
};

const value = {gender: 'other', name: 'Foo'};

const excludeOptions = ['description', 'viewSpec.type', 'viewSpec.oneOfParams'];

const template = (spec: ObjectSpec = baseSpec) => {
const Template: StoryFn<typeof InlineBase> = (__, {viewMode}) => (
<InputPreview
spec={spec}
value={value}
excludeOptions={excludeOptions}
viewMode={viewMode}
/>
);

return Template;
};

export const Inline = template();

0 comments on commit 653ff92

Please sign in to comment.