-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
18 changed files
with
714 additions
and
112 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| import FormRender from './FormRender' | ||
| export { cij } from './cssinjs' | ||
|
|
||
| export default FormRender | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
59 changes: 59 additions & 0 deletions
59
packages/search-table-react/src/components/ColumnSettingContent/index.column.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { HolderOutlined } from '@ant-design/icons' | ||
| import { Button, InputNumber, Switch } from 'antd' | ||
| import type { ReactNode } from 'react' | ||
|
|
||
| interface IColumn { | ||
| title: string | ||
| dataIndex: string | ||
| width: number | ||
| render?: (value: any, onChange: (val: any) => void) => ReactNode | ||
| algin?: 'center' | ||
| } | ||
|
|
||
| const columns: IColumn[] = [ | ||
| { | ||
| title: '列名称', | ||
| dataIndex: 'name', | ||
| width: 200, | ||
| }, | ||
| { | ||
| title: '隐藏列', | ||
| dataIndex: 'hidden', | ||
| width: 90, | ||
| render: (value: boolean, onChange) => { | ||
| return <Switch checked={value} onChange={onChange} /> | ||
| }, | ||
| }, | ||
| { | ||
| title: '宽度', | ||
| dataIndex: 'width', | ||
| width: 90, | ||
| render: (value: number, onChange) => { | ||
| return ( | ||
| <InputNumber | ||
| min={1} | ||
| value={value} | ||
| onChange={(val) => { | ||
| val ? onChange(val) : undefined | ||
| }} | ||
| /> | ||
| ) | ||
| }, | ||
| }, | ||
| { | ||
| title: '排序', | ||
| dataIndex: 'sort', | ||
| width: 50, | ||
| algin: 'center', | ||
| render: () => ( | ||
| <Button | ||
| type="text" | ||
| size="small" | ||
| icon={<HolderOutlined />} | ||
| style={{ cursor: 'move' }} | ||
| /> | ||
| ), | ||
| }, | ||
| ] | ||
|
|
||
| export default columns |
68 changes: 68 additions & 0 deletions
68
packages/search-table-react/src/components/ColumnSettingContent/index.style.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import { cij } from '@schema-render/form-render-react' | ||
|
|
||
| export const header = cij` | ||
| display: flex; | ||
| padding: 12px 0; | ||
| border-bottom: 1px solid #f0f0f0; | ||
| background: #fafafa; | ||
| border-radius: 8px 8px 0 0; | ||
| font-weight: bold; | ||
| ` | ||
|
|
||
| export const list = cij` | ||
| max-height: calc(100vh - 260px); | ||
| overflow: auto; | ||
| &::-webkit-scrollbar { | ||
| width: 6px; | ||
| } | ||
| &::-webkit-scrollbar-thumb { | ||
| background: #ccc; | ||
| border-radius: 6px; | ||
| } | ||
| &::-webkit-scrollbar-thumb:hover { | ||
| background: #999; | ||
| } | ||
| ` | ||
|
|
||
| export const rowWrapper = cij` | ||
| border-top: 1px solid #f0f0f0; | ||
| &:first-of-type { | ||
| border-top: none; | ||
| } | ||
| ` | ||
|
|
||
| export const rowWrapperOverlay = cij` | ||
| background-color: #fff; | ||
| transform: scale(1.05); | ||
| border: 1px solid #f0f0f0; | ||
| border-radius: 8px; | ||
| transition: 200ms ease-out; | ||
| ` | ||
|
|
||
| export const row = cij` | ||
| display: flex; | ||
| padding: 8px 0; | ||
| background-color: #fff; | ||
| &:hover { | ||
| background-color: #fafafa; | ||
| } | ||
| ` | ||
|
|
||
| export const col = cij` | ||
| flex-grow: 1; | ||
| display: flex; | ||
| align-items: center; | ||
| padding: 0 12px; | ||
| word-break: break-all; | ||
| ` | ||
|
|
||
| export const footer = cij` | ||
| text-align: right; | ||
| padding-top: 12px; | ||
| border-top: 1px solid #f0f0f0; | ||
| ` |
135 changes: 135 additions & 0 deletions
135
packages/search-table-react/src/components/ColumnSettingContent/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| import { useMemoizedFn } from '@schema-render/core-react' | ||
| import { Button, Space } from 'antd' | ||
| import type { FC } from 'react' | ||
| import { useState } from 'react' | ||
|
|
||
| import type { IColumnType } from '../../typings/table' | ||
| import Sortable from '../Sortable' | ||
| import columns from './index.column' | ||
| import * as styles from './index.style' | ||
|
|
||
| export interface IColumnSettingContentProps { | ||
| sortColumns: IColumnType<any>[] | ||
| defaultColumns: IColumnType<any>[] | ||
| onOk?: (newSortColumns: IColumnType<any>[]) => void | ||
| } | ||
|
|
||
| function createInitialDataSource(columns: IColumnType<any>[]) { | ||
| return columns.map((item) => ({ | ||
| id: String(item.dataIndex), | ||
| name: item.title, | ||
| hidden: item.hidden, | ||
| width: item.width, | ||
| })) | ||
| } | ||
|
|
||
| const ColumnSettingContent: FC<IColumnSettingContentProps> = ({ | ||
| defaultColumns, | ||
| sortColumns, | ||
| onOk, | ||
| }) => { | ||
| const [dataSource, setDataSource] = useState(() => createInitialDataSource(sortColumns)) | ||
|
|
||
| // 配置数据变更事件 | ||
| const handleChange = useMemoizedFn( | ||
| (index: number, dataKey: keyof (typeof dataSource)[0], newValue: any) => { | ||
| ;(dataSource as any)[index][dataKey] = newValue | ||
| setDataSource([...dataSource]) | ||
| } | ||
| ) | ||
|
|
||
| // 排序事件 | ||
| const handleSortChange = useMemoizedFn((newDataSource: typeof dataSource) => { | ||
| setDataSource(newDataSource) | ||
| }) | ||
|
|
||
| // 重置本次排序 | ||
| const handleResetCurrentSetting = useMemoizedFn(() => { | ||
| setDataSource(createInitialDataSource(sortColumns)) | ||
| }) | ||
|
|
||
| // 恢复默认排序 | ||
| const handleRestoreDefaultSetting = useMemoizedFn(() => { | ||
| setDataSource(createInitialDataSource(defaultColumns)) | ||
| }) | ||
|
|
||
| // 配置完成事件 | ||
| const handleOk = useMemoizedFn(() => { | ||
| const newSortColumns: IColumnType<any>[] = [] | ||
| dataSource.forEach(({ id, width, hidden }) => { | ||
| const col = defaultColumns.find((item) => String(item.dataIndex) === id) | ||
| if (col) { | ||
| newSortColumns.push({ | ||
| ...col, | ||
| width, | ||
| hidden, | ||
| }) | ||
| } | ||
| }) | ||
| onOk?.(newSortColumns) | ||
| }) | ||
|
|
||
| return ( | ||
| <> | ||
| <div className={styles.header}> | ||
| {columns.map((col, i) => ( | ||
| <div | ||
| className={styles.col} | ||
| style={{ width: col.width, justifyContent: col.algin }} | ||
| key={i} | ||
| > | ||
| {col.title} | ||
| </div> | ||
| ))} | ||
| </div> | ||
|
|
||
| <div className={styles.list}> | ||
| <Sortable | ||
| items={dataSource} | ||
| onChange={handleSortChange} | ||
| itemClassName={styles.rowWrapper} | ||
| overlayClassName={styles.rowWrapperOverlay} | ||
| renderItem={(item, rowIndex, sortCtx) => { | ||
| return ( | ||
| <div className={styles.row} key={rowIndex}> | ||
| {columns.map((col, colIndex) => { | ||
| const val = item[col.dataIndex as keyof typeof item] | ||
|
|
||
| // 排序手柄 | ||
| const listeners = col.dataIndex === 'sort' ? sortCtx?.listeners : {} | ||
|
|
||
| return ( | ||
| <div | ||
| className={styles.col} | ||
| style={{ width: col.width, justifyContent: col.algin }} | ||
| key={`${rowIndex}${colIndex}`} | ||
| {...listeners} | ||
| > | ||
| {col.render | ||
| ? col.render(val as never, (newValue) => | ||
| handleChange(rowIndex, col.dataIndex as never, newValue) | ||
| ) | ||
| : val} | ||
| </div> | ||
| ) | ||
| })} | ||
| </div> | ||
| ) | ||
| }} | ||
| /> | ||
| </div> | ||
|
|
||
| <div className={styles.footer}> | ||
| <Space> | ||
| <Button onClick={handleRestoreDefaultSetting}>恢复默认设置</Button> | ||
| <Button onClick={handleResetCurrentSetting}>重置本次设置</Button> | ||
| <Button type="primary" onClick={handleOk}> | ||
| 确定 | ||
| </Button> | ||
| </Space> | ||
| </div> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default ColumnSettingContent |
Oops, something went wrong.