checkboxGroup.tsx 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. /* eslint-disable max-len */
  2. import React from 'react';
  3. import PropTypes from 'prop-types';
  4. import classnames from 'classnames';
  5. import { checkboxGroupClasses as css, strings } from '@douyinfe/semi-foundation/checkbox/constants';
  6. import CheckboxGroupFoudation, { CheckboxGroupAdapter } from '@douyinfe/semi-foundation/checkbox/checkboxGroupFoundation';
  7. import BaseComponent from '../_base/baseComponent';
  8. import { Context } from './context';
  9. import { isEqual } from 'lodash-es';
  10. import Checkbox, { CheckboxEvent } from './checkbox';
  11. export type CheckboxDirection = 'horizontal' | 'vertical';
  12. export type CheckboxType = 'default' | 'card' | 'pureCard';
  13. export type CheckboxGroupProps = {
  14. defaultValue?: any[];
  15. disabled?: boolean;
  16. name?: string;
  17. options?: any[];
  18. value?: any[];
  19. onChange?: (value: any[]) => void;
  20. children?: React.ReactNode;
  21. prefixCls?: string;
  22. direction?: CheckboxDirection;
  23. style?: React.CSSProperties;
  24. className?: string;
  25. type?: CheckboxType;
  26. };
  27. export type CheckboxGroupState = {
  28. value?: any[];
  29. };
  30. class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState> {
  31. static propTypes = {
  32. defaultValue: PropTypes.array,
  33. disabled: PropTypes.bool,
  34. name: PropTypes.string,
  35. options: PropTypes.array,
  36. value: PropTypes.array,
  37. onChange: PropTypes.func,
  38. children: PropTypes.node,
  39. prefixCls: PropTypes.string,
  40. direction: PropTypes.oneOf<CheckboxGroupProps['direction']>(strings.DIRECTION_SET),
  41. className: PropTypes.string,
  42. type: PropTypes.oneOf([strings.TYPE_DEFAULT, strings.TYPE_CARD, strings.TYPE_PURECARD]),
  43. style: PropTypes.object,
  44. };
  45. static defaultProps: Partial<CheckboxGroupProps> = {
  46. disabled: false,
  47. // eslint-disable-next-line @typescript-eslint/no-empty-function
  48. onChange: () => {},
  49. type: strings.TYPE_DEFAULT,
  50. defaultValue: [] as any,
  51. direction: strings.DEFAULT_DIRECTION,
  52. };
  53. get adapter(): CheckboxGroupAdapter {
  54. return {
  55. ...super.adapter,
  56. updateGroupValue: value => {
  57. this.setState({ value });
  58. },
  59. notifyChange: evt => {
  60. this.props.onChange && this.props.onChange(evt);
  61. },
  62. };
  63. }
  64. constructor(props: CheckboxGroupProps) {
  65. super(props);
  66. this.state = {
  67. value: props.value || props.defaultValue,
  68. };
  69. this.foundation = new CheckboxGroupFoudation(this.adapter);
  70. this.onChange = this.onChange.bind(this);
  71. }
  72. componentDidMount() {
  73. this.foundation.init();
  74. }
  75. componentDidUpdate(prevProps: CheckboxGroupProps) {
  76. if (!isEqual(prevProps.value, this.props.value)) {
  77. this.foundation.handlePropValueChange(this.props.value);
  78. }
  79. }
  80. componentWillUnmount() {
  81. this.foundation.destroy();
  82. }
  83. onChange(evt: CheckboxEvent) {
  84. this.foundation.handleChange(evt);
  85. }
  86. render() {
  87. const { children, options, prefixCls, direction, className, style, type } = this.props;
  88. const isPureCardType = type === strings.TYPE_PURECARD;
  89. const isCardType = type === strings.TYPE_CARD || isPureCardType;
  90. const prefix = prefixCls || css.PREFIX;
  91. const prefixClsDisplay = classnames({
  92. [prefix as string]: true,
  93. [`${prefix }-wrapper`]: true,
  94. [`${prefix }-${ direction}`]: direction,
  95. [`${prefix}-${direction}-cardType`]: direction && isCardType,
  96. }, className);
  97. const realValue = this.state.value.slice();
  98. let inner;
  99. if (options) {
  100. inner = (options || []).map((option, index) => {
  101. if (typeof option === 'string') {
  102. return (
  103. <Checkbox
  104. key={index}
  105. disabled={this.props.disabled}
  106. value={option}
  107. prefixCls={prefixCls}
  108. >
  109. {option}
  110. </Checkbox>
  111. );
  112. } else {
  113. return (
  114. <Checkbox
  115. key={index}
  116. disabled={option.disabled || this.props.disabled}
  117. value={option.value}
  118. prefixCls={prefixCls}
  119. extra={option.extra}
  120. className={option.className}
  121. style={option.style}
  122. onChange={option.onChange}
  123. >
  124. {option.label}
  125. </Checkbox>
  126. );
  127. }
  128. });
  129. } else if (children) {
  130. inner = (React.Children.toArray(children) as React.ReactElement[]).map((itm, index) => React.cloneElement(itm, { key: index }));
  131. }
  132. return (
  133. <div className={prefixClsDisplay} style={style}>
  134. <Context.Provider
  135. value={{
  136. checkboxGroup: {
  137. onChange: this.onChange,
  138. value: realValue,
  139. disabled: this.props.disabled,
  140. name: this.foundation.getFormatName(),
  141. isCardType,
  142. isPureCardType,
  143. },
  144. }}
  145. >
  146. {inner}
  147. </Context.Provider>
  148. </div>
  149. );
  150. }
  151. }
  152. export default CheckboxGroup;