@nutui/nutui-react-taro 2.0.0-alpha.0 → 2.0.0-alpha.10

package/dist/esm/radio.taro-5d6ca4ad.js

@@ -0,0 +1,153 @@
+import React, { useCallback, useContext } from "react";
+import { CheckChecked, CheckNormal } from "@nutui/icons-react-taro";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+const RadioContext = React.createContext(null);
+const defaultProps$1 = {
+  labelPosition: "right",
+  onChange: (value) => {
+  },
+  direction: "vertical",
+  options: []
+};
+const classPrefix = "nut-radiogroup";
+const RadioGroup = React.forwardRef((props, ref) => {
+  const { children, className, value, defaultValue, onChange, labelPosition, direction, options, disabled, ...rest } = { ...defaultProps$1, ...props };
+  const [val2State, setVal2State] = usePropsValue({
+    defaultValue: props.defaultValue,
+    value: props.value,
+    finalValue: "",
+    onChange
+  });
+  const renderOptionsChildren = useCallback(() => {
+    return options == null ? void 0 : options.map(({ label, value: value2, disabled: disabled2, onChange: onChange2, ...rest2 }) => {
+      return React.createElement(Radio, { ...rest2, key: value2 == null ? void 0 : value2.toString(), children: label, value: value2, disabled: disabled2, onChange: onChange2, labelPosition, checked: value2 === val2State });
+    });
+  }, [options]);
+  return React.createElement(
+    RadioContext.Provider,
+    { value: {
+      labelPosition: labelPosition || "right",
+      disabled,
+      value: val2State,
+      check: (value2) => {
+        setVal2State(value2);
+      },
+      uncheck: () => {
+        setVal2State("");
+      }
+    } },
+    React.createElement("div", { className: classNames(classPrefix, className, {
+      [`${classPrefix}--${props.direction}`]: props.direction
+    }), ...rest }, (options == null ? void 0 : options.length) ? renderOptionsChildren() : children)
+  );
+});
+RadioGroup.defaultProps = defaultProps$1;
+RadioGroup.displayName = "NutRadioGroup";
+const defaultProps = {
+  ...ComponentDefaults,
+  disabled: false,
+  shape: "round",
+  value: "",
+  labelPosition: "right",
+  icon: null,
+  activeIcon: null,
+  onChange: (checked) => {
+  }
+};
+const Radio = (props) => {
+  const classPrefix2 = "nut-radio";
+  const { children, className, style, checked, defaultChecked, shape, value, icon, activeIcon, onChange, ...others } = {
+    ...defaultProps,
+    ...props
+  };
+  let { labelPosition, disabled, ...rest } = others;
+  let [checkedStatement, setCheckedStatement] = usePropsValue({
+    value: checked,
+    defaultValue: defaultChecked,
+    finalValue: false,
+    onChange
+  });
+  const context = useContext(RadioContext);
+  if (context) {
+    checkedStatement = context.value === value;
+    if (context.labelPosition !== void 0) {
+      labelPosition = context.labelPosition;
+    }
+    if (context.disabled !== void 0) {
+      disabled = context.disabled;
+    }
+    setCheckedStatement = (value2) => {
+      if (value2) {
+        context.check(props.value === void 0 ? "" : props.value);
+      } else {
+        context.uncheck();
+      }
+    };
+  }
+  const renderLabel = () => {
+    return React.createElement("div", { className: classNames(`${classPrefix2}__label`, {
+      [`${classPrefix2}__label--disabled`]: disabled
+    }) }, children);
+  };
+  const renderButton = () => {
+    return React.createElement("div", { className: classNames(`${classPrefix2}__button`, {
+      [`${classPrefix2}__button--active`]: checkedStatement,
+      [`${classPrefix2}__button--disabled`]: disabled
+    }) }, children);
+  };
+  const color = () => {
+    return {
+      [`${classPrefix2}__icon--disable`]: disabled,
+      [`${classPrefix2}__icon`]: checkedStatement,
+      [`${classPrefix2}__icon--unchecked`]: !checkedStatement
+    };
+  };
+  const renderIcon = () => {
+    const { icon: icon2, activeIcon: activeIcon2 } = props;
+    if (checkedStatement) {
+      return React.isValidElement(activeIcon2) ? React.cloneElement(activeIcon2, {
+        ...activeIcon2.props,
+        className: classNames(color())
+      }) : React.createElement(CheckChecked, { className: classNames(color()) });
+    }
+    return React.isValidElement(icon2) ? React.cloneElement(icon2, {
+      ...icon2.props,
+      className: classNames(color())
+    }) : React.createElement(CheckNormal, { className: classNames(color()) });
+  };
+  const reverse = labelPosition === "left";
+  const renderRadioItem = () => {
+    if (shape === "button") {
+      return renderButton();
+    }
+    if (reverse) {
+      return React.createElement(
+        React.Fragment,
+        null,
+        renderLabel(),
+        renderIcon()
+      );
+    }
+    return React.createElement(
+      React.Fragment,
+      null,
+      renderIcon(),
+      renderLabel()
+    );
+  };
+  const handleClick = (e) => {
+    if (disabled || checkedStatement)
+      return;
+    setCheckedStatement(!checkedStatement);
+  };
+  return React.createElement("div", { className: `${classPrefix2} ${className} ${reverse ? `${classPrefix2}--reverse` : ""}`, style, onClick: handleClick, ...rest }, renderRadioItem());
+};
+Radio.defaultProps = defaultProps;
+Radio.displayName = "NutRadio";
+Radio.Group = RadioGroup;
+export {
+  Radio as R,
+  RadioGroup as a
+};

package/dist/esm/range.taro-615e193a.js

@@ -0,0 +1,259 @@
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import classNames from "classnames";
+import { View } from "@tarojs/components";
+import { u as useTouch } from "./use-touch-ff43512c.js";
+import { g as getRectByTaro } from "./use-client-rect-f317804e.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  range: false,
+  min: 0,
+  max: 100,
+  step: 1,
+  vertical: false,
+  marks: {}
+};
+const Range = (props) => {
+  const { className, range, disabled, button, vertical, marks, onChange, onStart, onEnd, minDescription, maxDescription, currentDescription, min, max, step, value, defaultValue } = { ...defaultProps, ...props };
+  const classPrefix = "nut-range";
+  const [buttonIndex, setButtonIndex] = useState(0);
+  const [dragStatus, setDragStatus] = useState("start");
+  const touch = useTouch();
+  const root = useRef(null);
+  const [marksList, setMarksList] = useState([]);
+  const [startValue, setStartValue] = useState(0);
+  const handleChange = (value2) => {
+    onChange && onChange(value2);
+  };
+  const [current, setCurrent] = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: 0,
+    onChange: handleChange
+  });
+  const [exactValue, setEaxctValue] = useState(() => value || defaultValue || 0);
+  useEffect(() => {
+    if (marks) {
+      const marksKeys = Object.keys(marks);
+      const list = marksKeys.map(parseFloat).sort((a, b) => a - b).filter((point) => point >= min && point <= max);
+      setMarksList(list);
+    }
+  }, [marks]);
+  const scope = () => {
+    return max - min;
+  };
+  const classes = classNames(classPrefix, {
+    [`${classPrefix}-disabled`]: disabled,
+    [`${classPrefix}-vertical`]: vertical
+  });
+  const containerClasses = classNames(`${classPrefix}-container`, className, {
+    [`${classPrefix}-container-vertical`]: vertical
+  });
+  const markClassName = useCallback((mark) => {
+    const classPrefix2 = "nut-range-mark";
+    let lowerBound = min;
+    let upperBound = max;
+    if (range && Array.isArray(current)) {
+      lowerBound = current[0];
+      upperBound = current[1];
+    } else {
+      upperBound = current;
+    }
+    const isActive = mark <= upperBound && mark >= lowerBound;
+    return [
+      `${classPrefix2}-text`,
+      `${isActive ? `${classPrefix2}-text-active` : ""}`
+    ].join(" ");
+  }, [range, current, min, max]);
+  const isRange = (val) => {
+    return !!range && Array.isArray(val);
+  };
+  const calcMainAxis = () => {
+    const modelVal = current;
+    if (isRange(modelVal)) {
+      return `${(modelVal[1] - modelVal[0]) * 100 / scope()}%`;
+    }
+    return `${(modelVal - min) * 100 / scope()}%`;
+  };
+  const calcOffset = () => {
+    const modelVal = current;
+    if (isRange(modelVal)) {
+      return `${(modelVal[0] - min) * 100 / scope()}%`;
+    }
+    return `0%`;
+  };
+  const barStyle = () => {
+    if (vertical) {
+      return {
+        height: calcMainAxis(),
+        top: calcOffset(),
+        transition: dragStatus ? "none" : void 0
+      };
+    }
+    return {
+      width: calcMainAxis(),
+      left: calcOffset(),
+      transition: dragStatus ? "none" : void 0
+    };
+  };
+  const marksStyle = (mark) => {
+    let style = {
+      left: `${(mark - min) / scope() * 100}%`
+    };
+    if (vertical) {
+      style = {
+        top: `${(mark - min) / scope() * 100}%`
+      };
+    }
+    return style;
+  };
+  const tickClass = (mark) => {
+    if (range && Array.isArray(current)) {
+      return mark <= current[1] && mark >= current[0];
+    }
+    return mark <= current;
+  };
+  const format = (value2) => {
+    value2 = Math.max(+min, Math.min(value2, +max));
+    return Math.round(value2 / +step) * +step;
+  };
+  const isSameValue = (newValue, oldValue) => {
+    return JSON.stringify(newValue) === JSON.stringify(oldValue);
+  };
+  const handleOverlap = (value2) => {
+    if (value2[0] > value2[1]) {
+      return value2.slice(0).reverse();
+    }
+    return value2;
+  };
+  const updateValue = (value2, end) => {
+    if (isRange(value2)) {
+      value2 = handleOverlap(value2).map(format);
+    } else {
+      value2 = format(value2);
+    }
+    if (!isSameValue(value2, current)) {
+      setCurrent(value2);
+    }
+    end && onEnd && onEnd(value2);
+  };
+  const click = async (event) => {
+    if (disabled || !root.current) {
+      return;
+    }
+    setDragStatus("");
+    const rect = await getRectByTaro(root.current);
+    let delta = (event.detail.x ? event.detail.x : event.clientX) - rect.left;
+    let total = rect.width;
+    if (vertical) {
+      delta = (event.detail.y ? event.detail.y : event.clientY) - rect.top;
+      total = rect.height;
+    }
+    const value2 = min + delta / total * scope();
+    setEaxctValue(current);
+    if (isRange(current)) {
+      const [left, right] = current;
+      const middle = (left + right) / 2;
+      if (value2 <= middle) {
+        updateValue([value2, right], true);
+      } else {
+        updateValue([left, value2], true);
+      }
+    } else {
+      updateValue(value2, true);
+    }
+  };
+  const onTouchStart = (event) => {
+    if (disabled) {
+      return;
+    }
+    touch.start(event);
+    setEaxctValue(current);
+    if (isRange(current)) {
+      setStartValue(current.map(format));
+    } else {
+      setStartValue(format(current));
+    }
+    setDragStatus("start");
+  };
+  const onTouchMove = async (event) => {
+    if (disabled || !root.current) {
+      return;
+    }
+    if (dragStatus === "start") {
+      onStart && onStart();
+    }
+    touch.move(event);
+    setDragStatus("draging");
+    const rect = await getRectByTaro(root.current);
+    let delta = touch.deltaX;
+    let total = rect.width;
+    let diff = delta / total * scope();
+    if (vertical) {
+      delta = touch.deltaY;
+      total = rect.height;
+      diff = delta / total * scope();
+    }
+    let newValue;
+    if (isRange(startValue)) {
+      newValue = exactValue.slice();
+      newValue[buttonIndex] = startValue[buttonIndex] + diff;
+    } else {
+      newValue = startValue + diff;
+    }
+    setEaxctValue(newValue);
+    updateValue(newValue);
+  };
+  const onTouchEnd = (event) => {
+    if (disabled) {
+      return;
+    }
+    if (dragStatus === "draging") {
+      updateValue(current, true);
+    }
+    setDragStatus("");
+  };
+  const curValue = (idx) => {
+    const modelVal = current;
+    const value2 = typeof idx === "number" ? modelVal[idx] : modelVal;
+    return value2;
+  };
+  const renderButton = (index) => {
+    return React.createElement(React.Fragment, null, button || React.createElement("div", { className: "nut-range-button" }, currentDescription !== null && React.createElement("div", { className: "number" }, currentDescription ? currentDescription(curValue(index)) : curValue(index))));
+  };
+  return React.createElement(
+    "div",
+    { className: containerClasses },
+    minDescription !== null && React.createElement("div", { className: "min" }, minDescription || min),
+    React.createElement(
+      "div",
+      { ref: root, className: classes, onClick: (e) => click(e) },
+      marksList.length > 0 && React.createElement("div", { className: "nut-range-mark" }, marksList.map((marks2) => {
+        return React.createElement(
+          "span",
+          { key: marks2, className: markClassName(marks2), style: marksStyle(marks2) },
+          marks2,
+          React.createElement("span", { className: classNames("nut-range-tick", {
+            active: tickClass(marks2)
+          }) })
+        );
+      })),
+      React.createElement("div", { className: "nut-range-bar", style: barStyle() }, range ? [0, 1].map((item, index) => {
+        return React.createElement("div", { key: index, className: `${index === 0 ? "nut-range-button-wrapper-left" : ""}
+                  ${index === 1 ? "nut-range-button-wrapper-right" : ""}`, onTouchStart: (e) => {
+          if (typeof index === "number") {
+            setButtonIndex(index);
+          }
+          onTouchStart(e);
+        }, onTouchMove: (e) => onTouchMove(e), onTouchEnd: (e) => onTouchEnd(), onTouchCancel: (e) => onTouchEnd(), onClick: (e) => e.stopPropagation() }, renderButton(index));
+      }) : React.createElement(View, { catchMove: true, className: "nut-range-button-wrapper", onTouchStart: (e) => onTouchStart(e), onTouchMove: (e) => onTouchMove(e), onTouchEnd: (e) => onTouchEnd(), onTouchCancel: (e) => onTouchEnd(), onClick: (e) => e.stopPropagation() }, renderButton()))
+    ),
+    maxDescription !== null && React.createElement("div", { className: "max" }, maxDescription || max)
+  );
+};
+Range.defaultProps = defaultProps;
+Range.displayName = "NutRange";
+export {
+  Range as R
+};

package/dist/esm/rate.taro-78c66969.js

@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import { StarFillN } from "@nutui/icons-react-taro";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  count: 5,
+  min: 0,
+  checkedIcon: null,
+  uncheckedIcon: null,
+  disabled: false,
+  readOnly: false,
+  allowHalf: false
+};
+const Rate = (props) => {
+  const { className, style, count, value, defaultValue, min, checkedIcon, uncheckedIcon, disabled, readOnly, allowHalf, onChange } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-rate";
+  const [countArray, setCountArray] = useState([1, 2, 3, 4, 5]);
+  const [score, setScore] = usePropsValue({
+    value,
+    defaultValue: Math.max(defaultValue || 0, min),
+    finalValue: 0,
+    onChange
+  });
+  useEffect(() => {
+    const tmp = [];
+    for (let i = 1; i <= Number(count); i++) {
+      tmp.push(i);
+    }
+    setCountArray(tmp);
+  }, [count]);
+  const renderIcon = (n) => {
+    return n <= score ? checkedIcon || React.createElement(StarFillN, null) : uncheckedIcon || (checkedIcon ? React.cloneElement(checkedIcon, {
+      color: void 0
+    }) : React.createElement(StarFillN, null));
+  };
+  const onClick = (e, index) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (disabled || readOnly)
+      return;
+    let value2 = 0;
+    if (!(index === 1 && score === index)) {
+      value2 = index;
+    }
+    value2 = Math.max(value2, min);
+    setScore(value2);
+  };
+  const onHalfClick = (event, n) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const value2 = Math.max(min, n - 0.5);
+    setScore(value2);
+  };
+  return React.createElement("div", { className: classNames(classPrefix, className, {
+    disabled,
+    readonly: readOnly
+  }), style }, countArray.map((n) => {
+    return React.createElement(
+      "div",
+      { className: `${classPrefix}-item`, key: n, onClick: (event) => onClick(event, n) },
+      React.createElement("div", { className: classNames(`${classPrefix}-item__icon`, {
+        [`${classPrefix}-item__icon--disabled`]: disabled || n > score
+      }) }, renderIcon(n)),
+      allowHalf && score > n - 1 && React.createElement("div", { className: classNames(`${classPrefix}-item__half`, `${classPrefix}-item__icon`, `${classPrefix}-item__icon--half`), onClick: (event) => onHalfClick(event, n) }, renderIcon(n))
+    );
+  }));
+};
+Rate.defaultProps = defaultProps;
+Rate.displayName = "NutRate";
+export {
+  Rate as R
+};

package/dist/esm/row.taro-8b7febd4.js

@@ -0,0 +1,48 @@
+import React from "react";
+import classNames from "classnames";
+import { D as DataContext } from "./UserContext-ab42ba7f.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const classPrefix = "nut-row";
+const defaultProps = {
+  ...ComponentDefaults,
+  type: "",
+  justify: "start",
+  align: "flex-start",
+  wrap: "nowrap",
+  gutter: "0"
+};
+const Row = (props) => {
+  const { className, style, children, type, justify, align, wrap, gutter, onClick } = {
+    ...defaultProps,
+    ...props
+  };
+  const getClass = (prefix, type2) => {
+    const classType = type2 ? `nut-row-${prefix}-${type2}` : "";
+    const className2 = prefix ? classType : `nut-row-${type2}`;
+    return className2;
+  };
+  const getClasses = () => {
+    return `
+    ${getClass("", type)}
+    ${getClass("justify", justify)}
+    ${getClass("align", align)}
+    ${getClass("flex", wrap)}
+    ${classPrefix}
+   `;
+  };
+  const parentRow = {
+    gutter
+  };
+  return React.createElement(DataContext.Provider, { value: parentRow }, React.createElement("div", {
+    className: classNames(getClasses(), className),
+    style,
+    onClick: (e) => {
+      onClick && onClick(e, "row");
+    }
+  }, children));
+};
+Row.defaultProps = defaultProps;
+Row.displayName = "NutRow";
+export {
+  Row as R
+};

package/dist/esm/searchbar.taro-37ade36e.js

@@ -0,0 +1,159 @@
+import React, { useRef, useState, useEffect } from "react";
+import { getEnv } from "@tarojs/taro";
+import { Search, CircleClose } from "@nutui/icons-react-taro";
+import { c as cn } from "./bem-cdccae08.js";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  placeholder: "",
+  shape: "square",
+  disabled: false,
+  maxLength: 9999,
+  clearable: true,
+  clearSize: "12px",
+  align: "left",
+  readonly: true,
+  autoFocus: false,
+  label: "",
+  leftinIcon: React.createElement(Search, { size: "12" })
+};
+const SearchBar = (props) => {
+  const searchbarBem = cn("searchbar");
+  const { locale } = useConfig();
+  const searchRef = useRef(null);
+  const [value, setValue] = useState(() => props.value);
+  const { placeholder, shape, className, disabled, maxLength, clearable, clearSize, align, readOnly, autoFocus, label, actionText, leftinIcon, rightinIcon, leftoutIcon, rightoutIcon, onChange, onFocus, onBlur, onClear, onCancel, onSearch, onClickInput, onClickLeftinIcon, onClickLeftoutIcon, onClickRightinIcon, onClickRightoutIcon } = {
+    ...defaultProps,
+    ...props
+  };
+  const alignClass = `${align}`;
+  const forceFocus = () => {
+    const searchSelf = searchRef.current;
+    searchSelf && searchSelf.focus();
+  };
+  const change = (event) => {
+    const { value: value2 } = event.target;
+    onChange && (onChange == null ? void 0 : onChange(value2, event));
+    setValue(value2);
+    value2 === "" && forceFocus();
+  };
+  const focus = (event) => {
+    const { value: value2 } = event.target;
+    onFocus && (onFocus == null ? void 0 : onFocus(value2, event));
+  };
+  const blur = (event) => {
+    const searchSelf = searchRef.current;
+    searchSelf && searchSelf.blur();
+    const { value: value2 } = event.target;
+    onBlur && (onBlur == null ? void 0 : onBlur(value2, event));
+  };
+  useEffect(() => {
+    setValue(props.value);
+  }, [props.value]);
+  useEffect(() => {
+    autoFocus && forceFocus();
+  }, [autoFocus]);
+  const renderField = () => {
+    return React.createElement("input", { className: `${searchbarBem("input")}  ${searchbarBem(alignClass)} ${shape === "round" ? searchbarBem("round") : ""} ${clearable ? searchbarBem("input-clear") : ""}`, ref: searchRef, style: { ...props.style }, value: value || "", placeholder: placeholder || locale.placeholder, disabled, readOnly, maxLength, onKeyPress: onKeypress, onChange: (e) => change(e), onFocus: (e) => focus(e), onBlur: (e) => blur(e), onClick: (e) => clickInput(e) });
+  };
+  const clickInput = (e) => {
+    onClickInput && onClickInput(e);
+  };
+  const renderLeftinIcon = () => {
+    if (!leftinIcon)
+      return null;
+    return React.createElement("div", { className: `${searchbarBem("leftin-icon")} ${searchbarBem("icon")}`, onClick: (e) => clickLeftIcon("in-left", e) }, leftinIcon);
+  };
+  const renderLeftoutIcon = () => {
+    if (!leftoutIcon)
+      return null;
+    return React.createElement("div", { className: `${searchbarBem("leftout-icon")}`, onClick: (e) => clickLeftIcon("out-left", e) }, leftoutIcon);
+  };
+  const clickLeftIcon = (flag, event) => {
+    if (flag === "in-left") {
+      onClickLeftinIcon && onClickLeftinIcon(value, event);
+    } else {
+      onClickLeftoutIcon && onClickLeftoutIcon(value, event);
+    }
+  };
+  const renderRightinIcon = () => {
+    if (!rightinIcon)
+      return null;
+    return React.createElement("div", { className: `${searchbarBem("rightin-icon")} ${searchbarBem("icon")}`, onClick: (e) => clickRightIcon("in-right", e) }, rightinIcon);
+  };
+  const renderRightoutIcon = () => {
+    if (!rightoutIcon)
+      return null;
+    return React.createElement("div", { className: `${searchbarBem("rightout-icon")}`, onClick: (e) => clickRightIcon("out-right", e) }, rightoutIcon);
+  };
+  const clickRightIcon = (flag, event) => {
+    if (flag === "in-left") {
+      onClickRightinIcon && onClickRightinIcon(value, event);
+    } else {
+      onClickRightoutIcon && onClickRightoutIcon(value, event);
+    }
+  };
+  const handleClear = () => {
+    return React.createElement(
+      "div",
+      { className: `${searchbarBem("clear")} ${rightinIcon ? "pos-right" : ""}`, onClick: (e) => clearaVal(e) },
+      React.createElement(CircleClose, { size: clearSize, color: "#555" })
+    );
+  };
+  const clearaVal = (event) => {
+    if (disabled || readOnly) {
+      return;
+    }
+    setValue("");
+    onClear && onClear(event);
+    forceFocus();
+  };
+  const renderRightLabel = () => {
+    if (actionText) {
+      return React.createElement("div", { className: searchbarBem("action-text"), onClick: search }, actionText);
+    }
+    return null;
+  };
+  const onKeypress = (e) => {
+    if (e.keyCode === 13) {
+      if (typeof e.cancelable !== "boolean" || e.cancelable) {
+        e.preventDefault();
+      }
+      onSearch && onSearch(value);
+    }
+  };
+  const search = () => {
+    onSearch && onSearch(value);
+  };
+  const renderLabel = () => {
+    if (label) {
+      return React.createElement("div", { className: searchbarBem("label") }, label);
+    }
+    return null;
+  };
+  const envClass = () => {
+    return getEnv() === "WEB" ? "nut-searchbar-taro" : "";
+  };
+  return React.createElement(
+    "div",
+    { className: `${searchbarBem()} ${envClass()} ${disabled ? searchbarBem("disabled") : ""}  ${className || ""}`, style: { ...props.style, background: props.background } },
+    renderLeftoutIcon(),
+    renderLabel(),
+    React.createElement(
+      "div",
+      { className: `${searchbarBem("content")}`, style: { background: props.inputBackground } },
+      renderLeftinIcon(),
+      React.createElement("div", { className: "nut-searchbar__input-box" }, renderField()),
+      renderRightinIcon(),
+      clearable && value && handleClear()
+    ),
+    renderRightoutIcon(),
+    renderRightLabel()
+  );
+};
+SearchBar.defaultProps = defaultProps;
+SearchBar.displayName = "NutSearchBar";
+export {
+  SearchBar as S
+};