shineout 1.12.2 → 1.12.3

package/esm/EditableArea/EditableArea.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { BaseProps } from './Props';
+interface EditableareaState {
+    showTextarea: boolean;
+}
+declare class Editable extends React.PureComponent<BaseProps, EditableareaState> {
+    static defaultProps: {
+        bordered: boolean;
+    };
+    bindContainer: (type: HTMLDivElement) => void;
+    bindInput: (type: HTMLDivElement) => void;
+    container: HTMLElement;
+    input: HTMLElement;
+    showPop: () => void;
+    hidePop: () => void;
+    handleClear: () => void;
+    width: number;
+    constructor(props: BaseProps);
+    componentDidUpdate(_prevProps: BaseProps, prevState: EditableareaState): void;
+    onChange(value: string): void;
+    onBlur(e: React.FocusEvent): void;
+    getTrim(): boolean;
+    getErrorProps(): {
+        error?: Error | undefined;
+    };
+    updateShowTextarea(flag: boolean): void;
+    handleFocus(e: React.FocusEvent): void;
+    bindElement(type: 'container' | 'input', el: HTMLElement): void;
+    autoFocus(): void;
+    renderTextarea(): JSX.Element | null;
+    renderResult(): JSX.Element;
+    renderInput(): JSX.Element;
+    renderPlace(): JSX.Element;
+    render(): JSX.Element;
+}
+export default Editable;

package/esm/EditableArea/EditableArea.js

@@ -0,0 +1,275 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import classnames from 'classnames';
+import config from '../config';
+import Textarea from '../Textarea';
+import Input from '../Input';
+import Popover from '../Popover';
+import { editableAreaClass } from './styles';
+import icons from '../icons';
+import { focusElement, getParent } from '../utils/dom/element';
+import { inputClass } from '../Input/styles';
+import InputTitle from '../InputTitle';
+import { inputTitleClass } from '../InputTitle/styles';
+var DefaultProps = {
+  bordered: false
+};
+
+var noop = function noop() {};
+
+function formatShowValue(value) {
+  if (!value && value !== 0) return '';
+  var arr = String(value).split('\n');
+  var len = arr.length;
+  if (len > 1) return arr[0] + "...";
+  return String(value);
+}
+
+var Editable =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  _inheritsLoose(Editable, _React$PureComponent);
+
+  function Editable(props) {
+    var _this;
+
+    _this = _React$PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "bindContainer", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "bindInput", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "container", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "input", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "showPop", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "hidePop", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleClear", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "width", void 0);
+
+    _this.state = {
+      showTextarea: false
+    };
+    _this.bindContainer = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'container');
+    _this.bindInput = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'input');
+    _this.renderInput = _this.renderInput.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.renderPlace = _this.renderPlace.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.renderTextarea = _this.renderTextarea.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.onChange = _this.onChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.onBlur = _this.onBlur.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.autoFocus = _this.autoFocus.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.showPop = _this.updateShowTextarea.bind(_assertThisInitialized(_assertThisInitialized(_this)), true);
+    _this.hidePop = _this.updateShowTextarea.bind(_assertThisInitialized(_assertThisInitialized(_this)), false);
+    _this.handleClear = _this.onChange.bind(_assertThisInitialized(_assertThisInitialized(_this)), '');
+    return _this;
+  }
+
+  var _proto = Editable.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(_prevProps, prevState) {
+    var showTextarea = this.state.showTextarea;
+
+    if (prevState.showTextarea !== showTextarea && showTextarea) {
+      this.autoFocus();
+    }
+  };
+
+  _proto.onChange = function onChange(value) {
+    var onChange = this.props.onChange;
+    if (typeof onChange === 'function') onChange(value);
+  };
+
+  _proto.onBlur = function onBlur(e) {
+    var _this$props = this.props,
+        onBlur = _this$props.onBlur,
+        forceChange = _this$props.forceChange;
+    var target = e.target;
+    this.hidePop();
+    var newValue = target.value;
+
+    if (this.getTrim()) {
+      newValue = newValue.trim();
+      target.value = newValue;
+    }
+
+    forceChange(newValue);
+    if (typeof onBlur === 'function') onBlur(e);
+  };
+
+  _proto.getTrim = function getTrim() {
+    var trim = this.props.trim;
+    if (trim !== undefined) return trim;
+    if (config.trim !== undefined) return config.trim;
+    return false;
+  };
+
+  _proto.getErrorProps = function getErrorProps() {
+    var p = {};
+    if ('error' in this.props) p.error = this.props.error;
+    return p;
+  };
+
+  _proto.updateShowTextarea = function updateShowTextarea(flag) {
+    if (flag && this.input) {
+      this.width = getParent(this.input, "." + editableAreaClass('input')).offsetWidth;
+    }
+
+    this.setState({
+      showTextarea: flag
+    });
+
+    if (this.props.onShowTextareaChange) {
+      this.props.onShowTextareaChange(flag);
+    }
+  };
+
+  _proto.handleFocus = function handleFocus(e) {
+    var onFocus = this.props.onFocus;
+    if (typeof onFocus === 'function') onFocus(e);
+  };
+
+  _proto.bindElement = function bindElement(type, el) {
+    this[type] = el;
+  };
+
+  _proto.autoFocus = function autoFocus() {
+    if (!this.container) return;
+    var target = this.container.querySelector("." + editableAreaClass('text-area') + " textarea.so-input-auto-size");
+    if (target) focusElement.end(target);
+  };
+
+  _proto.renderTextarea = function renderTextarea() {
+    var showTextarea = this.state.showTextarea;
+    var _this$props2 = this.props,
+        placeholder = _this$props2.placeholder,
+        maxHeight = _this$props2.maxHeight,
+        value = _this$props2.value,
+        innerTitle = _this$props2.innerTitle,
+        placeTitle = _this$props2.placeTitle,
+        renderFooter = _this$props2.renderFooter;
+    if (!showTextarea) return null;
+    var addTitleProps = {
+      innerTitle: innerTitle,
+      placeTitle: placeTitle
+    };
+    return React.createElement("div", {
+      ref: this.bindContainer
+    }, React.createElement(Textarea, _extends({
+      className: editableAreaClass('text-area'),
+      autosize: true
+    }, addTitleProps, {
+      value: value,
+      rows: 1,
+      delay: 0,
+      onChange: this.onChange,
+      onBlur: this.onBlur,
+      onFocus: this.handleFocus,
+      placeholder: placeholder,
+      maxHeight: maxHeight,
+      renderFooter: renderFooter
+    }, this.getErrorProps())));
+  };
+
+  _proto.renderResult = function renderResult() {
+    var _this$props3 = this.props,
+        placeholder = _this$props3.placeholder,
+        disabled = _this$props3.disabled,
+        value = _this$props3.value,
+        renderResult = _this$props3.renderResult,
+        placeTitle = _this$props3.placeTitle,
+        innerTitle = _this$props3.innerTitle,
+        error = _this$props3.error;
+    var result = renderResult(value);
+    return React.createElement("div", {
+      tabIndex: disabled ? undefined : 0,
+      className: classnames(editableAreaClass('input'), inputClass('_', error && 'invalid', disabled && 'disabled')),
+      onFocus: this.showPop
+    }, React.createElement(InputTitle, {
+      placeTitle: placeTitle,
+      innerTitle: innerTitle,
+      open: !!value
+    }, React.createElement("div", {
+      className: classnames(inputClass('spare'), innerTitle && inputTitleClass('hidable', 'item')),
+      ref: this.bindInput
+    }, result || React.createElement("div", {
+      className: inputClass('placeholder')
+    }, placeholder || React.createElement("br", null)))));
+  };
+
+  _proto.renderInput = function renderInput() {
+    var _this$props4 = this.props,
+        placeholder = _this$props4.placeholder,
+        disabled = _this$props4.disabled,
+        value = _this$props4.value,
+        innerTitle = _this$props4.innerTitle,
+        placeTitle = _this$props4.placeTitle;
+    return React.createElement(Input, _extends({
+      innerTitle: innerTitle,
+      placeTitle: placeTitle,
+      forwardedRef: this.bindInput,
+      placeholder: placeholder,
+      value: formatShowValue(value),
+      onChange: noop,
+      className: editableAreaClass('input'),
+      onFocus: this.showPop,
+      disabled: disabled
+    }, this.getErrorProps()));
+  };
+
+  _proto.renderPlace = function renderPlace() {
+    var renderResult = this.props.renderResult;
+
+    if (renderResult && typeof renderResult === 'function') {
+      return this.renderResult();
+    }
+
+    return this.renderInput();
+  };
+
+  _proto.render = function render() {
+    var showTextarea = this.state.showTextarea;
+    var _this$props5 = this.props,
+        width = _this$props5.width,
+        style = _this$props5.style,
+        className = _this$props5.className,
+        bordered = _this$props5.bordered,
+        clearable = _this$props5.clearable,
+        getPopupContainer = _this$props5.getPopupContainer,
+        value = _this$props5.value;
+    var cls = classnames(className, editableAreaClass('_', !bordered && 'none-bordered'));
+    var ms = Object.assign({
+      width: width
+    }, style);
+    var popStyle = {
+      width: this.width
+    };
+    return React.createElement("div", {
+      className: cls,
+      style: ms
+    }, this.renderPlace(), React.createElement(Popover, {
+      visible: showTextarea,
+      showArrow: false,
+      className: editableAreaClass('popover'),
+      position: "cover",
+      style: popStyle,
+      getPopupContainer: getPopupContainer
+    }, this.renderTextarea()), clearable && value ? React.createElement("div", {
+      className: editableAreaClass('clear'),
+      onClick: this.handleClear
+    }, icons.CloseCircle) : null);
+  };
+
+  return Editable;
+}(React.PureComponent);
+
+_defineProperty(Editable, "defaultProps", DefaultProps);
+
+export default Editable;

package/esm/EditableArea/Props.d.ts

@@ -0,0 +1,105 @@
+import React from 'react';
+import { StandardProps } from '../@types/common';
+import { GetInputableProps } from '../Form/Props';
+import { GetDelayProps } from '../hoc/Props';
+export interface BaseProps extends StandardProps {
+    error?: Error;
+    /**
+     * Whether to show the border
+     *
+     * 是否显示外边框
+     *
+     * default: false
+     */
+    bordered?: boolean;
+    /**
+     * Whether to disable
+     *
+     * 是否禁用
+     *
+     * default: false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show the clear button
+     *
+     * 是否展示清除按钮
+     *
+     * default: true
+     */
+    clearable?: boolean;
+    placeholder?: string;
+    /**
+     * width of the editablearea
+     *
+     * 编辑域宽度
+     *
+     * default: none
+     */
+    width?: number | string;
+    /**
+     * the maxHeight of the textarea, scroll bars appear after more than
+     *
+     * 输入框的最大高度, 超过之后会出现滚动条
+     *
+     * default: none
+     */
+    maxHeight?: number | string;
+    innerTitle?: React.ReactNode;
+    placeTitle?: React.ReactNode;
+    /**
+     * blur event
+     *
+     * 失去焦点事件
+     *
+     * default: none
+     */
+    onBlur?: (e: React.FocusEvent) => void;
+    /**
+     * focus event
+     *
+     * 聚焦事件
+     *
+     * default: none
+     */
+    onFocus?: (e: React.FocusEvent) => void;
+    /**
+     * Custom Popover container, override the default behavior which is rendering under the body, () => DOMElement
+     *
+     * 自定义Popover容器，覆盖默认渲染在body下的行为, () => DOMElement
+     *
+     *  default: none
+     */
+    getPopupContainer?: () => HTMLElement;
+    /**
+     * 内部属性
+     */
+    onShowTextareaChange?: (value: boolean) => void;
+    /**
+     * render textarea footer
+     *
+     * 渲染 textarea footer
+     *
+     * default: -
+     */
+    renderFooter?: (value: string) => React.ReactNode;
+    /**
+     * Customize display results
+     *
+     * 自定义显示结果
+     *
+     * default: -
+     */
+    renderResult?: (value: string) => React.ReactNode;
+    onChange?: (value: string) => void;
+    value?: string;
+    trim?: boolean;
+    forceChange: (value: string) => void;
+}
+export declare type EditableAreaPropsWidthDelay = GetDelayProps<BaseProps>;
+export declare type EditableAreaPropsWidthInputable = GetInputableProps<EditableAreaPropsWidthDelay, string>;
+export declare type EditableAreaProps = Omit<EditableAreaPropsWidthInputable, 'innerTitle' | 'placeTitle'>;
+export declare class EditableAreaClass extends React.Component<EditableAreaProps, {}> {
+    render(): JSX.Element;
+}
+export declare type EditableAreaType = typeof EditableAreaClass;

package/esm/EditableArea/Props.js

@@ -0,0 +1 @@
+import React from 'react';

package/esm/EditableArea/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: typeof import("./Props").EditableAreaClass;
+export default _default;

package/esm/EditableArea/index.js

@@ -0,0 +1,7 @@
+import delay from '../hoc/delay';
+import Component from './EditableArea';
+import { compose } from '../utils/func';
+import inputable from '../Form/inputable';
+var EditableArea = compose(inputable, delay(400))(Component);
+EditableArea.displayName = 'ShineoutEditableArea';
+export default EditableArea;

package/esm/EditableArea/interface.d.ts

@@ -0,0 +1 @@
+export { EditableAreaProps as Props } from './Props';

package/esm/EditableArea/interface.js

@@ -0,0 +1 @@
+export {};

package/esm/EditableArea/styles/editableArea.less

@@ -0,0 +1,63 @@
+@import '../../styles/variables.less';
+@import '../../styles/themes/@{so-theme}.less';
+
+@editableArea-prefix: ~'@{so-prefix}-editableArea';
+@editableArea-clearable-icon: 12px;
+
+
+.@{editableArea-prefix} {
+  width: 100%;
+  position: relative;
+
+
+  & &-input {
+    width: 100%;
+    input {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &-none-bordered {
+    .@{editableArea-prefix}-input {
+      border-color: transparent;
+
+      &:hover{
+        border-color: @input-border-focus;
+      }
+    }
+  }
+
+  &-popover {
+    border: none;
+    box-shadow: none;
+  }
+
+  &-clear {
+    box-sizing: border-box;
+    position: absolute;
+    top: 50%;
+    right: 8px;
+    transform: translateY(-50%);
+    width: @editableArea-clearable-icon;
+    height: @editableArea-clearable-icon;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      svg {
+        fill: @input-clear-bg-hover-color;
+      }
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+
+      background-color: #fff;
+      fill: @input-clear-bg-color;
+      transition: all 0.2s;
+    }
+  }
+}

package/esm/EditableArea/styles/index.d.ts

@@ -0,0 +1 @@
+export const editableAreaClass: (...args: any) => string;

package/esm/EditableArea/styles/index.js

@@ -0,0 +1,4 @@
+import '../../styles/normalize.less';
+import editableAreaLess from './editableArea.less';
+import genaration from '../../utils/classname';
+export var editableAreaClass = genaration(editableAreaLess, 'editableArea');

package/esm/Form/Field.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { FieldProps } from './Props';
+declare class Field<Value> extends React.Component<FieldProps<Value>> {
+    static defaultProps: {
+        cache: boolean;
+    };
+    constructor(props: FieldProps<Value>);
+    shouldComponentUpdate(nextProps: FieldProps<Value>): boolean;
+    handleChange(value: any): void;
+    render(): React.ReactNode;
+}
+export default Field;

package/esm/Form/Field.js

@@ -0,0 +1,76 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import * as React from 'react';
+import shallowEqual from '../utils/shallowEqual';
+
+var Field =
+/*#__PURE__*/
+function (_React$Component) {
+  _inheritsLoose(Field, _React$Component);
+
+  function Field(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this))); // this.cacheChildren = undefined
+    // this.cacheElement = null
+
+    return _this;
+  }
+
+  var _proto = Field.prototype;
+
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
+    var options = this.props.cache ? {
+      skip: ['children']
+    } : {};
+    return !shallowEqual(this.props, nextProps, options);
+  };
+
+  _proto.handleChange = function handleChange(value) {
+    if (value && value.nativeEvent) {
+      // eslint-disable-next-line
+      value = value.target.value;
+    }
+
+    this.props.onChange(value);
+  };
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        children = _this$props.children,
+        value = _this$props.value,
+        error = _this$props.error,
+        disabled = _this$props.disabled;
+
+    if (typeof children === 'function') {
+      return children({
+        value: value,
+        error: error,
+        onChange: this.handleChange,
+        disabled: disabled
+      });
+    }
+
+    if (React.isValidElement(children)) {
+      return React.cloneElement(children, {
+        value: value,
+        error: error,
+        onChange: this.handleChange,
+        disabled: disabled || children.props && children.props.disabled
+      });
+    }
+
+    console.error(new Error('Form.Field expect a single ReactElement or a function.'));
+    return null;
+  };
+
+  return Field;
+}(React.Component);
+
+_defineProperty(Field, "defaultProps", {
+  cache: false
+});
+
+export default Field;

package/esm/Form/FieldError.d.ts

@@ -0,0 +1,6 @@
+import { PureComponent } from 'react';
+import { FieldErrorProps } from './Props';
+declare class FieldError extends PureComponent<FieldErrorProps> {
+    render(): JSX.Element | null;
+}
+export default FieldError;

package/esm/Form/FieldError.js

@@ -0,0 +1,29 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import { formClass } from './styles';
+
+var FieldError =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(FieldError, _PureComponent);
+
+  function FieldError() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+
+  var _proto = FieldError.prototype;
+
+  _proto.render = function render() {
+    var error = this.props.error; // eslint-disable-next-line
+
+    if (Array.isArray(error)) error = error[0];
+    if (!(error instanceof Error)) return null;
+    return React.createElement("div", {
+      className: formClass('error')
+    }, error.message);
+  };
+
+  return FieldError;
+}(PureComponent);
+
+export default FieldError;

package/esm/Form/FieldSet.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FieldSetProviderValueType, FieldSetProps, GetFieldSetConsumerProps } from './Props';
+export declare const fieldSetConsumer: <U extends {
+    name?: string | string[] | undefined;
+}>(Origin: React.ComponentType<U>) => React.FC<GetFieldSetConsumerProps<U>>;
+export declare const FieldSetProvider: React.Provider<FieldSetProviderValueType | undefined>;
+declare const _default: React.FC<GetFieldSetConsumerProps<FieldSetProps<any[]>>>;
+export default _default;