@douyinfe/semi-foundation 2.1.0-next.0 → 2.1.0

package/lib/cjs/checkbox/checkbox.scss

@@ -1,363 +0,0 @@
-//@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;
-            }
-        }
-    }
-
-    &:active {
-        .#{$module}-inner-display {
-            background: $color-checkbox_default-bg-active;
-        }
-
-        .#{$module}-inner-checked {
-            .#{$module}-inner-display {
-                background: $color-checkbox_checked-bg-active;
-            }
-        }
-    }
-
-    &.#{$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;
-            }
-        }
-    }
-
-    &-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: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-hover;
-            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;
-        }
-
-        .#{$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;
-            }
-        }
-
-        &_disabled {
-            &:active {
-                background: transparent;
-            }
-            &:hover {
-                background: transparent;
-            }
-        }
-    }
-
-    &-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

@@ -1,49 +0,0 @@
-import BaseFoundation, { DefaultAdapter, noopFunction } from '../base/foundation';
-export interface BasicTargetObject {
-    [x: string]: any;
-    checked?: boolean;
-}
-export interface BasicCheckboxEvent {
-    target: BasicTargetObject;
-    stopPropagation: () => void;
-    preventDefault: () => 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: MouseEvent): {
-        target: any;
-        stopPropagation: () => void;
-        preventDefault: () => void;
-    };
-    notifyChange(checked: boolean, e: MouseEvent): void;
-    handleChange(e: MouseEvent): void;
-    handleChangeInGroup(e: MouseEvent): void;
-    setChecked(checked: boolean): void;
-    destroy(): void;
-}
-export interface BaseCheckboxProps {
-    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

@@ -1,105 +0,0 @@
-"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();
-      }
-    };
-    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

@@ -1,17 +0,0 @@
-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

@@ -1,103 +0,0 @@
-"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

@@ -1,27 +0,0 @@
-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 };

package/lib/cjs/checkbox/constants.js

@@ -1,42 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.strings = exports.numbers = exports.checkboxGroupClasses = exports.checkboxClasses = void 0;
-
-var _constants = require("../base/constants");
-
-const checkboxClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-checkbox"),
-  INNER: "".concat(_constants.BASE_CLASS_PREFIX, "-checkbox-inner"),
-  TEXT: "".concat(_constants.BASE_CLASS_PREFIX, "-checkbox-text"),
-  INPUT: "".concat(_constants.BASE_CLASS_PREFIX, "-checkbox-input"),
-  CHECKED: "".concat(_constants.BASE_CLASS_PREFIX, "-checkbox-checked"),
-  DISABLED: "".concat(_constants.BASE_CLASS_PREFIX, "-checkbox-disabled"),
-  BUTTON: "".concat(_constants.BASE_CLASS_PREFIX, "-checkbox-button"),
-  WRAPPER: ''
-};
-exports.checkboxClasses = checkboxClasses;
-const checkboxGroupClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-checkboxGroup"),
-  INNER: "".concat(_constants.BASE_CLASS_PREFIX, "-checkboxGroup-inner"),
-  TEXT: "".concat(_constants.BASE_CLASS_PREFIX, "-checkboxGroup-text"),
-  INPUT: "".concat(_constants.BASE_CLASS_PREFIX, "-checkboxGroup-input"),
-  CHECKED: "".concat(_constants.BASE_CLASS_PREFIX, "-checkboxGroup-checked"),
-  DISABLED: "".concat(_constants.BASE_CLASS_PREFIX, "-checkboxGroup-disabled")
-};
-exports.checkboxGroupClasses = checkboxGroupClasses;
-const strings = {
-  DIRECTION_SET: ['horizontal', 'vertical'],
-  TYPE_DEFAULT: 'default',
-  TYPE_CARD: 'card',
-  TYPE_PURECARD: 'pureCard',
-  DEFAULT_DIRECTION: 'vertical'
-};
-exports.strings = strings;
-const numbers = {};
-exports.numbers = numbers;