@douyinfe/semi-foundation 2.28.0-beta.0 → 2.28.0

package/lib/es/input/foundation.js

@@ -0,0 +1,370 @@
+import _isFunction from "lodash/isFunction";
+import _isString from "lodash/isString";
+import _isNumber from "lodash/isNumber";
+import _set from "lodash/set";
+import _noop from "lodash/noop";
+import BaseFoundation from '../base/foundation';
+import { strings } from './constants';
+import { ENTER_KEY } from './../utils/keyCode';
+
+class InputFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign(Object.assign({}, InputFoundation.inputDefaultAdapter), adapter));
+  }
+
+  static get inputDefaultAdapter() {
+    return {
+      notifyChange: _noop,
+      setValue: _noop // toggleAllowClear: noop,
+
+    };
+  }
+
+  init() {
+    this._setInitValue();
+  }
+
+  destroy() {
+    if (this._timer) {
+      clearTimeout(this._timer);
+      this._timer = null;
+    }
+  } // eslint-disable-next-line
+
+
+  setDisable() {}
+
+  _setInitValue() {
+    const {
+      defaultValue,
+      value
+    } = this.getProps();
+    let v = defaultValue;
+
+    if (this._isControlledComponent()) {
+      v = value;
+    }
+
+    this._adapter.setValue(v); // this.checkAllowClear(v);
+
+  }
+
+  setValue(value) {
+    this._adapter.setValue(value);
+  }
+
+  handleChange(value, e) {
+    const {
+      maxLength,
+      minLength,
+      getValueLength
+    } = this._adapter.getProps();
+
+    let nextValue = value;
+
+    if (maxLength && _isFunction(getValueLength)) {
+      nextValue = this.handleVisibleMaxLength(value);
+    }
+
+    if (minLength && _isFunction(getValueLength)) {
+      this.handleVisibleMinLength(nextValue);
+    }
+
+    if (this._isControlledComponent()) {
+      /**
+       * If it is a controlled component, directly notify the caller of the modified value.
+       * Truncate the input value from the input box if the input value exceeds the maximum length limit.
+       *  Even in controlled components, characters that exceed the length limit cannot be entered through the input box.
+       */
+      this._adapter.notifyChange(nextValue, e);
+    } else {
+      this._adapter.setValue(nextValue);
+
+      this._adapter.notifyChange(nextValue, e); // this.checkAllowClear(value);
+
+    }
+  }
+  /**
+   * 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 (_isNumber(minLength) && minLength >= 0 && _isFunction(getValueLength) && _isString(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 (_isNumber(maxLength) && maxLength >= 0 && _isFunction(getValueLength) && _isString(value)) {
+      const valueLength = getValueLength(value);
+
+      if (valueLength > maxLength) {
+        // eslint-disable-next-line max-len
+        console.warn('[Semi Input] 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;
+      }
+    }
+  }
+  /**
+   * Truncate input values based on maximum length
+   * @param {String} value
+   * @param {Number} maxLength
+   * @returns {String}
+   */
+
+
+  handleTruncateValue(value, maxLength) {
+    const {
+      getValueLength
+    } = this._adapter.getProps();
+
+    if (_isFunction(getValueLength)) {
+      let truncatedValue = '';
+
+      for (let i = 1, len = value.length; i <= len; i++) {
+        const currentValue = value.slice(0, i);
+
+        if (getValueLength(currentValue) > maxLength) {
+          return truncatedValue;
+        } else {
+          truncatedValue = currentValue;
+        }
+      }
+
+      return truncatedValue;
+    } else {
+      return value.slice(0, maxLength);
+    }
+  }
+
+  handleClear(e) {
+    let eventObj = e;
+    const value = ''; // let input = this._adapter.getInput();
+
+    if (this._isControlledComponent('value')) {
+      this._adapter.setState({
+        isFocus: false
+      });
+    } else {
+      this._adapter.setState({
+        value: '',
+        isFocus: false
+      });
+    }
+
+    if (!eventObj || typeof eventObj !== 'object') {
+      eventObj = {};
+    }
+
+    _set(eventObj, strings.CLEARBTN_CLICKED_EVENT_FLAG, true); // this is useful for DateInput
+
+
+    this._adapter.notifyChange(value, eventObj);
+
+    this._adapter.notifyClear(eventObj);
+
+    if (eventObj) {
+      // When input is in popover and popover needs to judge clickOutSide, such as TreeSelect
+      // If the click event bubbles up, it will mistakenly trigger clickOutSide's judgment.
+      // At the same time, because the clear icon is not in the dom tree after clicking, and clickOutSide uses dom.contain (e.target), it will be considered as clicking on the outside, which will cause the floating layer to fold
+      // So we need to stop the incident from bubbling up
+      this.stopPropagation(eventObj);
+    }
+  }
+  /**
+   * trigger when click input wrapper
+   * @param {Event} e
+   */
+
+
+  handleClick(e) {
+    const {
+      disabled
+    } = this._adapter.getProps();
+
+    const {
+      isFocus
+    } = this._adapter.getStates();
+
+    if (disabled || isFocus) {
+      return;
+    } // do not handle bubbling up events
+
+
+    if (this._adapter.isEventTarget(e)) {
+      this._adapter.focusInput();
+
+      this._adapter.toggleFocusing(true);
+    }
+  }
+
+  handleModeChange(mode) {
+    if (mode === 'password') {
+      this._adapter.setEyeClosed(true);
+    } else {
+      this._adapter.setEyeClosed(false);
+    }
+  }
+
+  handleClickEye(e) {
+    const eyeClosed = this._adapter.getState('eyeClosed');
+
+    this._adapter.focusInput();
+
+    this._adapter.toggleFocusing(true);
+
+    this._adapter.setEyeClosed(!eyeClosed);
+  }
+
+  handleInputType(type) {
+    const mode = this._adapter.getProp('mode');
+
+    const eyeClosed = this._adapter.getState('eyeClosed');
+
+    if (mode === 'password') {
+      return eyeClosed ? 'password' : 'text';
+    }
+
+    return type;
+  }
+
+  handleMouseDown(e) {
+    e.preventDefault();
+  }
+
+  handleMouseUp(e) {
+    e.preventDefault();
+  }
+
+  handleBlur(e) {
+    const {
+      value
+    } = this.getStates();
+
+    this._adapter.toggleFocusing(false);
+
+    this._adapter.notifyBlur(value, e);
+  }
+
+  handleFocus(e) {
+    const {
+      value
+    } = this.getStates();
+
+    this._adapter.toggleFocusing(true); // this.checkAllowClear(this.getState('value'), true);
+
+
+    this._adapter.notifyFocus(value, e);
+  }
+
+  handleInput(e) {
+    this._adapter.notifyInput(e);
+  }
+
+  handleKeyDown(e) {
+    this._adapter.notifyKeyDown(e);
+  }
+
+  handleKeyUp(e) {
+    this._adapter.notifyKeyUp(e);
+  }
+
+  handleKeyPress(e) {
+    this._adapter.notifyKeyPress(e);
+
+    if (e.key === ENTER_KEY) {
+      this._adapter.notifyEnterPress(e);
+    }
+  }
+
+  isAllowClear() {
+    const {
+      value,
+      isFocus,
+      isHovering
+    } = this._adapter.getStates();
+
+    const {
+      showClear,
+      disabled
+    } = this._adapter.getProps();
+
+    const allowClear = value && showClear && !disabled && (isFocus || isHovering);
+    return allowClear;
+  }
+
+  handleClickPrefixOrSuffix(e) {
+    const {
+      disabled
+    } = this._adapter.getProps();
+
+    const {
+      isFocus
+    } = this._adapter.getStates();
+
+    if (!disabled && !isFocus) {
+      this._adapter.focusInput();
+
+      this._adapter.toggleFocusing(true);
+    }
+  }
+  /**
+   * Blocking mousedown events prevents input from losing focus
+   * @param {Event} e
+   */
+
+
+  handlePreventMouseDown(e) {
+    if (e && _isFunction(e.preventDefault)) {
+      e.preventDefault();
+    }
+  }
+  /**
+   * A11y: simulate password button click
+   */
+
+
+  handleModeEnterPress(e) {
+    // trigger by Enter or Space key
+    if (['Enter', ' '].includes(e === null || e === void 0 ? void 0 : e.key)) {
+      this.handlePreventMouseDown(e);
+      this.handleClickEye(e);
+    }
+  }
+
+}
+
+export default InputFoundation;

package/lib/es/input/textareaFoundation.d.ts

@@ -0,0 +1,63 @@
+import BaseFoundation, { DefaultAdapter, noopFunction } from '../base/foundation';
+export interface TextAreaDefaultAdapter {
+    notifyChange: noopFunction;
+    setValue: noopFunction;
+    toggleFocusing: noopFunction;
+    notifyFocus: noopFunction;
+    notifyBlur: noopFunction;
+    notifyKeyDown: noopFunction;
+    notifyEnterPress: noopFunction;
+    toggleHovering(hovering: boolean): void;
+    notifyClear(e: any): void;
+}
+export interface TextAreaAdapter extends Partial<DefaultAdapter>, Partial<TextAreaDefaultAdapter> {
+    setMinLength(length: number): void;
+    notifyPressEnter(e: any): void;
+    getRef(): HTMLInputElement;
+    notifyHeightUpdate(e: any): void;
+}
+export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter> {
+    static get textAreaDefaultAdapter(): {
+        notifyChange: (...args: any[]) => void;
+        setValue: (...args: any[]) => void;
+        toggleFocusing: (...args: any[]) => void;
+        toggleHovering: (...args: any[]) => void;
+        notifyFocus: (...args: any[]) => void;
+        notifyBlur: (...args: any[]) => void;
+        notifyKeyDown: (...args: any[]) => void;
+        notifyEnterPress: (...args: any[]) => void;
+    };
+    constructor(adapter: TextAreaAdapter);
+    init(): void;
+    destroy(): void;
+    setInitValue(): void;
+    handleValueChange(v: string): void;
+    handleChange(value: string, e: any): void;
+    /**
+     * Modify minLength to trigger browser check for minimum length
+     * Controlled mode is not checked
+     * @param {String} value
+     */
+    handleVisibleMinLength(value: string): void;
+    /**
+     * Handle input emoji characters beyond maxLength
+     * Controlled mode is not checked
+     * @param {String} value
+     */
+    handleVisibleMaxLength(value: string): string;
+    /**
+     * Truncate textarea values based on maximum length
+     * @param {String} value
+     * @param {Number} maxLength
+     * @returns {String}
+     */
+    handleTruncateValue(value: string, maxLength: number): string;
+    handleFocus(e: any): void;
+    handleBlur(e: any): void;
+    handleKeyDown(e: any): void;
+    resizeTextarea: (cb?: any) => void;
+    handleMouseEnter(e: any): void;
+    handleMouseLeave(e: any): void;
+    isAllowClear(): boolean;
+    handleClear(e: any): void;
+}

package/lib/es/input/textareaFoundation.js

@@ -0,0 +1,276 @@
+import _isString from "lodash/isString";
+import _isNumber from "lodash/isNumber";
+import _isFunction from "lodash/isFunction";
+import _noop from "lodash/noop";
+import BaseFoundation from '../base/foundation';
+import calculateNodeHeight from './util/calculateNodeHeight';
+import getSizingData from './util/getSizingData';
+export default class TextAreaFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign(Object.assign({}, TextAreaFoundation.textAreaDefaultAdapter), adapter));
+
+    this.resizeTextarea = cb => {
+      const {
+        height
+      } = this.getStates();
+      const {
+        rows
+      } = this.getProps();
+
+      const node = this._adapter.getRef();
+
+      const nodeSizingData = getSizingData(node);
+
+      if (!nodeSizingData) {
+        cb && cb();
+        return;
+      }
+
+      const newHeight = calculateNodeHeight(nodeSizingData, node.value || node.placeholder || 'x', rows // maxRows,
+      );
+
+      if (height !== newHeight) {
+        this._adapter.notifyHeightUpdate(newHeight);
+
+        node.style.height = `${newHeight}px`;
+        return;
+      }
+
+      cb && cb();
+    };
+  }
+
+  static get textAreaDefaultAdapter() {
+    return {
+      notifyChange: _noop,
+      setValue: _noop,
+      toggleFocusing: _noop,
+      toggleHovering: _noop,
+      notifyFocus: _noop,
+      notifyBlur: _noop,
+      notifyKeyDown: _noop,
+      notifyEnterPress: _noop
+    };
+  }
+
+  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 && _isFunction(getValueLength)) {
+      nextValue = this.handleVisibleMaxLength(value);
+    }
+
+    if (minLength && _isFunction(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 (_isNumber(minLength) && minLength >= 0 && _isFunction(getValueLength) && _isString(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 (_isNumber(maxLength) && maxLength >= 0 && _isFunction(getValueLength) && _isString(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 (_isFunction(getValueLength)) {
+      let truncatedValue = '';
+
+      for (let i = 1, len = value.length; i <= len; i++) {
+        const currentValue = value.slice(0, i);
+
+        if (getValueLength(currentValue) > maxLength) {
+          return truncatedValue;
+        } else {
+          truncatedValue = currentValue;
+        }
+      }
+
+      return truncatedValue;
+    } else {
+      return value.slice(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);
+    }
+  } // e: MouseEvent
+
+
+  handleMouseEnter(e) {
+    this._adapter.toggleHovering(true);
+  } // e: MouseEvent
+
+
+  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);
+  }
+
+}

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

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