onekijs-ui 0.9.2 → 0.15.2

package/src/components/table/components/cells/SelectCellComponent.tsx

@@ -0,0 +1,41 @@
+import { CollectionBroker } from 'onekijs-framework';
+import React, { useEffect } from 'react';
+import { addClassname } from '../../../../utils/style';
+import FormSelect from '../../../select/FormSelect';
+import useSelectController from '../../../select/hooks/useSelectController';
+import { SelectItem } from '../../../select/typings';
+import useFormTableContext from '../../hooks/useFormTableContext';
+import { TableBodyCellProps, UseSelectColumnOptions } from '../../typings';
+
+const SelectCellComponent = (
+  options: UseSelectColumnOptions<any, SelectItem<any>>,
+  broker: CollectionBroker<any, SelectItem<any>>,
+): React.FC<TableBodyCellProps> => {
+  const SelectCellComponent: React.FC<TableBodyCellProps> = ({ item, column, rowIndex }) => {
+    const { tableName } = useFormTableContext();
+    const controller = useSelectController(options.dataSource, Object.assign({}, options, broker.getInitialQuery()));
+    const className =
+      typeof options.className === 'function' ? options.className(item, column, rowIndex) : options.className;
+
+    useEffect(() => {
+      broker.addSubscriber(controller);
+      return () => {
+        broker.removeSubscriber(controller);
+      };
+    }, [controller]);
+
+    return (
+      <FormSelect
+        size="small"
+        layout="table"
+        {...options}
+        name={`${tableName}.${rowIndex}.${column.id}`}
+        className={addClassname('o-table-select', className)}
+      />
+    );
+  };
+  SelectCellComponent.displayName = 'SelectCellComponent';
+  return SelectCellComponent;
+};
+
+export default SelectCellComponent;

package/src/components/table/components/filters/TableInputFilterComponent.tsx

@@ -0,0 +1,134 @@
+import React, { ChangeEvent, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { alignItems, justifyContent } from '../../../../styles/alignment';
+import { backgroundColor } from '../../../../styles/background';
+import { borderRadius } from '../../../../styles/border';
+import { display } from '../../../../styles/display';
+import { cursor, userSelect } from '../../../../styles/interactivity';
+import { width } from '../../../../styles/size';
+import { color } from '../../../../styles/typography';
+import { addClassname } from '../../../../utils/style';
+import Dropdown from '../../../dropdown';
+import SearchIcon from '../../../icon/SearchIcon';
+import Input from '../../../input';
+import { InputProps } from '../../../input/typings';
+import useTableService from '../../hooks/useTableService';
+import { TableHeaderCellProps } from '../../typings';
+import { getValueFromFilter } from '../../util';
+
+const SearchComponent: React.FC<InputProps> = ({ className }) => {
+  const [showOperators, setShowOperators] = useState(false);
+  const [containerRef, setContainerRef] = useState<HTMLElement | null>(null);
+  const toggleOperators = () => {
+    setShowOperators(!showOperators);
+  };
+  const [dropping, setDropping] = useState(false);
+  const [collapsing, setCollapsing] = useState(false);
+
+  const style: React.CSSProperties = {};
+
+  if (dropping || collapsing) {
+    style['zIndex'] = 1001;
+  }
+  return (
+    <div
+      ref={setContainerRef}
+      className={addClassname('o-search-icon-container', className)}
+      style={{ position: 'relative' }}
+    >
+      <SearchIcon className="o-search-icon" width="14px" height="14px" onClick={toggleOperators} />
+      {showOperators && (
+        <Dropdown
+          refElement={containerRef}
+          open={showOperators}
+          distance={0}
+          animationTimeout={200}
+          onDropStart={() => {
+            setDropping(true);
+          }}
+          onCollapseStart={() => {
+            setCollapsing(true);
+          }}
+          onDropDone={() => {
+            setDropping(false);
+          }}
+          onCollapseDone={() => {
+            setCollapsing(false);
+          }}
+        >
+          <div>operators</div>
+        </Dropdown>
+      )}
+    </div>
+  );
+};
+
+const StyledSearchComponent = styled(SearchComponent)`
+  ${css`
+      ${width('20px')}
+      ${display('flex')}
+      ${alignItems('center')}
+      ${borderRadius('none')}
+      ${justifyContent('center')}
+      ${backgroundColor('inherit')}
+      ${color('primary')}
+      ${userSelect('none')}
+      .o-search-icon {
+        ${cursor('pointer')}
+      }
+  `}
+`;
+
+// const StyledInput = styled(Input)`
+//   ${css`
+//     ${backgroundColor('#eee')}
+//     ${borderWidth(0)}
+//     ${borderRadius('none')}
+//     ${padding(0)}
+//     .o-input-field {
+//       ${paddingY('xs')}
+//       ${paddingX('xs')}
+//       ${fontSize('12px')}
+//     }
+
+//   `}
+// `;
+
+const TableInputFilterComponent: React.FC<TableHeaderCellProps> = ({ column }) => {
+  const controller = useTableService();
+  const filter = controller.getFilterById(column.id);
+  const filterValue = getValueFromFilter(filter);
+  const [value, setValue] = useState(filterValue);
+  const onValueChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value) {
+      if (controller.state.local) {
+        controller.addFilterCriteria(column.id, 'like', e.target.value, false, column.id);
+      } else {
+        setValue(e.target.value);
+      }
+    } else {
+      setValue('');
+      controller.removeFilter(column.id);
+    }
+  };
+
+  const onKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!controller.state.local && e.key === 'Enter') {
+      controller.addFilterCriteria(column.id, 'like', value, false, column.id);
+    }
+  };
+
+  return (
+    <Input
+      className="o-table-filter-input"
+      value={controller.state.local ? filterValue : value}
+      onChange={onValueChange}
+      onKeyUp={onKeyUp}
+      PrefixComponent={StyledSearchComponent}
+    />
+  );
+};
+
+TableInputFilterComponent.displayName = 'TableInputFilterComponent';
+
+export default TableInputFilterComponent;

package/src/components/table/components/hoc/linkCellComponent.tsx

@@ -0,0 +1,15 @@
+import { get, Link } from 'onekijs-framework';
+import React, { FC } from 'react';
+import { TableBodyCellProps } from '../../typings';
+
+const linkCellComponent = (href: string | ((item: any) => string)): FC<TableBodyCellProps> => {
+  const LinkCellComponent = (props: TableBodyCellProps) => {
+    if (typeof href === 'function') {
+      href = href(props.item);
+    }
+    return <Link href={href}>{get(props.item, `data.${props.column.id}`)}</Link>;
+  };
+  return LinkCellComponent;
+};
+
+export default linkCellComponent;

package/src/components/table/hooks/useFormTableContext.ts

@@ -0,0 +1,10 @@
+import React, { useContext } from 'react';
+import { FormTableContext } from '../typings';
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+export const DefaultFormTableContext = React.createContext<FormTableContext>(null!);
+const useFormTableContext = (): FormTableContext => {
+  return useContext(DefaultFormTableContext);
+};
+
+export default useFormTableContext;

package/src/components/table/hooks/useTableColumns.ts

@@ -0,0 +1,9 @@
+import { TableColumn, TableItem } from '../typings';
+import { useTableState } from './useTableState';
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const useTableColumns = <T = any, I extends TableItem<T> = TableItem<T>>(): TableColumn<T, I>[] => {
+  return useTableState<T, I>().columns;
+};
+
+export default useTableColumns;

package/src/components/table/hooks/useTableConfig.ts

@@ -0,0 +1,7 @@
+import React, { useContext } from 'react';
+import { TableConfig, TableItem } from '../typings';
+
+export const TableConfigContext = React.createContext<TableConfig<any, any>>(null!);
+export const useTableConfig = <T = any, I extends TableItem<T> = TableItem<T>>(): TableConfig<T, I> => {
+  return useContext(TableConfigContext);
+};

package/src/components/table/hooks/useTableController.ts

@@ -0,0 +1,26 @@
+import { CollectionProxy, useCollectionProxy } from 'onekijs-framework';
+import TableService from '../TableService';
+import { TableColumn, TableItem, TableState, UseTableOptions } from '../typings';
+import useTableInitialState from './useTableInitialState';
+
+const useTableController = <T>(
+  dataSource: T[] | string | undefined,
+  initialColumns: TableColumn<T, TableItem<T>>[] | undefined,
+  options: UseTableOptions<T, TableItem<T>> = {},
+): CollectionProxy<
+  T,
+  TableItem<T>,
+  TableState<T, TableItem<T>>,
+  TableService<T, TableItem<T>, TableState<T, TableItem<T>>>
+> => {
+  const tableState = useTableInitialState<T, TableItem<T>>(dataSource, initialColumns, options);
+
+  return useCollectionProxy<
+    T,
+    TableItem<T>,
+    TableState<T, TableItem<T>>,
+    TableService<T, TableItem<T>, TableState<T, TableItem<T>>>
+  >(dataSource, TableService, tableState);
+};
+
+export default useTableController;

package/src/components/table/hooks/useTableInitialState.ts

@@ -0,0 +1,22 @@
+import { useCollectionInitialState, useLazyRef } from 'onekijs-framework';
+import { TableColumn, TableItem, TableState, UseTableOptions } from '../typings';
+
+const useTableInitialState = <T, I extends TableItem<T>>(
+  dataSource: T[] | string | undefined,
+  initialColumns: TableColumn<T, I>[] | undefined,
+  options: UseTableOptions<T, I>,
+): TableState<T, I> => {
+  const collectionState = useCollectionInitialState(dataSource, options);
+
+  const stateRef = useLazyRef<TableState<T, I>>(() => {
+    return Object.assign(
+      {
+        columns: initialColumns || [],
+      },
+      collectionState,
+    );
+  });
+  return stateRef.current;
+};
+
+export default useTableInitialState;

package/src/components/table/hooks/useTableItems.ts

@@ -0,0 +1,9 @@
+import { TableItem } from '../typings';
+import { useTableState } from './useTableState';
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const useTableItems = <T = any, I extends TableItem<T> = TableItem<T>>(): (I | undefined)[] => {
+  return useTableState<T, I>().items || [];
+};
+
+export default useTableItems;

package/src/components/table/hooks/useTableService.ts

@@ -0,0 +1,10 @@
+import React, { useContext } from 'react';
+import { TableController, TableItem } from '../typings';
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+export const TableServiceContext = React.createContext<TableController<any, any>>(null!);
+const useTableService = <T = any, I extends TableItem<T> = TableItem<T>>(): TableController<T, I> => {
+  return useContext(TableServiceContext);
+};
+
+export default useTableService;

package/src/components/table/hooks/useTableState.ts

@@ -0,0 +1,7 @@
+import React, { useContext } from 'react';
+import { TableItem, TableState } from '../typings';
+
+export const TableStateContext = React.createContext<TableState<any, any>>(null!);
+export const useTableState = <T = any, I extends TableItem<T> = TableItem<T>>(): TableState<T, I> => {
+  return useContext(TableStateContext);
+};

package/src/components/table/index.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import TableComponent from './components/TableComponent';
+import { tableStyle } from './style';
+
+const Table = styled(TableComponent)`
+  ${tableStyle}
+`;
+
+export default Table;

package/src/components/table/style.ts

@@ -0,0 +1,248 @@
+import { css } from 'styled-components';
+import { alignItems, justifyContent } from '../../styles/alignment';
+import { backgroundColor } from '../../styles/background';
+import { borderBottomColor, borderBottomStyle, borderBottomWidth, borderWidth, boxShadow } from '../../styles/border';
+import { display } from '../../styles/display';
+import { flexDirection } from '../../styles/flex';
+import { boxSizing, cursor, outline } from '../../styles/interactivity';
+import { overflow, overflowX, overflowY } from '../../styles/overflow';
+import { height, width } from '../../styles/size';
+import {
+  marginBottom,
+  marginLeft,
+  marginTop,
+  padding,
+  paddingBottom,
+  paddingRight,
+  paddingX,
+  paddingY,
+} from '../../styles/spacing';
+import { verticalAlign } from '../../styles/table';
+import { transitionDuration, transitionProperty, transitionTimingFunction } from '../../styles/transition';
+import { ComponentStyle } from '../../styles/typings';
+import { color, fontSize, fontWeight, textTransform } from '../../styles/typography';
+import { TableProps } from './typings';
+
+export const tableStyle: ComponentStyle<TableProps<any>> = ({ theme, fit = true }) => {
+  const t = theme.table;
+  return css`
+    ${boxShadow(t.shadow)}
+    ${boxSizing('border-box')}
+    ${paddingRight('sm')}
+    scrollbar-width: thin;
+    scrollbar-color: ${(props) => props.theme.palette.colors[props.theme.colors.light]}
+      ${(props) => props.theme.colors[props.theme.colors.lighter]};
+    &::-webkit-scrollbar {
+      width: 12px;
+    }
+    &::-webkit-scrollbar-track {
+      background: ${(props) => props.theme.palette.colors[props.theme.colors.lighter]};
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: ${(props) => props.theme.palette.colors[props.theme.colors.light]};
+      border: 3px solid ${(props) => props.theme.palette.colors[props.theme.colors.lighter]};
+    }
+    ${() => (fit ? 'flex-grow: 1;' : '')}
+
+    .o-table-not-found {
+      ${display('flex')}
+      ${flexDirection('column')}
+      ${alignItems('center')}
+      ${padding('8xl')}
+      ${color('primary')}
+      ${fontSize('xl')}
+      ${backgroundColor(t.bgColor)}
+    }
+
+    .o-table-body {
+      ${overflowX('auto')}
+    }
+
+    .o-table-body-row-container {
+      ${paddingBottom('sm')}
+    }
+    .o-table-body-row-expanded {
+      .o-table-body-row {
+        ${backgroundColor(t.tdExpandedBgColor)}
+      }
+    }
+
+    .o-table-body-row-expanded-content {
+      ${backgroundColor(t.tdExpandedBgColor)}
+      ${overflowY('hidden')}
+      ${borderBottomColor(t.tdBorderBottomColor)}
+      ${borderBottomWidth(0)}
+      ${borderBottomStyle(t.tdBorderBottomStyle)}
+      ${boxShadow('default')}
+    }
+
+    .o-table-body-row:hover {
+      ${backgroundColor(t.tdHoverBgColor)}
+      ${color(t.tdHoverFontColor)}
+      .o-checkbox label {
+          ${color('currentColor')}
+        }
+      }
+    }
+
+    .o-table-body-row {
+      ${display('flex')}
+      ${flexDirection('row')}
+      ${color(t.tdFontColor)}
+      ${borderBottomColor(t.tdBorderBottomColor)}
+      ${borderBottomWidth(0)}
+      ${borderBottomStyle(t.tdBorderBottomStyle)}
+      ${boxShadow('default')}
+      ${backgroundColor(t.bgColor)}
+
+      .o-table-body-cell {
+        ${paddingX(t.tdPaddingX)}
+        ${paddingY(t.tdPaddingY)}
+        ${boxSizing('border-box')}
+        ${overflow('hidden')}
+        &.o-table-cell-expander {
+          ${padding(0)}
+          .o-table-cell-expander-content {
+            ${paddingX(t.tdPaddingX)}
+            ${paddingY(t.tdPaddingY)}
+            ${cursor('pointer')}
+          }
+        }
+      }
+    }
+    .o-table-body-row-even {
+      ${backgroundColor(t.tdStripBgColor)}
+    }
+
+    .o-table-header {
+      ${display('flex')}
+      ${flexDirection('column')}
+      .o-table-header-sortable {
+        cursor: pointer;
+      }
+    }
+
+    .o-table-header-filterable {
+      .o-table-header-title-container {
+        ${borderBottomWidth(0)}
+        ${paddingBottom(0)}
+      }
+    }
+
+    .o-table-header-row-title, .o-table-header-row-filter {
+      ${boxSizing('border-box')}
+      ${display('flex')}
+      ${flexDirection('row')}
+      ${backgroundColor(t.thBgColor)}
+    }
+
+    .o-table-header-title-container, .o-table-header-filter {
+      ${boxSizing('border-box')}
+      ${display('flex')}
+      ${flexDirection('row')}
+      ${alignItems('center')}
+      ${paddingX(t.thPaddingX)}
+      ${overflow('hidden')}
+    }
+
+    .o-table-header-title-container {
+      ${paddingY(t.thPaddingY)}
+      ${borderBottomWidth(t.thBorderBottomWidth)}
+      ${borderBottomColor(t.thBorderBottomColor)}
+    }
+
+    .o-table-header-title {
+      ${color(t.thFontColor)}
+      ${fontWeight(t.thFontWeigth)}
+      ${fontSize(t.thFontSize)}
+      ${textTransform(t.thFontCase)}
+    }
+
+    .o-table-sort-container {
+      ${color('primary')}
+      ${cursor('pointer')}
+      ${width(8)}
+      ${display('flex')}
+      ${alignItems('center')}
+    }
+
+    .o-table-sort-icon {
+      ${color('primary')}
+      ${cursor('pointer')}
+      ${width(4)}
+      ${height(4)}
+      ${outline('none', { focus: 'none' })}
+      ${backgroundColor('transparent')}
+      ${marginLeft('px')}
+      ${padding(0)}
+      ${borderWidth(0)}
+    }
+    .o-table-sort-svg {
+      ${display('block')}
+      ${verticalAlign('middle')}
+      ${transitionDuration('.5s')}
+      ${transitionProperty('all')}
+      ${transitionTimingFunction('ease-in-out')}
+    }
+
+    .o-table-header-filter {
+      ${borderBottomWidth(t.thBorderBottomWidth)}
+      ${borderBottomColor(t.thBorderBottomColor)}
+      ${paddingBottom(t.thPaddingY)}
+      .o-table-filter-input {
+        ${marginTop('xs')}
+        ${backgroundColor(t.thFilterInputBgColor)}
+        ${borderWidth(0)}
+        .o-input-field {
+          ${paddingY(t.thFilterInputPaddingY)}
+          ${paddingX(t.thFilterInputPaddingX)}
+          ${fontSize(t.thFilterInputFontSize)}
+        }
+      }
+    }
+
+    &.o-form-table {
+      ${boxShadow('none')}
+      ${paddingRight('none')}
+      .o-table-body-row:hover {
+        ${backgroundColor(t.bgColor)}
+        ${color(t.tdFontColor)}
+        .o-checkbox label {
+            ${color('currentColor')}
+          }
+        }
+      }
+      .o-table-header-title-container {
+        ${paddingY('xs')}
+        ${borderBottomWidth('1px')}
+        ${borderBottomColor('primary')}
+      }
+    }
+
+    .o-form-table-add {
+      ${marginTop('sm')}
+      ${display('inline-flex')}
+      ${alignItems('center')}
+      ${fontWeight('bold')}
+      ${textTransform('uppercase')}
+      ${fontSize('xs')}
+      ${cursor('pointer')}
+      ${color('primary')}
+      .o-toggler-icon-container {
+        ${marginBottom('px')}
+      }
+    }
+    .o-form-table-remove {
+      ${display('inline-flex')}
+      ${alignItems('center')}
+      ${color('primary')}
+      ${cursor('pointer')}
+    }
+
+    .o-form-table-remove-cell {
+      ${display('flex')}
+      ${alignItems('center')}
+      ${justifyContent('center')}
+    }
+  `;
+};