@nutui/nutui-react-taro 3.0.0-beta.1 → 3.0.0-beta.11

package/dist/cjs/packages/searchbar/searchbar.js

@@ -15,7 +15,7 @@ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _components = require("@tarojs/components");
 var _iconsreacttaro = require("@nutui/icons-react-taro");
-var _configprovider = require("../configprovider/configprovider");
+var _index = require("../configprovider/index");
 var _typings = require("../../utils/typings");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     placeholder: '',
@@ -35,7 +35,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
 });
 var SearchBar = function SearchBar(props) {
     var classPrefix = 'nut-searchbar';
-    var locale = (0, _configprovider.useConfig)().locale;
+    var locale = (0, _index.useConfig)().locale;
     var searchRef = (0, _react.useRef)(null);
     var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), outerValue = _$_object_spread.value, style = _$_object_spread.style, placeholder = _$_object_spread.placeholder, shape = _$_object_spread.shape, className = _$_object_spread.className, disabled = _$_object_spread.disabled, maxLength = _$_object_spread.maxLength, clearable = _$_object_spread.clearable, readOnly = _$_object_spread.readOnly, autoFocus = _$_object_spread.autoFocus, backable = _$_object_spread.backable, right = _$_object_spread.right, left = _$_object_spread.left, leftIn = _$_object_spread.leftIn, rightIn = _$_object_spread.rightIn, onChange = _$_object_spread.onChange, onFocus = _$_object_spread.onFocus, onBlur = _$_object_spread.onBlur, onClear = _$_object_spread.onClear, onSearch = _$_object_spread.onSearch, onInputClick = _$_object_spread.onInputClick;
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(function() {
@@ -45,21 +45,23 @@ var SearchBar = function SearchBar(props) {
         var searchSelf = searchRef.current;
         searchSelf && searchSelf.focus();
     };
-    var change = function change(event) {
-        if (value === event.target.value) return;
-        onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value, event));
-        setValue(event.target.value);
-        event.target.value === '' && forceFocus();
+    var onInput = function onInput(event) {
+        var _event_detail;
+        var eventValue = event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value;
+        if (value === eventValue) return;
+        onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(eventValue, event));
+        setValue(eventValue);
+        eventValue === '' && forceFocus();
     };
     var focus = function focus(event) {
-        var value = event.target.value;
-        onFocus && (onFocus === null || onFocus === void 0 ? void 0 : onFocus(value, event));
+        var _event_detail;
+        onFocus && onFocus(event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
     };
     var blur = function blur(event) {
+        var _event_detail;
         var searchSelf = searchRef.current;
         searchSelf && searchSelf.blur();
-        var value = event.target.value;
-        onBlur && (onBlur === null || onBlur === void 0 ? void 0 : onBlur(value, event));
+        onBlur && onBlur(event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
     };
     (0, _react.useEffect)(function() {
         setValue(outerValue || '');
@@ -72,28 +74,21 @@ var SearchBar = function SearchBar(props) {
         autoFocus
     ]);
     var renderField = function renderField() {
-        return /*#__PURE__*/ _react.default.createElement("input", {
+        return /*#__PURE__*/ _react.default.createElement(_components.Input, {
             className: "".concat(classPrefix, "-input ").concat(clearable ? "".concat(classPrefix, "-input-clear") : ''),
             ref: searchRef,
             style: style,
             value: value || '',
             placeholder: placeholder || locale.placeholder,
-            disabled: disabled,
-            readOnly: readOnly,
-            maxLength: maxLength,
-            onKeyPress: onKeypress,
-            onChange: function onChange(e) {
-                return change(e);
-            },
-            onFocus: function onFocus(e) {
-                return focus(e);
-            },
-            onBlur: function onBlur(e) {
-                return blur(e);
-            },
-            onClick: function onClick(e) {
-                return clickInput(e);
-            }
+            disabled: disabled || readOnly,
+            maxlength: maxLength,
+            // @ts-ignore
+            // onKeyDown={onKeypress}
+            onInput: onInput,
+            onFocus: focus,
+            onBlur: blur,
+            onClick: clickInput,
+            onConfirm: onConfirm
         });
     };
     var clickInput = function clickInput(e) {
@@ -144,13 +139,16 @@ var SearchBar = function SearchBar(props) {
         onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(''));
         onClear && onClear(event);
     };
-    var onKeypress = function onKeypress(e) {
-        if (e.key === 'Enter' || e.keyCode === 13) {
-            if (typeof e.cancelable !== 'boolean' || e.cancelable) {
-                e.preventDefault();
-            }
-            onSearch && onSearch(value);
-        }
+    //   const onKeypress = (event: any) => {
+    //     if (event?.detail?.keyCode === 13) {
+    //       if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+    //         event.preventDefault()
+    //       }
+    //       onSearch && onSearch(value as string)
+    //     }
+    //   }
+    var onConfirm = function onConfirm() {
+        onSearch && onSearch(value);
     };
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, " ").concat(disabled ? "".concat(classPrefix, "-disabled") : '', "  ").concat(className || ''),

package/dist/cjs/packages/searchbar/style/searchbar.scss

@@ -35,7 +35,8 @@
 
   &-left,
   &-right {
-    display: flex;
+    display: inline-flex;
+    align-items: center;
 
     &.nut-icon {
       width: 20px;
@@ -48,7 +49,9 @@
 
     & > div,
     & > span,
-    & > svg {
+    & > i,
+    & > svg,
+    .nut-icon {
       margin-right: $searchbar-gap;
 
       &:last-child {
@@ -59,10 +62,11 @@
 
   &-right {
     margin-left: $searchbar-gap;
-
     & > div,
     & > span,
-    & > svg {
+    & > i,
+    & > svg,
+    .nut-icon {
       margin-left: $searchbar-gap;
 
       &:first-child {
@@ -89,7 +93,8 @@
     }
   }
 
-  &-input-box {
+  &-input-box,
+  &-input {
     display: flex;
     align-items: center;
     flex: 1;
@@ -100,8 +105,6 @@
     outline: 0;
     box-sizing: border-box;
     width: 100%;
-    height: $searchbar-input-height;
-    line-height: $searchbar-input-height;
     padding: $searchbar-input-padding;
     font-size: $searchbar-font-size;
     color: $searchbar-input-text-color;

package/dist/cjs/packages/searchbar/style/style.css

@@ -1,10 +1,14 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-searchbar {
   display: flex;
   align-items: center;
   width: var(--nutui-searchbar-width, 100%);
   padding: var(--nutui-searchbar-padding, 6px 16px);
-  background: var(--nutui-searchbar-background, var(--nutui-color-background, #f5f6fa));
-  color: var(--nutui-searchbar-color, var(--nutui-color-title, #1a1a1a));
+  background: var(--nutui-searchbar-background, var(--nutui-gray-3));
+  color: var(--nutui-searchbar-color, var(--nutui-gray-7));
   font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
   box-sizing: border-box;
   justify-content: center;
@@ -16,7 +20,7 @@
   justify-content: center;
   padding: var(--nutui-searchbar-content-padding, 0 12px);
   height: var(--nutui-searchbar-input-height, 32px);
-  background: var(--nutui-searchbar-content-background, var(--nutui-color-background-overlay, #ffffff));
+  background: var(--nutui-searchbar-content-background, var(--nutui-gray-1));
   border-radius: var(--nutui-searchbar-content-border-radius, 4px);
 }
 .nut-searchbar-icon {
@@ -30,7 +34,8 @@
   color: var(--nutui-black-5);
 }
 .nut-searchbar-left, .nut-searchbar-right {
-  display: flex;
+  display: inline-flex;
+  align-items: center;
 }
 .nut-searchbar-left.nut-icon, .nut-searchbar-right.nut-icon {
   width: 20px;
@@ -39,19 +44,23 @@
 .nut-searchbar-left {
   margin-right: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-left > div, .nut-searchbar-left > span, .nut-searchbar-left > svg {
+.nut-searchbar-left > div, .nut-searchbar-left > span, .nut-searchbar-left > i, .nut-searchbar-left > svg,
+.nut-searchbar-left .nut-icon {
   margin-right: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > svg:last-child {
+.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > i:last-child, .nut-searchbar-left > svg:last-child,
+.nut-searchbar-left .nut-icon:last-child {
   margin-right: 0;
 }
 .nut-searchbar-right {
   margin-left: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-right > div, .nut-searchbar-right > span, .nut-searchbar-right > svg {
+.nut-searchbar-right > div, .nut-searchbar-right > span, .nut-searchbar-right > i, .nut-searchbar-right > svg,
+.nut-searchbar-right .nut-icon {
   margin-left: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > svg:first-child {
+.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > i:first-child, .nut-searchbar-right > svg:first-child,
+.nut-searchbar-right .nut-icon:first-child {
   margin-left: 0;
 }
 .nut-searchbar-left > text, .nut-searchbar-left > view {
@@ -66,7 +75,7 @@
 .nut-searchbar-right > text:first-child, .nut-searchbar-right > view:first-child {
   margin-left: 0;
 }
-.nut-searchbar-input-box {
+.nut-searchbar-input-box, .nut-searchbar-input {
   display: flex;
   align-items: center;
   flex: 1;
@@ -76,12 +85,10 @@
   outline: 0;
   box-sizing: border-box;
   width: 100%;
-  height: var(--nutui-searchbar-input-height, 32px);
-  line-height: var(--nutui-searchbar-input-height, 32px);
   padding: var(--nutui-searchbar-input-padding, 0 4px);
   font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-searchbar-input-text-color, var(--nutui-color-title, #1a1a1a));
-  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-searchbar-input-text-color, var(--nutui-gray-7));
+  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-gray-7));
   background: transparent;
   text-align: var(--nutui-searchbar-input-text-align, left);
 }

package/dist/cjs/packages/searchbar/style/style.harmony.css

@@ -1,10 +1,14 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-searchbar {
   display: flex;
   align-items: center;
   width: 100%;
   padding: 6px 16px;
-  background: #F7F8FC;
-  color: #1A1A1A;
+  background: #f2f3f5;
+  color: #1a1a1a;
   font-size: 14px;
   box-sizing: border-box;
   justify-content: center;
@@ -27,15 +31,16 @@
 .nut-searchbar-clear {
   width: 16px;
   height: 16px;
-  color: undefined;
+  color: rgba(0, 0, 0, 0.2);
 }
 .nut-searchbar-rightin {
   width: 16px;
   height: 16px;
-  color: undefined;
+  color: rgba(0, 0, 0, 0.2);
 }
 .nut-searchbar-left, .nut-searchbar-right {
-  display: flex;
+  display: inline-flex;
+  align-items: center;
 }
 .nut-searchbar-left.nut-icon, .nut-searchbar-right.nut-icon {
   width: 20px;
@@ -50,10 +55,17 @@
 .nut-searchbar-left > span {
   margin-right: 16px;
 }
+.nut-searchbar-left > i {
+  margin-right: 16px;
+}
 .nut-searchbar-left > svg {
   margin-right: 16px;
 }
-.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > svg:last-child {
+.nut-searchbar-left .nut-icon {
+  margin-right: 16px;
+}
+.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > i:last-child, .nut-searchbar-left > svg:last-child,
+.nut-searchbar-left .nut-icon:last-child {
   margin-right: 0;
 }
 .nut-searchbar-right {
@@ -65,10 +77,17 @@
 .nut-searchbar-right > span {
   margin-left: 16px;
 }
+.nut-searchbar-right > i {
+  margin-left: 16px;
+}
 .nut-searchbar-right > svg {
   margin-left: 16px;
 }
-.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > svg:first-child {
+.nut-searchbar-right .nut-icon {
+  margin-left: 16px;
+}
+.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > i:first-child, .nut-searchbar-right > svg:first-child,
+.nut-searchbar-right .nut-icon:first-child {
   margin-left: 0;
 }
 .nut-searchbar-left > text {
@@ -89,7 +108,7 @@
 .nut-searchbar-right > text:first-child, .nut-searchbar-right > view:first-child {
   margin-left: 0;
 }
-.nut-searchbar-input-box {
+.nut-searchbar-input-box, .nut-searchbar-input {
   display: flex;
   align-items: center;
   flex: 1;
@@ -99,12 +118,10 @@
   outline: 0;
   box-sizing: border-box;
   width: 100%;
-  height: 32px;
-  line-height: 32px;
   padding: 0 4px;
   font-size: 14px;
-  color: #1A1A1A;
-  caret-color: #1A1A1A;
+  color: #1a1a1a;
+  caret-color: #1a1a1a;
   background: transparent;
   text-align: left;
 }

package/dist/cjs/packages/segmented/index.d.ts

@@ -0,0 +1,3 @@
+import { Segmented } from "./segmented";
+export type { SegmentedProps, SegmentedItem } from './types';
+export default Segmented;

package/dist/cjs/packages/segmented/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _segmented = require("./segmented");
+var _default = _segmented.Segmented;

package/dist/cjs/packages/segmented/segmented.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SegmentedProps } from './types';
+export declare const Segmented: (props: Partial<SegmentedProps>) => React.JSX.Element;

package/dist/cjs/packages/segmented/segmented.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Segmented", {
+    enumerable: true,
+    get: function() {
+        return Segmented;
+    }
+});
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _define_property = require("@swc/helpers/_/_define_property");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _type_of = require("@swc/helpers/_/_type_of");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _components = require("@tarojs/components");
+var _usepropsvalue = require("../../utils/use-props-value");
+var _mergeprops = require("../../utils/merge-props");
+var defaultProps = {
+    options: [],
+    onChange: function onChange(value) {}
+};
+var Segmented = function Segmented(props) {
+    var classPrefix = 'nut-segmented';
+    var itemClassPrefix = 'nut-segmented-item';
+    var mergedProps = (0, _mergeprops.mergeProps)(defaultProps, props);
+    var options = mergedProps.options, onChange = mergedProps.onChange;
+    var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
+        value: mergedProps.value,
+        defaultValue: mergedProps.defaultValue,
+        finalValue: 0,
+        onChange: mergedProps.onChange
+    }), 2), value = _usePropsValue[0], setValue = _usePropsValue[1];
+    var renderItems = (0, _react.useCallback)(function(options, value) {
+        return options.map(function(option, index) {
+            var optionType = typeof option === "undefined" ? "undefined" : (0, _type_of._)(option);
+            switch(optionType){
+                case 'object':
+                    // eslint-disable-next-line no-case-declarations
+                    var opt = option;
+                    var _obj;
+                    return /*#__PURE__*/ _react.default.createElement(_components.View, {
+                        className: (0, _classnames.default)(itemClassPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(itemClassPrefix, "-active"), opt.value === value), (0, _define_property._)(_obj, "".concat(opt.className), !!opt.className), _obj)),
+                        key: opt.value,
+                        onClick: function onClick() {
+                            if (opt.disabled) return;
+                            setValue(option.value);
+                        }
+                    }, opt.icon ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+                        className: "nut-segmented-icon"
+                    }, opt.icon) : null, opt.label);
+                default:
+                    {
+                        if (typeof option !== 'string' && typeof option !== 'number') {
+                            console.warn('Unsupported option type:', optionType);
+                        }
+                        return /*#__PURE__*/ _react.default.createElement(_components.View, {
+                            className: (0, _classnames.default)(itemClassPrefix, (0, _define_property._)({}, "".concat(itemClassPrefix, "-active"), index === value)),
+                            key: option.toString(),
+                            onClick: function onClick() {
+                                setValue(index);
+                            }
+                        }, option);
+                    }
+            }
+        });
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: (0, _classnames.default)(classPrefix),
+        style: mergedProps.style
+    }, renderItems(options, value));
+};

package/dist/cjs/packages/segmented/style/css.js

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

package/dist/cjs/packages/segmented/style/index.js

@@ -0,0 +1 @@
+import './segmented.scss';

package/dist/cjs/packages/segmented/style/segmented.scss

@@ -0,0 +1,38 @@
+.nut-segmented {
+  display: inline-flex;
+  height: $segmented-height;
+  min-width: 24px;
+  padding: $segmented-padding;
+  align-items: center;
+  border-radius: $segmented-border-radius;
+  background: $color-mask-part;
+  box-sizing: border-box;
+}
+
+.nut-segmented-item {
+  display: flex;
+  height: $segmented-item-height;
+  align-items: center;
+  justify-content: center;
+  padding: $segmented-item-padding;
+  border-radius: $segmented-item-radius;
+  color: $segmented-item-color;
+  font-size: $segmented-item-fontsize;
+  line-height: 1;
+  box-sizing: border-box;
+}
+
+.nut-segmented-item-active {
+  background: $segmented-active-background;
+}
+
+.nut-segmented-icon {
+  height: 10px;
+  width: 10px;
+  margin-right: $segmented-icon-margin-right;
+  .nut-icon {
+    height: 10px;
+    width: 10px;
+    font-size: 10px;
+  }
+}

package/dist/cjs/packages/segmented/style/style.css

@@ -0,0 +1,42 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-segmented {
+  display: inline-flex;
+  height: var(--nutui-segmented-height, 24px);
+  min-width: 24px;
+  padding: var(--nutui-segmented-padding, var(--nutui-spacing-xxxs, 2px));
+  align-items: center;
+  border-radius: var(--nutui-segmented-radius, var(--nutui-radius-xs, 4px));
+  background: var(--nutui-black-7);
+  box-sizing: border-box;
+}
+
+.nut-segmented-item {
+  display: flex;
+  height: var(--nutui-segmented-height, 20px);
+  align-items: center;
+  justify-content: center;
+  padding: var(--nutui-segmented-item-padding, 0 var(--nutui-spacing-xs, 6px));
+  border-radius: var(--nutui-segmented-item-radius, var(--nutui-radius-xs, 4px));
+  color: var(--nutui-segmented-item-color, #ffffff);
+  font-size: var(--nutui-segmented-item-fontsize, var(--nutui-font-size-s, 12px));
+  line-height: 1;
+  box-sizing: border-box;
+}
+
+.nut-segmented-item-active {
+  background: var(--nutui-segmented-active-background, var(--nutui-black-7));
+}
+
+.nut-segmented-icon {
+  height: 10px;
+  width: 10px;
+  margin-right: var(--nutui-segmented-icon-margin-right, var(--nutui-spacing-xxxs, 2px));
+}
+.nut-segmented-icon .nut-icon {
+  height: 10px;
+  width: 10px;
+  font-size: 10px;
+}

package/dist/cjs/packages/segmented/style/style.harmony.css

@@ -0,0 +1,42 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-segmented {
+  display: inline-flex;
+  height: 24px;
+  min-width: 24px;
+  padding: 2px;
+  align-items: center;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.4);
+  box-sizing: border-box;
+}
+
+.nut-segmented-item {
+  display: flex;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+  border-radius: 4px;
+  color: #ffffff;
+  font-size: 12px;
+  line-height: 1;
+  box-sizing: border-box;
+}
+
+.nut-segmented-item-active {
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.nut-segmented-icon {
+  height: 10px;
+  width: 10px;
+  margin-right: 2px;
+}
+.nut-segmented-icon .nut-icon {
+  height: 10px;
+  width: 10px;
+  font-size: 10px;
+}

package/dist/cjs/packages/segmented/types.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { BasicComponent } from "../../utils/typings";
+export interface SegmentedItem {
+    label: ReactNode;
+    value: string | number;
+    icon?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+export interface SegmentedProps extends BasicComponent {
+    options: string[] | number[] | SegmentedItem[];
+    value: string | number;
+    defaultValue: string | number;
+    onChange: (value: string | number) => void;
+}

package/dist/cjs/packages/segmented/types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});