@nutui/nutui-react-taro 3.0.19-cpp.21-beta.0 → 3.0.19-cpp.21-beta.1

package/dist/es/packages/pagination/style-jrkf/pagination.scss

@@ -0,0 +1,89 @@
+.nut-pagination {
+  display: flex;
+  flex-direction: row;
+  font-size: $pagination-font-size;
+  color: $pagination-color;
+}
+
+.nut-pagination-prev,
+.nut-pagination-item,
+.nut-pagination-next {
+  height: 39px;
+  min-width: 39px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: $pagination-font-size;
+  color: $pagination-color;
+  background: $white;
+  border-radius: $pagination-item-border-radius;
+  border: $pagination-item-border-width solid $pagination-item-border-color;
+  cursor: pointer;
+}
+
+.nut-pagination-prev,
+.nut-pagination-item {
+  border-right-width: 0;
+}
+
+.nut-pagination-prev,
+.nut-pagination-next {
+  padding: $pagination-prev-next-padding;
+}
+
+.nut-pagination-contain {
+  display: flex;
+  flex-direction: row;
+}
+
+.nut-pagination-item-active {
+  color: $white;
+  border-width: 0;
+  background-color: $pagination-active-background-color;
+}
+
+.nut-pagination-item-disabled,
+.nut-pagination-next-disabled,
+.nut-pagination-prev-disabled {
+  color: $pagination-disable-color;
+  background-color: $pagination-disable-background-color;
+  cursor: not-allowed;
+}
+
+.nut-pagination-simple {
+  height: 39px;
+  width: 124px;
+  line-height: 39px;
+  text-align: center;
+  font-size: $pagination-font-size;
+  color: $pagination-color;
+}
+
+.nut-pagination-simple-border {
+  border-right: $pagination-item-border-width solid
+    $pagination-item-border-color;
+}
+
+.nut-pagination-lite {
+  height: $pagination-lite-height;
+  padding: 0 $spacing-xs;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: $color-primary-text;
+  background-color: $pagination-lite-background-color;
+  border-radius: $pagination-lite-radius;
+}
+
+.nut-pagination-lite-active,
+.nut-pagination-lite-default {
+  font-size: $font-size-xs;
+  color: $pagination-lite-color;
+}
+
+.nut-pagination-lite-spliterator {
+  font-size: $font-size-xs;
+  color: $pagination-lite-color;
+}

package/dist/es/packages/pagination/style-jrkf/style.css

@@ -0,0 +1,92 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-pagination {
+  display: flex;
+  flex-direction: row;
+  font-size: var(--nutui-pagination-font-size, var(--nutui-font-text));
+  color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff6666));
+}
+
+.nut-pagination-prev,
+.nut-pagination-item,
+.nut-pagination-next {
+  height: 39px;
+  min-width: 39px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--nutui-pagination-font-size, var(--nutui-font-text));
+  color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff6666));
+  background: #ffffff;
+  border-radius: var(--nutui-pagination-item-border-radius, 2px);
+  border: var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border));
+  cursor: pointer;
+}
+
+.nut-pagination-prev,
+.nut-pagination-item {
+  border-right-width: 0;
+}
+
+.nut-pagination-prev,
+.nut-pagination-next {
+  padding: var(--nutui-pagination-prev-next-padding, 0 12px);
+}
+
+.nut-pagination-contain {
+  display: flex;
+  flex-direction: row;
+}
+
+.nut-pagination-item-active {
+  color: #ffffff;
+  border-width: 0;
+  background-color: linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff9999) 0%, var(--nutui-color-primary-stop-2, #ff6666) 100%);
+}
+
+.nut-pagination-item-disabled,
+.nut-pagination-next-disabled,
+.nut-pagination-prev-disabled {
+  color: var(--nutui-pagination-disable-color, var(--nutui-color-text-disabled));
+  background-color: var(--nutui-pagination-disable-background-color, #f7f8fa);
+  cursor: not-allowed;
+}
+
+.nut-pagination-simple {
+  height: 39px;
+  width: 124px;
+  line-height: 39px;
+  text-align: center;
+  font-size: var(--nutui-pagination-font-size, var(--nutui-font-text));
+  color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff6666));
+}
+
+.nut-pagination-simple-border {
+  border-right: var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border));
+}
+
+.nut-pagination-lite {
+  height: var(--nutui-pagination-lite-height, 20px);
+  padding: 0 var(--nutui-spacing-xs);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(--nutui-color-text-dark);
+  background-color: var(--nutui-pagination-lite-background-color, var(--nutui-black-7));
+  border-radius: var(--nutui-pagination-lite-radius, 12px);
+}
+
+.nut-pagination-lite-active,
+.nut-pagination-lite-default {
+  font-size: var(--nutui-font-text-xs);
+  color: var(--nutui-pagination-lite-color, #ffffff);
+}
+
+.nut-pagination-lite-spliterator {
+  font-size: var(--nutui-font-text-xs);
+  color: var(--nutui-pagination-lite-color, #ffffff);
+}

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

@@ -0,0 +1,3 @@
+import Picker from "./picker";
+export type { TaroPickerProps as PickerProps } from "../../types";
+export default Picker;

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

@@ -0,0 +1,2 @@
+import Picker from "./picker";
+export default Picker;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PickerActions, TaroPickerProps } from "../../types";
+declare const Picker: React.ForwardRefExoticComponent<Partial<TaroPickerProps> & React.RefAttributes<PickerActions>>;
+export default Picker;

package/dist/es/packages/picker/picker.js

@@ -0,0 +1,174 @@
+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 { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
+import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
+import { View } from "@tarojs/components";
+import classNames from "classnames";
+import isEqual from "react-fast-compare";
+import PickerView from "../pickerview/index";
+import Popup from "../popup/index";
+import SafeArea from "../safearea/index";
+import { useRefs } from "../../hooks/use-refs";
+import { useConfig } from "../configprovider/index";
+import { usePropsValue } from "../../hooks/use-props-value";
+import { ComponentDefaults } from "../../utils/typings";
+var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    title: '',
+    options: [],
+    value: undefined,
+    defaultValue: [],
+    closeOnOverlayClick: true
+});
+var InternalPicker = function(props, ref) {
+    var locale = useConfig().locale;
+    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, visible = _ref.visible, title = _ref.title, _ref_options = _ref.options, options = _ref_options === void 0 ? [] : _ref_options, closeOnOverlayClick = _ref.closeOnOverlayClick, _ref_popupProps = _ref.popupProps, popupProps = _ref_popupProps === void 0 ? {} : _ref_popupProps, _ref_defaultValue = _ref.defaultValue, defaultValue = _ref_defaultValue === void 0 ? [] : _ref_defaultValue, className = _ref.className, style = _ref.style, threeDimensional = _ref.threeDimensional, duration = _ref.duration, onConfirm = _ref.onConfirm, onCancel = _ref.onCancel, onClose = _ref.onClose, onChange = _ref.onChange, rest = _object_without_properties(_ref, [
+        "children",
+        "visible",
+        "title",
+        "options",
+        "closeOnOverlayClick",
+        "popupProps",
+        "defaultValue",
+        "className",
+        "style",
+        "threeDimensional",
+        "duration",
+        "onConfirm",
+        "onCancel",
+        "onClose",
+        "onChange"
+    ]);
+    var classPrefix = 'nut-picker';
+    var classes = classNames(classPrefix, className);
+    var _usePropsValue = _sliced_to_array(usePropsValue({
+        value: props.value,
+        defaultValue: _to_consumable_array(defaultValue),
+        finalValue: _to_consumable_array(defaultValue),
+        onChange: function(value) {
+            var _props_onConfirm;
+            (_props_onConfirm = props.onConfirm) === null || _props_onConfirm === void 0 ? void 0 : _props_onConfirm.call(props, selectedOptionsRef.current, value);
+        }
+    }), 2), selectedValue = _usePropsValue[0], setSelectedValue = _usePropsValue[1];
+    var _usePropsValue1 = _sliced_to_array(usePropsValue({
+        value: props.visible,
+        defaultValue: false,
+        finalValue: false,
+        onChange: function(v) {
+            if (!v) {
+                var _props_onClose;
+                (_props_onClose = props.onClose) === null || _props_onClose === void 0 ? void 0 : _props_onClose.call(props, selectedOptionsRef.current, innerValue);
+            }
+        }
+    }), 2), innerVisible = _usePropsValue1[0], setInnerVisible = _usePropsValue1[1];
+    var actions = {
+        open: function() {
+            setInnerVisible(true);
+        },
+        close: function() {
+            setInnerVisible(false);
+        }
+    };
+    useImperativeHandle(ref, function() {
+        return actions;
+    });
+    var _useState = _sliced_to_array(useState(_to_consumable_array(selectedValue)), 2), innerValue = _useState[0], setInnerValue = _useState[1];
+    var innerValueRef = useRef(innerValue);
+    var _useState1 = _sliced_to_array(useState([]), 2), innerOptions = _useState1[0], setInnerOptions = _useState1[1];
+    var selectedOptionsRef = useRef([]);
+    var _useRefs = _sliced_to_array(useRefs(), 2), refs = _useRefs[0], setRefs = _useRefs[1];
+    useEffect(function() {
+        if (innerVisible) {
+            setInnerValue(selectedValue);
+            setInnerOptions(options);
+        }
+    }, [
+        selectedValue,
+        innerOptions,
+        innerVisible
+    ]);
+    var onChangeItem = function(param) {
+        var value = param.value, index = param.index, selectedOptions = param.selectedOptions;
+        if (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) {
+            selectedOptionsRef.current = selectedOptions;
+        }
+        if (isEqual(value, innerValueRef.current)) return;
+        innerValueRef.current = value;
+        setInnerValue(value);
+        innerVisible && (onChange === null || onChange === void 0 ? void 0 : onChange({
+            selectedOptions: selectedOptions,
+            value: value,
+            index: index
+        }));
+    };
+    var onConfirmEvent = function() {
+        var moving = false;
+        refs.forEach(function(ref) {
+            if (ref.moving) moving = true;
+            ref.stopMomentum();
+        });
+        if (!moving) {
+            setSelectedValue(innerValue, true);
+            setInnerVisible(false);
+        }
+    };
+    var onCancelEvent = function() {
+        setInnerValue(selectedValue);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        setInnerVisible(false);
+    };
+    var renderTitleBar = function() {
+        return /*#__PURE__*/ React.createElement(View, {
+            className: "".concat(classPrefix, "-control")
+        }, /*#__PURE__*/ React.createElement(View, {
+            className: "".concat(classPrefix, "-cancel-btn"),
+            onClick: function(e) {
+                e.stopPropagation();
+                onCancelEvent();
+            }
+        }, locale === null || locale === void 0 ? void 0 : locale.cancel), /*#__PURE__*/ React.createElement(View, {
+            className: "".concat(classPrefix, "-title")
+        }, title || ''), /*#__PURE__*/ React.createElement(View, {
+            className: "".concat(classPrefix, "-confirm-btn"),
+            onClick: function(e) {
+                e.stopPropagation();
+                onConfirmEvent();
+            }
+        }, locale.confirm));
+    };
+    var renderPickerElement = function() {
+        return /*#__PURE__*/ React.createElement(View, _object_spread({
+            className: classes,
+            style: style
+        }, rest), renderTitleBar(), typeof children !== 'function' && children, /*#__PURE__*/ React.createElement(View, {
+            className: "".concat(classPrefix, "-panel")
+        }, /*#__PURE__*/ React.createElement(PickerView, {
+            setRefs: setRefs,
+            value: innerValue,
+            options: props.options,
+            threeDimensional: threeDimensional,
+            duration: duration,
+            onChange: function(param) {
+                var value = param.value, index = param.index, selectedOptions = param.selectedOptions;
+                onChangeItem({
+                    value: value,
+                    index: index,
+                    selectedOptions: selectedOptions
+                });
+            }
+        })));
+    };
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, typeof children === 'function' && children(selectedValue), /*#__PURE__*/ React.createElement(Popup, _object_spread_props(_object_spread({}, popupProps), {
+        visible: innerVisible,
+        position: "bottom",
+        onOverlayClick: function() {
+            if (!closeOnOverlayClick) return;
+            onCancelEvent();
+        }
+    }), innerVisible ? /*#__PURE__*/ React.createElement(React.Fragment, null, renderPickerElement(), " ") : null, /*#__PURE__*/ React.createElement(SafeArea, {
+        position: "bottom"
+    })));
+};
+var Picker = /*#__PURE__*/ React.forwardRef(InternalPicker);
+export default Picker;

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

@@ -0,0 +1,3 @@
+import '../../popup/style/css';
+import '../../pickerview/style/css';
+import './style.css';

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

@@ -0,0 +1,3 @@
+import '../../popup/style';
+import '../../pickerview/style';
+import './picker.scss';

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

@@ -0,0 +1,38 @@
+.nut-picker {
+  width: 100%;
+
+  &-control {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: $popup-title-height;
+    padding: $popup-title-padding;
+    box-sizing: border-box;
+    font-size: $popup-title-font-size;
+  }
+
+  &-cancel-btn {
+    color: $picker-title-cancel-color;
+    font-size: $picker-title-cancel-font-size;
+  }
+
+  &-confirm-btn {
+    color: $picker-title-ok-color;
+    font-size: $picker-title-ok-font-size;
+  }
+
+  &-title {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    color: $color-title;
+    font-size: $popup-title-font-size;
+    font-weight: $popup-title-font-weight;
+  }
+
+  &-panel {
+    display: flex;
+  }
+}

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

@@ -0,0 +1,37 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-picker {
+  width: 100%;
+}
+.nut-picker-control {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--nutui-popup-title-height, 50px);
+  padding: var(--nutui-popup-title-padding, 16px);
+  box-sizing: border-box;
+  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
+}
+.nut-picker-cancel-btn {
+  color: var(--nutui-picker-title-cancel-color, var(--nutui-color-text, #505259));
+  font-size: var(--nutui-picker-title-cancel-font-size, var(--nutui-font-size-base, 14px));
+}
+.nut-picker-confirm-btn {
+  color: var(--nutui-picker-title-ok-color, var(--nutui-color-primary, #ff0f23));
+  font-size: var(--nutui-picker-title-ok-font-size, var(--nutui-font-size-base, 14px));
+}
+.nut-picker-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+  color: var(--nutui-color-title, #1a1a1a);
+  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
+  font-weight: var(--nutui-popup-title-font-weight, var(--nutui-font-weight-bold, 600));
+}
+.nut-picker-panel {
+  display: flex;
+}