@zohodesk/library-platform 1.0.0-exp.3 → 1.0.0-exp.5

package/es/library/dot/components/table-list/adapters/presenters/TableTranslator.js

@@ -1,32 +1,52 @@
 class TableTranslator {
   static translate(state) {
+    var _state;
+
+    const {
+      data,
+      selectionConfig
+    } = state.properties;
+    const {
+      sortBy,
+      selection
+    } = (_state = state) === null || _state === void 0 ? void 0 : _state.behaviours;
+    const headers = TableTranslator.translateHeaders(data.headers, sortBy);
+    const rows = TableTranslator.translateRows(data.rows, selection, selectionConfig);
     state = { ...state,
       properties: { ...state.properties,
-        data: { ...state.properties.data,
-          headers: state.properties.data.headers.map(header => {
-            var _state, _state$behaviours, _state$behaviours$sor, _state2, _state2$behaviours, _state2$behaviours$so;
-
-            const sortOrder = ((_state = state) === null || _state === void 0 ? void 0 : (_state$behaviours = _state.behaviours) === null || _state$behaviours === void 0 ? void 0 : (_state$behaviours$sor = _state$behaviours.sortBy) === null || _state$behaviours$sor === void 0 ? void 0 : _state$behaviours$sor.id) === header.id ? (_state2 = state) === null || _state2 === void 0 ? void 0 : (_state2$behaviours = _state2.behaviours) === null || _state2$behaviours === void 0 ? void 0 : (_state2$behaviours$so = _state2$behaviours.sortBy) === null || _state2$behaviours$so === void 0 ? void 0 : _state2$behaviours$so.order : 'none';
-            return { ...header,
-              sortOrder,
-              sortTooltip: sortOrder === 'none' ? '' : sortOrder === 'ascending' ? 'Click to Sort Descending' : 'Click to Sort Ascending'
-            };
-          }),
-          rows: state.properties.data.rows.map((row, index) => {
-            var _state3, _state3$behaviours, _state3$behaviours$se, _state4, _state4$behaviours, _state4$behaviours$se, _state5, _state5$behaviours, _state5$behaviours$se, _state6, _state6$behaviours, _state6$behaviours$se, _state7, _state7$behaviours, _state7$behaviours$se;
-
-            return { ...row,
-              isSelected: (_state3 = state) === null || _state3 === void 0 ? void 0 : (_state3$behaviours = _state3.behaviours) === null || _state3$behaviours === void 0 ? void 0 : (_state3$behaviours$se = _state3$behaviours.selection) === null || _state3$behaviours$se === void 0 ? void 0 : _state3$behaviours$se.selected.includes(row.id),
-              isSelectable: ((_state4 = state) === null || _state4 === void 0 ? void 0 : (_state4$behaviours = _state4.behaviours) === null || _state4$behaviours === void 0 ? void 0 : (_state4$behaviours$se = _state4$behaviours.selection) === null || _state4$behaviours$se === void 0 ? void 0 : _state4$behaviours$se.selected.includes(row.id)) || !((_state5 = state) !== null && _state5 !== void 0 && (_state5$behaviours = _state5.behaviours) !== null && _state5$behaviours !== void 0 && (_state5$behaviours$se = _state5$behaviours.selection) !== null && _state5$behaviours$se !== void 0 && _state5$behaviours$se.hasAllSelected),
-              selectionTooltip: !((_state6 = state) !== null && _state6 !== void 0 && (_state6$behaviours = _state6.behaviours) !== null && _state6$behaviours !== void 0 && (_state6$behaviours$se = _state6$behaviours.selection) !== null && _state6$behaviours$se !== void 0 && _state6$behaviours$se.selected.includes(row.id)) && (_state7 = state) !== null && _state7 !== void 0 && (_state7$behaviours = _state7.behaviours) !== null && _state7$behaviours !== void 0 && (_state7$behaviours$se = _state7$behaviours.selection) !== null && _state7$behaviours$se !== void 0 && _state7$behaviours$se.hasAllSelected ? state.properties.selectionConfig.limitExceedAlertMessage : `Record ${index + 1}`
-            };
-          })
+        data: { ...data,
+          headers,
+          rows
         }
       }
     };
     return state;
   }
 
+  static translateHeaders(headers, sortBy) {
+    return headers.map(header => {
+      const sortOrder = (sortBy === null || sortBy === void 0 ? void 0 : sortBy.id) === header.id ? sortBy === null || sortBy === void 0 ? void 0 : sortBy.order : 'none';
+      return { ...header,
+        sortOrder,
+        sortTooltip: sortOrder === 'none' ? '' : sortOrder === 'ascending' ? 'Click to Sort Descending' : 'Click to Sort Ascending'
+      };
+    });
+  }
+
+  static translateRows(rows, selection, selectionConfig) {
+    const {
+      selected,
+      hasAllSelected
+    } = selection;
+    return rows.map((row, index) => {
+      return { ...row,
+        isSelected: selected.includes(row.id),
+        isSelectable: selected.includes(row.id) || !hasAllSelected,
+        selectionTooltip: !selected.includes(row.id) && hasAllSelected ? selectionConfig.limitExceedAlertMessage : `Record ${index + 1}`
+      };
+    });
+  }
+
 }
 
 export default TableTranslator;

package/es/library/dot/components/table-list/frameworks/ui/EventHandlersFactory.js

@@ -6,24 +6,15 @@ import RowClickController from "../../adapters/controllers/RowClickController";
 
 class EventHandlersFactory {
   static create() {
-    const controller = {
-      listSelectItem: new SelectItemController().handle,
-      listSelectAll: new SelectAllController().handle,
-      scroll: new ScrollController().handle,
-      sortBy: new SortByController().handle,
-      sorted: new SortedController().handle,
-      fieldChange: new FieldChangeController().handle,
-      fieldClick: new FieldClickController().handle
-    };
     return {
       [TableRowConstants.TABLE_ROW_CLICKED]: new RowClickController().handle,
-      [TableListConstants.TABLE_LIST_TOGGLE_ITEM_SELECTION]: controller.listSelectItem,
-      [TableListConstants.TABLE_LIST_TOGGLE_ALL_SELECTION]: controller.listSelectAll,
-      [TableListConstants.TABLE_LIST_SCROLLED]: controller.scroll,
-      [TableListConstants.TABLE_LIST_SORTED]: controller.sortBy,
-      [SORTBY_SORTED]: controller.sorted,
-      [TableRowConstants.TABLE_ROW_FIELD_CHANGED]: controller.fieldChange,
-      [TableRowConstants.TABLE_ROW_FIELD_CLICKED]: controller.fieldClick
+      [TableListConstants.TABLE_LIST_TOGGLE_ITEM_SELECTION]: new SelectItemController().handle,
+      [TableListConstants.TABLE_LIST_TOGGLE_ALL_SELECTION]: new SelectAllController().handle,
+      [TableListConstants.TABLE_LIST_SCROLLED]: new ScrollController().handle,
+      [TableListConstants.TABLE_LIST_SORTED]: new SortByController().handle,
+      [SORTBY_SORTED]: new SortedController().handle,
+      [TableRowConstants.TABLE_ROW_FIELD_CHANGED]: new FieldChangeController().handle,
+      [TableRowConstants.TABLE_ROW_FIELD_CLICKED]: new FieldClickController().handle
     };
   }
 

package/es/library/dot/components/table-list/frameworks/ui/TableList.js

@@ -9,12 +9,7 @@ const TableList = createCustomComponent({
   name: 'TableList',
   View: TableListView,
   properties: TableListProperties,
-  setInitialState: _ref => {
-    let {
-      properties
-    } = _ref;
-    return {};
-  },
+  setInitialState: () => ({}),
   transformState: TableTranslator.translate,
   eventHandlers: EventHandlersFactory.create(),
   behaviours: [ListItemSelectionBehaviourFactory.create(), SortByBehaviourFactory.create(), {

package/es/library/dot/components/table-list/frameworks/ui/TableListView.js

@@ -24,9 +24,7 @@ function TableListView(_ref2, _ref) {
     resizerConfig,
     selectionConfig,
     isFlexibleColumns,
-    hasRowActions
-  } = state.properties;
-  const {
+    hasRowActions,
     emptyStateUiType
   } = state.properties;
   const {
@@ -37,20 +35,55 @@ function TableListView(_ref2, _ref) {
     headers,
     rows
   } = data;
-  const hasRows = rows.length > 0; // Will be adopted with properties
+  const hasRows = rows.length > 0; // TODO: derive from state.properties
 
-  const isDataEmpty = !hasRows && !isLoading; // Will be adopted with properties
+  const isDataEmpty = !hasRows && !isLoading; // TODO: derive from state.properties
 
   return /*#__PURE__*/React.createElement("div", {
     className: style.wrapper,
     ref: _ref
   }, /*#__PURE__*/React.createElement(Table, {
-    $event_onScroll: e => {
-      handleScroll(dispatch, {
-        scrollEvent: e
-      });
-    }
-  }, /*#__PURE__*/React.createElement(Header, {
+    $event_onScroll: e => handleScroll(dispatch, {
+      scrollEvent: e
+    })
+  }, renderHeader({
+    headers,
+    resizerConfig,
+    resizerState,
+    selectionConfig,
+    selection,
+    isFlexibleColumns,
+    hasRowActions,
+    dispatch
+  }), renderBody({
+    headers,
+    rows,
+    isFlexibleColumns,
+    selectionConfig,
+    resizerState,
+    hasRowActions,
+    hasRows
+  }), /*#__PURE__*/React.createElement(NoData, {
+    isDataEmpty: isDataEmpty,
+    emptyStateUiType: emptyStateUiType
+  }), /*#__PURE__*/React.createElement(Loading, {
+    isLoading: isLoading,
+    hasRows: hasRows
+  })), renderColumnResizingLine(resizerState));
+}
+
+function renderHeader(_ref3) {
+  let {
+    headers,
+    resizerConfig,
+    resizerState,
+    selectionConfig,
+    selection,
+    isFlexibleColumns,
+    hasRowActions,
+    dispatch
+  } = _ref3;
+  return /*#__PURE__*/React.createElement(Header, {
     isSelectionEnabled: selectionConfig.isEnabled,
     hasAllSelected: selection.hasAllSelected,
     isResizerEnabled: resizerConfig.isEnabled,
@@ -62,7 +95,20 @@ function TableListView(_ref2, _ref) {
     hasRowActions: hasRowActions,
     headers: headers,
     dispatch: dispatch
-  }), /*#__PURE__*/React.createElement(Body, {
+  });
+}
+
+function renderBody(_ref4) {
+  let {
+    headers,
+    rows,
+    isFlexibleColumns,
+    selectionConfig,
+    resizerState,
+    hasRowActions,
+    hasRows
+  } = _ref4;
+  return /*#__PURE__*/React.createElement(Body, {
     hasRows: hasRows,
     isFlexibleColumns: isFlexibleColumns
   }, /*#__PURE__*/React.createElement(Rows, {
@@ -72,18 +118,16 @@ function TableListView(_ref2, _ref) {
     isSelectionEnabled: selectionConfig.isEnabled,
     resizedColumnsWidth: resizerState.resizedColumnsWidth,
     hasRowActions: hasRowActions
-  })), /*#__PURE__*/React.createElement(NoData, {
-    isDataEmpty: isDataEmpty,
-    emptyStateUiType: emptyStateUiType
-  }), /*#__PURE__*/React.createElement(Loading, {
-    isLoading: isLoading,
-    hasRows: hasRows
-  })), /*#__PURE__*/React.createElement(ColumnResizingLine, {
+  }));
+}
+
+function renderColumnResizingLine(resizerState) {
+  return /*#__PURE__*/React.createElement(ColumnResizingLine, {
     isCurrentlyResizing: resizerState.isCurrentlyResizing,
     initialPosition: resizerState.initialPosition,
     resizedPosition: resizerState.resizedPosition,
     tooltip: resizerState.tooltip
-  }));
+  });
 }
 
 export default TableListView;

package/es/library/dot/components/table-list/frameworks/ui/sub-components/Header.js

@@ -22,28 +22,43 @@ function Header(_ref) {
 
   if (headers.length <= 0) {
     return null;
-  } // TODO: Will be adopted with properties
-
+  }
 
   return /*#__PURE__*/React.createElement(TableHeader, {
     $flag_padding: !isSelectionEnabled
-  }, /*#__PURE__*/React.createElement(SelectAll, {
+  }, renderSelectAll(isSelectionEnabled, hasAllSelected, dispatch), renderHeaders(headers, resizedColumnsWidth, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth));
+}
+
+function renderSelectAll(isSelectionEnabled, hasAllSelected, dispatch) {
+  return /*#__PURE__*/React.createElement(SelectAll, {
     isSelectionEnabled: isSelectionEnabled,
     hasAllSelected: hasAllSelected,
     dispatch: dispatch
-  }), /*#__PURE__*/React.createElement(Headers, {
+  });
+}
+
+function renderHeaders(headers, resizedColumnsWidth, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch) {
+  return /*#__PURE__*/React.createElement(Headers, {
     headers: headers,
     resizedColumnsWidth: resizedColumnsWidth,
     currentlyResizingColumn: currentlyResizingColumn,
     isResizerEnabled: isResizerEnabled,
     isFlexibleColumns: isFlexibleColumns,
     dispatch: dispatch
-  }), /*#__PURE__*/React.createElement(ActionColumn, {
+  });
+}
+
+function renderActionColumn(hasRowActions) {
+  return /*#__PURE__*/React.createElement(ActionColumn, {
     hasRowActions: hasRowActions
-  }), /*#__PURE__*/React.createElement(ResizerExtraSpace, {
+  });
+}
+
+function renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth) {
+  return /*#__PURE__*/React.createElement(ResizerExtraSpace, {
     isCurrentlyResizing: isCurrentlyResizing,
     extraWidth: resizerExtraWidth
-  }));
+  });
 }
 
 export default Header;

package/es/library/dot/components/table-list/frameworks/ui/sub-components/NoData.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Flex from '@zohodesk/layout/es/Flex/Flex';
-import CommonEmptyState from "../../../../../legacy-to-new-arch/common-empty-state/CommonEmptyState"; // @ts-ignore
+import CommonEmptyState from "../../../../../legacy-to-new-arch/common-empty-state/CommonEmptyState";
+/* @ts-ignore */
 
 import style from "../css/TableList.module.css";
 import ComponentRegistry from "../../../../../../custom-component/frameworks/ui/ComponentRegistry";
@@ -11,6 +12,7 @@ export default function NoData(_ref) {
   } = _ref;
 
   if (isDataEmpty) {
+    /* eslint-disable-next-line @zohodesk/architecturerules/no-defaultProps-rule */
     const EmptyState = ComponentRegistry.get(emptyStateUiType) || CommonEmptyState;
     return /*#__PURE__*/React.createElement(Flex, {
       $ui_displayMode: "flex",

package/es/library/dot/components/table-list/frameworks/ui/sub-components/Rows.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Row from "./row/Row";
-const emptyArray = [];
+const emptyArray = Object.freeze([]);
 const emptyObject = {};
 
 function Rows(_ref) {
@@ -12,38 +12,44 @@ function Rows(_ref) {
     resizedColumnsWidth,
     hasRowActions
   } = _ref;
-  return rows.map((row, index) => {
-    const {
-      id,
-      columns,
-      isSelected,
-      isSelectable,
-      selectionTooltip,
-      clickAction,
-      rowActions
-    } = row;
-    const updatedColumns = columns.map((column, index) => {
-      return {
-        size: headers[index].size,
-        field: column,
-        alignment: headers[index].alignment
-      };
-    });
-    return /*#__PURE__*/React.createElement(Row, {
-      key: index,
-      id: id,
-      columns: updatedColumns || emptyArray,
-      clickAction: clickAction || emptyObject,
-      rowActions: rowActions || emptyArray,
-      isSelected: isSelected,
-      isSelectable: isSelectable,
-      selectionTooltip: selectionTooltip,
-      isFlexibleColumns: isFlexibleColumns,
-      isSelectionEnabled: isSelectionEnabled,
-      resizedColumnsWidth: resizedColumnsWidth,
-      hasActions: hasRowActions
-    });
-  });
+  return rows.map((row, index) => /*#__PURE__*/React.createElement(Row, {
+    key: index,
+    ...getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, resizedColumnsWidth, hasRowActions)
+  }));
+}
+
+function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, resizedColumnsWidth, hasRowActions) {
+  const {
+    id,
+    columns,
+    isSelected,
+    isSelectable,
+    selectionTooltip,
+    clickAction,
+    rowActions
+  } = row;
+  const updatedColumns = getUpdatedColumns(columns, headers);
+  return {
+    id,
+    columns: updatedColumns || emptyArray,
+    clickAction: clickAction || emptyObject,
+    rowActions: rowActions || emptyArray,
+    isSelected,
+    isSelectable,
+    selectionTooltip,
+    isFlexibleColumns,
+    isSelectionEnabled,
+    resizedColumnsWidth,
+    hasActions: hasRowActions
+  };
+}
+
+function getUpdatedColumns(columns, headers) {
+  return columns.map((column, index) => ({
+    size: headers[index].size,
+    field: column,
+    alignment: headers[index].alignment
+  }));
 }
 
 export default Rows;

package/es/library/dot/components/table-list/frameworks/ui/sub-components/field/FieldComponent.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import * as FieldComponents from "../../../../../../legacy-to-new-arch/field-components";
+import FieldComponents from "../../../../../../legacy-to-new-arch/table-field-components";
 import ComponentRegistry from "../../../../../../../custom-component/frameworks/ui/ComponentRegistry";
 
 const FieldComponent = props => {
@@ -7,6 +7,8 @@ const FieldComponent = props => {
     type,
     fieldProps
   } = props;
+  /* eslint-disable-next-line @zohodesk/architecturerules/no-defaultProps-rule */
+
   const Component = FieldComponents[type] || ComponentRegistry.get(type);
 
   if (!Component) {

package/es/library/dot/components/table-list/frameworks/ui/sub-components/header/Headers.js

@@ -15,9 +15,9 @@ function Headers(_ref) {
       sortOrder,
       sortTooltip
     } = header;
-    let isResizing = currentlyResizingColumn === header.id; // Will be adopted with properties
+    let isResizing = currentlyResizingColumn === header.id; // TODO: To be adopted with properties
 
-    let resizedWidth = resizedColumnsWidth[header.id]; // Will be adopted with properties
+    let resizedWidth = resizedColumnsWidth[header.id]; // TODO: To be adopted with properties
 
     return /*#__PURE__*/React.createElement(HeaderData, {
       key: index,

package/es/library/dot/components/table-list/frameworks/ui/sub-components/row/Row.js

@@ -41,22 +41,67 @@ function RowView(_ref, ref) {
         id
       }
     })
-  }, /*#__PURE__*/React.createElement(RowSelection, {
+  }, renderRowSelection({
+    isSelectionEnabled,
+    id,
+    selectionTooltip,
+    isSelected,
+    isSelectable,
+    dispatch
+  }), renderColumns({
+    columns,
+    resizedColumnsWidth,
+    isFlexibleColumns
+  }), renderRowActions({
+    hasActions,
+    rowActions,
+    dispatch
+  }));
+}
+
+function renderRowSelection(_ref2) {
+  let {
+    isSelectionEnabled,
+    id,
+    selectionTooltip,
+    isSelected,
+    isSelectable,
+    dispatch
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(RowSelection, {
     isSelectionEnabled: isSelectionEnabled,
     id: id,
     tooltip: selectionTooltip,
     selected: isSelected,
     selectable: isSelectable,
     dispatch: dispatch
-  }), /*#__PURE__*/React.createElement(Columns, {
+  });
+}
+
+function renderColumns(_ref3) {
+  let {
+    columns,
+    resizedColumnsWidth,
+    isFlexibleColumns
+  } = _ref3;
+  return /*#__PURE__*/React.createElement(Columns, {
     data: columns,
     resizedColumnsWidth: resizedColumnsWidth,
     isFlexibleColumns: isFlexibleColumns
-  }), /*#__PURE__*/React.createElement(RowActions, {
+  });
+}
+
+function renderRowActions(_ref4) {
+  let {
+    hasActions,
+    rowActions,
+    dispatch
+  } = _ref4;
+  return /*#__PURE__*/React.createElement(RowActions, {
     hasActions: hasActions,
     actions: rowActions,
     dispatch: dispatch
-  }));
+  });
 }
 
 const Row = createCustomComponent({

package/es/library/dot/legacy-to-new-arch/avatar/frameworks/ui/AvatarView.js

@@ -1,7 +1,39 @@
 import React from "react";
 import Avatar from "@zohodesk/components/es/Avatar/Avatar";
 import LabeledAvatar from "@zohodesk-private/desk-components/es/table/LabeledAvatar/LabeledAvatar";
-import { AvatarConstants } from "../../../../../../cc"; // Have to tryout some better implementation to return components logic
+import { AvatarConstants } from "../../../../../../cc";
+
+const renderLabeledAvatar = (imageSrc, label, name, tooltip, ref, dispatch) => /*#__PURE__*/React.createElement(LabeledAvatar, {
+  $data_avatarUrl: imageSrc,
+  $data_text: label,
+  $data_avatarName: name,
+  $i18n_avatarTooltip: tooltip,
+  $customProps_container: {
+    ref,
+    onClick: () => {
+      dispatch({
+        type: AvatarConstants.AVATAR_CLICKED
+      });
+    }
+  }
+});
+
+const renderAvatar = (imageSrc, name, tooltip, size, ref, dispatch) => /*#__PURE__*/React.createElement(Avatar, {
+  customProps: {
+    AvatarProps: {
+      ref
+    }
+  },
+  src: imageSrc,
+  name: name,
+  title: tooltip,
+  size: size,
+  onClick: () => {
+    dispatch({
+      type: AvatarConstants.AVATAR_CLICKED
+    });
+  }
+});
 
 function AvatarView(_ref, ref) {
   let {
@@ -20,38 +52,10 @@ function AvatarView(_ref, ref) {
   } = state.properties;
 
   if (!!label) {
-    return /*#__PURE__*/React.createElement(LabeledAvatar, {
-      $data_avatarUrl: imageSrc,
-      $data_text: label,
-      $data_avatarName: name,
-      $i18n_avatarTooltip: tooltip,
-      $customProps_container: {
-        ref,
-        onClick: () => {
-          dispatch({
-            type: AvatarConstants.AVATAR_CLICKED
-          });
-        }
-      }
-    });
+    return renderLabeledAvatar(imageSrc, label, name, tooltip, ref, dispatch);
   }
 
-  return /*#__PURE__*/React.createElement(Avatar, {
-    customProps: {
-      AvatarProps: {
-        ref
-      }
-    },
-    src: imageSrc,
-    name: name,
-    title: tooltip,
-    size: size,
-    onClick: () => {
-      dispatch({
-        type: AvatarConstants.AVATAR_CLICKED
-      });
-    }
-  });
+  return renderAvatar(imageSrc, name, tooltip, size, ref, dispatch);
 }
 
 export default AvatarView;

package/es/library/dot/legacy-to-new-arch/email/frameworks/ui/EmailView.js

@@ -1,5 +1,5 @@
-import React from "react";
-import TableEmail from "@zohodesk-private/desk-components/es/table/TableEmail/TableEmail";
+import React from 'react';
+import TableEmail from '@zohodesk-private/desk-components/es/table/TableEmail/TableEmail';
 import { EmailConstants } from "../../../../../../cc";
 
 function EmailView(_ref, ref) {

package/es/library/dot/legacy-to-new-arch/table-field-components/checkbox-field/frameworks/ui/CheckboxField.js

@@ -0,0 +1,13 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import BooleanProperties from "../../../../../../../cc/fields/boolean/Properties";
+import BooleanEvents from "../../../../../../../cc/fields/boolean/Events";
+import CheckboxFieldView from "./CheckboxFieldView";
+import { EventHandlersFactory } from "./EventHandlersFactory";
+const CheckboxField = createCustomComponent({
+  name: 'CheckboxField',
+  View: CheckboxFieldView,
+  properties: BooleanProperties,
+  events: BooleanEvents,
+  eventHandlers: EventHandlersFactory.create()
+});
+export default CheckboxField;

package/es/library/dot/legacy-to-new-arch/table-field-components/checkbox-field/frameworks/ui/CheckboxFieldView.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Checkbox } from "../../../..";
+export default function CheckboxFieldView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    value
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Checkbox, {
+    getRef: ref,
+    checked: value,
+    disabled: false,
+    readonly: false,
+    label: "",
+    tooltip: ""
+  });
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/checkbox-field/frameworks/ui/EventHandlersFactory.js

@@ -0,0 +1,29 @@
+import CheckboxConstants from "../../../../../../../cc/checkbox/Constants";
+import FieldConstants from "../../../../../../../cc/fields/field/Constants";
+export class EventHandlersFactory {
+  static create() {
+    const changeHandler = input => {
+      const {
+        state,
+        dispatch
+      } = input;
+      const {
+        name: fieldName,
+        value: currentValue
+      } = state.properties;
+      const toggledValue = !currentValue;
+      dispatch({
+        type: FieldConstants.FIELD_CHANGED,
+        payload: {
+          fieldName,
+          value: toggledValue
+        }
+      });
+    };
+
+    return {
+      [CheckboxConstants.CHECKBOX_TOGGLED]: changeHandler
+    };
+  }
+
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/currency-field/frameworks/ui/CurrencyField.js

@@ -0,0 +1,14 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import CurrencyProperties from "../../../../../../../cc/fields/currency/Properties";
+import CurrencyEvents from "../../../../../../../cc/fields/currency/Events";
+import TextToFieldClickBehaviourFactory from "../../../../../../behaviours/text-to-field-click/frameworks/ui/TextToFieldClickBehaviourFactory";
+import { CurrencyFieldView } from "./CurrencyFieldView";
+const CurrencyField = createCustomComponent({
+  name: 'CurrencyField',
+  View: CurrencyFieldView,
+  properties: CurrencyProperties,
+  behaviours: [TextToFieldClickBehaviourFactory.create()],
+  events: CurrencyEvents,
+  eventHandlers: {}
+});
+export default CurrencyField;