优化 picker 样式
This commit is contained in:
liaoxuezhi
parent
7904d0c89d
commit
355e2b384a
|
|
@ -1352,3 +1352,10 @@ $Carousel--dark-control: black !default;
|
|||
$Carousel-transitionDuration: 0.3s !default;
|
||||
$Carousel-imageTitle-bottom: px2rem(45px) !default;
|
||||
$Carousel-imageDescription-bottom: px2rem(25px) !default;
|
||||
|
||||
// Picker
|
||||
$Picker-iconColor: $gray600 !default;
|
||||
$Picker-onHover-iconColor: darken($Picker-iconColor, 10%) !default;
|
||||
$Picker-btn-vendor: "FontAwesome" !default;
|
||||
$Picker-btn-fontSize: $Form-fontSize !default;
|
||||
$Picker-btn-icon: "\f2d2" !default;
|
||||
|
|
@ -1,17 +1,55 @@
|
|||
.#{$ns}Picker {
|
||||
&-values {
|
||||
display: inline-block;
|
||||
margin-top: -$gap-xs;
|
||||
padding: (
|
||||
$Form-input-height - $Form-input-lineHeight *
|
||||
$Form-input-fontSize - px2rem(2px)
|
||||
)/2 0;
|
||||
@include input-text();
|
||||
outline: none;
|
||||
|
||||
&.is-focus > &-input {
|
||||
border-color: $Form-input-onFocused-borderColor;
|
||||
box-shadow: $Form-input-boxShadow;
|
||||
|
||||
@if $Form-input-onFocused-bg !=$Form-input-bg {
|
||||
background-color: $Form-input-onFocused-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&-value {
|
||||
&-placeholder {
|
||||
color: $Form-input-placeholderColor;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
// margin-top: 2 * $Form-input-borderWidth;
|
||||
line-height: $Form-input-lineHeight;
|
||||
}
|
||||
|
||||
&-input {
|
||||
min-height: $Form-input-height;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.#{$ns}Picker-values {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
&-valueWrap {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
|
||||
> input {
|
||||
width: 1rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Picker-valueWrap {
|
||||
margin-bottom: -$gap-xs;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.#{$ns}Picker-value {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
line-height: $Form-input-lineHeight * $Form-input-fontSize -
|
||||
px2rem(2px);
|
||||
display: inline-block;
|
||||
font-size: $Form-selectValue-fontSize;
|
||||
color: $Form-selectValue-color;
|
||||
|
|
@ -19,11 +57,7 @@
|
|||
border: px2rem(1px) solid $Form-selectValue-borderColor;
|
||||
border-radius: 2px;
|
||||
margin-right: $gap-xs;
|
||||
margin-top: $gap-xs;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($Form-selectValue-bg, 5%);
|
||||
}
|
||||
margin-bottom: $gap-xs;
|
||||
|
||||
&.is-disabled {
|
||||
pointer-events: none;
|
||||
|
|
@ -31,7 +65,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-valueIcon {
|
||||
.#{$ns}Picker-valueIcon {
|
||||
cursor: pointer;
|
||||
border-right: px2rem(1px) solid $Form-selectValue-borderColor;
|
||||
padding: 1px 5px;
|
||||
|
|
@ -41,9 +75,34 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-valueLabel {
|
||||
.#{$ns}Picker-valueLabel {
|
||||
padding: 0 $gap-xs;
|
||||
}
|
||||
|
||||
&-btn {
|
||||
cursor: pointer;
|
||||
color: $Picker-iconColor;
|
||||
|
||||
&:hover {
|
||||
color: $Picker-onHover-iconColor;
|
||||
}
|
||||
|
||||
&:before {
|
||||
line-height: 1;
|
||||
color: inherit;
|
||||
content: $Picker-btn-icon;
|
||||
display: inline-block;
|
||||
font-size: $Picker-btn-fontSize;
|
||||
font-family: $Picker-btn-vendor;
|
||||
}
|
||||
}
|
||||
|
||||
&-clear {
|
||||
display: inline-block;
|
||||
@include input-clear();
|
||||
line-height: 1;
|
||||
margin-right: $gap-xs;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}PickerControl {
|
||||
|
|
|
|||
|
|
@ -12,10 +12,11 @@ import {
|
|||
Action
|
||||
} from '../../types';
|
||||
import find = require('lodash/find');
|
||||
import {anyChanged, autobind, getVariable} from '../../utils/helper';
|
||||
import {anyChanged, autobind, getVariable, noop} from '../../utils/helper';
|
||||
import findIndex = require('lodash/findIndex');
|
||||
import Html from '../../components/Html';
|
||||
import { filter } from '../../utils/tpl';
|
||||
import { closeIcon } from '../../components/icons';
|
||||
|
||||
export interface PickerProps extends OptionsControlProps {
|
||||
modalMode: 'dialog' | 'drawer';
|
||||
|
|
@ -25,6 +26,7 @@ export interface PickerProps extends OptionsControlProps {
|
|||
|
||||
export interface PickerState {
|
||||
isOpened: boolean;
|
||||
isFocused: boolean;
|
||||
schema: SchemaNode;
|
||||
};
|
||||
|
||||
|
|
@ -39,6 +41,7 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
|
|||
"inline",
|
||||
"multiple",
|
||||
"embed",
|
||||
"resetValue"
|
||||
];
|
||||
static defaultProps: Partial<PickerProps> = {
|
||||
modalMode: 'dialog',
|
||||
|
|
@ -54,9 +57,12 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
|
|||
|
||||
state: PickerState = {
|
||||
isOpened: false,
|
||||
schema: this.buildSchema(this.props)
|
||||
schema: this.buildSchema(this.props),
|
||||
isFocused: false
|
||||
};
|
||||
|
||||
input: React.RefObject<HTMLInputElement> = React.createRef();
|
||||
|
||||
componentWillReceiveProps(nextProps: PickerProps) {
|
||||
const props = this.props;
|
||||
|
||||
|
|
@ -169,6 +175,46 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
|
|||
onChange(value);
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleKeyPress(e:React.KeyboardEvent) {
|
||||
const selectedOptions = this.props.selectedOptions;
|
||||
|
||||
if (e.key === ' ') {
|
||||
this.open();
|
||||
} else if (selectedOptions.length && e.key == "Backspace") {
|
||||
this.removeItem(selectedOptions.length - 1);
|
||||
}
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleFocus() {
|
||||
this.setState({
|
||||
isFocused: true
|
||||
});
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleBlur() {
|
||||
this.setState({
|
||||
isFocused: false
|
||||
});
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleClick() {
|
||||
this.input.current && this.input.current.focus();
|
||||
}
|
||||
|
||||
@autobind
|
||||
clearValue() {
|
||||
const {
|
||||
onChange,
|
||||
resetValue
|
||||
} = this.props;
|
||||
|
||||
onChange(resetValue !== void 0 ? resetValue : '')
|
||||
}
|
||||
|
||||
renderValues() {
|
||||
const {
|
||||
classPrefix: ns,
|
||||
|
|
@ -218,38 +264,54 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
|
|||
render() {
|
||||
const {
|
||||
className,
|
||||
classPrefix: ns,
|
||||
classnames: cx,
|
||||
disabled,
|
||||
render,
|
||||
modalMode,
|
||||
source,
|
||||
size,
|
||||
env,
|
||||
embed
|
||||
clearable,
|
||||
multiple,
|
||||
inline,
|
||||
embed,
|
||||
value
|
||||
} = this.props;
|
||||
return (
|
||||
<div className={cx(`${ns}PickerControl`, className)}>
|
||||
<div className={cx(`PickerControl`, className)}>
|
||||
{embed ? (
|
||||
<div className={`${ns}Picker`}>
|
||||
<div className={cx('Picker')}>
|
||||
{this.renderBody()}
|
||||
</div>
|
||||
) : (
|
||||
<div className={`${ns}Picker`}>
|
||||
{this.renderValues()}
|
||||
<div
|
||||
className={cx(`Picker`, {
|
||||
'Picker--inline': inline,
|
||||
'Picker--single': !multiple,
|
||||
'Picker--multi': multiple,
|
||||
'is-focused': this.state.isFocused,
|
||||
'is-disabled': disabled
|
||||
})}
|
||||
>
|
||||
<div onClick={this.handleClick} className={cx('Picker-input')}>
|
||||
<div className={cx('Picker-valueWrap')}>
|
||||
{this.renderValues()}
|
||||
|
||||
<input
|
||||
onChange={noop}
|
||||
value={''}
|
||||
ref={this.input}
|
||||
onKeyPress={this.handleKeyPress}
|
||||
onFocus={this.handleFocus}
|
||||
onBlur={this.handleBlur}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{clearable && !disabled && value && value.length ? (<a onClick={this.clearValue} className={`${ns}TreeSelect-clear`}>{closeIcon}</a>) : null}
|
||||
|
||||
<span onClick={this.open} className={cx('Picker-btn')}></span>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
classPrefix={ns}
|
||||
className={`${ns}Picker-pickBtn`}
|
||||
tooltip="点击选择"
|
||||
tooltipContainer={env && env.getModalContainer ? env.getModalContainer() : undefined}
|
||||
level="info"
|
||||
size="sm"
|
||||
disabled={disabled}
|
||||
onClick={this.open}
|
||||
iconOnly
|
||||
>
|
||||
选定
|
||||
</Button>
|
||||
|
||||
{render('modal', {
|
||||
title: '请选择',
|
||||
|
|
@ -266,6 +328,38 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
|
|||
show: this.state.isOpened
|
||||
})}
|
||||
</div>
|
||||
// <div className={`${ns}Picker`}>
|
||||
// {this.renderValues()}
|
||||
|
||||
// <Button
|
||||
// classPrefix={ns}
|
||||
// className={`${ns}Picker-pickBtn`}
|
||||
// tooltip="点击选择"
|
||||
// tooltipContainer={env && env.getModalContainer ? env.getModalContainer() : undefined}
|
||||
// level="info"
|
||||
// size="sm"
|
||||
// disabled={disabled}
|
||||
// onClick={this.open}
|
||||
// iconOnly
|
||||
// >
|
||||
// 选定
|
||||
// </Button>
|
||||
|
||||
// {render('modal', {
|
||||
// title: '请选择',
|
||||
// size: size,
|
||||
// type: modalMode,
|
||||
// body: {
|
||||
// children: this.renderBody
|
||||
// }
|
||||
// }, {
|
||||
// key: 'modal',
|
||||
// lazyRender: !!source,
|
||||
// onConfirm: this.handleModalConfirm,
|
||||
// onClose: this.close,
|
||||
// show: this.state.isOpened
|
||||
// })}
|
||||
// </div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue