diff --git a/scss/components/form/_checks.scss b/scss/components/form/_checks.scss index d8911c73..6df68ece 100644 --- a/scss/components/form/_checks.scss +++ b/scss/components/form/_checks.scss @@ -5,8 +5,10 @@ pointer-events: none; input { - opacity: 0; position: absolute; + clip: rect(1px 1px 1px 1px); + clip: rect(1px, 1px, 1px, 1px); + pointer-events: none; } &:hover input:not(:disabled) + i { @@ -309,3 +311,48 @@ } } } + +.#{$ns}ListCheckboxes { + &-item { + display: flex; + 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; + flex-direction: row; + + > .#{$ns}Checkbox { + margin-right: 0; + } + cursor: pointer; + user-select: none; + + &.is-disabled { + pointer-events: none; + color: $text--muted-color; + } + } + + &-itemLabel { + flex-grow: 1; + } +} + +.#{$ns}TableCheckboxes { + .#{$ns}Table-table > thead > tr > th:first-child, + .#{$ns}Table-table > tbody > tr > td:first-child { + padding-left: px2rem(10px); + padding-right: 0; + } + + .#{$ns}Table-table > thead > tr > th:last-child, + .#{$ns}Table-table > tbody > tr > td:last-child { + padding-right: px2rem(15px); + } + + .#{$ns}Table-table > tbody > tr { + cursor: pointer; + } +} diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx index e6f34f22..bfd35e82 100644 --- a/src/components/Checkbox.tsx +++ b/src/components/Checkbox.tsx @@ -7,6 +7,8 @@ import React from 'react'; import {ClassNamesFn, themeable} from '../theme'; import {autobind} from '../utils/helper'; +const preventEvent = (e: any) => e.stopPropagation(); + interface CheckboxProps { type: 'checkbox' | 'radio'; size?: 'sm' | 'lg' | 'small' | 'large'; @@ -85,6 +87,9 @@ export class Checkbox extends React.Component { : value == trueValue } onChange={this.handleCheck} + onClick={ + preventEvent // 当点击 i 的时候,这个地方也会触发 click,很奇怪,干脆禁掉 + } disabled={disabled} readOnly={readOnly} name={name} diff --git a/src/components/Checkboxes.tsx b/src/components/Checkboxes.tsx index 994bfdf9..2e50ea1a 100644 --- a/src/components/Checkboxes.tsx +++ b/src/components/Checkboxes.tsx @@ -11,9 +11,10 @@ import chunk from 'lodash/chunk'; import {ClassNamesFn, themeable, ThemeProps} from '../theme'; import {Option, value2array, Options} from './Select'; import find from 'lodash/find'; +import { autobind } from '../utils/helper'; // import isPlainObject from 'lodash/isPlainObject'; -interface CheckboxesProps extends ThemeProps { +export interface CheckboxesProps extends ThemeProps { options: Options; className?: string; placeholder?: string; @@ -28,7 +29,7 @@ interface CheckboxesProps extends ThemeProps { disabled?: boolean; } -export class Checkboxes extends React.Component { +export class Checkboxes extends React.Component { static defaultProps = { placeholder: '暂无选项', itemRender: (option: Option) => {option.label} @@ -55,9 +56,14 @@ export class Checkboxes extends React.Component { .filter((item: any) => item); } + @autobind toggleOption(option: Option) { const {value, onChange, option2value, options} = this.props; + if (option.disabled) { + return; + } + let valueArray = Checkboxes.value2array(value, options, option2value); let idx = valueArray.indexOf(option); @@ -74,6 +80,22 @@ export class Checkboxes extends React.Component { onChange?.(newValue); } + @autobind + toggleAll() { + const {value, onChange, option2value, options} = this.props; + let valueArray:Array