checkboxFoundation.ts 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. import BaseFoundation, { DefaultAdapter, noopFunction } from '../base/foundation';
  2. import isEnterPress from '../utils/isEnterPress';
  3. export interface BasicTargetObject {
  4. [x: string]: any;
  5. checked?: boolean;
  6. }
  7. export interface BasicCheckboxEvent {
  8. target: BasicTargetObject;
  9. stopPropagation: () => void;
  10. preventDefault: () => void;
  11. nativeEvent: {
  12. stopImmediatePropagation: () => void;
  13. }
  14. }
  15. export interface CheckboxAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
  16. getIsInGroup: () => boolean;
  17. getGroupValue: () => any[];
  18. notifyGroupChange: (event: BasicCheckboxEvent) => void;
  19. getGroupDisabled: () => boolean;
  20. setNativeControlChecked: (checked: boolean) => void;
  21. getState: noopFunction;
  22. notifyChange: (event: BasicCheckboxEvent) => void;
  23. setAddonId: () => void;
  24. setExtraId: () => void;
  25. }
  26. class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CheckboxAdapter<P, S>, P, S> {
  27. constructor(adapter: CheckboxAdapter<P, S>) {
  28. super({ ...adapter });
  29. }
  30. init() {
  31. const { children, extra, extraId, addonId } = this.getProps();
  32. if (children && !addonId) {
  33. this._adapter.setAddonId();
  34. }
  35. if (extra && !extraId) {
  36. this._adapter.setExtraId();
  37. }
  38. }
  39. getEvent(checked: boolean, e: any) {
  40. const props = this.getProps();
  41. const cbValue = {
  42. target: {
  43. ...props,
  44. checked,
  45. },
  46. stopPropagation: () => {
  47. e.stopPropagation();
  48. },
  49. preventDefault: () => {
  50. e.preventDefault();
  51. },
  52. nativeEvent: {
  53. stopImmediatePropagation: () => {
  54. if (e.nativeEvent && typeof e.nativeEvent.stopImmediatePropagation === 'function') {
  55. e.nativeEvent.stopImmediatePropagation();
  56. }
  57. }
  58. },
  59. };
  60. return cbValue;
  61. }
  62. notifyChange(checked: boolean, e: any) {
  63. const cbValue = this.getEvent(checked, e);
  64. this._adapter.notifyChange(cbValue);
  65. }
  66. handleChange(e: any) {
  67. const disabled = this.getProp('disabled');
  68. if (disabled) {
  69. return;
  70. }
  71. const isInGroup = this._adapter.getIsInGroup();
  72. if (isInGroup) {
  73. const groupDisabled = this._adapter.getGroupDisabled();
  74. if (!groupDisabled) {
  75. this.handleChangeInGroup(e);
  76. }
  77. return;
  78. }
  79. const checked = this.getState('checked');
  80. const newChecked = !checked;
  81. if (this._isControlledComponent('checked')) {
  82. this.notifyChange(newChecked, e);
  83. } else {
  84. this.setChecked(newChecked);
  85. this.notifyChange(newChecked, e);
  86. }
  87. }
  88. handleChangeInGroup(e: any) {
  89. const { value } = this.getProps();
  90. const groupValue = this._adapter.getGroupValue();
  91. const checked = groupValue.includes(value);
  92. const newChecked = !checked;
  93. const event = this.getEvent(newChecked, e);
  94. this._adapter.notifyChange(event);
  95. this._adapter.notifyGroupChange(event);
  96. }
  97. handleEnterPress(e: any) {
  98. if (isEnterPress(e)) {
  99. this.handleChange(e);
  100. }
  101. }
  102. setChecked(checked: boolean) {
  103. this._adapter.setNativeControlChecked(checked);
  104. }
  105. // eslint-disable-next-line @typescript-eslint/no-empty-function
  106. destroy() {}
  107. }
  108. export interface BaseCheckboxProps {
  109. id?: string;
  110. autoFocus?: boolean;
  111. checked?: boolean;
  112. defaultChecked?: boolean;
  113. disabled?: boolean;
  114. indeterminate?: boolean;
  115. onChange?: (e: BasicCheckboxEvent) => any;
  116. value?: any;
  117. style?: Record<string, any>;
  118. className?: string;
  119. prefixCls?: string;
  120. onMouseEnter?: (e: any) => void;
  121. onMouseLeave?: (e: any) => void;
  122. extra?: any;
  123. addonId?: string;
  124. extraId?: string;
  125. }
  126. export default CheckboxFoundation;