shineout 1.12.2 → 1.12.3

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

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

package/esm/Form/styles/index.js

@@ -0,0 +1,5 @@
+import '../../styles/normalize.less';
+import formLess from './form.less';
+import genaration from '../../utils/classname';
+export var formClass = genaration(formLess, 'form');
+export var inputBorderClass = genaration(formLess, 'inputBorder');

package/esm/Gap/Props.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { StandardProps } from '../@types/common';
+export interface GapProps extends StandardProps {
+    /**
+     * column spacing in the horizontal direction
+     *
+     * 水平方向的列间距
+     *
+     * default: 8
+     */
+    column?: number | string;
+    /**
+     * vertical line spacing
+     *
+     * 垂直方向的行间距
+     *
+     * default: 8
+     */
+    row?: number | string;
+    /**
+     * the styles of child elements
+     *
+     * 子元素自定义样式
+     *
+     * default: -
+     */
+    itemStyle?: React.CSSProperties;
+    /**
+     * children
+     *
+     * 子元素
+     *
+     * default: -
+     */
+    children?: ReactNode;
+}

package/esm/Gap/Props.js

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

package/esm/Gap/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { GapProps } from './Props';
+declare const _default: React.ComponentType<GapProps>;
+export default _default;

package/esm/Gap/index.js

@@ -0,0 +1,74 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { PureComponent } from 'react';
+import classnames from 'classnames';
+import { gapClass } from './styles';
+import support from './support';
+var flexGapSupport = support();
+var DefaultProps = {
+  row: 8,
+  column: 8
+};
+
+var Gap =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Gap, _PureComponent);
+
+  function Gap() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+
+  var _proto = Gap.prototype;
+
+  _proto.getStyle = function getStyle() {
+    var _this$props = this.props,
+        row = _this$props.row,
+        column = _this$props.column,
+        style = _this$props.style;
+    var extendStyle = flexGapSupport ? {
+      rowGap: row,
+      columnGap: column
+    } : {
+      marginBottom: -Number(row)
+    };
+    return Object.assign({}, style, extendStyle);
+  };
+
+  _proto.getItemStyle = function getItemStyle(index) {
+    var _this$props2 = this.props,
+        row = _this$props2.row,
+        column = _this$props2.column,
+        itemStyle = _this$props2.itemStyle,
+        children = _this$props2.children;
+    if (flexGapSupport) return itemStyle;
+    var isLast = React.Children.count(children) - 1 === index;
+    return Object.assign({}, itemStyle, {
+      marginBottom: row
+    }, !isLast && {
+      marginRight: column
+    });
+  };
+
+  _proto.render = function render() {
+    var _this = this;
+
+    var children = this.props.children;
+    var className = classnames(gapClass('_'), this.props.className);
+    return React.createElement("div", {
+      className: className,
+      style: this.getStyle()
+    }, React.Children.map(children, function (child, index) {
+      return child && React.createElement("div", {
+        className: gapClass('item'),
+        style: _this.getItemStyle(index)
+      }, child);
+    }));
+  };
+
+  return Gap;
+}(PureComponent);
+
+_defineProperty(Gap, "defaultProps", DefaultProps);
+
+export default Gap;

package/esm/Gap/interface.d.ts

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

package/esm/Gap/interface.js

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

package/esm/Gap/styles/gap.less

@@ -0,0 +1,10 @@
+@import '../../styles/variables.less';
+@import '../../styles/themes/@{so-theme}.less';
+
+@gap-prefix: ~"@{so-prefix}-gap";
+
+.@{gap-prefix} {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}

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

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

package/esm/Gap/styles/index.js

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

package/esm/Gap/support.d.ts

@@ -0,0 +1 @@
+export default function flexGapSupport(): boolean;

package/esm/Gap/support.js

@@ -0,0 +1,12 @@
+export default function flexGapSupport() {
+  var flex = document.createElement('div');
+  flex.style.display = 'flex';
+  flex.style.flexDirection = 'column';
+  flex.style.rowGap = '1px';
+  flex.appendChild(document.createElement('div'));
+  flex.appendChild(document.createElement('div'));
+  document.body.appendChild(flex);
+  var isSupported = flex.scrollHeight === 1;
+  if (flex.parentNode) flex.parentNode.removeChild(flex);
+  return isSupported;
+}

package/esm/Grid/Props.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+import { StandardProps } from '../@types/common';
+export declare type ResponsiveType = 'sm' | 'md' | 'lg' | 'xl';
+export interface GridProps extends StandardProps {
+    /**
+     * Spacing between grids
+     *
+     * 栅格之间间距
+     *
+     * default: none
+     */
+    gutter?: number;
+    /**
+     * Left offset percentage, 0 <= offset < 1
+     *
+     * 左偏移百分比，0 <= offset < 1
+     *
+     * default: 0
+     */
+    offset?: number;
+    /**
+     * Percentage of width, 0 < number <= 1
+     *
+     * 宽度百分比，0 < number <= 1
+     *
+     * default: 1
+     */
+    width?: number;
+    /**
+     * The min size of responsive: sm: 568px; md: 768px; lg: 992px; xl: 1200px
+     *
+     * 激活响应式的最小尺寸。sm: 568px; md: 768px; lg: 992px; xl: 1200px
+     *
+     * default: 'md'
+     */
+    responsive?: ResponsiveType;
+    /**
+     * Stretch full height of content
+     *
+     * 是否撑满容器高度
+     *
+     * default: 1
+     */
+    stretch?: boolean;
+    /**
+     * children
+     *
+     * 子元素
+     *
+     * default: -
+     */
+    children?: ReactNode;
+}

package/esm/Grid/Props.js

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

package/esm/Grid/index.d.ts

@@ -0,0 +1,7 @@
+import { PureComponent } from 'react';
+import { GridProps } from './Props';
+export default class Grid extends PureComponent<GridProps> {
+    static isGrid: boolean;
+    static displayName: string;
+    render(): JSX.Element;
+}

package/esm/Grid/index.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { PureComponent, Children, cloneElement } from 'react';
+import classnames from 'classnames';
+import { getGrid } from './utils';
+
+var Grid =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Grid, _PureComponent);
+
+  function Grid() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+
+  var _proto = Grid.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        _this$props$width = _this$props.width,
+        width = _this$props$width === void 0 ? 1 : _this$props$width,
+        offset = _this$props.offset,
+        responsive = _this$props.responsive,
+        stretch = _this$props.stretch,
+        children = _this$props.children,
+        gutter = _this$props.gutter,
+        other = _objectWithoutPropertiesLoose(_this$props, ["width", "offset", "responsive", "stretch", "children", "gutter"]);
+
+    var autoCount = 0;
+    var settleWidth = 0;
+    Children.toArray(children).forEach(function (child) {
+      if (child.type && child.type.isGrid) {
+        if (child.props.width) settleWidth += child.props.width;else autoCount += 1;
+      }
+    });
+    var autoWidth = autoCount > 0 ? (1 - settleWidth) / autoCount : 0;
+    var className = classnames(this.props.className, getGrid({
+      width: width,
+      offset: offset,
+      responsive: responsive
+    }));
+    var style = Object.assign({}, this.props.style);
+
+    if (gutter && gutter > 0) {
+      style.width = 'auto';
+      style.display = 'block';
+      style.marginLeft = 0 - gutter / 2 + "px";
+      style.marginRight = 0 - gutter / 2 + "px";
+    }
+
+    return React.createElement("div", _extends({}, other, {
+      style: style,
+      className: className
+    }), Children.toArray(children).map(function (child) {
+      if (child.type && child.type.isGrid) {
+        var pps = {
+          style: Object.assign({}, child.props.style)
+        };
+        if (!child.props.width) pps.width = autoWidth;
+        if (stretch) pps.style = _objectSpread({}, pps.style, {
+          minHeight: '100%',
+          height: '100%'
+        });
+
+        if (gutter && gutter > 0) {
+          pps.style = _objectSpread({}, pps.style, {
+            paddingLeft: gutter / 2,
+            paddingRight: gutter / 2
+          });
+        }
+
+        return cloneElement(child, pps);
+      }
+
+      return child;
+    }));
+  };
+
+  return Grid;
+}(PureComponent);
+
+_defineProperty(Grid, "isGrid", true);
+
+_defineProperty(Grid, "displayName", 'ShineoutGrid');
+
+export { Grid as default };

package/esm/Grid/interface.d.ts

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

package/esm/Grid/interface.js

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

package/esm/Grid/utils.d.ts

@@ -0,0 +1,13 @@
+declare const RESPONSIVE: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+declare type Responsive = keyof typeof RESPONSIVE;
+export declare function getGrid(opt?: number | {
+    width?: number;
+    offset?: number | string;
+    responsive?: Responsive;
+}): string;
+export {};

package/esm/Grid/utils.js

@@ -0,0 +1,97 @@
+import config from '../config';
+var CACHES = {};
+var RESPONSIVE = {
+  sm: '568',
+  md: '768',
+  lg: '992',
+  xl: '1200'
+};
+var GridClassName = config.prefix + "-grid";
+var GridFullClassName = config.prefix + "-grid-full";
+var defaultResponsive = 'md';
+
+function createStyle(text, id) {
+  var style = document.head.querySelector("#" + id);
+
+  if (style) {
+    return;
+  }
+
+  style = document.createElement('style');
+  style.type = 'text/css';
+  style.id = id;
+  style.innerHTML = text;
+  document.head.appendChild(style);
+}
+
+function generateGrid(width, className, responsive) {
+  var minWidth = RESPONSIVE[responsive];
+  var text = "@media screen and (min-width: " + minWidth + "px) { ." + className + "{width: " + width + "%} }";
+  createStyle(text, className);
+}
+
+function generateOffset(width, className, responsive) {
+  var minWidth = RESPONSIVE[responsive];
+  var text = "@media screen and (min-width: " + minWidth + "px) { ." + className + "{margin-left: " + width + "%} }";
+  createStyle(text, className);
+}
+
+function generate(w, type, res) {
+  var width = w;
+  var responsive = res || defaultResponsive;
+
+  if (!width || width <= 0) {
+    return '';
+  }
+
+  if (width > 1) {
+    width = 1;
+  }
+
+  width = (width * 100).toFixed(4);
+  width = width.substr(0, width.length - 1);
+  var className = config.prefix + "-" + type + "-" + responsive + "-" + width.replace('.', '-');
+
+  if (!CACHES[className]) {
+    if (type === 'grid') {
+      generateGrid(width, className, responsive);
+    } else {
+      generateOffset(width, className, responsive);
+    }
+
+    CACHES[className] = true;
+  }
+
+  return className;
+}
+
+export function getGrid(opt) {
+  var options = opt;
+
+  if (!options) {
+    return '';
+  }
+
+  if (typeof options === 'number') {
+    options = {
+      width: options
+    };
+  }
+
+  var _options = options,
+      width = _options.width,
+      offset = _options.offset,
+      responsive = _options.responsive;
+  var gridClass = generate(width, 'grid', responsive);
+  var offsetClass = generate(offset, 'offset', responsive);
+  return GridClassName + " " + GridFullClassName + " " + gridClass + " " + offsetClass;
+}
+
+function init() {
+  var text = [];
+  text.push("\n." + GridClassName + " {\n  position: relative;\n  display: inline-block;\n  zoom: 1;\n  letter-spacing: normal;\n  word-spacing: normal;\n  vertical-align: top;\n  text-rendering: auto;\n  box-sizing: border-box;\n}");
+  text.push("." + GridFullClassName + "{width:100%}");
+  createStyle(text.join(''), GridClassName);
+}
+
+init();

package/esm/Icon/Icon.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IconCompProps } from './Props';
+declare function Icon(props?: IconCompProps): JSX.Element;
+declare namespace Icon {
+    var propTypes: {
+        prefix: PropTypes.Requireable<string>;
+        name: PropTypes.Requireable<string>;
+        fontFamily: PropTypes.Requireable<string>;
+        fontSize: PropTypes.Requireable<string | number>;
+    };
+    var defaultProps: {
+        prefix: string;
+        fontFamily: string;
+        name: string;
+        type: string;
+        className: string;
+        size: import("../@types/common").RegularAttributes.Size;
+        style: React.CSSProperties;
+    };
+    var displayName: string;
+}
+export default Icon;

package/esm/Icon/Icon.js

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { getProps, defaultProps } from '../utils/proptypes';
+import { iconClass } from './styles';
+
+function Icon(props) {
+  if (props === void 0) {
+    props = _objectSpread({}, defaultProps, {
+      prefix: 'icon',
+      fontFamily: 'iconfont',
+      name: '',
+      type: 'default'
+    });
+  }
+
+  var _props = props,
+      children = _props.children,
+      prefix = _props.prefix,
+      type = _props.type,
+      name = _props.name,
+      fontFamily = _props.fontFamily,
+      fontSize = _props.fontSize,
+      ext = _props.ext,
+      otherProps = _objectWithoutPropertiesLoose(_props, ["children", "prefix", "type", "name", "fontFamily", "fontSize", "ext"]);
+
+  var className = classnames(iconClass('_', type), props.className, prefix + "-" + name);
+  var style = Object.assign({}, {
+    fontFamily: fontFamily,
+    fontSize: fontSize
+  }, props.style);
+
+  if (ext === 'js') {
+    return React.createElement("i", _extends({}, otherProps, {
+      className: className,
+      style: style
+    }), React.createElement("svg", {
+      className: iconClass('svg'),
+      "aria-hidden": "true"
+    }, React.createElement("use", {
+      xlinkHref: "#" + prefix + "-" + name
+    })));
+  }
+
+  return React.createElement("i", _extends({}, otherProps, {
+    className: className,
+    style: style
+  }), children);
+}
+
+Icon.propTypes = _objectSpread({}, getProps(PropTypes, 'children', 'size', 'type'), {
+  prefix: PropTypes.string,
+  name: PropTypes.string,
+  fontFamily: PropTypes.string,
+  fontSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+});
+Icon.defaultProps = _objectSpread({}, defaultProps, {
+  prefix: 'icon',
+  fontFamily: 'iconfont',
+  name: '',
+  type: 'default'
+});
+Icon.displayName = 'ShineoutIcon';
+export default Icon;

package/esm/Icon/Props.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { StandardProps, RegularAttributes } from '../@types/common';
+export interface IconCompProps extends StandardProps {
+    /**
+     * The unicode code of the icon.
+     *
+     * 图标 unicode 编码，和 name 二选一
+     *
+     * default: -
+     */
+    children?: React.ReactNode;
+    /**
+     * desc: Icon class name (the part without the prefix)
+     *
+     * 图标类名（去除前缀的部分），值参照具体使用的图标库
+     *
+     * default:
+     */
+    name?: string;
+    /**
+     * desc: Icon size, same as style.fontsize
+     *
+     * 图标大小，和 style.fontSize 相同
+     *
+     * default:
+     */
+    fontSize?: string | number;
+    /**
+     * desc: Built-in color type
+     *
+     *内置颜色类型
+  
+     * default: 'default'
+     */
+    type?: RegularAttributes.Type | 'info';
+    /**
+     * Size of pagination
+     *
+     * 尺寸
+     *
+     * default: 'default'
+     */
+    size?: RegularAttributes.Size;
+    /**
+     * Size of pagination
+     *
+     * 类名前缀
+     *
+     * default: 'default'
+     */
+    prefix?: string;
+    /**
+     * Size of pagination
+     *
+     * font-family 需要和引入的css/js文件内的font-family一致
+     *
+     * default: 'iconfont'
+     */
+    fontFamily?: string;
+    /**
+     * -
+     *
+     * -
+     *
+     * -
+     */
+    ext?: string;
+}
+declare type IconComp = React.FC<IconCompProps>;
+/**
+ * Function, returns a new component. A project can create more than one, but fontFamily must be the unique.
+ *
+ * 函数，返回一个新的组件，一个项目内可以创建多个，但是 fontFamily 不能相同
+ *
+ * @param url 图标css或js文件地址，使用在线地址，不需要引入到项目中。如果在 link或script 中已经引用过，可以为空(null)
+ * @param fontFamily font-family 需要和引入的css/js文件内的font-family一致
+ * @param prefix 类名前缀
+ */
+declare function Icon(url: string, fontFamily?: string, prefix?: string): IconComp;
+export default Icon;

package/esm/Icon/Props.js

@@ -0,0 +1 @@
+export default Icon;

package/esm/Icon/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconCompProps } from './Props';
+export default function icon(url: string, fontFamily?: string, prefix?: string): React.ComponentType<IconCompProps>;

package/esm/Icon/index.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from './Icon';
+var links = {};
+var scripts = {};
+export default function icon(url, fontFamily, prefix) {
+  if (fontFamily === void 0) {
+    fontFamily = 'iconfont';
+  }
+
+  if (prefix === void 0) {
+    prefix = 'icon';
+  }
+
+  if (typeof url !== 'string') {
+    console.error("Shineout Icon url must be a string, but get " + url);
+    return null;
+  }
+
+  var ext = url.substr(url.lastIndexOf('.') + 1);
+
+  if (ext === 'css' && !links[url]) {
+    links[url] = true;
+    var link = document.createElement('link');
+    link.setAttribute('rel', 'stylesheet');
+    link.setAttribute('type', 'text/css');
+    link.setAttribute('href', url);
+    document.head.appendChild(link);
+  }
+
+  if (ext === 'js' && !scripts[url]) {
+    var script = document.createElement('script');
+    scripts[url] = script;
+    script.setAttribute('src', url);
+    document.body.appendChild(script);
+  }
+
+  var wrapperIcon = function wrapperIcon(props) {
+    return React.createElement(Icon, _extends({
+      ext: ext,
+      fontFamily: fontFamily,
+      prefix: prefix
+    }, props));
+  };
+
+  wrapperIcon.isShineoutIcon = true;
+  return wrapperIcon;
+}

package/esm/Icon/interface.d.ts

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

package/esm/Icon/interface.js

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