@douyinfe/semi-foundation 2.1.0 → 2.1.4

package/lib/cjs/input/textareaFoundation.js

@@ -0,0 +1,299 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _isString2 = _interopRequireDefault(require("lodash/isString"));
+
+var _isNumber2 = _interopRequireDefault(require("lodash/isNumber"));
+
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+var _calculateNodeHeight = _interopRequireDefault(require("./util/calculateNodeHeight"));
+
+var _getSizingData = _interopRequireDefault(require("./util/getSizingData"));
+
+class TextAreaFoundation extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)((0, _assign.default)({}, TextAreaFoundation.textAreaDefaultAdapter), adapter));
+
+    this.resizeTextarea = cb => {
+      const {
+        height
+      } = this.getStates();
+      const {
+        rows
+      } = this.getProps();
+
+      const node = this._adapter.getRef().current;
+
+      const nodeSizingData = (0, _getSizingData.default)(node);
+
+      if (!nodeSizingData) {
+        cb && cb();
+        return;
+      }
+
+      const newHeight = (0, _calculateNodeHeight.default)(nodeSizingData, node.value || node.placeholder || 'x', rows // maxRows,
+      );
+
+      if (height !== newHeight) {
+        this._adapter.notifyHeightUpdate(newHeight);
+
+        node.style.height = "".concat(newHeight, "px");
+        return;
+      }
+
+      cb && cb();
+    };
+  }
+
+  static get textAreaDefaultAdapter() {
+    return {
+      notifyChange: _noop2.default,
+      setValue: _noop2.default,
+      toggleFocusing: _noop2.default,
+      toggleHovering: _noop2.default,
+      notifyFocus: _noop2.default,
+      notifyBlur: _noop2.default,
+      notifyKeyDown: _noop2.default,
+      notifyEnterPress: _noop2.default
+    };
+  }
+
+  init() {
+    this.setInitValue();
+  } // eslint-disable-next-line
+
+
+  destroy() {}
+
+  setInitValue() {
+    const {
+      defaultValue,
+      value
+    } = this.getProps();
+    let v = defaultValue;
+
+    if (this._isControlledComponent()) {
+      v = value;
+    }
+
+    this._adapter.setValue(v);
+  }
+
+  handleValueChange(v) {
+    this._adapter.setValue(v);
+  }
+
+  handleChange(value, e) {
+    const {
+      maxLength,
+      minLength,
+      getValueLength
+    } = this._adapter.getProps();
+
+    let nextValue = value;
+
+    if (maxLength && (0, _isFunction2.default)(getValueLength)) {
+      nextValue = this.handleVisibleMaxLength(value);
+    }
+
+    if (minLength && (0, _isFunction2.default)(getValueLength)) {
+      this.handleVisibleMinLength(nextValue);
+    }
+
+    if (this._isControlledComponent()) {
+      this._adapter.notifyChange(nextValue, e);
+    } else {
+      this._adapter.setValue(nextValue);
+
+      this._adapter.notifyChange(nextValue, e);
+    }
+  }
+  /**
+   * Modify minLength to trigger browser check for minimum length
+   * Controlled mode is not checked
+   * @param {String} value
+   */
+
+
+  handleVisibleMinLength(value) {
+    const {
+      minLength,
+      getValueLength
+    } = this._adapter.getProps();
+
+    const {
+      minLength: stateMinLength
+    } = this._adapter.getStates();
+
+    if ((0, _isNumber2.default)(minLength) && minLength >= 0 && (0, _isFunction2.default)(getValueLength) && (0, _isString2.default)(value)) {
+      const valueLength = getValueLength(value);
+
+      if (valueLength < minLength) {
+        const newMinLength = value.length + (minLength - valueLength);
+        newMinLength !== stateMinLength && this._adapter.setMinLength(newMinLength);
+      } else {
+        stateMinLength !== minLength && this._adapter.setMinLength(minLength);
+      }
+    }
+  }
+  /**
+   * Handle input emoji characters beyond maxLength
+   * Controlled mode is not checked
+   * @param {String} value
+   */
+
+
+  handleVisibleMaxLength(value) {
+    const {
+      maxLength,
+      getValueLength
+    } = this._adapter.getProps();
+
+    if ((0, _isNumber2.default)(maxLength) && maxLength >= 0 && (0, _isFunction2.default)(getValueLength) && (0, _isString2.default)(value)) {
+      const valueLength = getValueLength(value);
+
+      if (valueLength > maxLength) {
+        // eslint-disable-next-line max-len
+        console.warn('[Semi TextArea] The input character is truncated because the input length exceeds the maximum length limit');
+        const truncatedValue = this.handleTruncateValue(value, maxLength);
+        return truncatedValue;
+      } else {
+        return value;
+      }
+    }
+
+    return undefined;
+  }
+  /**
+   * Truncate textarea values based on maximum length
+   * @param {String} value
+   * @param {Number} maxLength
+   * @returns {String}
+   */
+
+
+  handleTruncateValue(value, maxLength) {
+    const {
+      getValueLength
+    } = this._adapter.getProps();
+
+    if ((0, _isFunction2.default)(getValueLength)) {
+      let truncatedValue = '';
+
+      for (let i = 1, len = value.length; i <= len; i++) {
+        const currentValue = (0, _slice.default)(value).call(value, 0, i);
+
+        if (getValueLength(currentValue) > maxLength) {
+          return truncatedValue;
+        } else {
+          truncatedValue = currentValue;
+        }
+      }
+
+      return truncatedValue;
+    } else {
+      return (0, _slice.default)(value).call(value, 0, maxLength);
+    }
+  }
+
+  handleFocus(e) {
+    const {
+      value
+    } = this.getStates();
+
+    this._adapter.toggleFocusing(true);
+
+    this._adapter.notifyFocus(value, e);
+  }
+
+  handleBlur(e) {
+    const {
+      value
+    } = this.getStates();
+
+    this._adapter.toggleFocusing(false);
+
+    this._adapter.notifyBlur(value, e);
+  }
+
+  handleKeyDown(e) {
+    this._adapter.notifyKeyDown(e);
+
+    if (e.keyCode === 13) {
+      this._adapter.notifyPressEnter(e);
+    }
+  }
+
+  handleMouseEnter(e) {
+    this._adapter.toggleHovering(true);
+  }
+
+  handleMouseLeave(e) {
+    this._adapter.toggleHovering(false);
+  }
+
+  isAllowClear() {
+    const {
+      value,
+      isFocus,
+      isHover
+    } = this._adapter.getStates();
+
+    const {
+      showClear,
+      disabled,
+      readonly
+    } = this._adapter.getProps();
+
+    const allowClear = value && showClear && !disabled && (isFocus || isHover) && !readonly;
+    return allowClear;
+  }
+
+  handleClear(e) {
+    const {
+      isFocus
+    } = this.getStates();
+
+    if (this._isControlledComponent('value')) {
+      this._adapter.setState({
+        isFocus: false
+      });
+    } else {
+      this._adapter.setState({
+        value: '',
+        isFocus: false
+      });
+    }
+
+    if (isFocus) {
+      this._adapter.notifyBlur('', e);
+    }
+
+    this._adapter.notifyChange('', e);
+
+    this._adapter.notifyClear(e);
+
+    this.stopPropagation(e);
+  }
+
+}
+
+exports.default = TextAreaFoundation;

package/lib/cjs/input/util/calculateNodeHeight.d.ts

@@ -0,0 +1 @@
+export default function calculateNodeHeight(sizingData: any, value: string, minRows?: number, maxRows?: number): any;

package/lib/cjs/input/util/calculateNodeHeight.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = calculateNodeHeight;
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+// Reference to https://github.com/andreypopp/react-textarea-autosize/
+let hiddenTextarea = null;
+const HIDDEN_TEXTAREA_STYLE = {
+  'min-height': '0',
+  'max-height': 'none',
+  height: '0',
+  visibility: 'hidden',
+  overflow: 'hidden',
+  position: 'absolute',
+  'z-index': '-1000',
+  top: '0',
+  right: '0'
+};
+
+const forceHiddenStyles = node => {
+  var _context;
+
+  (0, _forEach.default)(_context = (0, _keys.default)(HIDDEN_TEXTAREA_STYLE)).call(_context, key => {
+    node.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key], 'important');
+  });
+};
+
+const getContentHeight = (node, sizingData) => {
+  const height = node.scrollHeight;
+
+  if (sizingData.sizingStyle.boxSizing === 'border-box') {
+    // border-box: add border, since height = content + padding + border
+    return height + sizingData.borderSize;
+  } // remove padding, since height = content
+
+
+  return height - sizingData.paddingSize;
+};
+
+function calculateNodeHeight(sizingData, value) {
+  var _context2;
+
+  let minRows = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  let maxRows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : Infinity;
+
+  if (!hiddenTextarea) {
+    hiddenTextarea = document.createElement('textarea');
+    hiddenTextarea.setAttribute('tab-index', '-1');
+    hiddenTextarea.setAttribute('aria-hidden', 'true');
+    forceHiddenStyles(hiddenTextarea);
+  }
+
+  if (hiddenTextarea.parentNode === null) {
+    document.body.appendChild(hiddenTextarea);
+  }
+
+  const {
+    paddingSize,
+    borderSize,
+    sizingStyle
+  } = sizingData;
+  const {
+    boxSizing
+  } = sizingStyle;
+  (0, _forEach.default)(_context2 = (0, _keys.default)(sizingStyle)).call(_context2, key => {
+    hiddenTextarea.style[key] = sizingStyle[key];
+  });
+  forceHiddenStyles(hiddenTextarea);
+  hiddenTextarea.value = value;
+  let height = getContentHeight(hiddenTextarea, sizingData); // measure height of a textarea with a single row
+
+  hiddenTextarea.value = 'x'; // calc single row need to remove padding and border to avoid duplicated calc
+
+  const rowHeight = getContentHeight(hiddenTextarea, sizingData) - paddingSize - borderSize;
+  let minHeight = rowHeight * minRows;
+
+  if (boxSizing === 'border-box') {
+    minHeight = minHeight + paddingSize + borderSize;
+  }
+
+  height = Math.max(minHeight, height);
+  let maxHeight = rowHeight * maxRows;
+
+  if (boxSizing === 'border-box') {
+    maxHeight = maxHeight + paddingSize + borderSize;
+  }
+
+  height = Math.min(maxHeight, height);
+  return height;
+}

package/lib/cjs/input/util/getSizingData.d.ts

@@ -0,0 +1,6 @@
+declare const getSizingData: (node: any) => {
+    sizingStyle: Partial<CSSStyleDeclaration>;
+    paddingSize: number;
+    borderSize: number;
+};
+export default getSizingData;

package/lib/cjs/input/util/getSizingData.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _parseFloat2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/parse-float"));
+
+var _pick2 = _interopRequireDefault(require("lodash/pick"));
+
+const SIZING_STYLE = ['borderBottomWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth', 'boxSizing', 'fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'letterSpacing', 'lineHeight', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', // non-standard
+'tabSize', 'textIndent', // non-standard
+'textRendering', 'textTransform', 'width'];
+
+const getSizingData = node => {
+  const style = window.getComputedStyle(node);
+
+  if (style === null) {
+    return null;
+  }
+
+  const sizingStyle = (0, _pick2.default)(style, SIZING_STYLE);
+  const {
+    boxSizing
+  } = sizingStyle; // probably node is detached from DOM, can't read computed dimensions
+
+  if (boxSizing === '') {
+    return null;
+  }
+
+  const paddingSize = (0, _parseFloat2.default)(sizingStyle.paddingBottom) + (0, _parseFloat2.default)(sizingStyle.paddingTop);
+  const borderSize = (0, _parseFloat2.default)(sizingStyle.borderBottomWidth) + (0, _parseFloat2.default)(sizingStyle.borderTopWidth);
+  return {
+    sizingStyle,
+    paddingSize,
+    borderSize
+  };
+};
+
+var _default = getSizingData;
+exports.default = _default;

package/lib/cjs/input/variables.scss

@@ -0,0 +1,109 @@
+$color-input_default-border-default: transparent; // 输入框描边颜色 - 默认
+
+$color-input_default-bg-default: var(--semi-color-fill-0); // 输入框背景颜色 - 默认
+$color-input_default-text-default: var(--semi-color-text-0); // 输入框文本颜色 - 默认
+
+$color-input_default-bg-hover: var(--semi-color-fill-1); // 输入框背景颜色 - 悬浮
+$color-input_default-border-hover: transparent; // 输入框描边颜色 - 悬浮
+
+$color-input_default-bg-active: var(--semi-color-fill-2); // 输入框背景颜色 - 按下
+$color-input_default-border-active: $color-input_default-bg-active; // 输入框描边颜色 - 按下
+
+$color-input_default-bg-focus: var(--semi-color-fill-0); // 输入框背景颜色 - 选中
+$color-input_default-border-focus: var(--semi-color-focus-border); // 输入框描边颜色 - 选中
+
+// error
+$color-input_danger-bg-default: var(--semi-color-danger-light-default); // 错误输入框背景颜色 - 默认
+$color-input_danger-border-default: var(--semi-color-danger-light-default); // 错误输入框描边颜色 - 默认
+
+$color-input_danger-bg-hover: var(--semi-color-danger-light-hover); // 错误输入框背景颜色 - 悬浮
+$color-input_danger-border-hover: var(--semi-color-danger-light-hover); // 错误输入框描边颜色 - 悬浮
+
+$color-input_danger-bg-focus: var(--semi-color-danger-light-default); // 错误输入框背景颜色 - 选中
+$color-input_danger-border-focus: var(--semi-color-danger); // 错误输入框描边颜色 - 选中
+
+$color-input_danger-bg-active: var(--semi-color-danger-light-active); // 错误输入框背景颜色 - 按下
+$color-input_danger-border-active: var(--semi-color-danger-light-active); // 错误输入框描边颜色 - 按下
+
+// warning
+$color-input_warning-bg-default: var(--semi-color-warning-light-default); // 警告输入框背景颜色 - 默认
+$color-input_warning-border-default: var(--semi-color-warning-light-default); // 警告输入框文本颜色 - 默认
+
+$color-input_warning-bg-hover: var(--semi-color-warning-light-hover); // 警告输入框背景颜色 - 悬浮
+$color-input_warning-border-hover: var(--semi-color-warning-light-hover); // 警告输入框描边颜色 - 悬浮
+
+$color-input_warning-bg-focus: var(--semi-color-warning-light-default); // 警告输入框背景颜色 - 选中
+$color-input_warning-border-focus: var(--semi-color-warning); // 警告输入框描边颜色 - 选中
+
+$color-input_warning-bg-active: var(--semi-color-warning-light-active); // 警告输入框背景颜色 - 按下
+$color-input_warning-border-active: var(--semi-color-warning-light-active); // 警告输入框描边颜色 - 按下
+
+// disabled
+$color-input_disabled-border-default: var(--semi-color-disabled-border); // 禁用输入框描边颜色
+$color-input_disabled-bg-default: var(--semi-color-disabled-fill); // 禁用输入框背景颜色
+$color-input_disabled-text-default: var(--semi-color-disabled-text); // 禁用输入框文字颜色
+
+$color-input_placeholder-text-default: var(--semi-color-text-2); // 输入框占位文字颜色
+$color-input_prefix-text-default: var(--semi-color-text-2); // 输入框 prefix 文字颜色
+$color-input-icon-default: var(--semi-color-text-2); // 输入框图标颜色
+$color-input-icon-hover: var(--semi-color-primary-hover); // 输入框图标颜色 - 悬浮
+$color-input-icon-active: var(--semi-color-primary-active); // 输入框图标颜色 - 按下
+
+// prefix and suffix text
+
+$color-input_counter-text-default: var(--semi-color-text-2); // 多行文本字数统计文字颜色 - 未超限
+$color-input_counter_danger-text-default: var(--semi-color-danger); // 多行文本字数统计文字颜色 - 未超限
+
+$color-input_group-border-default: var(--semi-color-border); // 输入框组合分割线颜色
+
+$height-input_large: $height-control-large - 2; // 输入框高度 & 行高 - 大尺寸
+$height-input_small: $height-control-small - 2; // 输入框高度 & 行高 - 小尺寸
+$height-input_default: $height-control-default - 2; // 输入框高度 & 行高 - 默认尺寸
+$height-input_wrapper_large: $height-control-large;
+$height-input_wrapper_small: $height-control-small;
+$height-input_wrapper_default: $height-control-default;
+
+$width-input-icon: $width-icon-medium + $spacing-tight * 2; // 密码图标最小宽度
+$width-input-icon_clear_before_suffix: $width-icon-medium + $spacing-tight; // suffix 之前的清除按钮宽度
+$width-input-icon_clear_before_modebtn: $width-icon-medium; // 密码之前的清除按钮宽度
+
+$motion-scale_size-active: .97;
+$motion-scale_size-inactive: 1;
+
+$width-input_append-border: $border-thickness-control; // 后置标签描边宽度
+$width-input_prepend-border: $border-thickness-control; // 前置标签描边宽度
+$width-input_group_pseudo-border: $border-thickness-control; 
+$width-input_wrapper-border: $border-thickness-control-focus; // 输入框描边宽度
+$width-input_wrapper_focus-border: $border-thickness-control-focus; // 输入框描边宽度 - 选中态
+
+$radius-input_wrapper: var(--semi-border-radius-small); // 输入框圆角大小
+$spacing-input_icon-marginLeft: -$spacing-base-tight; // 输入框图标左侧内边距
+$spacing-input-paddingLeft: $spacing-base-tight; // 输入光标距离容器的左侧内边距
+$spacing-input-paddingRight: $spacing-base-tight; // 输入文字距离容器的右侧内边距
+$spacing-input_insetLabel-marginRight: $spacing-base-tight;
+$spacing-input_prefix_icon-marginY: 0; // prefix 图标垂直内边距
+$spacing-input_prefix_icon-marginX: $spacing-tight; // prefix 图标水平内边距
+$spacing-input_clearBtn_withSuffix-marginLeft: -$spacing-base-tight; // 清空按钮左侧内边距
+$spacing-input_prepend-paddingY: 0; // 前置标签垂直内边距
+$spacing-input_prepend-paddingX: $spacing-base-tight; // 前置标签水平内边距
+$spacing-input_group_withTopLabel-marginTop: $spacing-base;
+$spacing-input_group_withTopLabel-marginBottom: $spacing-base;
+$font-input_insetLabel-fontWeight: 600; // prefix 文字字重
+
+$spacing-textarea-paddingY: 5px; // 多行文本垂直内边距
+$spacing-textarea-paddingX: $spacing-base-tight; // 多行文本水平内边距
+$spacing-textarea_counter-paddingTop: 3px; // 多行文本字数统计顶部内边距
+$spacing-textarea_counter-paddingRight: 12px; // 多行文本字数统计右侧内边距
+$spacing-textarea_counter-paddingBottom: 5px; // 多行文本字数统计底部内边距
+$spacing-textarea_counter-paddingLeft: 12px; // 多行文本字数统计左侧内边距
+
+$width-textarea-border: $border-thickness; // 多行文本描边宽度
+$height-textarea_counter: 24px; // 多行文本字数统计最小高度
+$color-textarea-border-default: transparent; // 多行文本描边颜色
+
+$color-textarea-icon-default: var(--semi-color-text-2); // 多行文本 clear 图标颜色
+$color-textarea-icon-hover: var(--semi-color-primary-hover); // 多行文本 clear 图标颜色 - 悬浮
+$width-textarea-icon: $width-icon-medium + $spacing-tight; // clear 图标最小宽度
+$height-textarea-default: 32px; // 多行文本 clear 图标的高度
+$spacing-textarea_withShowClear-paddingRight: 36px; // 多行文本设置 showClear 后的右内边距
+$spacing-textarea-icon-right: $spacing-extra-tight;// 多行文本 clear 图标的右边距

package/lib/cjs/inputNumber/constants.d.ts

@@ -0,0 +1,17 @@
+declare const cssClasses: {
+    PREFIX: "semi-input";
+};
+declare const numbers: {
+    DEFAULT_STEP: number;
+    DEFAULT_SHIFT_STEP: number;
+    DEFAULT_PRESS_TIMEOUT: number;
+    DEFAULT_PRESS_INTERVAL: number;
+};
+declare const strings: {
+    SIZE: readonly ["small", "large", "default"];
+    DEFAULT_SIZE: "default";
+    STATUS: readonly ["default", "error", "warning", "success"];
+    CLEARBTN_CLICKED_EVENT_FLAG: "__fromClearBtn";
+    MODE: readonly ["password"];
+};
+export { cssClasses, numbers, strings };

package/lib/cjs/inputNumber/constants.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.strings = exports.numbers = exports.cssClasses = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _constants = require("../input/constants");
+
+const cssClasses = (0, _assign.default)({}, _constants.cssClasses);
+exports.cssClasses = cssClasses;
+const numbers = (0, _assign.default)((0, _assign.default)({}, _constants.numbers), {
+  DEFAULT_STEP: 1,
+  DEFAULT_SHIFT_STEP: 1,
+  DEFAULT_PRESS_TIMEOUT: 250,
+  DEFAULT_PRESS_INTERVAL: 0
+});
+exports.numbers = numbers;
+const strings = (0, _assign.default)({}, _constants.strings);
+exports.strings = strings;