shineout 1.12.2 → 1.12.3

package/esm/Tag/Tag.js

@@ -0,0 +1,230 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+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 { PureComponent } from '../component';
+import Input from './Input';
+import { defaultProps } from '../utils/proptypes';
+import Spin from '../Spin';
+import icons from '../icons';
+import { wrapSpan } from '../utils/dom/element';
+import { isPromise, isFunc, isString, isEmpty } from '../utils/is';
+import { isDark } from '../utils/color';
+import { tagClass } from './styles';
+import { isRTL } from '../config';
+import getDataset from '../utils/dom/getDataset';
+var hideInput = 0;
+var showInput = 1;
+
+var Tag =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Tag, _PureComponent);
+
+  function Tag(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+    _this.state = {
+      dismiss: 0,
+      inputVisible: hideInput,
+      value: null
+    };
+    _this.dismiss = _this.dismiss.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleClose = _this.handleClose.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.renderClose = _this.renderClose.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.closeTag = _this.closeTag.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.toggleInputVisible = _this.toggleInputVisible.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.inputBlur = _this.inputBlur.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.inputChange = _this.inputChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = Tag.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    var _this$props = this.props,
+        children = _this$props.children,
+        onCompleted = _this$props.onCompleted;
+
+    if (onCompleted && isString(children) && !isEmpty(children)) {
+      this.setState({
+        value: children
+      });
+    }
+  };
+
+  _proto.closeTag = function closeTag(dismiss) {
+    if (dismiss === void 0) {
+      dismiss = 2;
+    }
+
+    this.setState({
+      dismiss: dismiss
+    });
+  };
+
+  _proto.dismiss = function dismiss(e) {
+    var _this2 = this;
+
+    var onClose = this.props.onClose;
+    var callback;
+
+    if (onClose === true) {
+      this.closeTag();
+      return;
+    }
+
+    if (typeof onClose === 'function') {
+      callback = onClose(e);
+    }
+
+    if (isPromise(callback)) {
+      this.setState({
+        dismiss: 1
+      });
+      callback.then(function () {
+        _this2.closeTag();
+      }).catch(function () {
+        _this2.closeTag(0);
+      });
+      return;
+    }
+
+    if (e.defaultPrevented) {
+      return;
+    }
+
+    this.closeTag();
+  };
+
+  _proto.inputBlur = function inputBlur(value) {
+    var onCompleted = this.props.onCompleted;
+    if (isFunc(onCompleted)) onCompleted(value);
+    this.setState({
+      inputVisible: hideInput
+    });
+  };
+
+  _proto.inputChange = function inputChange(value) {
+    this.setState({
+      value: value
+    });
+  };
+
+  _proto.toggleInputVisible = function toggleInputVisible() {
+    var _this$state = this.state,
+        inputVisible = _this$state.inputVisible,
+        value = _this$state.value;
+    var onCompleted = this.props.onCompleted; // if onCompleted is not null
+
+    if (onCompleted && !isEmpty(value)) {
+      this.setState({
+        inputVisible: inputVisible === hideInput ? showInput : hideInput
+      });
+    }
+  };
+
+  _proto.handleClick = function handleClick(e) {
+    var _this$props2 = this.props,
+        onClick = _this$props2.onClick,
+        disabled = _this$props2.disabled;
+    if (disabled) return; // toggle input visible
+
+    this.toggleInputVisible();
+
+    if (typeof onClick === 'function') {
+      onClick(e);
+    }
+  };
+
+  _proto.handleClose = function handleClose(e) {
+    var disabled = this.props.disabled;
+    if (this.state.dismiss > 0 || disabled) return;
+    this.dismiss(e);
+  };
+
+  _proto.renderClose = function renderClose(dismiss) {
+    var onClose = this.props.onClose;
+    if (!onClose) return null;
+    var closeClass = tagClass('close-icon');
+    var loadingClass = tagClass('close-loading');
+
+    if (dismiss === 0) {
+      return React.createElement("div", {
+        className: closeClass,
+        onClick: this.handleClose
+      }, icons.Close);
+    }
+
+    return React.createElement("div", {
+      className: loadingClass
+    }, React.createElement(Spin, {
+      name: "ring",
+      size: 10
+    }));
+  };
+
+  _proto.render = function render() {
+    var _this$state2 = this.state,
+        dismiss = _this$state2.dismiss,
+        inputVisible = _this$state2.inputVisible,
+        value = _this$state2.value;
+    if (dismiss === 2) return null;
+    var _this$props3 = this.props,
+        children = _this$props3.children,
+        className = _this$props3.className,
+        type = _this$props3.type,
+        backgroundColor = _this$props3.backgroundColor,
+        onClose = _this$props3.onClose,
+        disabled = _this$props3.disabled,
+        onCompleted = _this$props3.onCompleted,
+        onEnterPress = _this$props3.onEnterPress,
+        onKeyUp = _this$props3.onKeyUp;
+    var rtl = isRTL(); // if editable and input visible
+
+    if (onCompleted && inputVisible === showInput) return React.createElement(Input, {
+      value: value,
+      onBlur: this.inputBlur,
+      onChange: this.inputChange,
+      onEnterPress: onEnterPress,
+      onKeyUp: onKeyUp
+    });
+    var childrenParsed = wrapSpan(children);
+    var style = this.props.style;
+    var tagClassName = tagClass('_', disabled && 'disabled', type, rtl && 'rtl');
+    var inlineClassName = tagClass('inline');
+    var click = !onClose ? {
+      onClick: this.handleClick
+    } : {};
+    var tagStyle = style || {};
+    if (className) tagClassName += " " + className;
+
+    if (backgroundColor) {
+      tagStyle = _objectSpread({
+        color: isDark(backgroundColor) ? '#fff' : '#000',
+        backgroundColor: backgroundColor,
+        borderColor: 'transparent'
+      }, style);
+    }
+
+    return React.createElement("div", _extends({
+      className: tagClassName,
+      style: tagStyle
+    }, click, getDataset(this.props)), onClose ? React.createElement("div", {
+      onClick: this.handleClick,
+      className: inlineClassName
+    }, childrenParsed) : childrenParsed, this.renderClose(dismiss));
+  };
+
+  return Tag;
+}(PureComponent);
+
+_defineProperty(Tag, "defaultProps", _objectSpread({}, defaultProps, {
+  type: 'default'
+}));
+
+export default Tag;

package/esm/Tag/index.d.ts

@@ -0,0 +1,6 @@
+import Tag from './Tag';
+import Input from './Input';
+declare const _default: typeof Tag & {
+    Input: typeof Input;
+};
+export default _default;

package/esm/Tag/index.js

@@ -0,0 +1,6 @@
+import Tag from './Tag';
+import Input from './Input';
+var Exports = Tag;
+Exports.Input = Input;
+Exports.displayName = 'ShinoutTag';
+export default Exports;

package/esm/Tag/interface.d.ts

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

package/esm/Tag/interface.js

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

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

@@ -0,0 +1,2 @@
+import '../../styles/normalize.less';
+export declare const tagClass: (...args: any) => string;

package/esm/Tag/styles/index.js

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

package/esm/Tag/styles/tag.less

@@ -0,0 +1,107 @@
+@import '../../styles/variables.less';
+@import '../../styles/themes/@{so-theme}.less';
+
+@tag-prefix: ~'@{so-prefix}-tag';
+
+//
+// Alerts
+// --------------------------------------------------
+
+// Base styles
+// -------------------------
+
+.@{tag-prefix} {
+  position: relative;
+  display: inline-block;
+  padding: @tag-padding-y @tag-padding-x;
+  margin: 0 @tag-space;
+  border: 1px solid transparent;
+  background: @tag-bg-color;
+  border-radius: @tag-border-radius;
+  color: @tag-color;
+  cursor: pointer;
+  font-size: @tag-font-size;
+  font-weight: @tag-font-weight;
+  line-height: @tag-default-line-height;
+  transition: all 0.3s;
+
+  .@{tag-prefix}-inline {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  &.@{tag-prefix}-disabled {
+    cursor: not-allowed;
+  }
+
+  &-input {
+    display: inline-block;
+    width: 100px;
+    height: @tag-input-height;
+    margin: 0 0 0 @tag-space;
+    font-size: @tag-font-size;
+    vertical-align: middle;
+
+    input {
+      padding: @tag-input-padding-y @tag-input-padding-x;
+      line-height: 18px;
+    }
+  }
+
+  .@{tag-prefix}-close-icon {
+    display: inline-block;
+    width: @tag-icon-width;
+    margin: 0 0 0 @tag-close-left;
+    .@{tag-prefix}-rtl& {
+      margin: 0  @tag-close-left 0 0;
+    }
+
+    &:hover svg{
+      fill: @tag-close-hover-color;
+    }
+
+    svg {
+      fill: @tag-close-color;
+      width: @tag-icon-width;
+      margin-bottom: 1px;
+    }
+  }
+
+  .@{tag-prefix}-close-loading {
+    display: inline-block;
+    margin: 0 0 0 @tag-close-left;
+    .@{tag-prefix}-rtl& {
+      margin: 0  @tag-close-left 0 0;
+    }
+  }
+
+  &-default {
+    border-color: @tag-border-color;
+  }
+
+  &-success {
+    .tag-variant(@tag-success-bg);
+    color: @tag-success-color;
+  }
+
+  &-info {
+    .tag-variant(@tag-info-bg);
+    color: @tag-info-color;
+  }
+
+  &-warning {
+    .tag-variant(@tag-warning-bg);
+    color: @tag-warning-color;
+  }
+
+  &-danger, &-error {
+    .tag-variant(@tag-danger-bg);
+    color: @tag-danger-color;
+  }
+
+
+  &.@{tag-prefix}-rtl {
+    direction: rtl;
+    text-align: right;
+  }
+}

package/esm/Textarea/Textarea.d.ts

@@ -0,0 +1,27 @@
+import { ChangeEvent, KeyboardEvent, FocusEvent } from 'react';
+import { PureComponent } from '../component';
+import { OriginTextareaProps } from './props';
+interface TextareaState {
+    height: number;
+}
+declare class Textarea extends PureComponent<OriginTextareaProps, TextareaState> {
+    shadow: HTMLTextAreaElement;
+    static defaultProps: {
+        rows: number;
+        resize: boolean;
+    };
+    constructor(props: OriginTextareaProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: OriginTextareaProps): void;
+    getTrim(): boolean;
+    defaultInfo: (value?: string | undefined) => string | Error | null;
+    bindShadow(el: HTMLTextAreaElement): void;
+    resize(value?: string): void;
+    handleChange(e: ChangeEvent<HTMLTextAreaElement>): void;
+    handleKeyUp(e: KeyboardEvent<HTMLTextAreaElement>): void;
+    handleBlur(e: FocusEvent<HTMLTextAreaElement>): void;
+    renderFooter(): JSX.Element | null;
+    renderInfo(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export default Textarea;

package/esm/Textarea/Textarea.js

@@ -0,0 +1,199 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+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, { isRTL } from '../config';
+import { PureComponent } from '../component';
+import { inputClass } from '../Input/styles';
+import cleanProps from '../utils/cleanProps';
+import InputTitle from '../InputTitle';
+import { inputTitleClass } from '../InputTitle/styles';
+var DefaultProps = {
+  rows: 4,
+  resize: false
+};
+
+var Textarea =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Textarea, _PureComponent);
+
+  function Textarea(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "shadow", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "defaultInfo", function (value) {
+      if (!value || value.length === 0) return null;
+      var info = _this.props.info;
+      var text = value.length + " / " + info;
+      if (value.length <= info) return text;
+      return new Error(text);
+    });
+
+    _this.state = {
+      height: 0
+    };
+    _this.bindShadow = _this.bindShadow.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleKeyUp = _this.handleKeyUp.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.resize = _this.resize.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.defaultInfo = _this.defaultInfo.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = Textarea.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    _PureComponent.prototype.componentDidMount.call(this);
+
+    if (this.props.autosize) this.resize();
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (this.props.autosize && prevProps.value !== this.props.value) this.resize(this.props.value);
+  };
+
+  _proto.getTrim = function getTrim() {
+    var trim = this.props.trim;
+    if (trim !== undefined) return trim;
+    if (config.trim !== undefined) return config.trim;
+    return false;
+  };
+
+  _proto.bindShadow = function bindShadow(el) {
+    this.shadow = el;
+  };
+
+  _proto.resize = function resize(value) {
+    if (value || value === '') this.shadow.value = value;
+    var height = this.shadow ? this.shadow.scrollHeight : 0;
+    this.setState({
+      height: height
+    });
+  };
+
+  _proto.handleChange = function handleChange(e) {
+    this.props.onChange(e.target.value);
+
+    if (this.props.autosize) {
+      this.resize(e.target.value);
+    }
+  };
+
+  _proto.handleKeyUp = function handleKeyUp(e) {
+    var onEnterPress = this.props.onEnterPress;
+
+    if (e.keyCode === 13 && onEnterPress) {
+      onEnterPress(e.target.value, e);
+    }
+  };
+
+  _proto.handleBlur = function handleBlur(e) {
+    var newValue = e.target.value;
+    var _this$props = this.props,
+        forceChange = _this$props.forceChange,
+        onBlur = _this$props.onBlur;
+
+    if (this.getTrim()) {
+      newValue = newValue.trim();
+      e.target.value = newValue;
+    }
+
+    forceChange(newValue);
+    if (onBlur) onBlur(e);
+  };
+
+  _proto.renderFooter = function renderFooter() {
+    var _this$props2 = this.props,
+        renderFooter = _this$props2.renderFooter,
+        value = _this$props2.value;
+    if (!(renderFooter && typeof renderFooter === 'function')) return null;
+    return React.createElement("div", {
+      key: "footer",
+      className: inputClass('footer')
+    }, renderFooter(value));
+  };
+
+  _proto.renderInfo = function renderInfo() {
+    var info = this.props.info;
+    var notNumber = typeof info !== 'number';
+    if (typeof info !== 'function' && notNumber) return null;
+    var textInfo = notNumber ? info : this.defaultInfo;
+    var res = textInfo(this.props.value); // empty
+
+    if (!res) return null;
+    var isError = res instanceof Error;
+    var text = isError ? res.message : res;
+    return React.createElement("div", {
+      key: "info",
+      style: {
+        minWidth: 'auto'
+      },
+      className: inputClass(isRTL() ? 'bottom-left' : 'bottom-right', isError ? 'error' : 'tip')
+    }, text);
+  };
+
+  _proto.render = function render() {
+    var _this$props3 = this.props,
+        autosize = _this$props3.autosize,
+        onChange = _this$props3.onChange,
+        maxHeight = _this$props3.maxHeight,
+        info = _this$props3.info,
+        onEnterPress = _this$props3.onEnterPress,
+        resize = _this$props3.resize,
+        renderFooter = _this$props3.renderFooter,
+        inputFocus = _this$props3.inputFocus,
+        innerTitle = _this$props3.innerTitle,
+        placeTitle = _this$props3.placeTitle,
+        props = _objectWithoutPropertiesLoose(_this$props3, ["autosize", "onChange", "maxHeight", "info", "onEnterPress", "resize", "renderFooter", "inputFocus", "innerTitle", "placeTitle"]);
+
+    var value = props.value == null ? '' : props.value;
+    var height = this.state.height || 'auto';
+    var footerEl = this.renderFooter();
+    var className = autosize ? inputClass('auto-size') : inputClass(resize && 'textarea-resize');
+    var cs = classnames(className, innerTitle && inputTitleClass('hidable', 'item'));
+    var ts = [React.createElement("textarea", _extends({}, cleanProps(props), {
+      key: "t",
+      value: value,
+      className: cs,
+      style: {
+        height: height,
+        maxHeight: maxHeight,
+        overflow: 'auto'
+      },
+      onChange: this.handleChange,
+      onKeyUp: this.handleKeyUp,
+      onBlur: this.handleBlur
+    })), footerEl, this.renderInfo()];
+    var cs2 = classnames(inputClass('shadow'), innerTitle && inputTitleClass('hidable', 'item'));
+
+    if (autosize) {
+      ts.push(React.createElement("textarea", {
+        key: "s",
+        ref: this.bindShadow,
+        className: cs2,
+        rows: props.rows,
+        defaultValue: value
+      }));
+    }
+
+    return React.createElement(InputTitle, {
+      innerTitle: innerTitle,
+      open: !!value || !!inputFocus,
+      placeTitle: placeTitle
+    }, ts);
+  };
+
+  return Textarea;
+}(PureComponent);
+
+_defineProperty(Textarea, "defaultProps", DefaultProps);
+
+export default Textarea;