diff --git a/scss/components/form/_checks.scss b/scss/components/form/_checks.scss index a4bdb4a3..ac7db880 100644 --- a/scss/components/form/_checks.scss +++ b/scss/components/form/_checks.scss @@ -352,6 +352,16 @@ &-itemLabel { flex-grow: 1; } + + &-placeholder { + height: $Form-input-height; + line-height: $Form-input-lineHeight; + font-size: $Form-input-fontSize; + padding: ( + $Form-input-height - $Form-input-lineHeight * $Form-input-fontSize + )/2 $gap-sm; + color: $text--muted-color; + } } .#{$ns}TableCheckboxes { diff --git a/scss/components/form/_transfer.scss b/scss/components/form/_transfer.scss index 0a04c394..1bb86243 100644 --- a/scss/components/form/_transfer.scss +++ b/scss/components/form/_transfer.scss @@ -45,6 +45,14 @@ overflow: auto; } + &-checkboxes .#{$ns}ListCheckboxes-placeholder { + height: 100%; + display: flex; + align-items: center; + text-align: center; + justify-content: center; + } + &-search { padding: $gap-sm; } @@ -57,5 +65,10 @@ &-clearAll { user-select: none; cursor: pointer; + + &.is-disabled { + pointer-events: none; + color: $text--muted-color; + } } } diff --git a/src/components/ListCheckboxes.tsx b/src/components/ListCheckboxes.tsx index df042b6c..283518c1 100644 --- a/src/components/ListCheckboxes.tsx +++ b/src/components/ListCheckboxes.tsx @@ -81,7 +81,11 @@ export class ListCheckboxes extends Checkboxes { return (
- {body && body.length ? body :
{placeholder}
} + {body && body.length ? ( + body + ) : ( +
{placeholder}
+ )}
); } diff --git a/src/components/Transfer.tsx b/src/components/Transfer.tsx index 9ffd604e..0404dd6d 100644 --- a/src/components/Transfer.tsx +++ b/src/components/Transfer.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {ThemeProps, themeable} from '../theme'; import {CheckboxesProps, Checkboxes} from './Checkboxes'; -import {Options} from './Select'; +import {Options, Option} from './Select'; import uncontrollable from 'uncontrollable'; import Selections from './Selections'; import TableCheckboxes from './TableCheckboxes'; @@ -52,7 +52,8 @@ export interface TransferState { export class Transfer extends React.Component { static defaultProps = { selectTitle: '请选择', - resultTitle: '当前选择' + resultTitle: '当前选择', + itemRender: (option: Option) => {option.label} }; state = { @@ -152,7 +153,9 @@ export class Transfer extends React.Component { selectMode, classnames: cx, selectTitle, - onSearch + onSearch, + disabled, + options } = this.props; if (selectRender) { @@ -172,7 +175,13 @@ export class Transfer extends React.Component { {this.availableOptions.length}) {selectMode !== 'table' ? ( - + 全选 ) : null} @@ -296,7 +305,8 @@ export class Transfer extends React.Component { resultTitle, sortable, options, - option2value + option2value, + disabled } = this.props; this.valueArray = Checkboxes.value2array(value, options, option2value); @@ -316,7 +326,13 @@ export class Transfer extends React.Component { {resultTitle}({this.valueArray.length}/ {this.availableOptions.length}) - + 清空 @@ -325,6 +341,7 @@ export class Transfer extends React.Component { sortable={sortable} value={value} onChange={onChange} + placeholder="请先选择左侧数据" /> diff --git a/src/components/index.tsx b/src/components/index.tsx index 53ad6fc9..e64aa3ac 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -39,6 +39,10 @@ import Tooltip from './Tooltip'; import TooltipWrapper from './TooltipWrapper'; import Tree from './Tree'; import Alert2 from './Alert2'; +import Transfer from './Transfer'; +import ListCheckboxes from './ListCheckboxes'; +import TableCheckboxes from './TableCheckboxes'; +import TreeCheckboxes from './TreeCheckboxes'; export { NotFound, @@ -80,5 +84,9 @@ export { toast, Tooltip, TooltipWrapper, - Tree + Tree, + Transfer, + ListCheckboxes, + TableCheckboxes, + TreeCheckboxes }; diff --git a/src/index.tsx b/src/index.tsx index 355908c5..cc11c96a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -27,49 +27,6 @@ import {resizeSensor} from './utils/resize-sensor'; import {setIconVendor} from './renderers/Form/IconPickerIcons'; import {Icon, registerIcon} from './components/icons'; -import { - NotFound, - AlertComponent, - alert, - ContextMenu, - openContextMenus, - Alert2, - confirm, - AsideNav, - Button, - Checkbox, - Checkboxes, - Collapse, - ColorPicker, - DatePicker, - DateRangePicker, - Drawer, - Tabs, - Tab, - // Editor, - Icons, - Html, - Layout, - LazyComponent, - Modal, - Overlay, - PopOver, - Radios, - Range, - Rating, - // RichText, - Select, - Spinner, - Switch, - Textarea, - TitleBar, - ToastComponent, - toast, - Tooltip, - TooltipWrapper, - Tree -} from './components/index'; - // 注册渲染器 import './renderers/Action'; import './renderers/Alert'; @@ -129,6 +86,7 @@ import './renderers/Form/Panel'; import './renderers/Form/Color'; import './renderers/Form/ChainedSelect'; import './renderers/Form/NestedSelect'; +import './renderers/Form/Transfer'; import './renderers/Form/TransferSelect'; import './renderers/Form/Service'; import './renderers/Form/Table'; @@ -203,6 +161,8 @@ import { } from './theme'; const classPrefix = getClassPrefix(); +export * from './components/index'; + export { render, clearStoresCache, @@ -212,46 +172,6 @@ export { wrapFetcher, buildApi, filter, - NotFound, - AlertComponent, - alert, - ContextMenu, - openContextMenus, - Alert2, - confirm, - AsideNav, - Button, - Checkbox, - Checkboxes, - Collapse, - ColorPicker, - DatePicker, - DateRangePicker, - Drawer, - Tabs, - Tab, - // Editor, - Html, - Icons, - Layout, - LazyComponent, - Modal, - Overlay, - PopOver, - Radios, - Range, - Rating, - // RichText, - Select, - Spinner, - Switch, - Textarea, - TitleBar, - ToastComponent, - toast, - Tooltip, - TooltipWrapper, - Tree, // 其他功能类方法 utils, resizeSensor, diff --git a/src/renderers/Form/Transfer.tsx b/src/renderers/Form/Transfer.tsx new file mode 100644 index 00000000..73c26c75 --- /dev/null +++ b/src/renderers/Form/Transfer.tsx @@ -0,0 +1,72 @@ +import {OptionsControlProps, OptionsControl} from './Options'; +import React from 'react'; +import Transfer from '../../components/Transfer'; +import {Option} from './Options'; +import {autobind} from '../../utils/helper'; +import {Api} from '../../types'; + +export interface TransferProps extends OptionsControlProps { + sortable?: boolean; + selectMode?: 'table' | 'list' | 'tree'; + columns?: Array; + searchApi?: Api; // todo 通过传递进去 onSearch 实现。 +} + +@OptionsControl({ + type: 'transfer' +}) +export class TransferRenderer extends React.Component { + @autobind + handleChange(value: Array