Merge pull request #105 from openinfradev/bugfix-form-section

Bugfix. Trivial bugfix regarding FormSection

package.json

@@ -1,6 +1,6 @@
 {
     "name": "tksui-components",
-    "version": "0.6.22",
+    "version": "0.7.0",
     "private": false,
     "type": "module",
     "module": "lib/esm/index.js",

src/components/data-container/form-section/TFormSection.interface.ts

@@ -26,7 +26,7 @@ export interface TFormSectionProps extends TBaseProps {
 
 export interface TFormSectionRowProps extends TBaseProps {
     children: ReactNode,
-    formRowVerticalAlign?: RowVerticalAlign,
+    verticalAlign?: RowVerticalAlign,
 }
 
 export interface TFormSectionItemProps extends TBaseProps {

src/components/data-container/form-section/TFormSectionItem.tsx

@@ -80,8 +80,17 @@ const TFormSectionItem = (props: TFormSectionItemProps) => {
 
     const contentStyle = useMemo((): CSSProperties => {
 
-        return props.contentStyle ? {...props.contentStyle} : {};
-    }, [props.contentStyle]);
+        const style: CSSProperties = {...props.contentStyle};
+
+        if (rowVerticalAlign === 'middle') {
+            style.alignItems = 'center';
+        }
+        if (rowVerticalAlign === 'top') {
+            style.alignItems = 'flex-start';
+        }
+
+        return style;
+    }, [props.contentStyle, rowVerticalAlign]);
 
     // endregion
 

src/components/data-container/form-section/TFormSectionRow.tsx

@@ -33,7 +33,7 @@ const TFormSectionRow = (props: TFormSectionRowProps) => {
         <div className={`t-form-section-row ${rootClass}`} style={rootStyle}>
             <TFormSectionContext.Provider value={{
                 ...formContext,
-                rowVerticalAlign: props.formRowVerticalAlign,
+                rowVerticalAlign: props.verticalAlign,
             }}>
                 {props.children}
             </TFormSectionContext.Provider>
@@ -44,4 +44,8 @@ const TFormSectionRow = (props: TFormSectionRowProps) => {
 
 TFormSectionRow.displayName = 'TFormSectionRow';
 
+TFormSectionRow.defaultProps = {
+    verticalAlign: 'middle',
+};
+
 export default TFormSectionRow;

src/components/data-container/form-section/index.ts

@@ -1,5 +1,5 @@
 export {default as TFormSection} from './TFormSection';
-export {default as TFormRow} from './TFormSectionRow';
-export {default as TFormItem} from './TFormSectionItem';
+export {default as TFormSectionRow} from './TFormSectionRow';
+export {default as TFormSectionItem} from './TFormSectionItem';
 
 export * from './TFormSection.interface';

src/components/index.ts

@@ -14,7 +14,6 @@ export * from './data-container/form-section';
 export * from './data-container/action-bar';
 export * from './data-container/highlight-text';
 export * from './data-container/pagination';
-export * from './data-container/search-box';
 export * from './data-container/tab-box';
 export * from './data-container/step-box';
 export * from './data-container/card';

src/styles/component/Components.scss

@@ -4,7 +4,6 @@
 @import 'button/icon-button/TIconButton';
 
 // data-container
-@import 'data-container/search-box/TSearchBox.scss';
 @import 'data-container/data-grid/TDataGrid.scss';
 @import 'data-container/highlight-text/THighlightText.scss';
 @import 'data-container/drop-holder/TDropHolder.scss';