@douyinfe/semi-foundation 2.1.1 → 2.1.5

package/lib/cjs/checkbox/checkbox.scss

@@ -0,0 +1,387 @@
+//@import '../theme/variables.scss';
+// @import '../theme/mixin.scss';
+@import "./variables.scss";
+@import "./mixin.scss";
+
+$module: #{$prefix}-checkbox;
+
+.#{$module} {
+    @include box-sizing;
+    // box-sizing: border-box;
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    @include font-size-regular;
+    cursor: pointer;
+
+    input[type="checkbox"] {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        opacity: 0;
+    }
+
+    &-addon {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        padding-left: $spacing-checkbox_label-paddingLeft;
+        color: $color-checkbox_label-text-default;
+        line-height: $font-checkbox_label-lineHeight;
+        user-select: none;
+    }
+
+    &:hover {
+        .#{$module}-inner-display {
+            background: $color-checkbox_default-bg-hover;
+            box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-hover;
+        }
+
+        .#{$module}-inner-checked {
+            .#{$module}-inner-display {
+                background: $color-checkbox_checked-bg-hover;
+                box-shadow: none;
+            }
+        }
+    }
+
+    &:active {
+        .#{$module}-inner-display {
+            background: $color-checkbox_default-bg-active;
+        }
+
+        .#{$module}-inner-checked {
+            .#{$module}-inner-display {
+                background: $color-checkbox_checked-bg-active;
+                box-shadow: none;
+            }
+        }
+    }
+
+    &.#{$module}-disabled:hover,
+    &.#{$module}-disabled:active {
+        .#{$module}-inner-display {
+            background: $color-checkbox_disabled-bg-default;
+            box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_disabled-border-default;
+        }
+
+        .#{$module}-inner-checked {
+            .#{$module}-inner-display {
+                background: $color-checkbox_checked-bg-disabled;
+                box-shadow: none;
+            }
+        }
+    }
+
+    &-inner {
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: $width-checkbox_inner;
+        height: $height-checkbox_inner;
+        user-select: none; // prevent text under it will be selected when double click
+        cursor: pointer;
+
+        &-display {
+            @include box-sizing;
+            position: relative;
+            width: $width-checkbox_inner;
+            height: $width-checkbox_inner;
+            margin: 0;
+            background: $color-checkbox_default-bg-default;
+
+            box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-default;
+            border-radius: $radius-checkbox_inner;
+
+            .#{$prefix}-icon {
+                font-size: 16px;
+            }
+        }
+
+        &-pureCardType {
+            display: none;
+        }
+    }
+
+    &-inner-checked {
+        .#{$module}-inner-display {
+            background: $color-checkbox_checked-bg-default;
+            color: $color-checkbox_checked-icon-default;
+
+            box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_checked-border-default;
+            border-radius: $radius-checkbox_inner;
+        }
+
+        & > .#{$module}-addon {
+            color: $color-checkbox_label-text-default;
+        }
+    }
+
+    &:hover {
+        .#{$module}-inner-display {
+            background: $color-checkbox_default-bg-hover;
+        }
+
+        &.#{$module}-indeterminate .#{$module}-inner-display {
+            background: $color-checkbox_checked-bg-hover;
+            box-shadow: none;
+            color: $color-checkbox_checked-icon-hover;
+        }
+
+        .#{$module}-inner-checked {
+            .#{$module}-inner-display {
+                background: $color-checkbox_checked-bg-hover;
+                border-color: $color-checkbox_checked-border-hover;
+                color: $color-checkbox_checked-icon-hover;
+            }
+        }
+
+        &.#{$module}-cardType.#{$module}-unChecked.#{$module}-cardType_unDisabled {
+            .#{$module}-inner-display {
+                background: $color-checkbox_cardType_inner-bg-hover;
+            }
+        }
+    }
+
+    &:active {
+        .#{$module}-inner-display {
+            background: $color-checkbox_default-bg-active;
+        }
+
+        &.#{$module}-indeterminate .#{$module}-inner-display {
+            background: $color-checkbox_checked-bg-active;
+            border-color: $color-checkbox_checked-border-active;
+            color: $color-checkbox_checked-icon-active;
+            box-shadow: none;
+        }
+
+        .#{$module}-inner-checked {
+            .#{$module}-inner-display {
+                background: $color-checkbox_checked-bg-active;
+                border-color: $color-checkbox_checked-border-active;
+                color: $color-checkbox_checked-icon-active;
+            }
+        }
+
+        &.#{$module}-cardType.#{$module}-unChecked.#{$module}-cardType_unDisabled {
+            .#{$module}-inner-display {
+                background: $color-checkbox_cardType_inner-bg-active;
+            }
+        }
+    }
+
+    &-cardType {
+        flex-wrap: nowrap;
+        align-items: flex-start;
+        border-radius: $radius-checkbox_cardType;
+        padding: $spacing-checkbox_cardType-paddingY $spacing-checkbox_cardType-paddingX;
+        background: transparent;
+        border: $width-checkbox_cardType_checked-border solid transparent;
+
+        .#{$module}-inner {
+            position: relative;
+            &-display {
+                background: $color-checkbox_cardType_inner-bg-default;
+            }
+            margin-right: $spacing-checkbox_cardType_inner-marginRight;
+            flex-shrink: 0;
+        }
+
+        .#{$module}-addon {
+            font-weight: $font-checkbox_cardType_addon-fontWeight;
+            font-size: $font-checkbox_cardType_addon-size;
+            line-height: $font-checkbox_cardType_addon-lineHeight;
+            color: $color-checkbox_cardType_addon-text-default;
+            margin-left: 0;
+            padding-left: 0;
+        }
+
+        .#{$module}-extra {
+            font-weight: $font-checkbox_cardType_extra-fontWeight;
+            font-size: $font-checkbox_cardType_extra-size;
+            line-height: $font-checkbox_cardType_extra-lineHeight;
+            color: $color-checkbox_cardType_extra-text-default;
+            padding-left: 0;
+
+            &.#{$module}-cardType_extra_noChildren {
+                margin-top: 0;
+            }
+        }
+
+        &:hover {
+            background: $color-checkbox_cardType-bg-hover;
+        }
+
+        &:active {
+            background: $color-checkbox_cardType-bg-active;
+        }
+
+        &_checked {
+            background: $color-checkbox_cardType_checked-bg;
+            border: $width-checkbox_cardType_checked-border solid $color-checkbox_cardType_checked_border-default;
+
+            &:hover {
+                background: $color-checkbox_cardType_checked-bg;
+                border-color: $color-checkbox_cardType_checked_border-hover;
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    box-shadow: none;
+                }
+            }
+
+            &:active {
+                background: $color-checkbox_cardType_checked-bg;
+                border-color: $color-checkbox_cardType_checked_border-active;
+            }
+        }
+
+        &_disabled {
+            &:active {
+                background: transparent;
+            }
+            &:hover {
+                background: transparent;
+            }
+        }
+
+        &_checked_disabled.#{$module}-cardType  {
+            background: $color-checkbox_cardType_checked_disabled-bg;
+            border: $width-checkbox_cardType_checked_disabled-border solid $color-checkbox_cardType_checked_disabled_border-default;
+
+            &:hover {
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    box-shadow: none;
+                }
+            }
+        }
+    }
+
+    &-indeterminate,
+    &-checked {
+        .#{$module}-inner {
+
+            &-display {
+                background: $color-checkbox_checked-bg-default;
+                color: $color-checkbox_checked-icon-default;
+
+                box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_checked-border-default;
+                border-radius: $radius-checkbox_inner;
+
+                &:hover {
+                    background: $color-checkbox_checked-bg-hover;
+                    border-color: $color-checkbox_checked-border-hover;
+                    color: $color-checkbox_checked-icon-hover;
+                }
+
+                &:active {
+                    background: $color-checkbox_checked-bg-active;
+                    border-color: $color-checkbox_checked-border-active;
+                    color: $color-checkbox_checked-icon-active;
+                }
+            }
+
+            &-addon {
+                color: $color-checkbox_label-text-default;
+            }
+        }
+    }
+
+    &-disabled {
+        cursor: not-allowed;
+
+        .#{$module}-inner {
+            cursor: not-allowed;
+
+            &-display {
+                color: $color-checkbox_checked-icon-disabled;
+                background: $color-checkbox_disabled-bg-default;
+                box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_disabled-border-default;
+
+                &:hover {
+                    color: $color-checkbox_checked-icon-disabled;
+                    background: transparent;
+                }
+            }
+
+            &-checked {
+                color: $color-checkbox_checked-icon-disabled;
+
+                .#{$module}-inner-display {
+                    opacity: 0.75;
+                    background: $color-checkbox_checked-bg-disabled;
+                    box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_checked-bg-disabled;
+
+                    &:hover {
+                        color: $color-checkbox_checked-icon-disabled;
+                        background: $color-checkbox_checked-bg-disabled;
+                    }
+                }
+            }
+        }
+
+        .#{$module}-addon {
+            color: $color-checkbox_label-text-disabled;
+        }
+
+        .#{$module}-extra {
+            color: $color-checkbox_label-text-disabled;
+        }
+    }
+
+    &.#{$module}-disabled.#{$module}-indeterminate .#{$module}-inner-display {
+        opacity: 0.75;
+        background: $color-checkbox_checked-bg-disabled;
+        box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_checked-bg-disabled;
+        color: $color-checkbox_checked-icon-disabled;
+    }
+
+    &-extra {
+        flex-shrink: 0;
+        flex-grow: 1;
+        flex-basis: 100%;
+        box-sizing: border-box;
+        padding-left: $spacing-checkbox_extra-paddingLeft;
+        color: $color-checkbox_extra-text-default;
+        margin-top: $spacing-checkbox_extra-marginTop;
+    }
+}
+
+.#{$module}Group {
+    @include font-size-regular;
+    // make sure group height 32px
+    line-height: $font-size-regular;
+    .#{$module} {
+        &.#{$module}-vertical {
+            margin-bottom: $spacing-checkbox_group_vertical-marginBottom;
+        }
+    }
+
+    &-horizontal {
+        .#{$module} {
+            margin-right: $spacing-checkbox_group_horizontal-marginRight;
+            display: inline-flex;
+            &:last-of-type {
+                margin-right: 0;
+            }
+        }
+    }
+
+    &-vertical {
+        .#{$module} {
+            margin-bottom: $spacing-checkbox_group_vertical_item-marginBottom;
+            &:last-of-type {
+                margin-bottom: 0;
+            }
+        }
+        &-cardType {
+            .#{$module} {
+                margin-bottom: $spacing-checkbox_card_group_vertical-marginBottom;
+            }
+        }
+    }
+}
+
+@import "./rtl.scss";

package/lib/cjs/checkbox/checkboxFoundation.d.ts

@@ -0,0 +1,56 @@
+import BaseFoundation, { DefaultAdapter, noopFunction } from '../base/foundation';
+export interface BasicTargetObject {
+    [x: string]: any;
+    checked?: boolean;
+}
+export interface BasicCheckboxEvent {
+    target: BasicTargetObject;
+    stopPropagation: () => void;
+    preventDefault: () => void;
+    nativeEvent: {
+        stopImmediatePropagation: () => void;
+    };
+}
+export interface CheckboxAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getIsInGroup: () => boolean;
+    getGroupValue: () => any[];
+    notifyGroupChange: (event: BasicCheckboxEvent) => void;
+    getGroupDisabled: () => boolean;
+    setNativeControlChecked: (checked: boolean) => void;
+    getState: noopFunction;
+    notifyChange: (event: BasicCheckboxEvent) => void;
+}
+declare class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CheckboxAdapter<P, S>, P, S> {
+    constructor(adapter: CheckboxAdapter<P, S>);
+    init(): void;
+    getEvent(checked: boolean, e: any): {
+        target: any;
+        stopPropagation: () => void;
+        preventDefault: () => void;
+        nativeEvent: {
+            stopImmediatePropagation: () => void;
+        };
+    };
+    notifyChange(checked: boolean, e: any): void;
+    handleChange(e: any): void;
+    handleChangeInGroup(e: any): void;
+    setChecked(checked: boolean): void;
+    destroy(): void;
+}
+export interface BaseCheckboxProps {
+    id?: string;
+    autoFocus?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    onChange?: (e: BasicCheckboxEvent) => any;
+    value?: any;
+    style?: Record<string, any>;
+    className?: string;
+    prefixCls?: string;
+    onMouseEnter?: (e: any) => void;
+    onMouseLeave?: (e: any) => void;
+    extra?: any;
+}
+export default CheckboxFoundation;

package/lib/cjs/checkbox/checkboxFoundation.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+class CheckboxFoundation extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)({}, adapter));
+  } // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+  init() {}
+
+  getEvent(checked, e) {
+    const props = this.getProps();
+    const cbValue = {
+      target: (0, _assign.default)((0, _assign.default)({}, props), {
+        checked
+      }),
+      stopPropagation: () => {
+        e.stopPropagation();
+      },
+      preventDefault: () => {
+        e.preventDefault();
+      },
+      nativeEvent: {
+        stopImmediatePropagation: () => {
+          if (e.nativeEvent && typeof e.nativeEvent.stopImmediatePropagation === 'function') {
+            e.nativeEvent.stopImmediatePropagation();
+          }
+        }
+      }
+    };
+    return cbValue;
+  }
+
+  notifyChange(checked, e) {
+    const cbValue = this.getEvent(checked, e);
+
+    this._adapter.notifyChange(cbValue);
+  }
+
+  handleChange(e) {
+    const disabled = this.getProp('disabled');
+
+    if (disabled) {
+      return;
+    }
+
+    const isInGroup = this._adapter.getIsInGroup();
+
+    if (isInGroup) {
+      const groupDisabled = this._adapter.getGroupDisabled();
+
+      if (!groupDisabled) {
+        this.handleChangeInGroup(e);
+      }
+
+      return;
+    }
+
+    const checked = this.getState('checked');
+    const newChecked = !checked;
+
+    if (this._isControlledComponent('checked')) {
+      this.notifyChange(newChecked, e);
+    } else {
+      this.setChecked(newChecked);
+      this.notifyChange(newChecked, e);
+    }
+  }
+
+  handleChangeInGroup(e) {
+    const {
+      value
+    } = this.getProps();
+
+    const groupValue = this._adapter.getGroupValue();
+
+    const checked = (0, _includes.default)(groupValue).call(groupValue, value);
+    const newChecked = !checked;
+    const event = this.getEvent(newChecked, e);
+
+    this._adapter.notifyChange(event);
+
+    this._adapter.notifyGroupChange(event);
+  }
+
+  setChecked(checked) {
+    this._adapter.setNativeControlChecked(checked);
+  } // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+  destroy() {}
+
+}
+
+var _default = CheckboxFoundation;
+exports.default = _default;

package/lib/cjs/checkbox/checkboxGroupFoundation.d.ts

@@ -0,0 +1,17 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { BasicCheckboxEvent } from './checkboxFoundation';
+export interface CheckboxGroupAdapter extends DefaultAdapter {
+    updateGroupValue: (value: any[]) => void;
+    notifyChange: (value: any[]) => void;
+}
+declare class CheckboxGroupFoundation extends BaseFoundation<CheckboxGroupAdapter> {
+    static get checkboxGroupdefaultAdapter(): {};
+    constructor(adapter: CheckboxGroupAdapter);
+    init(): void;
+    notifyChange(value: any[]): void;
+    handleChange(evt: BasicCheckboxEvent): void;
+    getFormatName(): any;
+    handlePropValueChange(newPropValue: any[]): void;
+    destroy(): void;
+}
+export default CheckboxGroupFoundation;

package/lib/cjs/checkbox/checkboxGroupFoundation.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+var _warning = _interopRequireDefault(require("../utils/warning"));
+
+class CheckboxGroupFoundation extends _foundation.default {
+  static get checkboxGroupdefaultAdapter() {
+    return {};
+  }
+
+  constructor(adapter) {
+    super((0, _assign.default)((0, _assign.default)({}, CheckboxGroupFoundation.checkboxGroupdefaultAdapter), adapter));
+  }
+
+  init() {
+    const {
+      defaultValue,
+      value
+    } = this.getProps();
+
+    if (typeof defaultValue !== 'undefined' && !(0, _isArray.default)(defaultValue)) {
+      (0, _warning.default)(true, 'Warning: [Semi CheckboxGroup] defaultValue should be an Array');
+    }
+
+    if (typeof value !== 'undefined' && !(0, _isArray.default)(value)) {
+      (0, _warning.default)(true, 'Warning: [Semi CheckboxGroup] value should be an Array');
+    }
+  }
+
+  notifyChange(value) {
+    this._adapter.notifyChange(value);
+  }
+
+  handleChange(evt) {
+    const prevValue = this.getState('value');
+    let newValue = [];
+
+    if (!(0, _isArray.default)(prevValue)) {
+      newValue = [prevValue];
+    }
+
+    if (evt.target.checked) {
+      newValue = [...prevValue, evt.target.value];
+    } else {
+      newValue = (0, _filter.default)(prevValue).call(prevValue, (itm, idx) => itm !== evt.target.value);
+    }
+
+    const isControlledMode = ('value' in this.getProps());
+
+    if (isControlledMode) {
+      // Controlled mode only needs to notify
+      this.notifyChange(newValue);
+    } else {
+      // In uncontrolled mode, update the value in the state, and then notify
+      this._adapter.updateGroupValue(newValue);
+
+      this.notifyChange(newValue);
+    }
+  }
+
+  getFormatName() {
+    const propName = this.getProp('name');
+    const defaultName = 'default';
+    return propName || defaultName;
+  }
+
+  handlePropValueChange(newPropValue) {
+    if ((0, _isArray.default)(newPropValue)) {
+      this._adapter.updateGroupValue(newPropValue);
+    } else {
+      // to adjust reset in Form.CheckboxGroup
+      if (typeof newPropValue === 'undefined') {
+        this._adapter.updateGroupValue([]);
+      }
+
+      (0, _warning.default)(true, 'Warning: [Semi CheckboxGroup] value should be an Array');
+    }
+  } // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+  destroy() {}
+
+}
+
+var _default = CheckboxGroupFoundation;
+exports.default = _default;

package/lib/cjs/checkbox/constants.d.ts

@@ -0,0 +1,27 @@
+declare const checkboxClasses: {
+    PREFIX: string;
+    INNER: string;
+    TEXT: string;
+    INPUT: string;
+    CHECKED: string;
+    DISABLED: string;
+    BUTTON: string;
+    WRAPPER: string;
+};
+declare const checkboxGroupClasses: {
+    PREFIX: string;
+    INNER: string;
+    TEXT: string;
+    INPUT: string;
+    CHECKED: string;
+    DISABLED: string;
+};
+declare const strings: {
+    readonly DIRECTION_SET: readonly ["horizontal", "vertical"];
+    readonly TYPE_DEFAULT: "default";
+    readonly TYPE_CARD: "card";
+    readonly TYPE_PURECARD: "pureCard";
+    readonly DEFAULT_DIRECTION: "vertical";
+};
+declare const numbers: {};
+export { checkboxClasses, checkboxGroupClasses, strings, numbers };