release 2.1.0 (#451)

* feat: optimize fonts rendering on windows (#385)

* feat(styles): set Inter to highest font

* docs(fonts): add guide for fonts rendering on windows

* test: udpate snapshots

* chore: release v2.1.0-canary.0

* feat(table): add update row action to Table (#378)

* feat: add update to Table's actions. add test and doc

fix(table): fix comments

* feat(table): improve type for table actions

chore: update docs

chore: remove unused types

chore(table): improve docs

Co-authored-by: William Castandet <williamcastandet@williams-air.home>
Co-authored-by: unix <unix.bio@gmail.com>

* refactor(use-theme): move use-theme to the top directory (#397)

* refactor(use-theme): move use-theme to the top directory

* chore(jest): ignore use-theme of forwarding

* chore: release v2.1.0-canary.1

* feat(select): add clearable option to select multiple with test and english doc (#396)

* docs: add clearable option to select multiple with test and english doc

* fix: fix types for onClear

* fix: fix import path for use-theme

add more test for coverage

* docs(select): add chinese document

Co-authored-by: unix <unix.bio@gmail.com>

* chore: release v2.1.0-canary.2

* fix(tabs): scrollable (#404)

docs(tabs): scroll behavior

* feat(textarea): resize prop (#416)

* feat: add resize prop to textarea

* docs: add resize prop for textarea

* docs(textarea): improve docs and attributes for cn

* test(textarea): update snapshots

Co-authored-by: unix <unix.bio@gmail.com>

* fix(types): replace path aliases in type files (#432)

* fix(types): replace path aliases in type files

* chore(lint): upgrade eslint and optimize code style

* chore: fix type error for context handler

* test: update snapshots

* fix: use ttsc to identify aliases in type paths

* feat(hooks): add a tool hooks for react context (#439)

* feat(hooks): add a tool hooks for react context

* chore: move use-context-state to internal tools

style: fix lint warning

* chore: simplify the structure of the catalog

* refactor(themes): refactor theme module to keep multiple themes (#440)

* refactor(themes): refactor theme module to keep multiple themes

* chore: migrate APIs to be compatible with new theme system

* test: update snapshots

* chore: migrate the path of the theme module

* feat(themes): append static methods of themes

* chore: hide custom theme when no custom content in the context

* chore: manually add flush to preload styles in html

* docs(themes): update to fit the new theme system

* chore: release v2.1.0-canary.3 (#450)

* docs: add link to GH discussions

* chore: upgrade deps

* chore: update code style for prettier

* chore: release v2.1.0-canary.3

* chore(deps): upgrade babel

* chore: replace enzyme adapter with community repo to fit react.17

* test: updatee snapshots for auto typesetting

* test(config): ignore unexported parts of the tools

Co-authored-by: William <wcastand@gmail.com>
Co-authored-by: William Castandet <williamcastandet@williams-air.home>
Co-authored-by: Vaibhav Acharya <vaibhavacharya111@gmail.com>
Co-authored-by: Paul van Dyk <39598117+PaulPCIO@users.noreply.github.com>

components/table/__tests__/index.test.tsx

@@ -117,6 +117,31 @@ describe('Table', () => {
     expect(() => wrapper.unmount()).not.toThrow()
   })
 
+  it('should be possible to update the row', () => {
+    const operation = (actions: cellActions) => {
+      return (
+        <button
+          onClick={() =>
+            actions.update({ property: 'test', description: 'test', operation })
+          }>
+          Update
+        </button>
+      )
+    }
+    const data = [{ property: 'bold', description: 'boolean', operation }]
+    const wrapper = mount(
+      <Table data={data}>
+        <Table.Column prop="property" label="property" />
+        <Table.Column prop="description" label="description" />
+        <Table.Column prop="operation" label="operation" />
+      </Table>,
+    )
+    expect(wrapper.find('tbody').find('tr').length).toBe(1)
+    wrapper.find('tbody').find('button').simulate('click')
+    expect(wrapper.find('tbody').find('tr').find('td').first().text()).toContain('test')
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
   it('should render emptyText when data missing', () => {
     const data = [{ property: 'bold', description: 'boolean' }]
     const wrapper = mount(
@@ -134,7 +159,11 @@ describe('Table', () => {
     const cellHandler = jest.fn()
     const data = [{ property: 'bold', description: 'boolean' }]
     const wrapper = mount(
-      <Table data={data} emptyText="test-not-found" onRow={rowHandler} onCell={cellHandler}>
+      <Table
+        data={data}
+        emptyText="test-not-found"
+        onRow={rowHandler}
+        onCell={cellHandler}>
         <Table.Column prop="property" label="property" />
         <Table.Column prop="description" label="description" />
       </Table>,

components/table/table-body.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import withDefaults from '../utils/with-defaults'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import TableCell from './table-cell'
 import { useTableContext } from './table-context'
 
@@ -20,17 +20,13 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type TableBodyProps = Props & typeof defaultProps & NativeAttrs
 
-export type cellActions = {
-  remove: Function
-}
-
-export type cellData = {
-  row: number
-  column: number
-  value: any
-}
-
-const TableBody: React.FC<TableBodyProps> = ({ data, hover, emptyText, onRow, onCell }) => {
+const TableBody: React.FC<TableBodyProps> = ({
+  data,
+  hover,
+  emptyText,
+  onRow,
+  onCell,
+}) => {
   const theme = useTheme()
   const { columns } = useTableContext()
   const rowClickHandler = (row: any, index: number) => {

components/table/table-cell.tsx

@@ -9,19 +9,32 @@ interface Props {
   onCellClick: (cell: any, rowIndex: number, colunmIndex: number) => void
 }
 
-export type cellActions = {
-  remove: Function
-}
-
-export type cellData = {
+export type TableCellData = {
   row: number
   column: number
   rowValue: any
 }
 
-const TableCell: React.FC<Props> = ({ columns, row, rowIndex, emptyText, onCellClick }) => {
-  const { removeRow } = useTableContext()
-  const actions: cellActions = {
+export type TableCellActionRemove = () => void
+export type TableCellActionUpdate = (data: any) => void
+export type TableCellActions = {
+  update: TableCellActionUpdate
+  remove: TableCellActionRemove
+}
+export type TableOperation = (fn: TableCellActions, rowData: any) => any
+
+const TableCell: React.FC<Props> = ({
+  columns,
+  row,
+  rowIndex,
+  emptyText,
+  onCellClick,
+}) => {
+  const { removeRow, updateRow } = useTableContext()
+  const actions: TableCellActions = {
+    update: data => {
+      updateRow && updateRow(rowIndex, data)
+    },
     remove: () => {
       removeRow && removeRow(rowIndex)
     },
@@ -30,7 +43,7 @@ const TableCell: React.FC<Props> = ({ columns, row, rowIndex, emptyText, onCellC
   return (
     <>
       {columns.map((column, index) => {
-        const data: cellData = {
+        const data: TableCellData = {
           row: rowIndex,
           column: index,
           rowValue: row,

components/table/table-context.ts

@@ -10,6 +10,7 @@ export interface TableConfig {
   columns: Array<TableColumnItem>
   updateColumn?: (column: TableColumnItem) => void
   removeRow?: (rowIndex: number) => void
+  updateRow?: (rowIndex: number, newData: any) => void
 }
 
 const defaultContext = {
@@ -18,4 +19,5 @@ const defaultContext = {
 
 export const TableContext = React.createContext<TableConfig>(defaultContext)
 
-export const useTableContext = (): TableConfig => React.useContext<TableConfig>(TableContext)
+export const useTableContext = (): TableConfig =>
+  React.useContext<TableConfig>(TableContext)

components/table/table-head.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 import withDefaults from '../utils/with-defaults'
-import useTheme from '../styles/use-theme'
+import useTheme from '../use-theme'
 import { TableColumnItem } from './table-context'
 
 interface Props {

components/table/table.tsx

@@ -6,13 +6,17 @@ import useRealShape from '../utils/use-real-shape'
 import useResize from '../utils/use-resize'
 import { TableContext, TableColumnItem, TableConfig } from './table-context'
 import useCurrentState from '../utils/use-current-state'
+import { TableOperation } from './table-cell'
 
 export type TableOnRow = (row: any, index: number) => void
 export type TableOnCell = (cell: any, index: number, colunm: number) => void
 export type TableOnChange = (data: any) => void
+export type TableDataSource<T extends { [key: string]: any }> = T & {
+  operation?: TableOperation
+}
 
 interface Props {
-  data?: Array<any>
+  data?: Array<TableDataSource<any>>
   emptyText?: string
   hover?: boolean
   onRow: TableOnRow
@@ -47,7 +51,9 @@ const Table: React.FC<React.PropsWithChildren<TableProps>> = ({
   const ref = useRef<HTMLTableElement>(null)
   const [{ width }, updateShape] = useRealShape<HTMLTableElement>(ref)
   const [columns, setColumns] = useState<Array<TableColumnItem>>([])
-  const [selfData, setSelfData, dataRef] = useCurrentState<Array<TableColumnItem>>([])
+  const [selfData, setSelfData, dataRef] = useCurrentState<Array<TableDataSource<any>>>(
+    [],
+  )
   const updateColumn = (column: TableColumnItem) => {
     setColumns(last => {
       const hasColumn = last.find(item => item.value === column.value)
@@ -63,12 +69,20 @@ const Table: React.FC<React.PropsWithChildren<TableProps>> = ({
     onChange(next)
     setSelfData([...next])
   }
+  const updateRow = (rowIndex: number, newData: any) => {
+    const next = dataRef.current.map((data, index) =>
+      index === rowIndex ? { ...data, ...newData } : data,
+    )
+    onChange(next)
+    setSelfData([...next])
+  }
 
   const initialValue = useMemo<TableConfig>(
     () => ({
       columns,
       updateColumn,
       removeRow,
+      updateRow,
     }),
     [columns],
   )