@nutui/nutui-react 2.7.0 → 3.0.0-beta.1

package/dist/es/packages/checkbox/checkbox.js

@@ -0,0 +1,165 @@
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import React, { useContext, useEffect, useState } from "react";
+import { Checked, CheckDisabled, CheckNormal } from "@nutui/icons-react";
+import classNames from "classnames";
+import CheckboxGroup from "../checkboxgroup";
+import { ComponentDefaults } from "../../utils/typings";
+import Context from "../checkboxgroup/context";
+import { usePropsValue } from "../../utils/use-props-value";
+var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    disabled: false,
+    shape: 'round',
+    labelPosition: 'right',
+    icon: null,
+    activeIcon: null,
+    indeterminateIcon: null,
+    onChange: function(value) {}
+});
+var classPrefix = 'nut-checkbox';
+export var Checkbox = function(props) {
+    var children = _object_spread({}, defaultProps, props).children;
+    var icon = props.icon, label = props.label, className = props.className, activeIcon = props.activeIcon, checked = props.checked, value = props.value, defaultChecked = props.defaultChecked, shape = props.shape, disabled = props.disabled, onChange = props.onChange, indeterminate = props.indeterminate, indeterminateIcon = props.indeterminateIcon, others = _object_without_properties(props, [
+        "icon",
+        "label",
+        "className",
+        "activeIcon",
+        "checked",
+        "value",
+        "defaultChecked",
+        "shape",
+        "disabled",
+        "onChange",
+        "indeterminate",
+        "indeterminateIcon"
+    ]);
+    // eslint-disable-next-line prefer-const
+    var labelPosition = others.labelPosition, rest = _object_without_properties(others, [
+        "labelPosition"
+    ]);
+    var ctx = useContext(Context);
+    var _usePropsValue = _sliced_to_array(usePropsValue({
+        value: checked,
+        defaultValue: defaultChecked,
+        finalValue: defaultChecked,
+        onChange: onChange
+    }), 2), innerChecked = _usePropsValue[0], setChecked = _usePropsValue[1];
+    // eslint-disable-next-line prefer-const
+    var _useState = _sliced_to_array(useState(disabled), 2), innerDisabled = _useState[0], setDisabled = _useState[1];
+    var _useState1 = _sliced_to_array(useState(indeterminate), 2), innerIndeterminate = _useState1[0], setIndeterminate = _useState1[1];
+    useEffect(function() {
+        setDisabled(disabled);
+    }, [
+        disabled
+    ]);
+    useEffect(function() {
+        setIndeterminate(indeterminate);
+    }, [
+        indeterminate
+    ]);
+    if (ctx) {
+        if (ctx.labelPosition !== undefined) {
+            labelPosition = ctx.labelPosition;
+        }
+        innerDisabled = ctx.disabled !== undefined ? ctx.disabled : innerDisabled;
+        innerChecked = ctx.value.includes(value);
+        setChecked = function(checked) {
+            if (ctx.disabled) return;
+            if (checked) ctx.check(value);
+            if (!checked) ctx.uncheck(value);
+        };
+    }
+    var renderIcon = function() {
+        if (innerDisabled) {
+            if (innerIndeterminate) {
+                return /*#__PURE__*/ React.createElement(CheckDisabled, {
+                    className: color()
+                });
+            }
+            if (innerChecked) {
+                return /*#__PURE__*/ React.createElement(Checked, {
+                    className: color()
+                });
+            }
+            return /*#__PURE__*/ React.createElement(CheckDisabled, {
+                className: color()
+            });
+        }
+        if (!innerChecked) {
+            return /*#__PURE__*/ React.isValidElement(icon) ? icon : /*#__PURE__*/ React.createElement(CheckNormal, {
+                className: color()
+            });
+        }
+        if (innerIndeterminate) {
+            return /*#__PURE__*/ React.isValidElement(indeterminateIcon) ? indeterminateIcon : /*#__PURE__*/ React.createElement(CheckDisabled, {
+                className: color()
+            });
+        }
+        return /*#__PURE__*/ React.isValidElement(activeIcon) ? activeIcon : /*#__PURE__*/ React.createElement(Checked, {
+            className: color()
+        });
+    };
+    var color = function() {
+        var cls = "".concat(classPrefix, "-icon ");
+        if (innerDisabled) {
+            if (innerChecked && !innerIndeterminate) {
+                return "".concat(cls).concat(classPrefix, "-icon-checked ").concat(classPrefix, "-icon-disabled");
+            }
+            if (innerChecked && innerIndeterminate) {
+                return "".concat(cls).concat(classPrefix, "-icon-indeterminate ").concat(classPrefix, "-icon-disabled");
+            }
+            return "".concat(cls).concat(classPrefix, "-icon-disabled");
+        }
+        if (innerChecked) {
+            if (innerIndeterminate) {
+                return "".concat(cls).concat(classPrefix, "-icon-indeterminate");
+            }
+            return "".concat(cls).concat(classPrefix, "-icon-checked");
+        }
+        return cls;
+    };
+    var renderLabel = function() {
+        return /*#__PURE__*/ React.createElement("span", {
+            className: classNames("".concat(classPrefix, "-label "), _define_property({}, "".concat(classPrefix, "-label-disabled"), innerDisabled))
+        }, children || label);
+    };
+    var handleClick = function() {
+        // 禁用的时候直接返回
+        if (disabled) return;
+        // 先转换状态
+        var latestChecked = !innerChecked;
+        setChecked(latestChecked);
+    };
+    var renderButton = function() {
+        var _obj;
+        return /*#__PURE__*/ React.createElement("div", {
+            className: classNames("".concat(classPrefix, "-button"), (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-button-active"), innerChecked), _define_property(_obj, "".concat(classPrefix, "-button-disabled"), disabled), _obj))
+        }, children || label, innerChecked && activeIcon ? /*#__PURE__*/ React.createElement("div", {
+            className: classNames("".concat(classPrefix, "-button-icon"))
+        }, activeIcon) : null);
+    };
+    var renderListItem = function() {
+        return /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(classPrefix, "-list-item")
+        }, renderLabel(), renderIcon());
+    };
+    var renderCheckboxItem = function() {
+        if (ctx === null || ctx === void 0 ? void 0 : ctx.list) {
+            return /*#__PURE__*/ React.createElement(React.Fragment, null, renderListItem());
+        }
+        if (shape === 'button') {
+            return renderButton();
+        }
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, renderIcon(), renderLabel());
+    };
+    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({
+        className: classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-reverse"), labelPosition === 'left'), className)
+    }, rest), {
+        onClick: handleClick
+    }), renderCheckboxItem());
+};
+Checkbox.displayName = 'NutCheckBox';
+Checkbox.Group = CheckboxGroup;

package/dist/es/packages/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+import { Checkbox } from './checkbox';
+export type { CheckboxProps, CheckboxShape } from './checkbox';
+export default Checkbox;

package/dist/es/packages/checkbox/index.js

@@ -0,0 +1,2 @@
+import { Checkbox } from "./checkbox";
+export default Checkbox;

package/dist/es/packages/checkbox/style/checkbox.scss

@@ -0,0 +1,174 @@
+.nut-checkbox {
+  display: flex;
+  align-items: center;
+
+  &-icon {
+    color: $color-text-disabled;
+    font-size: $checkbox-icon-font-size;
+  }
+
+  &-icon-checked {
+    color: $color-primary;
+    transition-duration: 0.3s;
+    transition-property: color, border-color, background-color;
+
+    &.nut-checkbox-icon-disabled {
+      color: $color-primary-disabled-special;
+    }
+  }
+
+  &-label {
+    margin-left: $checkbox-label-margin-left;
+    font-size: $checkbox-label-font-size;
+    color: $checkbox-label-color;
+
+    &-disabled {
+      color: $color-text-disabled;
+    }
+  }
+
+  &-icon-indeterminate {
+    color: $color-primary;
+
+    &.nut-checkbox-icon-disabled {
+      color: $color-primary-disabled-special;
+    }
+  }
+
+  &-icon-disabled {
+    color: $color-text-disabled;
+  }
+
+  &-reverse {
+    flex-direction: row-reverse;
+
+    .nut-checkbox-label {
+      margin-right: $checkbox-label-margin-left;
+      margin-left: 0;
+    }
+  }
+
+  &-button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    padding: $checkbox-button-padding;
+    font-size: $checkbox-button-font-size;
+    background: $checkbox-button-background;
+    border-radius: $checkbox-button-border-radius;
+    color: $checkbox-label-color;
+    box-sizing: border-box;
+    border: 1px solid $checkbox-button-background;
+    overflow: hidden;
+
+    &-active {
+      background: $color-primary-light-pressed;
+      color: $color-primary;
+      border: $checkbox-button-active-border;
+    }
+
+    &-disabled {
+      color: $color-text-disabled;
+      border: 1px solid $checkbox-button-background;
+    }
+
+    &-icon {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-top: 10px solid transparent;
+      border-left: 10px solid transparent;
+      border-bottom: 10px solid $color-primary;
+      border-right: 10px solid $color-primary;
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-end;
+
+      &-checked {
+        width: 12px;
+        height: 12px;
+        position: absolute;
+        color: $white;
+        top: 50%;
+        left: 50%;
+        transform: translate(-3px, -3px);
+      }
+
+      // background-color: $color-primary;
+      .nut-icon {
+        position: absolute;
+        font-size: 12px;
+        width: 12px;
+        height: 12px;
+
+        &:before {
+          top: auto;
+          bottom: -22px;
+          margin-left: 6px;
+        }
+      }
+    }
+  }
+
+  .nut-checkbox-button-active.nut-checkbox-button-disabled {
+    background: $color-text-disabled;
+    color: $white;
+    border: 1px solid $color-text-disabled;
+  }
+
+  &-list-item {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: $checkbox-list-item-padding;
+    border-top: $checkbox-list-item-border;
+
+    .nut-checkbox-label {
+      flex: auto;
+    }
+
+    .nut-icon {
+      flex: none;
+    }
+  }
+}
+
+[dir='rtl'] .nut-checkbox,
+.nut-rtl .nut-checkbox {
+  &-label {
+    margin-left: 0;
+    margin-right: $checkbox-label-margin-left;
+  }
+
+  &-reverse {
+    .nut-checkbox-label {
+      margin-left: $checkbox-label-margin-left;
+      margin-right: 0;
+    }
+  }
+
+  &-button {
+    &-icon {
+      right: auto;
+      left: 0;
+      border-right: 10px solid transparent;
+      border-left: 10px solid $color-primary;
+
+      &-checked {
+        left: auto;
+        right: 50%;
+        transform: translate(3px, -3px);
+      }
+
+      .nut-icon {
+        &:before {
+          margin-left: 0;
+          margin-right: 6px;
+        }
+      }
+    }
+  }
+}

package/dist/es/packages/checkbox/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/es/packages/checkbox/style/index.js

@@ -0,0 +1,2 @@
+import '../../checkboxgroup/style';
+import './checkbox.scss';

package/dist/es/packages/checkbox/style/style.css

@@ -0,0 +1,198 @@
+.nut-checkboxgroup .nut-checkbox-button {
+  background-color: var(--nutui-color-background, #f5f6fa);
+}
+.nut-checkboxgroup-vertical .nut-checkbox {
+  margin-bottom: 5px;
+}
+.nut-checkboxgroup-vertical .nut-checkbox.nut-checkbox-reverse {
+  width: 100%;
+  justify-content: space-between;
+}
+.nut-checkboxgroup-vertical .nut-checkbox-button-active {
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+}
+.nut-checkboxgroup-horizontal .nut-checkbox {
+  display: inline-flex;
+  margin-right: 20px;
+}
+.nut-checkboxgroup-horizontal .nut-checkbox-button-active {
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+}
+.nut-checkboxgroup-list {
+  width: 100%;
+  border-bottom: var(--nutui-checkbox-list-item-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-top: var(--nutui-checkbox-list-item-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  padding: var(--nutui-checkbox-list-padding, 0 0 0 12px);
+  background: var(--nutui-checkbox-list-background-color, #ffffff);
+}
+.nut-checkboxgroup-list .nut-checkbox {
+  margin-bottom: 5px;
+}
+.nut-checkboxgroup-list .nut-checkbox:first-child .nut-checkbox-list-item {
+  border-top: none;
+}
+.nut-checkboxgroup-list .nut-checkbox.nut-checkbox-reverse {
+  width: 100%;
+  justify-content: space-between;
+}
+
+[dir=rtl] .nut-checkboxgroup .nut-checkbox-label,
+.nut-rtl .nut-checkboxgroup .nut-checkbox-label {
+  margin-right: 5px;
+}
+[dir=rtl] .nut-checkboxgroup-vertical .nut-checkbox-label,
+.nut-rtl .nut-checkboxgroup-vertical .nut-checkbox-label {
+  margin-right: 5px;
+}
+[dir=rtl] .nut-checkboxgroup-horizontal .nut-checkbox,
+.nut-rtl .nut-checkboxgroup-horizontal .nut-checkbox {
+  margin-right: 0;
+  margin-left: 20px;
+}
+
+.nut-checkbox {
+  display: flex;
+  align-items: center;
+}
+.nut-checkbox-icon {
+  color: var(--nutui-color-text-disabled, #c2c4cc);
+  font-size: var(--nutui-checkbox-icon-font-size, var(--nutui-font-size-l, 16px));
+}
+.nut-checkbox-icon-checked {
+  color: var(--nutui-color-primary, #ff0f23);
+  transition-duration: 0.3s;
+  transition-property: color, border-color, background-color;
+}
+.nut-checkbox-icon-checked.nut-checkbox-icon-disabled {
+  color: var(--nutui-color-primary-disabled-special, #ffadbe);
+}
+.nut-checkbox-label {
+  margin-left: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4px));
+  font-size: var(--nutui-checkbox-label-font-size, var(--nutui-font-size-s, 12px));
+  color: var(--nutui-checkbox-label-color, var(--nutui-color-title, #1a1a1a));
+}
+.nut-checkbox-label-disabled {
+  color: var(--nutui-color-text-disabled, #c2c4cc);
+}
+.nut-checkbox-icon-indeterminate {
+  color: var(--nutui-color-primary, #ff0f23);
+}
+.nut-checkbox-icon-indeterminate.nut-checkbox-icon-disabled {
+  color: var(--nutui-color-primary-disabled-special, #ffadbe);
+}
+.nut-checkbox-icon-disabled {
+  color: var(--nutui-color-text-disabled, #c2c4cc);
+}
+.nut-checkbox-reverse {
+  flex-direction: row-reverse;
+}
+.nut-checkbox-reverse .nut-checkbox-label {
+  margin-right: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4px));
+  margin-left: 0;
+}
+.nut-checkbox-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding: var(--nutui-checkbox-button-padding, 5px 18px);
+  font-size: var(--nutui-checkbox-button-font-size, var(--nutui-font-size-s, 12px));
+  background: var(--nutui-color-background, #f5f6fa);
+  border-radius: var(--nutui-checkbox-button-border-radius, 15px);
+  color: var(--nutui-checkbox-label-color, var(--nutui-color-title, #1a1a1a));
+  box-sizing: border-box;
+  border: 1px solid var(--nutui-color-background, #f5f6fa);
+  overflow: hidden;
+}
+.nut-checkbox-button-active {
+  background: var(--nutui-color-primary-light-pressed, #ffebf1);
+  color: var(--nutui-color-primary, #ff0f23);
+  border: var(--nutui-checkbox-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+}
+.nut-checkbox-button-disabled {
+  color: var(--nutui-color-text-disabled, #c2c4cc);
+  border: 1px solid var(--nutui-color-background, #f5f6fa);
+}
+.nut-checkbox-button-icon {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 0;
+  height: 0;
+  border-top: 10px solid transparent;
+  border-left: 10px solid transparent;
+  border-bottom: 10px solid var(--nutui-color-primary, #ff0f23);
+  border-right: 10px solid var(--nutui-color-primary, #ff0f23);
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+.nut-checkbox-button-icon-checked {
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  color: #ffffff;
+  top: 50%;
+  left: 50%;
+  transform: translate(-3px, -3px);
+}
+.nut-checkbox-button-icon .nut-icon {
+  position: absolute;
+  font-size: 12px;
+  width: 12px;
+  height: 12px;
+}
+.nut-checkbox-button-icon .nut-icon:before {
+  top: auto;
+  bottom: -22px;
+  margin-left: 6px;
+}
+.nut-checkbox .nut-checkbox-button-active.nut-checkbox-button-disabled {
+  background: var(--nutui-color-text-disabled, #c2c4cc);
+  color: #ffffff;
+  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
+}
+.nut-checkbox-list-item {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: var(--nutui-checkbox-list-item-padding, 12px 12px 12px 0);
+  border-top: var(--nutui-checkbox-list-item-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+}
+.nut-checkbox-list-item .nut-checkbox-label {
+  flex: auto;
+}
+.nut-checkbox-list-item .nut-icon {
+  flex: none;
+}
+
+[dir=rtl] .nut-checkbox-label,
+.nut-rtl .nut-checkbox-label {
+  margin-left: 0;
+  margin-right: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4px));
+}
+[dir=rtl] .nut-checkbox-reverse .nut-checkbox-label,
+.nut-rtl .nut-checkbox-reverse .nut-checkbox-label {
+  margin-left: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4px));
+  margin-right: 0;
+}
+[dir=rtl] .nut-checkbox-button-icon,
+.nut-rtl .nut-checkbox-button-icon {
+  right: auto;
+  left: 0;
+  border-right: 10px solid transparent;
+  border-left: 10px solid var(--nutui-color-primary, #ff0f23);
+}
+[dir=rtl] .nut-checkbox-button-icon-checked,
+.nut-rtl .nut-checkbox-button-icon-checked {
+  left: auto;
+  right: 50%;
+  transform: translate(3px, -3px);
+}
+[dir=rtl] .nut-checkbox-button-icon .nut-icon:before,
+.nut-rtl .nut-checkbox-button-icon .nut-icon:before {
+  margin-left: 0;
+  margin-right: 6px;
+}

package/dist/es/packages/checkboxgroup/checkboxgroup.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { RadioGroupOption } from "../radiogroup/types";
+import { CheckboxDirection, CheckboxLabelPosition, CheckboxLimit } from "./types";
+export interface CheckboxGroupProps {
+    /**
+    * 是否禁用选择,将用于其下的全部复选框
+    * @default false
+    */
+    disabled?: boolean
+    /**
+    * 当前选中项的标识符
+    * @default -
+    */
+    value?: string[]
+    /**
+    * 初始选中项的标识符
+    * @default -
+    */
+    defaultValue?: string[]
+    /**
+    * 列表模式
+    * @default false
+    */
+    list: boolean
+    /**
+    * 限制最大可选数
+    * @default -
+    */
+    max: number | undefined
+    /**
+    * 限制至少选择数
+    * @default -
+    */
+    min: number | undefined
+    /**
+    * 文本所在的位置
+    * @default right
+    */
+    labelPosition: CheckboxLabelPosition
+    /**
+    * 使用横纵方向 可选值 horizontal、vertical
+    * @default vertical
+    */
+    direction: CheckboxDirection
+    /**
+    * 配置 options 渲染复选按钮
+    * @default -
+    */
+    options: RadioGroupOption[]
+    /**
+    * 值变化时触发
+    * @default -
+    */
+    onChange: (value: string[]) => void
+    onLimit: (type: CheckboxLimit) => void;
+}
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<Partial<CheckboxGroupProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<unknown>>;