Skip to content

Commit 7f5c99d

Browse files
msmx-mnakagawamsmx-mnakagawa
committed
(Form): apply FormItem 
1 parent 3369198 commit 7f5c99d

File tree

4 files changed

+166
-116
lines changed

4 files changed

+166
-116
lines changed

‎src/scripts/CheckboxGroup.tsx

Lines changed: 44 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import React, {
88
ReactNode,
99
} from 'react';
1010
import classnames from 'classnames';
11+
import { FormTypeContext, FormItem } from './Form';
1112
import { FormElementProps } from './FormElement';
1213
import { FieldSetColumnContext } from './FieldSet';
1314
import { TooltipContent } from './TooltipContent';
@@ -63,6 +64,7 @@ export const CheckboxGroup = createFC<
6364
children,
6465
...rprops
6566
} = props;
67+
const type = useContext(FormTypeContext);
6668
const { totalCols } = useContext(FieldSetColumnContext);
6769
const controlElRef = useRef<HTMLDivElement | null>(null);
6870

@@ -85,16 +87,20 @@ export const CheckboxGroup = createFC<
8587
}
8688
);
8789

88-
const grpClassNames = classnames(
90+
const commonClassNames = classnames(
8991
className,
92+
typeof totalCols === 'number'
93+
? `slds-size_${cols || 1}-of-${totalCols}`
94+
: null
95+
);
96+
97+
const grpClassNames = classnames(
9098
'slds-form-element',
99+
type ? `slds-form-element_${type}` : null,
91100
{
92101
'slds-has-error': error,
93102
'slds-is-required': required,
94-
},
95-
typeof totalCols === 'number'
96-
? `slds-size_${cols || 1}-of-${totalCols}`
97-
: null
103+
}
98104
);
99105
const grpStyles =
100106
typeof totalCols === 'number'
@@ -110,35 +116,39 @@ export const CheckboxGroup = createFC<
110116
const grpCtx = useMemo(() => ({ grouped: true }), []);
111117

112118
return (
113-
<fieldset
114-
ref={elementRef}
115-
className={grpClassNames}
116-
style={grpStyles}
117-
{...rprops}
118-
onChange={onChange}
119-
>
120-
<legend className='slds-form-element__label'>
121-
{required ? (
122-
<abbr className='slds-required' title='required'>
123-
*
124-
</abbr>
125-
) : undefined}
126-
{label}
127-
{tooltip ? (
128-
<span className='slds-m-left_x-small'>
129-
<TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
130-
</span>
131-
) : null}
132-
</legend>
133-
<div className='slds-form-element__control' ref={controlElRef}>
134-
<CheckboxGroupContext.Provider value={grpCtx}>
135-
{children}
136-
</CheckboxGroupContext.Provider>
137-
{errorMessage ? (
138-
<div className='slds-form-element__help'>{errorMessage}</div>
139-
) : undefined}
140-
</div>
141-
</fieldset>
119+
<FormItem commonClassNames={commonClassNames}>
120+
{(commonClassNames) => (
121+
<fieldset
122+
ref={elementRef}
123+
className={classnames(commonClassNames, grpClassNames)}
124+
style={grpStyles}
125+
{...rprops}
126+
onChange={onChange}
127+
>
128+
<legend className='slds-form-element__label'>
129+
{required ? (
130+
<abbr className='slds-required' title='required'>
131+
*
132+
</abbr>
133+
) : undefined}
134+
{label}
135+
{tooltip ? (
136+
<span className='slds-m-left_x-small'>
137+
<TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
138+
</span>
139+
) : null}
140+
</legend>
141+
<div className='slds-form-element__control' ref={controlElRef}>
142+
<CheckboxGroupContext.Provider value={grpCtx}>
143+
{children}
144+
</CheckboxGroupContext.Provider>
145+
{errorMessage ? (
146+
<div className='slds-form-element__help'>{errorMessage}</div>
147+
) : undefined}
148+
</div>
149+
</fieldset>
150+
)}
151+
</FormItem>
142152
);
143153
},
144154
{ isFormElement: true }

‎src/scripts/FieldSet.tsx

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@ import React, {
33
HTMLAttributes,
44
ReactNode,
55
useMemo,
6+
useContext,
67
} from 'react';
78
import classnames from 'classnames';
9+
import { FormTypeContext, FormItem } from './Form';
810
import { FormElement } from './FormElement';
911
import { createFC } from './common';
1012

@@ -74,21 +76,31 @@ export const FieldSet = createFC<
7476
FieldSetProps,
7577
{ isFormElement: boolean; Row: typeof FieldSetRow }
7678
>(
77-
({ className, label, children, ...props }) => {
79+
({ className: commonClassNames, label, children, ...props }) => {
80+
const type = useContext(FormTypeContext) ?? 'compound';
81+
7882
const fsClassNames = classnames(
79-
className,
8083
'slds-form-element',
81-
'slds-form-element_compound'
84+
`slds-form-element_${type}`
8285
);
8386
const legendClassNames = classnames(
8487
'slds-form-element__legend',
8588
'slds-form-element__label'
8689
);
8790
return (
88-
<fieldset className={fsClassNames} {...props}>
89-
{label ? <legend className={legendClassNames}>{label}</legend> : null}
90-
<div className='slds-form-element__control'>{children}</div>
91-
</fieldset>
91+
<FormItem commonClassNames={commonClassNames}>
92+
{(commonClassNames) => (
93+
<fieldset
94+
className={classnames(commonClassNames, fsClassNames)}
95+
{...props}
96+
>
97+
{label ? (
98+
<legend className={legendClassNames}>{label}</legend>
99+
) : null}
100+
<div className='slds-form-element__control'>{children}</div>
101+
</fieldset>
102+
)}
103+
</FormItem>
92104
);
93105
},
94106
{ isFormElement: true, Row: FieldSetRow }

‎src/scripts/FormElement.tsx

Lines changed: 59 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import React, {
88
useCallback,
99
} from 'react';
1010
import classnames from 'classnames';
11+
import { FormTypeContext, FormItem } from './Form';
1112
import { FieldSetColumnContext } from './FieldSet';
1213
import { createFC } from './common';
1314
import { TooltipContent } from './TooltipContent';
@@ -31,6 +32,7 @@ export type FormElementProps = {
3132
children?: ReactNode;
3233
tooltip?: ReactNode;
3334
tooltipIcon?: string;
35+
type?: 'stacked' | 'horizontal' | 'inline' | 'compound';
3436
};
3537

3638
/**
@@ -56,8 +58,12 @@ export const FormElement = createFC<
5658
readOnly,
5759
tooltip,
5860
tooltipIcon,
61+
type: propsType,
5962
} = props;
6063

64+
const contextType = useContext(FormTypeContext);
65+
const type = propsType ?? contextType;
66+
6167
const controlElRef = useRef<HTMLDivElement>(null);
6268

6369
const { totalCols } = useContext(FieldSetColumnContext);
@@ -70,16 +76,20 @@ export const FormElement = createFC<
7076
: undefined
7177
: undefined;
7278

73-
const formElementClassNames = classnames(
74-
'slds-form-element',
75-
readOnly ? 'slds-form-element_readonly' : null,
76-
error ? 'slds-has-error' : null,
79+
const commonClassNames = classnames(
7780
typeof totalCols === 'number'
7881
? `slds-size_${cols}-of-${totalCols}`
7982
: null,
8083
className
8184
);
8285

86+
const formElementClassNames = classnames(
87+
'slds-form-element',
88+
type ? `slds-form-element_${type}` : null,
89+
readOnly ? 'slds-form-element_readonly' : null,
90+
error ? 'slds-has-error' : null
91+
);
92+
8393
const onClickLabel = useCallback(() => {
8494
if (controlElRef.current) {
8595
const inputEl = controlElRef.current.querySelector<HTMLElement>(
@@ -95,46 +105,53 @@ export const FormElement = createFC<
95105

96106
return (
97107
<FieldSetColumnContext.Provider value={emptyCtx}>
98-
<div ref={elementRef} className={formElementClassNames}>
99-
{label ? (
100-
<LabelTag
101-
id={id}
102-
className='slds-form-element__label'
103-
{...(LabelTag === 'label' ? { htmlFor } : {})}
104-
onClick={id ? undefined : onClickLabel}
108+
<FormItem commonClassNames={commonClassNames}>
109+
{(commonClassNames) => (
110+
<div
111+
ref={elementRef}
112+
className={classnames(formElementClassNames, commonClassNames)}
105113
>
106-
{required ? (
107-
<abbr
108-
className='slds-required'
109-
title='required'
110-
aria-hidden='true'
114+
{label ? (
115+
<LabelTag
116+
id={id}
117+
className='slds-form-element__label'
118+
{...(LabelTag === 'label' ? { htmlFor } : {})}
119+
onClick={id ? undefined : onClickLabel}
111120
>
112-
*
113-
</abbr>
114-
) : undefined}
115-
{label}
116-
</LabelTag>
117-
) : null}
118-
{tooltip ? (
119-
<TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
120-
) : null}
121-
<div ref={controlElRef} className='slds-form-element__control'>
122-
{readOnly ? (
123-
<div className='slds-form-element__static'>{children}</div>
124-
) : (
125-
children
126-
)}
127-
{dropdown}
128-
{errorMessage ? (
129-
<span
130-
className='slds-form-element__help'
131-
id={error ? errorId : undefined}
132-
>
133-
{errorMessage}
134-
</span>
135-
) : undefined}
136-
</div>
137-
</div>
121+
{required ? (
122+
<abbr
123+
className='slds-required'
124+
title='required'
125+
aria-hidden='true'
126+
>
127+
*
128+
</abbr>
129+
) : undefined}
130+
{label}
131+
</LabelTag>
132+
) : null}
133+
{tooltip ? (
134+
<TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
135+
) : null}
136+
<div ref={controlElRef} className='slds-form-element__control'>
137+
{readOnly ? (
138+
<div className='slds-form-element__static'>{children}</div>
139+
) : (
140+
children
141+
)}
142+
{dropdown}
143+
{errorMessage ? (
144+
<span
145+
className='slds-form-element__help'
146+
id={error ? errorId : undefined}
147+
>
148+
{errorMessage}
149+
</span>
150+
) : undefined}
151+
</div>
152+
</div>
153+
)}
154+
</FormItem>
138155
</FieldSetColumnContext.Provider>
139156
);
140157
},

0 commit comments

Comments
 (0)