@nutui/nutui-react 1.5.2-beta.0 → 1.5.2-beta.1

package/dist/esm/SearchBar.js

@@ -0,0 +1,237 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React__default, { useRef, useState, useEffect } from 'react';
+import { c as cn } from './bem-3b438e61.js';
+import { useConfig } from './ConfigProvider.js';
+import Icon from './Icon.js';
+import { C as ComponentDefaults } from './typings-f27b58f4.js';
+import '@bem-react/classname';
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  placeholder: '',
+  shape: 'square',
+  disabled: false,
+  maxLength: 9999,
+  clearable: true,
+  clearIconSize: '12px',
+  align: 'left',
+  readonly: true,
+  autoFocus: false,
+  label: '',
+  leftinIcon: React__default.createElement(Icon, {
+    name: "search",
+    size: "12"
+  })
+});
+var SearchBar = function SearchBar(props) {
+  var searchbarBem = cn('searchbar');
+  var _useConfig = useConfig(),
+    locale = _useConfig.locale;
+  var searchRef = useRef(null);
+  var _useState = useState(function () {
+      return props.value;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+    placeholder = _defaultProps$props.placeholder,
+    shape = _defaultProps$props.shape,
+    className = _defaultProps$props.className,
+    disabled = _defaultProps$props.disabled,
+    maxLength = _defaultProps$props.maxLength,
+    clearable = _defaultProps$props.clearable,
+    clearIconSize = _defaultProps$props.clearIconSize,
+    align = _defaultProps$props.align,
+    readOnly = _defaultProps$props.readOnly,
+    autoFocus = _defaultProps$props.autoFocus,
+    label = _defaultProps$props.label,
+    actionText = _defaultProps$props.actionText,
+    leftinIcon = _defaultProps$props.leftinIcon,
+    rightinIcon = _defaultProps$props.rightinIcon,
+    leftoutIcon = _defaultProps$props.leftoutIcon,
+    rightoutIcon = _defaultProps$props.rightoutIcon,
+    onChange = _defaultProps$props.onChange,
+    onFocus = _defaultProps$props.onFocus,
+    onBlur = _defaultProps$props.onBlur,
+    onClear = _defaultProps$props.onClear,
+    onCancel = _defaultProps$props.onCancel,
+    onSearch = _defaultProps$props.onSearch,
+    onClickInput = _defaultProps$props.onClickInput,
+    onClickLeftinIcon = _defaultProps$props.onClickLeftinIcon,
+    onClickLeftoutIcon = _defaultProps$props.onClickLeftoutIcon,
+    onClickRightinIcon = _defaultProps$props.onClickRightinIcon,
+    onClickRightoutIcon = _defaultProps$props.onClickRightoutIcon,
+    iconClassPrefix = _defaultProps$props.iconClassPrefix,
+    iconFontClassName = _defaultProps$props.iconFontClassName;
+  var alignClass = "".concat(align);
+  var forceFocus = function forceFocus() {
+    var searchSelf = searchRef.current;
+    searchSelf && searchSelf.focus();
+  };
+  var change = function change(event) {
+    var value = event.target.value;
+    onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(value, event));
+    setValue(value);
+  };
+  var focus = function focus(event) {
+    var value = event.target.value;
+    onFocus && (onFocus === null || onFocus === void 0 ? void 0 : onFocus(value, event));
+  };
+  var blur = function blur(event) {
+    var searchSelf = searchRef.current;
+    searchSelf && searchSelf.blur();
+    var value = event.target.value;
+    onBlur && (onBlur === null || onBlur === void 0 ? void 0 : onBlur(value, event));
+  };
+  useEffect(function () {
+    setValue(props.value);
+  }, [props.value]);
+  useEffect(function () {
+    autoFocus && forceFocus();
+  }, [autoFocus]);
+  var renderField = function renderField() {
+    return React__default.createElement("input", {
+      className: "".concat(searchbarBem('input'), "  ").concat(searchbarBem(alignClass), " ").concat(shape === 'round' ? searchbarBem('round') : '', " ").concat(clearable ? searchbarBem('input-clear') : ''),
+      ref: searchRef,
+      style: _objectSpread({}, props.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);
+      }
+    });
+  };
+  var clickInput = function clickInput(e) {
+    onClickInput && onClickInput(e);
+  };
+  var renderLeftinIcon = function renderLeftinIcon() {
+    if (!leftinIcon) return null;
+    return React__default.createElement("div", {
+      className: "".concat(searchbarBem('leftin-icon'), " ").concat(searchbarBem('icon')),
+      onClick: function onClick(e) {
+        return clickLeftIcon('in-left', e);
+      }
+    }, leftinIcon);
+  };
+  var renderLeftoutIcon = function renderLeftoutIcon() {
+    if (!leftoutIcon) return null;
+    return React__default.createElement("div", {
+      className: "".concat(searchbarBem('leftout-icon')),
+      onClick: function onClick(e) {
+        return clickLeftIcon('out-left', e);
+      }
+    }, leftoutIcon);
+  };
+  var clickLeftIcon = function clickLeftIcon(flag, event) {
+    if (flag === 'in-left') {
+      onClickLeftinIcon && onClickLeftinIcon(value, event);
+    } else {
+      onClickLeftoutIcon && onClickLeftoutIcon(value, event);
+    }
+  };
+  var renderRightinIcon = function renderRightinIcon() {
+    if (!rightinIcon) return null;
+    return React__default.createElement("div", {
+      className: "".concat(searchbarBem('rightin-icon'), " ").concat(searchbarBem('icon')),
+      onClick: function onClick(e) {
+        return clickRightIcon('in-right', e);
+      }
+    }, rightinIcon);
+  };
+  var renderRightoutIcon = function renderRightoutIcon() {
+    if (!rightoutIcon) return null;
+    return React__default.createElement("div", {
+      className: "".concat(searchbarBem('rightout-icon')),
+      onClick: function onClick(e) {
+        return clickRightIcon('out-right', e);
+      }
+    }, rightoutIcon);
+  };
+  var clickRightIcon = function clickRightIcon(flag, event) {
+    if (flag === 'in-left') {
+      onClickRightinIcon && onClickRightinIcon(value, event);
+    } else {
+      onClickRightoutIcon && onClickRightoutIcon(value, event);
+    }
+  };
+  var handleClear = function handleClear() {
+    return React__default.createElement("div", {
+      className: "".concat(searchbarBem('clear'), " ").concat(rightinIcon ? 'pos-right' : ''),
+      onClick: function onClick(e) {
+        return clearaVal(e);
+      }
+    }, React__default.createElement(Icon, {
+      classPrefix: iconClassPrefix,
+      fontClassName: iconFontClassName,
+      name: "circle-close",
+      size: clearIconSize,
+      color: "#555"
+    }));
+  };
+  var clearaVal = function clearaVal(event) {
+    if (disabled || readOnly) {
+      return;
+    }
+    setValue('');
+    onClear && onClear(event);
+    forceFocus();
+  };
+  var renderRightLabel = function renderRightLabel() {
+    if (actionText) {
+      return React__default.createElement("div", {
+        className: searchbarBem('action-text'),
+        onClick: search
+      }, actionText);
+    }
+    return null;
+  };
+  var onKeypress = function onKeypress(e) {
+    if (e.key === 'Enter') {
+      var event = e.nativeEvent;
+      if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+        event.preventDefault();
+      }
+      onSearch && onSearch(value);
+    }
+  };
+  var search = function search() {
+    onSearch && onSearch(value);
+  };
+  var renderLabel = function renderLabel() {
+    if (label) {
+      return React__default.createElement("div", {
+        className: searchbarBem('label')
+      }, label);
+    }
+    return null;
+  };
+  return React__default.createElement("div", {
+    className: "".concat(searchbarBem(), " ").concat(disabled ? searchbarBem('disabled') : '', "  ").concat(className || ''),
+    style: _objectSpread(_objectSpread({}, props.style), {}, {
+      background: props.background
+    })
+  }, renderLeftoutIcon(), renderLabel(), React__default.createElement("div", {
+    className: "".concat(searchbarBem('content')),
+    style: {
+      background: props.inputBackground
+    }
+  }, renderLeftinIcon(), renderField(), renderRightinIcon(), clearable && value && handleClear()), renderRightoutIcon(), renderRightLabel());
+};
+SearchBar.defaultProps = defaultProps;
+SearchBar.displayName = 'NutSearchBar';
+export { SearchBar as default };

package/dist/esm/ShortPassword/style/index.js

@@ -0,0 +1,3 @@
+import '../../Icon/style'
+import '../../Popup/style'
+import '../../../packages/shortpassword/shortpassword.scss'

package/dist/esm/ShortPassword.js

@@ -0,0 +1,193 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["title", "desc", "tips", "visible", "modelValue", "errorMsg", "noButton", "closeOnClickOverlay", "length", "style", "className", "onChange", "onOk", "onTips", "onCancel", "onClose", "onComplete", "iconClassPrefix", "iconFontClassName", "autoFocus"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React__default, { useRef, useState, useEffect } from 'react';
+import { c as cn } from './bem-3b438e61.js';
+import Popup from './Popup.js';
+import Icon from './Icon.js';
+import { useConfig } from './ConfigProvider.js';
+import { C as ComponentDefaults } from './typings-f27b58f4.js';
+import '@bem-react/classname';
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  title: '',
+  desc: '',
+  tips: '',
+  visible: false,
+  modelValue: '',
+  errorMsg: '',
+  noButton: true,
+  closeOnClickOverlay: true,
+  length: 6,
+  className: '',
+  autoFocus: false,
+  onChange: function onChange(value) {},
+  onOk: function onOk(value) {},
+  onCancel: function onCancel() {},
+  onClose: function onClose() {},
+  onTips: function onTips() {},
+  onComplete: function onComplete(value) {}
+});
+var ShortPassword = function ShortPassword(props) {
+  var _useConfig = useConfig(),
+    locale = _useConfig.locale;
+  var title = props.title,
+    desc = props.desc,
+    tips = props.tips,
+    visible = props.visible,
+    modelValue = props.modelValue,
+    errorMsg = props.errorMsg,
+    noButton = props.noButton,
+    closeOnClickOverlay = props.closeOnClickOverlay,
+    length = props.length,
+    style = props.style,
+    className = props.className,
+    onChange = props.onChange,
+    onOk = props.onOk,
+    onTips = props.onTips,
+    onCancel = props.onCancel,
+    onClose = props.onClose,
+    onComplete = props.onComplete,
+    iconClassPrefix = props.iconClassPrefix,
+    iconFontClassName = props.iconFontClassName,
+    autoFocus = props.autoFocus,
+    reset = _objectWithoutProperties(props, _excluded);
+  var b = cn('shortpassword');
+  var textInput = useRef(null);
+  var range = function range(val) {
+    return Math.min(Math.max(4, val), 6);
+  };
+  var _useState = useState(visible),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerVisible = _useState2[0],
+    setInnerVisible = _useState2[1];
+  var _useState3 = useState(range(Number(length))),
+    _useState4 = _slicedToArray(_useState3, 2),
+    comLen = _useState4[0],
+    setComLen = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    inputValue = _useState6[0],
+    setInputValue = _useState6[1];
+  useEffect(function () {
+    setInnerVisible(visible);
+  }, [visible]);
+  useEffect(function () {
+    if (typeof modelValue !== 'undefined') {
+      setInputValue(modelValue);
+    }
+  }, [modelValue]);
+  var changeValue = function changeValue(e) {
+    var inputValue = e.target.value;
+    if (String(inputValue).length > comLen) {
+      inputValue = inputValue.slice(0, comLen);
+    }
+    setInputValue(inputValue);
+    if (String(inputValue).length === comLen) {
+      onComplete && onComplete(inputValue);
+    }
+    onChange && onChange(inputValue);
+  };
+  var systemStyle = function systemStyle() {
+    var u = navigator.userAgent;
+    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // g
+    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
+    var style = {};
+    if (isIOS) {
+      style = {
+        paddingRight: '1200px'
+      };
+    }
+    if (isAndroid) {
+      style = {
+        opacity: 0,
+        zIndex: 10
+      };
+    }
+    return style;
+  };
+  var focus = function focus() {
+    if (textInput.current) {
+      textInput.current.focus();
+    }
+  };
+  var sure = function sure() {
+    onOk && onOk(inputValue);
+  };
+  return React__default.createElement("div", null, React__default.createElement(Popup, {
+    style: {
+      padding: '32px 24px 28px 24px',
+      borderRadius: '12px',
+      textAlign: 'center'
+    },
+    visible: innerVisible,
+    closeable: true,
+    "close-on-click-overlay": closeOnClickOverlay,
+    onClickOverlay: onClose,
+    onClickCloseIcon: onClose
+  }, React__default.createElement("div", _objectSpread({
+    className: "".concat(b(), " ").concat(className),
+    style: _objectSpread({}, style)
+  }, reset), React__default.createElement("div", {
+    className: b('title')
+  }, title || locale.shortpassword.title), React__default.createElement("div", {
+    className: b('subtitle')
+  }, desc || locale.shortpassword.desc), React__default.createElement("div", {
+    className: b('input')
+  }, React__default.createElement("input", {
+    ref: textInput,
+    className: b('input-real'),
+    type: "number",
+    style: systemStyle(),
+    maxLength: 6,
+    value: inputValue,
+    autoFocus: autoFocus,
+    onChange: function onChange(e) {
+      return changeValue(e);
+    }
+  }), React__default.createElement("div", {
+    className: b('input-site')
+  }), React__default.createElement("div", {
+    className: b('input-fake'),
+    onClick: function onClick() {
+      return focus();
+    }
+  }, _toConsumableArray(new Array(comLen).keys()).map(function (item, index) {
+    return React__default.createElement("div", {
+      className: b('input-fake__li'),
+      key: index
+    }, String(inputValue).length > index ? React__default.createElement("div", {
+      className: b('input-fake__li__icon')
+    }) : null);
+  }))), React__default.createElement("div", {
+    className: b('message')
+  }, React__default.createElement("div", {
+    className: b('message__error')
+  }, errorMsg), tips || locale.shortpassword.tips ? React__default.createElement("div", {
+    className: b('message__forget')
+  }, React__default.createElement(Icon, {
+    classPrefix: iconClassPrefix,
+    fontClassName: iconFontClassName,
+    className: "icon",
+    size: "11px",
+    name: "tips"
+  }), React__default.createElement("div", {
+    onClick: onTips
+  }, tips || locale.shortpassword.tips)) : null), !noButton ? React__default.createElement("div", {
+    className: b('footer')
+  }, React__default.createElement("div", {
+    className: b('footer__cancel'),
+    onClick: onCancel
+  }, locale.cancel), React__default.createElement("div", {
+    className: b('footer__sure'),
+    onClick: function onClick() {
+      return sure();
+    }
+  }, locale.confirm)) : null)));
+};
+ShortPassword.defaultProps = defaultProps;
+ShortPassword.displayName = 'NutShortPassword';
+export { ShortPassword as default };

package/dist/esm/SideNavBar/style/index.js

@@ -0,0 +1,2 @@
+import '../../Popup/style'
+import '../../../packages/sidenavbar/sidenavbar.scss'

package/dist/esm/SideNavBar.js

@@ -0,0 +1,58 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "visible", "width", "position", "children", "className", "showhead", "onClose"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React__default from 'react';
+import { useConfig } from './ConfigProvider.js';
+import Popup from './Popup.js';
+import { h as handleClick, O as OffsetContext } from './offsetContext-3ab00d40.js';
+var defaultProps = {
+  showhead: false,
+  position: 'left',
+  width: '80%'
+};
+var SideNavBar = function SideNavBar(props) {
+  useConfig();
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+    title = _defaultProps$props.title,
+    visible = _defaultProps$props.visible,
+    width = _defaultProps$props.width,
+    position = _defaultProps$props.position,
+    children = _defaultProps$props.children,
+    className = _defaultProps$props.className,
+    showhead = _defaultProps$props.showhead,
+    onClose = _defaultProps$props.onClose,
+    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var offset = props.offset ? Number(props.offset) : 20;
+  return React__default.createElement(Popup, {
+    visible: visible,
+    style: {
+      width: width,
+      height: '100%'
+    },
+    position: position,
+    onClose: onClose
+  }, React__default.createElement("div", _objectSpread({
+    className: className ? "".concat(className, " nut-sidenavbar") : 'nut-sidenavbar'
+  }, rest), React__default.createElement("div", {
+    className: "nut-sidenavbar__content"
+  }, React__default.createElement("div", {
+    className: "nut-sidenavbar__list nutShow",
+    onClick: handleClick
+  }, React__default.createElement("div", {
+    className: "nut-sidenavbar__title border-bt ",
+    style: {
+      paddingLeft: "".concat(offset, "px")
+    }
+  }, title, " ", React__default.createElement("i", {
+    className: "arrow-icon arrow-down"
+  })), React__default.createElement(OffsetContext.Provider, {
+    value: offset
+  }, React__default.createElement("div", {
+    className: "nut-sidenavbar__content"
+  }, children))))));
+};
+SideNavBar.defaultProps = defaultProps;
+SideNavBar.displayName = 'NutSideNavBar';
+export { SideNavBar as default };

package/dist/esm/SideNavBarItem/style/index.js

@@ -0,0 +1,2 @@
+
+import '../../../packages/sidenavbaritem/sidenavbaritem.scss'

package/dist/esm/SideNavBarItem.js

@@ -0,0 +1,25 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "ikey", "children", "onClick"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React__default from 'react';
+var SideNavBarItem = function SideNavBarItem(props) {
+  var title = props.title,
+    ikey = props.ikey,
+    children = props.children,
+    onClick = props.onClick,
+    rest = _objectWithoutProperties(props, _excluded);
+  var clickFn = function clickFn(e) {
+    e.stopPropagation();
+    onClick && onClick({
+      title: title,
+      ikey: ikey
+    });
+  };
+  return React__default.createElement("div", _objectSpread({
+    className: "nut-subsidenavbar__item border-bt",
+    onClick: clickFn
+  }, rest), title);
+};
+export { SideNavBarItem as default };

package/dist/esm/Signature/style/index.js

@@ -0,0 +1,2 @@
+import '../../Button/style'
+import '../../../packages/signature/signature.scss'