@nutui/nutui-react 0.1.0-beta.1

package/dist/esm/Input.js

@@ -0,0 +1,186 @@
+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, { useState, useEffect } from 'react';
+import { c as cn } from './bem-893ad28d.js';
+import { I as Icon } from './icon-63c0d58f.js';
+import '@bem-react/classname';
+
+function trimExtraChar(value, _char, regExp) {
+  var index = value.indexOf(_char);
+
+  if (index === -1) {
+    return value;
+  }
+
+  if (_char === '-' && index !== 0) {
+    return value.slice(0, index);
+  }
+
+  return value.slice(0, index + 1) + value.slice(index).replace(regExp, '');
+}
+
+function formatNumber(value) {
+  var allowDot = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var allowMinus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+
+  if (allowDot) {
+    value = trimExtraChar(value, '.', /\./g);
+  } else {
+    value = value.replace(/\./g, '');
+  }
+
+  if (allowMinus) {
+    value = trimExtraChar(value, '-', /-/g);
+  } else {
+    value = value.replace(/-/, '');
+  }
+
+  var regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g;
+  return value.replace(regExp, '');
+}
+
+var defaultProps = {
+  type: 'text',
+  defaultValue: '',
+  placeholder: '请输入信息',
+  label: '',
+  requireShow: false,
+  disabled: false,
+  readonly: false,
+  textAlign: 'left',
+  maxLength: '',
+  clearable: true
+};
+
+var Input = function Input(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      type = _defaultProps$props.type,
+      defaultValue = _defaultProps$props.defaultValue,
+      placeholder = _defaultProps$props.placeholder,
+      label = _defaultProps$props.label,
+      requireShow = _defaultProps$props.requireShow,
+      disabled = _defaultProps$props.disabled,
+      readonly = _defaultProps$props.readonly,
+      textAlign = _defaultProps$props.textAlign,
+      maxLength = _defaultProps$props.maxLength,
+      clearable = _defaultProps$props.clearable,
+      style = _defaultProps$props.style,
+      className = _defaultProps$props.className,
+      change = _defaultProps$props.change,
+      blur = _defaultProps$props.blur,
+      focus = _defaultProps$props.focus,
+      clear = _defaultProps$props.clear;
+
+  var inputBem = cn('input');
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputValue = _useState2[0],
+      SetInputValue = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      active = _useState4[0],
+      SetActive = _useState4[1];
+
+  useEffect(function () {
+    if (defaultValue) {
+      SetInputValue(defaultValue);
+    }
+  }, [defaultValue]);
+
+  var valueChange = function valueChange(event) {
+    var val = event.target.value;
+
+    if (type === 'digit') {
+      val = formatNumber(val, true);
+    }
+
+    if (type === 'number') {
+      val = formatNumber(val, false);
+    }
+
+    if (maxLength && val.length > Number(maxLength)) {
+      val = val.slice(0, Number(maxLength));
+    }
+
+    change && change(val, event);
+    SetInputValue(val);
+  };
+
+  var valueFocus = function valueFocus(event) {
+    var val = event.target.value;
+    SetActive(true);
+
+    if (focus) {
+      focus(val, event);
+    }
+  };
+
+  var valueBlur = function valueBlur(event) {
+    setTimeout(function () {
+      SetActive(false);
+    }, 0);
+    var val = event.target.value;
+
+    if (blur) {
+      blur(val, event);
+    }
+  };
+
+  var handleClear = function handleClear(event) {
+    if (clear) {
+      clear('', event);
+    }
+
+    SetInputValue('');
+  };
+
+  var textAlignStyle = {
+    textAlign: textAlign
+  };
+  return React__default.createElement("div", {
+    className: "".concat(inputBem(), " ").concat(disabled ? inputBem('disabled') : '', "  ").concat(className ? className : '')
+  }, React__default.createElement("div", {
+    className: inputBem('label')
+  }, requireShow ? React__default.createElement("div", {
+    className: inputBem('require')
+  }, "*") : null, label ? React__default.createElement("div", {
+    className: "label-string"
+  }, label) : null), React__default.createElement("input", {
+    className: "input-text",
+    type: type,
+    placeholder: placeholder,
+    disabled: disabled,
+    readOnly: readonly,
+    value: inputValue,
+    style: _objectSpread(_objectSpread({}, style), textAlignStyle),
+    maxLength: maxLength,
+    onBlur: function onBlur(e) {
+      valueBlur(e);
+    },
+    onFocus: function onFocus(e) {
+      valueFocus(e);
+    },
+    onChange: function onChange(e) {
+      valueChange(e);
+    }
+  }), clearable && !readonly && active ? React__default.createElement("div", {
+    onClick: function onClick(e) {
+      handleClear(e);
+    },
+    className: inputBem('clear')
+  }, active && inputValue.length > 0 ? React__default.createElement(Icon, {
+    name: "close-little",
+    size: "12px"
+  }) : null) : null);
+};
+
+Input.defaultProps = defaultProps;
+Input.displayName = 'NutInput';
+export { Input as default };

package/dist/esm/InputNumber.js

@@ -0,0 +1,194 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "disabled", "buttonSize", "min", "max", "inputWidth", "readonly", "modelValue", "decimalPlaces", "step", "isAsync", "className", "style", "add", "reduce", "change", "overlimit", "blur", "focus"];
+
+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, { useState, useEffect } from 'react';
+import Icon from './Icon.js';
+import classNames from 'classnames';
+import { c as cn } from './bem-893ad28d.js';
+import '@bem-react/classname';
+var defaultProps = {
+  disabled: false,
+  buttonSize: '',
+  min: 1,
+  max: 9999,
+  inputWidth: '',
+  readonly: false,
+  modelValue: 0,
+  step: 1,
+  decimalPlaces: 0,
+  isAsync: false
+};
+
+function pxCheck(value) {
+  return Number.isNaN(Number(value)) ? String(value) : "".concat(value, "px");
+}
+
+var InputNumber = function InputNumber(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      children = _defaultProps$props.children,
+      disabled = _defaultProps$props.disabled,
+      buttonSize = _defaultProps$props.buttonSize,
+      min = _defaultProps$props.min,
+      max = _defaultProps$props.max,
+      inputWidth = _defaultProps$props.inputWidth,
+      readonly = _defaultProps$props.readonly,
+      modelValue = _defaultProps$props.modelValue,
+      decimalPlaces = _defaultProps$props.decimalPlaces,
+      step = _defaultProps$props.step,
+      isAsync = _defaultProps$props.isAsync,
+      className = _defaultProps$props.className,
+      style = _defaultProps$props.style,
+      add = _defaultProps$props.add,
+      reduce = _defaultProps$props.reduce,
+      change = _defaultProps$props.change,
+      overlimit = _defaultProps$props.overlimit,
+      blur = _defaultProps$props.blur,
+      focus = _defaultProps$props.focus,
+      restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
+
+  var _useState = useState(modelValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  useEffect(function () {
+    setInputValue(modelValue);
+  }, [modelValue]);
+  var b = cn('inputnumber');
+  var classes = classNames(_defineProperty({}, "".concat(b(''), "--disabled"), disabled), className, b(''));
+
+  var styles = _objectSpread({
+    height: pxCheck(buttonSize)
+  }, style);
+
+  var addAllow = function addAllow() {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Number(inputValue);
+    return value < Number(max) && !disabled;
+  };
+
+  var reduceAllow = function reduceAllow() {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Number(inputValue);
+    return value > Number(min) && !disabled;
+  };
+
+  var iconMinusClasses = classNames('nut-inputnumber__icon', {
+    'nut-inputnumber__icon--disabled': !reduceAllow()
+  });
+  var iconAddClasses = classNames('nut-inputnumber__icon', {
+    'nut-inputnumber__icon--disabled': !addAllow()
+  });
+
+  var fixedDecimalPlaces = function fixedDecimalPlaces(v) {
+    return Number(v).toFixed(Number(decimalPlaces));
+  };
+
+  var emitChange = function emitChange(value, e) {
+    var output_value = fixedDecimalPlaces(value);
+    change && change(output_value, e);
+
+    if (!isAsync) {
+      if (Number(output_value) < Number(min)) {
+        setInputValue(Number(min));
+      } else if (Number(output_value) > Number(max)) {
+        setInputValue(Number(max));
+      } else {
+        setInputValue(output_value);
+      }
+    }
+  };
+
+  var reduceNumber = function reduceNumber(e) {
+    reduce && reduce(e);
+
+    if (reduceAllow()) {
+      var output_value = Number(inputValue) - Number(step);
+      emitChange(output_value, e);
+    } else {
+      overlimit && overlimit(e);
+    }
+  };
+
+  var addNumber = function addNumber(e) {
+    add && add(e);
+
+    if (addAllow()) {
+      var output_value = Number(inputValue) + Number(step);
+      emitChange(output_value, e);
+    } else {
+      overlimit && overlimit(e);
+    }
+  };
+
+  var changeValue = function changeValue(e) {
+    var input = e.target;
+    change && change(input.valueAsNumber, e);
+
+    if (!isAsync) {
+      if (Number.isNaN(input.valueAsNumber)) {
+        setInputValue(inputValue);
+      } else {
+        setInputValue(input.valueAsNumber);
+      }
+    }
+  };
+
+  var focusValue = function focusValue(e) {
+    if (disabled) return;
+    if (readonly) return;
+    focus && focus(e);
+  };
+
+  var burValue = function burValue(e) {
+    if (disabled) return;
+    if (readonly) return;
+    var input = e.target;
+    var value = input.valueAsNumber;
+
+    if (value < Number(min)) {
+      value = Number(min);
+    } else if (value > Number(max)) {
+      value = Number(max);
+    }
+
+    emitChange(value, e);
+    blur && blur(e);
+  };
+
+  return React__default.createElement("div", _objectSpread({
+    className: classes,
+    style: styles
+  }, restProps), React__default.createElement(Icon, {
+    className: iconMinusClasses,
+    size: buttonSize,
+    name: "minus",
+    click: reduceNumber
+  }), React__default.createElement("input", {
+    type: "number",
+    min: min,
+    max: max,
+    style: {
+      width: pxCheck(inputWidth)
+    },
+    disabled: disabled,
+    readOnly: readonly,
+    value: inputValue,
+    onInput: changeValue,
+    onBlur: burValue,
+    onFocus: focusValue
+  }), React__default.createElement(Icon, {
+    className: iconAddClasses,
+    size: buttonSize,
+    name: "plus",
+    click: addNumber
+  }));
+};
+
+InputNumber.defaultProps = defaultProps;
+InputNumber.displayName = 'NutInputNumber';
+export { InputNumber as default };

package/dist/esm/Layout.js

@@ -0,0 +1,20 @@
+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 from 'react';
+var defaultProps = {};
+
+var Layout = function Layout(props) {
+  _objectSpread(_objectSpread({}, defaultProps), props);
+
+  return React__default.createElement("div", {
+    className: "nut-layout"
+  }, "Layout");
+};
+
+Layout.defaultProps = defaultProps;
+Layout.displayName = 'NutLayout';
+export { Layout as default };

package/dist/esm/NavBar.js

@@ -0,0 +1,67 @@
+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 from 'react';
+import { I as Icon } from './icon-63c0d58f.js';
+import { c as cn } from './bem-893ad28d.js';
+import '@bem-react/classname';
+var defaultProps = {
+  title: '',
+  desc: '',
+  leftShow: false,
+  icon: '',
+  titIcon: '',
+  className: ''
+};
+
+var NavBar = function NavBar(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      desc = _defaultProps$props.desc,
+      icon = _defaultProps$props.icon,
+      title = _defaultProps$props.title,
+      titIcon = _defaultProps$props.titIcon,
+      leftShow = _defaultProps$props.leftShow,
+      className = _defaultProps$props.className,
+      style = _defaultProps$props.style,
+      onClickTitle = _defaultProps$props.onClickTitle,
+      onClickIcon = _defaultProps$props.onClickIcon,
+      onClickBack = _defaultProps$props.onClickBack,
+      onClickClear = _defaultProps$props.onClickClear;
+
+  var b = cn('navbar');
+  return React__default.createElement("div", {
+    className: "nut-navbar ".concat(className),
+    style: style
+  }, leftShow && React__default.createElement("i", {
+    className: ['nut-icon', 'nutui-iconfont', "".concat(b('back'))].join(' '),
+    onClick: function onClick(e) {
+      return onClickBack(e);
+    }
+  }), React__default.createElement("div", {
+    className: "".concat(b('title')),
+    onClick: function onClick(e) {
+      return onClickTitle(e);
+    }
+  }, title, titIcon && React__default.createElement(Icon, {
+    name: titIcon
+  })), React__default.createElement("div", {
+    className: "".concat(b('desc')),
+    onClick: function onClick(e) {
+      return onClickClear(e);
+    }
+  }, desc), icon && React__default.createElement("div", {
+    className: "".concat(b('icon')),
+    onClick: function onClick(e) {
+      return onClickIcon(e);
+    }
+  }, React__default.createElement(Icon, {
+    name: icon
+  })));
+};
+
+NavBar.defaultProps = defaultProps;
+NavBar.displayName = 'NutNavBar';
+export { NavBar as default };