onekijs-ui 0.19.2 → 0.19.4

package/src/components/password/style.ts

@@ -0,0 +1,26 @@
+import { css } from 'styled-components'
+import { ComponentStyle } from '../../styles/typings'
+import { PasswordProps } from './typings'
+import { display } from '../../styles/display'
+import { alignItems } from '../../styles/alignment'
+import { color, fontSize } from '../../styles/typography'
+import { marginBottom, marginLeft } from '../../styles/spacing'
+import { cursor } from '../../styles/interactivity'
+
+const passwordStyle: ComponentStyle<PasswordProps> = () => {
+  return css`
+    ${display('flex')}
+    ${alignItems('center')}
+    .g-icon-obfuscated-password {
+      ${fontSize('xl')}
+      ${marginBottom('-8px')}
+    }
+    .g-icon-show-password {
+      ${color('primary')}
+      ${marginLeft('sm')}
+      ${cursor('pointer')}
+    }
+  `
+}
+
+export default passwordStyle

package/src/components/password/typings.ts

@@ -0,0 +1,5 @@
+import { StylableProps } from '../../styles/typings';
+
+export type PasswordProps = StylableProps & {
+  value: string;
+};

package/src/components/select/FormSelect.tsx

@@ -1,16 +1,75 @@
+import { FormDisplayerProps, FormFieldValueDisplayerProps, useForm } from 'onekijs-framework';
 import React from 'react';
 import Select from '.';
+import { titlelize } from '../../utils/misc';
+import FieldDisplayer from '../field/FieldDisplayer';
 import FieldLayout from '../field/FieldLayout';
 import useFieldLayout from '../field/hooks/useFieldLayout';
 import { FormSelectProps, SelectItem, SelectProps } from './typings';
 
-const FormSelect = <T extends any = any, I extends SelectItem<T> = SelectItem<T>>(props: FormSelectProps<T, I>) => {
+const FormSelectValueDisplayer: React.FC<FormFieldValueDisplayerProps> = ({ value }) => {
+  if (Array.isArray(value)) {
+    return (
+      <>
+      {value.map((v, index) => <div key={`item-${index}`} className="o-select-displayer-value">{v ?? ''}</div>)}
+      </>
+    )
+  }
+  return <span className="o-select-displayer-value">{value ?? ''}</span>;
+};
+
 
+
+const FormSelect = <T extends any = any, I extends SelectItem<T> = SelectItem<T>>(props: FormSelectProps<T, I>) => {
+  const service = props.controller ? props.controller.asService() : undefined;
   const defaultValue = props.defaultValue === undefined ? (props.multiple ? [] : null) : props.defaultValue;
   const [fieldLayoutProps, fieldComponentProps] = useFieldLayout<SelectProps<T, I>>(
-    Object.assign({}, props, {
-      defaultValue,
-    }),
+    Object.assign(
+      {},
+      props,
+      {
+        defaultValue,
+        Displayer: props.Displayer ?? ((displayerProps: FormDisplayerProps) => {
+          const form = useForm();
+          let value = form.getValue(displayerProps.name) ?? '';
+          const adapter = props.adapter;
+          if (value === undefined || value === null) {
+            value = '';
+          } else if (service) {
+            if (Array.isArray(value)) {
+              value = value.map((v) => {
+                const adaptee = service.adapt(v);
+                return adaptee.text ?? `${value}`;
+              })
+            } else {
+              const adaptee = service.adapt(value);
+              value = adaptee.text ?? `${value}`;
+            }
+          } else if (adapter) {
+            if (Array.isArray(value)) {
+              value = value.map((v) => {
+                const adaptee = adapter(v);
+                return  adaptee.text ?? `${value}`;
+              })
+            } else {
+              const adaptee = adapter(value);
+              value = adaptee.text ?? `${value}`;
+            }
+          }
+          const ValueDisplayer = props.ValueDisplayer ?? FormSelectValueDisplayer;
+          return (
+            <FieldDisplayer
+              label={displayerProps.label ?? titlelize(displayerProps.name)}
+              help={props.help}
+              first={displayerProps.first}
+              last={displayerProps.last}
+              value={<ValueDisplayer value={value} />}
+              format={displayerProps.format}
+            />
+          );
+        }),
+      },
+    ),
   );
   const Component = props.FieldComponent || Select;
 

package/src/components/select/components/ControlledTreeSelectComponent.tsx

@@ -24,7 +24,7 @@ export const useTreeSelectPropsContext = <
   return useContext(TreeSelectPropsContext);
 };
 
-const TreeSelectListComponent = <T = any, I extends TreeSelectItem<T> = TreeSelectItem<T>>(
+const TreeSelectListComponent = <T extends any = any, I extends TreeSelectItem<T> = TreeSelectItem<T>>(
   props: SelectListComponentProps<T, I>,
 ) => {
   const treeProps = useTreeSelectPropsContext<T, I>();

package/src/components/table/FormTable.tsx

@@ -1,8 +1,12 @@
+import { FormContext, FormDisplayerProps, useFieldContainer, useForm } from 'onekijs-framework';
 import React, { FC } from 'react';
 import styled from 'styled-components';
+import { titlelize } from '../../utils/misc';
+import FieldDisplayer from '../field/FieldDisplayer';
 import FieldLayout from '../field/FieldLayout';
 import useFieldLayout from '../field/hooks/useFieldLayout';
 import FormTableComponent from './components/FormTableComponent';
+import FormTableValueDisplayer from './displayers/FormTableValueDisplayer';
 import { tableStyle } from './style';
 import { FormTableProps, TableItem } from './typings';
 
@@ -24,21 +28,50 @@ const FormTable: FC<FormTableProps<any, TableItem<any>>> = React.memo((props) =>
     Object.assign(
       {
         defaultValue,
+        Displayer: (displayerProps: FormDisplayerProps) => {
+          const form = useForm();
+          let value = form.getValue(displayerProps.name) ?? [];
+          const ValueDisplayer = props.ValueDisplayer ?? FormTableValueDisplayer;
+          return (
+            <FieldDisplayer
+              label={displayerProps.label ?? titlelize(displayerProps.name)}
+              help={props.help}
+              first={displayerProps.first}
+              last={displayerProps.last}
+              value={
+                <ValueDisplayer
+                  name={displayerProps.name}
+                  value={value}
+                  columns={props.controller.columns}
+                  format={displayerProps.format}
+                />
+              }
+              format={displayerProps.format}
+            />
+          );
+        },
       },
       props,
     ),
   );
+
+  const fieldContainer = useFieldContainer({
+    container: props.name,
+  });
+
   const Component = props.FieldComponent || StyledFormTableComponent;
 
   return (
     <FieldLayout {...fieldLayoutProps} required={props.required}>
-      <Component
-        {...fieldComponentProps}
-        name={props.name}
-        required={props.required}
-        minLength={props.minLength ?? props.min}
-        maxLength={props.maxLength ?? props.max}
-      />
+      <FormContext.Provider value={fieldContainer.context}>
+        <Component
+          {...fieldComponentProps}
+          name={props.name}
+          required={props.required}
+          minLength={props.minLength ?? props.min}
+          maxLength={props.maxLength ?? props.max}
+        />
+      </FormContext.Provider>
     </FieldLayout>
   );
 });

package/src/components/table/columns/checkboxColumn.ts

@@ -1,4 +1,5 @@
 import CheckboxCellComponent from '../components/cells/CheckboxCellComponent';
+import DefaultCellDisplayer from '../displayers/DefaultCellDisplayer';
 import { CheckboxColumn, CheckboxColumnOptions, TableItem } from '../typings';
 
 const checkboxColumn = <T = any, I extends TableItem<T> = TableItem<T>>(
@@ -11,6 +12,7 @@ const checkboxColumn = <T = any, I extends TableItem<T> = TableItem<T>>(
       filterable: false,
       sortable: false,
       className: 'o-checkbox-cell',
+      Displayer: DefaultCellDisplayer,
     },
     options,
     {

package/src/components/table/columns/enumColumn.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 import DefaultCellComponent from '../components/cells/DefaultCellComponent';
 import TableSelectFilterComponent from '../components/filters/TableSelectFilterComponent';
 import { EnumColumnOptions, TableColumn, TableHeaderCellProps, TableItem } from '../typings';
+import DefaultCellDisplayer from '../displayers/DefaultCellDisplayer';
 
-const enumColumn = <T = any, I extends TableItem<T> = TableItem<T>>(
+const enumColumn = <T extends any = any, I extends TableItem<T> = TableItem<T>>(
   id: string,
   options: EnumColumnOptions<T, I>,
 ): TableColumn<T, I> => {
@@ -15,6 +16,7 @@ const enumColumn = <T = any, I extends TableItem<T> = TableItem<T>>(
         <TableSelectFilterComponent {...props} dataSource={options.filterDataSource} />
       ),
       sortable: true,
+      Displayer: DefaultCellDisplayer,
     },
     options,
     {

package/src/components/table/columns/inputColumn.ts

@@ -1,7 +1,8 @@
 import InputCellComponent from '../components/cells/InputCellComponent';
+import DefaultCellDisplayer from '../displayers/DefaultCellDisplayer';
 import { InputColumn, InputColumnOptions, TableItem } from '../typings';
 
-const inputColumn = <T = any, I extends TableItem<T> = TableItem<T>>(
+const inputColumn = <T extends any = any, I extends TableItem<T> = TableItem<T>>(
   id: string,
   options: InputColumnOptions<T, I>,
 ): InputColumn<T, I> => {
@@ -10,6 +11,7 @@ const inputColumn = <T = any, I extends TableItem<T> = TableItem<T>>(
     {
       filterable: false,
       sortable: false,
+      Displayer: DefaultCellDisplayer,
     },
     options,
     {

package/src/components/table/columns/numberColumn.ts

@@ -1,5 +1,6 @@
 import DefaultCellComponent from '../components/cells/DefaultCellComponent';
 import TableNumberFilterComponent from '../components/filters/TableNumberFilterComponent';
+import DefaultCellDisplayer from '../displayers/DefaultCellDisplayer';
 import { TableColumn, TableColumnOptions, TableItem } from '../typings';
 
 const numberColumn = <T = any, I extends TableItem<T> = TableItem<T>>(
@@ -12,6 +13,7 @@ const numberColumn = <T = any, I extends TableItem<T> = TableItem<T>>(
       filterable: true,
       FilterComponent: TableNumberFilterComponent,
       sortable: true,
+      Displayer: DefaultCellDisplayer,
     },
     options,
     {

package/src/components/table/columns/selectColumn.ts

@@ -1,6 +1,7 @@
 import DefaultSelectBroker from '../../select/SelectBroker';
 import { SelectItem, SelectItemAdapter } from '../../select/typings';
 import SelectCellComponent from '../components/cells/SelectCellComponent';
+import DefaultCellDisplayer from '../displayers/DefaultCellDisplayer';
 import { SelectCell, SelectColumn, SelectColumnOptions, TableItem } from '../typings';
 
 const selectColumn = <
@@ -34,6 +35,7 @@ const selectColumn = <
     {
       filterable: false,
       sortable: false,
+      Displayer: DefaultCellDisplayer,
     },
     opts,
     {

package/src/components/table/columns/textColumn.ts

@@ -1,5 +1,6 @@
 import DefaultCellComponent from '../components/cells/DefaultCellComponent';
 import TableTextFilterComponent from '../components/filters/TableTextFilterComponent';
+import DefaultCellDisplayer from '../displayers/DefaultCellDisplayer';
 import { TableColumn, TableColumnOptions, TableItem } from '../typings';
 
 const textColumn = <T = any, I extends TableItem<T> = TableItem<T>>(
@@ -12,6 +13,7 @@ const textColumn = <T = any, I extends TableItem<T> = TableItem<T>>(
       filterable: true,
       FilterComponent: TableTextFilterComponent,
       sortable: true,
+      Displayer: DefaultCellDisplayer,
     },
     options,
     {

package/src/components/table/columns/textareaColumn.ts

@@ -1,4 +1,5 @@
 import TextareaCellComponent from '../components/cells/TextareaCellComponent';
+import DefaultCellDisplayer from '../displayers/DefaultCellDisplayer';
 import { TableItem, TextareaColumn, TextareaColumnOptions } from '../typings';
 
 const textareaColumn = <T = any, I extends TableItem<T> = TableItem<T>>(
@@ -11,6 +12,7 @@ const textareaColumn = <T = any, I extends TableItem<T> = TableItem<T>>(
     {
       filterable: false,
       sortable: false,
+      Displayer: DefaultCellDisplayer,
     },
     options,
     {

package/src/components/table/displayers/DefaultCellDisplayer.tsx

@@ -0,0 +1,29 @@
+import { get, useForm } from 'onekijs-framework';
+import { TableCellDisplayerProps } from '../typings';
+import React from 'react';
+
+const DefaultFormCellDisplayer: React.FC<TableCellDisplayerProps<any>> = (props) => {
+  const form = useForm();
+  if (['form_summary', 'form_summary_table'].includes(props.format)) {
+    if (props.column) {
+      const name = props.column.id ? `${props.rowName}.${props.column.id}` : `${props.rowName}`;
+      const field = form.fields[name];
+      if (props.column.id === 'value') {
+        console.log(field);
+      }
+      if (field && field.Displayer) {
+        const Component = field.Displayer
+        return <Component name={name} label={props.column.id ? props.column.title : ''} Displayer={field.Displayer} children={{}} index={0} first={true} last={true} format={props.format} />
+      }
+    }
+  }
+  if (props.format === 'csv') {
+    const value = get(props.value, props.column.id, '');
+    if (typeof value === 'string') return value;
+    return JSON.stringify(value);
+  }
+
+  return null;
+}
+
+export default DefaultFormCellDisplayer;

package/src/components/table/displayers/FormTableItemDisplayer.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { addClassname } from '../../../utils/style';
+import { FormTableItemDisplayerProps } from '../typings';
+
+const FormTableItemDisplayer: React.FC<FormTableItemDisplayerProps> = ({
+  value,
+  columns,
+  first,
+  last,
+  className,
+  format,
+  name,
+  index,
+}) => {
+  const userColumns = columns.filter((c) => !c.id.startsWith('system.'));
+  const monoColumnTable = userColumns.length === 1 && !userColumns[0].id;
+  const classNames = monoColumnTable
+    ? 'o-form-mono-column-table-item-displayer'
+    : `o-form-table-item-displayer${first ? ' o-form-table-item-displayer-first' : ''}${
+        last ? ' o-form-table-item-displayer-last' : ''
+      }`;
+  return (
+    <div className={addClassname(classNames, className)}>
+      {userColumns.map((column, colIndex) => {
+        const Displayer = column.Displayer;
+        if (Displayer) {
+          return (
+            <Displayer
+              column={column}
+              firstRow={first}
+              lastRow={last}
+              rowIndex={index}
+              firstCol={colIndex === 0}
+              lastCol={colIndex === columns.length - 1}
+              colIndex={colIndex}
+              format={format}
+              value={value}
+              rowName={name}
+              key={`col-${colIndex}`}
+            />
+          );
+        }
+        return null;
+      })}
+    </div>
+  );
+};
+
+export default FormTableItemDisplayer;

package/src/components/table/displayers/FormTableValueDisplayer.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { FormTableValueDisplayerProps } from '../typings';
+import FormTableItemDisplayer from './FormTableItemDisplayer';
+import styled from 'styled-components';
+import { addClassname } from '../../../utils/style';
+import { borderBottomColor, borderBottomStyle, borderBottomWidth } from '../../../styles/border';
+import { paddingBottom, paddingTop, paddingY } from '../../../styles/spacing';
+
+const FormTableValueDisplayer: React.FC<FormTableValueDisplayerProps> = ({ name, columns, value, format, className }) => {
+  if (!Array.isArray(value)) return null;
+  return (
+    <div className={addClassname('o-form-table-displayer-value', className)}>
+      {value.map((v: any, index: number) => (
+        <FormTableItemDisplayer
+          key={`item-${index}`}
+          value={v}
+          columns={columns}
+          first={index === 0}
+          last={index === value.length - 1}
+          format={format === 'csv' ? 'csv' : 'form_summary_table'}
+          name={`${name}.${index}`}
+          index={index}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default styled(FormTableValueDisplayer)`
+  .o-form-table-item-displayer {
+    ${borderBottomColor('primary')}
+    ${borderBottomStyle('solid')}
+    ${borderBottomWidth('1px')}
+    ${paddingY('sm')}
+    &.o-form-table-item-displayer-last{
+      ${paddingBottom(0)}
+      ${borderBottomWidth(0)}
+    }
+    &.o-form-table-item-displayer-first{
+      ${paddingTop(0)}
+    }
+  }
+`;

package/src/components/table/typings.ts

@@ -2,6 +2,7 @@ import {
   Collection,
   CollectionBy,
   CollectionProxy,
+  FormDisplayerProps,
   FormFieldProps,
   Item,
   ItemAdaptee,
@@ -14,6 +15,7 @@ import {
 } from 'onekijs-framework';
 import React, { FC, ReactNode } from 'react';
 import { StylableProps, TshirtSize } from '../../styles/typings';
+import { ButtonProps } from '../button/typings';
 import { CheckboxProps } from '../checkbox/typings';
 import { FieldLayoutProps } from '../field/typings';
 import { InputProps } from '../input/typings';
@@ -21,7 +23,6 @@ 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>;
@@ -40,6 +41,12 @@ export type ControllerTableProps<
   controller: CollectionProxy<T, I, S, C>;
 };
 
+export type FormCellDisplayerProps = {
+  Displayer: React.FC<FormDisplayerProps>;
+  name: string;
+  label?: string;
+};
+
 export type FormTableProps<
   T = any,
   I extends TableItem<T> = TableItem<T>,
@@ -70,6 +77,25 @@ export type FormTableContext<T = any> = {
   minLength?: number;
 };
 
+export type FormTableItemDisplayerProps<T = any> = {
+  value: T;
+  columns: TableColumn<T>[];
+  first: boolean;
+  last: boolean;
+  className?: string;
+  format: FormDisplayerProps['format'];
+  name: string;
+  index: number;
+};
+
+export type FormTableValueDisplayerProps<T = any> = {
+  columns: TableColumn<T>[];
+  value: T[];
+  format: FormDisplayerProps['format'];
+  name: string;
+  className?: string;
+};
+
 export type TableBodyCellProps<T = any, I extends TableItem<T> = TableItem<T>> = {
   className?: string;
   colIndex: number;
@@ -177,9 +203,23 @@ export type TableColumn<T, I extends TableItem<T> = TableItem<T>> = TableColumnS
   computedWidth?: TableColumnComputedWidth;
 };
 
+export type TableCellDisplayerProps<T, I extends TableItem<T> = TableItem<T>> = {
+  column: TableColumn<T, I>;
+  rowIndex: number;
+  colIndex: number;
+  firstCol: boolean;
+  lastCol: boolean;
+  firstRow: boolean;
+  lastRow: boolean;
+  rowName: string;
+  value: T;
+  format: FormDisplayerProps['format'];
+};
+
 export type TableColumnSpec<T, I extends TableItem<T> = TableItem<T>> = {
   className?: string | ((item: I, column: TableColumn<T, I>, rowIndex: number) => string);
   CellComponent?: Cell<T, I>;
+  Displayer?: React.FC<TableCellDisplayerProps<T>>;
   footerClassName?: string | ((column: TableColumn<T, I>) => string);
   FooterComponent?: React.FC<TableFooterCellProps<T, I>>;
   filterable?: boolean;

package/src/components/textarea/FormTextarea.tsx

@@ -1,20 +1,44 @@
+import { FormDisplayerProps, FormFieldValueDisplayerProps, useForm } from 'onekijs-framework';
 import React, { FC } from 'react';
 import Textarea from '.';
+import { titlelize } from '../../utils/misc';
+import FieldDisplayer from '../field/FieldDisplayer';
 import FieldLayout from '../field/FieldLayout';
 import useFieldLayout from '../field/hooks/useFieldLayout';
 import { FormTextareaProps, TextareaProps } from './typings';
 
+const FormTextareaValueDisplayer: React.FC<FormFieldValueDisplayerProps> = ({ value }) => {
+  return (
+    <span className="o-input-displayer-value">
+      {value ? value.split('\n').map((v: string, index: number) => <div key={`line-${index}`}>{v}</div>) : ''}
+    </span>
+  );
+};
+
 const FormTextarea: FC<FormTextareaProps> = React.memo((props) => {
   const [fieldLayoutProps, fieldComponentProps] = useFieldLayout<TextareaProps>(
-    Object.assign(
-      {
-        defaultValue: props.defaultValue === undefined ? '' : props.defaultValue,
-      },
-      props,
-      {
-        isUndefined: (value: any) => value === undefined || value === null,
-      },
-    ),
+    Object.assign({}, props, {
+      isUndefined: (value: any) => value === undefined || value === null,
+      defaultValue: props.defaultValue === undefined ? '' : props.defaultValue,
+      Displayer:
+        props.Displayer === undefined
+          ? (displayerProps: FormDisplayerProps) => {
+              const form = useForm();
+              let value = form.getValue(displayerProps.name) ?? '';
+              const ValueDisplayer = props.ValueDisplayer ?? FormTextareaValueDisplayer;
+              return (
+                <FieldDisplayer
+                  label={displayerProps.label ?? titlelize(displayerProps.name)}
+                  help={props.help}
+                  first={displayerProps.first}
+                  last={displayerProps.last}
+                  value={<ValueDisplayer value={value} />}
+                  format={displayerProps.format}
+                />
+              );
+            }
+          : props.Displayer,
+    }),
   );
   const Component = props.FieldComponent || Textarea;
 

package/src/components/wizard/WizardSummary.tsx

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