onekijs-ui 0.18.2 → 0.19.0

package/src/components/table/components/ControllerTableComponent.tsx

@@ -1,15 +1,17 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useId, useMemo, useRef } from 'react';
 import { addClassname } from '../../../utils/style';
 import { TableConfigContext } from '../hooks/useTableConfig';
 import { TableServiceContext } from '../hooks/useTableService';
 import { TableStateContext } from '../hooks/useTableState';
 import { ControllerTableProps, TableConfig } from '../typings';
+import TableActionComponent from './TableActionComponent';
 import TableBodyComponent from './TableBodyComponent';
 import TableFooterComponent from './TableFooterComponent';
 import TableHeaderComponent from './TableHeaderComponent';
 import ExpandedCellComponent from './cells/ExpandedCellComponent';
 
 const ControllerTableComponent: React.FC<ControllerTableProps> = ({
+  ActionComponent = TableActionComponent,
   autoRefresh,
   controller,
   className,
@@ -27,6 +29,7 @@ const ControllerTableComponent: React.FC<ControllerTableProps> = ({
   headerClassName,
   HeaderComponent = TableHeaderComponent,
   increment,
+  itemHeight,
   LoadingComponent,
   LoadingRowComponent,
   NotFoundComponent,
@@ -42,8 +45,10 @@ const ControllerTableComponent: React.FC<ControllerTableProps> = ({
   paddingStart,
   parentRef,
   preload,
+  refreshButtonKind = 'primary',
   rowClassName,
   RowComponent,
+  showRefreshButton,
   sortable,
   stripRows,
   tail,
@@ -57,6 +62,7 @@ const ControllerTableComponent: React.FC<ControllerTableProps> = ({
 
   const config: TableConfig = useMemo(() => {
     return {
+      ActionComponent,
       autoRefresh,
       bodyClassName,
       BodyComponent,
@@ -76,6 +82,7 @@ const ControllerTableComponent: React.FC<ControllerTableProps> = ({
       height,
       highlightRow,
       increment,
+      itemHeight,
       LoadingComponent,
       LoadingRowComponent,
       NotFoundComponent,
@@ -88,13 +95,16 @@ const ControllerTableComponent: React.FC<ControllerTableProps> = ({
       paddingStart,
       parentRef,
       preload,
+      refreshButtonKind,
       rowClassName,
       RowComponent,
+      showRefreshButton,
       sortable,
       stripRows,
-      tail
+      tail,
     };
   }, [
+    ActionComponent,
     autoRefresh,
     bodyClassName,
     BodyComponent,
@@ -114,6 +124,7 @@ const ControllerTableComponent: React.FC<ControllerTableProps> = ({
     height,
     highlightRow,
     increment,
+    itemHeight,
     LoadingComponent,
     LoadingRowComponent,
     NotFoundComponent,
@@ -126,8 +137,10 @@ const ControllerTableComponent: React.FC<ControllerTableProps> = ({
     paddingStart,
     parentRef,
     preload,
+    refreshButtonKind,
     rowClassName,
     RowComponent,
+    showRefreshButton,
     sortable,
     stripRows,
     tail,
@@ -154,27 +167,33 @@ const ControllerTableComponent: React.FC<ControllerTableProps> = ({
     }
   }, [service, ExpandedComponent]);
 
+  const id = useId();
+
   return (
     <TableServiceContext.Provider value={controller.asService()}>
       <TableStateContext.Provider value={controller.state}>
         <TableConfigContext.Provider value={config}>
-          <div
-            className={classNames}
-            ref={tableRef}
-            style={{
-              maxHeight: height,
-              overflow: 'auto',
-            }}
-          >
-            {header && <HeaderComponent columns={columns} className={headerClassName} />}
-            <BodyComponent
-              items={items || []}
-              columns={columns}
-              tableRef={tableRef}
-              contentRef={contentRef}
-              className={bodyClassName}
-            />
-            {footer && <FooterComponent columns={columns} className={footerClassName} />}
+          <div className={className}>
+            <ActionComponent />
+            <div
+              id={id}
+              className={classNames}
+              ref={tableRef}
+              style={{
+                maxHeight: height,
+                overflow: 'auto',
+              }}
+            >
+              {header && <HeaderComponent columns={columns} className={headerClassName} />}
+              <BodyComponent
+                items={items || []}
+                columns={columns}
+                tableRef={tableRef}
+                contentRef={contentRef}
+                className={bodyClassName}
+              />
+              {footer && <FooterComponent columns={columns} className={footerClassName} />}
+            </div>
           </div>
         </TableConfigContext.Provider>
       </TableStateContext.Provider>

package/src/components/table/components/TableActionComponent.tsx

@@ -0,0 +1,22 @@
+import RefreshIcon from '../../icon/RefreshIcon';
+import { useTableConfig } from '../hooks/useTableConfig';
+import React from 'react';
+import useTableService from '../hooks/useTableService';
+import Button from '../../button';
+
+const TableActionComponent: React.FC = () => {
+  const { showRefreshButton, refreshButtonKind } = useTableConfig();
+  const table = useTableService();
+  return (
+    <div className="o-table-actions">
+      <div className="o-table-action">
+
+      </div>
+      {showRefreshButton  && <div className="o-table-refresh">
+        <Button kind={refreshButtonKind} size="small" IconComponent={() => <RefreshIcon />} onClick={() => table.reload()}>Refresh</Button>
+      </div>}
+    </div>
+  )
+}
+
+export default TableActionComponent;

package/src/components/table/components/TableBodyComponent.tsx

@@ -12,6 +12,7 @@ import { TableBodyProps } from '../typings';
 import TableBodyRowComponent from './TableBodyRowComponent';
 import TableLoadingComponent from './TableLoadingComponent';
 import TableNotFoundComponent from './TableNotFoundComponent';
+import TableLoadingRowComponent from './TableLoadingRowComponent';
 
 const TableBodyComponent: React.FC<TableBodyProps> = ({ className, tableRef, contentRef }) => {
   const service = useTableService();
@@ -20,6 +21,7 @@ const TableBodyComponent: React.FC<TableBodyProps> = ({ className, tableRef, con
     autoRefresh,
     follow,
     height,
+    itemHeight,
     increment,
     onRowClick,
     onRowEnter,
@@ -32,18 +34,23 @@ const TableBodyComponent: React.FC<TableBodyProps> = ({ className, tableRef, con
     rowClassName,
     LoadingComponent = TableLoadingComponent,
     NotFoundComponent = TableNotFoundComponent,
+    LoadingRowComponent = TableLoadingRowComponent,
     tail,
   } = useTableConfig();
 
-  const itemHeight = useCallback(() => {
-    return 20;
+  const itemHeightFunction = useCallback((index: number) => {
+    if (typeof itemHeight === 'function') {
+      return itemHeight(index);
+    }
+    return itemHeight || 37;
   }, []);
+
   const { items, isVirtual, totalSize, virtualItems, measure, scrollToIndex } = useListView({
     controller: service,
     height: height,
     ref: parentRef || tableRef,
     overscan: 10,
-    itemHeight,
+    itemHeight: itemHeightFunction,
     paddingEnd,
     paddingStart,
     preload,
@@ -55,7 +62,7 @@ const TableBodyComponent: React.FC<TableBodyProps> = ({ className, tableRef, con
       const columns = useTableColumns();
       const className =
         typeof rowClassName === 'function' ? rowClassName(props.item, props.index, columns) : rowClassName;
-      return (
+        return (
         <RowComponent
           {...props}
           columns={columns}
@@ -88,6 +95,7 @@ const TableBodyComponent: React.FC<TableBodyProps> = ({ className, tableRef, con
       follow={follow}
       height={height}
       ItemComponent={ItemComponentRef.current}
+      ItemLoadingComponent={LoadingRowComponent}
       items={items}
       onItemSelect={onRowClick}
       onItemHighlight={onRowEnter}

package/src/components/table/components/TableBodyRowComponent.tsx

@@ -9,19 +9,20 @@ import TableLoadingRowComponent from './TableLoadingRowComponent';
 
 const timeout = 500;
 
-const TableBodyRowComponent: FC<TableBodyRowProps> = ({
-  item,
-  index,
-  columns,
-  CellComponent = TableBodyCellComponent,
-  className,
-  onExpand,
-  onExpanding,
-  onExpanded,
-  onCollapse,
-  onCollapsing,
-  onCollapsed,
-}) => {
+const TableBodyRowComponent: FC<TableBodyRowProps> = (props) => {
+  const {
+    item,
+    index,
+    columns,
+    CellComponent = TableBodyCellComponent,
+    className,
+    onExpand,
+    onExpanding,
+    onExpanded,
+    onCollapse,
+    onCollapsing,
+    onCollapsed,
+  } = props;
   const [hover, setHover] = useState(false);
   const {
     highlightRow,
@@ -69,7 +70,7 @@ const TableBodyRowComponent: FC<TableBodyRowProps> = ({
     return (
       <div className={rowContainerClassName}>
         <div className="o-table-body-row">
-          <LoadingRowComponent />
+          <LoadingRowComponent {...props} />
         </div>
       </div>
     );

package/src/components/table/components/TableLoadingComponent.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import LoadingIcon from '../../icon/LoadingIcon';
 
-const TableLoadingComponent: React.FC<React.InputHTMLAttributes<HTMLDivElement>> = (props) => {
+const TableLoadingComponent: React.FC = (props) => {
   return (
     <div {...props}>
       <LoadingIcon width="50px" height="50px" />

package/src/components/table/components/TableLoadingRowComponent.tsx

@@ -3,12 +3,16 @@ import styled, { css } from 'styled-components';
 import { minHeight, width } from '../../../styles/size';
 import { ComponentStyle } from '../../../styles/typings';
 import LoadingItem from '../../list/components/LoadingItem';
+import { TableBodyRowProps } from '../typings';
+import { useTableConfig } from '../hooks/useTableConfig';
 
-const TableLoadingRowComponent: React.FC<React.InputHTMLAttributes<HTMLDivElement>> = (props) => {
-  return <LoadingItem {...props} />;
+const TableLoadingRowComponent: React.FC<TableBodyRowProps>= (props) => {
+  const { itemHeight } = useTableConfig();
+  const minHeight = typeof itemHeight === 'function' ? itemHeight(props.index) : itemHeight
+  return <LoadingItem {...props} minHeight={minHeight} />;
 };
 
-const style: ComponentStyle<React.InputHTMLAttributes<HTMLDivElement>> = ({ theme }) => {
+const style: ComponentStyle<TableBodyRowProps> = ({ theme }) => {
   const t = theme.table;
   return css`
     ${minHeight(t.loadingRowMinHeight)}

package/src/components/table/style.ts

@@ -11,13 +11,14 @@ import {
   boxShadow,
 } from '../../styles/border';
 import { display, visibility } from '../../styles/display';
-import { flexDirection } from '../../styles/flex';
+import { flexDirection, flexGrow } from '../../styles/flex';
 import { boxSizing, cursor, outline, userSelect } from '../../styles/interactivity';
 import { overflow, overflowX, overflowY } from '../../styles/overflow';
 import { height, minWidth, width } from '../../styles/size';
 import {
   marginBottom,
   marginLeft,
+  marginRight,
   marginTop,
   padding,
   paddingBottom,
@@ -78,6 +79,18 @@ export const tableStyle: ComponentStyle<TableProps<any>> = ({ theme, fit = true
       ${() => (fit ? 'flex-grow: 1;' : '')}
     }
 
+    .o-table-actions {
+      ${display('flex')}
+    }
+
+    .o-table-action {
+      ${flexGrow(1)}
+    }
+
+    .o-table-refresh {
+      ${marginBottom('sm')}
+      ${marginRight('xl')}
+    }
 
     .o-table-not-found {
       ${display('flex')}
@@ -99,6 +112,7 @@ export const tableStyle: ComponentStyle<TableProps<any>> = ({ theme, fit = true
       ${borderBottomStyle(t.tdBorderBottomStyle)}
     }
     .o-table-body-row-expanded {
+      ${fontSize('default')}
       .o-table-body-row {
         ${backgroundColor(t.tdExpandedBgColor)}
       }
@@ -300,6 +314,7 @@ export const tableStyle: ComponentStyle<TableProps<any>> = ({ theme, fit = true
 
 
     &.o-form-table {
+      ${flexGrow(1)}
       ${boxShadow('none')}
       ${paddingRight('none')}
       .o-table-body-row:hover {

package/src/components/table/typings.ts

@@ -21,6 +21,7 @@ import { ListItemProps, ListItems, ListNotFoundProps, ListState, UseListOptions
 import { FormSelectProps, SelectBroker, SelectItem, SelectProps } from '../select/typings';
 import { TextareaProps } from '../textarea/typings';
 import TableService from './TableService';
+import { ButtonProps } from '../button/typings';
 
 export type ArrayTableProps<T = any, I extends TableItem<T> = TableItem<T>> = TableConfig<T, I> & {
   adapter?: TableItemAdapter<T>;
@@ -105,6 +106,7 @@ export type TableBodyRowProps<T = any, I extends TableItem<T> = TableItem<T>> =
 };
 
 export type TableConfig<T = any, I extends TableItem<T> = TableItem<T>> = {
+  ActionComponent?: React.FC;
   autoRefresh?: number;
   bodyClassName?: string;
   BodyComponent?: React.FC<TableBodyProps<T, I>>;
@@ -124,6 +126,7 @@ export type TableConfig<T = any, I extends TableItem<T> = TableItem<T>> = {
   height?: string | number;
   highlightRow?: boolean;
   increment?: number;
+  itemHeight?: number | ((index: number) => number);
   LoadingComponent?: React.FC;
   LoadingRowComponent?: React.FC;
   NotFoundComponent?: React.FC<TableNotFoundProps> | null;
@@ -138,6 +141,8 @@ export type TableConfig<T = any, I extends TableItem<T> = TableItem<T>> = {
   preload?: number;
   rowClassName?: string | ((item: I | undefined, rowIndex: number, columns: TableColumn<T, I>[]) => string);
   RowComponent?: React.FC<TableBodyRowProps<T, I>>;
+  refreshButtonKind?: ButtonProps['kind'];
+  showRefreshButton?: boolean;
   sortable?: boolean;
   stripRows?: boolean;
   tail?: boolean;

package/src/styles/typings.ts

@@ -256,15 +256,21 @@ export type Theme = {
       borderColor: ColorPropertyTheme | Property.BorderColor;
       borderColorFlat: ColorPropertyTheme | Property.BackgroundColor;
       borderColorOutline: ColorPropertyTheme | Property.BackgroundColor;
-      borderRadius: RadiusPropertyTheme | string;
+      borderRadiusMedium: RadiusPropertyTheme | string;
+      borderRadiusSmall: RadiusPropertyTheme | string;
+      borderRadiusLarge: RadiusPropertyTheme | string;
       borderStyle: Property.BorderStyle;
-      borderWidth: Property.BorderWidth<TLength>;
+      borderWidthSmall: Property.BorderWidth<TLength>;
+      borderWidthMedium: Property.BorderWidth<TLength>;
+      borderWidthLarge: Property.BorderWidth<TLength>;
       color: ColorPropertyTheme | Property.Color;
       colorFlat: ColorPropertyTheme | Property.BackgroundColor;
       colorOutline: ColorPropertyTheme | Property.BackgroundColor;
       cursor: Property.Cursor;
       cursorDisabled: Property.Cursor;
-      fontSize: FontSizePropertyTheme | Property.FontSize<TLength>;
+      fontSizeMedium: FontSizePropertyTheme | Property.FontSize<TLength>;
+      fontSmallSize: FontSizePropertyTheme | Property.FontSize<TLength>;
+      fontLargeSize: FontSizePropertyTheme | Property.FontSize<TLength>;
       fontWeight: FontWeightPropertyTheme | Property.FontWeight;
       hoverBgColor: ColorPropertyTheme | Property.BackgroundColor;
       hoverBgColorFlat: ColorPropertyTheme | Property.BackgroundColor;
@@ -275,12 +281,20 @@ export type Theme = {
       hoverColor: ColorPropertyTheme | Property.Color;
       hoverColorFlat: ColorPropertyTheme | Property.BackgroundColor;
       hoverColorOutline: ColorPropertyTheme | Property.BackgroundColor;
-      letterSpacing: LetterSpacingPropertyTheme | Property.LetterSpacing<TLength>;
-      lineHeight: LineHeightPropertyTheme | Property.LineHeight<TLength>;
+      letterSpacingSmall: LetterSpacingPropertyTheme | Property.LetterSpacing<TLength>;
+      letterSpacingMedium: LetterSpacingPropertyTheme | Property.LetterSpacing<TLength>;
+      letterSpacingLarge: LetterSpacingPropertyTheme | Property.LetterSpacing<TLength>;
+      lineHeightSmall: LineHeightPropertyTheme | Property.LineHeight<TLength>;
+      lineHeightMedium: LineHeightPropertyTheme | Property.LineHeight<TLength>;
+      lineHeightLarge: LineHeightPropertyTheme | Property.LineHeight<TLength>;
       opacity: Property.Opacity;
       opacityDisabled: Property.Opacity;
-      paddingY: SpacingPropertyTheme | Property.Padding<TLength>;
-      paddingX: SpacingPropertyTheme | Property.Padding<TLength>;
+      paddingYMedium: SpacingPropertyTheme | Property.Padding<TLength>;
+      paddingXMedium: SpacingPropertyTheme | Property.Padding<TLength>;
+      paddingYSmall: SpacingPropertyTheme | Property.Padding<TLength>;
+      paddingXSmall: SpacingPropertyTheme | Property.Padding<TLength>;
+      paddingYLarge: SpacingPropertyTheme | Property.Padding<TLength>;
+      paddingXLarge: SpacingPropertyTheme | Property.Padding<TLength>;
       textOverflow: Property.TextOverflow;
       textTransform: Property.TextTransform;
       whiteSpace: Property.WhiteSpace;

package/src/theme/base.tsx

@@ -484,15 +484,21 @@ export const baseTheme = (customTheme: Partial<Theme> = {}): Theme => {
       borderColor: kind,
       borderColorFlat: 'transparent',
       borderColorOutline: kind,
-      borderRadius: 'sm',
+      borderRadiusMedium: 'sm',
+      borderRadiusSmall: 'sm',
+      borderRadiusLarge: 'sm',
       borderStyle: 'solid',
-      borderWidth: 1,
+      borderWidthSmall: 1,
+      borderWidthMedium: 1,
+      borderWidthLarge: 1,
       color: ['light', 'lightest', 'lighter', 'white'].includes(kind) ? 'darker' : 'white',
       colorFlat: kind,
       colorOutline: ['light', 'lightest', 'lighter', 'white'].includes(kind) ? 'darkest' : kind,
       cursor: 'pointer',
       cursorDisabled: 'not-allowed',
-      fontSize: 'md',
+      fontSizeMedium: 'md',
+      fontSizeSmall: 'sm',
+      fontSizeLarge: 'lg',
       fontWeight: 'bold',
       hoverColor: ['light', 'lightest', 'lighter', 'white'].includes(kind) ? 'black' : 'white',
       hoverColorFlat: lighten(get<any>(theme.colors, kind, ''), 100),
@@ -503,12 +509,20 @@ export const baseTheme = (customTheme: Partial<Theme> = {}): Theme => {
       hoverBorderColor: darken(get<any>(theme.colors, kind, ''), 100),
       hoverBorderColorFlat: 'transparent',
       hoverBorderColorOutline: kind,
-      letterSpacing: 'normal',
-      lineHeight: '3xl',
+      letterSpacingMedium: 'normal',
+      letterSpacingSmall: 'normal',
+      letterSpacingLarge: 'normal',
+      lineHeightMedium: '3xl',
+      lineHeightSmall: '2xl',
+      lineHeightLarge: '4xl',
       opacity: 1,
       opacityDisabled: 0.6,
-      paddingY: 'none',
-      paddingX: 'lg',
+      paddingYMedium: 'none',
+      paddingYSmall: 'none',
+      paddingYLarge: 'none',
+      paddingXMedium: 'lg',
+      paddingXSmall: 'md',
+      paddingXLarge: 'xl',
       textOverflow: 'ellipsis',
       textTransform: 'none',
       whiteSpace: 'nowrap',