diff --git a/docs/spec.md b/docs/spec.md index e7cf5257..9a495df1 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -84,6 +84,7 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec; | viewSpec.layoutOpen | `boolean` | | Expand [Layout](./config.md#layouts) at the first rendering | | viewSpec.order | `string[]` | | Array of `properties` keys in the right order | | viewSpec.link | `any` | | A field containing information for forming a [link](#link) for a value | +| viewSpec.oneOfParams | `object` | | [Parameters](#oneofparams) that must be passed to oneof input | ### StringSpec @@ -128,6 +129,12 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec; | language | `string` | yes | Syntax highlighting language | | fontSize | `string` | | Font size | +#### OneOfParams + +| Property | Type | Required | Description | +| :------- | :------------------- | :------: | :---------- | +| toggler | `'select'` `'radio'` | | Switch type | + #### FileInput | Property | Type | Required | Description | diff --git a/src/lib/core/types/specs.ts b/src/lib/core/types/specs.ts index df849d3b..5f27dd04 100644 --- a/src/lib/core/types/specs.ts +++ b/src/lib/core/types/specs.ts @@ -83,6 +83,9 @@ export interface ObjectSpec { layoutOpen?: boolean; order?: string[]; link?: LinkType; + oneOfParams?: { + toggler?: 'select' | 'radio'; + }; }; } diff --git a/src/lib/kit/components/Card/Card.scss b/src/lib/kit/components/Card/Card.scss index cf307c3f..57161988 100644 --- a/src/lib/kit/components/Card/Card.scss +++ b/src/lib/kit/components/Card/Card.scss @@ -51,6 +51,7 @@ &__header-left { display: flex; align-items: center; + flex-grow: 1; } &__header-right { @@ -58,7 +59,7 @@ align-items: center; & > * { - margin-left: 5px; + margin-left: 10px; } } diff --git a/src/lib/kit/components/Inputs/OneOf/OneOf.scss b/src/lib/kit/components/Inputs/OneOf/OneOf.scss index 14535e4b..1188d1d5 100644 --- a/src/lib/kit/components/Inputs/OneOf/OneOf.scss +++ b/src/lib/kit/components/Inputs/OneOf/OneOf.scss @@ -4,34 +4,50 @@ display: flex; flex-direction: column; - &:last-child { - & > .#{$ns}group-indent { - margin-bottom: 0; - } - } + &_base { + .#{$ns}group-indent { + all: unset; - .#{$ns}group-indent { - all: unset; + & > .#{$ns}use-search { + padding-top: 11px; + padding-left: $normalOffset; + margin-top: 4px; + margin-bottom: 20px; + margin-left: 5px; + border-left: 1px solid var(--yc-color-line-generic-accent); - & > .#{$ns}use-search { - padding-top: 11px; - padding-left: $normalOffset; - margin-top: 4px; - margin-bottom: 20px; - margin-left: 5px; - border-left: 1px solid var(--yc-color-line-generic-accent); + &:empty { + display: none; + } - &:empty { - display: none; - } + &:last-child { + margin-bottom: 0; + } - &:last-child { - margin-bottom: 0; + & > .#{$ns}simple-vertical-accordeon_view { + margin-top: -10px; + } } + } + } - & > .#{$ns}simple-vertical-accordeon_view { - margin-top: -10px; - } + &_flat { + & > .#{$ns}group-indent { + margin: 0; + border-left: none; + padding: 0; + } + } + + &:last-child { + & > .#{$ns}group-indent { + margin-bottom: 0; + } + } + + &__toggler { + &_flat { + margin-bottom: 15px; } } } diff --git a/src/lib/kit/components/Inputs/OneOf/OneOf.tsx b/src/lib/kit/components/Inputs/OneOf/OneOf.tsx index 48011a46..d0cce78a 100644 --- a/src/lib/kit/components/Inputs/OneOf/OneOf.tsx +++ b/src/lib/kit/components/Inputs/OneOf/OneOf.tsx @@ -3,7 +3,13 @@ import React from 'react'; import _ from 'lodash'; import {GroupIndent} from '../../'; -import {Controller, FieldValue, ObjectIndependentInput, ValidateError} from '../../../../core'; +import { + Controller, + FieldValue, + ObjectIndependentInput, + ObjectIndependentInputProps, + ValidateError, +} from '../../../../core'; import {useOneOf} from '../../../hooks'; import {block} from '../../../utils'; @@ -11,7 +17,11 @@ import './OneOf.scss'; const b = block('oneof'); -export const OneOf: ObjectIndependentInput = (props) => { +export interface OneOfProps extends ObjectIndependentInputProps { + withoutIndent?: boolean; +} + +const OneOfComponent: React.FC = (props) => { const {oneOfValue, specProperties, toggler} = useOneOf({props}); const parentOnChange = React.useCallback( @@ -34,8 +44,13 @@ export const OneOf: ObjectIndependentInput = (props) => { ); return ( -
-
{toggler}
+
+
{toggler}
{specProperties[oneOfValue] ? ( {
); }; + +export const OneOf = OneOfComponent; + +export const OneOfFlat: ObjectIndependentInput = (props) => ( + +); diff --git a/src/lib/kit/components/Views/OneOfView/OneOfView.scss b/src/lib/kit/components/Views/OneOfView/OneOfView.scss new file mode 100644 index 00000000..8ea39bc3 --- /dev/null +++ b/src/lib/kit/components/Views/OneOfView/OneOfView.scss @@ -0,0 +1,11 @@ +@import '../../../styles/variables'; + +.#{$ns}oneof-view { + &_flat { + & > .#{$ns}group-indent { + margin: 0 0 20px; + border-left: none; + padding: 0; + } + } +} diff --git a/src/lib/kit/components/Views/OneOfView.tsx b/src/lib/kit/components/Views/OneOfView/OneOfView.tsx similarity index 67% rename from src/lib/kit/components/Views/OneOfView.tsx rename to src/lib/kit/components/Views/OneOfView/OneOfView.tsx index 1de5135d..805d7c88 100644 --- a/src/lib/kit/components/Views/OneOfView.tsx +++ b/src/lib/kit/components/Views/OneOfView/OneOfView.tsx @@ -2,10 +2,19 @@ import React from 'react'; import _ from 'lodash'; -import {GroupIndent} from '../'; -import {ObjectIndependentView, ViewController} from '../../../core'; +import {GroupIndent} from '../../'; +import {ObjectIndependentView, ObjectIndependentViewProps, ViewController} from '../../../../core'; +import {block} from '../../../utils'; -export const OneOfView: ObjectIndependentView = (props) => { +import './OneOfView.scss'; + +const b = block('oneof-view'); + +export interface OneOfViewProps extends ObjectIndependentViewProps { + withoutIndent?: boolean; +} + +const OneOfViewComponent: React.FC = (props) => { const {value = {}, spec, Layout, name} = props; const specProperties = React.useMemo( @@ -40,7 +49,7 @@ export const OneOfView: ObjectIndependentView = (props) => { } return ( - +
{wrappedValue} {specProperties[valueKey] ? ( @@ -51,6 +60,12 @@ export const OneOfView: ObjectIndependentView = (props) => { /> ) : null} - +
); }; + +export const OneOfView = OneOfViewComponent; + +export const OneOfFlatView: ObjectIndependentView = (props) => ( + +); diff --git a/src/lib/kit/components/Views/OneOfView/index.ts b/src/lib/kit/components/Views/OneOfView/index.ts new file mode 100644 index 00000000..34f8f136 --- /dev/null +++ b/src/lib/kit/components/Views/OneOfView/index.ts @@ -0,0 +1 @@ +export * from './OneOfView'; diff --git a/src/lib/kit/constants/config.tsx b/src/lib/kit/constants/config.tsx index fa615880..e13c6793 100644 --- a/src/lib/kit/constants/config.tsx +++ b/src/lib/kit/constants/config.tsx @@ -29,6 +29,8 @@ import { OneOf, OneOfCard, OneOfCardView, + OneOfFlat, + OneOfFlatView, OneOfView, Row, Row2, @@ -128,6 +130,7 @@ export const dynamicConfig: DynamicFormConfig = { object: { inputs: { oneof: {Component: OneOf, independent: true}, + oneof_flat: {Component: OneOfFlat, independent: true}, card_oneof: {Component: CardOneOf, independent: true}, secret: {Component: Secret, independent: true}, base: {Component: ObjectBase, independent: true}, @@ -315,6 +318,7 @@ export const dynamicViewConfig: DynamicViewConfig = { object: { views: { oneof: {Component: OneOfView, independent: true}, + oneof_flat: {Component: OneOfFlatView, independent: true}, card_oneof: {Component: CardOneOfView, independent: true}, secret: undefined, base: {Component: ObjectBaseView, independent: true}, diff --git a/src/lib/kit/hooks/useOneOf.tsx b/src/lib/kit/hooks/useOneOf.tsx index 9fb46721..402e50b3 100644 --- a/src/lib/kit/hooks/useOneOf.tsx +++ b/src/lib/kit/hooks/useOneOf.tsx @@ -65,8 +65,10 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => { const togglerInput = React.useMemo(() => { if ( - options.length > 3 || - _.some(options, ({title}) => title.length > MAX_TAB_TITLE_LENGTH) + spec.viewSpec.oneOfParams?.toggler !== 'radio' && + (spec.viewSpec.oneOfParams?.toggler === 'select' || + options.length > 3 || + _.some(options, ({title}) => title.length > MAX_TAB_TITLE_LENGTH)) ) { return (